Hacker News Reader

Comment by AndrewStephens | Hacker News Reader

Dithering is something of a lost art now that our displays can handle millions of colors in high definition, but it can be a striking artistic effect.

If anyone thinks their websites are too colorful, I made a pure JavaScript web component to dither images on client in real time, taking into account the real pixel size of the current display.

https://sheep.horse/2023/1/improved_web_component_for_pixel-...

View on HN

I think dithering should still be considered, since a super high detailed game otherwise pretty engine that then has banding in the sky is pretty ugly. 32-bit RGBA can still have visible banding which dithering can fix. 256 brightness levels per channel isn't all that much when it comes to subtle variations in sky colors, the eye is more sensitive than that

12-bit per channel color might be enough to never have visible banding. Or dithering

You are right, of course. Imperceptible dithering is still technically used all the time. But the harsh dithered look of yesteryear, where images were crunched down to 1-bit or maybe 32 colors if you were lucky is seldom done today.

For anyone who hasn't seen it, "Banding in games" by one of the Playdead (Limbo, Inside) programmers: https://www.loopit.dk/banding_in_games.pdf

Crysis had sky banding... Skyrim has the famous menu smoke mentioned in the PDF. All fixable, probably fixable on the hardware of the day. (I remember messing with dithering on a 2007 DX9 GPU)

With 100+Hz displays it's not that hard to do temporal dithering as well. Your cones are surprisingly low bandwidth (why old color TVs even worked at 30Hz), while your rods provide danger/flicker cues outside the fovea.

Getting an extra 2bits of hue (ab) while maintaining luminance (L) is quite doable except at the chroma and brightness extremes where your eye mostly ignores them anyway. That could be done pretty high in the display stack. I'd also say that the DACs in many displays are capable of higher chroma resolution, but gamma non-linearity eats up a bit dynamic range.

Old TV wasn't 30Hz. 60i isn't the same as 30p.

Some TVs and monitors do temporal dithering for you... Accept 8-bit input, and temporal dither it for the 6-bit display doesn't look that bad. Probably extends well to 10-bit input.

Well, aktuuallly it's 59.94Hz and 29.97Hz, exactly BECAUSE the NTSC color "burst" carrier is only 3.579545MHz (note these are relatively prime 5×7×9/(8×11) MHz) and it has to be an exact multiple of 15734.2637Hz to generate the 30Hz color frames at ~487 lines (excluding vertical blanking lines which take it to 525). Of course those were interlaced to two sets of 262.5 lines.

Now, I'm hoping you're an old school CRT nerd, and if so then you'd also agree that the original color phosphor glow down periods were several ms and the eye's response to changing color is marginal at best. Uncorrelated subpixel scale dithering works just fine at 30Hz.

You're downplaying "Of course those were interlaced to two sets of 262.5 lines". That is what makes interlaced video 59.94 different images per second, and the difference between 30hz updates and 60hz updates is most definitely noticeable.

The eye's response to changing color is slow, but the response to changing luminance is very fast.

You have expertly summarized the first and last lines of my original post about Color NTSC. Interlacing is effectively dithered color super-resolution at low frame rate with blur from fast motion line tearing at the interlace rate.

   Your cones are surprisingly low bandwidth (why old color TVs even worked at 
   30Hz), while your rods provide danger/flicker cues outside the fovea.
   
   Uncorrelated subpixel scale dithering works just fine at 30Hz.

Very cool, but the image in the bottom of the page flickers when scrolling.

Dithering does that !

My code can (optionally, since it is often not useful) dither all the way down to the physical pixels of your display device for that really crisp, old-fashioned look. Most dithering projects on the web don't take this into account so look slightly soft around the edges of the pixels.

The image at the bottom is an example. On some devices this interacts weirdly with the pattern of pixels or even the refresh rate when in motion due to scrolling.

You're likely using a TN screen, which basically does dithering over time.

Reply on news.ycombinator.com