# How to use bloom effect not for all object in scene?

**URL:** <https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244>\
**Category:** Questions\
**Tags:** bloom\
**Created:** [March 10, 2021, 4:04pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244 "2021-03-10T16:04:30Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![bazylevnik0](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bazylevnik0/32/52631_2.png) [@bazylevnik0](https://discourse.threejs.org/u/bazylevnik0)\
**Post date:** [March 10, 2021, 4:04pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/1 "2021-03-10T16:04:30Z")

</div>

I make 2 scenes: first for objects, second for clone “lighting” objects with EffectComposer(BloomPass,FilmPass). I trying make `renderer.render(scene,camera)` with `composer.render()` - but it is not work, and i m reading here this is no good practic and way to troubles. How i can blooming not all scene?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 10, 2021, 4:26pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/2 "2021-03-10T16:26:28Z")

</div>

use [GitHub - vanruesc/postprocessing: A post processing library that provides the means to implement image filter effects for three.js.](https://github.com/vanruesc/postprocessing) instead of jsm effectcomposer. it is more flexible and also outperforms the former. it has natural support for selective effects.

---

<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:** [March 10, 2021, 4:27pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/3 "2021-03-10T16:27:17Z")

</div>

Hi!  
Selective bloom? [three.js examples](https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom_selective)

---

<div class="post-metadata">

**Author:** ![bazylevnik0](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bazylevnik0/32/52631_2.png) [@bazylevnik0](https://discourse.threejs.org/u/bazylevnik0)\
**Post date:** [March 11, 2021, 2:44pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/5 "2021-03-11T14:44:36Z")

</div>

hey! i thought it might be possible to avoid this example 🙂

---

<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:** [March 11, 2021, 2:46pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/6 "2021-03-11T14:46:24Z")

</div>

Yeah, the example itself is overcomplicated, but the conception of selective bloom is not that complex.

---

<div class="post-metadata">

**Author:** ![okonno](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/okonno/32/3195_2.png) [@okonno](https://discourse.threejs.org/u/okonno)\
**Post date:** [March 12, 2021, 5:43am UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/7 "2021-03-12T05:43:50Z")

</div>

Tangentially, as I’m just getting into this - I see the postprocessing lib uses “trianges instead of quads” and some more jargon I’m unfamiliar with.  
Any thoughts on how much more efficient it is, and if three.js will catch up? ( I would always prefer to stick to the native lib if possible )

---

<div class="post-metadata">

**Author:** ![bazylevnik0](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bazylevnik0/32/52631_2.png) [@bazylevnik0](https://discourse.threejs.org/u/bazylevnik0)\
**Post date:** [March 15, 2021, 12:36pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/8 "2021-03-15T12:36:30Z")

</div>

> [@\[SOLVED\] EffectComposer + Layers](https://discourse.threejs.org/t/solved-effectcomposer-layers/3158):
>
> Hi, community! Now it’s my turn to ask for help slight_smile 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 a…

use layers; and see more: [Edit fiddle - JSFiddle - Code Playground](http://jsfiddle.net/prisoner849/mjfckw02/)

thank prisoner849

---

<div class="post-metadata">

**Author:** ![Jerry\_Thomas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jerry_thomas/32/21094_2.png) [@Jerry\_Thomas](https://discourse.threejs.org/u/Jerry_Thomas)\
**Post date:** [September 21, 2021, 2:42pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/9 "2021-09-21T14:42:09Z")

</div>

Yes but… in all of the abouve examples the bloom effect gets clipped by the non bloom layers. I’ve been unsuccessful in getting the “Glow” effect to overlay onto non bloom effect background objects. I would expect that some of the “glow” would bleed over onto the non bloomed portion of the cube in the above examples.

Here is another way to visualize this problem.  
I challenge anyone to demonstrate how to create a glowing wireframe cube where only the edges of the wireframe cube are glowing. THEN: inside of that glowing wireframe cube you have a solid NON-BLOOM cube that is 80% the size of the wireframe cube.

---

<div class="post-metadata">

**Author:** ![Harold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harold/32/32136_2.png) [@Harold](https://discourse.threejs.org/u/Harold)\
**Post date:** [September 21, 2021, 4:00pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/10 "2021-09-21T16:00:02Z")

</div>

I’m not sure if you’re familiar with the way Unity does its bloom post-processing, but The Cherno has a nice video explaining it, just search for “bloom the cherno” in YouTube and you’ll find it. He explains that you can easily achieve real selective bloom using SRGB color values (stuff above 1). I’m unsure how three would deal with this, so I’ve made my own implementation work with capturing any object that has an emissive value.

You then downsample the threshold image 13 times, blur it, then upsample and combine them again making a total of approx 28 render passes. This sounds scary but since you’re down sampling to extremely low resolutions, and mainly rely on linear filtering for the initial blurring, this even runs blazingly fast on average mobile hardware.

I don’t have an actual demo that you can see as a fiddle since I’ve baked this all deep in my own engine and rendering pipeline, but if you’re familiar enough with post processing techniques and know your way around render targets and three in general, this is pretty trivial to implement.

As for your challenge, create a box as a wall, put emissive value on it to make it “emit light”, then put a box in front of it and you’ll see light from the wall bleeding over the box, as long as the wall is visible. Remember, you’re dealing with _post processing_, meaning all information you can work with is what you see on screen.

---

<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:** [September 22, 2021, 8:13am UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/11 "2021-09-22T08:13:28Z")

</div>

> [@Jerry\_Thomas](#):
>
> I challenge anyone to demonstrate

Challenge accepted 🤔

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/2/b26856a6539e88eef0e291f47f170b73ff89131c.jpeg)

![GlowingWireframeBox](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/e/ee56318d2ac2a4ff349a93ef630a920a0704427a.gif)

Box sizes:  
inner wireframe - 5  
solid box - 4 (80% of inner wireframe)

---

<div class="post-metadata">

**Author:** ![Jerry\_Thomas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jerry_thomas/32/21094_2.png) [@Jerry\_Thomas](https://discourse.threejs.org/u/Jerry_Thomas)\
**Post date:** [September 22, 2021, 2:04pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/12 "2021-09-22T14:04:21Z")

</div>

Very impressive @prisoner849. I tried for quite some time earlier this year to achieve this. Any chance you could make this available via a public fiddle. I would love to learn the proper techniques and how to better utilize layering.

---

<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:** [September 22, 2021, 4:48pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/13 "2021-09-22T16:48:22Z")

</div>

Sure.  
Here you are:  
https://codepen.io/prisoner849/embed/preview/LYLrawm?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=LYLrawm

Pretty much based on the official example with selective bloom.

---

<div class="post-metadata">

**Author:** ![mayyar](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@mayyar](https://discourse.threejs.org/u/mayyar)\
**Post date:** [September 25, 2021, 1:43pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/14 "2021-09-25T13:43:24Z")

</div>

> [@prisoner849](#):
>
> Here you are:

Hello Mr ,  
to make the box non bloom you set

```javascript
   box.material = darkMaterial;
   bloomComposer.render();
   box.material = lightMaterial;

```

but if i have a scene with 14 obj and every single one have a different material ,and only one obj i need to bee with bloom , i have to set a dark material to every 13 obj ? there is no different way ?

---

<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:** [September 26, 2021, 12:20pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/15 "2021-09-26T12:20:39Z")

</div>

> [@mayyar](#):
>
> i have to set a dark material to every 13 obj ?

Yes.  
Make them black, render with bloomComposer, restore their original materials.

---

<div class="post-metadata">

**Author:** ![bemuse](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bemuse/32/19160_2.png) [@bemuse](https://discourse.threejs.org/u/bemuse)\
**Post date:** [March 25, 2022, 12:49pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/16 "2022-03-25T12:49:51Z")

</div>

![2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/c/2cb9c7b1bdc6963ec285b4e6c4576fc8a24e2c8a.jpeg)  
 ![1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/7/77b1058584f11313363b2f67d0c82f9ed19be8c7.jpeg)

Hello.  
Isn’t possible to make box pure white?  
It seems to be darken because of darkMaterial.  
Thank you.

---

<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:** [March 25, 2022, 12:54pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/17 "2022-03-25T12:54:14Z")

</div>

@bemuse try to comment this line: `renderer.toneMapping = THREE.ReinhardToneMapping;`

---

<div class="post-metadata">

**Author:** ![bemuse](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/bemuse/32/19160_2.png) [@bemuse](https://discourse.threejs.org/u/bemuse)\
**Post date:** [March 25, 2022, 12:56pm UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/18 "2022-03-25T12:56:51Z")

</div>

Great!!!  
Thanks!

---

<div class="post-metadata">

**Author:** ![Stevieba](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stevieba/32/25533_2.png) [@Stevieba](https://discourse.threejs.org/u/Stevieba)\
**Post date:** [April 11, 2022, 3:03am UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/19 "2022-04-11T03:03:17Z")

</div>

Nice one @prisoner849

When I change the scene background to a dark grey, it seems to cause a very white scene.  
`scene.background = new THREE.Color(0x444444)`. Can you explain whats happening here?

---

<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:** [April 11, 2022, 6:31am UTC](https://discourse.threejs.org/t/how-to-use-bloom-effect-not-for-all-object-in-scene/24244/20 "2022-04-11T06:31:51Z")

</div>

@Stevieba  
I modified the example:

```nohighlight
// define and set the color
let bgColor = 0x404040;
scene.background = new THREE.Color(bgColor);

...
// animation loop
renderer.setAnimationLoop(() => {
  box.material = darkMaterial;
  scene.background.set(0x000000); // all, except blooming objects, must be black, including background
  bloomComposer.render();
  box.material = lightMaterial;
  scene.background.set(bgColor); // set background color back
  finalComposer.render();
  //renderer.render(scene, camera);
})

```