@pexip/media-processor 20.3.4 → 21.0.0

package/dist/common/backends/webgl/diffAbsMask.js

@@ -0,0 +1,103 @@
+import { assert } from '@pexip/utils';
+import { m3 } from '../../m3';
+import { RENDERING_EVENTS } from '../../constants';
+import { createGLProgram, createMaskTexture, createFrameBuffer, } from './webglUtils';
+import vertexSrc from './shaders/matrix.vert';
+import fragmentSrc from './shaders/diffAbs.frag';
+/**
+ * Create absulute difference renderer to caculate the difference between 2 textures
+ */
+export const createDiffAbsRenderer = (processor, width, height) => {
+    const { gl, program, attribLocations, uniformLocations, floatSingleChannelSupported, floatFullChannelSupported, release, } = createGLProgram(processor, {
+        attribs: {
+            position: 'a_position',
+            texCoord: 'a_texCoord',
+        },
+        uniforms: {
+            matrix: 'u_matrix',
+            texA: 'u_tex_a',
+            texB: 'u_tex_b',
+            size: 'u_size',
+        },
+        vertexSrc,
+        fragmentSrc,
+    });
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    // Position
+    const positionBuffer = gl.createBuffer();
+    gl.enableVertexAttribArray(attribLocations.position);
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.vertexAttribPointer(attribLocations.position, 2, gl.FLOAT, false, 0, 0);
+    gl.bufferData(gl.ARRAY_BUFFER, 
+    // prettier-ignore
+    new Float32Array([
+        0, 0,
+        0, 1,
+        1, 0,
+        1, 0,
+        0, 1,
+        1, 1,
+    ]), gl.STATIC_DRAW);
+    // Texture coordinates for the rectangle
+    const texCoordBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, 
+    // prettier-ignore
+    new Float32Array([
+        0, 0,
+        0, 1,
+        1, 0,
+        1, 0,
+        0, 1,
+        1, 1,
+    ]), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(attribLocations.texCoord);
+    gl.vertexAttribPointer(attribLocations.texCoord, 2, gl.FLOAT, false, 0, 0);
+    const outputTexturePing = createMaskTexture(gl, width, height, true, floatSingleChannelSupported, floatFullChannelSupported);
+    const frameBufferPing = createFrameBuffer(gl, outputTexturePing);
+    return {
+        render: (textureA, textureB) => {
+            assert(!gl.isContextLost(), RENDERING_EVENTS.ContextLost);
+            assert(textureA.width === textureB.width &&
+                textureA.height === textureB.height);
+            gl.useProgram(program);
+            gl.bindVertexArray(vao);
+            gl.uniform2i(uniformLocations.size, textureA.width, textureA.height);
+            gl.activeTexture(gl.TEXTURE0);
+            gl.uniform1i(uniformLocations.texA, 0);
+            gl.bindTexture(gl.TEXTURE_2D, textureA.texture);
+            gl.activeTexture(gl.TEXTURE1);
+            gl.uniform1i(uniformLocations.texB, 1);
+            gl.bindTexture(gl.TEXTURE_2D, textureB.texture);
+            // No Flip Y Coordinate for drawing on the frame buffer
+            // Project, position and scale to full-size of the canvas
+            const matrix = m3.projection(1, 1, 1);
+            gl.uniformMatrix3fv(uniformLocations.matrix, false, matrix);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, frameBufferPing);
+            gl.viewport(0, 0, width, height);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            // Cleanup
+            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+            gl.bindVertexArray(null);
+            return {
+                texture: outputTexturePing,
+                frameBuffer: frameBufferPing,
+                width,
+                height,
+            };
+        },
+        release: () => {
+            gl.deleteBuffer(positionBuffer);
+            gl.deleteBuffer(texCoordBuffer);
+            gl.deleteTexture(outputTexturePing);
+            gl.deleteFramebuffer(frameBufferPing);
+            gl.deleteVertexArray(vao);
+            release();
+        },
+    };
+};

package/dist/common/backends/webgl/geodesicReconstruction.d.ts

