Washed out colors w/ color-encoding despite conversion

Description of the problem

left: threejs, right: figma - same rgb colors

gl.toneMapping = THREE.ACESFilmicToneMapping
gl.outputEncoding = THREE.sRGBEncoding

causes washed out colors despite converting them to linear color space

 new THREE.Color(color).convertSRGBToLinear()

And here is a reduced testcase: codesandbox

The outer ring should have the same color as the background (#fff9be), but it appears in a muddy gray. It works without filmic tonemapping, but now gamma is off and highlights blow out.

I’ve first posted on discourse (https://discourse.threejs.org/t/washed-out-colors-with-acesfilmic-despite-convertsrgbtolinear-and-srgbencoding/14080) to make sure that it’s not my fault, but it seems like a bug.

Three.js version

• r115

[donmccurdy]

This is probably not a bug to be fixed, then, but here are some suggestions:

1. There is a per-material material.toneMapped = false option. For specific objects where tonemapping is unnecessary and matching CSS content is important, that should be a good option. In particular, MeshBasicMaterial+.toneMapped=false would be a good choice for UI overlays.
2. It might be useful to have additional functions like ColorUtils.convertFromToneMapping(color, ACESFilmicToneMapping) and convertToToneMapping. That would enable the workflow described above. Whether it’s a good workflow, I don’t know. 🙂

[donmccurdy]

Yeah sorry, my reply on Discourse was probably incorrect. You can see the same effect in Blender:

Filmic:

Standard:

The sRGB→linear→sRGB conversion exists because the renderer operates on linear values; it is not intended to change a scene’s look, but to get the lighting math objectively correct for the specified colors. Tone mapping, on the other hand, is often used to change a scenes “look” and “mood”, and inherently does change colors.

I’m not sure what would be considered best practice, here, or if there is something we should change. If your workflow relies on Blender, where the default tonemapping is already Filmic, then you’ll get consistent results with Filmic in three.js. Presumably that’s the basic process for a fullscreen game. For webdev, where you need WebGL content to blend with the rest of the experience, you may want to alter three.js’ input colors so you get better perceived dynamic range while matching colors to the CSS content. That sounds reasonable to me but I’m not confident saying it’s best practice: in particular I wonder if it would exacerbate banding, and make dither more necessary, e.g. when applied to textures.