"Blooming hells, has it really been 4 weeks since you heard from your friendly ~~ghost~~ falling sand dev?"

Well, err, yes, it has - sorry about that.

But I was actually talking about the other kind of blooming, that thing that makes lighting look cool.

Bloom

"Bloom" is a real-world visual effect that makes light appear to "spread out" past where the light is actually emitted from. ¹

Bloom off and (aggressively) on, as demonstrated by a top-tier AAA game (image credits: Unity)

Now, normally, when you use a premade game engine, turning bloom on is about as difficult as ticking a checkbox.

But, since this game uses a custom engine, I gotta do things the hard way. ²

Understanding Bloom

The core intuition behind bloom is that you can approximate it by blurring only the light-emitting pixels in an image:

How to create a bloom effect for an image, MS Paint Edition

Blooming

Actually applying this technique to a game poses two problems:

How can you separate out light-emitting pixels?
How can you do a blur quickly, so that it doesn't kill performance?

The answer to problem one is boring: I already had the results of my lighting calculations in a separate image, so I used that as the starting point of the bloom calculation:

Normal

Lighting Only

Normal rendering vs lighting-only image; the latter is used as input to bloom.

Doing a blur quickly is more complicated: to blur, you take the average value of each of the pixels in a certain radius around a pixel, for all pixels in the image.

That's a lot of work for your graphics card, but fortunately some smart cookies worked out you can approximate a larger blur by repeating many smaller blurs then merging them together: ³

First take your starting image, and do 4x small-radius blurs, decreasing the image size each time (images blown up here for clarity). Then scale up each smaller image and combine it with its bigger brother until you're done. (The final image is a bit smaller because the lighting normally includes some off-screen areas, but the final image doesn't need that.)

Once you've got that sorted, you're basically done! ⁴

Blooming Hells

Finally, we can make a little hell scene, and apply our bloom effect to it.

The blooming hells. Get it? Cause of the lava? That's what they have in hell, ya know.

Playable web build‎

You can fiddle with the bloom slider yourself down below, assuming that your graphics card is capable of handling the lighting!

Aside: you might notice a few other new things too, but we haven't got words to discuss those right now. The Word Police are very strict, you know.

Press F1 for help, including to see keyboard/mouse controls. Mobile devices probably won't work! By playing you agree to our Privacy Policy and Terms of Service.

I mean, there's probably more to it if you're a legit physics guy or gal, but here we just do hacky approximations of real physics.

And by "the hard way", I mean following a great bloom tutorial that Discord-legend Xzil recommended, as well as cribbing off some shader code he shared - thanks!

Again, check out this great bloom tutorial for the gory details.

⁴

Unless your rendering library (like mine) doesn't support High Definition Rendering. In that case, congratulations, you get to patch your library and rework half your rendering pipeline to operate in HDR - otherwise your bloom effect will hardly be noticeable.

On the bright side, that also forced me to pick from one of many tone mapping approaches, and as a happy side effect now the game's colours are much more vivid.