Android GL_BLEND no alpha and GREEN Background

Question

I'm new to OpenGL. My goal is to work on an alpha video in a OpenGL structure in a textureview. I started with Video Effects and try to modify some colors (for start: black to transparent) using a custom [EDITED] shader:

#extension GL_OES_EGL_image_external : require
precision mediump float;
uniform samplerExternalOES sTexture;
vec3 first;
vec4 second;
varying vec2 vTextureCoord;
vec2 oTextureCoord;
void main() {
   first[0] = 0.0;
   first[1] = 0.0;
   first[2] = 0.0;
   second[0] = 0.0;
   second[1] = 1.0;
   second[2] = 0.0;
   second[3] = 1.0;
   vec4 color = texture2D(sTexture, vTextureCoord);
   oTextureCoord = vec2(vTextureCoord.x ,vTextureCoord.y + 0.5);
   vec4 color2 = texture2D(sTexture, oTextureCoord);
   if(vTextureCoord.y < 0.5){
      gl_FragColor = vec4(color.r , color.g, color.b, color2.b);
   }else{
      gl_FragColor = color;

                                                                 }

But I never saw the background under the view. After some research I added

GLES20.glEnable(GLES20.GL_BLEND);

But now the "transparent color" is a green one :/

To add more information: the source video is a combination of colored frames on the upper part and the alpha mask on the bottom one.

Am I doing it wrong?

thanks by advance.

[EDIT] Here is my actual onDrawFame method:

@Override
    public void onDrawFrame(GL10 glUnused) {
        synchronized (this) {
            if (updateSurface) {
                mSurface.updateTexImage();
                mSurface.getTransformMatrix(mSTMatrix);
                updateSurface = false;
            }
        }
        GLES20.glEnable(GLES20.GL_BLEND);
        GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA);

        GLES20.glClearColor(1.0f,1.0f, 1.0f, 0.0f);
        GLES20.glClear(GLES20.GL_DEPTH_BUFFER_BIT
                | GLES20.GL_COLOR_BUFFER_BIT);


        GLES20.glUseProgram(mProgram);
        checkGlError("glUseProgram");

        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
        GLES20.glBindTexture(GL_TEXTURE_EXTERNAL_OES, mTextureID[0]);

        mTriangleVertices.position(TRIANGLE_VERTICES_DATA_POS_OFFSET);
        GLES20.glVertexAttribPointer(maPositionHandle, 3, GLES20.GL_FLOAT,
                false, TRIANGLE_VERTICES_DATA_STRIDE_BYTES,
                mTriangleVertices);
        checkGlError("glVertexAttribPointer maPosition");
        GLES20.glEnableVertexAttribArray(maPositionHandle);
        checkGlError("glEnableVertexAttribArray maPositionHandle");

        mTriangleVertices.position(TRIANGLE_VERTICES_DATA_UV_OFFSET);
        GLES20.glVertexAttribPointer(maTextureHandle, 3, GLES20.GL_FLOAT,
                false, TRIANGLE_VERTICES_DATA_STRIDE_BYTES,
                mTriangleVertices);
        checkGlError("glVertexAttribPointer maTextureHandle");
        GLES20.glEnableVertexAttribArray(maTextureHandle);
        checkGlError("glEnableVertexAttribArray maTextureHandle");

        Matrix.setIdentityM(mMVPMatrix, 0);
        GLES20.glUniformMatrix4fv(muMVPMatrixHandle, 1, false, mMVPMatrix,
                0);
        GLES20.glUniformMatrix4fv(muSTMatrixHandle, 1, false, mSTMatrix, 0);

        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);
        checkGlError("glDrawArrays");
        GLES20.glEnable(GLES20.GL_BLEND);
        GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA);
        GLES20.glFinish();

    }

--[EDIT]-- Here is my vertexShader :

uniform mat4 uMVPMatrix;
uniform mat4 uSTMatrix;
attribute vec4 aPosition;
attribute vec4 aTextureCoord;
varying vec2 vTextureCoord
void main() { 
  gl_Position = uMVPMatrix * aPosition;
  vTextureCoord = (uSTMatrix * aTextureCoord).xy;
}

