@pexip/media-processor 20.3.5 → 21.0.0

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

@@ -0,0 +1,76 @@
+import { makeShaderDataDefinitions, makeStructuredView } from 'webgpu-utils';
+import { assert } from '@pexip/utils';
+import { RENDERING_EVENTS } from '../../constants';
+import { updateTextureStorageFormat, syncWorkgroupSizeWithShader, } from './webgpuUtils';
+import resizeShader from './shaders/resize.wgsl';
+export const createTextureResizeRenderer = (device, isContextLost, width, height, textureFormat, filterMode) => {
+    let shaderCode = updateTextureStorageFormat(resizeShader, textureFormat);
+    const WORKGROUP_SIZE_X = 16;
+    const WORKGROUP_SIZE_Y = 16;
+    const WORKGROUP_COUNT_X = Math.ceil(width / WORKGROUP_SIZE_X);
+    const WORKGROUP_COUNT_Y = Math.ceil(height / WORKGROUP_SIZE_Y);
+    shaderCode = syncWorkgroupSizeWithShader(shaderCode, {
+        workgroupSizeX: WORKGROUP_SIZE_X,
+        workgroupSizeY: WORKGROUP_SIZE_Y,
+    });
+    const defs = makeShaderDataDefinitions(shaderCode);
+    // @ts-expect-error This is what we get from the API
+    const uniforms = makeStructuredView(defs.uniforms.params);
+    const uniformsBuffer = device.createBuffer({
+        size: uniforms.arrayBuffer.byteLength,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    uniforms.set({ outWidth: width, outHeight: height });
+    device.queue.writeBuffer(uniformsBuffer, 0, uniforms.arrayBuffer);
+    const shaderModule = device.createShaderModule({
+        label: `Resize shader module to ${width}x${height} with ${textureFormat} & ${filterMode}`,
+        code: shaderCode,
+    });
+    const pipeline = device.createComputePipeline({
+        layout: 'auto',
+        label: `Resize shader pipeline to ${width}x${height} with ${textureFormat} & ${filterMode}`,
+        compute: { module: shaderModule },
+    });
+    const outTexture = device.createTexture({
+        label: `Resize out texture to ${width}x${height} with ${textureFormat} & ${filterMode}`,
+        format: textureFormat,
+        size: [width, height],
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING,
+    });
+    const outTextureView = outTexture.createView();
+    const sampler = device.createSampler({
+        magFilter: filterMode,
+        minFilter: filterMode,
+        addressModeU: 'clamp-to-edge',
+        addressModeV: 'clamp-to-edge',
+    });
+    let cachedBindGroup0 = null;
+    let cachedInputTexture = null;
+    return {
+        render(pass, texture) {
+            assert(!isContextLost(), RENDERING_EVENTS.ContextLost);
+            if (texture !== cachedInputTexture) {
+                cachedBindGroup0 = device.createBindGroup({
+                    layout: pipeline.getBindGroupLayout(0),
+                    entries: [
+                        { binding: 0, resource: sampler },
+                        { binding: 1, resource: texture.createView() },
+                        { binding: 2, resource: outTextureView },
+                        { binding: 3, resource: { buffer: uniformsBuffer } },
+                    ],
+                });
+                cachedInputTexture = texture;
+            }
+            pass.setPipeline(pipeline);
+            pass.setBindGroup(0, cachedBindGroup0);
+            pass.dispatchWorkgroups(WORKGROUP_COUNT_X, WORKGROUP_COUNT_Y);
+            return outTexture;
+        },
+        release() {
+            uniformsBuffer.destroy();
+            outTexture.destroy();
+            cachedBindGroup0 = null;
+            cachedInputTexture = null;
+        },
+    };
+};

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

@@ -1,5 +1,5 @@
 import type { RendererOptions } from '../../types/render';
-export declare const createSmoothingMaskRenderer: (processor: OffscreenCanvas, device: GPUDevice, isContextLost: () => boolean) => {
-    render: (currMask: GPUTexture, prevMask: GPUTexture | undefined, options: RendererOptions) => GPUTexture;
+export declare const createSmoothingMaskRenderer: (device: GPUDevice, isContextLost: () => boolean, maskFormat: GPUTextureFormat, width: number, height: number, supportF16: boolean) => {
+    render: (encoder: GPUCommandEncoder, currMask: GPUTexture, prevMask: GPUTexture, options: RendererOptions) => GPUTexture;
     release: () => void;
 };

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

@@ -1,66 +1,100 @@
+import { makeShaderDataDefinitions, makeStructuredView } from 'webgpu-utils';
 import { assert } from '@pexip/utils';
 import { RENDERING_EVENTS } from '../../constants';
 import smoothingMaskShader from './shaders/smoothingMaskShader.wgsl';
-export const createSmoothingMaskRenderer = (processor, device, isContextLost) => {
+import { syncWorkgroupSizeWithShader, updateTextureStorageFormat, enableF16InShader, } from './webgpuUtils';
+export const createSmoothingMaskRenderer = (device, isContextLost, maskFormat, width, height, supportF16) => {
+    const WORKGROUP_SIZE_X = 16;
+    const WORKGROUP_SIZE_Y = 16;
+    const WORKGROUP_COUNT_X = Math.ceil(width / WORKGROUP_SIZE_X);
+    const WORKGROUP_COUNT_Y = Math.ceil(height / WORKGROUP_SIZE_Y);
+    // Ensure the setup code and shader code are using the same constants
+    let shaderCode = syncWorkgroupSizeWithShader(smoothingMaskShader, {
+        workgroupSizeX: WORKGROUP_SIZE_X,
+        workgroupSizeY: WORKGROUP_SIZE_Y,
+    });
+    shaderCode = updateTextureStorageFormat(shaderCode, maskFormat);
+    if (supportF16) {
+        shaderCode = enableF16InShader(shaderCode);
+    }
     const smoothedMaskTexture = device.createTexture({
         label: 'Smoothed Mask Texture',
-        format: 'rgba8unorm',
-        size: [processor.width, processor.height],
+        format: maskFormat,
+        size: [width, height],
         usage: GPUTextureUsage.TEXTURE_BINDING |
             GPUTextureUsage.STORAGE_BINDING |
-            GPUTextureUsage.COPY_DST |
             GPUTextureUsage.COPY_SRC,
     });
-    const paramsBuffer = device.createBuffer({
-        size: 2 * 4,
+    const defs = makeShaderDataDefinitions(shaderCode);
+    // @ts-expect-error This is what we get from the API
+    const uniforms = makeStructuredView(defs.uniforms.params);
+    const uniformsBuffer = device.createBuffer({
+        size: uniforms.arrayBuffer.byteLength,
         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
     });
     const updateParams = (opts) => {
-        device.queue.writeBuffer(paramsBuffer, 0, new Float32Array([opts.maskCombineRatio, opts.foregroundThreshold]));
+        uniforms.set({
+            maskCombineRatio: opts.maskCombineRatio,
+        });
+        device.queue.writeBuffer(uniformsBuffer, 0, uniforms.arrayBuffer);
     };
+    // Cache pipeline and shader module at init time
+    const shaderModule = device.createShaderModule({
+        label: 'smoothing mask compute',
+        code: shaderCode,
+    });
+    const computePipeline = device.createComputePipeline({
+        label: 'smoothing mask pipeline',
+        layout: 'auto',
+        compute: { module: shaderModule },
+    });
+    const computeBindGroup0 = device.createBindGroup({
+        layout: computePipeline.getBindGroupLayout(0),
+        entries: [
+            { binding: 0, resource: smoothedMaskTexture.createView() },
+            { binding: 1, resource: { buffer: uniformsBuffer } },
+        ],
+    });
+    let cacheMaskTexture = null;
+    let cachePrevMaskTexture = null;
+    let cacheBindGroup1 = null;
+    let cacheMaskCombineRatio = -1;
     return {
-        render: (currMask, prevMask, options) => {
+        render: (encoder, currMask, prevMask, options) => {
             assert(!isContextLost(), RENDERING_EVENTS.ContextLost);
-            if (!prevMask) {
-                return currMask;
+            if (!(currMask === cacheMaskTexture &&
+                prevMask === cachePrevMaskTexture)) {
+                cacheBindGroup1 = device.createBindGroup({
+                    layout: computePipeline.getBindGroupLayout(1),
+                    entries: [
+                        { binding: 0, resource: currMask.createView() },
+                        { binding: 1, resource: prevMask.createView() },
+                    ],
+                });
+                cacheMaskTexture = currMask;
+                cachePrevMaskTexture = prevMask;
             }
-            const computePipeline = device.createComputePipeline({
-                label: 'smoothing mask pipeline',
-                layout: 'auto',
-                compute: {
-                    module: device.createShaderModule({
-                        label: 'smoothing mask compute',
-                        code: smoothingMaskShader,
-                    }),
-                },
-            });
-            updateParams(options);
-            const computeBindGroup = device.createBindGroup({
-                layout: computePipeline.getBindGroupLayout(0),
-                entries: [
-                    { binding: 1, resource: currMask.createView() },
-                    { binding: 2, resource: prevMask.createView() },
-                    { binding: 3, resource: smoothedMaskTexture.createView() },
-                    { binding: 4, resource: { buffer: paramsBuffer } },
-                ],
-            });
-            const computeEncoder = device.createCommandEncoder({
-                label: 'smoothing mask encoder',
-            });
-            const computePass = computeEncoder.beginComputePass({
-                label: ' smoothing mask compute pass',
+            if (cacheMaskCombineRatio !== options.maskCombineRatio) {
+                updateParams(options);
+                cacheMaskCombineRatio = options.maskCombineRatio;
+            }
+            const computePass = encoder.beginComputePass({
+                label: 'smoothing mask compute pass',
             });
             computePass.setPipeline(computePipeline);
-            computePass.setBindGroup(0, computeBindGroup);
-            computePass.dispatchWorkgroups(Math.ceil(processor.width / 128), Math.ceil(processor.height / 4));
+            computePass.setBindGroup(0, computeBindGroup0);
+            computePass.setBindGroup(1, cacheBindGroup1);
+            computePass.dispatchWorkgroups(WORKGROUP_COUNT_X, WORKGROUP_COUNT_Y);
             computePass.end();
-            const computeCommandBuffer = computeEncoder.finish();
-            device.queue.submit([computeCommandBuffer]);
             return smoothedMaskTexture;
         },
         release: () => {
             smoothedMaskTexture.destroy();
-            paramsBuffer.destroy();
+            uniformsBuffer.destroy();
+            cacheMaskTexture = null;
+            cachePrevMaskTexture = null;
+            cacheBindGroup1 = null;
+            cacheMaskCombineRatio = -1;
         },
     };
 };

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

@@ -0,0 +1,5 @@
+import type { RendererOptions } from '../../types/render';
+export declare const createTentBlurRenderer: (device: GPUDevice, isContextLost: () => boolean, width: number, height: number, textureFormat: GPUTextureFormat, supportF16: boolean) => {
+    render(encoder: GPUCommandEncoder, texture: GPUTexture, options: RendererOptions): GPUTexture;
+    release(): void;
+};

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

@@ -0,0 +1,131 @@
+import { makeShaderDataDefinitions, makeStructuredView } from 'webgpu-utils';
+import { assert } from '@pexip/utils';
+import { RENDERING_EVENTS } from '../../constants';
+import tentBlurHShader from './shaders/tentBlurH.wgsl';
+import tentBlurVShader from './shaders/tentBlurV.wgsl';
+import { clamping } from '../../utils';
+import { updateTextureStorageFormat, syncWorkgroupSizeWithShader, enableF16InShader, } from './webgpuUtils';
+const clampInRangeFrom0To9 = clamping(0, 9);
+export const createTentBlurRenderer = (device, isContextLost, width, height, textureFormat, supportF16) => {
+    const WORKGROUP_SIZE_X = 16;
+    const WORKGROUP_SIZE_Y = 16;
+    const WORKGROUP_COUNT_X = Math.ceil(width / WORKGROUP_SIZE_X);
+    const WORKGROUP_COUNT_Y = Math.ceil(height / WORKGROUP_SIZE_Y);
+    // Patch shader code with the correct texture storage format and workgroup sizes
+    let shaderHCode = updateTextureStorageFormat(tentBlurHShader, textureFormat);
+    shaderHCode = syncWorkgroupSizeWithShader(shaderHCode, {
+        workgroupSizeX: WORKGROUP_SIZE_X,
+        workgroupSizeY: WORKGROUP_SIZE_Y,
+    });
+    shaderHCode = enableF16InShader(shaderHCode);
+    let shaderVCode = updateTextureStorageFormat(tentBlurVShader, textureFormat);
+    shaderVCode = syncWorkgroupSizeWithShader(shaderVCode, {
+        workgroupSizeX: WORKGROUP_SIZE_X,
+        workgroupSizeY: WORKGROUP_SIZE_Y,
+    });
+    if (supportF16) {
+        shaderVCode = enableF16InShader(shaderVCode);
+    }
+    const defs = makeShaderDataDefinitions(shaderHCode);
+    // @ts-expect-error This is what we get from the API
+    const uniforms = makeStructuredView(defs.uniforms.params);
+    // Create params buffer (shared for both passes — same struct layout)
+    const paramsBuffer = device.createBuffer({
+        size: uniforms.arrayBuffer.byteLength,
+        usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+    uniforms.set({ width, height });
+    const updateParams = (radius) => {
+        uniforms.set({ radius });
+        device.queue.writeBuffer(paramsBuffer, 0, uniforms.arrayBuffer);
+    };
+    // Intermediate texture (H pass output → V pass input)
+    const tempTexture = device.createTexture({
+        label: `Tent Blur intermediate texture ${width}x${height} ${textureFormat}`,
+        format: textureFormat,
+        size: [width, height],
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING,
+    });
+    const tempTextureView = tempTexture.createView();
+    // Output texture (V pass output)
+    const outTexture = device.createTexture({
+        label: `Tent Blur output texture ${width}x${height} ${textureFormat}`,
+        format: textureFormat,
+        size: [width, height],
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING,
+    });
+    // Shader modules
+    const shaderHModule = device.createShaderModule({
+        label: `Tent Blur horizontal compute ${width}x${height} ${textureFormat}`,
+        code: shaderHCode,
+    });
+    const shaderVModule = device.createShaderModule({
+        label: `Tent Blur vertical compute ${width}x${height} ${textureFormat}`,
+        code: shaderVCode,
+    });
+    // Compute pipelines
+    const computeHPipeline = device.createComputePipeline({
+        label: `Tent Blur horizontal pipeline ${width}x${height} ${textureFormat}`,
+        layout: 'auto',
+        compute: { module: shaderHModule },
+    });
+    const computeVPipeline = device.createComputePipeline({
+        label: `Tent Blur vertical pipeline ${width}x${height} ${textureFormat}`,
+        layout: 'auto',
+        compute: { module: shaderVModule },
+    });
+    // V pass bind group (static: tempTexture → outTexture)
+    const bindGroupV = device.createBindGroup({
+        layout: computeVPipeline.getBindGroupLayout(0),
+        entries: [
+            { binding: 0, resource: tempTextureView },
+            { binding: 1, resource: outTexture.createView() },
+            { binding: 2, resource: { buffer: paramsBuffer } },
+        ],
+    });
+    let cacheTexture = null;
+    let cacheBindGroupH = null;
+    let cacheRadius = -1;
+    return {
+        render(encoder, texture, options) {
+            assert(!isContextLost(), RENDERING_EVENTS.ContextLost);
+            const radius = clampInRangeFrom0To9(options.edgeBlurAmount);
+            if (cacheRadius !== radius) {
+                updateParams(radius);
+                cacheRadius = radius;
+            }
+            if (cacheTexture !== texture) {
+                cacheBindGroupH = device.createBindGroup({
+                    layout: computeHPipeline.getBindGroupLayout(0),
+                    entries: [
+                        { binding: 0, resource: texture.createView() },
+                        { binding: 1, resource: tempTextureView },
+                        { binding: 2, resource: { buffer: paramsBuffer } },
+                    ],
+                });
+                cacheTexture = texture;
+            }
+            // Horizontal
+            const passH = encoder.beginComputePass({ label: 'Tent Blur H pass' });
+            passH.setPipeline(computeHPipeline);
+            passH.setBindGroup(0, cacheBindGroupH);
+            passH.dispatchWorkgroups(WORKGROUP_COUNT_X, WORKGROUP_COUNT_Y);
+            passH.end();
+            // Vertical
+            const passV = encoder.beginComputePass({ label: 'Tent Blur V pass' });
+            passV.setPipeline(computeVPipeline);
+            passV.setBindGroup(0, bindGroupV);
+            passV.dispatchWorkgroups(WORKGROUP_COUNT_X, WORKGROUP_COUNT_Y);
+            passV.end();
+            return outTexture;
+        },
+        release() {
+            tempTexture.destroy();
+            outTexture.destroy();
+            paramsBuffer.destroy();
+            cacheTexture = null;
+            cacheBindGroupH = null;
+            cacheRadius = -1;
+        },
+    };
+};

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

@@ -1,5 +1,5 @@
 import type { VideoFrameLike } from '../../types/media';
-export declare const createTextureRenderer: (processor: OffscreenCanvas, device: GPUDevice, isContextLost: () => boolean) => {
-    render: (frame: VideoFrameLike) => GPUTexture;
+export declare const createTextureRenderer: (device: GPUDevice, isContextLost: () => boolean, textureFormat: GPUTextureFormat, width: number, height: number, filterMode: GPUFilterMode) => {
+    render: (frame: VideoFrameLike, pass: GPUComputePassEncoder) => GPUTexture;
     release: () => void;
 };

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

@@ -1,35 +1,40 @@
 import { assert } from '@pexip/utils';
 import { RENDERING_EVENTS } from '../../constants';
-export const createTextureRenderer = (processor, device, isContextLost) => {
-    // Get a WebGPU context from the canvas and configure it
-    const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-    const context = processor.getContext('webgpu');
-    if (!context) {
-        throw Error('WebGPU not supported on the canvas.');
-    }
-    context.configure({
-        device,
-        format: presentationFormat,
-    });
-    let texture = undefined;
-    return {
-        render: (frame) => {
-            assert(!isContextLost(), RENDERING_EVENTS.ContextLost);
+import { createTextureResizeRenderer } from './resize';
+export const createTextureRenderer = (device, isContextLost, textureFormat, width, height, filterMode) => {
+    // Cache to store textures by size
+    const textureCache = new Map();
+    const resizeRenderer = createTextureResizeRenderer(device, isContextLost, width, height, textureFormat, filterMode);
+    const getOrCreateTexture = (width, height) => {
+        const key = `${width}x${height}`;
+        let texture = textureCache.get(key);
+        if (!texture) {
             texture = device.createTexture({
                 label: 'Video Frame to Texture',
                 format: 'rgba8unorm',
-                size: [frame.width, frame.height],
+                size: [width, height],
                 usage: GPUTextureUsage.TEXTURE_BINDING |
                     GPUTextureUsage.COPY_DST |
                     GPUTextureUsage.COPY_SRC |
                     GPUTextureUsage.RENDER_ATTACHMENT,
             });
+            textureCache.set(key, texture);
+        }
+        return texture;
+    };
+    return {
+        render: (frame, pass) => {
+            assert(!isContextLost(), RENDERING_EVENTS.ContextLost);
+            const texture = getOrCreateTexture(frame.width, frame.height);
             device.queue.copyExternalImageToTexture({ source: frame.frame, flipY: false }, { texture }, { width: frame.width, height: frame.height });
-            device.queue.submit([]);
-            return texture;
+            return resizeRenderer.render(pass, texture);
         },
         release: () => {
-            texture?.destroy();
+            for (const texture of textureCache.values()) {
+                texture.destroy();
+            }
+            textureCache.clear();
+            resizeRenderer.release();
         },
     };
 };

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

@@ -1,4 +1,4 @@
 export declare const createTextureToTextureRenderer: (device: GPUDevice, isContextLost: () => boolean) => {
-    render: (srcTexture: GPUTexture) => GPUTexture;
+    render: (encoder: GPUCommandEncoder, srcTexture: GPUTexture) => GPUTexture;
     release: () => void;
 };

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

@@ -1,35 +1,48 @@
 import { assert } from '@pexip/utils';
 import { RENDERING_EVENTS } from '../../constants';
 export const createTextureToTextureRenderer = (device, isContextLost) => {
-    let dstTexture = undefined;
-    return {
-        render: (srcTexture) => {
-            assert(!isContextLost(), RENDERING_EVENTS.ContextLost);
-            const encoder = device.createCommandEncoder({
-                label: 'texture to texture encoder',
-            });
-            dstTexture = device.createTexture({
+    // Cache to store destination textures by size and format
+    const textureCache = new Map();
+    const getOrCreateTexture = (width, height, depthOrArrayLayers, format) => {
+        const key = `${width}x${height}x${depthOrArrayLayers}-${format}`;
+        let texture = textureCache.get(key);
+        if (!texture) {
+            texture = device.createTexture({
                 size: {
-                    width: srcTexture.width,
-                    height: srcTexture.height,
-                    depthOrArrayLayers: srcTexture.depthOrArrayLayers,
+                    width,
+                    height,
+                    depthOrArrayLayers,
                 },
-                format: 'rgba8unorm',
+                format,
                 usage: GPUTextureUsage.RENDER_ATTACHMENT |
                     GPUTextureUsage.TEXTURE_BINDING |
                     GPUTextureUsage.COPY_DST,
             });
-            //copy src texture to new texture
+            textureCache.set(key, texture);
+        }
+        return texture;
+    };
+    return {
+        render: (encoder, srcTexture) => {
+            assert(!isContextLost(), RENDERING_EVENTS.ContextLost);
+            // Create destination texture with same format as source
+            // This preserves format (e.g., r16float, rgba8unorm) across the copy
+            // The usage flags (RENDER_ATTACHMENT | TEXTURE_BINDING | COPY_DST)
+            // are compatible with all formats used in this pipeline
+            const dstTexture = getOrCreateTexture(srcTexture.width, srcTexture.height, srcTexture.depthOrArrayLayers, srcTexture.format);
+            //copy src texture to destination texture
             encoder.copyTextureToTexture({ texture: srcTexture }, { texture: dstTexture }, {
                 width: dstTexture.width,
                 height: dstTexture.height,
                 depthOrArrayLayers: dstTexture.depthOrArrayLayers,
             });
-            device.queue.submit([encoder.finish()]);
             return dstTexture;
         },
         release: () => {
-            dstTexture?.destroy();
+            for (const texture of textureCache.values()) {
+                texture.destroy();
+            }
+            textureCache.clear();
         },
     };
 };

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

@@ -1,5 +1,7 @@
+import type { OptionalKeys } from '../../types/utils';
 export interface TextureInfo {
     texture: GPUTexture;
     width: number;
     height: number;
 }
+export type GPURenderPassColorAttachmentOptionalView = OptionalKeys<GPURenderPassColorAttachment, 'view'>;

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

@@ -1,7 +1,27 @@
+export declare const hasR16FloatTextureStorage: (adapter: GPUAdapter) => boolean;
+export declare const hasF16: (adapter: GPUAdapter) => boolean;
+export declare const getGPUDevice: (adapter: GPUAdapter) => Promise<GPUDevice>;
 /**
- * Check if the 'bgra8unorm-storage' feature exists
+ * Check if provided format is supported
  *
- * https://webgpufundamentals.org/webgpu/lessons/webgpu-storage-textures.html#canvas-as-a-storage-texture
+ * @param device - GPUDevice to check the format support on
+ * @param format - GPUTextureFormat to check
+ * @param usage - Optional GPUTextureUsage flags to check for the format support
+ * @default STORAGE_BINDING | TEXTURE_BINDING | COPY_DST | RENDER_ATTACHMENT
  */
-export declare const hasBGRA8unormStorage: (adapter: GPUAdapter) => boolean;
-export declare const getGPUDevice: (adapter: GPUAdapter) => Promise<GPUDevice>;
+export declare function supportsTextureFormat(device: GPUDevice, format: GPUTextureFormat, usage?: number): boolean;
+interface WorkgroupInfo {
+    workgroupSizeX: number;
+    workgroupSizeY: number;
+}
+/**
+ * Replace the WGSL codes with predefined patterns to sync the workgroup size
+ * and tile size between the shader code and the setup code.
+ */
+export declare const syncWorkgroupSizeWithShader: (shaderCode: string, { workgroupSizeX, workgroupSizeY }: WorkgroupInfo) => string;
+/**
+ * Replace the WGSL texture_storage_2d format with another format
+ */
+export declare const updateTextureStorageFormat: (shaderCode: string, format: GPUTextureFormat) => string;
+export declare const enableF16InShader: (shaderCode: string) => string;
+export {};

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

@@ -1,14 +1,63 @@
-/**
- * Check if the 'bgra8unorm-storage' feature exists
- *
- * https://webgpufundamentals.org/webgpu/lessons/webgpu-storage-textures.html#canvas-as-a-storage-texture
- */
-export const hasBGRA8unormStorage = (adapter) => adapter.features.has('bgra8unorm-storage');
+export const hasR16FloatTextureStorage = (adapter) => adapter.features.has('texture-formats-tier1');
+export const hasF16 = (adapter) => adapter.features.has('shader-f16');
 export const getGPUDevice = async (adapter) => {
-    const device = await adapter?.requestDevice({
-        requiredFeatures: hasBGRA8unormStorage(adapter)
-            ? ['bgra8unorm-storage']
-            : [],
-    });
+    const requiredFeatures = [];
+    if (hasR16FloatTextureStorage(adapter)) {
+        // https://gpuweb.github.io/gpuweb/#plain-color-formats
+        // Use `r16float` for single channel texture, which is more efficient than rgba8unorm
+        // It requires texture-formats-tier1 feature for storage
+        requiredFeatures.push('texture-formats-tier1');
+    }
+    if (hasF16(adapter)) {
+        // Use f16 type to reduce bandwidth and storage for performance critical
+        // textures and computations, such as the smoothing mask
+        // https://developer.chrome.com/blog/new-in-webgpu-120
+        requiredFeatures.push('shader-f16');
+    }
+    const device = await adapter?.requestDevice({ requiredFeatures });
     return device;
 };
+/**
+ * Check if provided format is supported
+ *
+ * @param device - GPUDevice to check the format support on
+ * @param format - GPUTextureFormat to check
+ * @param usage - Optional GPUTextureUsage flags to check for the format support
+ * @default STORAGE_BINDING | TEXTURE_BINDING | COPY_DST | RENDER_ATTACHMENT
+ */
+export function supportsTextureFormat(device, format, usage = GPUTextureUsage.STORAGE_BINDING |
+    GPUTextureUsage.TEXTURE_BINDING |
+    GPUTextureUsage.COPY_DST |
+    GPUTextureUsage.RENDER_ATTACHMENT) {
+    try {
+        // Try to create a tiny texture with the desired format and usage
+        const texture = device.createTexture({
+            size: [4, 4, 1],
+            format,
+            usage,
+        });
+        // Optionally, you could also try to create a compute/render pipeline
+        // using this format for storage textures.
+        texture.destroy();
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+const WorkgroupSizeXPattern = /const WORKGROUP_SIZE_X(\s*)=(\s*)\d+u*;/;
+const WorkgroupSizeYPattern = /const WORKGROUP_SIZE_Y(\s*)=(\s*)\d+u*;/;
+/**
+ * Replace the WGSL codes with predefined patterns to sync the workgroup size
+ * and tile size between the shader code and the setup code.
+ */
+export const syncWorkgroupSizeWithShader = (shaderCode, { workgroupSizeX, workgroupSizeY }) => shaderCode
+    .replace(WorkgroupSizeXPattern, `const WORKGROUP_SIZE_X$1=$2${workgroupSizeX}u;`)
+    .replace(WorkgroupSizeYPattern, `const WORKGROUP_SIZE_Y$1=$2${workgroupSizeY}u;`);
+const TextureStoragePattern = /texture_storage_2d<\w+,(\s*)write>/;
+/**
+ * Replace the WGSL texture_storage_2d format with another format
+ */
+export const updateTextureStorageFormat = (shaderCode, format) => shaderCode.replace(TextureStoragePattern, `texture_storage_2d<${format},$1write>`);
+const FloatPattern = /alias float(\s*)=(\s*)f32;/;
+export const enableF16InShader = (shaderCode) => shaderCode.replace(FloatPattern, 'enable f16;alias float$1=$2f16;');

package/dist/common/constants.d.ts

@@ -1,10 +1,24 @@
 type ExtractValueTypes<T> = T extends object ? T[keyof T] : never;
-export declare const PROCESSING_WIDTH = 768;
-export declare const PROCESSING_HEIGHT = 432;
-export declare const FOREGROUND_THRESHOLD = 0.5;
 export declare const BACKGROUND_BLUR_AMOUNT = 3;
-export declare const EDGE_BLUR_AMOUNT = 3;
-export declare const MASK_COMBINE_RATIO = 0.5;
+export declare const BACKGROUND_THRESHOLD = 0.35;
+export declare const DOWN_SAMPLE_FACTOR = 2;
+export declare const EDGE_BLUR_AMOUNT = 4;
+export declare const EXCLUDE_BYSTANDERS = false;
+export declare const FOREGROUND_THRESHOLD = 0.85;
+export declare const LIGHT_WRAP_BLUR_AMOUNT = 1;
+export declare const LIGHT_WRAP_EDGE_BAND = 0.25;
+export declare const LIGHT_WRAP_INTENSITY = 0.8;
+export declare const LIGHT_WRAP_TIGHTNESS = 1;
+export declare const MASK_COMBINE_RATIO = 0.8;
+export declare const MORPH_DILATE_RADIUS_PX = 6;
+export declare const MORPH_ERODE_RADIUS_PX = 5;
+export declare const MORPH_PASS = 4;
+export declare const PERSON_CENTER: [number, number];
+export declare const PROCESSING_HEIGHT = 432;
+export declare const PROCESSING_WIDTH = 768;
+export declare const SIGMA_RANGE: [number, number];
+export declare const SIGMA_SPACE = 5;
+export declare const STRONG_EDGE_BLUR_AMOUNT = 2;
 /**
  * Process status
  */