Keep transparency + Respect noBlend mode with UnrealBloomPass

[cabada]

I’m trying to add UnrealBloomPass to my rendering flow, but when I add it transparent background of my scene is completely gone.

With UnrealBloomPass:

And without UnrealBloomPass:

To achieve the transparency, I’m using meshes with materials that have NoBlending:

mesh.material.blending = THREE.NoBlending;

But as said above, the NoBlending blend seems to stop working, and I think it’s related to not being able to render transparency.

const renderScene = new RenderPass( view.scene, view.camera );
//renderScene.clear=false
//view.renderer.autoClear=false

const bloomPass = new UnrealBloomPass( new THREE.Vector2(view.renderer.domElement.width, view.renderer.domElement.height ), 1.5, 0.4, 0.85 );
bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius = params.bloomRadius;
view.bloomPass = bloomPass;
  
let target = false;
if (isWebGL2Supported()) {
  target = new WebGLRenderTarget(view.renderer.domElement.width, view.renderer.domElement.height, {
    type: THREE.HalfFloatType,
    format: THREE.RGBAFormat,
    encoding: THREE.sRGBEncoding,
    minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, stencilBuffer: false
  })
  target.samples = 8
}
  
view.composer = new EffectComposer( view.renderer, target );
view.composer.addPass( renderScene );
view.composer.addPass( bloomPass );

This is how I’m setting up the EffectComposer and UnrealBloomPass

If I comment the last line of this code, the transparency works again:

//view.composer.addPass( bloomPass );

I’m using a WebGLRenderTarget to achieve antialising and a certain effect for the Bloom, at first I thought this might be the issue, but it seems not to be since commenting the previous line of code makes it work again.

Am I missing anything? I found this issue Unreal Bloom and Renderer Transparency issue · Issue #14104 · mrdoob/three.js · GitHub but what I’ve tried from there seems not to work or am I confused and this has nothing to do with my issue.

Thanks in advance.

[forerunrun]

This seems to have been a recurring topic, try using the UnrealBloom from this example

[drcmda]

i would suggest using postprocessing instead of jsm/effectcomposer. postpro is a better composer, it is maintained, it is way faster and the effects support basics like stencil, selection and alpha backgrounds.

[drcmda]

made a quick example just to show that it’s possible, this is postprocessing + selective bloom + noblend transparent background with html peeking through (which im guessing is what the bitsweeper is all about because what other reason could there be for noblend?). the bloom even affects the html which is crazy, didn’t know this is possible: priceless-banzai-2yufxc - CodeSandbox

the example is react, but postpro is a vanilla library.

[cabada]

@drcmda

postprocessing + selective bloom

Thanks! Will try this library instead! Will post my findings and if it worked for my use case.

[cabada]

So, I’ve changed it to: postprocessing + selective bloom

And it’s working with transparencies, but… now a new issue has appeared:

Seems that when a light-colored material (white colors) are in front of something that glows, it gives this undesired effect.

This is how I’m loading it:

view.composer = new EffectComposer( view.renderer );

const renderScene = new RenderPass( view.scene, view.camera );
view.composer.addPass( renderScene );

const effect = new SelectiveBloomEffect(view.scene, view.camera, {
  blendFunction: BlendFunction.ADD,
  mipmapBlur: true,
  luminanceThreshold: 0.5,
  luminanceSmoothing: 0.3,
  intensity: 3.0
});
effect.luminancePass.enabled = true;
effect.ignoreBackground = true;
effect.mipmapBlurPass.radius = 0.25

const effectPass = new EffectPass(view.camera, effect);
view.composer.addPass(effectPass);

In this second image you can see how it starts affecting the t-shirt of the character as well.

[drcmda]

the luminanceThreshold should always be 1, that goes for postpro as well as jsm/unrealbloom. that ensures that nothing at all glows, only the materials that clip 0-1 rgb colorspace. other than that i’ve never seen something like in your images, it might be one of the props you set, “ignoreBackground” maybe, i don’t know, or perhaps there’s something else wrong like you disabled depthbuffer somehow. it’s not how it normally behaves.

[cabada]

It only happens in SelectiveBloom, but…

I’ve got it fixed by:

• Adding frameBufferType:THREE.HalfFloatType to the EffectComposer options
• Setting threshold to 1

Thank you @drcmda!