Re-using material gives different color

[coada]

Hello!

I've been performance-optimizing my R3F app with rendering on demand. In the documentation, the next chapter is about re-using geometries and materials, so I thought I'd do it too. I observed however that I got a different color tone when I created the material as a constant, outside the component tree. The documentation doesn't mention this issue. After fiddling around a bit I discovered the discrepancy is on the Color type and not the Material.

https://codesandbox.io/s/upbeat-tess-zv4wfi

const COLOR_NAME_ORANGE = 'orange'
const COLOR_ORANGE = new Color(COLOR_NAME_ORANGE)
...
      <Box position={[-1.2, 0, 0]}>
        <meshStandardMaterial color={COLOR_NAME_ORANGE} />
      </Box>
      <Box position={[1.2, 0, 0]}>
        <meshStandardMaterial color={COLOR_ORANGE} />
      </Box>

Would anyone mind telling me why I am getting different colors in this particular situation? What would I need to change to get the right box to have the same color as the left?

Cheers!

[coada]

Alright I've been playing around with this and reading up on color management in three.js (linear-sRGB vs sRGB) and solved it:

const COLOR_ORANGE = new Color(COLOR_NAME_ORANGE).convertSRGBToLinear()

R3F converts colors to linear-sRGB as it processes them in the tree of components, and uses sRGB encoding as output by default. If you create your own colors (and materials) as global values for performance optimizations, you will do so using three.js's own Color type, so you need to convert it to linear-sRGB yourself.

I'll see if it's possible to update the documentation to include this!

[drcmda]

the correct solution isn't convertSRGBToLinear but

import * as THREE from 'three'

THREE.ColorManagement.legacyMode = false

you need this if you're dealing with colors created in global space, and it needs to be set first, before any color. if that color were inside a canvas component it would be safe.

the problem is with three itself, they are aware of it but it won't change until they manage colors by default.

[coada]

Yep that's even a better solution, because you don't need to create a Color but can directly create a Material.

Thanks for your help and contributions to the open source community!