TypeGPU integration

TypeGPU can author shader logic in TypeScript while Motion GPU continues to own rendering, scheduling, resources, passes, and adapter integration.

Boundary

1. unplugin-typegpu transforms functions containing 'use gpu'.
2. tgpu.resolve(...) produces a WGSL string.
3. The resolved module must expose fn frag(uv: vec2f) -> vec4f.
4. Pass the string to defineMaterial({ fragment }).

Motion GPU does not bypass its material validation for generated WGSL.

Build setup

import { defineConfig } from 'vite';
import typegpu from 'unplugin-typegpu/vite';

export default defineConfig({
	plugins: [typegpu()]
});

import { defineConfig } from 'vite';
import typegpu from 'unplugin-typegpu/vite';

export default defineConfig({
	plugins: [typegpu()]
});

If shader transformation runs inside a worker bundler, configure the matching TypeGPU integration in that bundler as well.

Access Motion GPU bindings

Expose generated Motion GPU identifiers to TypeGPU with raw snippets:

const time = tgpu['~unstable'].rawCodeSnippet(
	'motiongpuFrame.time',
	d.f32,
	'uniform'
);

const time = tgpu['~unstable'].rawCodeSnippet(
	'motiongpuFrame.time',
	d.f32,
	'uniform'
);

Available frame fields are motiongpuFrame.time, .delta, and .resolution. User fields use motiongpuUniforms.<name> and must also be declared in defineMaterial({ uniforms }).

Keep shader resolution in a shader.ts module and runtime orchestration in the adapter component. This isolates transformer-dependent code from FragCanvas, useFrame, and usePointer.

Failure modes

Open the complete TypeGPU Resolve Codegen demo to inspect generated WGSL and adapter variants.