Transparency dotted OpenGL ES 2.0

Question

I'm currently developing a game for Android using OpenGL ES 2.0. I have almost everything working with textures and vertex colors but when i use transparency in textures, the transparent parts get dotted. Here is a screenshot of it: Dotted transparency

The boll (blue circle) shown currently has 3 layers of planes on top of him, the eyes, mouth and teeth. All layers have the same dimensions and transparency and it seems like the dotting gets worse the more layers I add. This is the onCreate method of the renderer:

    mMVPMatrix = new float [16];
    mViewMatrix = new float [16];
    mProjectionMatrix = new float [16];
    mModelMatrix = new float [16];

    Matrix.setLookAtM(mViewMatrix, 0, 0.0f, 0.0f, mZoom, 0.0f, 0.0f, -0.1f, 0.0f, 1.0f, 0.0f);
    Matrix.setIdentityM(mModelMatrix, 0);

    mTexturePointer = new int [32];

    loadTextures();

    GLES20.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
    mShaderPointer = loadProgram();

    GLES20.glEnable(GLES20.GL_BLEND);
    GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA);

    GLES20.glUseProgram(mShaderPointer);

    mMVPMatrixPointer = GLES20.glGetUniformLocation(mShaderPointer, "uMVPMatrix");
    mPositionPointer = GLES20.glGetAttribLocation(mShaderPointer, "a_position");
    mTexCoordPointer = GLES20.glGetAttribLocation(mShaderPointer, "a_texCoord");
    mSamplerPointer = GLES20.glGetUniformLocation(mShaderPointer, "s_texture");
    mColorPointer = GLES20.glGetAttribLocation(mShaderPointer, "a_color");

This is the fragment shader:

              "precision mediump float;                                         \n" 
            + "uniform sampler2D s_texture;                                                 \n"
            + "                                                                             \n" 
            + "varying vec4 v_color;                                                        \n" 
            + "varying vec2 v_texCoord;                                                     \n"
            + "                                                                             \n" 
            + "void main()                                                                  \n" 
            + "{                                                                            \n"
            + "                                                                             \n"
            + "     vec4 final_color = vec4(texture2D(s_texture, v_texCoord).r * v_color.r,   "
            + "                             texture2D(s_texture, v_texCoord).g * v_color.g,   " 
            + "                             texture2D(s_texture, v_texCoord).b * v_color.b,   "
            + "                             texture2D(s_texture, v_texCoord).a + v_color.a);\n" 
            + "                                                                             \n" 
            + "     //Set the Fragments colour                                              \n" 
            + "     gl_FragColor = final_color;                                             \n" 
            + "}                                                                            \n";

And the vertex shader:

              "attribute vec4 a_position;       \n" 
            + "uniform mat4 uMVPMatrix;                     \n" 
            + "                                             \n"
            + "attribute vec2 a_texCoord;                   \n" 
            + "attribute vec4 a_color;                      \n" 
            + "                                             \n" 
            + "varying vec4 v_color;                        \n"
            + "varying vec2 v_texCoord;                     \n" 
            + "                                             \n" 
            + "void main()                                  \n"
            + "{                                            \n" 
            + "   gl_Position = uMVPMatrix * a_position;    \n" 
            + "   v_texCoord = a_texCoord;                  \n"
            + "   v_color = a_color;                        \n" 
            + "}                                            \n";

And last but not least the draw (this is the draw method for each object):

GLES20.glViewport(0, 0, mScreenWidth, mScreenHeight);

GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);

protected void draw(GameRenderer aRenderer){
    if(mVisible){
        // Do the animation.
        if(mAnimated)
            animate();

        GLES20.glEnableVertexAttribArray(aRenderer.mPositionPointer);
        GLES20.glEnableVertexAttribArray(aRenderer.mTexCoordPointer);
        GLES20.glEnableVertexAttribArray(aRenderer.mColorPointer);

        // Load the texture mapping.
        mTexture.position(0);
        GLES20.glVertexAttribPointer(aRenderer.mTexCoordPointer, 2, GLES20.GL_FLOAT, false, 2 * 4, mTexture);

        // Load the vertex position.
        mVertices.position(0);
        GLES20.glVertexAttribPointer(aRenderer.mPositionPointer, 3, GLES20.GL_FLOAT, false, 3 * 4, mVertices);

        // Load the vertex color.
        mColor.position(0);
        GLES20.glVertexAttribPointer(aRenderer.mColorPointer, 4, GLES20.GL_FLOAT, false, 4 * 4, mColor);

        // Set the texture.
        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, aRenderer.mTexturePointer[mTextureId]);
        GLES20.glUniform1i(aRenderer.mSamplerPointer, 0);

        // Calculate stuff.
        Matrix.multiplyMM(aRenderer.mMVPMatrix, 0, aRenderer.mViewMatrix, 0, aRenderer.mModelMatrix, 0);
        Matrix.multiplyMM(aRenderer.mMVPMatrix, 0, aRenderer.mProjectionMatrix, 0, aRenderer.mMVPMatrix, 0);

        GLES20.glUniformMatrix4fv(aRenderer.mMVPMatrixPointer, 1, false, aRenderer.mMVPMatrix, 0);

        GLES20.glDrawElements(GLES20.GL_TRIANGLES, 6, GLES20.GL_UNSIGNED_SHORT, mIndices);

        GLES20.glDisableVertexAttribArray(aRenderer.mPositionPointer);
        GLES20.glDisableVertexAttribArray(aRenderer.mTexCoordPointer);
        GLES20.glDisableVertexAttribArray(aRenderer.mColorPointer);
    }
}

The loadTexture() Method:

public void loadTextures(){

    Log.d("loadTextures()", "Loading textures");

    Bitmap tBitmap = null;

    // Tell OpenGL to generate textures.
    GLES20.glGenTextures(32, mTexturePointer, 0);

    BitmapFactory.Options options = new BitmapFactory.Options();
    options.inTempStorage = new byte [16 * 1024];
    options.inScaled = false;

    // TEXTURE 0
    GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTexturePointer[0]);

    // Scale up if the texture if smaller.
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);

    tBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.ingame_boll_spritesheet_new_style, options);

    GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, tBitmap, 0);

    tBitmap.recycle();
    // TEXTURE 1
    GLES20.glActiveTexture(GLES20.GL_TEXTURE1);
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTexturePointer[1]);

    // Scale up if the texture if smaller.
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
    GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);

    tBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.ingame_boll_mouth, options);

    GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, tBitmap, 0);

    tBitmap.recycle();

    // And so on for all textures

    Log.d("loadTextures()", "Loaded textures");

}

I have looked very closely and the .pngs is not the problem. I tried setting the vertex colors alpha to -1 and yes, the texture disappear but the dotting is still there. When i disable the blending all transparency gets black and the dotting disappear. I can't figure out what to try next, when the fragment shader outputs alpha 0.0 and it still gets dotted..

Any feedback on things to try is appreciated. Thank you!

Answer 1

It seems like a color-depth problem. You should set your surface and window to 32 bit mode and see if that helps:

glview.setEGLConfigChooser(8, 8, 8, 8, 16, 0);

and

getWindow().setFormat(PixelFormat.RGBA_8888);

It should not be necessary to dither anything now that the window and surface uses the same amount of bits, but sometimes it can give a better result, so you can try to enable that for both the window and openGL as well.

Answer 2

What does your "loadTextures()" function look like? It might be a glTexParameteri(...) issue, where you setup the filtering for the textures. (interpolation might be incorrect)