Unlit textures coming up the wrong colour

[adamsoutar]

Hi 👋

I'm trying out react-three-fiber (and by extension ThreeJS) for the first time, and I can't quite get my textures to come out how I like, colour-wise.

I was using Phong materials, a directional light and shadows to make things look nice, but since noticing the colours weren't right, I've temporarily switched to unlit basic materials. In the screenshot above, you can see that the blue (1) texture is rendering too light, while the white and black tiles are rendering too dark. I have colourManagement set on my Canvas, and have tried a few other things like setting sRGB encoding on the textures, but none of that seemed to change anything.

Here is something closer to the intended outcome (this was rendered with proper lighting in Unity, but it demonstrates how the textures are supposed to look), you can see that the dark tile is much lighter, and the blue 1 tile doesn't look oversaturated.

Is there a setting I've missed for more accurate colours?

[drcmda]

there are no "accurate colors" in a physically lit scene bc colors respond to light intensity and color, this isn't like photoshop where colors are fixed. in a 3d scene you can only approximate color. r3f uses a proper srgb colorspace by default and auto-converts all colors and texture similart to how aframe does it. threejs uses linear colorspace which has wrong gamma. do colorManagement={false} if you want back, but i would not recommend it.

[adamsoutar]

Hi, thanks for replying. I would’ve thought that since I have unlit materials - so they’re not affected by lighting - that the colours would come out at least close to Photoshop (as they do in Unity), basically perspective warped but with the same hex values. However, they are really quite off, making the cube look very strange even if I try to use lit materials and lights to compensate. Neither of the colorManagement flag values look right to me

[drcmda]

i believe PS or any other software suite uses srgb colorspace. so even in plain three with meshBasicMaterial colors will probably look different since it's linear. i think you will find better answers in threejs own discord, i know too little about color spaces and encodings.