13 ms·

HDR QR Code

308 points by fdb 3y ago

erur 3y ago
Absolutely love reading about such practical little hacks. Really brings back the old excitement that got me into computer science. Also given how prevalent the issue of QR code brightness is for many use cases this could actually prove useful.
- erur 3y ago
  Sorry for self replying but I just had a look at the repo and it's definitely worth fully automating this. A js/python snippet converting pngs to superwhite video frames should be fairly easy to implement.
  - mlyle 3y ago
    > A js/python snippet converting pngs to superwhite video frames should be fairly easy to implement. ??? It's just an all-white video, with an overlay of black QR code applied by CSS. It's already "fully automated." Both (the video and the overlay) are small enough to be base64'd right into the HTML.
    - ihuman 3y ago
      I'm not sure why you're being downvoted when that's exactly what's happening. The QR code comes from the mask-image in the inline-style, not the video.
    - aardvark179 3y ago
      You also only really need the video to push the browser to do things in HDR. You can’t express a CSS colour way outside the normal range, but blending calculations are not clamped so can be used to get the colour. https://github.com/kiding/wanna-see-a-whiter-white https://github.com/kiding/wanna-see-a-whiter-white was posted here a while ago and demonstrated the technique.
    - dolmen 3y ago
      The 1.19 KB video file itself has been created "manually" using a video editor. See https://github.com/dtinth/superwhite#creating-the-video https://github.com/dtinth/superwhite#creating-the-video We can expect it is possible to create a much more compact video file with the same features.
      - mlyle 3y ago
        Sure, I totally agree with that. Though not too much smaller: there's >500 bytes of required headers in an MP4 file encapsulating video. In any case, that's not what the person I was replying to was talking about.
lbayes 3y ago
Both seem to work fine when I point my (aging) Pixel 5 at them rendered on my Asus laptop screen. I'm assuming there's some problem with screen-rendered QR codes that this solves, but my quick google search mostly just resulted in listicle spam. What's the problem this solves?
- paranoidrobot 3y ago
  Probably people who have their screen brightness set to lower levels (automatic or not). I notice some airline apps and Google Wallet set screen brightness to maximum when you view a boarding pass.
  - lbayes 3y ago
    Interesting. When I look at the two codes side-by-side with normal (full) brightness, the HDR one looks quite a bit brighter. If I dim my screen brightness substantially, the HDR one also gets a lot dimmer. Not sure if this solves that problem, though it could be an issue with my particular screen?
    - motoxpro 3y ago
      For me even at the lowest brightness on macbook it is still way brighter than the normal one. Looks about like "normal" white.
    - ryanschneider 3y ago
      On my iPhone 11 at my standard brightness (around 25%) the HDR one is much brighter but if I turn my brightness to max then they both look the same. If I dim my brightness completely the HDR does get dimmer but is still quite visible while the other is quite hard to see.
    - mikepurvis 3y ago
      The same on an iPhone 8.
  - MBCook 3y ago
    I’ve seen apps do that too. I may make a difference with laser scanners or other more commodity hardware than smartphone cameras which are pretty amazingly good these days.
stavros 3y ago
I will never understand HDR. A friend has tried to explain it many times to me, but I always fail to get it. A display just has so much dynamic range (from full light off to full light on). HDR can't give you more range, so what does it actually do? The only thing I've seen it do is override my brightness setting to make my screen go to full brightness when I've set it lower.
- LeoPanthera 3y ago
  HDR increases the granularity of available brightness levels, from 0-255 to some higher level. (1023, usually.) It then defines the "old" 100% level to be some value less than the new maximum. It is usually combined with new display technologies that can emit unusually high brightness levels. On a traditional display there is obviously no point.
  - stavros 3y ago
    Ah, this kind of makes sense, but then why wouldn't they map the old 100% to the new maximum? I can understand the increased granularity, if you're making monitors that go much brighter, then you get more light levels, but why define the old maximum to be less than the new maximum?
    - krackers 3y ago
      So there is always headroom to show HDR content.
      - stavros 3y ago
        So the innovation of HDR is that it always makes my screen dimmer so it can sometimes drive it to full brightness and say "look, magic"?
        krackers 3y ago
        Yes that's essentially how I understand it: hardware-wise HDR is basically "a really bright screen" coupled with good black levels. To ensure that you always get the HDR effect at any brightness, you need to reserve some headroom. It should be noted that you probably could not sustain this peak brightness for long anyhow due to thermal issues. You might be interested in reading https://prolost.com/blog/edr https://prolost.com/blog/edr which explains in more detail.
scastiel 3y ago
Wow that’s impressive… and dangerous I guess? I can’t see how this won’t become an antipattern, especially to display ads on websites…
- hamasho 3y ago
  This comment makes me wonder why ad companies haven't already used this to show ads. They are notorious for using any technology to grab users' attentions.
  - nomel 3y ago
    I sincerely believe we are witnessing the birth of bright ads, and some eventual “block third party HDR” browser option.
    - planede 3y ago
      The "brightness war" hence begins, not unlike the "loudness war" pushing the dynamic range of an other medium.
