Banding on gentle gradients

[squarewave]

It's easier to see in dim light, but you can make out distinct vertical bands in the lower half of the image. The upper half looks smooth with an 8x8 dither matrix. You could also use a 4x4 or a 3x3 and just get fewer effective shades, but you could avoid requiring a texture.

I don't know if you all have talked about this separately and have decided to not address it, but I have a proof of concept for fixing this that I can submit as a PR. This is currently an issue in Firefox and it's just something that has bugged me for a while so I thought I'd post it.

(https://bugzilla.mozilla.org/show_bug.cgi?id=627771 is tracking the banding issue in Firefox in general).

You could also use blue noise to dither, which has the benefit of no structure that creates visual artifacts, and I wrote a proof of concept for that, but I couldn't create a test case where ordered dithering and blue noise seemed visually different at all.

[kvark]

I see banding on both top and bottom parts of the image you provided.

[squarewave]

Are you on a mac / using a retina-like display? I just tried on a mac and the top image looks much different, likely due to patterns from scaling up the ordered dither pattern. I can post the results of running this on a mac later.

Other than that, there could be very subtle banding from patterns in the ordered dither, so I can post an image with blue noise dithering.

[kvark]

I'm on Thinkpad X1 4th gen with 2560 x 1440 screen on 14", running Linux/X11. The top half looks very similar to the bottom, also banded, albeit it's hard to tell if it's exactly the same.

[leeoniya]

resolution is a bit moot. thinkpads have pretty crappy screens WRT color & contrast gradation. the difference is noticeable on a better display.

[kvark]

@leeoniya I can see the same thing on Dell 27" with 3840x2160. Not to mention that I don't get your point at all. If a screen is crappy, then we should definitely see improvement from dithering, not necessarily the other way around.

[squarewave]

@kvark, if you change layout.css.devPixelsPerPx in about:config to 1, and make sure to click on the image to open it in its own view, do you still see banding on the upper part?

[kvark]

@squarewave after setting devPixelsPerPx I can clearly see the upper half being smooth, banding is visible only at the bottom one.

[leeoniya]

ok, now i'm just confused about the whole issue. yes, i see banding in the bottom. no i dont see banding in the top. but we're looking at screenshot here...of what? what's the point of comparing how everyone's display shows an image?

[squarewave]

If you load the image in an image editor and zoom in very close, you'll see a tiny kind of checkerboard pattern on the top half of the image. This checkerboard pattern compensates for the fact that we're only able to represent 256 shades of gray by tricking your eye. The hypothesis for why kvark was still seeing banding was that scaling up the image by devPixelsPerPx's computed value made it undo some of the work of the checkerboard pattern. The reason why it's relevant is that the checkerboard pattern would be at a physical pixel level in a shader and not at a px level.

[kvark]

@squarewave we'll be happy to look at your PR. Dithering is indeed helping the gradient visuals.