Blending alpha in opengl es 2.0

Question

I try blending alpha of two textures. First texture it some image, second texture this is rectangle with transparent round in center. I need mix this two textures so that in result I my background with transperent round in center. For this, I try to use glBlendFunc, but I was able to get only the whole transparent background, in other words, all of my background became transparent. How can I mixed alpha of textures via glBlendFunc?

Answer 1

One issue is that you can't use GLUtils.texImage2D() to load alpha textures from a Bitmap on Android. This is a common problem that Google really should document better. The problem is that the Bitmap class converts all images into pre-multiplied format, but that does not work with OpenGL ES unless the image is completely opaque. This article gives more detail on this:

http://software.intel.com/en-us/articles/porting-opengl-games-to-android-on-intel-atom-processors-part-1

To use glBlendFunc(), you must enable it first with glEnable(GL_BLEND), but the fastest way to blend 2 textures together with OpenGL ES 2.0 is to do it in the fragment shader. Here is a simple example:

uniform sampler2D sampler2d_0;
uniform sampler2D sampler2d_1;
varying mediump vec2 texCoord;

void main()
{
    vec3 vTexture0 = texture2D(sampler2d_0, texCoord);
    vec3 vTexture1 = texture2D(sampler2d_1, texCoord);
    vec3 vColor = mix(vTexture0, vTexture1, alpha);

    gl_FragColor = vec4(vColor, 1.0);
}