@@ -0,0 +1,13 @@
+import type { RendererOptions } from '../../types/render';
+import type { TextureInfo } from './types';
+/**
+ * A Geodesic Reconstruction Renderer that performs geodesic dilation of
+ * a mask constrained by a reference mask.
+ */
+export declare const createGeodesicReconstructionRenderer: (processor: OffscreenCanvas, width: number, height: number) => {
+    render: ({ mask, maskRef }: {
+        mask: TextureInfo;
+        maskRef: TextureInfo;
+    }, options: Pick<RendererOptions, "morphDilateRadiusPx" | "morphPass">) => TextureInfo;
+    release: () => void;
+};

package/dist/common/backends/webgl/geodesicReconstruction.js

@@ -0,0 +1,176 @@
+import { assert } from '@pexip/utils';
+import { m3 } from '../../m3';
+import { RENDERING_EVENTS } from '../../constants';
+import { clamping } from '../../utils';
+import { createGLProgram, createMaskTexture, createFrameBuffer, } from './webglUtils';
+import vertexSrc from './shaders/matrix.vert';
+import fragmentSrc from './shaders/dilateClipToMask.frag';
+import { createDiffAbsRenderer } from './diffAbsMask';
+// Convergence threshold used when testing for geodesic reconstruction stability.
+const CONVERGENCE_MAX_ITERATIONS = 64;
+const MAX_RADIUS_PX = 64;
+const clampRadiusPx = clamping(0, MAX_RADIUS_PX);
+/**
+ * A Geodesic Reconstruction Renderer that performs geodesic dilation of
+ * a mask constrained by a reference mask.
+ */
+export const createGeodesicReconstructionRenderer = (processor, width, height) => {
+    const { gl, program, attribLocations, uniformLocations, floatSingleChannelSupported, floatFullChannelSupported, release, } = createGLProgram(processor, {
+        attribs: {
+            position: 'a_position',
+            texCoord: 'a_texCoord',
+        },
+        uniforms: {
+            matrix: 'u_matrix',
+            mask: 'u_mask',
+            maskRef: 'u_ref_mask',
+            texelSize: 'u_texel_size',
+            radiusPx: 'u_radius_px',
+            direction: 'u_direction',
+        },
+        vertexSrc,
+        fragmentSrc,
+    });
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    // Position
+    const positionBuffer = gl.createBuffer();
+    gl.enableVertexAttribArray(attribLocations.position);
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.vertexAttribPointer(attribLocations.position, 2, gl.FLOAT, false, 0, 0);
+    gl.bufferData(gl.ARRAY_BUFFER, 
+    // prettier-ignore
+    new Float32Array([
+        0, 0,
+        0, 1,
+        1, 0,
+        1, 0,
+        0, 1,
+        1, 1,
+    ]), gl.STATIC_DRAW);
+    // Texture coordinates for the rectangle
+    const texCoordBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, 
+    // prettier-ignore
+    new Float32Array([
+        0, 0,
+        0, 1,
+        1, 0,
+        1, 0,
+        0, 1,
+        1, 1,
+    ]), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(attribLocations.texCoord);
+    gl.vertexAttribPointer(attribLocations.texCoord, 2, gl.FLOAT, false, 0, 0);
+    const scaleFactor = processor.width / width;
+    const MIN_CCL_WIDTH = 32;
+    const MIN_CCL_HEIGHT = 18;
+    const convergenceWidth = Math.max(Math.floor(width / 4), MIN_CCL_WIDTH);
+    const convergenceHeight = Math.max(Math.floor(height / 4), MIN_CCL_HEIGHT);
+    const CONVERGENCE_EPSILON = convergenceWidth === MIN_CCL_WIDTH ? 1e-8 : 1e-4;
+    const convergenceSize = convergenceWidth * convergenceHeight;
+    const diffRenderer = createDiffAbsRenderer(processor, convergenceWidth, convergenceHeight);
+    const supportFloat = floatSingleChannelSupported || floatFullChannelSupported;
+    const readPixelsFormat = supportFloat ? gl.RGBA : gl.RED;
+    const readPixelsType = supportFloat ? gl.FLOAT : gl.UNSIGNED_BYTE;
+    const convergenceDiff = supportFloat
+        ? new Float32Array(convergenceSize * 4)
+        : new Uint8Array(convergenceSize);
+    const outputTexturePing = createMaskTexture(gl, width, height, false, floatSingleChannelSupported, floatFullChannelSupported);
+    const outputTexturePong = createMaskTexture(gl, width, height, false, floatSingleChannelSupported, floatFullChannelSupported);
+    const frameBufferPing = createFrameBuffer(gl, outputTexturePing);
+    const frameBufferPong = createFrameBuffer(gl, outputTexturePong);
+    return {
+        render: ({ mask, maskRef }, options) => {
+            assert(!gl.isContextLost(), RENDERING_EVENTS.ContextLost);
+            let write = frameBufferPing;
+            let read = mask.texture;
+            const dilate = () => {
+                gl.useProgram(program);
+                gl.bindVertexArray(vao);
+                gl.uniform1i(uniformLocations.radiusPx, clampRadiusPx(Math.floor(options.morphDilateRadiusPx / scaleFactor)));
+                gl.uniform2f(uniformLocations.texelSize, 1 / mask.width, 1 / mask.height);
+                // Reference Mask
+                gl.activeTexture(gl.TEXTURE1);
+                gl.uniform1i(uniformLocations.maskRef, 1);
+                gl.bindTexture(gl.TEXTURE_2D, maskRef.texture);
+                // No Flip Y Coordinate for drawing on the frame buffer
+                // Project, position and scale to full-size of the canvas
+                const matrix = m3.projection(1, 1, 1);
+                gl.uniformMatrix3fv(uniformLocations.matrix, false, matrix);
+                // Separable
+                for (let j = 0; j < 2; j++) {
+                    // Textures
+                    gl.activeTexture(gl.TEXTURE0);
+                    gl.uniform1i(uniformLocations.mask, 0);
+                    gl.bindTexture(gl.TEXTURE_2D, read);
+                    // Horizontal then Vertical
+                    gl.uniform2f(uniformLocations.direction, 1.0 - j, 0.0 + j);
+                    gl.bindFramebuffer(gl.FRAMEBUFFER, write);
+                    gl.viewport(0, 0, width, height);
+                    gl.drawArrays(gl.TRIANGLES, 0, 6);
+                    // Swap
+                    [read, write] =
+                        write === frameBufferPing
+                            ? [outputTexturePing, frameBufferPong]
+                            : [outputTexturePong, frameBufferPing];
+                }
+            };
+            for (let i = 0; i < options.morphPass; i++) {
+                dilate();
+            }
+            let convergent = false;
+            let count = 0;
+            while (!convergent) {
+                dilate();
+                const diff = diffRenderer.render({ texture: outputTexturePing, width, height }, { texture: outputTexturePong, width, height });
+                gl.bindFramebuffer(gl.FRAMEBUFFER, diff.frameBuffer);
+                gl.readPixels(0, 0, convergenceWidth, convergenceHeight, readPixelsFormat, readPixelsType, convergenceDiff);
+                let sum = 0;
+                let meanDiff = 0;
+                if (supportFloat) {
+                    for (let i = 0, j = 0; i < convergenceSize; ++i, j += 4) {
+                        //@ts-expect-error will not be undefined
+                        sum += convergenceDiff[j];
+                    }
+                    meanDiff = sum / convergenceSize;
+                }
+                else {
+                    for (let i = 0; i < convergenceSize; ++i) {
+                        //@ts-expect-error will not be undefined
+                        sum += convergenceDiff[i];
+                    }
+                    meanDiff = sum / convergenceSize / 255.0;
+                }
+                gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+                if (meanDiff < CONVERGENCE_EPSILON ||
+                    count >= CONVERGENCE_MAX_ITERATIONS) {
+                    // console.log(
+                    //     `Geodesic reconstruction converged in ${count} iterations with ${meanDiff}`,
+                    //     {convergenceWidth, convergenceHeight, width, height},
+                    // );
+                    convergent = true;
+                }
+                count++;
+            }
+            // Cleanup
+            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+            gl.bindVertexArray(null);
+            return { texture: read, width, height };
+        },
+        release: () => {
+            gl.deleteBuffer(positionBuffer);
+            gl.deleteBuffer(texCoordBuffer);
+            gl.deleteTexture(outputTexturePing);
+            gl.deleteTexture(outputTexturePong);
+            gl.deleteFramebuffer(frameBufferPing);
+            gl.deleteFramebuffer(frameBufferPong);
+            gl.deleteVertexArray(vao);
+            diffRenderer.release();
+            release();
+        },
+    };
+};

