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:

https://jsfiddle.net/f2Lommf5/15175/

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)

https://jsfiddle.net/blackInk/o8fh7bwp/

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:

https://jsfiddle.net/blackInk/qLpse7jv/2/

Hope someone can enlighten me?!

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

https://jsfiddle.net/qLpse7jv/10/

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

@trusktr Did you figure this out? If so, is there any open source code you could link to that demonstrates?

I’ve been trying to do this exact thing, allow the creation of arbitrary “layers”, each with their own effects. But so far I haven’t been able to find any examples or documentation that outline how to accomplish that.

I think I ended up using GitHub - pmndrs/postprocessing: A post processing library that provides the means to implement image filter effects for three.js. as it had more options and features.