The same old story about bloom in a transparent canvas

[VanderSP]

Okay, I always used the lib assuming it works with transparency... but now last days while blooming some UI stuff, I observerd it affects much more the places that have some pixels in current layer... (I use a back canvas behind the transparent canvas)

i forked the effect on project, and changed bloom frag to

uniform sampler2D map;
uniform float intensity;

void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
    vec4 bloom = texture2D(map, uv);
    vec3 final_bloom_rgb = bloom.rgb * intensity;
    float bloom_luminance = dot(final_bloom_rgb, vec3(0.2126, 0.7152, 0.0722));
    outputColor.rgb = inputColor.rgb + final_bloom_rgb;
    outputColor.a = max(inputColor.a, bloom_luminance);
}

I think it works it´s the MUGEN87 patch from three.js forum....

But i can´t help myself asking you what you have to say about all this... as idk what the three.js folks ended doing or even not doing yet, with they stock ones

THANKS!

ah and also setted blend to 'normal'...

tbh I think there´s a little bit of darkglow mixed... aahh but it´s better than before...

[vanruesc]

But i can´t help myself asking you what you have to say about all this... as idk what the three.js folks ended doing or even not doing yet, with they stock ones

I'm not aware of any workarounds or fixes in three that target this use case. If there is a solution I'd be happy to integrate it, but I don't think there is one.

I think there´s a little bit of darkglow mixed

Postprocessing effects are usually the last thing in a render pipeline, so blending that result (transparent canvas) with whatever sits behind it is already problematic. I think part of the issue has to do with premultiplied alpha, but I'm not sure. I'd advise against using a transparent canvas with postprocessing if possible.

Have you tried the v7 version of bloom? Maybe that one works better in your setup since it's using a better blend function.

FYI: In the next v7 release, the internal buffers will use an optimized R11F_G11F_B10F format by default. Alpha will still be supported like it is now, but users will have to enable it explicitly.

[VanderSP]

aaaah sorry yes! changed now!

[vanruesc]

I've forked it here and changed it to use v7 for testing: https://codesandbox.io/p/sandbox/alphabloom-forked-w34rhn

It looks alright to me, but I'm not quite sure what the expected result should be 🤷 😅

[VanderSP]

damm! why v7 works so? this means that v6 have a bug with that?... If it´s the case im anxious for a v6 fix, or wait.... the mrt v7 thing, so I can do selective lol!

Thanks!!!

[vanruesc]

this means that v6 have a bug with that?

It's probably the blend function... I guess it would make sense to backport that to v6. I'll do that in the next release.

the mrt v7 thing, so I can do selective lol!

This sandbox is not using MRT for masking - it's just relying on the luminance filter. Any colors that exceed the range [0, 1] glow.

[VanderSP]

Nice!!!! Well, about mrt, i mean when v7 came with selective i will migrate to v7... but I really appreciate v6 fix, for now, thanks for the support!!

[VanderSP]

Yesterday reading threejs r178, they talked about old blending problem... maybe it´s related to that alpha being dark over other canvas, or just blending between pixels in same canvas?

[vanruesc]

or just blending between pixels in same canvas

Yeah, it's related to this.

Postprocessing implements custom blending for effects which doesn't use blendFuncSeparate.

[vanruesc]

The blending issue should be fixed in v6.37.5.

[vanruesc]

I think I've found the root cause for this issue:

https://github.com/pmndrs/postprocessing/blob/6e76877cd79ace6c3678de9aff63704e654dc777/src/effects/glsl/bloom.frag#L16C44-L16C51

Bloom uses the alpha channel of the rendered overlay texture as output which directly corresponds to the blurred luminance of each pixel. That's why the cube appears translucent. So texel.a should really be inputColor.a, like in v7.

[VanderSP]

now you are greek to me! :D

[vanruesc]

Actually, both v6 and v7 are currently wrong. It should be max(inputColor.a, texel.a). Otherwise, the blurred colors end up having 0 alpha which is invalid. You can see this if you open the following screenshots and view them with a different background color:

inputColor.a	max(inputColor.a, texel.a)

[VanderSP]

lol, complex... i think was good we touched this point so...

[vanruesc]

For posterity: #719

[vanruesc]

FYI: I've adjusted the luminance default settings in v6.37.6, so you'll need to adjust it like this:

const bloom = new POSTPROCESSING.SelectiveBloomEffect(scene, camera, {
  // mipmapBlur is now enabled by default
  blendFunction: POSTPROCESSING.BlendFunction.SCREEN,
  intensity: 3,
  levels: 8,
});

bloom.luminanceMaterial.threshold = 0.9; // default is 1
bloom.luminanceMaterial.smoothing = 0.025; // default is 0.03

And re-enable premultipliedAlpha since it's needed for correct alpha blending.

[vanruesc]

When renderPass.ignoreBackground is set to true, the scene.background will not be rendered. It's not generally needed in normal use cases.

and in the bloom itself, it´s good to put this also?

In SelectiveBloomEffect, this flag masks out everything at max depth.

looks u inverted selection from default:all to none, right?

No, that hasn't changed. The sphere in your example won't bloom with the new default for luminanceThreshold because it isn't brighter than 0xffffff.

[VanderSP]

interesting, so im just use environment, not needed...

about the info of masking, this i never knowed... and i was using as true before lol

hmm, interesting, before i needed to do data.bloom.selection.clear(), but anyway, i think now we´re good!

EDIT: a bit of rings banding is normal of the effect right? or it should always be homogeneous?

[vanruesc]

a bit of rings banding is normal of the effect right? or it should always be homogeneous?

People don't get notified when a message is edited. Better to post another comment.

You can try enabling dithering on the EffectPass and see if that helps with the banding.

FYI: I've noticed another issue regarding alpha in the LuminanceMaterial. I'll publish a fix for that soon (4a0ba65).

[VanderSP]

Oh nice, what this could affect? :) tried dithering but isn´t that, i think it´s natural radial flare artifacts of exagerating bloom, i didn´t tweaked intensities yet

[vanruesc]

FYI: There's another improvement for luminance rendering in v6.37.7 that should improve alpha values of the blurred pixels.