OpenGL ES 2.0中的图像和掩码

Question

我正在学习OpenGL ES 2.0,我想创建一个应用程序来更好地理解它是如何工作的.该应用程序有一组用户可以应用于图像的过滤器(我知道,没什么新的:P).

其中一个过滤器需要两个图像和一个蒙版,它会混合显示它们的两个图像(这里是一个图像,以便更好地解释我想要获得的内容)

目前我真的很困惑,我不知道从哪里开始创造这种效果.我无法理解我必须使用多个纹理和多个FrameBuffers,或者我可以使用单个着色器.

你有什么提示可以帮助我做这个项目吗？

编辑 - - - -

我已经找到了这个解决方案,但是当我用作遮罩线而不是圆圈时,结果实际上是"蹩脚",特别是如果线条被旋转.

precision highp float;

varying vec4 FragColor;
varying highp vec2 TexCoordOut;

uniform sampler2D textureA;
uniform sampler2D textureB;
uniform sampler2D mask;

void main(void){
    vec4 mask_color = texture2D(mask, TexCoordOut);

    if (mask_color.a > 0.0){
        gl_FragColor =  texture2D(textureA, TexCoordOut);
    }else {
        gl_FragColor =  texture2D(textureB, TexCoordOut);
    }
}

使用Stencil缓冲区或混合可能更好吗？

Answer 1

您可以在不使用昂贵的情况下在一行中应用蒙版if:

gl_FragColor = step( 0.5, vMask.r ) * vColor_1 + ( 1.0 - step( 0.5, vMask.r ) ) * vColor_2;

或者,最好只在两种颜色之间进行插值:

gl_FragColor = mix( vColor_1, vColor_2, vMask.r );

在这种情况下,可以平滑掩模(即,使用高斯模糊)以产生较少的混叠.与单值阈值相比,这将产生非常好的结果.