opengl-es-2.0 - 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);
    }
}

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

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 );

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