PlaneBufferGeometry keeps sticking in the screen

Questions
, , , ,
1

When I add my vertexShader or fragmentShader that planeBufferGeometry change its behaviour to stick in the screen.

This is my demo source code.

and this is the code of shaders.

      <mesh ref={planeRef} {...props}>
        <planeBufferGeometry args={[1, 1]} />
        <shaderMaterial
          uniforms={{
            u_tex0: { value: texture } as THREE.IUniform<THREE.Texture>,
            u_time: { value: 1.0 } as THREE.IUniform<number>,
            u_resolution: { value: new THREE.Vector2() } as THREE.IUniform<
              THREE.Vector2
            >,
            u_mouse: { value: new THREE.Vector2() } as THREE.IUniform<
              THREE.Vector2
            >
          }}
          fragmentShader={`
                    varying vec2 vUv;
                    uniform sampler2D u_tex0; 
                    uniform float u_animate; 
                    uniform vec2 u_resolution; 
                    uniform float u_time; 
                    #define PI 3.14159265358979323846 
            
                    float pixelPattern(float x, float frequency, float speed, float time) { 
                        return sin((x * frequency - time * speed) * 2.0 * PI); 
                    } 
            
                    void main() { 
        
                        vec2 st = vUv; 
                        vec4 original_img = texture2D(u_tex0, st); 
                        float grayscale_value = dot(original_img.rgb, vec3(0.299, 0.587, 0.114)); 
                        vec4 grayscale_img = vec4(vec3(grayscale_value), 1.0); 
                        float transitionSpeed = 1.0; 
                        float transition = st.x * 6.0 - u_time * transitionSpeed; 
                        float pixelSize = 0.005; 
                        vec2 pixelUV = vec2(floor(st.x  / pixelSize) * pixelSize, floor(st.y / st.x  / pixelSize * 2.0) * pixelSize); 
                        float pixelDistortion = pixelPattern(pixelUV.y / pixelUV.x, 5.0, 0.001, u_time); 
                        vec2 distortedUV = vec2(st.x, st.y + pixelDistortion * smoothstep(0.0, 1.0, transition)); 
                        vec4 distortedImg = texture2D(u_tex0, distortedUV); 
                        vec3 final_color = mix(distortedImg.rgb, grayscale_img.rgb, smoothstep(0.0, 1.0, transition)); 
                        gl_FragColor = vec4(final_color, 1.0); 
            
                    }
                    `}
          vertexShader={`
                        varying vec2 vUv; 
                        void main() { 
                            vUv = uv; 
                            gl_Position = vec4( position, 1.0 ); 
                        } 
                        `}
        />
      </mesh>
2

Nvm I just had to add this projectionMatrix and modelViewMatrix

            vertexShader={`
                varying vec2 vUv; 
                void main() { 
                    vUv = uv; 
                    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 
                } 
                `
            } 
            fragmentShader={` 
                uniform sampler2D u_tex0; 
                uniform float u_time; 
                uniform vec2 u_resolution; 
                varying vec2 vUv; 
                #define PI 3.14159265358979323846 
                float pixelPattern(float x, float frequency, float speed, float time) { 
                    return sin((x * frequency - time * speed) * 2.0 * PI); 
                } 
                void main() { 
                    vec2 st = vUv; 
                    vec4 original_img = texture2D(u_tex0, st); 
                    float grayscale_value = dot(original_img.rgb, vec3(0.299, 0.587, 0.114)); 
                    vec4 grayscale_img = vec4(vec3(grayscale_value), 1.0); 
                    float transitionSpeed = 1.0; 
                    float transition = st.x * 6.0 - u_time * transitionSpeed; 
                    float pixelSize = 0.005; 
                    vec2 pixelUV = vec2(floor(st.x / pixelSize) * pixelSize, floor(st.y / st.x / pixelSize * 2.0) * pixelSize); 
                    float pixelDistortion = pixelPattern(pixelUV.y / pixelUV.x, 5.0, 0.001, u_time); 
                    vec2 distortedUV = vec2(st.x, st.y + pixelDistortion * smoothstep(0.0, 1.0, transition)); 
                    vec4 distortedImg = texture2D(u_tex0, distortedUV); 
                    vec3 final_color = mix(distortedImg.rgb, grayscale_img.rgb, smoothstep(0.0, 1.0, transition)); 
                    gl_FragColor = vec4(final_color, 1.0); } 
                `
            }