在OpenGL中为视频应用alpha蒙版

Question

我想对一个视频应用alpha蒙版。视频的每一帧都有颜色信息在上面，alpha信息在下面。像这样。

在我的例子中，我希望alpha图像中的白色像素 在主图像中是透明的。我有一个其他的纹理来填充这些透明像素。

我能够生成唯一的彩色图像或唯一的alpha图像，但不能将alpha应用到图像上。我在android中使用GLES20。

这是我的代码，它给出了一个黑屏。

private val vidVertexShaderCode =
        """
    precision highp float;
    attribute vec3 vertexPosition;
    attribute vec4 uvs;
    varying vec2 varUvs;
    varying vec2 varMaskUvs;
    uniform mat4 texMatrix;
    uniform mat4 mvp;

    void main()
    {
        varUvs = (texMatrix * vec4(uvs.x, uvs.y, 0, 1.0)).xy;
        varMaskUvs = (texMatrix * vec4(uvs.x, uvs.y * 0.5, 0.1, 1.0)).xy;
        gl_Position = mvp * vec4(vertexPosition, 1.0);
    }
    """

private val vidFragmentShaderCode =
        """
    #extension GL_OES_EGL_image_external : require
    precision mediump float;

    varying vec2 varUvs;
    varying vec2 varMaskUvs;
    uniform samplerExternalOES texSampler;

    void main()
    {
        vec2 m_uv  = vec2(varMaskUvs.x, varMaskUvs.y); 
        vec4 mask = texture2D(texSampler, m_uv);  

        vec2 c_uv  = vec2(varUvs.x, varUvs.y * 0.5); 
        vec4 color = texture2D(texSampler, c_uv);  
        gl_FragColor = vec4(color.rgb, color.a * mask.r)
    }
    """

我做错了什么？

P.S. I am new to opengl.

Answer 1

计算 v 图像的坐标 (uvs.y * 0.5 + 0.5)和面具(uvs.y * 0.5)的顶点着色器中。

precision highp float;
attribute vec3 vertexPosition;
attribute vec4 uvs;
varying vec2 varUvs;
varying vec2 varMaskUvs;
uniform mat4 texMatrix;
uniform mat4 mvp;

void main()
{
    varUvs      = (texMatrix * vec4(uvs.x, uvs.y * 0.5 + 0.5, 0, 1.0)).xy;
    varMaskUvs  = (texMatrix * vec4(uvs.x, uvs.y * 0.5, 0.0, 1.0)).xy;
    gl_Position = mvp * vec4(vertexPosition, 1.0);
}

你不需要在片段着色器中做任何进一步的转换。

#extension GL_OES_EGL_image_external : require
precision mediump float;

varying vec2 varUvs;
varying vec2 varMaskUvs;
uniform samplerExternalOES texSampler;

void main()
{
    vec4 mask    = texture2D(texSampler, varMaskUvs);  
    vec4 color   = texture2D(texSampler, varUvs);  
    gl_FragColor = vec4(color.rgb, color.a * mask.r)
}