Re: [csswg-drafts] [css-color-hdr] How should multiple layered elements with different `dynamic-range-limit` values behave? (#11307)

When HDR content is composited, it can be thought of* as being all put into a single buffer. This single buffer has the maximum available headroom, which is the headroom of the screen.
* On macOS, this is NSScreen's [maximumExtendedDynamicRangeColorComponentValue](https://developer.apple.com/documentation/appkit/nsscreen/maximumextendeddynamicrangecolorcomponentvalue?language=objc)
* On Android, this is [Display.getHdrSdrRatio](https://developer.android.com/reference/android/view/Display.html#getHdrSdrRatio())
* On Windows this is the ratio of [DISPLAYCONFIG_SDR_WHITE_LEVEL::SDRWhiteLevel](https://learn.microsoft.com/en-us/windows/win32/api/wingdi/ns-wingdi-displayconfig_sdr_white_level) to [DXGI_OUTPUT_DESC::MaxLuminance](https://learn.microsoft.com/en-us/windows/win32/api/dxgi1_6/ns-dxgi1_6-dxgi_output_desc1)

Let's call the headroom of the screen _H_.

Each piece of HDR content is tone mapped into this single buffer _independently_.
* This is a very important concept. Each image, each video, etc, is treated separately.
* Any content that has a maximum pixel value** greater than _H_ is tone mapped so that its maximum value is _H_.

The `dynamic-range-limit` allows each individual element, on its own, to say "use something other than _H_ for the tone mapping step".
* If you say `standard`, the value is 1.
* If you say `constrained-high`, it's up to the user agent. Chromium uses min(2, _H_).
* If you say `high`, then you use _H_ (which is the default behavior today).

So, to the question:
> If you have two UIImages overlapping each other with different [preferredImageDynamicRange](https://developer.apple.com/documentation/uikit/uiimageview/4173133-preferredimagedynamicrange) values, which one takes precedence?

Neither. Each image is tone mapped separately. That's what happens already. Consider the following example (assuming `dynamic-range-limit` doesn't exist):
* I have Image A with maximum pixel value** 8
* I have image B with maximum pixel value** 5
* My display has headroom _H_=6

In this case, Image A has a tone mapping performed that maps its maximum (8) to 6, while Image B has a totally different tone mapping (in particular, it has no tone mapping applied, because 5<6).

Now assume that Image A has `high` and Image B has `standard`. As before, Image A will be tone mapped so that it has a maximum value of 6, while Image B will now be tone mapped so that it has a maximum value of 1.

Once the images have been tone mapped, they're just regular pixel values (that can be overlapping, covering each other, blending, etc).

> I can't even really tell if the implication of having dynamic-range-limit: high be the default means that a CSS color value like color(srgb 10 10 10) should now be super bright.

For the moment, I'm only applying this to HDR images, videos, and canvases. For colors, Chromium has unrelated bugs. With respect to how to express this, my opinion on this is as follows: "colors should be like HDR image pixels". HDR image pixels must specify something to the effect of "I am (0.5, 0.9, 0.7) when there is headroom 1 and (6, 9, 8) when there is headroom 10, and what you see will be interpolated between those two based on the display's headroom".

[*] Hardware overlays, etc, will make it so that content will not always end up in a single buffer, but that's a separate detail.
[**] Pixel value in linear space

-- 
GitHub Notification of comment by ccameron-chromium
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11307#issuecomment-2545066082 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 16 December 2024 09:36:12 UTC