Add HDR settings to Particles sample

[beaufortfrancois]

Results:

• Works on Chrome Canary with --enable-blink-features=WebGPUHDR
• Flickers a lot on Safari Tech Preview with experimental WebGPU support
• Did not work on Firefox Nightly before this PR

[beaufortfrancois]

@ccameron-chromium Please have a look as well

[greggman]

I think adding a HDR sample is great but I wonder if the particle example is a good example for it vs some dedicated sample? How will people know to go look at "particles" (guess you could rename it particles(HDR)?)

Also, I couldn't see any difference at a glance. I ran with

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --use-data-dir=$T/delme-canray-6933 --enable-unsafe-webgpu --enable-webgpu-developer-features --enable-blink-features=WebGPUHDR

So it makes me wonder if rather than a toggle, whichever HDR sample we end up with (could be this one) shows 2 canvases. One HDR, one not, side by side. Then, that they are different would stick out?

[beaufortfrancois]

I think adding a HDR sample is great but I wonder if the particle example is a good example for it vs some dedicated sample? How will people know to go look at "particles" (guess you could rename it particles(HDR)?)

I've added the HDR bit to make it clearer. Thanks for the suggestion!

Also, I couldn't see any difference at a glance. I ran with

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --use-data-dir=$T/delme-canray-6933 --enable-unsafe-webgpu --enable-webgpu-developer-features --enable-blink-features=WebGPUHDR

I tried your command line and it works great on the Built-in Liquid Retina XDR Display of my Apple M1 Pro device. When plugged to an external non-HDR display, there's no difference as the display doesn't support HDR at all as expected. Note that you only need /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --enable-blink-features=WebGPUHDR.

So it makes me wonder if rather than a toggle, whichever HDR sample we end up with (could be this one) shows 2 canvases. One HDR, one not, side by side. Then, that they are different would stick out?

I think the particles sample really shines with HDR. Traditional HDR demos like https://webkit.org/blog-files/color-gamut/ are "okay" to understand what is HDR but I think the webgpu-samples should focus on how the WebGPU API works in regards to HDR with toneMapping and format.

[beaufortfrancois]

FYI I've just added a warning if the display is not HDR compatible to set user's expectations.

[mwyrzykowski]

Just tried it out on a MBP - works great! 🎉

[beaufortfrancois]

I've tested Android as well and it works great there also!
@mwyrzykowski Does https://webgpu.github.io/webgpu-samples/?sample=particles also work on iOS?

[mwyrzykowski]

It does but WebKit doesn’t support HDR canvas yet. But it appears even on an iPhone 15 pro the sample thinks HDR is not supported:

[beaufortfrancois]

I'm using window.matchMedia('(dynamic-range: high)') to test whether the display is HDR compatible or not. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/dynamic-range#browser_compatibility says it should be supported on Safari on iOS 🤷 .

[mwyrzykowski]

I'm using window.matchMedia('(dynamic-range: high)') to test whether the display is HDR compatible or not. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/dynamic-range#browser_compatibility says it should be supported on Safari on iOS 🤷 .

Oh interesting, I reloaded the page and the 'display not compatible' banner disappeared, looks like the detection works

[beaufortfrancois]

It does but WebKit doesn’t support HDR canvas yet.

Is there a way to detect in JavaScript whether HDR canvas is supported instead of using this media query?

[mwyrzykowski]

Is there a way to detect in JavaScript whether HDR canvas is supported instead of using this media query?

Apologies for the delay but I looked around and didn't see anything conclusive. Could we check for context.colorMetadata === undefined as that appears required by the HDR canvas specification? https://github.com/w3c/ColorWeb-CG/blob/main/hdr_html_canvas_element.md#add-hdr-rendering-behavior-and-hdr-metadata-to-canvasrenderingcontext2dsettings

Or should one be able to use HDR in WebGPU without an higher bit depth canvas (e.g., R10G10B10A2 type formats)?

[beaufortfrancois]

context.colorMetadata is not implemented in Chromium sadly.

And GPUCanvasConfiguration is a dictionary, not an interface, so I can't check without calling configure() first whether toneMapping is implemented.

I wonder if I should leave it as is.

[mwyrzykowski]

It’s certainly fine with me to leave as-is 👍