GLSL translation in fragment shader not working as expected

Question

I wrote a simple GLSL shader that creates a pattern similar to the colored squares pattern shown on this page. Then I added code to move the pattern across the screen by following this example. This is my code:

st = vec3(TexCoord.x , TexCoord.y , 0.0);
vec3 translate = vec3(cos(u_time),sin(u_time), 0.0);
st+= translate * 0.1;
st = fract(st * 10);

color = vec3(st.x,st.y,1.0);

Everything works fine and the pattern moves in a circular motion around the origin. The problem arises when I want to move the texture without using u_time eg. If I want to move the texture 5 units in the x direction and 2 units in the y direction. I tried the following code:

st = vec3(TexCoord.x , TexCoord.y , 0.0);
vec3 translate = vec3(5,2, 0.0); //This line is different
st+= translate * 0.1;
st = fract(st * 10);

color = vec3(st.x,st.y,1.0);

But the texture does not move at all when I do it like that and using bigger values only stretches the texture the direction( if x = 5000000 the texture is stretched in the x direction).

My question is why does this happen and how can I correct it?

Kind regards.

Rabbid76 Rabbid76 · Accepted Answer · 2020-12-05T12:56:52

You need to shift the texture coordinates by an offset < 1.0:

~~vec3 translate = vec3(5,2, 0.0);~~

vec3 translate = vec3(0.5, 0.2, 0.0);

Texture coordinates are in range [0.0, 1.0]. Translating the texture by an integral multiple of 1 has the same effect as translating the texture by 0.0.
Note that the result of the sin and cos functions is in the range [-1.0, 1.0].

GLSL translation in fragment shader not working as expected

1 Answers