Search code examples
androidopengl-es-2.0shaderfragment-shadervertex-shader

Alpha gradient in OpenGL ES shader is not smooth


I'm attempting to create an alpha radial gradient effect (kind of lighting) using a simple shader. The effect is created correctly, however the gradient is not smooth. The precision is set to highp, so I don't really know where to look.

This shader is currently running on Android, using OpenGL ES 2.0.

This is how the gradient currently looks like:

enter image description here

And this is my current shader:

Vertex:

precision highp float;

attribute vec4 vPosition;
attribute vec2 vStaticInterpolation;

varying vec2 interpolator;

void main() {
    interpolator = vStaticInterpolation;
    gl_Position = vPosition;
}

Fragment:

precision highp float;

uniform float alphaFactor;
varying vec2 interpolator;


float MAX_ALPHA = 0.75;

void main() {

    float x = distance(interpolator, vec2(0.0, 0.0));

    float alpha = MAX_ALPHA - MAX_ALPHA * x;
    alpha = max(alpha, 0.0);



    gl_FragColor = vec4(0.925, 0.921, 0.843, alpha);
    gl_FragColor.a *= alphaFactor;
}

The shader receives constant attributes for interpolation (from -1.0 to 1.0) in vStaticInterpolation. The actual color is currently hard-coded in the shader.


Solution

  • It looks to be related to a dithering problem.

    This could depend on the OpenGL driver implementation of your mobile device (though I don't know which model you are currently using). In the past it used to be an issue.

    Possible tests you could perform are:

    1. Disable Opengl dithering:

      GLES20.glDisable(GLES20.GL_DITHER);

    2. Impose an RGB888 surface when you create the surface. It is usually done in the ConfigChooser function. I try to remember by hard, this is part of the code of my application:

      new AndroidGL.ConfigChooser(8, 8, 8, 8, depth, stencil) :