HDR resources for web dev and beyond
AVIF-based pages should have pretty wide availability by now.
Canvas-based pages (WebGPU, realtime 3D) are Chrome 129+ and equivalent.
-
AVIF HDR Test Page: https://alexfry.github.io/ACES_ODT_Candidates_Examples/diagnostic.html
-
PlayCanvas HDR Demo: https://engine-hlvhm84x4-playcanvas.vercel.app/#/graphics/clustered-lighting
-
Bright Pixel Page: https://ccameron-chromium.github.io/webgpu-hdr/example.html
-
Bright Pixel Page, WebGL: https://ccameron-chromium.github.io/webgl-hdr/example.html (not working in Chrome as of 20241014)
-
Greg Benz' Instagram Page with HDR images: https://www.instagram.com/gregbenzphotography/
- JPEGs with Gainmaps work in Mac Preview, but don't work in Mac Finder
Goal: Capture videos and screenshots from MacOS in HDR.
- https://developer.apple.com/documentation/screencapturekit/capturing_screen_content_in_macos 20241015 – didn't get it to work. Regular LDR capture works, but HDR capture doesn't.
Note: does not seem supported on Mac displays as of 20241015...
- OBS > Settings > Advanced
- OBS > Settings > Output
- ???
YouTube does not support H.265/HEVC in HDR, but supports H.264 HDR10 Rec202 HLG and PQ. This is in contrast to what the documentation states.
The tooling YouTube provides for hdr metadata injection is now ~8 years old and the provided droplet doesn't seem to work on Apple Silicon.
-
WebGPU Explainer: https://github.com/ccameron-chromium/webgpu-hdr/blob/main/EXPLAINER.md
-
Test page with code, image, and video support: https://gregbenzphotography.com/hdr/#tests
- Information on Instagram/Threads HDR Support: https://gregbenzphotography.com/hdr-photos/instagram-now-supports-hdr-photos/
- Info about Camera Raw: https://gregbenzphotography.com/hdr-photos/jpg-hdr-gain-maps-in-adobe-camera-raw/
-
Rant Tweet about iPhone HDR Video Editing: https://x.com/hybridherbst/status/1844493871998550447
-
Test Image for brightness response (adjust your monitor's brightness settings if it supports HDR to see what it does)
