#Bloom with shaders

36 messages · Page 1 of 1 (latest)

buoyant anvil
#

With the mesh you want to bloom? Probably not. But you could create a mesh that envelops the mesh you want blooming with an offset and custom shader to create this effect. Bloom really is a screen-space effect, though, so post-processing seems to be the most sensible way to achieve this effect.

carmine pendant
#

it works best with round geometry too but it's a cool trick

hexed ruin
#

Oh hey I need to implement this week, too

#

Might post my findings/process here in case it's mutually beneficial and I welcome you to do the same!

#

these red blocks are kill blocks, I'm hoping a glow effect will make it more obvious that they are dangerous/"lava"

#

in lieu of post processing, yeah?

#

instead of *

#

oh ok

#

i know nothing about shaders so this'll be interesting

#

looks like it uses "layers"

#

and an object that is and isnt on a particular "layer" has the bloom applied

rugged nest
#

A common trick for this in mobile/VR dev is to add additively-blended sprites.

hexed ruin
#

I like this approach better @vast dawn

#

so you already have it working, how's it look?

#

gotcha

rugged nest
#

Reading up on the thread, if this isn't about performance (like you aren't hellbent on those platforms), use selective bloom with post-processing.

#

Note that tone-mapping clamps [0-1] and should be applied after bloom.

#

A previous trick for this was to multiply colors so they're uniformly out of [0-1] range in the fragment shader, and set the bloom luminance threshold to >1. Only meshes/materials who have been multiplied this way should be picked up by the luminance filter.

#

Render Pass => Bloom => Tonemapping

#

Previous versions of three.js both didn't clamp during tonemapping, and allowed tonemapping to run during the render pass.

buoyant anvil
#

Yeah, bloom is an effect that occurs in the optical device (camera, eye, etc...), so post-processing is probably the best way to emulate it.
Here's a video you probably want to watch that discusses the physics and mathematics behind bloom. Definitely watch to the end because he progresses from first principles to a fully fledged bloom simulation that is pretty accurate.
https://www.youtube.com/watch?v=QWqb5Gewbx8

YouTube
AngeTheGreat
What is bloom? (And how is it simulated?)

Most people know that lights tend to bloom out when they become very bright, but why is this the case and why with this pattern? In this video I explain why it happens and how it can be simulated in a physically realistic way.

This is a C++ Fraunhofer diffraction simulation that uses the infrastructure in my open-source path-tracer. This techni...

▶ Play video
rugged nest
#

TLDR; bloom is a luminance filter and then a blur, it composites the blurred result on top of the rendered scene.

buoyant anvil
rugged nest
rugged nest
#

So when I give a TLDR for what is relevant for how this should work in three.js for the sake of testing and experimentation, please do not bar me from doing so.

#

We are adding or complimenting each other in this thread, not competing.

#

I will grow very tired if this becomes purely contrarian.

#

Your fragment shader should look like this for a color-managed workflow. Note that the second shader chunk has no effect when rendering to a render target or using post-processing, so you'll need a separate tone-mapping effect (if you have this configured, three has it disabled by default). In your case, this should come after bloom.

gl_FragColor = vec4(...);
#include <colorspace_fragment>
#include <tonemapping_fragment>
rugged nest
# rugged nest A previous trick for this was to multiply colors so they're uniformly out of `[0...

React example, but demonstrates this trick specifically. https://vxtwitter.com/0xca0a/status/1525083552672632833

vxTwitter / fixvx
super interesting discussion about selective bloom @ pmndrs discord. i would have paid for this years back. you can push colors out of their 0-1 range and you get it almost for free. demo: https://codesandb… 💖 264 🔁 24
☄︎ (@0xca0a)

super interesting discussion about selective bloom @ pmndrs discord. i would have paid for this years back. you can push colors out of their 0-1 range and you get it almost for free.

demo: https://codesandb…

💖 264 🔁 24

▶ Play video
#

This is abusing bloom, which usually works over the entire view, but works fine for this use-case.

buoyant anvil