Three.js: Textures darker when enabling postprocessing during animation (after updating to r112)

Created on 27 Jan 2020  路  4Comments  路  Source: mrdoob/three.js

In my project I'm using the EffectComposer only when I need to enable the outline effect (on object mouseover/selection).
The reason I do this is because this way I can keep the native antialias the rest of the time. Using the native antialias is important for me because I need the very thin lines not to be jagged lines.

So basically if there are objects highlighted, I use "composer.render()", else I use "renderer.render()".

So far so good, but since updating from r111 to r112, I'm getting darker textures when enabling the composer during the animation.

Example with r111 (click to toggle postprocessing):
https://jsfiddle.net/Eketol/ow07ukxq/

Example with r112 (same code but without the deprecated "renderer.gammaOutput = true;"):
https://jsfiddle.net/Eketol/r7w2vkhx/

Playing a bit with r112, I have noticed that if I change all textures encoding from "THREE.sRGBEncoding;" to "THREE.LinearEncoding", the result is fine with composer, but not without it.

It seems like r111 was ignoring the encoding of all textures when the composer was enabled.

I'm not sure if r112 now has the correct behaviour or if it is a bug, but r111 was working fine for me.

Most helpful comment

Just include this line at the end of your fragment shader:

#include <encodings_fragment>

Updated fiddle: https://jsfiddle.net/tpm6ko5x/

With this code, your custom material correctly supports color space conversion now.

All 4 comments

You have to use a gamma correction pass like in this updated fiddle:

https://jsfiddle.net/4rnbdact/1/

With the dev version, you should not see the subtle difference in color anymore because of #18477.

Thanks very much!, that did the trick for all textures... except the ones with ShaderMaterial. Is there an easy way to solve it?
https://jsfiddle.net/Eketol/un98dt0y/

Just include this line at the end of your fragment shader:

#include <encodings_fragment>

Updated fiddle: https://jsfiddle.net/tpm6ko5x/

With this code, your custom material correctly supports color space conversion now.

That did it, thanks a lot. I have included sRGBToLinear to keep the ShaderMaterial color:
gl_FragColor = sRGBToLinear( mix( col1, col2, 0.25 ) );
Not sure if it is correct, but works for me:
https://jsfiddle.net/Eketol/9Lxhbsg1/

Was this page helpful?
0 / 5 - 0 ratings