Solved: How to get correct gamma for effects?

Questions
,
1

Trying to wrap my head around gamma, and it’s going well, but i still struggle with effects. GammaCorrectionShader makes everything brighter, but without it everything goes dark (looses gamma).

Sandbox: https://codesandbox.io/s/r3f-ibl-envmap-normalmap-ivxb4

gamma
gamma1200×309

The Effects are declared in Effects.js:

<effectComposer ref={composer} args={[gl]}>
  <renderPass attachArray="passes" scene={scene} camera={camera} />
  <shaderPass attachArray="passes" args={[GammaCorrectionShader]} />
  <unrealBloomPass attachArray="passes" args={[aspect, 2, 1, 0.5]} />
  <shaderPass attachArray="passes" args={[FXAAShader]} material-uniforms-resolution-value={[1 / size.width, 1 / size.height]} />
</effectComposer>
2 Likes
2

@looeee just helped me with a similar issue a few days ago: sRGBEncoding with post-processing I think the solution to your problem would be to re-order the passes (although not entirely certain about this):

  1. Scene pass
  2. Bloom pass
  3. FXAA pass
  4. Gamma Correction pass
3

I tried, but i think it went even brighter and now the bloom pass has some nasty artefacts. Can it be that it does everything correctly but i have to do something about clearcolor? I’m using bloom, which blows out alpha transparency, so i did put a gl.setClearColor in there earlier - and the background seems to have the brightening problem

4

That was it, using scene.background + scene.background.convertSRGBToLinear() did the trick! thanks @marquizzo !!!

3 Likes