Hi all,
Im interested to use web technologies to promote cultural heritage artifacts. This example tries to illustrate the effect that Uranium glass has when exposed to ultraviolet light.
It uses a UltraHDR texture with a custom renderer (which just enables a special cavas mode). It’s a bit odd that Three.js hides the context from the user, that certainly needs to be changed.
You’ll need a HDR capable browser (currently Chrome is the best choice) and a HDR screen (thsi might be activated first on Windows). Apple Silicon devices with integrated screen will work.
That’s interesting. Sadly, my screen is not HDR. I used Chrome, but the HDR check fails.
Could this approach be used in the opposite direction with IR (or near-IR) textures? IR photography is also amazing, especially when shooting trees and plants.
Yes it can certainly be done with a bit of post processing the texture(s). this approach tries just to emulate the light emitting nature of uranium glass when exposed to ultra violet.
The gl.drawingBufferColorSpace setting (and its WebGPU equivalent) is exposed as renderer.outputColorSpace. Currently we only support sRGB (default) and Display P3 (experimental).
When Rec. 2100 HLG is available in stable browsers for WebGL and/or WebGPU drawing buffers we could consider allowing that too. Some additional changes would be necessary to support this output mode fully.
Well, the thing is that HDR output already works, when one avoids any setups that would do any colour recalculations - that is without any lighting. This is supported by at least Chrome, maybe other based on Chromium - vendors tend to disable HDR support (hide it behind a flag).
As a proof just look at the example in a HDR capable browser with a HDR screen, you might want to test first on the HDR page of Greg Benz.
I’m not sure if I in favor of the “all or nothing”-approach. Why not allow what’s currently already possible and maybe spit out some warning if a not supported mode (or combination of mode and feature) is requested?
Thanks – This is the first time I’m hearing that HDR support works for WebGL or WebGPU in any browser – I’d thought it was still an early draft proposal. So far the demos haven’t worked for me, including with Chrome on Apple Silicon with integrated screen… the HDR photo examples work, but not WebGL/WebGPU demos so far. But in any case it’s clear the feature is coming.
Not “all or nothing”, but we will want to do more than just turn on that WebGL flag. In addition to higher dynamic range, Rec. 2100 HLG uses a wider gamut (Rec. 2020) than sRGB (Rec. 709). The flag tells the browser that the colors written to the drawing buffer are in Rec. 2100 HLG, but if you’re using THREE.Color in any way, they’re not really, and a conversion is required. So there is some work on the color management side to support even very basic use.
We shipped support for Display P3 in an experimental state without certain things (mainly tone mapping) in place, I don’t mind doing the same for Rec. 2100 HLG, once I can test it locally.
@donmccurdy : Just out of curiosity: Does the provided example work for you? Can you see the HDR texture using Chrome on a Mac Book (or another Apple device with an integrated screen)?
The “HDR check” fails in Chrome for me (MacBook Pro, M1 Pro, macOS Sonoma 14.6.1, integrated display), and the canvas doesn’t appear to have extended dynamic range. Images (outside of a WebGL / WebGPU canvas) do appear in HDR as expected.
@donmccurdy Thanks for letting me know - I have to update the description. I had the wrong assumption that this was now enabled by default, which it isn’t: You need to activate “Experimental Web Platform features”: chrome://flags#enable-experimental-web-platform-features
A updated messaege is currently deployed to the site and other HDR pages.
Great! Thanks for confiming!
Sorry, I was getting a bit operationally blind the last weeks using this new features and forgot to mention the flag.
Anyways, I suspect you guys (from this forum) can make up some less esoteric use cases…
