# \[SOLVED\] EffectComposer + Layers

**URL:** <https://discourse.threejs.org/t/solved-effectcomposer-layers/3158>\
**Category:** Questions\
**Tags:** effect-composer\
**Created:** [June 18, 2018, 3:43pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158 "2018-06-18T15:43:05Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 18, 2018, 3:43pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/1 "2018-06-18T15:43:05Z")

</div>

Hi, community!  
Now it’s my turn to ask for help 🙂

I’m trying to achieve the result of glowing from behind of an object.  
The idea is to render the glowing object first (using `THREE.EffectComposer()`) , then to render the usual object (using `render`). For this purpose I used layers.

All my code is here:  
[http://jsfiddle.net/prisoner849/mjfckw02/](http://jsfiddle.net/prisoner849/mjfckw02/)

Possibly (or better to say - obviously), I don’t get how the things work.  
So, could you, at least, point me to the right direction with achieving of the desired result?

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [June 18, 2018, 6:41pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/2 "2018-06-18T18:41:14Z")

</div>

What is the desired result? This is what I’m seeing, and the glow looks pretty nice.

![glow](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/3/3f21d57bc2e69f4ba025ce5266104aed6d6f1ac9.jpg)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 18, 2018, 6:51pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/3 "2018-06-18T18:51:24Z")

</div>

@marquizzo  
Yes, I see the same 🙂  
But in front of that glowing red box, there should be a non-glowing box of `THREE.MeshLambertMaterial()` with the aqua color.

![BackOfGlow](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c0593c0531b8fb35de72e62a2e85b3b900b8863c.png)

That’s how it looks, if you leave just `renderer.render(scene, camera)` in the render loop.

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [June 18, 2018, 7:42pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/4 "2018-06-18T19:42:47Z")

</div>

I believe I was able to achieve what you needed:

[http://jsfiddle.net/marquizzo/nfaLovpk/](http://jsfiddle.net/marquizzo/nfaLovpk/)

![glow2](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/a/ab6fa83d24cbfcf1487afb991c55ef56d723f08d.jpg)

The trick is in `renderer.clearDepth();` between each render pass with `renderer.autoClear = false;`:

```auto
renderer.autoClear = false;
obj.layers.set(0);
objBack.layers.set(1);

function render(){
  requestAnimationFrame(render);
  
  renderer.clear();
  
  camera.layers.set(1);
  composer.render();
  
  renderer.clearDepth();
  camera.layers.set(0);
  renderer.render(scene, camera);
}

```

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 18, 2018, 7:48pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/5 "2018-06-18T19:48:21Z")

</div>

Yeah, that’s it!  
Many thanks for explanation and I owe you beer (if you drink it, of couse) 😄 🍻

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [June 18, 2018, 8:05pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/6 "2018-06-18T20:05:11Z")

</div>

I drink it as if my life depended on it!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 18, 2018, 8:13pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/7 "2018-06-18T20:13:51Z")

</div>

Better visual effect, if to use `objBack.layers.enable(1);` instead of `objBack.layers.set(1);`

---

<div class="post-metadata">

**Author:** ![TheJim01](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thejim01/32/2007_2.png) [@TheJim01](https://discourse.threejs.org/u/TheJim01)\
**Post date:** [June 18, 2018, 8:16pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/8 "2018-06-18T20:16:45Z")

</div>

Clearing the depth buffer makes the aqua box always render on top. Rotate the scene so the aqua box should be “behind” the glowing box to see the effect. Is that the desired effect?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 18, 2018, 8:21pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/9 "2018-06-18T20:21:46Z")

</div>

@TheJim01

