OpenGL specular shading - Gradient banding issues

Question

I use Phong shading as my lighting model. Nevertheless, the specular shading produces gradients in the light cone:

Hopefully you can see the gradient starting from the lower left corner expanding along the cuboid.

Here is the shader code that produces this specular light:

vec3 viewDir = normalize(-FragPos);
vec3 lightDir = normalize(-light.direction);
vec3 reflectDir = reflect(-lightDir, normal);
float spec = pow(max(dot(viewDir, reflectDir), 0.0), material.shininess);

By the way, I'm doing my lighting calculations in view-space.

Is there any chance to make the lighting smoother?

When you say "gradients", do you mean visible discontinuities in the colour? I'm assuming you don't want flat colour, but a smooth gradient with no bands visible? — trichoplax is on Codidact now, Sep 07 '16 at 20:53

score 9 · Accepted Answer · answered Sep 08 '16 at 05:45

9

This is a common problem with very subtle gradients. The problem is that the image is displayed with 8 bits per component and this is not quite enough precision to make a gradient that is smooth to the eye under these conditions.

However, the underlying calculations being done in the shader are at higher precision (e.g. float = 24 effective bits of mantissa), so you can apply dithering to improve the appearance of the image.

You can do this by adding a slight amount of random noise to the value of each pixel in the shader. The noise can come from a texture, filled with random grayscale values in [0, 1] and mapped 1:1 to screen pixels. In the shader you remap this to the range [−0.5/255, 0.5/255] and add it to the output color.

Here's a Shadertoy demonstrating this. The left side has no dithering; the right side uses the procedure just described. As you can see, the banding vanishes on the right.

Dithering effectively allows you to represent intermediate values between 8-bit integer levels. For instance, an area that the shader computes as 82.3 (out of 255) would normally be uniformly rounded down to 82, but with dithering it will come out as a random mix with 70% of the pixels set to 82, and 30% set to 83. The eye averages over this very slight, high-frequency noise and it becomes practically invisible.

answered Sep 08 '16 at 05:45

Nathan Reed

24,302
2
63
103

Nice trick. I noticed you're adding .5 to pixel coordinates in the Shadertoy, is this to hit pixel centres in the texture rather than lerped samples? – russ Sep 08 '16 at 06:23
2

@russ Hmm, I actually copy-pasted that bit from another Shadertoy. :D On a second look, I think that .5 is actually not needed; `fragCoord` should be on pixel centers already. – Nathan Reed Sep 08 '16 at 06:28
3

For anyone interested, [here](http://www.anisopteragames.com/how-to-fix-color-banding-with-dithering/) is also a well described article how to implement dithering to avoid color banding. Happy coding! – enne87 Sep 09 '16 at 14:38
you can try to perform actual statistics error distribution instead of just add noise uniformly, for an even better result. http://www.tannerhelland.com/4660/dithering-eleven-algorithms-source-code/ – v.oddou Apr 25 '18 at 07:38
@v.oddou Maybe. Error diffusion would require an extra fullscreen pass, I think, versus adding noise which can be done inline in a shader. – Nathan Reed Apr 25 '18 at 15:55

OpenGL specular shading - Gradient banding issues

1 Answers1

Linked