UnrealBloomPass makes background black

Questions
1

I have a scene in a website, with transparent background

THREE.WebGLRenderer( { antialias: true, alpha: true } );

When I’m adding the UnrealBloomPass, the background goes black.
How can I solve this?

const bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5,1.4, 0.85 );
                                        bloomPass.threshold = params.bloomThreshold;
                                        bloomPass.strength = params.bloomStrength;
                                        bloomPass.radius = params.bloomRadius;

                                        composer = new EffectComposer( renderer );
                                        composer.addPass( renderScene );
                                        composer.addPass( bloomPass );
2

i think that is “normal”, it just cancels it out, maybe it has been fixed but i remember that it used to be something you just had to suck up. you can still call gl.setClearColor(…) or scene.background = new THREE.Color(…). alternatively you could use GitHub - pmndrs/postprocessing: A post processing library that provides the means to implement image filter effects for three.js. which doesn’t have this problem.

3

UnrealBloomPass does not support transparent backgrounds since the result is incorrect. The bloom does not blend correctly with the HTML and there is no way to fix this with the current approach of the pass. I also think that it is in general not possible to fix it since you have no access in WebGL to whatever is behind the canvas.

I have provided a version of UnrealBloomPass that supports transparent backgrounds to demonstrate the above limitation. Feel free to use it if you need some sort of bloom effect at any cost. You find the code in the below issue. But please keep in mind that the results looks different (buggy) compared to non-alpha version:

The issue also explains why transparent HTML backgrounds with additively blended post processing effects are problematic.

4 Likes