search

whatwg / html

HTML Standard
https://html.spec.whatwg.org/multipage/
Other
8.05k stars 2.64k forks source link

Adding support for High Dynamic Range (HDR) imagery to HTML Canvas: a baseline proposal #9461

Open palemieux opened 1 year ago

palemieux commented 1 year ago

The Color on the Web CG would very much appreciate your feedback on the following strawman, which motivates and proposes baseline modifications to the HTML Canvas API to enable support for High-Dynamic Range (HDR) imagery:

https://github.com/w3c/ColorWeb-CG/blob/8eac62f15e5b41940636beb031f6214b61e933af/hdr_html_canvas_element.md

The proposed modifications allow the HTML Canvas API to manipulate High Dynamic Range (HDR) images expressed using the widespread BT.2100 PQ and BT.2100 HLG color spaces, without precluding adding future HDR capabilities, such as support for additional color spaces like a linear high-dynamic range color space.

Kaiido commented 1 year ago

cc @whatwg/canvas

Not my domain of expertise at all, so pardon me if I'm out of context here, but the colorMetadata attribute is a bit unclear to me.
It says in the strawman that it is used to "define the tone mapping algorithm used when rendering the image to a display" (emphasize mine). Is it really to be used only when rendering to a display (like a monitor)? Authors don't really have access to that time. Also, what if they want to render two images on the same canvas, both requiring different tone mapping options?
Or is it actually meant to affect the next drawings on the context? (including compositing etc.)
If this is meant mainly for images drawn through drawImage(), maybe an alternative would be to set that option on createImageBitmap() instead?

palemieux commented 1 year ago

colorMetadata is intended to be used whenever the image is rendered, i.e. the pixels of the image transformed, and is not limited to rendering to a physical display. I will file an issue to clarify this.

Also, what if they want to render two images on the same canvas, both requiring different tone mapping options?

Is the following use case the one you have in mind?

What should the colorMetadata parameters of the Canvas element be set to?

Kaiido commented 1 year ago

I'll continue the first branch of the discussion over at the linked issue.

Is the following use case the one you have in mind?

image A has a certain set of colorMetadata parameters image B has a different set of colorMetadata parameters image A and image B are drawn into a Canvas element

What should the colorMetadata parameters of the Canvas element be set to?

Yes, that's the use case I had in mind. And I'm not sure how using that API it can be handled, nor if it's actually possible to handle it.

palemieux commented 1 year ago

One approach is to set the colorVolumeMetadata of the destination Canvas element to the union of the two color volumes (or a superset thereof). In media & entertainment, Rec. 2020 primaries + D65 white point is effectively a superset of common distribution color spaces. minimumLuminance and maximumLuminance can then be set as the union of the range covered by each of the two images.

Another approach is to simply not specify any colorVolumeMetadata, which should work fine for individual images.

Finally, the next step for the CG is to define an API that allows the web app to perform its own tone-mapping. for more complex uses or when the app needs finer control.

palemieux commented 10 months ago

Please find below an updated proposal for adding support for High Dynamic Range (HDR) imagery to HTML Canvas.

https://github.com/w3c/ColorWeb-CG/blob/hdr_canvas_r2/hdr_html_canvas_element.md

Selected highlights of this revision to the proposal;

Feedback, issues and questions are welcome at mailto:public-colorweb@w3.org and https://github.com/w3c/ColorWeb-CG/issues.

Contacts: @palemieux and @svgeesus (Color on the Web CG co-chairs)