Can't get three.js EffectComposer to work

javascript, three.js

Solution

First of all, `EffectComposer` is not part of the library -- it's part of the examples. So it's not officially supported.

So yes, you have to "know how it's working behind the hood."

You can fix your problem by adding an extra `CopyPass` like so:

var renderPass = new THREE.RenderPass( scene, camera );

var copyPass = new THREE.ShaderPass( THREE.CopyShader );
copyPass.renderToScreen = true;

var composer = new THREE.EffectComposer( renderer );
composer.addPass( renderPass );
composer.addPass( copyPass );

composer.render( 0.05 );

Problem

I want to start doing some postprocessing on my renders with the EffectComposer but I can't get the most basic setup to render to the screen. It just stays blank. I must be looking over something. Does anybody have an idea? ``` <!doctype html> <html> <head> <title>game</title> <style type="text/css"> html, body { margin: 0px; width: 100%; height: 100%; } canvas { display: block; } </style> </head> <body> <canvas id="viewport"></canvas> <script type="text/javascript" src="three.js"></script> <script type="text/javascript" src="CopyShader.js"></script> <script type="text/javascript" src="ShaderPass.js"></script> <script type="text/javascript" src="EffectComposer.js"></script> <script type="text/javascript" src="RenderPass.js"></script> <script type="text/javascript" src="MaskPass.js"></script> <script type="text/javascript"> var width = document.body.clientWidth; var height = document.body.clientHeight; var canvas = document.querySelector('#viewport'); var renderer = new THREE.WebGLRenderer({canvas: canvas}); renderer.setSize(width, height); var scene = new THREE.Scene(); var cube = new THREE.Mesh( new THREE.CubeGeometry(30, 30, 30), new THREE.MeshPhongMaterial({color: 0xFF0000})); scene.add(cube); var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000); camera.position = new THREE.Vector3(60, 60, 60); camera.lookAt(cube.position); camera.updateMatrix(); scene.add(camera); var pointLight = new THREE.PointLight(0xFFFFFF); pointLight.position = new THREE.Vector3(100, 80, 20); scene.add(pointLight); var renderPass = new THREE.RenderPass(scene, camera); renderPass.renderToScreen = true; var composer = new THREE.EffectComposer(renderer); composer.addPass(renderPass); renderer.clear(); composer.render(); //renderer.render(scene, camera); </script> </body> </html> ``` If I uncomment the last line I get something on the screen.

Original source