Answer 1

To improve my question here is some details. Here is my source:

And here is my goal (alpha chanel):

when I let clear color with :

GLES20.glClearColor(1f, 1f, 0.9f, 0f);

There is also the yellow background as you can see ! How can I got a transparent view to see the blue one on this picture?

[ANSWER : HOW TO RESOLVE]

1.First, You need to set your GLSurfaceView to allow Transparency in your constructor as:

this.getHolder().setFormat(PixelFormat.RGB_565);
this.getHolder().setFormat(PixelFormat.TRANSPARENT);
setEGLConfigChooser(8,8,8,8,16,0);
setEGLContextClientVersion(2);// all this before setRenderer()

2.Ask for transparency in your onDrawFrame method :

GLES20.glClearColor(0.0f, 0.0f, 0.0f, .0f);// 
GLES20.glClear(GLES20.GL_DEPTH_BUFFER_BIT|GLES20.GL_COLOR_BUFFER_BIT);
GLES20.glEnable(GLES20.GL_BLEND);
GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA);

For me only black transparent color worked rgba(0,0,0,0).

Thanks again for contributors who helped me.

--[EDIT : REMAINING PROBLEM]--

Here some exemple :

On top it's an GLSurfaceView with an alpha video and down a custom GLTextureView, both are in an horizontalView. Top appears to be good as I want! But check this when I scroll to right:

Top still appear when bottom hide as it needed!

Answer 2

Just a quick look through your code seems to already have quite a few strange peaces. I wish you included your vertex data (the position and texture coordinates) at least. First please check the line

GLES20.glVertexAttribPointer(maTextureHandle, 3, GLES20.GL_FLOAT,
                false, TRIANGLE_VERTICES_DATA_STRIDE_BYTES,
                mTriangleVertices);

These look like texture coordinates and you are having 3 dimensions? Is that correct? Fortunately if the stride is correct the dimensions will make no effect but still.

So if I understand that the top part of the video frame represents the color and the bottom does the alpha then your shader makes little sense to me. Could you show the vertex shader as well? Anyway what I would expect you to do is use the texture coordinates in range [0, 1], representing the whole texture. Then in the vertex shader have 2 varying vec2 texture coordinates such that:

varying vec2 colorTextureCoordinates = vec2(textureCoordinates.x, textureCoordinates.y*.5); // representing the top part
varying vec2 alphaTextureCoordinates = vec2(textureCoordinates.x, textureCoordinates.y*.5 + .5); // representing the bottom part

Then in the fragment shader all you do is mix the 2:

vec3 color = texture2D(sTexture, colorTextureCoordinates).rgb;
float alpha = texture2D(sTexture, alphaTextureCoordinates).b; // Why .b?
gl_FragColor = vec4(color, alpha);

Or am I missing something? Why is there an IF statement in your fragment shader that suggest that the top of the texture would use the color and the bottom part would use the color plus the alpha (or the other way around).

I suggest you first try to draw the image you receive from the video with the most common texture shader to confirm the whole frame is being drawn correctly. Then you should check the alpha is working correctly by feeding the semitransparent shader gl_FragColor = vec4(color.rgb, .5). After you confirm both of these produce expected results you should try drawing only the top part of the frame (the color) by using colorTextureCoordinates to get the expected results (the transparent parts should be black). Then check the alpha part by using alphaTextureCoordinates and gl_FragColor = vec4(alpha, alpha, alpha, 1.0) which should produce a grayscale image where white is a full alpha and black is no alpha. After all of these are confirmed try putting it all together as written above.

To make the surface view blend with other views you need to set the transparency and you need to fill the transparent pixels with the transparent color.

Since you are using blend you will need to clear the background to clear color (.0f, .0f, .0f, .0f). Simply disabling the blend should produce the same result in your case.

After doing so you will still see a black background because the surface view will not implicitly blend with other views (the background) and only RGB part is used to fill the rendered view. To enable the transparency you should take a look at some other answers and also this one.