package/dist/common/backends/webgl/jointBilateralFilter.d.ts

@@ -0,0 +1,12 @@
+import type { RendererOptions } from '../../types/render';
+import type { TextureInfo } from './types';
+/**
+ * Joint Bilateral Filter
+ */
+export declare const createJointBilateralFilterRenderer: (processor: OffscreenCanvas, width: number, height: number) => {
+    render: ({ input, guide }: {
+        input: TextureInfo;
+        guide: TextureInfo;
+    }, options: RendererOptions) => TextureInfo;
+    release: () => void;
+};

package/dist/common/backends/webgl/jointBilateralFilter.js

@@ -0,0 +1,108 @@
+import { assert } from '@pexip/utils';
+import { RENDERING_EVENTS } from '../../constants';
+import { m3 } from '../../m3';
+import { createGLProgram, createMaskTexture, createFrameBuffer, } from './webglUtils';
+import vertexSrc from './shaders/matrix.vert';
+import fragmentSrc from './shaders/jointBilateralFilter.frag';
+/**
+ * Joint Bilateral Filter
+ */
+export const createJointBilateralFilterRenderer = (processor, width, height) => {
+    const { gl, program, attribLocations, uniformLocations, release } = createGLProgram(processor, {
+        attribs: {
+            position: 'a_position',
+            texCoord: 'a_texCoord',
+        },
+        uniforms: {
+            frameGuide: 'u_frame_guide',
+            frameInput: 'u_frame_input',
+            matrix: 'u_matrix',
+            texelSize: 'u_texel_size',
+            sigmaSpace: 'u_sigma_space',
+            sigmaRangeLo: 'u_sigma_range_lo',
+            sigmaRangeHi: 'u_sigma_range_hi',
+            foregroundThreshold: 'u_foreground_threshold',
+            backgroundThreshold: 'u_background_threshold',
+        },
+        vertexSrc,
+        fragmentSrc,
+    });
+    gl.enable(gl.BLEND);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    // Position
+    const positionBuffer = gl.createBuffer();
+    gl.enableVertexAttribArray(attribLocations.position);
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.vertexAttribPointer(attribLocations.position, 2, gl.FLOAT, false, 0, 0);
+    gl.bufferData(gl.ARRAY_BUFFER, 
+    // prettier-ignore
+    new Float32Array([
+        0, 0,
+        0, 1,
+        1, 0,
+        1, 0,
+        0, 1,
+        1, 1,
+    ]), gl.STATIC_DRAW);
+    // Texture coordinates for the rectangle
+    const texCoordBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, 
+    // prettier-ignore
+    new Float32Array([
+        0, 0,
+        0, 1,
+        1, 0,
+        1, 0,
+        0, 1,
+        1, 1,
+    ]), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(attribLocations.texCoord);
+    gl.vertexAttribPointer(attribLocations.texCoord, 2, gl.FLOAT, false, 0, 0);
+    const outputTexture = createMaskTexture(gl, width, height);
+    const frameBuffer = createFrameBuffer(gl, outputTexture);
+    const scaleFactor = processor.width / width;
+    return {
+        render: ({ input, guide }, options) => {
+            assert(!gl.isContextLost(), RENDERING_EVENTS.ContextLost);
+            assert(options.foregroundThreshold >= options.backgroundThreshold, 'foregroundThreshold must be >= backgroundThreshold');
+            gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer);
+            gl.viewport(0, 0, width, height);
+            gl.useProgram(program);
+            gl.bindVertexArray(vao);
+            // Textures
+            gl.activeTexture(gl.TEXTURE0);
+            gl.uniform1i(uniformLocations.frameInput, 0);
+            gl.bindTexture(gl.TEXTURE_2D, input.texture);
+            gl.activeTexture(gl.TEXTURE1);
+            gl.uniform1i(uniformLocations.frameGuide, 1);
+            gl.bindTexture(gl.TEXTURE_2D, guide.texture);
+            gl.uniform2f(uniformLocations.texelSize, 1.0 / input.width, 1.0 / input.height);
+            gl.uniform1f(uniformLocations.sigmaSpace, options.sigmaSpace / scaleFactor);
+            gl.uniform1f(uniformLocations.sigmaRangeLo, options.sigmaRangeLo);
+            gl.uniform1f(uniformLocations.sigmaRangeHi, options.sigmaRangeHi);
+            gl.uniform1f(uniformLocations.backgroundThreshold, options.backgroundThreshold);
+            gl.uniform1f(uniformLocations.foregroundThreshold, options.foregroundThreshold);
+            // No Flip Y Coordinate for drawing on the frame buffer
+            // Project, position and scale to full-size of the canvas
+            const matrix = m3.projection(1, 1, 1);
+            gl.uniformMatrix3fv(uniformLocations.matrix, false, matrix);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+            // Cleanup
+            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+            gl.bindVertexArray(null);
+            return { texture: outputTexture, width, height };
+        },
+        release: () => {
+            gl.deleteBuffer(positionBuffer);
+            gl.deleteBuffer(texCoordBuffer);
+            gl.deleteTexture(outputTexture);
+            gl.deleteFramebuffer(frameBuffer);
+            gl.deleteVertexArray(vao);
+            release();
+        },
+    };
+};

