sRGB encoding as a postprocess pass

Questions
#1

I found out that setting renderer.outputEncoding = THREE.sRGBEncoding doesn’t work when using postprocessing #18451. I’ve been told I need to do the encoding as a postprocess pass but I’m not sure how to do that. Can somebody point me in the right direction or give me some sample code I can use for reference?

We are unable to reach the rendering quality, while using Regarding Post Processing with composer rendering
#2

Turns out they have a gamma correction shader in https://threejs.org/examples/js/shaders.
Create the pass like this
const gammaCorrectionPass = new THREE.ShaderPass(THREE.GammaCorrectionShader)
and add it as the final pass
composer.addPass(gammaCorrectionPass)
If you set renderer.gammaFactor = 2.2 it simulates sRGBEncoding or so I’ve been told

Is there anything else I need or is this enough?

#3

The gamma correction pass fudges the colors a bit. Anybody know how to fix this?

Screenshot from 2020-01-22 17-16-40

#4

Not really, it’s fairly close but not exactly the same. What we need is an sRGBPass I guess.

It’s not clear from your screenshot what you mean. How are they fudged?

#5

The gradients are harsh. The same model without postprocessing looks much smoother up close.

fudging-outlined
Screenshot from 2020-01-22 17-47-39

#6

Ah yeah, I couldn’t see that on my phone screen earlier, but it’s obvious now.

Can you try @Mugen87’s suggestion in this thread?

Effect Composer Gamma Output Difference

1 Like
#7

That works. Was a merge request made for this?

#8

The gamma correction pass makes the background color lighter. This doesn’t happen with renderer.outputEncoding = THREE.sRGBEncoding. Is anyone working on a sRGBEncoding pass? In the meantime is there a way to exclude the background and other objects from the gamma correction pass?

#9

You’re right. The difference is pretty noticeable.

Composer with gamma correction pass: https://jsfiddle.net/kbgxhodn/
Renderer with sRGBEncoding: https://jsfiddle.net/n80zcu9a/

I think I’m going to have to give up on GammaCorrectionShader as a workaround.

#10

So back to my original question. How do I mimic the result of https://jsfiddle.net/n80zcu9a/ when using EffectComposer to render the scene?

#11

I don’t think the difference should be that noticeable. But in any case, you can just write your own sRGBCorrectionPass.

Use the gammaCorrectionPass as a template:

And you’ll find the LinearTosRGB function here:

You don’t need to redefine the function in the pass, since the pass has access to the function defined in the core. Simply replace LinearToGamma with LinearTosRGB in the GammaCorrectionPass.

1 Like
#12

Okay but the background color still changes. Is that the intended behavior?

#13

composer.renderTarget1.texture.encoding = THREE.sRGBEncoding;
composer.renderTarget2.texture.encoding = THREE.sRGBEncoding;