How do I stop EffectComposer from destroying my transparent background?

Question

I want a threejs canvas with a transparent background. I'm creating a renderer like this:

# coffeescript
r = new THREE.WebGLRenderer alpha: true

When I call r.render(), it works as expected, with the objects appearing over a transparent background. However, when I attempt to add post-processing with EffectComposer like so:

cmp = new THREE.EffectComposer r
cmp.addPass new THREE.RenderPass scene, camera

effect = new THREE.FilmPass 0.9, 2, 2048, true
effect.renderToScreen = true
cmp.addPass effect

cmp.render 3

the new result is that the scene renders as expected (objects have the Film effect correctly applied), EXCEPT the background is no longer transparent as desired...instead it's black and opaque. Why? How can I prevent post-processing from tampering with my transparent background?

Answer 1

var width = window.innerWidth || 1;
var height = window.innerHeight || 1;
var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };

var renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );

cmp = new THREE.EffectComposer(r, renderTarget);

If you don't specify a rendertarget then it will create one with THREE.RGBFormat which will make you lose alpha.

Answer 2

RenderPass by default clears your rendertarget!!!!! and will clear your alpha too if you are not careful. Therefore the clear color will be set, not from your original renderer but from the RenderPass function itself and potentially default to full opacity. There are some options you should look at: clear,clearAlpha, clearColor,clearDepth. What worked for me was to set renderPass.clear=false . I also manually cleared the renderer so my renderer.autoClear=false If you start doing a lot of passes, it helps to have precise control over when you want your renderer to clear and call them manually.