627771 - Add dithering to gradient color transitions to address banding in 24-bit "truecolor"

Status: NEW

(Core :: Graphics, enhancement)

Description

[Brian Hauer]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.10) Gecko/20100914 Firefox/3.6.10

This is wishful thinking, but please consider adding a dithering algorithm to the gradient rendering (for example, as used by -moz-linear-gradient).  The limited colors available in 24-bit "truecolor" cause visible banding regardless of the presence of alpha.

In Firefox, the banding is especially perceivable with vertical gradients.  This is because web content so often scrolls vertically.  The color transitions are made more recognizable when scrolling/moving the content.

Bug 619834 cites banding when alpha is used, but the banding exists in both cases.  Banding is perhaps more severe with alpha or affected by an unrelated bug, but that's not the matter at hand here.

The test case I am attaching shows vertical gradients and the subtle but nevertheless quite recognizable color transitions.  These are visible on Windows 7; I have not tested any other platform.  I don't know anything about the internals of Gecko's gradient rendering, but if a dithering algorithm were somehow introduced, this minor issue could be eliminated.

As an aside, weren't 30-bit or 32-bit color depths introduced in the 1990s?  It's a pity we're still stuck with 24-bit.

Reproducible: Always

Steps to Reproduce:
See test case.
Actual Results:  
On Windows 7, visible color transitions are seen.

Expected Results:  
With 32-bit color, the transitions would be imperceptible.  In 24-bit color, a dithering algorithm could help achieve the same result.

Comment 1

[Brian Hauer]

Attachment: An example with vertical gradients using both non-alpha and alpha colors

Comment 2

[samlee]

Perhaps, a new css attribute which specify how much dithering to use.

background: -moz-linear-gradient(left, #E7E7E2, #CDCDCD, dither: 20%);

Comment 3

[The 8472]

I just noticed this on youtube's background, which uses a #555 to #333 greyscale gradient. That only yields 34 possible color stops over several 100 pixels in height, i.e. it's noticeable. Dithering certainly would help here.

Comment 5

[Ben Kelly [:bkelly, not reviewing]]

It looks like this could be beneficial for b2g memory usage.  See bug 1001455.  Is there any way to get it on the roadmap?

Comment 6

[The 8472]

The author of madVR recently evaluated/implemented several dithering algorithms for dithering 16bit video in realtime (via GPU shaders) to 8bit.

A modified form of ordered dithering called void-and-cluster was found to be trivial to parallelize (unlike various error diffusion algorithms), leaving no visible patterns (unlike ordered dithering) and without introducing too much visual noise (unlike random threshold dithering).

Comment 7

[Milan Sreckovic [:milan] (needinfo for best results)]

This sounds like the right thing to do - can we get "product" to ask for this and explain the benefits?  I see them, but I'm not sure I'm representative of the overall Firefox audience :)  Maybe somebody from UX?

Comment 9

[Doug Thayer [:dthayer] (he/him) (PTO until Sept 1st)]

This should be resolved once webrender is enabled, per https://github.com/servo/webrender/pull/966

Comment 10

[Hansol Kim (zvuc)]

What's the progress on this issue now? I can see the PR was merged last year, but I still see some banding in gradients when comparing with Safari, where gradients are flawlessly smooth. Not sure if the current rendering is the result after an improvement, or do we have more ways to go?

Comment 11

[Doug Thayer [:dthayer] (he/him) (PTO until Sept 1st)]

(In reply to Hansol Kim (zvuc) from comment #10)
> What's the progress on this issue now? I can see the PR was merged last
> year, but I still see some banding in gradients when comparing with Safari,
> where gradients are flawlessly smooth. Not sure if the current rendering is
> the result after an improvement, or do we have more ways to go?

It's dependent on WebRender being enabled in Firefox, which is currently still in development. If you're on Nightly, you can enable WebRender by going to about:config and setting gfx.webrender.all to true.

Comment 12

[cengels]

Is this still being worked on? I've turned on gfx.webrender.all on the latest Nightly version and light gradients all seem fine, but there is still very noticeable banding on dark gradients. Chrome does not have this issue.

Minimal example:

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: radial-gradient(circle, #1D1B43, #12102C);
}

Comment 13

[Doug Thayer [:dthayer] (he/him) (PTO until Sept 1st)]

(In reply to cengels from comment #12)

Is this still being worked on? I've turned on gfx.webrender.all on the latest Nightly version and light gradients all seem fine, but there is still very noticeable banding on dark gradients. Chrome does not have this issue.

It was recently disabled in webrender due to test failures when we started using direct composition[1]. We have some workarounds we were just recently batting around, though. I can't guarantee I can work on this in the near future but if I get any spare time I will.

[1]: In case anyone needs the technical details: as I understand it, when we do direct composition, we get handed an offset into a texture atlas - however, we apply our dithering texture based on gl_FragCoord, which means the exact dithering offset is non-deterministic, and thus when comparing with a reference, the two things mismatch on that offset, producing a delta which exceeds our fuzziness limit. The fix ought to be simply supplying and using the compositor-provided offset into the texture atlas in our shaders. Glenn can correct me on this if I got it wrong.