Implementing a bloom pass in ThreeJS can alter the transparency of a canvas

Question

Implementing a bloom pass in ThreeJS can alter the transparency of a canvas

IMPACT OF BLOOM EFFECT ON TRANSPARENCY

Currently, my renderer setup looks like this:

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

For implementing the bloom pass in 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 );

During the rendering process, I use:

composer.render()

However, there seems to be a concern with the transparency of the canvas being affected by darkening it (Scene).

javascript three.js

Answer 1

Answer №1

The issue I encountered was similar. The code for creating the UnrealBloomPass is correct, but the problem lies in the shader of the UnrealBloomPass within the method getSeperableBlurMaterial.

To resolve this, you should replace the fragmentShader with the following code so that your pass background will take into account 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\
    }"

Answer 2

The issue I encountered was similar. The code for creating the UnrealBloomPass is correct, but the problem lies in the shader of the UnrealBloomPass within the method getSeperableBlurMaterial.

To resolve this, you should replace the fragmentShader with the following code so that your pass background will take into account 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\
    }"

Answer 3

Answer №2

When using a bloom pass, an interesting effect occurs where the image blends with a blurred version, resulting in a color change. It is recommended to adjust the WebGLRenderer tone mapping property for optimal color dynamic range.

To better understand tone mapping, you can refer to the explanation on Wikipedia.

Tone mapping is a method employed in image processing and computer graphics that involves translating one set of colors into another to simulate the appearance of high dynamic range images within a medium that has a more restricted dynamic range.

Don't forget to include this line in your initialization routine:

renderer.toneMapping = THREE.ReinhardToneMapping

Answer 4

When using a bloom pass, an interesting effect occurs where the image blends with a blurred version, resulting in a color change. It is recommended to adjust the WebGLRenderer tone mapping property for optimal color dynamic range.

To better understand tone mapping, you can refer to the explanation on Wikipedia.

Tone mapping is a method employed in image processing and computer graphics that involves translating one set of colors into another to simulate the appearance of high dynamic range images within a medium that has a more restricted dynamic range.

Don't forget to include this line in your initialization routine:

renderer.toneMapping = THREE.ReinhardToneMapping

Implementing a bloom pass in ThreeJS can alter the transparency of a canvas

Answer №1

Answer №2

Similar questions

Objects and strings cannot be inserted into a JavaScript array

JavaScript: Repeated Depth First Exploration for hierarchical rearrangement implemented with d3's recursion()

Retrieving, storing, and utilizing JSON variables in Express

Unable to shrink array within an object

Transmitting occasional feedback from ASP.NET Web API function to jQuery AJAX

How can I access an InputStream from a local XML file in a PhoneGap application?

Is it possible to use the Husky "commit-msg" hook to git add new files?

Developing a Node.js and Express REST API for generating tailored routes for custom fields

An issue has emerged: React cannot render objects as children. The culprit appears to be an object containing keys such as {

Understanding how to utilize and manipulate this JSON data using JavaScript

Endless cycle in Vue-Router when redirecting routes

Issue with Next JS router.push not functioning unless the page is refreshed

How can I set up automatic language selection for Google Translate's menu indexing feature?

Tips for preserving @typedef during the TypeScript to JavaScript transpilation process

How to initiate a refresh in a React.js component?

Using Javascript, print the port number to the console

Executing a custom object function in AngularJS by using the ng-click directive

Knockout.js client-side validation system

Execute an AJAX function to monitor a JSON response at intervals of 3 seconds

What distinguishes transposing a matrix on the Z axis from simply moving along the Z axis by the same value?