@motion-core/motion-gpu 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,11 +1,6 @@
 /**
- * Public MotionGPU package entrypoint.
+ * Root package entrypoint.
  *
- * Exposes the production-ready core API for fullscreen WGSL rendering workflows.
+ * Framework-agnostic core entrypoint.
  */
-export { default as FragCanvas } from './FragCanvas.svelte';
-export { defineMaterial } from './core/material';
-export { BlitPass, CopyPass, ShaderPass } from './passes';
-export { useMotionGPU } from './motiongpu-context';
-export { useFrame } from './frame-context';
-export { useTexture } from './use-texture';
+export * from './core/index.js';

package/dist/passes/BlitPass.d.ts

@@ -1,32 +1,11 @@
-import type { RenderPass, RenderPassContext, RenderPassFlags, RenderPassInputSlot, RenderPassOutputSlot } from '../core/types';
-export interface BlitPassOptions extends RenderPassFlags {
-    enabled?: boolean;
-    needsSwap?: boolean;
-    input?: RenderPassInputSlot;
-    output?: RenderPassOutputSlot;
-    filter?: GPUFilterMode;
-}
+import { FullscreenPass, type FullscreenPassOptions } from './FullscreenPass.js';
+export type BlitPassOptions = FullscreenPassOptions;
 /**
  * Fullscreen texture blit pass.
  */
-export declare class BlitPass 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;
+export declare class BlitPass extends FullscreenPass {
+    protected getProgram(): string;
     constructor(options?: BlitPassOptions);
-    private ensureResources;
-    setSize(width: number, height: number): void;
-    render(context: RenderPassContext): void;
-    dispose(): void;
+    protected getVertexEntryPoint(): string;
+    protected getFragmentEntryPoint(): string;
 }

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

@@ -1,4 +1,4 @@
-import type { RenderPass, RenderPassContext, RenderPassFlags, RenderPassInputSlot, RenderPassOutputSlot } from '../core/types';
+import type { RenderPass, RenderPassContext, RenderPassFlags, RenderPassInputSlot, RenderPassOutputSlot } from '../core/types.js';
 export interface CopyPassOptions extends RenderPassFlags {
     enabled?: boolean;
     needsSwap?: boolean;

package/dist/passes/CopyPass.js

@@ -1,4 +1,4 @@
-import { BlitPass } from './BlitPass';
+import { BlitPass } from './BlitPass.js';
 /**
  * Texture copy pass with fullscreen-blit fallback.
  */

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';
-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/passes/index.d.ts

@@ -1,3 +1,3 @@
-export { BlitPass, type BlitPassOptions } from './BlitPass';
-export { CopyPass, type CopyPassOptions } from './CopyPass';
-export { ShaderPass, type ShaderPassOptions } from './ShaderPass';
+export { BlitPass, type BlitPassOptions } from './BlitPass.js';
+export { CopyPass, type CopyPassOptions } from './CopyPass.js';
+export { ShaderPass, type ShaderPassOptions } from './ShaderPass.js';

package/dist/passes/index.js

@@ -1,3 +1,3 @@
-export { BlitPass } from './BlitPass';
-export { CopyPass } from './CopyPass';
-export { ShaderPass } from './ShaderPass';
+export { BlitPass } from './BlitPass.js';
+export { CopyPass } from './CopyPass.js';
+export { ShaderPass } from './ShaderPass.js';