> [@prisoner849](#):
>
> `objBack.layers.enable(1);`

That makes the red box visible for both 0 and 1 layers, thus it make the scene look correctly if to rotate it to the angle when the red box should cover the aqua box.  
But it’s just an example and in the real app, the scene never be rotated to look at the boxes from behind 🙂

Just in case, reference about layers:

> <https://stackoverflow.com/questions/34099808/how-to-make-objects-visible-to-only-one-camera-in-a-three-js-scene/34100361#34100361>

---

<div class="post-metadata">

**Author:** ![TheJim01](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/thejim01/32/2007_2.png) [@TheJim01](https://discourse.threejs.org/u/TheJim01)\
**Post date:** [June 18, 2018, 8:37pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/10 "2018-06-18T20:37:53Z")

</div>

Gotcha, sorry I must have missed your update when typing my reply. Asynchronous systems… who needs 'em!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 20, 2018, 2:43pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/11 "2018-06-20T14:43:03Z")

</div>

I should’ve found it myself before asking here 😃

> <https://stackoverflow.com/questions/13309289/three-js-geometry-on-top-of-another/13309722#13309722>

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [June 20, 2018, 5:30pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/12 "2018-06-20T17:30:54Z")

</div>

There’s a WestLangley solution to every problem. 😄

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 20, 2018, 5:35pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/13 "2018-06-20T17:35:13Z")

</div>

Indeed 😄  
But this does not cancel the fact that you helped me. 🍻

---

<div class="post-metadata">

**Author:** ![Rui\_Ma](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rui_ma/32/4767_2.png) [@Rui\_Ma](https://discourse.threejs.org/u/Rui_Ma)\
**Post date:** [March 26, 2019, 9:27am UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/14 "2019-03-26T09:27:13Z")

</div>

Thanks very much。

---

<div class="post-metadata">

**Author:** ![gooodWin67](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gooodwin67/32/2893_2.png) [@gooodWin67](https://discourse.threejs.org/u/gooodWin67)\
**Post date:** [March 26, 2019, 6:57pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/15 "2019-03-26T18:57:40Z")

</div>

I like this glow effect, but why doesn’t blue color work? 🙄  
all other colors work

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/61c02569a0d0e7bbc5243848f0710567f432a16a.png)

---

<div class="post-metadata">

**Author:** ![DVOBS](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dvobs/32/5362_2.png) [@DVOBS](https://discourse.threejs.org/u/DVOBS)\
**Post date:** [May 2, 2019, 7:29am UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/16 "2019-05-02T07:29:53Z")

</div>

[http://jsfiddle.net/br9s142o/](http://jsfiddle.net/br9s142o/)

---

<div class="post-metadata">

**Author:** ![mrgoonie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrgoonie/32/6609_2.png) [@mrgoonie](https://discourse.threejs.org/u/mrgoonie)\
**Post date:** [August 6, 2019, 10:30am UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/17 "2019-08-06T10:30:21Z")

</div>

Hi guys! Is there any solutions to make the bloom effect appear on this edges as well?

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/5/5419473ca9805e3f8d03f55ba1460906268a63cc.jpeg)

Thanks,

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [August 6, 2019, 11:37am UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/18 "2019-08-06T11:37:01Z")

</div>

Sure, use the approach with selective bloom: [three.js examples](https://threejs.org/examples/?q=sele#webgl_postprocessing_unreal_bloom_selective)

Examples with that approach:

> [@Totentanz (Selective Bloom)](https://discourse.threejs.org/t/totentanz-selective-bloom/8329):
>
> Hi community! Here is a pic: And there is a working demo: Based on the example with [Selective Bloom](https://threejs.org/examples/#webgl_postprocessing_unreal_bloom_selective). The slight change comes with the idea that instead of swapping materials between current ones and total black, we use a global variable for a uniform that gets 0 or 1 in case of what state of scene we need: render with bloom when unnecessary object must be black (1) or render without darkening (0). That variable sets for all the materials via .onBeforeCompile(). Having that un…

> [@Instancing + selective bloom](https://discourse.threejs.org/t/instancing-selective-bloom/7506):
>
> Hi community! Nothing special, I just wanted to know how the selective bloom will work with instanced meshes. To be honest, I’m not sure that I chose the correct way in using of .onBeforeCompile(). thinking Criticism and advice are welcomed. Here is a pic And there is a working demo: You can find a music video from youtube at the bottom right corner of the window. Just for better atmosphere of…

---

<div class="post-metadata">

**Author:** ![mrgoonie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrgoonie/32/6609_2.png) [@mrgoonie](https://discourse.threejs.org/u/mrgoonie)\
**Post date:** [August 6, 2019, 12:48pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/19 "2019-08-06T12:48:10Z")

</div>

Thank you @prisoner849, I’ve tried that example, worked as expected. But it seems to darken the original material of “non-bloomed” objects as well. Any clues to avoid this?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [August 6, 2019, 1:27pm UTC](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158/20 "2019-08-06T13:27:20Z")

</div>

Maybe it’s because of those parameters:

```auto
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = Math.pow(params.exposure, 4.0);

```

[Next page](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158.md?page=2)