OpenglES 2.0 PNG alpha纹理重叠

Question

I'm trying to draw multiple hexagons on the screen that have an alpha channel. the image is this:

So, I load the texture into the program and that's ok. When it runs, the alpha channel is blended with the background color and that's ok but, when two hexagons overlap themselves, the overlapped part becomes the color of the background! Below the picture:

Of course, this is not the effect that I expected.. I want them to overlap without this background being drawn over the other texture. Here is my code for drawing:

    GLES20.glUseProgram(Program);

    hVertex  = GLES20.glGetAttribLocation(Program,"vPosition");
    hColor   = GLES20.glGetUniformLocation(Program, "vColor");
    uTexture = GLES20.glGetUniformLocation(Program, "u_Texture");
    hTexture = GLES20.glGetAttribLocation(Program, "a_TexCoordinate");
    hMatrix  = GLES20.glGetUniformLocation(Program, "uMVPMatrix");

    GLES20.glVertexAttribPointer(hVertex, 3, GLES20.GL_FLOAT, false, 0, bVertex);
    GLES20.glEnableVertexAttribArray(hVertex);
    GLES20.glUniform4fv(hColor, 1, Color, 0);
    GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, hTexture);
    GLES20.glUniform1i(uTexture, 0);
    GLES20.glVertexAttribPointer(hTexture, 2, GLES20.GL_FLOAT, false, 0, bTexture);
    GLES20.glEnableVertexAttribArray(hTexture);

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

    x=-1;y=0;z=0;
    for (int i=0;i<10;i++) {
        Matrix.setIdentityM(ModelMatrix, 0);
        Matrix.translateM(ModelMatrix, 0, x, y, z);
        x+=0.6f;
        Matrix.multiplyMM(ModelMatrix, 0, ModelMatrix, 0, ProjectionMatrix, 0);
        GLES20.glUniformMatrix4fv(hMatrix, 1, false, ModelMatrix, 0);
        GLES20.glDrawElements(GLES20.GL_TRIANGLES, DrawOrder.length, GLES20.GL_UNSIGNED_SHORT, bDrawOrder);
    }

    GLES20.glDisable(GLES20.GL_BLEND);
    GLES20.glDisableVertexAttribArray(hVertex);
}

And My fragment shader:

public final String fragmentShaderCode =
        "precision mediump float;" +
        "uniform vec4 vColor;" +
        "uniform sampler2D u_Texture;" +
        "varying vec2 v_TexCoordinate;" +
        "void main() {" +
        "  gl_FragColor = vColor * texture2D(u_Texture, v_TexCoordinate);" +
        "}";

and my renderer code:

    super(context);
    setEGLContextClientVersion(2);
    getHolder().setFormat(PixelFormat.TRANSLUCENT);
    setEGLConfigChooser(8, 8, 8, 8, 8, 8);
    renderer = new GLRenderer(context);
    setRenderer(renderer);

I already tried to use diferent functions on glBlendFunc but nothing seems to work.. Does Anyone knows what the problem is? I'm really lost.. If needs anymore code just ask!

Thank you!

Answer 1

My guess is that you need to disable the depth test when drawing these. Since they all appear at the same depth, when you draw your leftmost ring, it writes into the depth buffer for every pixel in the quad, even the transparent ones.

Then when you draw the next quad to the right, the pixels which overlap don't get drawn because they fail the depth test, so you just get a blank area where it intersects with the first quad.