Effect Composer keep transparency

Is it possible to keep transparency when using the effect composer?
By now, if I´m having a setup like below, the renderpass, if renderedToScreen would keep
the transparency, but by adding fxaa its rendered on black (without transparency) again… :frowning:

I´m doing something wrong or misunderstand something in the concept for sure?!

var width = window.innerWidth;
var height = window.innerHeight;
var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: true };
var renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );

this.blurComposer = new THREE.EffectComposer( renderer, renderTarget );

var renderPass = new THREE.RenderPass( scene, this._camera);
renderPass.clearColor = new THREE.Color(0, 0, 0);
renderPass.clearAlpha = 0;
renderPass.clear = false;
//renderPass.renderToScreen = true;

var fxaaPass = new THREE.ShaderPass( THREE.FXAAShader );
fxaaPass.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight );
fxaaPass.renderToScreen = true;

this.blurComposer.addPass( renderPass );
this.blurComposer.addPass( fxaaPass );

Any ideas, tips or help?
Thanks a lot!

Can you please demonstrate the issue in a live demo? Use the following fiddle as a basis since it already contains some of your code for post processing:


Sure, I hope that helps finding the problem. In the fiddle, I´m working with 2 scenes, one rendered the “default” way, one rendered via the effectComposer. When I render them in the order I want and don´t use “fxaa” or any other effect, it works -> like in this fiddle (the grey sphere is rendered keeping the transparency so you see the yellow spheres in the back)


When now adding a fxaa-Pass, only the grey sphere is shown on a black background. Aka the transparency was lost and you can´t see the yellow sphere´s scene any more -> as shown in here:


Hope someone can enlighten me?!

One approach to solve the problem is demonstrated in the following fiddle:


The idea is to make the material of the full screen quad transparent which is used for the FXAA pass.

1 Like

Thanks a lot - that solved it indeed!

@Mugen87 any idea what I could do to keep transparency if I add another postpro-Pass on top of fxaa? Cause if I do it simply brings back in some “black” color as result… ?

Not sure. In general, FXAA should always be the last pass in your post processing chain so antialiasing works best.

1 Like

@Mugen87 Can you elaborate how to extend this to more than two “layers” (suppose any other effect, not just fxaa, f.e. blur, etc)? I’m having a difficult time figuring what’s the pattern to use for any number of layers, and being able to apply any effect on any layer (imagine like photoshop layers).