three.js - 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.