Three.js 将 THREE.ShaderMaterial 用于 map 将 renderTarget.texture 用于四边形时出现纹理缩放问题

Question

A codepen demonstrating this issue is here: https://codepen.io/lilrooness/pen/QWjdjgP

I'm rendering noise to a render target and then using that render target to texture a quad that I render to the screen.

When using the render target as a texure I'm encoutering a problem with the textures size.

It works fine if I use new THREE.MeshBasicMaterial({ map: renderTarget.texture })

but when I use my own material

        var renderMaterial = new THREE.ShaderMaterial({
            uniforms: {
                tex: { type: 'sampler2D', value: renderTarget.texture }
            },
            fragmentShader: pixelateFragmentShader(),
            vertexShader: standardVertexShader()
        })

I get a very small texture that's clamped

This is the vertex shader that I use for both renders:

                varying lowp vec3 vUv;

                void main() {
                    vUv = position;
                    vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0);
                    gl_Position = projectionMatrix * modelViewPosition; 
                }

this is the rendering function (im using the same camera to render both times)

        function animate() {
            time += 0.1;
            quad.material.uniforms.time.value = time;
            requestAnimationFrame(animate);
            renderer.setRenderTarget(renderTarget);
            renderer.render(bufferScene, camera);
            renderer.setRenderTarget(null);
            renderer.render(scene, camera);
        }

Again, this works fine if I use the MeshBasicMaterial. What am I doing wrong?

Answer 1

The problem was that, in my vertex shader I was setting vUv = position

While this was desired behaviour for the perlin noise effect, I was re-using the same vertex shader to render the render target texture

I changed it to: vUv = uv;