Как наложить маску?

Question

[Александр Мурашкин]

Добрый день!
Каким образом можно наложить такую маску:


Альфа-канал: 0.
На любую текстуру, и получить эффект по типу Bokeh: https://en.wikipedia.org/wiki/Bokeh, все в маске прозрачно без рызмытия текстуры, иначе размытие, и необходимо сглаживать края маски


Точно решения не прошу! Хочу узнать в каком направлении идти, чтобы решить данную задачу.

Вершинный шейдер:

attribute vec4 a_Position;

        void main()
        {
            gl_Position = a_Position;
        }

Фрагметный шейдер:

precision lowp float;

        uniform sampler2D u_Sampler; // текстура которую необходимо размыть по маске
        uniform sampler2D u_Mask; // маска
        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);
        }

Спасибо за советы

Comments

[RAX7]

смиксуй размытую текстуру и неразмытую

vec4 videoColor = texture2D(u_Sampler, uv);
float maskColor = texture2D(u_Mask, uv).r;
vec4 bluredTex = blur(u_Sampler, iResolution.xy, uv);
gl_FragColor = mix(bluredTex, videoColor, maskColor);

[Александр Мурашкин]

RAX7, Спасибо тебе большое!

[Александр Мурашкин]

RAX7, А каким образом можно сгладить углы маски?

[RAX7]

Александр Мурашкин, размой её по Гаусу, шейдер размытия можешь выдернуть из pixijs, он там хорошо оптимизированный.

Answer 1

[Александр Павлюк]

Проще всего в два прохода.
Рендерить размытый фон, а поверх рендерить объект по маске, отсекая ненужные пиксели альфой.
Размывать края маски можно как раз в шейдере второго прохода, отдавая фрагментным размытую альфу.