Gradient banding

[eigenbom]

Hi all,

I'm attempting to draw a screen sized rectangle with a gradient that travels vertically. However, some banding is occurring, as seen below. Has anyone encountered this issue or knows how to deal with it. (I also seem to recall it happening when I did it in pure glsl.)

I've got a feeling its the OpenGL settings, but its not clear if I can change these for the core SFML drawing routines..

Code: [Select]


sf::VertexArray skyShape(sf::Quads, 4);
skyShape[0].Position = sf::Vector2f(0, h);
skyShape[0].Color = horizonColour;
skyShape[1].Position = sf::Vector2f(w, h);
skyShape[1].Color = horizonColour;
skyShape[2].Position = sf::Vector2f(w, 0);
skyShape[2].Color = zenithColour;
skyShape[3].Position = sf::Vector2f(0, 0);
skyShape[3].Color = zenithColour;
target->Draw(skyShape);


[dydya-stepa]

i see this with a shader - i'd like to know the answer by myself.

http://www.sfml-dev.org/forum/viewtopic.php?t=6628

It's time for SFML gurus maybe to unite and give us the answer ?

[Laurent]

However, some banding is occurring

I checked your screenshot with an image editor, and each new line of pixels has an increased level of grey, as expected. There's no problem at all.

[Mario]

Looks perfectly fine for me, too. Are you sure your desktop or your program aren't running in 16 bit colors for whatever reason?

[model76]

My screen does this. Maybe it's the same for you?

[dydya-stepa]

has anyone checked my shader? try not pure colors - say 0.0, 0.5, 1.0 and 0.5, 1.0, 0.0

[eigenbom]

Haha, whoops. I should of checked the image values more closely I guess.
My desktop is 32bit, though I do have it at low contrast and brightness.

The GIMP gradient looks much smoother, so for comparison I did a gradient fill with GIMP (right) and then ramped up the contrast. The GIMP gradient has a bit of noise, so I might have to write a shader that does something similar.



Anyway, thanks for the replies!

[eigenbom]

Ha, GIMP dithers the gradient by default. Disabling it reveals the same banding as the other one. :|

[eigenbom]

For those interested, I've solved my banding issue by adding some random dithering. The picture shows the extreme case of black to white. In my game I'm using much more subtler gradients; however the banding was still visible, but now looks good.



The method was trivial:
1. Make a 2048x2048 sf::Image and fill with random noise
2. In the gradient shader, use the random texture to perturb the y value of the lookup coord


setup ..

Code: [Select]


sf::Image randomImage;
randomImage.Create(2048,2048);
for(int x=0;x<2048;x++){
  for(int y=0;y<2048;y++){
      randomImage.SetPixel(x,y,sf::Color(random(255),random(255),random(255)));
  }
}
mRandomnessTexture = make_shared<sf::Texture>();
mRandomnessTexture->LoadFromImage(randomImage);
mRandomnessTexture->SetRepeated(false); // clamp to border pixels

// load mSkyGradientShader


rendering ..

Code: [Select]


if (mAllowShaders){
// Shader version
mSkyGradientShader->SetParameter("windowSize",TARGET_WIDTH,TARGET_HEIGHT);
mSkyGradientShader->SetParameter("horizonColour",horizonColour);
mSkyGradientShader->SetParameter("zenithColour",zenithColour);
mSkyGradientShader->SetParameter("randomTexture",*mRandomnessTexture);

const sf::RectangleShape bigRect(sf::Vector2f(TARGET_WIDTH,TARGET_HEIGHT));
target->Draw(bigRect,sf::RenderStates(mSkyGradientShader.get()));
}


shader ..

Code: [Select]


#version 120
uniform vec2 windowSize;
uniform vec4 horizonColour; // nB: colours must be vec4's for sfml's api
uniform vec4 zenithColour;
uniform sampler2D randomTexture;

void main(void)
{
const float MAX_PIXEL_MIX = 4; // how many pixels away can we mix
vec2 normalisedFragCoord = gl_FragCoord.xy/windowSize;
float inverseHeight = 1.0/windowSize.y;
// perturb the coordinate in y direction by a random amount
float randomValue = texture2D(randomTexture, normalisedFragCoord).r;
float perturbedFragCoordY = normalisedFragCoord.y + randomValue*inverseHeight*MAX_PIXEL_MIX;
gl_FragColor = mix(horizonColour,zenithColour,perturbedFragCoordY);
}


Also, I'd like to say that you've seemed to make some nice choices in the graphics API laurent, it's really growing on me.

[eigenbom]

And here's the dithered sky in action...

[model76]

Wow, neat trick - works really well!