How to get the correct color value using unrealbloom?

Questions
,
1

image
image1917×909 70.7 KB

On the left is the scene without unrealbloom, and the color is brighter

composer1 = new EffectComposer(renderer);
composer1.addPass(renderPass);
composer1.renderTarget1.texture.encoding = THREE.sRGBEncoding;
composer1.renderTarget2.texture.encoding = THREE.sRGBEncoding;

On the right side, unrealbloom is used to darken the color. How to use unrealbloom to make the color the same as that on the left side?

composer2 = new EffectComposer(renderer);
composer2.addPass(renderPass);
composer2.addPass(bloomPass);
finalPass = new ShaderPass(
        new THREE.ShaderMaterial({
          uniforms: {
            baseTexture: {
              value: null
            },
            bloomTexture: {
              value: composer2.renderTarget2.texture
            }
          },
          vertexShader: vertexshader,
          fragmentShader: fragmentshader,
          defines: {}
        }), 'baseTexture'
      );
finalPass.needsSwap = false;

finalComposer = new EffectComposer(renderer)
finalComposer.addPass(renderPass)
finalComposer.addPass(finalPass)

I tried to set encoding property of finalcomposer, but it didn’t seem to take effect

finalComposer.renderTarget2.texture.encoding = THREE.sRGBEncoding
2

Try change gama fator or light intensity
on creating renderer set:

renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.gammaFactor = 2.2; //change if too light

3

Yes, I have set the outputencoding property of the renderer, but this does not get the correct color.

4

The bloom pass effects the entire scene by default. I suggest you apply the effect selectively like demonstrated in the following example: three.js webgl - postprocessing - unreal bloom selective

5

:face_with_monocle:You may misunderstand what I mean. I am using this example now. I want to make the final rendered output color space sRGB, making the color brighter.

6

Oh, I see. Try adding an additional ShaderPass using GammaCorrectionShader at the end of your pass chain like in webgl_postprocessing_ssr.

2 Likes
7

Wow, that’s great. Set the gammacorrectionshader and the color will be correct

const finalComposer = new EffectComposer(renderer);
finalComposer.addPass(renderScene);
finalComposer.addPass( new ShaderPass( GammaCorrectionShader ) )
finalComposer.addPass(finalPass);
8

After using gammacorrectionshader, there will be a serious ribbon problem. I found a solution in other posts you replied to. Is my use correct?

const parameters = {
      minFilter: THREE.LinearFilter,
      magFilter: THREE.LinearFilter,
      format: THREE.RGBAFormat,
      type: THREE.FloatType,
      stencilBuffer: false
}
const target = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, parameters)
const finalComposer = new EffectComposer(renderer, target);
finalComposer.addPass(renderScene);
finalComposer.addPass(new ShaderPass(GammaCorrectionShader))
finalComposer.addPass(finalPass)
9

The default data type of the render target (UnsignedByteType) is not sufficient so using floating point should mitigate the issue. You might check if THREE.HalfFloatType works for your use case.

11

Halffloattype and floattype look the same. Will this affect the frame rate?

12

Half float is more performant.