CODEWITHSUNDEEP
javascriptgraphicsthree.js
lilroo
lilroo

Reputation: 3118

Three.js Texture scaling issue when using THREE.ShaderMaterial to map a renderTarget.texture to a quad

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 })

enter image description here

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 enter image description here

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?

Upvotes: 2

Views: 397

Answers (1)

lilroo
lilroo

Reputation: 3118

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;

Upvotes: 1

Related Questions