@motion-core/motion-gpu 0.2.0 → 0.3.0

package/dist/passes/BlitPass.js

@@ -1,3 +1,4 @@
+import { FullscreenPass } from './FullscreenPass.js';
 const FULLSCREEN_BLIT_SHADER = `
 struct MotionGPUVertexOut {
 	@builtin(position) position: vec4f,
@@ -30,129 +31,17 @@ fn motiongpuBlitFragment(in: MotionGPUVertexOut) -> @location(0) vec4f {
 /**
  * Fullscreen texture blit pass.
  */
-export class BlitPass {
-    enabled;
-    needsSwap;
-    input;
-    output;
-    clear;
-    clearColor;
-    preserve;
-    filter;
-    device = null;
-    sampler = null;
-    bindGroupLayout = null;
-    shaderModule = null;
-    pipelineByFormat = new Map();
-    bindGroupByView = new WeakMap();
-    constructor(options = {}) {
-        this.enabled = options.enabled ?? true;
-        this.needsSwap = options.needsSwap ?? true;
-        this.input = options.input ?? 'source';
-        this.output = options.output ?? (this.needsSwap ? 'target' : 'source');
-        this.clear = options.clear ?? false;
-        this.clearColor = options.clearColor ?? [0, 0, 0, 1];
-        this.preserve = options.preserve ?? true;
-        this.filter = options.filter ?? 'linear';
-    }
-    ensureResources(device, format) {
-        if (this.device !== device) {
-            this.device = device;
-            this.sampler = null;
-            this.bindGroupLayout = null;
-            this.shaderModule = null;
-            this.pipelineByFormat.clear();
-            this.bindGroupByView = new WeakMap();
-        }
-        if (!this.sampler) {
-            this.sampler = device.createSampler({
-                magFilter: this.filter,
-                minFilter: this.filter,
-                addressModeU: 'clamp-to-edge',
-                addressModeV: 'clamp-to-edge'
-            });
-        }
-        if (!this.bindGroupLayout) {
-            this.bindGroupLayout = device.createBindGroupLayout({
-                entries: [
-                    {
-                        binding: 0,
-                        visibility: GPUShaderStage.FRAGMENT,
-                        sampler: { type: 'filtering' }
-                    },
-                    {
-                        binding: 1,
-                        visibility: GPUShaderStage.FRAGMENT,
-                        texture: {
-                            sampleType: 'float',
-                            viewDimension: '2d',
-                            multisampled: false
-                        }
-                    }
-                ]
-            });
-        }
-        if (!this.shaderModule) {
-            this.shaderModule = device.createShaderModule({
-                code: FULLSCREEN_BLIT_SHADER
-            });
-        }
-        let pipeline = this.pipelineByFormat.get(format);
-        if (!pipeline) {
-            const pipelineLayout = device.createPipelineLayout({
-                bindGroupLayouts: [this.bindGroupLayout]
-            });
-            pipeline = device.createRenderPipeline({
-                layout: pipelineLayout,
-                vertex: {
-                    module: this.shaderModule,
-                    entryPoint: 'motiongpuBlitVertex'
-                },
-                fragment: {
-                    module: this.shaderModule,
-                    entryPoint: 'motiongpuBlitFragment',
-                    targets: [{ format }]
-                },
-                primitive: { topology: 'triangle-list' }
-            });
-            this.pipelineByFormat.set(format, pipeline);
-        }
-        return {
-            sampler: this.sampler,
-            bindGroupLayout: this.bindGroupLayout,
-            pipeline
-        };
+export class BlitPass extends FullscreenPass {
+    getProgram() {
+        return FULLSCREEN_BLIT_SHADER;
     }
-    setSize(width, height) {
-        void width;
-        void height;
+    constructor(options = {}) {
+        super(options);
     }
-    render(context) {
-        const { sampler, bindGroupLayout, pipeline } = this.ensureResources(context.device, context.output.format);
-        const inputView = context.input.view;
-        let bindGroup = this.bindGroupByView.get(inputView);
-        if (!bindGroup) {
-            bindGroup = context.device.createBindGroup({
-                layout: bindGroupLayout,
-                entries: [
-                    { binding: 0, resource: sampler },
-                    { binding: 1, resource: inputView }
-                ]
-            });
-            this.bindGroupByView.set(inputView, bindGroup);
-        }
-        const pass = context.beginRenderPass();
-        pass.setPipeline(pipeline);
-        pass.setBindGroup(0, bindGroup);
-        pass.draw(3);
-        pass.end();
+    getVertexEntryPoint() {
+        return 'motiongpuBlitVertex';
     }
-    dispose() {
-        this.device = null;
-        this.sampler = null;
-        this.bindGroupLayout = null;
-        this.shaderModule = null;
-        this.pipelineByFormat.clear();
-        this.bindGroupByView = new WeakMap();
+    getFragmentEntryPoint() {
+        return 'motiongpuBlitFragment';
     }
 }

package/dist/passes/FullscreenPass.d.ts

@@ -0,0 +1,37 @@
+import type { RenderPass, RenderPassContext, RenderPassFlags, RenderPassInputSlot, RenderPassOutputSlot } from '../core/types.js';
+export interface FullscreenPassOptions extends RenderPassFlags {
+    enabled?: boolean;
+    needsSwap?: boolean;
+    input?: RenderPassInputSlot;
+    output?: RenderPassOutputSlot;
+    filter?: GPUFilterMode;
+}
+/**
+ * Shared base for fullscreen texture sampling passes.
+ */
+export declare abstract class FullscreenPass implements RenderPass {
+    enabled: boolean;
+    needsSwap: boolean;
+    input: RenderPassInputSlot;
+    output: RenderPassOutputSlot;
+    clear: boolean;
+    clearColor: [number, number, number, number];
+    preserve: boolean;
+    private readonly filter;
+    private device;
+    private sampler;
+    private bindGroupLayout;
+    private shaderModule;
+    private readonly pipelineByFormat;
+    private bindGroupByView;
+    protected constructor(options?: FullscreenPassOptions);
+    protected abstract getProgram(): string;
+    protected abstract getVertexEntryPoint(): string;
+    protected abstract getFragmentEntryPoint(): string;
+    protected invalidateFullscreenCache(): void;
+    private ensureResources;
+    setSize(width: number, height: number): void;
+    protected renderFullscreen(context: RenderPassContext): void;
+    render(context: RenderPassContext): void;
+    dispose(): void;
+}

package/dist/passes/FullscreenPass.js

@@ -0,0 +1,131 @@
+/**
+ * Shared base for fullscreen texture sampling passes.
+ */
+export class FullscreenPass {
+    enabled;
+    needsSwap;
+    input;
+    output;
+    clear;
+    clearColor;
+    preserve;
+    filter;
+    device = null;
+    sampler = null;
+    bindGroupLayout = null;
+    shaderModule = null;
+    pipelineByFormat = new Map();
+    bindGroupByView = new WeakMap();
+    constructor(options = {}) {
+        this.enabled = options.enabled ?? true;
+        this.needsSwap = options.needsSwap ?? true;
+        this.input = options.input ?? 'source';
+        this.output = options.output ?? (this.needsSwap ? 'target' : 'source');
+        this.clear = options.clear ?? false;
+        this.clearColor = options.clearColor ?? [0, 0, 0, 1];
+        this.preserve = options.preserve ?? true;
+        this.filter = options.filter ?? 'linear';
+    }
+    invalidateFullscreenCache() {
+        this.shaderModule = null;
+        this.pipelineByFormat.clear();
+        this.bindGroupByView = new WeakMap();
+    }
+    ensureResources(device, format) {
+        if (this.device !== device) {
+            this.device = device;
+            this.sampler = null;
+            this.bindGroupLayout = null;
+            this.invalidateFullscreenCache();
+        }
+        if (!this.sampler) {
+            this.sampler = device.createSampler({
+                magFilter: this.filter,
+                minFilter: this.filter,
+                addressModeU: 'clamp-to-edge',
+                addressModeV: 'clamp-to-edge'
+            });
+        }
+        if (!this.bindGroupLayout) {
+            this.bindGroupLayout = device.createBindGroupLayout({
+                entries: [
+                    {
+                        binding: 0,
+                        visibility: GPUShaderStage.FRAGMENT,
+                        sampler: { type: 'filtering' }
+                    },
+                    {
+                        binding: 1,
+                        visibility: GPUShaderStage.FRAGMENT,
+                        texture: {
+                            sampleType: 'float',
+                            viewDimension: '2d',
+                            multisampled: false
+                        }
+                    }
+                ]
+            });
+        }
+        if (!this.shaderModule) {
+            this.shaderModule = device.createShaderModule({ code: this.getProgram() });
+        }
+        let pipeline = this.pipelineByFormat.get(format);
+        if (!pipeline) {
+            const pipelineLayout = device.createPipelineLayout({
+                bindGroupLayouts: [this.bindGroupLayout]
+            });
+            pipeline = device.createRenderPipeline({
+                layout: pipelineLayout,
+                vertex: {
+                    module: this.shaderModule,
+                    entryPoint: this.getVertexEntryPoint()
+                },
+                fragment: {
+                    module: this.shaderModule,
+                    entryPoint: this.getFragmentEntryPoint(),
+                    targets: [{ format }]
+                },
+                primitive: { topology: 'triangle-list' }
+            });
+            this.pipelineByFormat.set(format, pipeline);
+        }
+        return {
+            sampler: this.sampler,
+            bindGroupLayout: this.bindGroupLayout,
+            pipeline
+        };
+    }
+    setSize(width, height) {
+        void width;
+        void height;
+    }
+    renderFullscreen(context) {
+        const { sampler, bindGroupLayout, pipeline } = this.ensureResources(context.device, context.output.format);
+        const inputView = context.input.view;
+        let bindGroup = this.bindGroupByView.get(inputView);
+        if (!bindGroup) {
+            bindGroup = context.device.createBindGroup({
+                layout: bindGroupLayout,
+                entries: [
+                    { binding: 0, resource: sampler },
+                    { binding: 1, resource: inputView }
+                ]
+            });
+            this.bindGroupByView.set(inputView, bindGroup);
+        }
+        const pass = context.beginRenderPass();
+        pass.setPipeline(pipeline);
+        pass.setBindGroup(0, bindGroup);
+        pass.draw(3);
+        pass.end();
+    }
+    render(context) {
+        this.renderFullscreen(context);
+    }
+    dispose() {
+        this.device = null;
+        this.sampler = null;
+        this.bindGroupLayout = null;
+        this.invalidateFullscreenCache();
+    }
+}

package/dist/passes/ShaderPass.d.ts

@@ -1,40 +1,20 @@
-import type { RenderPass, RenderPassContext, RenderPassFlags, RenderPassInputSlot, RenderPassOutputSlot } from '../core/types.js';
-export interface ShaderPassOptions extends RenderPassFlags {
+import { FullscreenPass, type FullscreenPassOptions } from './FullscreenPass.js';
+export interface ShaderPassOptions extends FullscreenPassOptions {
     fragment: string;
-    enabled?: boolean;
-    needsSwap?: boolean;
-    input?: RenderPassInputSlot;
-    output?: RenderPassOutputSlot;
-    filter?: GPUFilterMode;
 }
 /**
  * Fullscreen programmable shader pass.
  */
-export declare class ShaderPass implements RenderPass {
-    enabled: boolean;
-    needsSwap: boolean;
-    input: RenderPassInputSlot;
-    output: RenderPassOutputSlot;
-    clear: boolean;
-    clearColor: [number, number, number, number];
-    preserve: boolean;
-    private readonly filter;
+export declare class ShaderPass extends FullscreenPass {
     private fragment;
     private program;
-    private device;
-    private sampler;
-    private bindGroupLayout;
-    private shaderModule;
-    private readonly pipelineByFormat;
-    private bindGroupByView;
     constructor(options: ShaderPassOptions);
     /**
      * Replaces current shader fragment and invalidates pipeline cache.
      */
     setFragment(fragment: string): void;
     getFragment(): string;
-    private ensureResources;
-    setSize(width: number, height: number): void;
-    render(context: RenderPassContext): void;
-    dispose(): void;
+    protected getProgram(): string;
+    protected getVertexEntryPoint(): string;
+    protected getFragmentEntryPoint(): string;
 }

package/dist/passes/ShaderPass.js

@@ -1,3 +1,4 @@
+import { FullscreenPass } from './FullscreenPass.js';
 const SHADER_PASS_CONTRACT = /\bfn\s+shade\s*\(\s*inputColor\s*:\s*vec4f\s*,\s*uv\s*:\s*vec2f\s*\)\s*->\s*vec4f/;
 function buildShaderPassProgram(fragment) {
     if (!SHADER_PASS_CONTRACT.test(fragment)) {
@@ -39,32 +40,11 @@ fn motiongpuShaderPassFragment(in: MotionGPUVertexOut) -> @location(0) vec4f {
 /**
  * Fullscreen programmable shader pass.
  */
-export class ShaderPass {
-    enabled;
-    needsSwap;
-    input;
-    output;
-    clear;
-    clearColor;
-    preserve;
-    filter;
+export class ShaderPass extends FullscreenPass {
     fragment;
     program;
-    device = null;
-    sampler = null;
-    bindGroupLayout = null;
-    shaderModule = null;
-    pipelineByFormat = new Map();
-    bindGroupByView = new WeakMap();
     constructor(options) {
-        this.enabled = options.enabled ?? true;
-        this.needsSwap = options.needsSwap ?? true;
-        this.input = options.input ?? 'source';
-        this.output = options.output ?? (this.needsSwap ? 'target' : 'source');
-        this.clear = options.clear ?? false;
-        this.clearColor = options.clearColor ?? [0, 0, 0, 1];
-        this.preserve = options.preserve ?? true;
-        this.filter = options.filter ?? 'linear';
+        super(options);
         this.fragment = options.fragment;
         this.program = buildShaderPassProgram(options.fragment);
     }
@@ -74,109 +54,18 @@ export class ShaderPass {
     setFragment(fragment) {
         this.fragment = fragment;
         this.program = buildShaderPassProgram(fragment);
-        this.shaderModule = null;
-        this.pipelineByFormat.clear();
-        this.bindGroupByView = new WeakMap();
+        this.invalidateFullscreenCache();
     }
     getFragment() {
         return this.fragment;
     }
-    ensureResources(device, format) {
-        if (this.device !== device) {
-            this.device = device;
-            this.sampler = null;
-            this.bindGroupLayout = null;
-            this.shaderModule = null;
-            this.pipelineByFormat.clear();
-            this.bindGroupByView = new WeakMap();
-        }
-        if (!this.sampler) {
-            this.sampler = device.createSampler({
-                magFilter: this.filter,
-                minFilter: this.filter,
-                addressModeU: 'clamp-to-edge',
-                addressModeV: 'clamp-to-edge'
-            });
-        }
-        if (!this.bindGroupLayout) {
-            this.bindGroupLayout = device.createBindGroupLayout({
-                entries: [
-                    {
-                        binding: 0,
-                        visibility: GPUShaderStage.FRAGMENT,
-                        sampler: { type: 'filtering' }
-                    },
-                    {
-                        binding: 1,
-                        visibility: GPUShaderStage.FRAGMENT,
-                        texture: {
-                            sampleType: 'float',
-                            viewDimension: '2d',
-                            multisampled: false
-                        }
-                    }
-                ]
-            });
-        }
-        if (!this.shaderModule) {
-            this.shaderModule = device.createShaderModule({ code: this.program });
-        }
-        let pipeline = this.pipelineByFormat.get(format);
-        if (!pipeline) {
-            const pipelineLayout = device.createPipelineLayout({
-                bindGroupLayouts: [this.bindGroupLayout]
-            });
-            pipeline = device.createRenderPipeline({
-                layout: pipelineLayout,
-                vertex: {
-                    module: this.shaderModule,
-                    entryPoint: 'motiongpuShaderPassVertex'
-                },
-                fragment: {
-                    module: this.shaderModule,
-                    entryPoint: 'motiongpuShaderPassFragment',
-                    targets: [{ format }]
-                },
-                primitive: { topology: 'triangle-list' }
-            });
-            this.pipelineByFormat.set(format, pipeline);
-        }
-        return {
-            sampler: this.sampler,
-            bindGroupLayout: this.bindGroupLayout,
-            pipeline
-        };
+    getProgram() {
+        return this.program;
     }
-    setSize(width, height) {
-        void width;
-        void height;
+    getVertexEntryPoint() {
+        return 'motiongpuShaderPassVertex';
     }
-    render(context) {
-        const { sampler, bindGroupLayout, pipeline } = this.ensureResources(context.device, context.output.format);
-        const inputView = context.input.view;
-        let bindGroup = this.bindGroupByView.get(inputView);
-        if (!bindGroup) {
-            bindGroup = context.device.createBindGroup({
-                layout: bindGroupLayout,
-                entries: [
-                    { binding: 0, resource: sampler },
-                    { binding: 1, resource: inputView }
-                ]
-            });
-            this.bindGroupByView.set(inputView, bindGroup);
-        }
-        const pass = context.beginRenderPass();
-        pass.setPipeline(pipeline);
-        pass.setBindGroup(0, bindGroup);
-        pass.draw(3);
-        pass.end();
-    }
-    dispose() {
-        this.device = null;
-        this.sampler = null;
-        this.bindGroupLayout = null;
-        this.shaderModule = null;
-        this.pipelineByFormat.clear();
-        this.bindGroupByView = new WeakMap();
+    getFragmentEntryPoint() {
+        return 'motiongpuShaderPassFragment';
     }
 }

package/dist/svelte/FragCanvas.svelte

@@ -31,6 +31,8 @@
 		showErrorOverlay?: boolean;
 		errorRenderer?: Snippet<[MotionGPUErrorReport]>;
 		onError?: (report: MotionGPUErrorReport) => void;
+		errorHistoryLimit?: number;
+		onErrorHistory?: (history: MotionGPUErrorReport[]) => void;
 		class?: string;
 		style?: string;
 		children?: Snippet;
@@ -53,6 +55,8 @@
 		showErrorOverlay = true,
 		errorRenderer = undefined,
 		onError = undefined,
+		errorHistoryLimit = 0,
+		onErrorHistory = undefined,
 		class: className = '',
 		style = '',
 		children
@@ -60,6 +64,14 @@
 
 	let canvas: HTMLCanvasElement | undefined;
 	let errorReport = $state<MotionGPUErrorReport | null>(null);
+	let errorHistory = $state<MotionGPUErrorReport[]>([]);
+
+	const getNormalizedErrorHistoryLimit = (): number => {
+		if (!Number.isFinite(errorHistoryLimit) || errorHistoryLimit <= 0) {
+			return 0;
+		}
+		return Math.floor(errorHistoryLimit);
+	};
 
 	const bindCanvas = (node: HTMLCanvasElement) => {
 		canvas = node;
@@ -150,6 +162,26 @@
 		requestFrame();
 	});
 
+	$effect(() => {
+		const limit = getNormalizedErrorHistoryLimit();
+		if (limit <= 0) {
+			if (errorHistory.length === 0) {
+				return;
+			}
+			errorHistory = [];
+			onErrorHistory?.([]);
+			return;
+		}
+
+		if (errorHistory.length <= limit) {
+			return;
+		}
+
+		const trimmed = errorHistory.slice(errorHistory.length - limit);
+		errorHistory = trimmed;
+		onErrorHistory?.(trimmed);
+	});
+
 	onMount(() => {
 		if (!canvas) {
 			const report = toMotionGPUErrorReport(
@@ -157,6 +189,12 @@
 				'initialization'
 			);
 			errorReport = report;
+			const historyLimit = getNormalizedErrorHistoryLimit();
+			if (historyLimit > 0) {
+				const nextHistory = [report].slice(-historyLimit);
+				errorHistory = nextHistory;
+				onErrorHistory?.(nextHistory);
+			}
 			onError?.(report);
 			return () => registry.clear();
 		}
@@ -175,6 +213,11 @@
 			getAdapterOptions: () => adapterOptions,
 			getDeviceDescriptor: () => deviceDescriptor,
 			getOnError: () => onError,
+			getErrorHistoryLimit: () => errorHistoryLimit,
+			getOnErrorHistory: () => onErrorHistory,
+			reportErrorHistory: (history) => {
+				errorHistory = history;
+			},
 			reportError: (report) => {
 				errorReport = report;
 			}

package/dist/svelte/FragCanvas.svelte.d.ts

@@ -17,6 +17,8 @@ interface Props {
     showErrorOverlay?: boolean;
     errorRenderer?: Snippet<[MotionGPUErrorReport]>;
     onError?: (report: MotionGPUErrorReport) => void;
+    errorHistoryLimit?: number;
+    onErrorHistory?: (history: MotionGPUErrorReport[]) => void;
     class?: string;
     style?: string;
     children?: Snippet;