- fodkodrasz 3y ago
  It is already an antipattern, it hurt my eye as it was too bright. Once again webdevs creating another UX nightmare.
  - 3nt3 3y ago
    it's useful for QR codes though so they can actually be scanned somewhat reliably from a phone screen
    - birdyrooster 3y ago
      Seems like a solution in search of a problem
    - lopis 3y ago
      Lots of apps already do that when you open a QR code. What I don't need is the browser to break expectations and make random images super bright...
cgijoe 3y ago
See also: https://kidi.ng/wanna-see-a-whiter-white/ https://kidi.ng/wanna-see-a-whiter-white/
dmitrygr 3y ago
I CANNOT wait for HDR-bright ads on random websites /s
coltonweaver 3y ago
Firefox users: This won't render in HDR in FF. Open it in Safari if you want to see it.
- jagged-chisel 3y ago
  On iOS it works in FF.
  - rhplus 3y ago
    That’s probably because it’s still WebKit on iOS.
- jillesvangurp 3y ago
  Interesting. Safari also adjusts the hdr over a few seconds so when you alt tab to it, the qr code becomes a lot brighter. Also firefox looks really bland right next to it. Chrome also seems to support hdr. It's just Firefox that doesn't support this yet. There's an open issue for this: https://bugzilla.mozilla.org/show_bug.cgi?id=1793091 https://bugzilla.mozilla.org/show_bug.cgi?id=1793091 More interesting is whether CSS will be fixed to support this. There seems to be some recent work on this: https://w3c.github.io/ColorWeb-CG/ https://w3c.github.io/ColorWeb-CG/ So, this hack might long term not be needed if this gets addressed properly.
  - jillesvangurp 3y ago
    Also just found a good reason to not use this hack with Chrome, maxes out the CPU. I left this in the background for an hour or so and I noticed my laptop getting warm. Checked with htop and Chrome was guilty. Closed it and it went back to normal. The only open tab: this thing.
BonoboIO 3y ago
Neat trick. I m still thinking about a use case for me personally. Works on my iPad Pro 2020 iOS14
thadk 3y ago
Asked it before and ask it again: how far are we from NYT or WSJ using this for d3 infoviz features?
temporallobe 3y ago
I am on an iPhone 13 and to my surprise I actually saw the HDR QR code displaying way more brightly than the rest of the page, and sure enough when I turned my power saving mode on, it went back to looking like the other non-HDR QR code. Impressive! It will be interesting to see if CSS ever gets full support for it.
bhaney 3y ago
I'm sitting in front of both a 2012 Macbook Pro (no HDR) and a 2020 M1 Macbook Air (HDR), and I'm expectedly seeing the difference in brightness between the QR codes on the newish Air, while they look the same on the old Pro. But what's interesting is that both of the QR codes on the old Pro look just as bright as the big bright HDR QR code on the new Air. Basically, the only observable difference I'm noticing between the two laptops is that the non-HDR QR code looks dimmer on the HDR-supporting machine. I'm sure this is some kind of optical illusion, but it's certainly not doing much to make me value the existence of HDR.
- JonathonW 3y ago
  What you're seeing here is Apple's EDR implementation [1], which, on non-local dimming displays (every Mac display except the M1/M2 14" and 16" MacBook Pros and the Pro Display XDR), works by bumping up the whole display brightness (and adjusting brightness of all non-HDR content downwards) to display colors brighter than standard SRGB white. So, yeah, both QR codes probably are brighter on your old Pro, if its display brightness is set higher. And, if you adjust display brightness on the Air, you'll see them converge to the same brightness there, too (on my M2 Air, it seems that Apple leaves a little headroom for the HDR "white" to appear a bit brighter than UI white at full brightness; not sure if the M1 Air behaves the same or not as it has an older display). Displays with local dimming (and OLEDs) can display, in small areas, colors that are brighter than the maximum full-screen brightness. That's where HDR content gets really compelling-- if all you can do is dim the whole screen, you're unlikely to see much of anything that you couldn't do just by bumping up the brightness with SDR content. [1] https://prolost.com/blog/edr https://prolost.com/blog/edr
  - bhaney 3y ago
    Very interesting. Thanks for the explanation!
  - nwienert 3y ago
    Does this mean some type of monkey patch could force the M2 screen to display a bit brighter? Because that’s my biggest gripe with it, I wish the screen would get to at least double the current max brightness.
qbane 3y ago
It's when I realize that you cannot simply have the screen (of Apple devices at least) display "white" by demanding a color "white".
- freetime2 3y ago
  I wouldn’t want all whites to be displayed that brightly on my monitor, because of battery drain and eye fatigue. So I’m fine with reserving HDR for certain applications like video, and using “normal” levels for everything else. Maybe there should be some CSS extensions for using HDR directly on web pages, though, if the developer really wants to.
  - qbane 3y ago
    I mean that a designer may think, hey just give me the brightest white, but the most obvious way to do so is not “correct”. But is it impossible? No. It is just insane.
