Why does my openGL shader program for points have banding artifacts?

Question

For each point my OpenGL shader program takes it creates a red ring that smoothly transitions between opaque, and totally transparent. My shader program works, but has banding artifacts.

The fragment shader is below.

#version 110

precision mediump float;

void main() {
 float dist = distance(gl_PointCoord.xy, vec2(0.5, 0.5));

 // Edge value is 0.5, it should be 1.
 // Inner most value is 0 it should stay 0.
 float inner_circle = 2.0 * dist;
 float circle = 1.0 - inner_circle;

 vec4 pixel = vec4(1.0, 0.0, 0.0, inner_circle * circle );

 gl_FragColor = pixel;
}

Here's the less interesting vertex shader that I don't think is the cause of the problem.

#version 110

attribute vec2 aPosition;

uniform float uSize;
uniform vec2 uCamera;

void main() {
 // Square the view and map the top of the screen to 1 and the bottom to -1.

 gl_Position = vec4(aPosition, 0.0, 1.0); 
 gl_Position.x = gl_Position.x * uCamera.y / uCamera.x;

 // Set point size
 gl_PointSize = (uSize + 1.0) * 100.0;
}

Please help my figure out, why does my OpenGL shader program have banding artifacts?

P.S. Incidentally this is for an Android Acer Iconia tablet.

Answer 1

Android's GLSurfaceView uses an RGB565 surface by default. Either enable dithering (glEnable(GL_DITHER)) or install a custom EGLConfigChooser to choose an RGBA or RGBX surface configuration with 8 bits per channel.