Effect Composer keep transparency

effectcomposer

#1

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!


#2

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/


#3

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?!


#4

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.


#5

Thanks a lot - that solved it indeed!


#6

@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… ?


#7

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