Whats the best way to achieve a glow effect?

I’ve a simple project, i want to make the headlamps of a car glow. I’ve looked at unreal BloomPass, selective bloom and implemented it. But since i wanna light up the individual lamp and not the whole glass covering it, it’s become a problem. i’ve to add the glass to the bloom layer otherwise it won’t work, but since i put it on the glass the lamps aren’t looking as bright as i want them to be.

another option is to apply a light object and replace the mesh, idk if this is the right way. and some lights like the DRL lamps aren’t simple lights.
so i want to know how does one add it to such complex geometry.

i’ve looked into glowmesh library.

do i need to write a custom shader or something for this to work as i want it to ?

I feel selective bloom is overused. Make the emissive surfaces brighter — much brighter! — and don’t limit yourself to [0,1] values. Set the luminance threshold to something >1. Then there’s no problem from surfaces that are simply whiteish, but not emissive, adding an unwanted bloom. Also be sure your tone mapping is at the end of the post-processing stack, not before bloom, and that you’re using a float or half-float render target for the effect composer.

What’s luminance threshold and where does one set it up ?

With UnrealBloomPass from the three.js package, that’s bloomPass.threshold. Other bloom implementations might have a slightly different name for it though.

okay got it, and what’s the render target for effect composer ?
this just seems so overwhelming

also anything to help with the bloom Layer ? i need to apply it on the emissive material or on the glass ?


can something help me achieve this in headlamp glow ?

Bloom is a screen-space effect, and isn’t applied to any particular surface — it can be drawn on blank space, similar to lens flare.

I think what you’re seeing in that screenshot is a combination of strong environmental lighting (THREE.RoomEnvironment is similar) and a reflective surface. If there’s any bloom in that image, it is subtle.

oh okay, i got that bloom is a screen effect and the layers selection makes those objects bloom. that’s why it needs to be the front most mesh for it to work. otherwise the top most layer will just override it.

and this screenshot isn’t a three js rendered image, i just simply want a surface to glow especially the light bulbs. everything else is fine. but setting it as emissive isn’t that strong effect. how do it make that completely white so that if looks like it’s glowing ?

Thanks for your help i understood bloom was unnecessary i can achieve that with emissive property set up. will need to tweak it up slowly but thanks for your help

I’m not sure this image is using emissive either actually. Just very strong lighting from an environment map, reflected off of the glass covering the headlight, and off the metallic paint on the hood of the car. The headlamp itself might be emitting a bit of light, but isn’t much of what you see.

i think there must be a misunderstanding. you use screen space bloom, but with a threshold of 1 or above, so that nothing blooms. now any color on any material that goes beyond RGB 1 or whatever the threshold is will glow. you don’t need layers, and copy passes and all that, selective bloom is built into the effect without you having to do anything at all, just crank the material on the headlight and it will glow.

as for emissive, yes it will work, it’s the same principle, but it won’t work without bloom postpro. btw consider using GitHub - pmndrs/postprocessing: A post processing library for three.js. instead of three/examples/jsm/postprocessing, it much more advanced and runs circles around the jsm one. bloom is called BloomEffect there, do not forget to enable the mipMapBlur setting.

these examples pair threejs with react, but that’s of no importance, they also just use bloom with a threshold: