How to work with Display P3 Wide-gamut color profile in WebGL/Three.js?

Hello there.

I wonder if anyone here knows if it is possible to work with P3 wide-gamut color profiles in WebGL and Three.js.

As of today, Chrome already offers support for wide-gamut color profiles like Display P3.
Also, most recent MacBooks and iOS devices have screens able to show colors in P3 color profile. The difference between P3 from sRGB is quite noticeable.

This is a standard sRGB color profile (currently supported by three.js)

And this is an image with P3 display color profile (not supported in Three.js):

If your screen is able to reproduce colors in the P3 gamut, you’ll be able to see the Webkit logo in the second image. As you can see, this is a pretty noticeable color difference.

To understand how P3 is in comparison with sRGB:

Does anyone have a clue of how this could be implemented?

Note: I am not talking about supporting p3 in images or textures only, instead I am talking about using p3 to manage the colors in whole WebGL renderer.

Related posts:



Recent Safari update added wide gamut color support for canvas, but only for 2D contexts for now. Still, better, than nothing! Chromium recently got “canvas color management” for 2D contexts too, but I did not manage to get P3 colors anyway.

Yeah I don’t think this is possible with WebGL in any browser today. See GitHub - WICG/canvas-color-space: Proposed web platform feature to add color management, wide gamut and high bit-depth support to the <canvas> element. for where that might be headed. If you’re interested in the topic you may also wish to follow Add THREE.ColorManagement by donmccurdy · Pull Request #22346 · mrdoob/three.js · GitHub, although the focus there is (at least initially) on better supporting a linear workflow with sRGB input/output.

1 Like