GLKit and transparency

Question

I'm trying to draw something like this using OpenGL ES and GLKit

But I'm getting this

Although the texture si transparent, upper layers of model replace the texture under instead of blending. Is is possible to fix it somehow?

- (void)setup {

    self.effect = [[GLKBaseEffect alloc] init];

    NSURL *textureURL = [[NSBundle mainBundle] URLForResource:@"portalTexture_ALIENS" withExtension:@"png"];
    texture = [GLKTextureLoader textureWithContentsOfURL:textureURL options:nil error:nil];

    if (texture != nil) {
        self.effect.texture2d0.enabled = GL_TRUE;
        self.effect.texture2d0.envMode = GLKTextureEnvModeReplace;
        self.effect.texture2d0.target = GLKTextureTarget2D;
        self.effect.texture2d0.name = texture.name;
    }

    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, 0, texturedPortalVerts);
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, 0, texturedPortalTexCoords);

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

}

- (void)draw {
    [self.effect prepareToDraw];
    glDrawArrays(GL_TRIANGLES, 0, texturedPortalNumVerts);
}

Thank you.

Answer 1

Transparency in OpenGL is order dependent. Algorithms exist for order independent transparency, but they are fairly complicated and have some serious compromises. In your case however, you can use alpha testing to solve the majority of this problem. Alpha testing ignores pixels with an alpha below a certain threshold (the empty space in your example). Google it for exact glAlphaFunc usage.

If you are using OpenGL ES 2.0 built in alpha testing is not available, and you must implement it in the shader. It would look something like this:

if (texture.alpha < 0.5)
{
    discard;
}

Note that alpha testing may have some serious fill rate performance compromises.