Question

Using OpenGL ES 2.0 on iOS 4.

I have an OpenGL view that inherits from UIView. It is in front of a UIImageView that provides a background.

I have a .png image with transparency that I am using for an OpenGL texture.

The problem I am having is the transparency of the image in the OpenGL view shows through to the image in the UIImageView background. I would like to show content in the OpenGL view that is behind the elements with the transparent texture.

The underneath OpenGL texture is being rendered, but any portion that has the transparent texture on top does not show the underneath OpenGL texture. It shows the UIImageView background.

What do I need to do so that the transparency will show content in the OpenGL view that is behind the transparent content?

EDIT:

I restructured the index array so all elements with transparent textures come at the end and should be rendered after all opaque elements when I call glDrawElements.

Still having the problem with the transparency.

I set up some data so that I have 4 vertices and 6 indices for 2 triangles to draw a square with the opaque texture.
There are also 4 vertices and 6 indices for 2 triangles to draw a square with the transparent texture which come after the other entries in the vertex/index arrays. The transparent element coordinates render it in front of the opaque element.

I can see the transparent element, and I can also see the edges of the opaque element sticking out from behind.
However, instead of showing the opaque element which lies immediately behind the transparent element, the transparency goes right through and shows the background of the view behind the OpenGL view.

Opaque yellow square:

Transparent test image:

The transparent image covers the opaque image but the transparency shows the background not the opaque image behind:

Answer 1

Did you try using some blending? Something like this:

//draw your background scene here
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
//draw your foreground scene here
glDisable(GL_BLEND);

—————–EDIT on comment—————-

So you want to do the blending in fragment shader:

vec4 color1 = texture2D(backgroundTexture, ...);
vec4 color2 = colorYouGetFromSecondaryTextureOrSomeOtherElement;

vec4 outputColor = color1*(1.0-color2.a) + color2*(color2.a);
outputColor.a = 1.0; //or some function of color1.a and color2.a

gl_FragColor = outputColor;

—————–EDIT 2————————-

Also considering your results I would say that you forgot something in your pipeline. You probably use 2 or more textures but only your second is binded resulting in the fragment snippet I posted to be all black but your foreground.. Are you using “active texture”? Something like this:

- (void)bindFirstTexture {
    glActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_1D, firstTextureID);
}
- (void)bindSecondTexture {
    glActiveTexture(GL_TEXTURE1);
    glBindTexture(GL_TEXTURE_2D, secondTextureID);
}

You need such binding in both, before creating and before drawing multiple textures.