OpenGL ES 2.0中的图像和遮罩 [英] Images and mask in OpenGL ES 2.0

问题描述

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

I'm learning OpenGL ES 2.0 and I'd like to create an App to better understand how it works. The App has a set of filter that the user can apply on images (I know, nothing new :P).

其中一个滤镜拍摄两个图像和一个蒙版，然后将两个图像混合通过蒙版显示(此处的图像可以更好地解释我想要获得的图像)

One of this filter takes two images and a mask and it mixes the two images showing them through the mask (here an image to better explain what I want to obtain)

此刻，我真的很困惑，我不知道从哪里开始创建这种效果. 我不能理解是否必须使用多个纹理和多个FrameBuffer，或者我只能使用单个着色器.

At the moment I'm really confused and I don't know where to start to create this effect. I can't understand wether I have to work with multiple textures and multiple FrameBuffers or I can just work with a single shader.

您有什么提示可以帮助我完成这个项目吗?

Do you have any hint to help me in doing this project?

编辑--------

EDIT--------

我找到了这种解决方案，但是当我将其用作遮罩线而不是圆形时，结果确实很脏"，尤其是在旋转线的情况下.

I've found this solution, but when I use as mask lines instead of circles the result is really "grungy", especially if lines are rotated.

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缓冲区或混合效果可能更好吗?

Is it probably better to use Stencil buffer or blending?

推荐答案

您可以在一行中应用蒙版，而无需使用昂贵的if:

You can apply the mask in one line without using the costly if:

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

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

Or, better just interpolate between two colors:

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

在这种情况下，可以对蒙版进行平滑处理(即使用高斯模糊处理)以减少锯齿.与单值阈值相比，这将产生非常好的结果.

In this case the mask can be smoothed (i.e. with Gaussian blur) to produce less aliasing. This will yield very good results compared to a single value thresholding.

这篇关于OpenGL ES 2.0中的图像和遮罩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！