RenderTarget read test

by grano

HTML

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<script src = "http://mrdoob.github.com/three.js/examples/js/shaders/CopyShader.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/EffectComposer.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/RenderPass.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/postprocessing/ShaderPass.js"></script>

CSS

body {
				margin: 0px;
				background-color: #000000;
				overflow: hidden;
}

JavaScript

var renderer;
var composer1, pass1, renderTarget1;
var composer2, pass2;

init();
animate();

function init() {
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    const vertexShader = `
      void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
      }
  	`
    
    renderTarget1 = new THREE.WebGLRenderTarget(64, 64)
    pass1 = new THREE.ShaderPass({
    	uniforms: {},
    	vertexShader,
      fragmentShader: `
      	void main() {
        	gl_FragColor = vec4(1,0,0,1);
        }
      `
    })
    //pass1.renderToScreen = true
    composer1 = new THREE.EffectComposer(renderer, renderTarget1)
    composer1.addPass(pass1)
    
    pass2 = new THREE.ShaderPass({
    	uniforms: {
      	tRenderTarget1: { type: 't', value: renderTarget1.texture },
      },
    	vertexShader,
      fragmentShader: `
      	uniform sampler2D tRenderTarget1;
        
      	void main() {
        	gl_FragColor = texture2D(tRenderTarget1, vec2(0.5));
        }
      `
    })
    pass2.renderToScreen = true
    composer2 = new THREE.EffectComposer(renderer)
    composer2.addPass(pass2)

    document.body.appendChild(renderer.domElement);
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
		composer1.render()
    composer2.render()
}