如何混合图像蒙版？

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

但是仅供参考，像您一样一遍模糊并不常见。更常见的是在一个方向（水平）上进行模糊处理，然后在垂直方向上对结果进行模糊处理，然后对结果进行模糊处理，包括模糊纹理，视频纹理，蒙版。