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

2
votes

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?

1
javascriptgraphicsthree.js
Any chances to demonstrate the issue with a live example? Or maybe with a GitHub repository? - Mugen87
codepen.io/lilrooness/pen/QWjdjgP here is a codepen demonstrating the issue - lilroo
There are many interesting things: using PlaneGeometry() (instead of PlaneBufferGeoemtry()), position as uv. - prisoner849
THanks for the hint @prisoner849 - changed the vertex shader to use UV instaed of position and it started working. I'm new to this and I didn't realise UV was available to the vertext shader - lilroo
@manthrax this was intentional for the perlin noise fragment shader, however I was re-suing the same vertex shader for the final render, and this was causing problems thanks for the help :) - lilroo

1 Answers

1
votes

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;