Can't Get Three.js Effectcomposer To Work

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

Solution 1:

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

Solution 2:

I'm having some issues with the EffectComposer aswell.

But I think it purely comes down to not knowing how it's all working behind the hood.

You can fix your issue (as a bit of a hack)

if you add

var effectFilm = new THREE.FilmPass( 0, 0, 0, false );
effectFilm.renderToScreen = true;
composer.addPass( effectFilm );