# Selective Bloom in Three.js?

**URL:** <https://discourse.threejs.org/t/selective-bloom-in-three-js/35345>\
**Category:** Questions\
**Tags:** unrealbloompass, post-processing, materials, shaders\
**Created:** [February 26, 2022, 10:46am UTC](https://discourse.threejs.org/t/selective-bloom-in-three-js/35345 "2022-02-26T10:46:04Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![elijahschrock](https://avatars.discourse-cdn.com/v4/letter/e/3ec8ea/32.png) [@elijahschrock](https://discourse.threejs.org/u/elijahschrock)\
**Post date:** [February 26, 2022, 10:46am UTC](https://discourse.threejs.org/t/selective-bloom-in-three-js/35345/1 "2022-02-26T10:46:05Z")

</div>

I am trying to make a Neon sign using three.js and I am using BloomPass and emmissive texture to create this effect. I am primarily following this example as I only want One of the models in my scene to glow. (([three.js webgl - postprocessing - unreal bloom selective](https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective.html)))

The issue I am running in to is that this is occuring.

 ![main-view](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/b/4bba7718cd54ae52e92cb69a6022782b7d063b39.jpeg)

Some elements in my background model and my pacman glb model are glowing and the neon sign is barely glowing. When I tried to change the color of the neon sign or see any changes to it nothing happens. It also makes my scene super dark, it isn’t generally this dark.

This is another example with higher exposure and settings [1](https://i.stack.imgur.com/xrC6v.jpg): [https://i.stack.imgur.com/KUPW9.jpg](https://i.stack.imgur.com/KUPW9.jpg)

An issue I was having before the exposure went really low is that the entire scene had the Bloom effect and was super blurry.

Based on other examples I have written the code with the intention of rendering everything in the scene black and then render the Neon scene with bloom then render everything back to original colors however, this is obviously not working.

[Github](https://github.com/ElijahSchrock/project_get_paid) _Don’t worry about how messy the code is im just trying everything here lol_

**VERY IMPORTANT** I have the current code in the NeonSign.js file that is where I have been doing my post processing work. DO NOT use the code in postprocessing.js it is just for reference and is not correct and will not reproduce this error

---

<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:** [February 26, 2022, 11:11am UTC](https://discourse.threejs.org/t/selective-bloom-in-three-js/35345/2 "2022-02-26T11:11:39Z")

</div>

Hi!  
Looks like you mix two approaches for selective bloom.  
With the approach with `globalBloom` uniform you don’t use that uniform in animation loop at all.  
And with the approach from the official example you don’t use layers for the loaded object. 🤔

---

<div class="post-metadata">

**Author:** ![elijahschrock](https://avatars.discourse-cdn.com/v4/letter/e/3ec8ea/32.png) [@elijahschrock](https://discourse.threejs.org/u/elijahschrock)\
**Post date:** [February 26, 2022, 5:46pm UTC](https://discourse.threejs.org/t/selective-bloom-in-three-js/35345/3 "2022-02-26T17:46:24Z")

</div>

ahh ok any suggestions?

---

<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:** [February 26, 2022, 6:02pm UTC](https://discourse.threejs.org/t/selective-bloom-in-three-js/35345/4 "2022-02-26T18:02:56Z")

</div>

have you tried [GitHub - vanruesc/postprocessing: A post processing library that provides the means to implement image filter effects for three.js.](https://github.com/vanruesc/postprocessing) ? this is a better effect composer in every way, it is faster (creates a merged uber-shader from all the passes), has more effects and things like object and layer selection are inbuilt.

---

<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:** [February 26, 2022, 6:40pm UTC](https://discourse.threejs.org/t/selective-bloom-in-three-js/35345/5 "2022-02-26T18:40:30Z")

</div>

> [@elijahschrock](#):
>
> ahh ok any suggestions?

Try to realize how each of these approaches works and pick one.  
Another option is to use the lib (a very good one, by the way), mentioned by @drcmda.

---

<div class="post-metadata">

**Author:** ![JYuan94](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jyuan94/32/36075_2.png) [@JYuan94](https://discourse.threejs.org/u/JYuan94)\
**Post date:** [April 26, 2023, 6:52am UTC](https://discourse.threejs.org/t/selective-bloom-in-three-js/35345/6 "2023-04-26T06:52:06Z")

</div>

Hello, my friend, in the situation I encounter now and with this type, although I know that I can use React-Three-Fiber to achieve the desired effect, I want to learn Selective Bloom in Three.js, which is my example. Could you please help me to see how to deal with it?

> [@How do I set up post-processing to make only one object in the scene glow, not all of it?](https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643):
>
> I set the post-processing effect for the scene, I want the curve to glow, other objects will not be affected, now the whole scene is exposed, how should I deal with it, please ask the community to help check, thank you! This is what I have now： This is an example of my code:

Thank you

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [April 26, 2023, 8:17am UTC](https://discourse.threejs.org/t/selective-bloom-in-three-js/35345/7 "2023-04-26T08:17:36Z")

</div>

I just posted in another thread how to fake a selective bloom without post-processing (at the cost of more objects with opacity):

> [@How do I set up post-processing to make only one object in the scene glow, not all of it?](https://discourse.threejs.org/t/how-do-i-set-up-post-processing-to-make-only-one-object-in-the-scene-glow-not-all-of-it/50643/9):
>
> This does not address the original issue. Nevertheless it shows an alternative approach without post-processing. A selective bloom can be faked by stacking several objects with decreasing opacity. Try it here: [https://codepen.io/boytchev/full/ExdmvxE](https://codepen.io/boytchev/full/ExdmvxE)[[image]](https://codepen.io/boytchev/full/ExdmvxE) And a close-up: [[image]](https://codepen.io/boytchev/full/ExdmvxE)