如何混合图像遮罩？

Question

这样的面膜要怎么敷

获得散景等效果

需要模糊蒙版中的边缘并应用于图像纹理。怎么做到的？

顶点着色器：

attribute vec4 a_Position;

    void main()
    {
        gl_Position = a_Position;
    }

片段着色器：

precision lowp float;

    uniform sampler2D u_Sampler; // textureSampler 
    uniform sampler2D u_Mask; // maskSampler
    uniform vec3 iResolution;

    vec4 blur(sampler2D source, vec2 size, vec2 uv) {

        vec4 C = vec4(0.0);

        float width = 1.0 / size.x;
        float height = 1.0 / size.y;

        float divisor = 0.0;

        for (float x = -25.0; x <= 25.0; x++)
        {
            C += texture2D(source, uv + vec2(x * width, 0.0));
            C += texture2D(source, uv + vec2(0.0, x * height));
            divisor++;
        }
        C*=0.5;

        return vec4(C.r / divisor, C.g / divisor, C.b / divisor, 1.0);

    }

    void main()
    {
        vec2 uv = gl_FragCoord.xy / iResolution.xy;
        vec4 videoColor = texture2D(u_Sampler, uv);
        vec4 maskColor = texture2D(u_Mask, uv);
        gl_FragColor = blur(u_Sampler, iResolution.xy, uv);
    }

Answer 1

vec4 blurColor = blur(u_Sampler, iResolution.xy, uv);
gl_FragColor = mix(blurColor, videoColor, maskColor.r);

但仅供参考，像您这样一次性模糊并不常见。更常见的是在一个方向（水平）模糊，然后垂直模糊结果，然后混合结果，blurredTexture，videoTexture，mask。

如何混合图像遮罩？

How blending image mask?

image-processing

opengl-es

glsl

webgl