Scroll texture shader on isometric tile cells?

elvisish

Is it possible to scroll a texture on an isometric tile in a direction (say, Vector(1.0,-1.0) and have the cell look correct? I've tried it with this basic shader applied to a tile:

shader_type canvas_item;

uniform vec2 direction = vec2(0.0,0.0); uniform float speed = 1;

void fragment() { COLOR = texture(TEXTURE, UV + (direction * TIME * speed)); }

But it just causes the entire tile to warp in square shaped blocks, rather than just the isometric shape of the tile. Any way of doing this properly? enter image description here

Without shader: https://imgur.com/U3DQhAW With shader (video link): https://imgur.com/YqbJ2eU

elvisish

Thanks so much to @kleonc for the help, here's the working shader!

shader_type canvas_item;

uniform vec2 direction = vec2(0.0, 0.0);
uniform float speed = 1.0;

vec2 toIsoUV(vec2 uv)
{
    return vec2(uv.x + uv.y - 0.5, -uv.x + uv.y + 0.5);
}

vec2 fromIsoUV(vec2 uv)
{
    return vec2(0.5 * (uv.x - uv.y + 1.0), 0.5 * (uv.x + uv.y));
}

void fragment()
{
    vec2 uv = UV;
    uv -= direction * speed * TIME;
    uv = toIsoUV(uv);
    uv -= floor(uv); // make it into [0, 1) x [0, 1)
    uv = fromIsoUV(uv);
    COLOR = vec4(texture(TEXTURE, uv).rgb, texture(TEXTURE, UV).a);
}