StrangeATractor 3y ago
How do you even represent HDR colors? I've tried Googling this and I can never really find an answer. Is it basically just eight hex digits instead of six?
- HippoBaro 3y ago
  In SDR content, colors are encoded with 8-bits ranges. So, 24bits for the three color channels. With HDR, we usually use 10 bits instead (this is where the "10" comes from in "HDR10"). See https://en.wikipedia.org/wiki/Color_depth#Deep_color_(30-bit) https://en.wikipedia.org/wiki/Color_depth#Deep_color_(30-bit....
- ylere 3y ago
  HDR is less about the colors and more about achieving a wider range of brightness levels (hence increasing the total dynamic range). It's typically encoded using 10 or 12-bit color depth, and metadata is added to the media on how to map the colors' luminance/brightness values (e.g., what darkest and brightest values of a image/video should be). This is then used to transform HDR content into appropriate color and luminance values for your specific monitor (e.g., the reference monitor used for grading might have a peak brightness of 1000 nits, but yours might be different, or have a different luminance-response curve or support a different color space).
- abhibeckert 3y ago
  Both QR codes are using #ffffff. The "bright" one has metadata that tells the operating system to render white at the maximum possible brightness, instead of whatever brightness it would normally render white at. It's broadly supported on Apple devices, though how well it works depends on the hardware you have.
  - tuukkah 3y ago
    You're correct in part, as both image sources (the picture and the video) have maxed out pixel data. If it's HDR10, it does not have 24 but 30 bits of color though, so it maxes out at #3fffffff.
- 3y ago
deleted 3y ago
[deleted]
dagmx 3y ago
Author says that it can’t be represented with css, but I think HDR is supported in Safari within Display P3 I believe, you can give a value higher than 1.0? https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/ https://webkit.org/blog/10042/wide-gamut-color-in-css-with-d... I might be wrong however.
- Kovah 3y ago
  I was curious and tested this in Safari, but `color(display-p3 1.5 1.5 1.5)` displays the same white as `color(display-p3 1 1 1)` does.
- phh 3y ago
  "HDR" contains multiple components: - Electro-Optical Transfer Function. That's the famous "gamma" of the display which is no longer a gamma - color space (which real-life color does RGB = 100%, 0%, 0% match) - Absolute brightness. There are metadata in the video files that say that RGB=100%, 100%, 100% mean 2000cd/m2 (and gives the average frame brightness like 10%, which helps scales for displays not capable of 2000cd/m2 everywhere) - Increased bit depth Display-P3 is only the color space (and maybe the EOTF). This video uses the "absolute brightness" feature of HDR to increase brightness.
