Scroll texture shader on isometric tile cells?

Archive
1
:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By 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: Imgur: The magic of the Internet
With shader: Imgur: The magic of the Internet

2
:bust_in_silhouette: Reply From: 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);
}