Shader Transition effects in UV

Questions
, , ,
1

So in shaders, can I ask why the UV’s ( I’m honestly what is uv are…) of the images as you see when the transition of the images from left to right happen there is like a horizontal straight line colored in the image.

Screenshot (606)
Screenshot (606)1837×1010 127 KB

As you see in the right side its not properly accurate. I don’t know how can I remove that…

also this is the code of fragmentShader

        precision mediump float;

        uniform vec2 u_resolution;
        uniform float u_time;
        
        uniform sampler2D u_texture;
        
        void main() {
            vec2 st = gl_FragCoord.xy / u_resolution.xy;
            vec4 color = texture2D(u_texture, st);
            
            float progress = smoothstep(0.0, 2.0, (st.x - u_time/5.0));
            
            vec3 gray = vec3(0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b);
            vec3 rgb = vec3(color.r, color.g, color.b);
            
            vec3 slideColor = mix(gray, rgb, progress);
            vec2 slideCoord = vec2((st.x + progress)/1.0, st.y);
            
            gl_FragColor = texture2D(u_texture, slideCoord) * vec4(slideColor, 1.0);
        }

The effect I’m trying to achieve is that its grayscale at first and then transition to colored image.

Here is the source code sample.

the smoothstep is my stepping in size of progress in image 
float progress = smoothstep(0.0, 2.0, (st.x - u_time/5.0));
2

  1. Consider not naming variables in GLSL vec3 rgb, since .rgb is an alternative to .xyz when reading vector components (ie. you can now do rgb.rgb which will quickly lead to endless amounts of confusion, and GLSL is confusing enough without that :smiling_face_with_tear:)

  2. The issue is caused by the fact that you’re trying to pick a sample outside of the texture (and, by default, three will just clamp the sample to the edge color - docs.) You can check if the sample coordinates are within 0.0 - 1.0 range and just don’t do the mixing in case they aren’t, for example:

if (slideCoord.x < 0.0 || slideCoord.x > 1.0 || slideCoord.y < 0.0 || slideCoord.y > 1.0) {
  gl_FragColor = gray;
} else {
  gl_FragColor = texture2D(u_texture, slideCoord) * vec4(slideColor, 1.0);
}
3

sorry I don’t get it…can you markdown the demo as my demo?

4

Nvm I get it but I added a little difference however, do you think there is still better to animate this?

            if (slideCoord.x < 0.0 || slideCoord.x > 1.0 || slideCoord.y < 0.0 || slideCoord.y > 1.0) {
                gl_FragColor = vec4(gray,1.0);
            } else {
                gl_FragColor = texture2D(u_texture, slideCoord) * vec4(slideColor, 1.0);
            }

this is the modification