@pexip/media-processor 20.3.5 → 21.0.0

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

@@ -0,0 +1,162 @@
+import { makeShaderDataDefinitions, makeStructuredView } from 'webgpu-utils';
+import { assert } from '@pexip/utils';
+import { RENDERING_EVENTS } from '../../constants';
+import jointBilateralFilterHorizontalShader from './shaders/jointBilateralFilterHorizontal.wgsl';
+import jointBilateralFilterVerticalShader from './shaders/jointBilateralFilterVertical.wgsl';
+import { updateTextureStorageFormat } from './webgpuUtils';
+export const createJointBilateralFilterRenderer = (processor, device, isContextLost, width, height, maskFormat) => {
+    // Dispatch workgroups based on the shader's workgroup size (64x4)
+    const TILE_W = 32;
+    const TILE_ROWS = 4;
+    const TILE_H = 32;
+    const TILE_COLS = 4;
+    // Create intermediate texture for the filtered result
+    const tempTexture = device.createTexture({
+        label: 'Joint Bilateral Filtered temporary mask texture',
+        format: maskFormat,
+        size: [width, height],
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING,
+    });
+    const outputTexture = device.createTexture({
+        label: 'Joint Bilateral Filtered Mask Texture',
+        format: maskFormat,
+        size: [width, height],
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING,
+    });
+    const defs = makeShaderDataDefinitions(jointBilateralFilterHorizontalShader);
+    // @ts-expect-error This is what we get from the API
+    const uniforms = makeStructuredView(defs.uniforms.params);
+    // Create params buffer
+    const paramsBuffer = device.createBuffer({
+        size: uniforms.arrayBuffer.byteLength,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    const scaleFactor = width / processor.width;
+    const texelWidth = 1 / width;
+    const texelHeight = 1 / height;
+    uniforms.set({
+        width,
+        height,
+        texelWidth,
+        texelHeight,
+    });
+    const updateParams = (params) => {
+        uniforms.set({
+            ...params,
+            sigmaSpace: params.sigmaSpace * scaleFactor,
+        });
+        device.queue.writeBuffer(paramsBuffer, 0, uniforms.arrayBuffer);
+    };
+    // Generate shader code with appropriate format
+    const shaderHCode = updateTextureStorageFormat(jointBilateralFilterHorizontalShader, maskFormat);
+    const shaderVCode = updateTextureStorageFormat(jointBilateralFilterVerticalShader, maskFormat);
+    // Cache shader module and pipeline at init time
+    const shaderHModule = device.createShaderModule({
+        label: 'joint bilateral filter horizontal compute',
+        code: shaderHCode,
+    });
+    const shaderVModule = device.createShaderModule({
+        label: 'joint bilateral filter vertical compute',
+        code: shaderVCode,
+    });
+    const computeHPipeline = device.createComputePipeline({
+        label: 'joint bilateral filter horizontal pipeline',
+        layout: 'auto',
+        compute: { module: shaderHModule },
+    });
+    const computeVPipeline = device.createComputePipeline({
+        label: 'joint bilateral filter vertical pipeline',
+        layout: 'auto',
+        compute: { module: shaderVModule },
+    });
+    const uniformsHBindGroups = device.createBindGroup({
+        layout: computeHPipeline.getBindGroupLayout(1),
+        entries: [
+            { binding: 0, resource: { buffer: paramsBuffer } },
+            { binding: 1, resource: tempTexture.createView() },
+        ],
+    });
+    const uniformsVBindGroups = device.createBindGroup({
+        layout: computeVPipeline.getBindGroupLayout(1),
+        entries: [
+            { binding: 0, resource: { buffer: paramsBuffer } },
+            { binding: 1, resource: outputTexture.createView() },
+        ],
+    });
+    const compute = (label, encoder, pipeline, bindGroup0, bindGroup1, workgroupCountX, workgroupCountY) => {
+        const computePass = encoder.beginComputePass({ label });
+        computePass.setPipeline(pipeline);
+        computePass.setBindGroup(0, bindGroup0);
+        computePass.setBindGroup(1, bindGroup1);
+        computePass.dispatchWorkgroups(workgroupCountX, workgroupCountY);
+        computePass.end();
+    };
+    const wgCntXH = Math.ceil(width / TILE_W);
+    const wgCntYH = Math.ceil(height / TILE_ROWS);
+    const wgCntXV = Math.ceil(width / TILE_COLS);
+    const wgCntYV = Math.ceil(height / TILE_H);
+    let cacheMaskTexture = null;
+    let cacheGuideTexture = null;
+    let cacheBindGroupH = null;
+    let cacheBindGroupV = null;
+    const cache = {
+        sigmaSpace: -1,
+        sigmaRangeLo: -1,
+        sigmaRangeHi: -1,
+        backgroundThreshold: -1,
+        foregroundThreshold: -1,
+    };
+    return {
+        render: (encoder, maskTexture, guideTexture, params) => {
+            assert(!isContextLost(), RENDERING_EVENTS.ContextLost);
+            if (!(cache.sigmaSpace === params.sigmaSpace &&
+                cache.sigmaRangeLo === params.sigmaRangeLo &&
+                cache.sigmaRangeHi === params.sigmaRangeHi &&
+                cache.backgroundThreshold === params.backgroundThreshold &&
+                cache.foregroundThreshold === params.foregroundThreshold)) {
+                updateParams(params);
+                cache.sigmaSpace = params.sigmaSpace;
+                cache.sigmaRangeLo = params.sigmaRangeLo;
+                cache.sigmaRangeHi = params.sigmaRangeHi;
+                cache.backgroundThreshold = params.backgroundThreshold;
+                cache.foregroundThreshold = params.foregroundThreshold;
+            }
+            // Horizontal
+            if (cacheMaskTexture !== maskTexture ||
+                cacheGuideTexture !== guideTexture) {
+                cacheBindGroupH = device.createBindGroup({
+                    layout: computeHPipeline.getBindGroupLayout(0),
+                    entries: [
+                        { binding: 0, resource: maskTexture.createView() },
+                        { binding: 1, resource: guideTexture.createView() },
+                    ],
+                });
+                cacheMaskTexture = maskTexture;
+            }
+            // Horizontal pipeline
+            compute('Joint Bilateral Filter Horizontal pass', encoder, computeHPipeline, cacheBindGroupH, uniformsHBindGroups, wgCntXH, wgCntYH);
+            // Vertical
+            if (cacheGuideTexture !== guideTexture) {
+                cacheBindGroupV = device.createBindGroup({
+                    layout: computeVPipeline.getBindGroupLayout(0),
+                    entries: [
+                        { binding: 0, resource: tempTexture.createView() },
+                        { binding: 1, resource: guideTexture.createView() },
+                    ],
+                });
+                cacheGuideTexture = guideTexture;
+            }
+            compute('Joint Bilateral Filter Vertical pass', encoder, computeVPipeline, cacheBindGroupV, uniformsVBindGroups, wgCntXV, wgCntYV);
+            return outputTexture;
+        },
+        release: () => {
+            tempTexture.destroy();
+            outputTexture.destroy();
+            paramsBuffer.destroy();
+            cacheMaskTexture = null;
+            cacheGuideTexture = null;
+            cacheBindGroupH = null;
+            cacheBindGroupV = null;
+        },
+    };
+};

package/dist/common/backends/webgpu/renderer.js

@@ -1,43 +1,95 @@
-import { PROCESSING_WIDTH, PROCESSING_HEIGHT, } from '../../constants';
+import { assert } from '@pexip/utils';
+import { PROCESSING_WIDTH, PROCESSING_HEIGHT, STRONG_EDGE_BLUR_AMOUNT, } from '../../constants';
 import { createObjectUpdater, createLazyProps } from '../../utils';
 import { createTextureRenderer } from './texture';
 import { createBlendRenderer } from './blender';
-import { getGPUDevice, hasBGRA8unormStorage } from './webgpuUtils';
+import { getGPUDevice, hasR16FloatTextureStorage, supportsTextureFormat, hasF16, } from './webgpuUtils';
 import { createBlurRenderer } from './dualFilterBlur';
 import { createSmoothingMaskRenderer } from './smoothingMask';
 import { createTextureToTextureRenderer } from './textureToTexture';
+import { createJointBilateralFilterRenderer } from './jointBilateralFilter';
+import { createTextureResizeRenderer } from './resize';
+import { createTentBlurRenderer } from './tentBlur';
+import { createReplaceRenderer } from './replace';
 export const createRenderer = (adapter, renderEventHandlers, canvas = new OffscreenCanvas(PROCESSING_WIDTH, PROCESSING_HEIGHT)) => {
+    const halfWidth = Math.trunc(canvas.width / 2);
+    const halfHeight = Math.trunc(canvas.height / 2);
+    const quarterWidth = Math.trunc(canvas.width / 4);
+    const quarterHeight = Math.trunc(canvas.height / 4);
+    const fullChannelTextureFormat = 'rgba8unorm';
     const rendererCreator = {
+        edgeBlurRenderer: () => {
+            assert(props.device);
+            return createTentBlurRenderer(props.device, isContextLost, canvas.width, canvas.height, props.maskFormat, props.supportF16);
+        },
         videoFrameRenderer: () => {
-            if (!props.device) {
-                throw new Error('No device.');
-            }
-            return createTextureRenderer(canvas, props.device, isContextLost);
+            assert(props.device);
+            return createTextureRenderer(props.device, isContextLost, fullChannelTextureFormat, canvas.width, canvas.height, 'linear');
+        },
+        maskRenderer: () => {
+            assert(props.device);
+            return createTextureRenderer(props.device, isContextLost, props.maskFormat, canvas.width, canvas.height, 'nearest');
+        },
+        maskDownsampler2: () => {
+            assert(props.device);
+            return createTextureResizeRenderer(props.device, isContextLost, halfWidth, halfHeight, props.maskFormat, 'nearest');
+        },
+        maskDownsampler4: () => {
+            assert(props.device);
+            return createTextureResizeRenderer(props.device, isContextLost, quarterWidth, quarterHeight, props.maskFormat, 'nearest');
+        },
+        maskUpsampler: () => {
+            assert(props.device);
+            return createTextureResizeRenderer(props.device, isContextLost, canvas.width, canvas.height, props.maskFormat, 'nearest');
+        },
+        frameDownsampler2: () => {
+            assert(props.device);
+            return createTextureResizeRenderer(props.device, isContextLost, halfWidth, halfHeight, fullChannelTextureFormat, 'linear');
+        },
+        frameDownsampler4: () => {
+            assert(props.device);
+            return createTextureResizeRenderer(props.device, isContextLost, quarterWidth, quarterHeight, fullChannelTextureFormat, 'linear');
         },
         backgroundImageRenderer: () => {
-            if (!props.device) {
-                throw new Error('No device.');
-            }
+            assert(props.device);
+            return createTextureRenderer(props.device, isContextLost, fullChannelTextureFormat, canvas.width, canvas.height, 'linear');
+        },
+        blendRenderer: () => {
+            assert(props.device);
             return createBlendRenderer(canvas, props.device, props.presentationFormat, isContextLost);
         },
         blurRenderer: () => {
-            if (!props.device) {
-                throw new Error('No device.');
-            }
-            return createBlurRenderer(canvas, props.device, props.presentationFormat, isContextLost);
+            assert(props.device);
+            return createBlurRenderer(props.device, canvas.width, canvas.height, fullChannelTextureFormat, isContextLost);
         },
-        maskSmoothingRenderer: () => {
-            if (!props.device) {
-                throw new Error('No device.');
-            }
-            return createSmoothingMaskRenderer(canvas, props.device, isContextLost);
+        jointBilateralFilterRenderer2: () => {
+            assert(props.device);
+            return createJointBilateralFilterRenderer(canvas, props.device, isContextLost, halfWidth, halfHeight, props.maskFormat);
+        },
+        jointBilateralFilterRenderer4: () => {
+            assert(props.device);
+            return createJointBilateralFilterRenderer(canvas, props.device, isContextLost, quarterWidth, quarterHeight, props.maskFormat);
+        },
+        maskSmoothingRenderer2: () => {
+            assert(props.device);
+            return createSmoothingMaskRenderer(props.device, isContextLost, props.maskFormat, halfWidth, halfHeight, props.supportF16);
+        },
+        maskSmoothingRenderer4: () => {
+            assert(props.device);
+            return createSmoothingMaskRenderer(props.device, isContextLost, props.maskFormat, quarterWidth, quarterHeight, props.supportF16);
         },
         prevMaskRenderer: () => {
-            if (!props.device) {
-                throw new Error('No device.');
-            }
+            assert(props.device);
             return createTextureToTextureRenderer(props.device, isContextLost);
         },
+        strongMaskBlurRenderer: () => {
+            assert(props.device);
+            return createBlurRenderer(props.device, canvas.width, canvas.height, props.maskFormat, isContextLost);
+        },
+        replaceRenderer: () => {
+            assert(props.device);
+            return createReplaceRenderer(canvas, props.device, props.presentationFormat, isContextLost);
+        },
         release: (states) => () => {
             for (const key of Object.keys(states)) {
                 key !== 'release' && states[key]?.release();
@@ -48,33 +100,80 @@ export const createRenderer = (adapter, renderEventHandlers, canvas = new Offscr
     const props = {
         canvas,
         presentationFormat: 'rgba8unorm',
+        supportR16FloatTextureStorage: false,
+        maskFormat: 'rgba16float',
+        supportF16: false,
         backend: 'webgpu',
         deviceLost: false,
         get videoFrameRenderer() {
             return lazyProps.videoFrameRenderer;
         },
+        get edgeBlurRenderer() {
+            return lazyProps.edgeBlurRenderer;
+        },
+        get maskRenderer() {
+            return lazyProps.maskRenderer;
+        },
+        get maskDownsampler2() {
+            return lazyProps.maskDownsampler2;
+        },
+        get maskDownsampler4() {
+            return lazyProps.maskDownsampler4;
+        },
+        get maskUpsampler() {
+            return lazyProps.maskUpsampler;
+        },
+        get frameDownsampler2() {
+            return lazyProps.frameDownsampler2;
+        },
+        get frameDownsampler4() {
+            return lazyProps.frameDownsampler4;
+        },
         get blendRenderer() {
-            return lazyProps.backgroundImageRenderer;
+            return lazyProps.blendRenderer;
         },
         get blurRenderer() {
             return lazyProps.blurRenderer;
         },
-        get maskSmoothingRenderer() {
-            return lazyProps.maskSmoothingRenderer;
+        get backgroundImageRenderer() {
+            return lazyProps.backgroundImageRenderer;
+        },
+        get maskSmoothingRenderer2() {
+            return lazyProps.maskSmoothingRenderer2;
+        },
+        get maskSmoothingRenderer4() {
+            return lazyProps.maskSmoothingRenderer4;
         },
         get prevMaskRenderer() {
             return lazyProps.prevMaskRenderer;
         },
+        get jointBilateralFilterRenderer2() {
+            return lazyProps.jointBilateralFilterRenderer2;
+        },
+        get jointBilateralFilterRenderer4() {
+            return lazyProps.jointBilateralFilterRenderer4;
+        },
+        get strongMaskBlurRenderer() {
+            return lazyProps.strongMaskBlurRenderer;
+        },
+        get replaceRenderer() {
+            return lazyProps.replaceRenderer;
+        },
     };
     const updateProps = createObjectUpdater(props);
     const init = async () => {
         if (!navigator.gpu) {
             throw Error('WebGPU not supported.');
         }
-        props.presentationFormat = hasBGRA8unormStorage(adapter)
-            ? navigator.gpu.getPreferredCanvasFormat()
-            : 'rgba8unorm';
+        props.presentationFormat = navigator.gpu.getPreferredCanvasFormat();
         props.device = await getGPUDevice(adapter);
+        props.supportR16FloatTextureStorage =
+            hasR16FloatTextureStorage(adapter) &&
+                supportsTextureFormat(props.device, 'r16float');
+        if (props.supportR16FloatTextureStorage) {
+            props.maskFormat = 'r16float';
+        }
+        props.supportF16 = hasF16(adapter);
         props.device.lost.then(info => {
             if (info.reason === 'destroyed') {
                 return;
@@ -88,34 +187,107 @@ export const createRenderer = (adapter, renderEventHandlers, canvas = new Offscr
         if (options) {
             updateProps(options);
         }
-        const frameTexture = props.videoFrameRenderer.render(frame);
-        const maskTexture = props.videoFrameRenderer.render({
+        assert(props.device);
+        const encoder = props.device.createCommandEncoder({
+            label: 'Renderer Encoder',
+        });
+        const frameUploadPass = encoder.beginComputePass({
+            label: 'frame upload pass',
+        });
+        const frameTexture = props.videoFrameRenderer.render(frame, frameUploadPass);
+        const maskTexture = props.maskRenderer.render({
             frame: mask,
-            width: frame.width,
-            height: frame.height,
+            width: mask.width,
+            height: mask.height,
             timestamp: frame.timestamp,
-        });
-        const smoothedMaskTexture = props.maskSmoothingRenderer.render(maskTexture, props.prevMask, options);
+        }, frameUploadPass);
+        frameUploadPass.end();
+        let smoothedMask;
+        let compositeInputMask;
+        switch (options.downSampleFactor) {
+            case 4: {
+                const downsamplePass = encoder.beginComputePass({
+                    label: 'downsample pass',
+                });
+                const maskLowRes = props.maskDownsampler4.render(downsamplePass, maskTexture);
+                const frameLowRes = props.frameDownsampler4.render(downsamplePass, frameTexture);
+                downsamplePass.end();
+                const filteredMask = props.jointBilateralFilterRenderer4.render(encoder, maskLowRes, frameLowRes, options);
+                smoothedMask = props.maskSmoothingRenderer4.render(encoder, filteredMask, props.prevMask4 ?? filteredMask, options);
+                const upsamplePass = encoder.beginComputePass({
+                    label: 'upsample pass',
+                });
+                const upsampledMask = props.maskUpsampler.render(upsamplePass, smoothedMask);
+                upsamplePass.end();
+                compositeInputMask = props.strongMaskBlurRenderer.render(encoder, upsampledMask, STRONG_EDGE_BLUR_AMOUNT);
+                break;
+            }
+            default: {
+                const downsamplePass = encoder.beginComputePass({
+                    label: 'downsample pass',
+                });
+                const maskLowRes = props.maskDownsampler2.render(downsamplePass, maskTexture);
+                const frameLowRes = props.frameDownsampler2.render(downsamplePass, frameTexture);
+                downsamplePass.end();
+                const filteredMask = props.jointBilateralFilterRenderer2.render(encoder, maskLowRes, frameLowRes, options);
+                smoothedMask = props.maskSmoothingRenderer2.render(encoder, filteredMask, props.prevMask2 ?? filteredMask, options);
+                const upsamplePass = encoder.beginComputePass({
+                    label: 'upsample pass',
+                });
+                const upsampledMask = props.maskUpsampler.render(upsamplePass, smoothedMask);
+                upsamplePass.end();
+                compositeInputMask = props.edgeBlurRenderer.render(encoder, upsampledMask, options);
+                break;
+            }
+        }
         if (options.effects === 'blur') {
-            const blurredTexture = props.blurRenderer.render(frame, options.backgroundBlurAmount);
-            props.blendRenderer.render(frameTexture, blurredTexture, smoothedMaskTexture);
+            const blurredTexture = props.blurRenderer.render(encoder, frameTexture, options.backgroundBlurAmount);
+            props.blendRenderer.render(encoder, {
+                foreground: frameTexture,
+                background: blurredTexture,
+                mask: compositeInputMask,
+            }, options);
         }
         else if (options.effects === 'overlay') {
             if (options.backgroundImage) {
-                const bgTexture = props.videoFrameRenderer.render({
+                const bgImgUploadPass = encoder.beginComputePass({
+                    label: 'background image upload pass',
+                });
+                const bgTexture = props.backgroundImageRenderer.render({
                     frame: options.backgroundImage,
                     width: options.backgroundImage.width,
                     height: options.backgroundImage.height,
                     timestamp: frame.timestamp,
-                });
-                props.blendRenderer.render(frameTexture, bgTexture, smoothedMaskTexture);
+                }, bgImgUploadPass);
+                bgImgUploadPass.end();
+                const blurredBackgroundImageTexture = props.blurRenderer.render(encoder, bgTexture, options.backgroundBlurAmount);
+                props.replaceRenderer.render(encoder, {
+                    foreground: frameTexture,
+                    background: bgTexture,
+                    mask: compositeInputMask,
+                    blurBackground: blurredBackgroundImageTexture,
+                    timestamp: frame.timestamp,
+                }, options);
             }
         }
-        props.prevMask = props.prevMaskRenderer.render(smoothedMaskTexture);
+        switch (options.downSampleFactor) {
+            case 4:
+                props.prevMask4 = props.prevMaskRenderer.render(encoder, smoothedMask);
+                break;
+            default:
+                props.prevMask2 = props.prevMaskRenderer.render(encoder, smoothedMask);
+                break;
+        }
+        props.device.queue.submit([encoder.finish()]);
     };
     const release = () => {
         lazyProps.release();
         props.deviceLost = false;
+        props.prevMask2 = undefined;
+        props.prevMask4 = undefined;
+        props.presentationFormat = 'rgba8unorm';
+        props.supportR16FloatTextureStorage = false;
+        props.maskFormat = 'rgba16float';
         lazyProps = createLazyProps(rendererCreator);
     };
     const isContextLost = () => props.deviceLost;

package/dist/common/backends/webgpu/replace.d.ts

@@ -0,0 +1,11 @@
+import type { RendererOptions } from '../../types/render';
+export declare const createReplaceRenderer: (processor: OffscreenCanvas, device: GPUDevice, presentationFormat: GPUTextureFormat, isContextLost: () => boolean) => {
+    render: (encoder: GPUCommandEncoder, { foreground, background, blurBackground, mask, timestamp, }: {
+        foreground: GPUTexture;
+        background: GPUTexture;
+        blurBackground: GPUTexture;
+        mask: GPUTexture;
+        timestamp: number;
+    }, options: RendererOptions) => void;
+    release: () => void;
+};

package/dist/common/backends/webgpu/replace.js

@@ -0,0 +1,175 @@
+import { makeShaderDataDefinitions, makeStructuredView } from 'webgpu-utils';
+import { assert } from '@pexip/utils';
+import { RENDERING_EVENTS } from '../../constants';
+import shaderCode from './shaders/replace.wgsl';
+export const createReplaceRenderer = (processor, device, presentationFormat, isContextLost) => {
+    const context = processor.getContext('webgpu');
+    if (!context) {
+        throw Error('WebGPU not supported on the canvas.');
+    }
+    context.configure({
+        device,
+        format: presentationFormat,
+        alphaMode: 'premultiplied',
+    });
+    const defs = makeShaderDataDefinitions(shaderCode);
+    // @ts-expect-error This is what we get from the API
+    const uniformsSparams = makeStructuredView(defs.uniforms.sparams);
+    // @ts-expect-error This is what we get from the API
+    const uniformsDparams = makeStructuredView(defs.uniforms.dparams);
+    // Cache shader module and pipeline at init time
+    const shaderModule = device.createShaderModule({
+        label: 'replace shader',
+        code: shaderCode,
+    });
+    const pipeline = device.createRenderPipeline({
+        label: 'replace pipeline',
+        layout: 'auto',
+        vertex: {
+            module: shaderModule,
+        },
+        fragment: {
+            module: shaderModule,
+            targets: [{ format: presentationFormat }],
+        },
+    });
+    // Cache sampler at init time
+    const linearSampler = device.createSampler({
+        addressModeU: 'clamp-to-edge',
+        addressModeV: 'clamp-to-edge',
+        magFilter: 'linear',
+        minFilter: 'linear',
+    });
+    const nearestSampler = device.createSampler({
+        addressModeU: 'clamp-to-edge',
+        addressModeV: 'clamp-to-edge',
+        magFilter: 'nearest',
+        minFilter: 'nearest',
+    });
+    const sparamsBuffer = device.createBuffer({
+        size: uniformsSparams.arrayBuffer.byteLength,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    const dparamsBuffer = device.createBuffer({
+        size: uniformsDparams.arrayBuffer.byteLength,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    const updateSparams = (options) => {
+        uniformsSparams.set({
+            background: options.backgroundThreshold,
+            foreground: options.foregroundThreshold,
+            lightWrap: options.lightWrapIntensity,
+            lightWrapTightness: options.lightWrapTightness,
+            lightWrapEdgeBand: options.lightWrapEdgeBand,
+            width: options.width,
+            height: options.height,
+        });
+        device.queue.writeBuffer(sparamsBuffer, 0, uniformsSparams.arrayBuffer);
+    };
+    const updateDparams = ({ time, parity }) => {
+        uniformsDparams.set({ time, parity });
+        device.queue.writeBuffer(dparamsBuffer, 0, uniformsDparams.arrayBuffer);
+    };
+    const colorAttachment0 = {
+        loadOp: 'load',
+        storeOp: 'store',
+    };
+    const renderPassDescriptor = {
+        label: 'replace renderPass',
+        colorAttachments: [colorAttachment0],
+    };
+    const bindGroup0 = device.createBindGroup({
+        layout: pipeline.getBindGroupLayout(0),
+        entries: [
+            { binding: 0, resource: linearSampler },
+            { binding: 1, resource: nearestSampler },
+            { binding: 2, resource: { buffer: sparamsBuffer } },
+            { binding: 3, resource: { buffer: dparamsBuffer } },
+        ],
+    });
+    let cachedBindGroup1 = null;
+    let cachedMask = null;
+    let cachedBackground = null;
+    let cachedForeground = null;
+    let cachedBlurBackground = null;
+    let cachedBackgroundThreshold = -1;
+    let cachedForegroundThreshold = -1;
+    let cachedLightWrapIntensity = -1;
+    let cachedLightWrapTightness = -1;
+    let cachedLightWrapEdgeBand = -1;
+    let cachedWidth = -1;
+    let cachedHeight = -1;
+    let parity = -1;
+    return {
+        render: (encoder, { foreground, background, blurBackground, mask, timestamp, }, options) => {
+            assert(!isContextLost(), RENDERING_EVENTS.ContextLost);
+            colorAttachment0.view = context.getCurrentTexture().createView();
+            if (!(cachedBackground === background &&
+                cachedForeground === foreground &&
+                cachedMask === mask &&
+                cachedBlurBackground === blurBackground)) {
+                cachedBindGroup1 = device.createBindGroup({
+                    layout: pipeline.getBindGroupLayout(1),
+                    entries: [
+                        { binding: 0, resource: foreground.createView() },
+                        { binding: 1, resource: background.createView() },
+                        { binding: 2, resource: mask.createView() },
+                        { binding: 3, resource: blurBackground.createView() },
+                    ],
+                });
+                cachedForeground = foreground;
+                cachedBackground = background;
+                cachedMask = mask;
+                cachedBlurBackground = blurBackground;
+            }
+            if (!(cachedBackgroundThreshold === options.backgroundThreshold &&
+                cachedForegroundThreshold === options.foregroundThreshold &&
+                cachedLightWrapIntensity === options.lightWrapIntensity &&
+                cachedLightWrapTightness === options.lightWrapTightness &&
+                cachedLightWrapEdgeBand === options.lightWrapEdgeBand &&
+                cachedWidth === background.width &&
+                cachedHeight === background.height)) {
+                updateSparams({
+                    backgroundThreshold: options.backgroundThreshold,
+                    foregroundThreshold: options.foregroundThreshold,
+                    lightWrapIntensity: options.lightWrapIntensity,
+                    lightWrapTightness: options.lightWrapTightness,
+                    lightWrapEdgeBand: options.lightWrapEdgeBand,
+                    width: background.width,
+                    height: background.height,
+                });
+                cachedBackgroundThreshold = options.backgroundThreshold;
+                cachedForegroundThreshold = options.foregroundThreshold;
+                cachedLightWrapIntensity = options.lightWrapIntensity;
+                cachedLightWrapTightness = options.lightWrapTightness;
+                cachedLightWrapEdgeBand = options.lightWrapEdgeBand;
+                cachedWidth = background.width;
+                cachedHeight = background.height;
+            }
+            parity = -parity;
+            updateDparams({ time: (timestamp * 1e-6) % 1024.0, parity });
+            const pass = encoder.beginRenderPass(renderPassDescriptor);
+            pass.setPipeline(pipeline);
+            pass.setBindGroup(0, bindGroup0);
+            pass.setBindGroup(1, cachedBindGroup1);
+            pass.draw(6); // call our vertex shader 6 times
+            pass.end();
+        },
+        release: () => {
+            sparamsBuffer.destroy();
+            dparamsBuffer.destroy();
+            cachedBackgroundThreshold = -1;
+            cachedForegroundThreshold = -1;
+            cachedLightWrapIntensity = -1;
+            cachedLightWrapTightness = -1;
+            cachedLightWrapEdgeBand = -1;
+            cachedWidth = -1;
+            cachedHeight = -1;
+            cachedBlurBackground = null;
+            cachedBackground = null;
+            cachedForeground = null;
+            cachedMask = null;
+            cachedBindGroup1 = null;
+        },
+    };
+};

package/dist/common/backends/webgpu/resize.d.ts

@@ -0,0 +1,4 @@
+export declare const createTextureResizeRenderer: (device: GPUDevice, isContextLost: () => boolean, width: number, height: number, textureFormat: GPUTextureFormat, filterMode: GPUFilterMode) => {
+    render(pass: GPUComputePassEncoder, texture: GPUTexture): GPUTexture;
+    release(): void;
+};