Browser WCG+HDR CANVAS Standardization

[mdrejhon]

This is a placeholder GitHub item containing links to ongoing Blur Busters involvements in WCG/HDR standards threads. HDR in browsers is still bleeding edge (tester at beta.testufo.com)

Current State of HDR CANVAS (September 2024)

• Chrome - supports WCG & HDR (Windows / Mac) via flag
• Edge - supports WCG & HDR (Windows / Mac) via flag
• Brave - supports WCG & HDR (Windows / Mac) via flag
• Safari - supports WCG only (MacOS / iOS / iPadOS)
• FireFox - supports WCG only on MacOS only (not Windows)

You need to use chrome://flags/#enable-experimental-web-platform-features on all Chromium platforms to enable HDR CANVAS.

[mdrejhon]

Standards

• W3C: High Dynamic Range and Wide Gamut Color on the Web
• WhatWG: Adding support for High Dynamic Range (HDR) imagery to HTML Canvas: a baseline proposal

Major HDR Standards Contributors

• @palemieux / @svgeesus (working on HDR of ColorWeb-CG)
• @ccameron-chromium (Chromium HDR guy)
• There may be others

Demos / Trailblazers

• Demo, Our TestUFO 2.0 Beta and WCG/HDR tester
• Code, @cahnke: HDR Canvas
• Demo, Greg Benz Photography: HDR Demo Photos
• Demo, Webkit: Wide Gamut 2D Graphics using HTML Canvas
• ccameron@chromium: HDR Canvas Example
• Demo, wide-gamut.com/test

Standards/Code Discussions

• ColorWeb-CG: Adding support High Dynamic Range (HDR) imagery to HTML Canvas
• GPUWeb: Feature detection for HDR canvas
• Chromium: WebGPU HDR Canvas Meta Tracker

Links to Bugs & Blockers

• FireFox: HDR images are rendered extremely dark
• FireFox: Add HDR support to Gecko
• Linux HDR Support Blocked By: Draft: staging: add color management protocol

How Can I/You/We Help?

• If you have standards-committee skills, contribute to the discussion at the links!
• If you have coding skills to contribute, you can get involved with browser engines.
• If you need to ask questions, ask them here or privately (let's not increase noise for others unnecessarily; I even have that habit)

[beaufortfrancois]

FYI Chrome 129 supports HDR in WebGPU without any flag. See https://developer.chrome.com/blog/chrome-129-beta?hl=en#webgpu_extended_range_hdr_support

[mdrejhon]

FYI Chrome 129 supports HDR in WebGPU without any flag. See https://developer.chrome.com/blog/chrome-129-beta?hl=en#webgpu_extended_range_hdr_support

Fantastic. Can't wait until CANVAS 2D accesses it. While WebGPU is now HDR, the <CANVAS> HDR is still locked behind chrome://flags. I still have to tell users about toggling a flag (for now) at https://beta.testufo.com

Hopefully Version 131 or 132? @ccameron-chromium, do you know?

[ccameron-chromium]

For 2D canvas, things stalled out because of disagreements about how to add support for floating point 2D canvases (see this issue).

Both WebGPU and WebGL support floating point canvases, and so they can make forward progress.

[mdrejhon]

For 2D canvas, things stalled out because of disagreements about how to add support for floating point 2D canvases (see this issue).

Both WebGPU and WebGL support floating point canvases, and so they can make forward progress.

Understood! Please feel free to spread beta.testufo.com throughout your standards groups, because we intend to stay with CANVAS 2D for about 90% of our animations. Some will use WebGL in the future, but Canvas 2D is our best candidate for display-testing initiatives.

Where do you think I should best become a guest in these standards-group discussions? I hate to add lots of noise, but let me know where you think I can best help/advocate/advise.

[mdrejhon]

TestUFO 2.1 is now public at www.testufo.com (cc: @ccameron-chromium ...)

A future version of TestUFO will add WebGL/WebGPU support. I'm working on the back-end already.