THREE.js: Textures become grayish with renderer.OutputEncoding = sRGBEncoding

1.3k Views Asked by At

I'm playing a bit with the Three.js cloth example but instead of the alphaMap, I kept the cloth-plane fully opaque and changed its color map. The result is quite disappointing as the texture now renders very grayish due to the OutputEncoding of the renderer (sRGB Encoding). If I change the output encoding back to LinearEncoding, the grass texture appears to be too dark.

Below is the result: enter image description here

And the original textures look like this:

enter image description here

Is there any way to remain with the sRGBEncoding but have my cloth texture render with much more contrast?

1

There are 1 best solutions below

1
Mugen87 On

Is there any way to remain with the sRGBEncoding but have my cloth texture render with much more contrast?

Yes. Just set the encoding property of your texture to THREE.sRGBEncoding.

The default encoding value of textures is THREE.LinearEncoding. So if you don't modify it but a configure a sRGB workflow on renderer level, color textures will indeed look incorrect.