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.