Understanding wide gamut, hdr, what is currently achievable in threejs and how to achieve it

Questions
,
1

I have been looking at these two examples:

https://github.com/mrdoob/three.js/blob/dev/examples/webgl_test_wide_gamut.html

https://github.com/mrdoob/three.js/blob/dev/examples/webgpu_hdr.html

I see that my screen is capable of both when I open them in Chrome.

I do not understand exactly why these are different things. I have been looking at other posts here and at google / gemini results but would appreciate some expert input here.

My understanding is P3 means wide gamut, so I get more hues to display, while hdr means brightness, so I can i can make the hues pop of the screen until my eyes burn.

If I think in terms of a color model like HSL, it’s easy to map wide gamut to the H and HDR to the L.

I know it’s a really complicated topic but if someone can point me to a good primer to understand the difference between the two and why it seems that I cannot have both at the same time (from looking at the two separate examples above).

Thanks!

2

I’d adjust the HSL analogy a little: wide gamut maps better to saturation than to hue. P3 primaries sit further out, so reds and greens that sRGB can’t reach become possible, while every hue already exists in sRGB. HDR is luminance above SDR white. The reason the two demos look exclusive is one line: webgl_test_wide_gamut sets renderer.outputColorSpace to DisplayP3ColorSpace, webgpu_hdr sets it to ExtendedSRGBColorSpace with a HalfFloat output, and a renderer has one output space. Also watch for a third meaning of HDR. In my own scenes I render into HalfFloat targets, so values above 1.0 exist, but ACES tone mapping squeezes them back into sRGB at the end. That’s HDR rendering, not HDR display.