Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Dithering in Colour

obrhubr.org

Post reply on HN
Print view View original

31–40 of 68 posts

Re: Dithering in Colour

#31

Post by Aardwolf »

AndrewStephens wrote: post #20

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-...

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

Re: Dithering in Colour

#32

Post by AndrewStephens »

hooli_gan wrote: post #22
AndrewStephens wrote: post #20

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-...

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

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.

Re: Dithering in Colour

#33

Post by AndrewStephens »

Aardwolf wrote: post #31
AndrewStephens wrote: post #20

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-...

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 visib…

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.

Re: Dithering in Colour

#34

Post by 01HNNWZ0MV43FF »

Aardwolf wrote: post #31
AndrewStephens wrote: post #20

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-...

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 visib…

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)

Re: Dithering in Colour

#35

Post by obrhubr »

crazygringo wrote: post #24

Did the author forget to finish the blog post? They show a single example of incorrect dithering, explain it's wrong, and then don't show a corrected version. There isn't a single example of proper color dithering. And they talk about the distance to the nearest color (RGB) but don't explain how to account for black or white -- how to trade off between accuracy of hue, brightness, and saturation, for example. This po…

You’re right it kind of isn’t finished… I had it done, then had an exchange with the author of didder and I’m still in the process of rewriting :)

Re: Dithering in Colour

#36

Post by obrhubr »

mattdesl wrote: post #9

It might be worth using a lightness estimate like OKLab, OKLrab[1], or CIE Lab instead of the RGB luminance weighting, as it should produce a more perceptually accurate result. The other issue with your code right now, is that it is using euclidean distance in RGB space to choose the nearest color, but it would be probably also more accurate to use a perceptual color difference metric, a very simple choice is euclide…

I am weighting each of the channels according to the formula in my post.

I’ll try OKLab and compare, thanks for the comment :)

Re: Dithering in Colour

#37

Post by obrhubr »

mkesper wrote: post #7
obrhubr wrote: post #3

Earlier quoted context omitted.

Thanks for your comment! I'm glad you're seeing the same thing :) I re-implemented the linearised dithering in python and got similar results. I checked and rechecked the colour profiles in GIMP, nothing... At this point I can only hope for an expert to appear and tell me what exactly I am doing wrong.

Did you try any of the OKlab color space implementations for calculating? https://bottosson.github.io/posts/oklab/

I’ll try them as soon as I get the chance, I have perceptual luminance implemented already. I’ll compare :)

Re: Dithering in Colour

#38

Post by [deleted] »

AndrewStephens wrote: post #20

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-...

[deleted]

Re: Dithering in Colour

#39

Post by Const-me »

Clamchop wrote: post #2

They may not want to imply that didder's linearized rabbit is wrong, but I'm comfortable saying so. It's not just a little dark, it's way dark, to the point of hiding detail. The linearized RGB palette is similarly awful. It clobbers a whole swath of colors, rendering them as nearly black. Purples are particularly brutalized. Yellows disappeared and became white. On my phone, the middle palette doesn't appear too bri…

Yeah, every time I see articles about importance of linear color space for gradients, and see images there, I observe the opposite of what’s written in the text of these articles. Gradients in sRGB color space look better.

I have a suspicion that might be because I usually buy designer-targeted wide gamut IPS displays. I also set up low brightness on them, e.g. right now I’m looking at BenQ PD2700U display with brightness 10/100 and contrast 50/100. However, sRGB color space was developed decades ago for CRT displays.

Re: Dithering in Colour

#40

Post by mattdesl »

rikroots wrote: post #30
mattdesl wrote: post #9

It might be worth using a lightness estimate like OKLab, OKLrab[1], or CIE Lab instead of the RGB luminance weighting, as it should produce a more perceptually accurate result. The other issue with your code right now, is that it is using euclidean distance in RGB space to choose the nearest color, but it would be probably also more accurate to use a perceptual color difference metric, a very simple choice is euclide…

I moved my canvas library's reduce-palette filter over to OKLAB calculations a while back. The calculations are more computationally intensive, but worth the effort. https://scrawl-v8.rikweb.org.uk/demo/filters-027.html

I quite like the look of the blue noise dithering on this. Are you using just a texture as a mask, or something else?
Post reply on HN