ThreeJS- Adding bloom pass affects canvas transparency

Question

BLOOM AFFECTS TRANSPARENCY

For renderer I'm having this setup:

renderer = new THREE.WebGLRenderer( { antialias: true, preserveDrawingBuffer:true, alpha:true } );

for bloom pass (post processing)

var renderPass = new RenderPass( scene, camera );
var bloomPass = new UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
bloomPass.exposure =0.2;
bloomPass.threshold =0;
bloomPass.strength = 0.2;
bloomPass.radius = 0.1;
composer.addPass( renderPass );
composer.addPass( bloomPass );

and while rendering I'm using

composer.render()

but this is affecting the transparency of the canvas by darkening it (Scene)

jscastro · Accepted Answer · 2020-07-12 08:30:55Z

I had the same issue, your code is right for the creation of the UnrealBloomPass, but the issue is in the shader of the UnrealBloomPass at the method getSeperableBlurMaterial.

You need to replace the fragmentShader by this code below and your pass background will consider the alpha channel:

fragmentShader:
    "#include <common>\
    varying vec2 vUv;\n\
    uniform sampler2D colorTexture;\n\
    uniform vec2 texSize;\
    uniform vec2 direction;\
    \
    float gaussianPdf(in float x, in float sigma) {\
        return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;\
    }\
    void main() {\n\
          vec2 invSize = 1.0 / texSize;\
          float fSigma = float(SIGMA);\
          float weightSum = gaussianPdf(0.0, fSigma);\
          float alphaSum = 0.0;\
          vec3 diffuseSum = texture2D( colorTexture, vUv).rgb * weightSum;\
          for( int i = 1; i < KERNEL_RADIUS; i ++ ) {\
            float x = float(i);\
            float w = gaussianPdf(x, fSigma);\
            vec2 uvOffset = direction * invSize * x;\
            vec4 sample1 = texture2D( colorTexture, vUv + uvOffset);\
            vec4 sample2 = texture2D( colorTexture, vUv - uvOffset);\
            diffuseSum += (sample1.rgb + sample2.rgb) * w;\
            alphaSum += (sample1.a + sample2.a) * w;\
            weightSum += 2.0 * w;\
          }\
          gl_FragColor = vec4(diffuseSum/weightSum, alphaSum/weightSum);\n\
    }"

YGilk1 · Accepted Answer · 2020-05-12 19:12:55Z

0

A bloom pass is doing some mix between the image and a blurred version, causing colors to change. You should consider setting the WebGLRenderer tone mapping property to set a good color dynamic range

Tone mapping definition (Wikipedia)

Tone mapping is a technique used in image processing and computer graphics to map one set of colors to another to approximate the appearance of high dynamic range images in a medium that has a more limited dynamic range.

Add this line in your init routine

renderer.toneMapping = THREE.ReinhardToneMapping

edited May 12, 2020 at 19:12

answered May 12, 2020 at 17:55

YGilk1

4642 silver badges6 bronze badges

5 Comments

Raghav venkat Over a year ago

No success, I've also tired using other tone mappings like "ACESFilmicToneMapping"

YGilk1 Over a year ago

First remark, bloomPass.exposure is useless, there is no exposure param in UnrealBloomPass code github.com/mrdoob/three.js/blob/master/examples/js/…

YGilk1 Over a year ago

Try keeping threshold = 0 and radius = 0 and increase the strength param to see how it affects your rendering. You can also try to increase renderer.toneMappingExposure as tonemapping has changed the dynamic range of the color rendering

Raghav venkat Over a year ago

No Success, Getting back the transparency at the cost of bloom :( Bloom effect is very subtle.

YGilk1 Over a year ago

Maybe you can share some screen of your scene? It could be useful to help you

Collectives™ on Stack Overflow

ThreeJS- Adding bloom pass affects canvas transparency

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related