Workaround for transparency and depth testing in OpenGL ES?

Question

I'm trying to get depth testing working correctly on OpenGL ES, using the draw_texture extension. I realised early on that 'normal' z co-ordinates when rendered using this extension don't work. This was due to the extension effectively using the Z co-ordinate as a ratio between 0 and 1 rather than the actual z position in the depth buffer as shown by the OpenGL OES draw texture page:

Zs is mapped to window depth Zw as follows:

             { n,                 if z <= 0
        Zw = { f,                 if z >= 1
             { n + z * (f - n),   otherwise

where <n> and <f> are the near and far values of
DEPTH_RANGE.

I read on the Transparency FAQ page for OpenGL that:

When using depth buffering in an application, you need to be careful about the order in which you render primitives. Fully opaque primitives need to be rendered first, followed by partially opaque primitives in back-to-front order. If you don't render primitives in this order, the primitives, which would otherwise be visible through a partially opaque primitive, might lose the depth test entirely.

This brings me around to my problem. I have 2 squares, both 64x64. They are textured with a circle. The square 'on top' is positioned slightly further down from the square below like so.

___________
|  .____.  |
| /      \ |
|_|______|_|
|  .____.  |
| /      \ |
| |   s  | |
|  \____/ t|
|__________|

The circle texture is a solid colour (s) which forms the circle, then a completely transparent surrounding area (t).

When OpenGL renders it, the square underneath is failing the depth test and is not being drawn, even though the pixels above it are transparent, so you get a semi-circle effect from the layer underneath, not the whole image.

    BAD                   GOOD
___________           ___________
|  .____.  |          |  .____.  |
| /      \ |          | /      \ |
|_|______|_|          |_|      |_|
|  .____.  |          | \.____./ |
| /      \ |          | /      \ |
| |      | |          | |      | |
|  \____/  |          |  \____/  |
|__________|          |__________|

How can I stop this from happening?

Answer 1

On create:

gl.glEnable(GL10.GL_ALPHA_TEST);
gl.glAlphaFunc(GL10.GL_GREATER,0.2f); 

This fixes the issue, but you may need to change 0.2f to higher or lower depending on your textures.