(7/8) Get Beautiful Glow

In Reality, very hot objects emit light and when a camera sees it, the brightest part appears white and the glow can be seen around it.

To get this effect, I found out that we need to push the final color beyond 1. Here is a very simple Material that demonstrates this.

(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.🫣

(5/8) Setup Bloom Effect:

NOTE: You can make the threshold higher depending on your scene.

(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⬇️)

(3/8) Amazing Glow Effects in The Wild

The most perfect threejs Bloom I have seen belong to projects made by
@Jessezhouu(twitter). And a more recent example is @bruno-simon.bsky.social's new portfolio.

(2/8)
I struggled to get perfect bloom in my projects. The default Bloom Effect was visually good, but it made every object glow.

I tried using SelectiveBloom for a while. While we can make specific objects glow, the downside is that the visual quality not as good as the default bloom effect.

This is how to get Beautiful Glow Effect in your threejs projects!✨

Mini Tutorial⬇️

(0/8)

#threejs #website #3d

Sweet Orange Glow.

How do the OGs like Jesse Zhou and Bruno Simon get amazing Bloom in their Projects?✨

Stay tuned for a mini tutorial tomorrow!👀

#threejs #webGL