Display-P3 colorspace

Hi there, do you have plans to support this colorspace?
It is not yet supported in Firefox, but fully in Chrome and partially in Safari.


If you have a HDR Screen, you will be able to see the difference here:

Interesting indeed !!! do you know what else should be done in regard to color space like what should our shader output be srgb ? p3 ? linear ?

cc @BrianK who might have some clues ?

cc @Evgeni_Popov as well

I am also not sure beside the .configure function for WebGPU (GPUCanvasContext: configure() method - Web APIs | MDN)
Will all the colors be converted, shaders + textures? Could not find anything regarding that in WebGPU

I think three.js is working towards this.
They just release v152 where they outline that all colors are in linear space in the engine.
I think this is because they want to be able to switch over to a larger color space in the future.

Just out of curiosity, how does babylons color management work?

As long as you are using PBR materials, you are in a linear workflow :slight_smile:

We support srgb render target and textures natively and even have a way to turn on srgb precise conversion in our shaders and on cpu.

P3 is a new space allowing hdr values (it seems) but not supported by three either. And at the moment I am not sure of the full ramifications of the work involved to support it in babylon mostly regarding how we should use our outptus.

@sebavan, I did some digging and display-p3 uses the same transfer function (or 2.2 approximation) as sRGB. So I think to ‘support’ display-p3, it means textures should be unpacked from sRGB to display-p3 as was linked in the original post, and also canvas output should be set to display-p3 as well.

I also found the proposal for the display-p3 color space stuff here: canvas-color-space/CanvasColorSpaceProposal.md at main · WICG/canvas-color-space · GitHub

A useful tidbit shared there is how to detect which colorspace to use-- maybe Babylon could do this automatically, or at least as a way to throttle whether display-p3 is used when requested by the user (e.g. an option on the engine?):

sounds cool, @BrianK do you have any devices supporting it so that we could try and see how it behaves there ?

Looks like Apple Vision Pro uses display-p3 colorspace. All WebXR content on it looks very bright and unnatural.