Selective Bloom in Three.js?

[elijahschrock]

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

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

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/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 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

[prisoner849]

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.

[elijahschrock]

ahh ok any suggestions?

[drcmda]

have you tried GitHub - vanruesc/postprocessing: A post processing library that provides the means to implement image filter effects for three.js. ? 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.

[prisoner849]

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

[JYuan94]

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?

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： [image] This is an example of my code:

Thank you

[PavelBoytchev]

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?

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 [image] And a close-up: [image]