Three.JS r71: Transparent renderer doesn't work with post-processing filters

Question

I'm trying to render a BloomPass on my current scene, and have the background show through from the body of the containing page. However, when the BloomPass is applied, the background becomes black.

My example is here: http://plnkr.co/edit/0mp0jaGVF6it52HY7aq2?p=preview

I tried following the suggestions in this quite old thread here https://github.com/mrdoob/three.js/issues/1080 on my local version of the plunkr (eg Changing the ClearAlpha flags in RenderPass), but these have no effect. This black background also persists regardless of which shaders I use (Tried also with FilmPass and FXAA)

Running Chrome 45.0.2454.101 (64-bit) on Yosemite 10.10.5

Answer 1

If you plan to use EffectComposer extensively, you will likely have to invest the time to understand it completely. There are a lot of subtleties.

You want the post-processing effect to be transparent.

To do so, you need to make sure the render targets used by the Composer have an alpha channel -- that is, are of THREE.RGBAFormat .

composer.renderTarget1.format = THREE.RGBAFormat;
composer.renderTarget2.format = THREE.RGBAFormat;
effectBloom.renderTargetX.format = THREE.RGBAFormat;
effectBloom.renderTargetY.format = THREE.RGBAFormat;

three.js r.73