@aelionsdk/renderer-worker 0.1.0-beta.1

package/dist/webgl2-worker.js

@@ -0,0 +1,1100 @@
+/// <reference lib="webworker" />
+class RendererBackendError extends Error {
+    code;
+    constructor(code, message) {
+        super(message);
+        this.code = code;
+        this.name = 'RendererBackendError';
+    }
+}
+function emptyResources(inputFrames) {
+    return {
+        activeRequests: 0,
+        cancelledRequests: 0,
+        webgpuDevices: 0,
+        webgpuPipelines: 0,
+        webgpuBuffers: 0,
+        webgpuTextures: 0,
+        webgl2Contexts: 0,
+        webgl2Programs: 0,
+        webgl2Buffers: 0,
+        webgl2Textures: 0,
+        inputFrames,
+    };
+}
+function backendError(error, fallbackCode) {
+    return error instanceof RendererBackendError
+        ? error
+        : new RendererBackendError(fallbackCode, error instanceof Error ? error.message : 'Unknown renderer backend error');
+}
+const GPU_BUFFER_USAGE = {
+    COPY_DST: 0x0008,
+    UNIFORM: 0x0040,
+};
+const GPU_TEXTURE_USAGE = {
+    COPY_DST: 0x0002,
+    COPY_SRC: 0x0001,
+    RENDER_ATTACHMENT: 0x0010,
+    TEXTURE_BINDING: 0x0004,
+};
+let persistentGpuDevice;
+let persistentGpuDeviceTask;
+const persistentGpuPipelines = new Map();
+const persistentGpuTextures = new Map();
+const MAX_POOLED_GPU_TEXTURE_BYTES = 256 * 1_024 * 1_024;
+let pooledGpuTextureBytes = 0;
+class WebGpuCanvasRuntime {
+    device;
+    width;
+    height;
+    canvas;
+    context;
+    constructor(device, width, height) {
+        this.device = device;
+        this.width = width;
+        this.height = height;
+        this.canvas = new OffscreenCanvas(width, height);
+        const context = this.canvas.getContext('webgpu');
+        if (context === null)
+            throw new Error('Worker WebGPU canvas context is unavailable');
+        context.configure({
+            device,
+            format: 'rgba8unorm',
+            usage: GPU_TEXTURE_USAGE.RENDER_ATTACHMENT | GPU_TEXTURE_USAGE.COPY_DST,
+            alphaMode: 'premultiplied',
+        });
+        this.context = context;
+    }
+    dispose() {
+        this.context.unconfigure?.();
+    }
+}
+const MAX_WEBGPU_CANVAS_RUNTIMES = 2;
+const webGpuCanvasRuntimes = new Map();
+let webGpuCanvasRuntimeClock = 0;
+const webGpuCanvasAccess = new Map();
+function webGpuCanvasRuntime(device, width, height) {
+    const key = `${width.toString()}x${height.toString()}`;
+    let runtime = webGpuCanvasRuntimes.get(key);
+    if (runtime !== undefined && runtime.device !== device) {
+        runtime.dispose();
+        webGpuCanvasRuntimes.delete(key);
+        webGpuCanvasAccess.delete(key);
+        runtime = undefined;
+    }
+    if (runtime === undefined) {
+        runtime = new WebGpuCanvasRuntime(device, width, height);
+        webGpuCanvasRuntimes.set(key, runtime);
+    }
+    webGpuCanvasAccess.set(key, ++webGpuCanvasRuntimeClock);
+    while (webGpuCanvasRuntimes.size > MAX_WEBGPU_CANVAS_RUNTIMES) {
+        const oldest = [...webGpuCanvasAccess.entries()].sort((left, right) => left[1] - right[1])[0];
+        if (oldest === undefined)
+            break;
+        webGpuCanvasRuntimes.get(oldest[0])?.dispose();
+        webGpuCanvasRuntimes.delete(oldest[0]);
+        webGpuCanvasAccess.delete(oldest[0]);
+    }
+    return runtime;
+}
+function clearWebGpuCanvasRuntimes() {
+    webGpuCanvasRuntimes.forEach(runtime => runtime.dispose());
+    webGpuCanvasRuntimes.clear();
+    webGpuCanvasAccess.clear();
+}
+function gpuTextureKey(width, height, usage) {
+    return `${width.toString()}x${height.toString()}:rgba8unorm:${usage.toString()}`;
+}
+function acquireGpuTexture(device, width, height, usage) {
+    const key = gpuTextureKey(width, height, usage);
+    const bytes = width * height * 4;
+    const bucket = persistentGpuTextures.get(key);
+    const texture = bucket?.pop();
+    if (texture !== undefined) {
+        pooledGpuTextureBytes -= bytes;
+        if (bucket?.length === 0)
+            persistentGpuTextures.delete(key);
+        return { texture, key, bytes };
+    }
+    return {
+        texture: device.createTexture({
+            size: { width, height },
+            format: 'rgba8unorm',
+            usage,
+        }),
+        key,
+        bytes,
+    };
+}
+function releaseGpuTexture(acquired) {
+    if (pooledGpuTextureBytes + acquired.bytes > MAX_POOLED_GPU_TEXTURE_BYTES) {
+        acquired.texture.destroy();
+        return;
+    }
+    const bucket = persistentGpuTextures.get(acquired.key) ?? [];
+    bucket.push(acquired.texture);
+    persistentGpuTextures.set(acquired.key, bucket);
+    pooledGpuTextureBytes += acquired.bytes;
+}
+function clearGpuTexturePool() {
+    persistentGpuTextures.forEach(bucket => bucket.forEach(texture => texture.destroy()));
+    persistentGpuTextures.clear();
+    pooledGpuTextureBytes = 0;
+}
+function shaderIdentifier(value) {
+    return value.replaceAll(/[^a-zA-Z0-9_]/gu, '_');
+}
+function shaderWithExternalInputs(shader, ports) {
+    let output = shader;
+    for (const port of ports) {
+        const name = `input_${shaderIdentifier(port)}`;
+        output = output
+            .replace(`var ${name}: texture_2d<f32>;`, `var ${name}: texture_external;`)
+            .replaceAll(`textureSample(${name}, source_sampler,`, `textureSampleBaseClampToEdge(${name}, source_sampler,`);
+    }
+    return output;
+}
+async function gpuDevice() {
+    if (persistentGpuDevice !== undefined)
+        return persistentGpuDevice;
+    persistentGpuDeviceTask ??= (async () => {
+        const gpu = navigator.gpu;
+        if (gpu === undefined)
+            throw new Error('WebGPU is unavailable');
+        const adapter = await gpu.requestAdapter();
+        if (adapter === null)
+            throw new Error('WebGPU adapter is unavailable');
+        const device = await adapter.requestDevice();
+        persistentGpuDevice = device;
+        void device.lost.then(() => {
+            if (persistentGpuDevice === device) {
+                persistentGpuDevice = undefined;
+                persistentGpuDeviceTask = undefined;
+                persistentGpuPipelines.clear();
+                clearWebGpuCanvasRuntimes();
+                clearGpuTexturePool();
+            }
+        });
+        return device;
+    })().catch((error) => {
+        persistentGpuDeviceTask = undefined;
+        throw error;
+    });
+    return persistentGpuDeviceTask;
+}
+function disposeGpuRuntime() {
+    clearWebGpuCanvasRuntimes();
+    clearGpuTexturePool();
+    persistentGpuDevice?.destroy();
+    persistentGpuDevice = undefined;
+    persistentGpuDeviceTask = undefined;
+    persistentGpuPipelines.clear();
+}
+async function composeWebGpu(request, resources, timing) {
+    const webgpu = request.program.webgpu;
+    if (webgpu === undefined)
+        throw new Error('Material has no WebGPU program');
+    const frames = webgpu.inputPorts.map(port => {
+        const frame = request.inputs[port];
+        if (frame === undefined)
+            throw new Error(`WebGPU Material input ${port} is missing`);
+        return frame;
+    });
+    const device = await gpuDevice();
+    resources.webgpuDevices += 1;
+    device.pushErrorScope('validation');
+    let uniformBuffer;
+    try {
+        const presentation = webGpuCanvasRuntime(device, request.width, request.height);
+        const outputTexture = presentation.context.getCurrentTexture();
+        const inputTextures = frames.map(frame => device.importExternalTexture({ source: frame }));
+        resources.webgpuTextures += inputTextures.length;
+        if (request.debugSimulateLoss === 'webgpu-device') {
+            disposeGpuRuntime();
+            throw new RendererBackendError('RENDERER_WEBGPU_DEVICE_LOST', 'WebGPU device was lost during composition');
+        }
+        const uniformData = new Float32Array(Math.max(1, webgpu.uniforms.length) * 4);
+        webgpu.uniforms.forEach((uniform, index) => {
+            const value = uniform.source.kind === 'parameter'
+                ? request.parameters[uniform.source.id]
+                : request.systems[uniform.source.id];
+            if (typeof value !== 'number' || !Number.isFinite(value)) {
+                throw new TypeError(`WebGPU Material uniform ${uniform.source.id} must be finite`);
+            }
+            uniformData[index * 4] = value;
+        });
+        uniformBuffer = device.createBuffer({
+            size: uniformData.byteLength,
+            usage: GPU_BUFFER_USAGE.UNIFORM | GPU_BUFFER_USAGE.COPY_DST,
+        });
+        resources.webgpuBuffers += 1;
+        device.queue.writeBuffer(uniformBuffer, 0, uniformData);
+        const shader = shaderWithExternalInputs(webgpu.shader, webgpu.inputPorts);
+        const pipelineKey = `${request.program.graphHash}:external:${webgpu.inputPorts.join(',')}:${shader}`;
+        let pipeline = persistentGpuPipelines.get(pipelineKey);
+        if (pipeline === undefined) {
+            const module = device.createShaderModule({ code: shader });
+            pipeline = device.createRenderPipeline({
+                layout: 'auto',
+                vertex: { module, entryPoint: 'vs' },
+                fragment: { module, entryPoint: 'fs', targets: [{ format: 'rgba8unorm' }] },
+                primitive: { topology: 'triangle-list' },
+            });
+            persistentGpuPipelines.set(pipelineKey, pipeline);
+        }
+        resources.webgpuPipelines += 1;
+        const bindGroup = device.createBindGroup({
+            layout: pipeline.getBindGroupLayout(0),
+            entries: [
+                ...(inputTextures.length === 0
+                    ? []
+                    : [
+                        {
+                            binding: 0,
+                            resource: device.createSampler({ magFilter: 'linear', minFilter: 'linear' }),
+                        },
+                    ]),
+                ...inputTextures.map((texture, index) => ({
+                    binding: index + 1,
+                    resource: texture,
+                })),
+                { binding: inputTextures.length + 1, resource: { buffer: uniformBuffer } },
+            ],
+        });
+        const encoder = device.createCommandEncoder();
+        const pass = encoder.beginRenderPass({
+            colorAttachments: [
+                {
+                    view: outputTexture.createView(),
+                    clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                    loadOp: 'clear',
+                    storeOp: 'store',
+                },
+            ],
+        });
+        pass.setPipeline(pipeline);
+        pass.setBindGroup(0, bindGroup);
+        pass.draw(3);
+        pass.end();
+        const gpuStartedAt = performance.now();
+        device.queue.submit([encoder.finish()]);
+        const validationError = await device.popErrorScope();
+        timing.gpuCompletionUs += Math.round((performance.now() - gpuStartedAt) * 1_000);
+        if (validationError !== null) {
+            throw new Error(`WebGPU validation failed: ${validationError.message}`);
+        }
+        return presentation.canvas.transferToImageBitmap();
+    }
+    finally {
+        uniformBuffer?.destroy();
+        resources.webgpuDevices = 0;
+        resources.webgpuPipelines = 0;
+        resources.webgpuBuffers = 0;
+        resources.webgpuTextures = 0;
+    }
+}
+function frameGraphWebGpuInput(device, node, port, externalFrames, importedExternalTextures, nodeTextures) {
+    const reference = node.inputs[port];
+    if (reference === undefined) {
+        throw new RangeError(`Frame graph node ${node.id} is missing input ${port}`);
+    }
+    if (reference.kind === 'external') {
+        const frame = externalFrames.get(reference.id);
+        if (frame === undefined) {
+            throw new RangeError(`Frame graph node ${node.id} references unknown external input ${reference.id}`);
+        }
+        let texture = importedExternalTextures.get(reference.id);
+        if (texture === undefined) {
+            texture = device.importExternalTexture({ source: frame });
+            importedExternalTextures.set(reference.id, texture);
+        }
+        return { external: true, resource: texture };
+    }
+    const texture = nodeTextures.get(reference.id);
+    if (texture === undefined) {
+        throw new RangeError(`Frame graph node ${node.id} references unknown prior node ${reference.id}`);
+    }
+    return { external: false, resource: texture.texture.createView() };
+}
+async function composeWebGpuFrameGraph(request, resources, timing) {
+    if (!Number.isInteger(request.width) ||
+        !Number.isInteger(request.height) ||
+        request.width <= 0 ||
+        request.height <= 0) {
+        throw new RangeError('Frame graph dimensions must be positive integers');
+    }
+    if (request.nodes.length === 0)
+        throw new RangeError('Frame graph has no nodes');
+    const device = await gpuDevice();
+    resources.webgpuDevices = 1;
+    const textureUsage = GPU_TEXTURE_USAGE.TEXTURE_BINDING |
+        GPU_TEXTURE_USAGE.COPY_DST |
+        GPU_TEXTURE_USAGE.COPY_SRC |
+        GPU_TEXTURE_USAGE.RENDER_ATTACHMENT;
+    const allocatedTextures = [];
+    const uniformBuffers = [];
+    const externalFrames = new Map(Object.entries(request.inputs));
+    const importedExternalTextures = new Map();
+    const nodeTextures = new Map();
+    let errorScopeOpen = false;
+    try {
+        device.pushErrorScope('validation');
+        errorScopeOpen = true;
+        const encoder = device.createCommandEncoder();
+        for (const node of request.nodes) {
+            if (cancelledRequestIds.has(request.id)) {
+                throw new DOMException('Renderer request cancelled', 'AbortError');
+            }
+            if (nodeTextures.has(node.id)) {
+                throw new RangeError(`Frame graph node id ${node.id} is duplicated`);
+            }
+            const webgpu = node.program.webgpu;
+            if (webgpu === undefined) {
+                throw new RendererBackendError('RENDERER_WEBGPU_GRAPH_NODE_UNAVAILABLE', `Frame graph node ${node.id} (${node.program.graphHash}) has no WebGPU program`);
+            }
+            const inputs = webgpu.inputPorts.map(port => frameGraphWebGpuInput(device, node, port, externalFrames, importedExternalTextures, nodeTextures));
+            const output = acquireGpuTexture(device, request.width, request.height, textureUsage);
+            allocatedTextures.push(output);
+            nodeTextures.set(node.id, output);
+            const uniformData = new Float32Array(Math.max(1, webgpu.uniforms.length) * 4);
+            webgpu.uniforms.forEach((uniform, index) => {
+                uniformData[index * 4] = materialUniformValue(uniform, node.parameters, node.systems);
+            });
+            const uniformBuffer = device.createBuffer({
+                size: uniformData.byteLength,
+                usage: GPU_BUFFER_USAGE.UNIFORM | GPU_BUFFER_USAGE.COPY_DST,
+            });
+            uniformBuffers.push(uniformBuffer);
+            device.queue.writeBuffer(uniformBuffer, 0, uniformData);
+            const externalPorts = webgpu.inputPorts.filter((_port, index) => inputs[index]?.external === true);
+            const shader = shaderWithExternalInputs(webgpu.shader, externalPorts);
+            const pipelineKey = `${node.program.graphHash}:external:${externalPorts.join(',')}:${shader}`;
+            let pipeline = persistentGpuPipelines.get(pipelineKey);
+            if (pipeline === undefined) {
+                const module = device.createShaderModule({ code: shader });
+                pipeline = device.createRenderPipeline({
+                    layout: 'auto',
+                    vertex: { module, entryPoint: 'vs' },
+                    fragment: { module, entryPoint: 'fs', targets: [{ format: 'rgba8unorm' }] },
+                    primitive: { topology: 'triangle-list' },
+                });
+                persistentGpuPipelines.set(pipelineKey, pipeline);
+            }
+            const bindGroup = device.createBindGroup({
+                layout: pipeline.getBindGroupLayout(0),
+                entries: [
+                    ...(inputs.length === 0
+                        ? []
+                        : [
+                            {
+                                binding: 0,
+                                resource: device.createSampler({
+                                    magFilter: 'linear',
+                                    minFilter: 'linear',
+                                }),
+                            },
+                        ]),
+                    ...inputs.map((texture, index) => ({
+                        binding: index + 1,
+                        resource: texture.resource,
+                    })),
+                    { binding: inputs.length + 1, resource: { buffer: uniformBuffer } },
+                ],
+            });
+            const pass = encoder.beginRenderPass({
+                colorAttachments: [
+                    {
+                        view: output.texture.createView(),
+                        clearValue: { r: 0, g: 0, b: 0, a: 0 },
+                        loadOp: 'clear',
+                        storeOp: 'store',
+                    },
+                ],
+            });
+            pass.setPipeline(pipeline);
+            pass.setBindGroup(0, bindGroup);
+            pass.draw(3);
+            pass.end();
+        }
+        const output = nodeTextures.get(request.outputNodeId);
+        if (output === undefined) {
+            throw new RangeError(`Frame graph output node ${request.outputNodeId} is missing`);
+        }
+        const presentation = webGpuCanvasRuntime(device, request.width, request.height);
+        const presentationTexture = presentation.context.getCurrentTexture();
+        encoder.copyTextureToTexture({ texture: output.texture }, { texture: presentationTexture }, { width: request.width, height: request.height });
+        resources.webgpuTextures =
+            allocatedTextures.length + importedExternalTextures.size;
+        resources.webgpuBuffers = uniformBuffers.length;
+        resources.webgpuPipelines = request.nodes.length;
+        const gpuStartedAt = performance.now();
+        device.queue.submit([encoder.finish()]);
+        const validationError = await device.popErrorScope();
+        timing.gpuCompletionUs += Math.round((performance.now() - gpuStartedAt) * 1_000);
+        errorScopeOpen = false;
+        if (validationError !== null) {
+            throw new RendererBackendError('RENDERER_WEBGPU_VALIDATION_FAILED', `WebGPU validation failed: ${validationError.message}`);
+        }
+        return presentation.canvas.transferToImageBitmap();
+    }
+    finally {
+        if (errorScopeOpen)
+            void device.popErrorScope();
+        uniformBuffers.forEach(buffer => buffer.destroy());
+        allocatedTextures.forEach(texture => {
+            if (persistentGpuDevice === device)
+                releaseGpuTexture(texture);
+            else
+                texture.texture.destroy();
+        });
+        resources.webgpuDevices = 0;
+        resources.webgpuPipelines = 0;
+        resources.webgpuBuffers = 0;
+        resources.webgpuTextures = 0;
+    }
+}
+const vertexShaderSource = `#version 300 es
+in vec2 a_position;
+in vec2 a_uv;
+out vec2 v_uv;
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+  v_uv = a_uv;
+}`;
+class WebGl2Runtime {
+    width;
+    height;
+    canvas;
+    gl;
+    #programs = new Map();
+    #textures = [];
+    #positionBuffer;
+    #uvBuffer;
+    lastAccess = 0;
+    constructor(width, height) {
+        this.width = width;
+        this.height = height;
+        this.canvas = new OffscreenCanvas(width, height);
+        const gl = this.canvas.getContext('webgl2', {
+            alpha: true,
+            antialias: false,
+            depth: false,
+            desynchronized: true,
+            premultipliedAlpha: true,
+            preserveDrawingBuffer: false,
+            stencil: false,
+        });
+        if (gl === null)
+            throw new Error('Worker WebGL2 context is unavailable');
+        this.gl = gl;
+        this.#positionBuffer = this.#createBuffer([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
+        this.#uvBuffer = this.#createBuffer([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]);
+    }
+    program(fragmentShader) {
+        const cached = this.#programs.get(fragmentShader);
+        if (cached !== undefined)
+            return cached;
+        const program = createProgram(this.gl, fragmentShader);
+        this.#programs.set(fragmentShader, program);
+        return program;
+    }
+    bindAttributes(program) {
+        this.#bindAttribute(program, 'a_position', this.#positionBuffer);
+        this.#bindAttribute(program, 'a_uv', this.#uvBuffer);
+    }
+    uploadTexture(index, source) {
+        const gl = this.gl;
+        let texture = this.#textures[index];
+        if (texture === undefined) {
+            texture = gl.createTexture();
+            this.#textures[index] = texture;
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        }
+        else {
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+        }
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+        gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+        return texture;
+    }
+    snapshot() {
+        return { programs: this.#programs.size, textures: this.#textures.length, buffers: 2 };
+    }
+    dispose() {
+        const gl = this.gl;
+        this.#programs.forEach(program => gl.deleteProgram(program));
+        this.#programs.clear();
+        this.#textures.forEach(texture => gl.deleteTexture(texture));
+        this.#textures.length = 0;
+        gl.deleteBuffer(this.#positionBuffer);
+        gl.deleteBuffer(this.#uvBuffer);
+        gl.getExtension('WEBGL_lose_context')?.loseContext();
+    }
+    #createBuffer(values) {
+        const buffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(values), this.gl.STATIC_DRAW);
+        return buffer;
+    }
+    #bindAttribute(program, name, buffer) {
+        const location = this.gl.getAttribLocation(program, name);
+        if (location < 0)
+            throw new Error(`Missing WebGL attribute ${name}`);
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+        this.gl.enableVertexAttribArray(location);
+        this.gl.vertexAttribPointer(location, 2, this.gl.FLOAT, false, 0, 0);
+    }
+}
+const MAX_WEBGL2_RUNTIMES = 2;
+const webGl2Runtimes = new Map();
+let webGl2RuntimeClock = 0;
+function webGl2Runtime(width, height) {
+    const key = `${width.toString()}x${height.toString()}`;
+    let runtime = webGl2Runtimes.get(key);
+    if (runtime?.gl.isContextLost() === true) {
+        runtime.dispose();
+        webGl2Runtimes.delete(key);
+        runtime = undefined;
+    }
+    if (runtime === undefined) {
+        runtime = new WebGl2Runtime(width, height);
+        webGl2Runtimes.set(key, runtime);
+    }
+    runtime.lastAccess = ++webGl2RuntimeClock;
+    while (webGl2Runtimes.size > MAX_WEBGL2_RUNTIMES) {
+        const oldest = [...webGl2Runtimes.entries()].sort((left, right) => left[1].lastAccess - right[1].lastAccess)[0];
+        if (oldest === undefined)
+            break;
+        oldest[1].dispose();
+        webGl2Runtimes.delete(oldest[0]);
+    }
+    return runtime;
+}
+function disposeWebGl2Runtimes() {
+    webGl2Runtimes.forEach(runtime => runtime.dispose());
+    webGl2Runtimes.clear();
+}
+function compileShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (shader === null)
+        throw new Error('Unable to allocate WebGL shader');
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const log = gl.getShaderInfoLog(shader) ?? 'unknown shader error';
+        gl.deleteShader(shader);
+        throw new Error(log);
+    }
+    return shader;
+}
+function createProgram(gl, fragmentShaderSource) {
+    const vertex = compileShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+    const fragment = compileShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
+    const program = gl.createProgram();
+    gl.attachShader(program, vertex);
+    gl.attachShader(program, fragment);
+    gl.linkProgram(program);
+    gl.deleteShader(vertex);
+    gl.deleteShader(fragment);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        const log = gl.getProgramInfoLog(program) ?? 'unknown program link error';
+        gl.deleteProgram(program);
+        throw new Error(log);
+    }
+    return program;
+}
+function uniformValue(uniform, request) {
+    return materialUniformValue(uniform, request.parameters, request.systems);
+}
+function materialUniformValue(uniform, parameters, systems) {
+    const value = uniform.source.kind === 'parameter'
+        ? parameters[uniform.source.id]
+        : systems[uniform.source.id];
+    if (typeof value !== 'number' || !Number.isFinite(value)) {
+        throw new TypeError(`Material uniform ${uniform.source.id} must be a finite number`);
+    }
+    return value;
+}
+function renderWebGl2Pass(request, fragmentShader, passInputs, uniforms, timing) {
+    const runtime = webGl2Runtime(request.width, request.height);
+    const gl = runtime.gl;
+    const program = runtime.program(fragmentShader);
+    gl.useProgram(program);
+    runtime.bindAttributes(program);
+    passInputs.forEach((input, index) => {
+        gl.activeTexture(gl.TEXTURE0 + index);
+        runtime.uploadTexture(index, input.source);
+        gl.uniform1i(gl.getUniformLocation(program, `u_input_${input.sampler}`), index);
+    });
+    for (const uniform of uniforms) {
+        gl.uniform1f(gl.getUniformLocation(program, uniform.name), uniformValue(uniform, request));
+    }
+    gl.viewport(0, 0, request.width, request.height);
+    const gpuStartedAt = performance.now();
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+    gl.finish();
+    timing.gpuCompletionUs += Math.round((performance.now() - gpuStartedAt) * 1_000);
+    if (gl.isContextLost()) {
+        webGl2Runtimes.delete(`${request.width.toString()}x${request.height.toString()}`);
+        runtime.dispose();
+        throw new RendererBackendError('RENDERER_WEBGL_CONTEXT_LOST', 'WebGL2 context was lost during composition');
+    }
+    const bitmap = runtime.canvas.transferToImageBitmap();
+    // Chromium may evict a context between GPU completion and bitmap transfer
+    // when several tabs/workers contend for the page context budget. Never return
+    // the resulting transparent/stale bitmap as a successful composition.
+    if (gl.isContextLost()) {
+        bitmap.close();
+        webGl2Runtimes.delete(`${request.width.toString()}x${request.height.toString()}`);
+        runtime.dispose();
+        throw new RendererBackendError('RENDERER_WEBGL_CONTEXT_LOST', 'WebGL2 context was lost while transferring the composed frame');
+    }
+    return bitmap;
+}
+function composeWebGl2MultiPass(request, resources, timing) {
+    const passes = request.program.passes;
+    if (passes === undefined || passes.length === 0) {
+        throw new TypeError('Multi-pass WebGL2 program has no passes');
+    }
+    const outputs = new Map();
+    resources.webgl2Contexts = passes.length;
+    resources.webgl2Programs = passes.length;
+    resources.webgl2Buffers = passes.length * 2;
+    try {
+        for (const pass of passes) {
+            const inputs = pass.inputs.map(input => {
+                const source = input.source.kind === 'external'
+                    ? request.inputs[input.source.port]
+                    : outputs.get(input.source.passId);
+                if (source === undefined) {
+                    throw new RangeError(`Material pass ${pass.id} is missing input ${input.sampler}`);
+                }
+                return { sampler: input.sampler, source };
+            });
+            resources.webgl2Textures = inputs.length;
+            const bitmap = renderWebGl2Pass(request, pass.fragmentShader, inputs, pass.uniforms, timing);
+            outputs.set(pass.id, bitmap);
+        }
+        const last = outputs.get(passes.at(-1)?.id ?? '');
+        if (last === undefined)
+            throw new Error('Multi-pass Material produced no output');
+        outputs.delete(passes.at(-1)?.id ?? '');
+        return last;
+    }
+    finally {
+        outputs.forEach(bitmap => bitmap.close());
+        resources.webgl2Contexts = 0;
+        resources.webgl2Programs = 0;
+        resources.webgl2Buffers = 0;
+        resources.webgl2Textures = 0;
+    }
+}
+function composeWebGl2(request, resources, timing) {
+    if (!Number.isInteger(request.width) ||
+        !Number.isInteger(request.height) ||
+        request.width <= 0 ||
+        request.height <= 0) {
+        throw new RangeError('Composition dimensions must be positive integers');
+    }
+    for (const port of request.program.inputPorts) {
+        if (request.inputs[port] === undefined) {
+            throw new RangeError(`Material input ${port} is missing`);
+        }
+    }
+    if (request.program.passes !== undefined) {
+        return composeWebGl2MultiPass(request, resources, timing);
+    }
+    const inputs = request.program.inputPorts.map(port => {
+        const source = request.inputs[port];
+        if (source === undefined)
+            throw new RangeError(`Material input ${port} is missing`);
+        return { sampler: port.replaceAll(/[^a-zA-Z0-9_]/gu, '_'), source };
+    });
+    if (request.debugSimulateLoss === 'webgl2-context') {
+        const runtime = webGl2Runtime(request.width, request.height);
+        runtime.gl.getExtension('WEBGL_lose_context')?.loseContext();
+        webGl2Runtimes.delete(`${request.width.toString()}x${request.height.toString()}`);
+        runtime.dispose();
+        throw new RendererBackendError('RENDERER_WEBGL_CONTEXT_LOST', 'WebGL2 context was lost during composition');
+    }
+    return renderWebGl2Pass(request, request.program.fragmentShader, inputs, request.program.uniforms, timing);
+}
+async function composeWebGl2WithAdmissionRetry(request, resources, timing) {
+    const maxAttempts = 80;
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+        try {
+            return composeWebGl2(request, resources, timing);
+        }
+        catch (error) {
+            const unavailable = error instanceof Error && error.message === 'Worker WebGL2 context is unavailable';
+            if (!unavailable)
+                throw error;
+            if (cancelledRequestIds.has(request.id)) {
+                throw new DOMException('Renderer request cancelled', 'AbortError');
+            }
+            if (attempt === maxAttempts - 1) {
+                throw new RendererBackendError('RENDERER_WEBGL_ADMISSION_TIMEOUT', 'Timed out waiting for a page WebGL2 context budget');
+            }
+            await new Promise(resolve => globalThis.setTimeout(resolve, 50));
+        }
+    }
+    throw new RendererBackendError('RENDERER_WEBGL_ADMISSION_TIMEOUT', 'Timed out waiting for a page WebGL2 context budget');
+}
+const FRAME_GRAPH_COPY_SHADER = `#version 300 es
+precision highp float;
+uniform sampler2D u_input_source;
+in vec2 v_uv;
+out vec4 out_color;
+void main() {
+  out_color = texture(u_input_source, v_uv);
+}`;
+function createFrameGraphTexture(gl, width, height, source) {
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    if (source === undefined) {
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        const framebuffer = gl.createFramebuffer();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
+            gl.deleteFramebuffer(framebuffer);
+            gl.deleteTexture(texture);
+            throw new RendererBackendError('RENDERER_WEBGL_FRAMEBUFFER_INCOMPLETE', 'Unable to allocate a complete WebGL2 frame graph target');
+        }
+        return { texture, framebuffer };
+    }
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);
+    return { texture };
+}
+function bindFrameGraphInputs(runtime, program, inputs) {
+    const gl = runtime.gl;
+    inputs.forEach((input, index) => {
+        if (index >= gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS)) {
+            throw new RangeError('Frame graph node exceeds the WebGL2 texture unit limit');
+        }
+        gl.activeTexture(gl.TEXTURE0 + index);
+        gl.bindTexture(gl.TEXTURE_2D, input.texture);
+        gl.uniform1i(gl.getUniformLocation(program, `u_input_${input.sampler}`), index);
+    });
+}
+function drawFrameGraphPass(runtime, fragmentShader, inputs, uniforms, parameters, systems, target) {
+    const gl = runtime.gl;
+    const program = runtime.program(fragmentShader);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, target);
+    gl.useProgram(program);
+    runtime.bindAttributes(program);
+    bindFrameGraphInputs(runtime, program, inputs);
+    for (const uniform of uniforms) {
+        gl.uniform1f(gl.getUniformLocation(program, uniform.name), materialUniformValue(uniform, parameters, systems));
+    }
+    gl.viewport(0, 0, runtime.width, runtime.height);
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+function frameGraphInputTexture(request, node, port, externalTextures, nodeTextures) {
+    const reference = node.inputs[port];
+    if (reference === undefined) {
+        throw new RangeError(`Frame graph node ${node.id} is missing input ${port}`);
+    }
+    const resolved = reference.kind === 'external'
+        ? externalTextures.get(reference.id)
+        : nodeTextures.get(reference.id);
+    if (resolved === undefined) {
+        const sourceKind = reference.kind === 'external' ? 'external input' : 'prior node';
+        throw new RangeError(`Frame graph node ${node.id} references unknown ${sourceKind} ${reference.id}`);
+    }
+    if (reference.kind === 'external' && request.inputs[reference.id] === undefined) {
+        throw new RangeError(`Frame graph external input ${reference.id} is missing`);
+    }
+    return resolved.texture;
+}
+function executeFrameGraphNode(request, runtime, node, externalTextures, nodeTextures, allocated) {
+    if (nodeTextures.has(node.id)) {
+        throw new RangeError(`Frame graph node id ${node.id} is duplicated`);
+    }
+    const passes = node.program.passes;
+    if (passes === undefined) {
+        const target = createFrameGraphTexture(runtime.gl, request.width, request.height);
+        allocated.push(target);
+        const inputs = node.program.inputPorts.map(port => ({
+            sampler: port.replaceAll(/[^a-zA-Z0-9_]/gu, '_'),
+            texture: frameGraphInputTexture(request, node, port, externalTextures, nodeTextures),
+        }));
+        drawFrameGraphPass(runtime, node.program.fragmentShader, inputs, node.program.uniforms, node.parameters, node.systems, target.framebuffer ?? null);
+        nodeTextures.set(node.id, target);
+        return;
+    }
+    if (passes.length === 0) {
+        throw new TypeError(`Frame graph node ${node.id} has an empty multi-pass program`);
+    }
+    const passTextures = new Map();
+    for (const pass of passes) {
+        if (passTextures.has(pass.id)) {
+            throw new RangeError(`Material pass id ${pass.id} is duplicated in node ${node.id}`);
+        }
+        const target = createFrameGraphTexture(runtime.gl, request.width, request.height);
+        allocated.push(target);
+        const inputs = pass.inputs.map(input => {
+            const texture = input.source.kind === 'external'
+                ? frameGraphInputTexture(request, node, input.source.port, externalTextures, nodeTextures)
+                : passTextures.get(input.source.passId)?.texture;
+            if (texture === undefined) {
+                throw new RangeError(`Frame graph node ${node.id} pass ${pass.id} references unknown input ${input.sampler}`);
+            }
+            return { sampler: input.sampler, texture };
+        });
+        drawFrameGraphPass(runtime, pass.fragmentShader, inputs, pass.uniforms, node.parameters, node.systems, target.framebuffer ?? null);
+        passTextures.set(pass.id, target);
+    }
+    const output = passTextures.get(passes.at(-1)?.id ?? '');
+    if (output === undefined)
+        throw new Error(`Frame graph node ${node.id} produced no output`);
+    nodeTextures.set(node.id, output);
+}
+function composeWebGl2FrameGraph(request, resources, timing) {
+    if (!Number.isInteger(request.width) ||
+        !Number.isInteger(request.height) ||
+        request.width <= 0 ||
+        request.height <= 0) {
+        throw new RangeError('Frame graph dimensions must be positive integers');
+    }
+    if (request.nodes.length === 0)
+        throw new RangeError('Frame graph has no nodes');
+    const runtime = webGl2Runtime(request.width, request.height);
+    const gl = runtime.gl;
+    const allocated = [];
+    const externalTextures = new Map();
+    const nodeTextures = new Map();
+    resources.webgl2Contexts = 1;
+    resources.webgl2Buffers = 2;
+    try {
+        for (const [id, frame] of Object.entries(request.inputs)) {
+            const texture = createFrameGraphTexture(gl, request.width, request.height, frame);
+            allocated.push(texture);
+            externalTextures.set(id, texture);
+        }
+        const gpuStartedAt = performance.now();
+        for (const node of request.nodes) {
+            if (cancelledRequestIds.has(request.id)) {
+                throw new DOMException('Renderer request cancelled', 'AbortError');
+            }
+            executeFrameGraphNode(request, runtime, node, externalTextures, nodeTextures, allocated);
+        }
+        const output = nodeTextures.get(request.outputNodeId);
+        if (output === undefined) {
+            throw new RangeError(`Frame graph output node ${request.outputNodeId} is missing`);
+        }
+        drawFrameGraphPass(runtime, FRAME_GRAPH_COPY_SHADER, [{ sampler: 'source', texture: output.texture }], [], {}, {}, null);
+        gl.finish();
+        timing.gpuCompletionUs += Math.round((performance.now() - gpuStartedAt) * 1_000);
+        if (gl.isContextLost()) {
+            webGl2Runtimes.delete(`${request.width.toString()}x${request.height.toString()}`);
+            runtime.dispose();
+            throw new RendererBackendError('RENDERER_WEBGL_CONTEXT_LOST', 'WebGL2 context was lost during frame graph composition');
+        }
+        resources.webgl2Programs = runtime.snapshot().programs;
+        resources.webgl2Textures = allocated.length;
+        const bitmap = runtime.canvas.transferToImageBitmap();
+        if (gl.isContextLost()) {
+            bitmap.close();
+            webGl2Runtimes.delete(`${request.width.toString()}x${request.height.toString()}`);
+            runtime.dispose();
+            throw new RendererBackendError('RENDERER_WEBGL_CONTEXT_LOST', 'WebGL2 context was lost while transferring the frame graph result');
+        }
+        return bitmap;
+    }
+    finally {
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        allocated.forEach(({ framebuffer, texture }) => {
+            if (framebuffer !== undefined)
+                gl.deleteFramebuffer(framebuffer);
+            gl.deleteTexture(texture);
+        });
+        resources.webgl2Contexts = 0;
+        resources.webgl2Programs = 0;
+        resources.webgl2Buffers = 0;
+        resources.webgl2Textures = 0;
+    }
+}
+async function composeWebGl2FrameGraphWithAdmissionRetry(request, resources, timing) {
+    const maxAttempts = 80;
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+        try {
+            return composeWebGl2FrameGraph(request, resources, timing);
+        }
+        catch (error) {
+            const unavailable = error instanceof Error && error.message === 'Worker WebGL2 context is unavailable';
+            if (!unavailable)
+                throw error;
+            if (cancelledRequestIds.has(request.id)) {
+                throw new DOMException('Renderer request cancelled', 'AbortError');
+            }
+            if (attempt === maxAttempts - 1) {
+                throw new RendererBackendError('RENDERER_WEBGL_ADMISSION_TIMEOUT', 'Timed out waiting for a page WebGL2 context budget');
+            }
+            await new Promise(resolve => globalThis.setTimeout(resolve, 50));
+        }
+    }
+    throw new RendererBackendError('RENDERER_WEBGL_ADMISSION_TIMEOUT', 'Timed out waiting for a page WebGL2 context budget');
+}
+const worker = globalThis;
+const MAX_ACTIVE_REQUESTS = 8;
+const activeRequestIds = new Set();
+const cancelledRequestIds = new Set();
+function finishRequest(id, resources) {
+    activeRequestIds.delete(id);
+    cancelledRequestIds.delete(id);
+    resources.activeRequests = activeRequestIds.size;
+    resources.cancelledRequests = cancelledRequestIds.size;
+}
+function acknowledgeCancellation(id) {
+    worker.postMessage({ type: 'cancelled', id });
+}
+worker.addEventListener('message', (event) => {
+    const request = event.data;
+    if (request.type === 'dispose') {
+        disposeGpuRuntime();
+        disposeWebGl2Runtimes();
+        worker.close();
+        return;
+    }
+    if (request.type === 'cancel') {
+        if (activeRequestIds.has(request.id))
+            cancelledRequestIds.add(request.id);
+        return;
+    }
+    if (request.type === 'inspect-resources') {
+        request.responsePort.postMessage({
+            activeRequests: activeRequestIds.size,
+            cancelledRequests: cancelledRequestIds.size,
+        });
+        request.responsePort.close();
+        return;
+    }
+    if (activeRequestIds.size >= MAX_ACTIVE_REQUESTS) {
+        Object.values(request.inputs).forEach(frame => frame.close());
+        worker.postMessage({
+            type: 'failed',
+            id: request.id,
+            code: 'RENDERER_QUEUE_FULL',
+            message: `Renderer Worker reached its ${MAX_ACTIVE_REQUESTS.toString()} active request limit`,
+        });
+        return;
+    }
+    activeRequestIds.add(request.id);
+    void (async () => {
+        const workerStartedAt = performance.now();
+        let response;
+        const diagnostics = [];
+        const resources = emptyResources(Object.keys(request.inputs).length);
+        const timing = { gpuCompletionUs: 0 };
+        let inputsClosed = false;
+        const closeInputs = () => {
+            if (inputsClosed)
+                return;
+            inputsClosed = true;
+            Object.values(request.inputs).forEach(frame => frame.close());
+            resources.inputFrames = 0;
+        };
+        try {
+            let bitmap;
+            let backend;
+            if (request.type === 'compose-frame-graph') {
+                if (request.preferredBackend === 'webgpu') {
+                    try {
+                        bitmap = await composeWebGpuFrameGraph(request, resources, timing);
+                        backend = 'webgpu';
+                    }
+                    catch (error) {
+                        const failure = backendError(error, 'RENDERER_WEBGPU_FRAME_GRAPH_FAILED');
+                        if (!request.allowFallback)
+                            throw failure;
+                        diagnostics.push({ code: failure.code, message: failure.message });
+                        bitmap = await composeWebGl2FrameGraphWithAdmissionRetry(request, resources, timing);
+                        backend = 'webgl2';
+                    }
+                }
+                else {
+                    bitmap = await composeWebGl2FrameGraphWithAdmissionRetry(request, resources, timing);
+                    backend = 'webgl2';
+                }
+            }
+            else if (request.preferredBackend === 'webgpu') {
+                try {
+                    bitmap = await composeWebGpu(request, resources, timing);
+                    backend = 'webgpu';
+                }
+                catch (error) {
+                    const failure = backendError(error, 'RENDERER_WEBGPU_FAILED');
+                    if (!request.allowFallback)
+                        throw failure;
+                    diagnostics.push({ code: failure.code, message: failure.message });
+                    bitmap = await composeWebGl2WithAdmissionRetry(request, resources, timing);
+                    backend = 'webgl2';
+                }
+            }
+            else {
+                bitmap = await composeWebGl2WithAdmissionRetry(request, resources, timing);
+                backend = 'webgl2';
+            }
+            closeInputs();
+            if (cancelledRequestIds.has(request.id)) {
+                bitmap.close();
+                finishRequest(request.id, resources);
+                acknowledgeCancellation(request.id);
+                return;
+            }
+            finishRequest(request.id, resources);
+            response = {
+                type: 'composed',
+                id: request.id,
+                bitmap,
+                backend,
+                graphHash: request.type === 'compose'
+                    ? request.program.graphHash
+                    : `frame-graph:${request.nodes
+                        .map(node => `${node.id}:${node.program.graphHash}`)
+                        .join('|')}`,
+                diagnostics,
+                resources,
+                outputBitmapOwner: 'caller',
+                timing: {
+                    totalWorkerUs: Math.round((performance.now() - workerStartedAt) * 1_000),
+                    gpuCompletionUs: timing.gpuCompletionUs,
+                },
+            };
+            worker.postMessage(response, [bitmap]);
+        }
+        catch (error) {
+            if (cancelledRequestIds.has(request.id)) {
+                finishRequest(request.id, resources);
+                acknowledgeCancellation(request.id);
+                return;
+            }
+            finishRequest(request.id, resources);
+            const failure = backendError(error, 'RENDERER_WORKER_COMPOSE_FAILED');
+            response = {
+                type: 'failed',
+                id: request.id,
+                code: failure.code,
+                message: failure.message,
+            };
+            worker.postMessage(response);
+        }
+        finally {
+            closeInputs();
+            finishRequest(request.id, resources);
+        }
+    })();
+});
+export {};