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…
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 );
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:
@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… ?
@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.
