Search code examples
colorsthree.jsgltfcolor-space

GLTF vertex colors in three.js viewer are off

Heyo,

I've just stumbled upon this weird issue with my GLTF import: When loading the file in my three.js viewer, the colors looking different from the original file.

Compare McCudy's viewer: GLTF file as seen in https://gltf-viewer.donmccurdy.com/

With my three.js viewer: three.js viewer with ambient light brightness increased unhealthily

And again McCurdy's viewer but set to linear color encoding: GLTF file as seen in https://gltf-viewer.donmccurdy.com/ with linear encoding

Looks familiar right?

I've already tried what three suggests: changing the color encoding of the renderer to sRGBEncoding but this problem is it doesn't change anything. Regardless of whether I use linear or sRGB encoding, the colors look the same. I checked the renderer and the outputEncoding is applied correctly.

Any idea's to why the setting does not seem to be applied or what else could be the source of the color change?

For information, I'm running a fairly old version of three.js (r97) which for various reasons I cannot update.

Solution

  • In three.js r112, the renderer.outputEncoding property was added, replacing the older renderer.gammaOutput property. In any earlier versions, the equivalent of renderer.outputEncoding = THREE.sRGBEncoding would be:

    renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;

    If materials have already been rendered before these settings are configured on the renderer, you may also need to set material.needsUpdate = true to recompile them.