Postprocessing: Bloom Effect on transparent background

[gigablox]

Hey there long time no see, glad to start playing with your library again, so far no real issues everything works great. Ran into something the other day I got stumped on...

Three 105, Postprocessing 6.5.0

How do I create a Bloom Effect on a scene drawn over a transparent canvas and background?

The closest I've gotten is with ALPHA blend mode which adds a blackish glow, similar in volume and shape as a bright glow you would expect to see with the scene rendered with a non transparent background.

this.bloomEffect = new POSTPROCESSING.BloomEffect({
  blendFunction: POSTPROCESSING.BlendFunction.ALPHA
})

A possibly related and current issue:
https://github.com/mrdoob/three.js/issues/14104

[vanruesc]

Hi, sorry for the late reply!

I tried some things, but couldn't find a way to remove the black halos. It seems that the bloom effect requires some form of alpha multiplication feature to produce the desired results. Unfortunately, I'm currently busy and can't look deeper into this.

Also thanks for pointing to the related issue. That might help when I get back to this.

[gigablox]

Hey no worries life happens. I'm sure it's an easy fix when you get around to it 🙂

[vanruesc]

I finally found some time to look deeper into this. It turns out that the BloomEffect doesn't need any changes. It uses the right render target format, and the convolution shader already respects alpha values. The material blending also doesn't need to be changed.

The real issue lies with the luminance extraction pass. When I created that shader, I didn't pay much attention to the alpha channel. The same can be said about most of the effect blend functions. For example, the ADD blend function takes the new alpha and simply discards the input alpha value. These are the two main reasons for the blackish glow.

In summary, the LuminanceMaterial needs to reduce the alpha value of dark colors and blend functions need to blend alpha values.

Fixing the blend functions seems easy enough, but the luminance shader needs some more testing. These fixes will probably be included in the next release.

[vanruesc]

Luminance filtering and alpha blending have been improved in [email protected].

Here's an updated example of bloom over a transparent canvas: https://jsfiddle.net/of4b27nk/
If you find any other issues please let me know!

[dankanze]

Oh wow you absolutely solved it. Thanks so much for this update!