Tips on how to go about projecting a shader onto the face of rotating three.js plane?

Questions
1

I applied the shader to the Plane material, but currently the shader view is static and not affected by the rotation of the plane. GIF shows a simple test shader drawing 25 rectangles, but not adapting to the planes position. I need help figuring out if there is an easier way to do it before I commit to heavily modifying fragment shader to simulate UV coordinates based on object transformation

Gif: three.js rotating plane - Imgflip

2

if you’re using THREE.ShaderMaterial object transformations are pretty much straight forward by using
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

without seeing your vertex and fragment shader code it’s difficult to guess how you have your shader material setup but you should be able to add something like this to your vertex shader…

varying vec2 vUv;

//define vUv in void main
void main() {
    vUv = uv;
}

and then the following in your fragment shader…

varying vec2 vUv;

void main() {
  mainImage(gl_FragColor, vUv);
}

which would make the shader material “stick” to the uv coordinates no matter the view position of the camera or transformation of the object.

3

thanks for Excellent reply. My shader code already seems to conform to your recommendations in my newbie eyes, here is vertex end fragment shader code:
Vertex Shader:

                    varying vec2 vUv;
                    void main() {
                    vUv = uv;

                    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
                    }

Fragment Shader:

    varying vec2 vUv;
    void main(){

    	vec2 st = gl_FragCoord.xy/iResolution;
        vec3 color = vec3(0.0);
    
        st *= 5.0;      // Scale up the space by 5
        st = fract(st); // Wrap around 1.0
    
        // Now we have 25 spaces that go from 0-1
    
        color = vec3(st,0.0);
    	gl_FragColor = vec4(color,1.0);

      mainImage(gl_FragColor, vUv);
    }

Thanks again

4

There’s likely a proper way but to make what you have work you can wrap your fragment shader like this…

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {

    vec2 st = gl_FragCoord.xy/iResolution;
    vec3 color = vec3(0.0);
    
    st *= 5.0;      // Scale up the space by 5
    st = fract(st); // Wrap around 1.0
    
    // 25 spaces that go from 0-1
    
    color = vec3(st,0.0);
    gl_FragColor = vec4(color,1.0);

} 

void main(){
  mainImage(gl_FragColor, vUv);
}