@motion-core/motion-gpu 0.2.0 → 0.4.0

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/react/FragCanvas.d.ts

@@ -0,0 +1,26 @@
+import { type MotionGPUErrorReport } from '../core/error-report.js';
+import type { FragMaterial } from '../core/material.js';
+import type { OutputColorSpace, RenderPass, RenderMode, RenderTargetDefinitionMap } from '../core/types.js';
+import { type CSSProperties, type ReactNode } from 'react';
+export interface FragCanvasProps {
+    material: FragMaterial;
+    renderTargets?: RenderTargetDefinitionMap;
+    passes?: RenderPass[];
+    clearColor?: [number, number, number, number];
+    outputColorSpace?: OutputColorSpace;
+    renderMode?: RenderMode;
+    autoRender?: boolean;
+    maxDelta?: number;
+    adapterOptions?: GPURequestAdapterOptions;
+    deviceDescriptor?: GPUDeviceDescriptor;
+    dpr?: number;
+    showErrorOverlay?: boolean;
+    errorRenderer?: (report: MotionGPUErrorReport) => ReactNode;
+    onError?: (report: MotionGPUErrorReport) => void;
+    errorHistoryLimit?: number;
+    onErrorHistory?: (history: MotionGPUErrorReport[]) => void;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+export declare function FragCanvas({ material, renderTargets, passes, clearColor, outputColorSpace, renderMode, autoRender, maxDelta, adapterOptions, deviceDescriptor, dpr, showErrorOverlay, errorRenderer, onError, errorHistoryLimit, onErrorHistory, className, style, children }: FragCanvasProps): import("react/jsx-runtime").JSX.Element;

package/dist/react/FragCanvas.js

@@ -0,0 +1,218 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createCurrentWritable as currentWritable } from '../core/current-value.js';
+import { toMotionGPUErrorReport } from '../core/error-report.js';
+import { createFrameRegistry } from '../core/frame-registry.js';
+import { createMotionGPURuntimeLoop } from '../core/runtime-loop.js';
+import { useEffect, useRef, useState } from 'react';
+import { FrameRegistryReactContext } from './frame-context.js';
+import { MotionGPUErrorOverlay } from './MotionGPUErrorOverlay.js';
+import { MotionGPUReactContext } from './motiongpu-context.js';
+function getInitialDpr() {
+    if (typeof window === 'undefined') {
+        return 1;
+    }
+    return window.devicePixelRatio ?? 1;
+}
+function createRuntimeState(initialDpr) {
+    const registry = createFrameRegistry({ maxDelta: 0.1 });
+    const canvasRef = { current: undefined };
+    const requestFrameSignalRef = { current: null };
+    const requestFrame = () => {
+        requestFrameSignalRef.current?.();
+    };
+    const invalidateFrame = () => {
+        registry.invalidate();
+        requestFrame();
+    };
+    const advanceFrame = () => {
+        registry.advance();
+        requestFrame();
+    };
+    const size = currentWritable({ width: 0, height: 0 });
+    const dprState = currentWritable(initialDpr, requestFrame);
+    const maxDeltaState = currentWritable(0.1, (value) => {
+        registry.setMaxDelta(value);
+        requestFrame();
+    });
+    const renderModeState = currentWritable('always', (value) => {
+        registry.setRenderMode(value);
+        requestFrame();
+    });
+    const autoRenderState = currentWritable(true, (value) => {
+        registry.setAutoRender(value);
+        requestFrame();
+    });
+    const userState = currentWritable({});
+    const context = {
+        get canvas() {
+            return canvasRef.current;
+        },
+        size,
+        dpr: dprState,
+        maxDelta: maxDeltaState,
+        renderMode: renderModeState,
+        autoRender: autoRenderState,
+        user: userState,
+        invalidate: invalidateFrame,
+        advance: advanceFrame,
+        scheduler: {
+            createStage: registry.createStage,
+            getStage: registry.getStage,
+            setDiagnosticsEnabled: registry.setDiagnosticsEnabled,
+            getDiagnosticsEnabled: registry.getDiagnosticsEnabled,
+            getLastRunTimings: registry.getLastRunTimings,
+            getSchedule: registry.getSchedule,
+            setProfilingEnabled: registry.setProfilingEnabled,
+            setProfilingWindow: registry.setProfilingWindow,
+            resetProfiling: registry.resetProfiling,
+            getProfilingEnabled: registry.getProfilingEnabled,
+            getProfilingWindow: registry.getProfilingWindow,
+            getProfilingSnapshot: registry.getProfilingSnapshot
+        }
+    };
+    return {
+        registry,
+        context,
+        canvasRef,
+        size,
+        dprState,
+        maxDeltaState,
+        renderModeState,
+        autoRenderState,
+        requestFrameSignalRef,
+        requestFrame,
+        invalidateFrame,
+        advanceFrame
+    };
+}
+function getNormalizedErrorHistoryLimit(value) {
+    if (!Number.isFinite(value) || value <= 0) {
+        return 0;
+    }
+    return Math.floor(value);
+}
+export function FragCanvas({ material, renderTargets = {}, passes = [], clearColor = [0, 0, 0, 1], outputColorSpace = 'srgb', renderMode = 'always', autoRender = true, maxDelta = 0.1, adapterOptions = undefined, deviceDescriptor = undefined, dpr = getInitialDpr(), showErrorOverlay = true, errorRenderer, onError = undefined, errorHistoryLimit = 0, onErrorHistory = undefined, className = '', style, children }) {
+    const runtimeRef = useRef(null);
+    if (!runtimeRef.current) {
+        runtimeRef.current = createRuntimeState(getInitialDpr());
+    }
+    const runtime = runtimeRef.current;
+    const runtimePropsRef = useRef({
+        material,
+        renderTargets,
+        passes,
+        clearColor,
+        outputColorSpace,
+        adapterOptions,
+        deviceDescriptor,
+        onError,
+        errorHistoryLimit,
+        onErrorHistory
+    });
+    runtimePropsRef.current = {
+        material,
+        renderTargets,
+        passes,
+        clearColor,
+        outputColorSpace,
+        adapterOptions,
+        deviceDescriptor,
+        onError,
+        errorHistoryLimit,
+        onErrorHistory
+    };
+    const [errorReport, setErrorReport] = useState(null);
+    const [errorHistory, setErrorHistory] = useState([]);
+    useEffect(() => {
+        runtime.renderModeState.set(renderMode);
+    }, [renderMode, runtime]);
+    useEffect(() => {
+        runtime.autoRenderState.set(autoRender);
+    }, [autoRender, runtime]);
+    useEffect(() => {
+        runtime.maxDeltaState.set(maxDelta);
+    }, [maxDelta, runtime]);
+    useEffect(() => {
+        runtime.dprState.set(dpr);
+    }, [dpr, runtime]);
+    useEffect(() => {
+        const limit = getNormalizedErrorHistoryLimit(errorHistoryLimit);
+        if (limit <= 0) {
+            if (errorHistory.length === 0) {
+                return;
+            }
+            setErrorHistory([]);
+            onErrorHistory?.([]);
+            return;
+        }
+        if (errorHistory.length <= limit) {
+            return;
+        }
+        const trimmed = errorHistory.slice(errorHistory.length - limit);
+        setErrorHistory(trimmed);
+        onErrorHistory?.(trimmed);
+    }, [errorHistory, errorHistoryLimit, onErrorHistory]);
+    useEffect(() => {
+        const canvas = runtime.canvasRef.current;
+        if (!canvas) {
+            const report = toMotionGPUErrorReport(new Error('Canvas element is not available'), 'initialization');
+            setErrorReport(report);
+            const historyLimit = getNormalizedErrorHistoryLimit(runtimePropsRef.current.errorHistoryLimit);
+            if (historyLimit > 0) {
+                const nextHistory = [report].slice(-historyLimit);
+                setErrorHistory(nextHistory);
+                runtimePropsRef.current.onErrorHistory?.(nextHistory);
+            }
+            runtimePropsRef.current.onError?.(report);
+            return () => {
+                runtime.registry.clear();
+            };
+        }
+        const runtimeLoop = createMotionGPURuntimeLoop({
+            canvas,
+            registry: runtime.registry,
+            size: runtime.size,
+            dpr: runtime.dprState,
+            maxDelta: runtime.maxDeltaState,
+            getMaterial: () => runtimePropsRef.current.material,
+            getRenderTargets: () => runtimePropsRef.current.renderTargets,
+            getPasses: () => runtimePropsRef.current.passes,
+            getClearColor: () => runtimePropsRef.current.clearColor,
+            getOutputColorSpace: () => runtimePropsRef.current.outputColorSpace,
+            getAdapterOptions: () => runtimePropsRef.current.adapterOptions,
+            getDeviceDescriptor: () => runtimePropsRef.current.deviceDescriptor,
+            getOnError: () => runtimePropsRef.current.onError,
+            getErrorHistoryLimit: () => runtimePropsRef.current.errorHistoryLimit,
+            getOnErrorHistory: () => runtimePropsRef.current.onErrorHistory,
+            reportErrorHistory: (history) => {
+                setErrorHistory(history);
+            },
+            reportError: (report) => {
+                setErrorReport(report);
+            }
+        });
+        runtime.requestFrameSignalRef.current = runtimeLoop.requestFrame;
+        return () => {
+            runtime.requestFrameSignalRef.current = null;
+            runtimeLoop.destroy();
+        };
+    }, [runtime]);
+    const canvasStyle = {
+        position: 'absolute',
+        inset: 0,
+        display: 'block',
+        width: '100%',
+        height: '100%',
+        ...style
+    };
+    return (_jsx(FrameRegistryReactContext.Provider, { value: runtime.registry, children: _jsx(MotionGPUReactContext.Provider, { value: runtime.context, children: _jsxs("div", { className: "motiongpu-canvas-wrap", style: {
+                    position: 'relative',
+                    width: '100%',
+                    height: '100%',
+                    minWidth: 0,
+                    minHeight: 0,
+                    overflow: 'hidden'
+                }, children: [_jsx("canvas", { className: className, style: canvasStyle, ref: (node) => {
+                            runtime.canvasRef.current = node ?? undefined;
+                        } }), showErrorOverlay && errorReport ? (errorRenderer ? (errorRenderer(errorReport)) : (_jsx(MotionGPUErrorOverlay, { report: errorReport }))) : null, children] }) }) }));
+}