This is how to get Beautiful Glow Effect in your threejs projects!✨ Mini Tutorial⬇️ (0/8) #threejs #website #3d

(1/8) TL;DR: Bloom started appearing in games and 3D rendering as a way to make bright areas of a scene glow realistically. It quickly became essential for enhancing 3D scenes. Think of the glowing swords, neon lights or magic spells in games. Those effects are enhanced with Bloom.

(2/8) For the longest time, I struggled to get perfect bloom in my projects. The default Bloom Effect was visually good, but it made every object in the scene to glow. So, I tried using SelectiveBloom for a while. The advantage was that I could make specific objects glow. This effect from the postprocessing library could even exclude the background from the selection. But, the downsides always bothered me. I found the visual quality not as good as the default bloom effect. And, Implementing selection was a bit "hacky" for me. Here is a screenshot from my old portfolio website that uses SelectiveBloom Effect

(3/8) Amazing Glow Effects in The Wild The most perfect threejs Bloom I have seen belong to projects made by @Jessezhouu. And a more recent example is @bruno_simon's new portfolio.

(4/8) So, what's the solution? We have a few options: 1. Selective Bloom 2. Using multiple bloom passes to tune the effect 3. and, a better method I found out is to just set a very high threshold and push colors beyond "1" on all channels. (I am using method 3 in this project⬇️)

(5/8) Setup Bloom Effect: NOTE: You can make the threshold higher depending on your scene.

(6/8) Make an object glow. The default practice that I came across online was to just set the emissive property of the material and increase the emissive intensity. But, this looks UGLY.🫣

(7/8) Get Beautiful Glow In Reality, when very hot objects emit light and a camera sees the object, the brightest part appears white and then the glow can be seen around it. To get this effect, I found out that one needs to only push the final color beyond 1. Here is a very simple ShaderMaterial that demonstrates this. Notice what I am passing to the color Uniform.

(8/8) Useful resources I found when researching this topic: - by @TheCherno - by @iced_coffee_dev - These resources go into more detail on the topic of Bloom.

And... That is how I implement Bloom these days. ⚡️Repost this thread if you found it helpful!⚡️

I had no idea you could set the blend function… thank you I knew you had to push the colors above 1 but this is a life saver for me. I’ve been cheap and just multiply the colors but they don’t glow off the object.

I too was doing that at first, but again it’s just like setting the emissive intensity.