The Ebenezer

This is so good! 🙌

Do you have any references please?

Looks like this app doesn’t have a bookmark feature. I need it so badly haha!

🥂

here it is:
bsky.app/profile/theb...

And... That is how I implement Bloom.

⚡️Repost this thread if you found it helpful!⚡️

YouTube video by SimonDev How Big Budget AAA Games Render Bloom

(8/8) Useful resources I found when researching this topic:

- youtu.be/tI70-HIc5ro

- youtu.be/ml-5OGZC7vE by @simondev.bsky.social

- learnopengl.com/Advanced-Lig...

These resources go into more detail on the topic of Bloom.

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

my old portfolio using Selective Bloom

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

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

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

Mini Tutorial⬇️

(0/8)

#threejs #website #3d

Oops, I posted it on Twitter, forgot to post it here. Will do it today. Thanks for the reminder haha.

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

Three.js Journey is 50% OFF for BLACK FRIDAY! 🎟️✨

I've turned my new portfolio prototype into a small game for the event
👉 threejs-journey.com/apps/black-f...

The code has unlimited usage, but if you are in a rush use this link
👉 threejs-journey.com/join/bf2024

🚨 BLACK FRIDAY SALE! 🚨

🔥50% off all courses! 🔥

Use this coupon👉: BLACKFRIDAY2024

www.simondev.io/courses

Quick reminder of everything added this year:
🌟 3D Raymarching
🍃 Modern Grass Techniques
✨ Advanced Particles Systems