In my current project, I want to use multiple shader in one render pass. I thought this could be achieved by rendering only the last pass to the screen and all the previous passes to a renderTarget and then passing this renderTarget as a texture to the next shader.

The problem in my case seems to be in my render loop in this following code:

```
// something is going wrong here:    
viewer.renderer.render(viewer.scene, viewer.camera, viewer.renderTarget);

viewer.uniforms.tDiffuse.value = viewer.renderTarget;
viewer.uniforms.fragmentShader = viewer.fragment2;

viewer.renderer.render(viewer.scene, viewer.camera);

```

In order to make things more clear, I built this snippet

```js
var viewer = {
    width: 512,
    height: 512
};

initViewer = function() {
    viewer.vertex     = $('#vertexShader').text();
    viewer.fragment1  = $('#fragmentShader1').text();
    viewer.fragment2  = $('#fragmentShader2').text();    

    viewer.camera = new THREE.OrthographicCamera(viewer.width / -2, viewer.width / 2, viewer.height / 2, viewer.height / -2, -1000, 1000);

    viewer.camera.position.z = 100;

    viewer.renderer = new THREE.WebGLRenderer();
    viewer.scene = new THREE.Scene();

    viewer.uniforms = {
        alpha: {
            type: 'f',
            value: '1.0'
        }, tDiffuse: {
            type: 't',
            value: ''
        }
    };

    viewer.initialMaterial = new THREE.ShaderMaterial({
        uniforms: viewer.uniforms,
        vertexShader: viewer.vertex,
        fragmentShader: viewer.fragment1
    });

    viewer.plane = new THREE.Mesh(new THREE.PlaneGeometry(viewer.width, viewer.height), viewer.initialMaterial);

    viewer.scene.add(viewer.plane);

    $('body').append(viewer.renderer.domElement);

    viewer.renderTarget = new THREE.WebGLRenderTarget( 512, 512 );

    render();
};

render = function() {

    // commenting out the next line makes everything work
    viewer.renderer.render(viewer.scene, viewer.camera, viewer.renderTarget);

    viewer.uniforms.tDiffuse.value = viewer.renderTarget;
    viewer.uniforms.fragmentShader = viewer.fragment2;

    viewer.renderer.render(viewer.scene, viewer.camera);

    requestAnimationFrame(render);
};

initViewer();
```

```css
canvas 
{
    border: 1px solid lime;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">

precision mediump float;

varying vec2 v_texCoord;
varying vec4 vertexPosition;

void main()
{
    v_texCoord = uv;
    vec3 p = position;
    vec4 mvPosition = modelViewMatrix * vec4(p, 1.0 );
    gl_Position = projectionMatrix * mvPosition;
    vertexPosition = gl_Position;
}
</script>

<script id="fragmentShader1" type="x-shader/x-fragment">

precision mediump float;

void main()
{
    gl_FragColor = vec4(1.0, 0.0, 0.0, 0.2);
}
</script>

<script id="fragmentShader2" type="x-shader/x-fragment">

precision mediump float;
uniform sampler2D tDiffuse;
varying vec2 v_texCoord;

void main()
{
    gl_FragColor = texture2D( tDiffuse, v_texCoord) * vec4(0.0, 1.0, 1.0, 0.2);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
```

Any ideas on what I am doing wrong?