package/dist/common/backends/webgl/morphErode.d.ts

@@ -0,0 +1,13 @@
+import type { RendererOptions } from '../../types/render';
+import type { TextureInfo } from './types';
+/**
+ * Create a morphological erosion renderer that performs erosion of a mask with a
+ * given radius and number of passes.
+ * The erosion is implemented as a separable filter.
+ */
+export declare const createMorphErodeRenderer: (processor: OffscreenCanvas, width: number, height: number) => {
+    render: ({ mask }: {
+        mask: TextureInfo;
+    }, options: Pick<RendererOptions, "morphPass" | "morphErodeRadiusPx">) => TextureInfo;
+    release: () => void;
+};

package/dist/common/backends/webgl/morphErode.js

@@ -0,0 +1,121 @@
+import { assert } from '@pexip/utils';
+import { m3 } from '../../m3';
+import { RENDERING_EVENTS } from '../../constants';
+import { clamping } from '../../utils';
+import { createGLProgram, createMaskTexture, createFrameBuffer, } from './webglUtils';
+import vertexSrc from './shaders/matrix.vert';
+import fragmentSrc from './shaders/erode.frag';
+const MAX_RADIUS_PX = 64;
+const clampRadiusPx = clamping(0, MAX_RADIUS_PX);
+/**
+ * Create a morphological erosion renderer that performs erosion of a mask with a
+ * given radius and number of passes.
+ * The erosion is implemented as a separable filter.
+ */
+export const createMorphErodeRenderer = (processor, width, height) => {
+    const { gl, program, attribLocations, uniformLocations, floatSingleChannelSupported, floatFullChannelSupported, release, } = createGLProgram(processor, {
+        attribs: {
+            position: 'a_position',
+            texCoord: 'a_texCoord',
+        },
+        uniforms: {
+            matrix: 'u_matrix',
+            mask: 'u_mask',
+            texelSize: 'u_texel_size',
+            radiusPx: 'u_radius_px',
+            direction: 'u_direction',
+        },
+        vertexSrc,
+        fragmentSrc,
+    });
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    // Position
+    const positionBuffer = gl.createBuffer();
+    gl.enableVertexAttribArray(attribLocations.position);
+    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+    gl.vertexAttribPointer(attribLocations.position, 2, gl.FLOAT, false, 0, 0);
+    gl.bufferData(gl.ARRAY_BUFFER, 
+    // prettier-ignore
+    new Float32Array([
+        0, 0,
+        0, 1,
+        1, 0,
+        1, 0,
+        0, 1,
+        1, 1,
+    ]), gl.STATIC_DRAW);
+    // Texture coordinates for the rectangle
+    const texCoordBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, 
+    // prettier-ignore
+    new Float32Array([
+        0, 0,
+        0, 1,
+        1, 0,
+        1, 0,
+        0, 1,
+        1, 1,
+    ]), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(attribLocations.texCoord);
+    gl.vertexAttribPointer(attribLocations.texCoord, 2, gl.FLOAT, false, 0, 0);
+    const outputTexturePing = createMaskTexture(gl, width, height, false, floatSingleChannelSupported, floatFullChannelSupported);
+    const frameBufferPing = createFrameBuffer(gl, outputTexturePing);
+    const outputTexturePong = createMaskTexture(gl, width, height, false, floatSingleChannelSupported, floatFullChannelSupported);
+    const frameBufferPong = createFrameBuffer(gl, outputTexturePong);
+    const scaleFactor = processor.width / width;
+    return {
+        render: ({ mask }, options) => {
+            assert(!gl.isContextLost(), RENDERING_EVENTS.ContextLost);
+            gl.clearColor(0, 0, 0, 0);
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.useProgram(program);
+            gl.bindVertexArray(vao);
+            gl.uniform2f(uniformLocations.texelSize, 1 / mask.width, 1 / mask.height);
+            gl.uniform1i(uniformLocations.radiusPx, clampRadiusPx(Math.floor(options.morphErodeRadiusPx / scaleFactor)));
+            const matrix = m3.projection(1, 1, 1);
+            // No Flip Y Coordinate for drawing on the frame buffer
+            // Project, position and scale to full-size of the canvas
+            gl.uniformMatrix3fv(uniformLocations.matrix, false, matrix);
+            let write = frameBufferPing;
+            let read = mask.texture;
+            // Ping-pong framebuffers for multiple passes
+            for (let i = 0; i < options.morphPass; i++) {
+                // Separable
+                for (let j = 0; j < 2; j++) {
+                    // Textures
+                    gl.activeTexture(gl.TEXTURE0);
+                    gl.uniform1i(uniformLocations.mask, 0);
+                    gl.bindTexture(gl.TEXTURE_2D, read);
+                    // Horizontal then Vertical
+                    gl.uniform2f(uniformLocations.direction, 1.0 - j, 0.0 + j);
+                    gl.bindFramebuffer(gl.FRAMEBUFFER, write);
+                    gl.viewport(0, 0, mask.width, mask.height);
+                    gl.drawArrays(gl.TRIANGLES, 0, 6);
+                    // Swap
+                    [read, write] =
+                        write === frameBufferPing
+                            ? [outputTexturePing, frameBufferPong]
+                            : [outputTexturePong, frameBufferPing];
+                }
+            }
+            // Cleanup
+            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.bindTexture(gl.TEXTURE_2D, null);
+            gl.bindVertexArray(null);
+            return { texture: read, width, height };
+        },
+        release: () => {
+            gl.deleteBuffer(positionBuffer);
+            gl.deleteBuffer(texCoordBuffer);
+            gl.deleteTexture(outputTexturePing);
+            gl.deleteTexture(outputTexturePong);
+            gl.deleteFramebuffer(frameBufferPing);
+            gl.deleteFramebuffer(frameBufferPong);
+            gl.deleteVertexArray(vao);
+            release();
+        },
+    };
+};