CODEWITHSUNDEEP
javascriptthree.js
Raghav venkat
Raghav venkat

Reputation: 166

ThreeJS- Adding bloom pass affects canvas transparency

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)

Upvotes: 2

Views: 1533

Answers (2)

jscastro
jscastro

Reputation: 3780

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\
    }"

Upvotes: 3

YGilk1
YGilk1

Reputation: 464

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

Upvotes: 0

Related Questions