4 ms·

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 anyon

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-accurate_atkinson.html https://sheep.horse/2023/1/improved_web_component_for_pixel-...

hooli_gan 2y ago
Very cool, but the image in the bottom of the page flickers when scrolling.
- tuyiown 2y ago
  Dithering does that !
- AndrewStephens 2y ago
  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.
- TJSomething 2y ago
  You're likely using a TN screen, which basically does dithering over time.
Aardwolf 2y ago
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
- AndrewStephens 2y ago
  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.
- 01HNNWZ0MV43FF 2y ago
  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 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)
- kurthr 2y ago
  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.
  - toast0 2y ago
    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.
    - kurthr 2y ago
      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.
deleted 2y ago
[deleted]

hooli_gan 2y ago

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

tuyiown 2y ago
Dithering does that !
AndrewStephens 2y ago
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.
TJSomething 2y ago
You're likely using a TN screen, which basically does dithering over time.

Aardwolf 2y ago

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

AndrewStephens 2y ago
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.
01HNNWZ0MV43FF 2y ago
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 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)
kurthr 2y ago
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.
- toast0 2y ago
  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.
  - kurthr 2y ago
    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.

deleted 2y ago

[deleted]