Material with color = 'white' is not white

[arranlomas]

three js fiber:
background is white, cube is slightly grey. I would expect it to not be visible due to being the same color as the background:

vanilla three s:
Compared to in three js editor with the same geometry, material and mesh:

You can see a quick code example here: https://codesandbox.io/s/basic-demo-forked-h9rsk?file=/src/App.js

The same happens when tested using primitive so it seems like a difference with the <Canvas/> component.

Any thought or suggestions for getting a fully white material are welcome.

thanks!

[arranlomas]

doh...

Looks like it's related to tone mapping

It seems the default in three js is NoToneMapping: https://threejs.org/docs/?q=renderer#api/en/renderers/WebGLRenderer

Default is NoToneMapping. See the Renderer constants for other choices.

And the default in this library is ACESFilmicToneMapping

react-three-fiber/packages/fiber/src/core/store.ts

Line 164 in 3c1586d

if (!flat) gl.toneMapping = THREE.ACESFilmicToneMapping

[drcmda]

the defaults in three produce wrong gamma, it's using linear colospace, you can't have results like blender etc, the colorspace blows out. r3f uses srgb (like everything else: blender, PS, browser, ...) and also tonemapping.

<Canvas linear flat

gives you threejs defaults but i suggest you don't do it. there is no white, there are only colors influenced by light. more light more saturation/brightness.

see: https://www.donmccurdy.com/2020/06/17/color-management-in-threejs/

With incorrectly-configured linear workflows the material and lighting parameters would be completely devoid of any meaning whatsoever. It’s also important to point out that incorrect gamma handling in 3D rendering is one of the main culprits behind the “fake plasticky CGI look

you can use the flat option, or do it individually on the materials <meshBasicMaterial toneMapped={false} />

ps its documented here: https://docs.pmnd.rs/react-three-fiber/API/canvas

[arranlomas]

Thanks for the quick and detailed response and awesome link. On a per material basis is ideal for my use case (rendering to a render target and using the texture in a sprite material).

Thanks again!

[RobinSen2217]

Very helpful solution. Thanks!

[arranlomas]

Answer: #1290 (reply in thread)
(unsure of etiquette on discussions but I can't mark a reply to an answer as the answer so adding this answer 🤷 😬 )