HDR (DCI-P3 & Rec. 2020) support

[WesselKroos]

Waiting on the completion of the implementation of HDR support in the canvas element: https://chromestatus.com/feature/5703719636172800 https://github.com/whatwg/html/issues/9461 https://github.com/WICG/canvas-color-space/blob/main/CanvasColorSpaceProposal.md https://github.com/w3c/ColorWeb-CG/blob/main/hdr_html_canvas_element.md

• [x] Workaround: Separate filter settings for HDR videos. Which with users can finetune the minimum/maximum rgb values. Note: The color space conversion remains incorrect.
• [x] Support the DCI-P3 (p3) color space (Currently not supported by Firefox) Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1771373
• [ ] Support the Rec. 2020 (rec2020) color space (Currently not supported by any browser)

[WesselKroos]

There is another feature for the Display P3 colorspace support in canvas elements that was released in Chrome 104 (august 2022): https://chromestatus.com/feature/4814886323355648

Since that is easier to implement it has been added to the 2.37.25 version

[Askejm]

Any estimate of when this will be added? Have heard a lot of people using this to help uneven burn-in on ultrawide OLEDs but then we can't get proper HDR

[WesselKroos]

Regarding Firefox, that's up to the developers at Mozilla. I think you can follow this Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1771373

Once they've implemented display-p3 support for the canvas it should work immediately.

[Askejm]

I see. So could i perhaps mitigate this by disabling WebGL? What does it use then, and would it be using a lot more power on a 3090?

[Askejm]

Nvm disabling webgl renderer makes no difference. That sucks :/

[WesselKroos]

You could try a chromium browser. It should be a bit better because they can extend the color space to DCI-P3.

[Askejm]

@WesselKroos I just noticed when remove black bar enables, I don't get washed out blacks Black bar enabled and detected: Black bar detection disabled Ambient lights completely disabled: On firefox. It only happens when a black bar is detected and removed

[Askejm]

I've found a workaround: Disable remove black bar and sidebar (V and B) Disable reset bars next video Set sidebars size to 0.1%

[WesselKroos]

Hmm, if that worked you might want to check if toggling the advanced setting "Video artifacts workaround" also works. Then you might be able to keep using the remove black bar feature.

[Askejm]

Yes, that works. Disabling that feature solves the issue

[WesselKroos]

Then, are you using NVidia RTX to watch a non-hdr video in hdr?

[Askejm]

I am on a 3090, but I have RTX super resolution and HDR disabled

[WesselKroos]

Interesting, I guess Firefox uses MPO's to display HDR videos directly through the graphics card driver so that Firefox doesn't have to do any color conversion. But do the colors in the canvas match with the video colors? If not you could check if setting Firefox's webgl.colorspaces.prototype flag to True in about:config helps. It should promote the WebGL canvas to the display-p3 colorspace, but it seems to be in an experimental fase currently.

[Askejm]

But do the colors in the canvas match with the video colors?

Sorry, I'm not quite sure what this means? If i turn ambient lights on or off now, i see no difference in colors

[WesselKroos]

Sorry, I'm not quite sure what this means? If i turn ambient lights on or off now, i see no difference in colors

The colors of the ambient light don't always match with the colors of the video when I force HDR colors in Chrome on my non-HDR monitor. So, I'm wondering if that is also the case on HDR monitors.

For example, with chrome://flags/#force-color-profile set to ITU-R BT.2020 I get these differences:

[Askejm]

Well here I took some screenshots without webgl.colorspaces.prototype: However these are SDR screenshots. I had to use OBS to turn them into SDR. I'm not sure which tone mapping algorithm it uses, but it is clear that ambient lights has less punchy highlights since it appears to be SDR. It's kinda hard for me to see the difference, even in your screenshot, but it appears that there is mostly a luminance difference. Now at this point i realized its probably better to take a picture of my screen to better show how the colors are represented in person. I forgot to take a screenshot with the flag set to true False: True:

They appear pretty much identical to me. I took these with my camera, where all the settings where kept the same except the third picture where i bumped up the iso to get more of the blacks

[WesselKroos]

It's indeed hard to see in the screenshots and photographs. You can see the difference in my screenshot at the left side of the video. It's mainly visible in the purples/pinks and the greens, which are grayish/duller in the ambient light than in the video when the Rec.2020 colorspace simulation is enabled in Chrome:

That's because the saturated colors of the Rec.2020 color space in the video are getting limited to the Rec.709 (srgb) colorspace in the ambient light canvas. Here is the difference in a graph:

I can also see a similar effect in your screenshot. The only difference is that the screenshot and ambient light canvas is limited to the Rec.709 colorspace, causing getting reds to be crushed in the ambient light canvas. Because you have a HDR monitor:

The photographs do look identical though. So I guess that the webgl.colorspaces.prototype is flag isn't doing anything at the moment.

But I think you are not watching a HDR video, because your YouTube player is not showing the HDR quality label. It could be that the HDR video quality is not available in Firefox. I see these options and label when I enable the HDR colorspace simulation in Chrome for this video: https://www.youtube.com/watch?v=1MieluM0c6c

[Askejm]

Hmmm... this is weird I go to this LG HDR video, but it doesnt say its hdr anywhere in the quality options However, taking a screenshot gives the blown out highlights that I get when screenshotting HDR content But despite this, the highlights still appear a lot more toned down that downloading the video and playing it in VLC https://github.com/WesselKroos/youtube-ambilight/assets/55248977/d6fe2da6-8b0b-4eb0-bb85-839c63902106 But if i compare it to Chrome, Chrome has even more toned down highlights https://github.com/WesselKroos/youtube-ambilight/assets/55248977/9f4fec18-2ff4-418f-a51e-4ae42d2f71f0

[WesselKroos]

Then you are not watching a HDR YouTube video. Maybe you need to change some settings in your LG monitor or Windows settings, like this guy: https://www.youtube.com/watch?v=ZO-x-pViufI