'Color differences between threejs + vanilla js and react-three-fiber + create-react-app

This has been bugging me for a while. Why the material colors in react-three-fiber appears to be dull than in threejs

  • Objects and their properties are same in both implementations.
  • threejs version is same.
  • Implemented in freshly bootstraped create-react-app with no additional dependencies.

Threejs

enter image description here

react-three-fiber

enter image description here

reactjsthree.jsreact-three-fiber


Solution 1:[1]

r3f uses correct gamma in a srgb colorspace and automatically converts colors and textures to srgb. this is similar to what aframe does. threejs has incorrect gamma settings in a linear colorspace, which is not very usable. wrong gamma is the #1 reason for cheap, plasticy looking 3d scenes. see: https://www.donmccurdy.com/2020/06/17/color-management-in-threejs

if you want a linear colorspace, just do: <Canvas colorManagement={false}> and now your colors will match.

Solution 2:[2]

As answered by Don McCurdy, setting renderer toneMapping to default one does help.

<Canvas onCreated={({ gl }) => { gl.toneMapping = THREE.NoToneMapping }}>

Solution 3:[3]

The following combination gave me the best match to my colors in threejs.

  <Canvas
    gl={{ antialias: true, toneMapping: THREE.NoToneMapping }}
    linear
  >

Thank you Don and devAhsan.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 hpalu
Solution 2
Solution 3 Bill O

Related Questions