# Effect Composer keep transparency

**URL:** <https://discourse.threejs.org/t/effect-composer-keep-transparency/4447>\
**Category:** Questions\
**Tags:** effect-composer\
**Created:** [October 9, 2018, 10:30pm UTC](https://discourse.threejs.org/t/effect-composer-keep-transparency/4447 "2018-10-09T22:30:47Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [October 9, 2018, 10:30pm UTC](https://discourse.threejs.org/t/effect-composer-keep-transparency/4447/1 "2018-10-09T22:30:47Z")

</div>

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

```javascript
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!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 10, 2018, 9:45am UTC](https://discourse.threejs.org/t/effect-composer-keep-transparency/4447/2 "2018-10-10T09:45:04Z")

</div>

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/](https://jsfiddle.net/f2Lommf5/15175/)

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [October 10, 2018, 12:00pm UTC](https://discourse.threejs.org/t/effect-composer-keep-transparency/4447/3 "2018-10-10T12:00:16Z")

</div>

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/](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/](https://jsfiddle.net/blackInk/qLpse7jv/2/)

Hope someone can enlighten me?!

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 10, 2018, 12:33pm UTC](https://discourse.threejs.org/t/effect-composer-keep-transparency/4447/4 "2018-10-10T12:33:11Z")

</div>

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

[https://jsfiddle.net/qLpse7jv/10/](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.

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [October 10, 2018, 12:37pm UTC](https://discourse.threejs.org/t/effect-composer-keep-transparency/4447/5 "2018-10-10T12:37:24Z")

</div>

Thanks a lot - that solved it indeed!

---

<div class="post-metadata">

**Author:** ![blackInk](https://avatars.discourse-cdn.com/v4/letter/b/c2a13f/32.png) [@blackInk](https://discourse.threejs.org/u/blackInk)\
**Post date:** [October 10, 2018, 2:57pm UTC](https://discourse.threejs.org/t/effect-composer-keep-transparency/4447/6 "2018-10-10T14:57:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [October 10, 2018, 3:45pm UTC](https://discourse.threejs.org/t/effect-composer-keep-transparency/4447/7 "2018-10-10T15:45:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [October 7, 2020, 6:34am UTC](https://discourse.threejs.org/t/effect-composer-keep-transparency/4447/8 "2020-10-07T06:34:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Spenser\_Saling](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/spenser_saling/32/22525_2.png) [@Spenser\_Saling](https://discourse.threejs.org/u/Spenser_Saling)\
**Post date:** [May 12, 2022, 4:18pm UTC](https://discourse.threejs.org/t/effect-composer-keep-transparency/4447/9 "2022-05-12T16:18:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![trusktr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trusktr/32/13726_2.png) [@trusktr](https://discourse.threejs.org/u/trusktr)\
**Post date:** [May 27, 2022, 4:37am UTC](https://discourse.threejs.org/t/effect-composer-keep-transparency/4447/10 "2022-05-27T04:37:50Z")

</div>

> [@Spenser\_Saling](#):
>
> Did you figure this out? If so, is there any open source code you could link to that demonstrates?

I think I ended up using [GitHub - pmndrs/postprocessing: A post processing library for three.js.](https://github.com/pmndrs/postprocessing) as it had more options and features.