schappim 3y ago
Does not seem to work on Pro XDR in Safari or Chrome (I guess it hasn't to really be internal display).
marricks 3y ago
I love how, if you do view it accurately, it just makes every other white look washed out and grey in comparison. Our visual system is just one big comparison machine.
- mavhc 3y ago
  Outside sunlight is 1000x brighter than inside light
  - 8n4vidtmkvmk 3y ago
    I'm reminded of this every summer when I go indoors or outdoors.
  - pavlov 3y ago
    Next time you see a scene in a movie where people enter a house and you can see both the interior and exterior, think about the 1000x ratio and how much artificial light was needed inside the house to balance the lighting in the shot. (Assuming it's a real sunlit exterior and not a sound stage, of course.)
    - trishmapow2 3y ago
      Cinema cameras also have >14 stops of dynamic range that can be extracted in post.
      - pavlov 3y ago
        It's been a while since I was on a set, but most DPs seemed to adhere to the principle: "When in doubt, add bigger lights."
        kuschku 3y ago
        In the modern digital era, that has actually changed quite a bit. Now cameras are really sensitive – the equivalent of what used to be 2500 to 4000 ISO is now really common – so instead of adding light, often you have to flag off light in areas you want dark. So instead of many bright lights you just have duvetyne and flags everywhere, which many DoPs have complained is harder to work with.
hilbert42 3y ago
Android here. Vivaldi shows the large one as a white video without detail, all other browsers show both QR codes the same.
blensor 3y ago
Does that only work with white or with other colors in general? I would not have thought that QR codes could become a hot topic in 2023 but combining that with the new Stable Diffusion Controlnet generated QR codes [1] could actually be pretty interesting [1] https://www.linkedin.com/posts/gschwandtner-michael_qr-stablediffusion-aiart-activity-7075411631110766592-tj-a https://www.linkedin.com/posts/gschwandtner-michael_qr-stabl...
thih9 3y ago
As with all hacks, the risk of breaking other features, especially accessibility, increases. I’ve noticed that you cannot long press the brighter code to read it. This works on the regular code next to it (tested in safari mobile).
- lucideer 3y ago
  They've made the odd choice of placing the QR code as a mask on the video via CSS, rather than positioning a black & transparent image over the video (which would allow long press). Not sure why they've done this, perhaps something about the HDR approach requires both the black and white to be a part of the same video render. Also - I'm not sure if it's a browser default or some other website CSS but imo there's no real reason long press shouldn't work on a video anyway... videos need accessibility too.
  - dtinth 3y ago
    article author here. odd choice indeed, I wasn’t thinking clearly when I experimented and wrote the article. putting a black and transparent image atop the video sounds like a much better idea — i will try it and see if it works. thanks for the suggestion!
    - lucideer 3y ago
      > I wasn’t thinking clearly when I experimented and wrote the article Not thinking clearly! I can barely write anything when I am thinking clearly. Great work on the technique, it's ingenious.
- schaefer 3y ago
  Accessibility? on QR Codes? They are read by computers, not people!
Jaxan 3y ago
This is pretty neat. I tried the "Digital Colour Meter" app on MacOS, but both whites shows exactly the same values and it is also impossible to take a screenshot of. So I wonder how this works in the OS.
creativenolo 3y ago
Neat trick. For one device I had to reduce contrast on the QR codes to yield an increase in detection. I assumed too much contrast was less desirable for the optics.
perryizgr8 3y ago
Why does this work only on Apple devices. My android phone has a super bright screen (~1000 nits for HDR content). It supports HDR photos and videos as far as I can tell. But both QR codes appear to be the same brightness.
- Rincon15 3y ago
  [dead]
gruturo 3y ago
Doesn't seem to work (which I see as a positive) for me on an iPhone 13 Pro Max, using native Safari, low power mode is off as indicated. I guess I have another reason to thank Lockdown mode?
xmdx 3y ago
Cool, only ever seen HDR on a large screen and the brightness is not as striking as this.
bawolff 3y ago
I wonder why you couldn't just add a colour profile to a png file to shift the colours to this super white colour. For that matter i thought avif supported HDR images.
- londons_explore 3y ago
  I think specifically mobile safari refuses to pass through the HDR properties in most cases. I think Apple is trying to keep HDR for native apps only, like many other platform exclusive features like faceid, fingerprint reading, etc - which are all unavailable to webapps. Video is probably an exception.
- zokier 3y ago
  Short answer: nobody has implemented it yet. See https://w3c.github.io/ColorWeb-CG/#png https://w3c.github.io/ColorWeb-CG/#png and the linked ML thread for some details.
londons_explore 3y ago
What a mess that the only way to display a bright white colour from a web page is to use a single frame video!!
vardump 3y ago
Oh my god that hurts my eyes! That was really bright. MBP M2 16".
- kinduff 3y ago
  Same device here, very very bright. Made the rest of the whites look like washed out greys.
planede 3y ago
I think one possibly underused utility of HDR is to have more saturated bright colors in various contexts. I would love a more saturated light blue color for text that is normally available in sRGB, just because #0000ff is too dark and I would like to just crank up its brightness instead of mixing in green and red. Think syntax highlighting or terminal colors.
- LeifCarrotson 3y ago
  Mixing in green and red is equivalent to brightening #0000FF with added white. Try #1AFFFF, for example, it's a magnificently bright light blue. You've not muddied it with brown as you would have by adding an equal amount of green paint and a tenth of red paint; RGB illumination color spaces don't work that way.
  - planede 3y ago
    It still makes it less saturated though and makes it pale blue instead of what it could have been by just really cranking up the light intensity behind that blue subpixel.
- zokier 3y ago
  > I think one possibly underused utility of HDR is to have more saturated bright colors in various contexts. Isn't that the sole purpose of HDR!?
  - planede 3y ago
    No, I don't think so, as the article demonstrates too. A brighter than #ffffff white is not in any way a saturated color. You might be thinking of high gamut displays?
  - yonatan8070 3y ago
    I think planede is thinking about expanding the "various contexts" from just videos to general computer color
  - Savely 3y ago
danbruc 3y ago
Is seven times brighter in terms of light output or perceived brightness?
Xeago 3y ago
Viewing this page (with the HDR element) resets my cursor to the bottom left. Also triggers this behavior when changing brightness whilst the HDR element is visible on screen. Anyone have a similar experience? On MacBook Air (M1, 2020).
msoad 3y ago
Instagram abuses HDR vide for some of the icons in Reels if you pay attention.
bruhsfx2 3y ago
Safari also apply “HDR” to CSS filter: brightness() with value greater than 1. Instead of the over-exposure effect, this portion of the screen will be brighter. You must have an HDR or EDR-capable screen and there must be an HDR video playing to activate the HDR context (can be <video> playing somewhere in a webpage). Lunar app's website used this trick! Check it out. https://lunar.fyi/#xdr https://lunar.fyi/#xdr
sumitgt 3y ago
Given the popularity of QR codes now, I wonder if it makes sense for it to just be supported directly in HTML as a type of element. <qrcode>Some content!</qrcode> With necessary browser/device level support to automatically do this HDR thing.
- rob74 3y ago
  ...while other devices could simply crank up the brightness of the whole display. I personally wouldn't mind, as long as the QR code is then readable (or rather, scannable) outside in the sunshine. I have a public transport app that does this when you show your ticket to be scanned.

308 points by fdb 3y ago

erur 3y ago

Absolutely love reading about such practical little hacks. Really brings back the old excitement that got me into computer science. Also given how prevalent the issue of QR code brightness is for many use cases this could actually prove useful.

erur 3y ago
Sorry for self replying but I just had a look at the repo and it's definitely worth fully automating this. A js/python snippet converting pngs to superwhite video frames should be fairly easy to implement.
- mlyle 3y ago
  > A js/python snippet converting pngs to superwhite video frames should be fairly easy to implement. ??? It's just an all-white video, with an overlay of black QR code applied by CSS. It's already "fully automated." Both (the video and the overlay) are small enough to be base64'd right into the HTML.
  - ihuman 3y ago
    I'm not sure why you're being downvoted when that's exactly what's happening. The QR code comes from the mask-image in the inline-style, not the video.
  - aardvark179 3y ago
    You also only really need the video to push the browser to do things in HDR. You can’t express a CSS colour way outside the normal range, but blending calculations are not clamped so can be used to get the colour. https://github.com/kiding/wanna-see-a-whiter-white https://github.com/kiding/wanna-see-a-whiter-white was posted here a while ago and demonstrated the technique.
  - dolmen 3y ago
    The 1.19 KB video file itself has been created "manually" using a video editor. See https://github.com/dtinth/superwhite#creating-the-video https://github.com/dtinth/superwhite#creating-the-video We can expect it is possible to create a much more compact video file with the same features.
    - mlyle 3y ago
      Sure, I totally agree with that. Though not too much smaller: there's >500 bytes of required headers in an MP4 file encapsulating video. In any case, that's not what the person I was replying to was talking about.

lbayes 3y ago

Both seem to work fine when I point my (aging) Pixel 5 at them rendered on my Asus laptop screen. I'm assuming there's some problem with screen-rendered QR codes that this solves, but my quick google search mostly just resulted in listicle spam. What's the problem this solves?

paranoidrobot 3y ago
Probably people who have their screen brightness set to lower levels (automatic or not). I notice some airline apps and Google Wallet set screen brightness to maximum when you view a boarding pass.
- lbayes 3y ago
  Interesting. When I look at the two codes side-by-side with normal (full) brightness, the HDR one looks quite a bit brighter. If I dim my screen brightness substantially, the HDR one also gets a lot dimmer. Not sure if this solves that problem, though it could be an issue with my particular screen?
  - motoxpro 3y ago
    For me even at the lowest brightness on macbook it is still way brighter than the normal one. Looks about like "normal" white.
  - ryanschneider 3y ago
    On my iPhone 11 at my standard brightness (around 25%) the HDR one is much brighter but if I turn my brightness to max then they both look the same. If I dim my brightness completely the HDR does get dimmer but is still quite visible while the other is quite hard to see.
  - mikepurvis 3y ago
    The same on an iPhone 8.
- MBCook 3y ago
  I’ve seen apps do that too. I may make a difference with laser scanners or other more commodity hardware than smartphone cameras which are pretty amazingly good these days.

stavros 3y ago

I will never understand HDR. A friend has tried to explain it many times to me, but I always fail to get it. A display just has so much dynamic range (from full light off to full light on). HDR can't give you more range, so what does it actually do? The only thing I've seen it do is override my brightness setting to make my screen go to full brightness when I've set it lower.

LeoPanthera 3y ago
HDR increases the granularity of available brightness levels, from 0-255 to some higher level. (1023, usually.) It then defines the "old" 100% level to be some value less than the new maximum. It is usually combined with new display technologies that can emit unusually high brightness levels. On a traditional display there is obviously no point.
- stavros 3y ago
  Ah, this kind of makes sense, but then why wouldn't they map the old 100% to the new maximum? I can understand the increased granularity, if you're making monitors that go much brighter, then you get more light levels, but why define the old maximum to be less than the new maximum?
  - krackers 3y ago
    So there is always headroom to show HDR content.
    - stavros 3y ago
      So the innovation of HDR is that it always makes my screen dimmer so it can sometimes drive it to full brightness and say "look, magic"?
      - krackers 3y ago
        Yes that's essentially how I understand it: hardware-wise HDR is basically "a really bright screen" coupled with good black levels. To ensure that you always get the HDR effect at any brightness, you need to reserve some headroom. It should be noted that you probably could not sustain this peak brightness for long anyhow due to thermal issues. You might be interested in reading https://prolost.com/blog/edr https://prolost.com/blog/edr which explains in more detail.

scastiel 3y ago

Wow that’s impressive… and dangerous I guess? I can’t see how this won’t become an antipattern, especially to display ads on websites…

hamasho 3y ago
This comment makes me wonder why ad companies haven't already used this to show ads. They are notorious for using any technology to grab users' attentions.
- nomel 3y ago
  I sincerely believe we are witnessing the birth of bright ads, and some eventual “block third party HDR” browser option.
  - planede 3y ago
    The "brightness war" hence begins, not unlike the "loudness war" pushing the dynamic range of an other medium.
fodkodrasz 3y ago
It is already an antipattern, it hurt my eye as it was too bright. Once again webdevs creating another UX nightmare.
- 3nt3 3y ago
  it's useful for QR codes though so they can actually be scanned somewhat reliably from a phone screen
  - birdyrooster 3y ago
    Seems like a solution in search of a problem
  - lopis 3y ago
    Lots of apps already do that when you open a QR code. What I don't need is the browser to break expectations and make random images super bright...

cgijoe 3y ago

See also: https://kidi.ng/wanna-see-a-whiter-white/ https://kidi.ng/wanna-see-a-whiter-white/

dmitrygr 3y ago

I CANNOT wait for HDR-bright ads on random websites /s

coltonweaver 3y ago

Firefox users: This won't render in HDR in FF. Open it in Safari if you want to see it.

jagged-chisel 3y ago
On iOS it works in FF.
- rhplus 3y ago
  That’s probably because it’s still WebKit on iOS.
jillesvangurp 3y ago
Interesting. Safari also adjusts the hdr over a few seconds so when you alt tab to it, the qr code becomes a lot brighter. Also firefox looks really bland right next to it. Chrome also seems to support hdr. It's just Firefox that doesn't support this yet. There's an open issue for this: https://bugzilla.mozilla.org/show_bug.cgi?id=1793091 https://bugzilla.mozilla.org/show_bug.cgi?id=1793091 More interesting is whether CSS will be fixed to support this. There seems to be some recent work on this: https://w3c.github.io/ColorWeb-CG/ https://w3c.github.io/ColorWeb-CG/ So, this hack might long term not be needed if this gets addressed properly.
- jillesvangurp 3y ago
  Also just found a good reason to not use this hack with Chrome, maxes out the CPU. I left this in the background for an hour or so and I noticed my laptop getting warm. Checked with htop and Chrome was guilty. Closed it and it went back to normal. The only open tab: this thing.

BonoboIO 3y ago

Neat trick. I m still thinking about a use case for me personally. Works on my iPad Pro 2020 iOS14

thadk 3y ago

Asked it before and ask it again: how far are we from NYT or WSJ using this for d3 infoviz features?

temporallobe 3y ago

I am on an iPhone 13 and to my surprise I actually saw the HDR QR code displaying way more brightly than the rest of the page, and sure enough when I turned my power saving mode on, it went back to looking like the other non-HDR QR code. Impressive! It will be interesting to see if CSS ever gets full support for it.

bhaney 3y ago

I'm sitting in front of both a 2012 Macbook Pro (no HDR) and a 2020 M1 Macbook Air (HDR), and I'm expectedly seeing the difference in brightness between the QR codes on the newish Air, while they look the same on the old Pro. But what's interesting is that both of the QR codes on the old Pro look just as bright as the big bright HDR QR code on the new Air. Basically, the only observable difference I'm noticing between the two laptops is that the non-HDR QR code looks dimmer on the HDR-supporting machine. I'm sure this is some kind of optical illusion, but it's certainly not doing much to make me value the existence of HDR.

JonathonW 3y ago
What you're seeing here is Apple's EDR implementation [1], which, on non-local dimming displays (every Mac display except the M1/M2 14" and 16" MacBook Pros and the Pro Display XDR), works by bumping up the whole display brightness (and adjusting brightness of all non-HDR content downwards) to display colors brighter than standard SRGB white. So, yeah, both QR codes probably are brighter on your old Pro, if its display brightness is set higher. And, if you adjust display brightness on the Air, you'll see them converge to the same brightness there, too (on my M2 Air, it seems that Apple leaves a little headroom for the HDR "white" to appear a bit brighter than UI white at full brightness; not sure if the M1 Air behaves the same or not as it has an older display). Displays with local dimming (and OLEDs) can display, in small areas, colors that are brighter than the maximum full-screen brightness. That's where HDR content gets really compelling-- if all you can do is dim the whole screen, you're unlikely to see much of anything that you couldn't do just by bumping up the brightness with SDR content. [1] https://prolost.com/blog/edr https://prolost.com/blog/edr
- bhaney 3y ago
  Very interesting. Thanks for the explanation!
- nwienert 3y ago
  Does this mean some type of monkey patch could force the M2 screen to display a bit brighter? Because that’s my biggest gripe with it, I wish the screen would get to at least double the current max brightness.

qbane 3y ago

It's when I realize that you cannot simply have the screen (of Apple devices at least) display "white" by demanding a color "white".

freetime2 3y ago
I wouldn’t want all whites to be displayed that brightly on my monitor, because of battery drain and eye fatigue. So I’m fine with reserving HDR for certain applications like video, and using “normal” levels for everything else. Maybe there should be some CSS extensions for using HDR directly on web pages, though, if the developer really wants to.
- qbane 3y ago
  I mean that a designer may think, hey just give me the brightest white, but the most obvious way to do so is not “correct”. But is it impossible? No. It is just insane.

StrangeATractor 3y ago

How do you even represent HDR colors? I've tried Googling this and I can never really find an answer. Is it basically just eight hex digits instead of six?

HippoBaro 3y ago
In SDR content, colors are encoded with 8-bits ranges. So, 24bits for the three color channels. With HDR, we usually use 10 bits instead (this is where the "10" comes from in "HDR10"). See https://en.wikipedia.org/wiki/Color_depth#Deep_color_(30-bit) https://en.wikipedia.org/wiki/Color_depth#Deep_color_(30-bit....
ylere 3y ago
HDR is less about the colors and more about achieving a wider range of brightness levels (hence increasing the total dynamic range). It's typically encoded using 10 or 12-bit color depth, and metadata is added to the media on how to map the colors' luminance/brightness values (e.g., what darkest and brightest values of a image/video should be). This is then used to transform HDR content into appropriate color and luminance values for your specific monitor (e.g., the reference monitor used for grading might have a peak brightness of 1000 nits, but yours might be different, or have a different luminance-response curve or support a different color space).
abhibeckert 3y ago
Both QR codes are using #ffffff. The "bright" one has metadata that tells the operating system to render white at the maximum possible brightness, instead of whatever brightness it would normally render white at. It's broadly supported on Apple devices, though how well it works depends on the hardware you have.
- tuukkah 3y ago
  You're correct in part, as both image sources (the picture and the video) have maxed out pixel data. If it's HDR10, it does not have 24 but 30 bits of color though, so it maxes out at #3fffffff.
3y ago

deleted 3y ago

[deleted]

dagmx 3y ago

Author says that it can’t be represented with css, but I think HDR is supported in Safari within Display P3 I believe, you can give a value higher than 1.0? https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/ https://webkit.org/blog/10042/wide-gamut-color-in-css-with-d... I might be wrong however.

Kovah 3y ago
I was curious and tested this in Safari, but `color(display-p3 1.5 1.5 1.5)` displays the same white as `color(display-p3 1 1 1)` does.
phh 3y ago
"HDR" contains multiple components: - Electro-Optical Transfer Function. That's the famous "gamma" of the display which is no longer a gamma - color space (which real-life color does RGB = 100%, 0%, 0% match) - Absolute brightness. There are metadata in the video files that say that RGB=100%, 100%, 100% mean 2000cd/m2 (and gives the average frame brightness like 10%, which helps scales for displays not capable of 2000cd/m2 everywhere) - Increased bit depth Display-P3 is only the color space (and maybe the EOTF). This video uses the "absolute brightness" feature of HDR to increase brightness.

schappim 3y ago

Does not seem to work on Pro XDR in Safari or Chrome (I guess it hasn't to really be internal display).

marricks 3y ago

I love how, if you do view it accurately, it just makes every other white look washed out and grey in comparison. Our visual system is just one big comparison machine.

mavhc 3y ago
Outside sunlight is 1000x brighter than inside light
- 8n4vidtmkvmk 3y ago
  I'm reminded of this every summer when I go indoors or outdoors.
- pavlov 3y ago
  Next time you see a scene in a movie where people enter a house and you can see both the interior and exterior, think about the 1000x ratio and how much artificial light was needed inside the house to balance the lighting in the shot. (Assuming it's a real sunlit exterior and not a sound stage, of course.)
  - trishmapow2 3y ago
    Cinema cameras also have >14 stops of dynamic range that can be extracted in post.
    - pavlov 3y ago
      It's been a while since I was on a set, but most DPs seemed to adhere to the principle: "When in doubt, add bigger lights."
      - kuschku 3y ago
        In the modern digital era, that has actually changed quite a bit. Now cameras are really sensitive – the equivalent of what used to be 2500 to 4000 ISO is now really common – so instead of adding light, often you have to flag off light in areas you want dark. So instead of many bright lights you just have duvetyne and flags everywhere, which many DoPs have complained is harder to work with.

hilbert42 3y ago

Android here. Vivaldi shows the large one as a white video without detail, all other browsers show both QR codes the same.

blensor 3y ago

Does that only work with white or with other colors in general? I would not have thought that QR codes could become a hot topic in 2023 but combining that with the new Stable Diffusion Controlnet generated QR codes [1] could actually be pretty interesting [1] https://www.linkedin.com/posts/gschwandtner-michael_qr-stablediffusion-aiart-activity-7075411631110766592-tj-a https://www.linkedin.com/posts/gschwandtner-michael_qr-stabl...

thih9 3y ago

As with all hacks, the risk of breaking other features, especially accessibility, increases. I’ve noticed that you cannot long press the brighter code to read it. This works on the regular code next to it (tested in safari mobile).

lucideer 3y ago
They've made the odd choice of placing the QR code as a mask on the video via CSS, rather than positioning a black & transparent image over the video (which would allow long press). Not sure why they've done this, perhaps something about the HDR approach requires both the black and white to be a part of the same video render. Also - I'm not sure if it's a browser default or some other website CSS but imo there's no real reason long press shouldn't work on a video anyway... videos need accessibility too.
- dtinth 3y ago
  article author here. odd choice indeed, I wasn’t thinking clearly when I experimented and wrote the article. putting a black and transparent image atop the video sounds like a much better idea — i will try it and see if it works. thanks for the suggestion!
  - lucideer 3y ago
    > I wasn’t thinking clearly when I experimented and wrote the article Not thinking clearly! I can barely write anything when I am thinking clearly. Great work on the technique, it's ingenious.
schaefer 3y ago
Accessibility? on QR Codes? They are read by computers, not people!

Jaxan 3y ago

This is pretty neat. I tried the "Digital Colour Meter" app on MacOS, but both whites shows exactly the same values and it is also impossible to take a screenshot of. So I wonder how this works in the OS.

creativenolo 3y ago

Neat trick. For one device I had to reduce contrast on the QR codes to yield an increase in detection. I assumed too much contrast was less desirable for the optics.

perryizgr8 3y ago

Why does this work only on Apple devices. My android phone has a super bright screen (~1000 nits for HDR content). It supports HDR photos and videos as far as I can tell. But both QR codes appear to be the same brightness.

Rincon15 3y ago
[dead]

gruturo 3y ago

Doesn't seem to work (which I see as a positive) for me on an iPhone 13 Pro Max, using native Safari, low power mode is off as indicated. I guess I have another reason to thank Lockdown mode?

xmdx 3y ago

Cool, only ever seen HDR on a large screen and the brightness is not as striking as this.

bawolff 3y ago

I wonder why you couldn't just add a colour profile to a png file to shift the colours to this super white colour. For that matter i thought avif supported HDR images.

londons_explore 3y ago
I think specifically mobile safari refuses to pass through the HDR properties in most cases. I think Apple is trying to keep HDR for native apps only, like many other platform exclusive features like faceid, fingerprint reading, etc - which are all unavailable to webapps. Video is probably an exception.
zokier 3y ago
Short answer: nobody has implemented it yet. See https://w3c.github.io/ColorWeb-CG/#png https://w3c.github.io/ColorWeb-CG/#png and the linked ML thread for some details.

londons_explore 3y ago

What a mess that the only way to display a bright white colour from a web page is to use a single frame video!!

vardump 3y ago

Oh my god that hurts my eyes! That was really bright. MBP M2 16".

kinduff 3y ago
Same device here, very very bright. Made the rest of the whites look like washed out greys.

planede 3y ago

I think one possibly underused utility of HDR is to have more saturated bright colors in various contexts. I would love a more saturated light blue color for text that is normally available in sRGB, just because #0000ff is too dark and I would like to just crank up its brightness instead of mixing in green and red. Think syntax highlighting or terminal colors.

LeifCarrotson 3y ago
Mixing in green and red is equivalent to brightening #0000FF with added white. Try #1AFFFF, for example, it's a magnificently bright light blue. You've not muddied it with brown as you would have by adding an equal amount of green paint and a tenth of red paint; RGB illumination color spaces don't work that way.
- planede 3y ago
  It still makes it less saturated though and makes it pale blue instead of what it could have been by just really cranking up the light intensity behind that blue subpixel.
zokier 3y ago
> I think one possibly underused utility of HDR is to have more saturated bright colors in various contexts. Isn't that the sole purpose of HDR!?
- planede 3y ago
  No, I don't think so, as the article demonstrates too. A brighter than #ffffff white is not in any way a saturated color. You might be thinking of high gamut displays?
- yonatan8070 3y ago
  I think planede is thinking about expanding the "various contexts" from just videos to general computer color
- Savely 3y ago

danbruc 3y ago

Is seven times brighter in terms of light output or perceived brightness?

Xeago 3y ago

Viewing this page (with the HDR element) resets my cursor to the bottom left. Also triggers this behavior when changing brightness whilst the HDR element is visible on screen. Anyone have a similar experience? On MacBook Air (M1, 2020).

msoad 3y ago

Instagram abuses HDR vide for some of the icons in Reels if you pay attention.

bruhsfx2 3y ago

Safari also apply “HDR” to CSS filter: brightness() with value greater than 1. Instead of the over-exposure effect, this portion of the screen will be brighter. You must have an HDR or EDR-capable screen and there must be an HDR video playing to activate the HDR context (can be <video> playing somewhere in a webpage). Lunar app's website used this trick! Check it out. https://lunar.fyi/#xdr https://lunar.fyi/#xdr

sumitgt 3y ago

Given the popularity of QR codes now, I wonder if it makes sense for it to just be supported directly in HTML as a type of element. <qrcode>Some content!</qrcode> With necessary browser/device level support to automatically do this HDR thing.

rob74 3y ago
...while other devices could simply crank up the brightness of the whole display. I personally wouldn't mind, as long as the QR code is then readable (or rather, scannable) outside in the sunshine. I have a public transport app that does this when you show your ticket to be scanned.