@motion-core/motion-gpu 0.4.2 → 0.6.0

package/dist/core/renderer.js

@@ -1,9 +1,12 @@
 import { packUniformsInto } from "./uniforms.js";
 import { getTextureMipLevelCount, normalizeTextureDefinitions, resolveTextureSize, resolveTextureUpdateMode, toTextureData } from "./textures.js";
+import { normalizeStorageBufferDefinition } from "./storage-buffers.js";
 import { attachShaderCompilationDiagnostics } from "./error-diagnostics.js";
 import { buildShaderSourceWithMap, formatShaderSourceLocation } from "./shader.js";
 import { buildRenderTargetSignature, resolveRenderTargetDefinitions } from "./render-targets.js";
 import { planRenderGraph } from "./render-graph.js";
+import { buildComputeShaderSourceWithMap, buildPingPongComputeShaderSourceWithMap, extractWorkgroupSize, storageTextureSampleScalarType } from "./compute-shader.js";
+import { createComputeStorageBindGroupCache } from "./compute-bindgroup-cache.js";
 //#region src/lib/core/renderer.ts
 /**
 * Binding index for frame uniforms (`time`, `delta`, `resolution`).
@@ -28,6 +31,14 @@ function getTextureBindings(index) {
 	};
 }
 /**
+* Maps WGSL scalar texture type to WebGPU sampled texture bind-group sample type.
+*/
+function toGpuTextureSampleType(type) {
+	if (type === "u32") return "uint";
+	if (type === "i32") return "sint";
+	return "float";
+}
+/**
 * Resizes canvas backing store to match client size and DPR.
 */
 function resizeCanvas(canvas, dprInput, cssSize) {
@@ -64,10 +75,13 @@ async function assertCompilation(module, options) {
 		if (contextLabel.length === 0) return diagnostic.message;
 		return `[${contextLabel.join(" | ")}] ${diagnostic.message}`;
 	}).join("\n");
-	throw attachShaderCompilationDiagnostics(/* @__PURE__ */ new Error(`WGSL compilation failed:\n${summary}`), {
+	const prefix = options?.errorPrefix ?? "WGSL compilation failed";
+	throw attachShaderCompilationDiagnostics(/* @__PURE__ */ new Error(`${prefix}:\n${summary}`), {
 		kind: "shader-compilation",
+		...options?.shaderStage !== void 0 ? { shaderStage: options.shaderStage } : {},
 		diagnostics,
 		fragmentSource: options?.fragmentSource ?? "",
+		...options?.computeSource !== void 0 ? { computeSource: options.computeSource } : {},
 		includeSources: options?.includeSources ?? {},
 		...options?.defineBlockSource !== void 0 ? { defineBlockSource: options.defineBlockSource } : {},
 		materialSource: options?.materialSource ?? null,
@@ -77,6 +91,41 @@ async function assertCompilation(module, options) {
 function toSortedUniqueStrings(values) {
 	return Array.from(new Set(values)).sort((a, b) => a.localeCompare(b));
 }
+function extractGeneratedLineFromComputeError(message) {
+	const lineMatch = message.match(/\bline\s+(\d+)\b/i);
+	if (lineMatch) {
+		const parsed = Number.parseInt(lineMatch[1] ?? "", 10);
+		if (Number.isFinite(parsed) && parsed > 0) return parsed;
+	}
+	const colonMatch = message.match(/:(\d+):\d+/);
+	if (colonMatch) {
+		const parsed = Number.parseInt(colonMatch[1] ?? "", 10);
+		if (Number.isFinite(parsed) && parsed > 0) return parsed;
+	}
+	return null;
+}
+function toComputeCompilationError(input) {
+	const baseError = input.error instanceof Error ? input.error : new Error(String(input.error ?? "Unknown error"));
+	const generatedLine = extractGeneratedLineFromComputeError(baseError.message) ?? 0;
+	const sourceLocation = generatedLine > 0 ? input.lineMap[generatedLine] ?? null : null;
+	const diagnostics = [{
+		generatedLine,
+		message: baseError.message,
+		sourceLocation
+	}];
+	const contextLabel = [formatShaderSourceLocation(sourceLocation), generatedLine > 0 ? `generated WGSL line ${generatedLine}` : null].filter((value) => Boolean(value));
+	const summary = contextLabel.length > 0 ? `[${contextLabel.join(" | ")}] ${baseError.message}` : baseError.message;
+	return attachShaderCompilationDiagnostics(/* @__PURE__ */ new Error(`Compute shader compilation failed:\n${summary}`), {
+		kind: "shader-compilation",
+		shaderStage: "compute",
+		diagnostics,
+		fragmentSource: "",
+		computeSource: input.computeSource,
+		includeSources: {},
+		materialSource: null,
+		runtimeContext: input.runtimeContext
+	});
+}
 function buildPassGraphSnapshot(passes) {
 	const declaredPasses = passes ?? [];
 	let enabledPassCount = 0;
@@ -85,9 +134,11 @@ function buildPassGraphSnapshot(passes) {
 	for (const pass of declaredPasses) {
 		if (pass.enabled === false) continue;
 		enabledPassCount += 1;
-		const needsSwap = pass.needsSwap ?? true;
-		const input = pass.input ?? "source";
-		const output = pass.output ?? (needsSwap ? "target" : "source");
+		if ("isCompute" in pass && pass.isCompute === true) continue;
+		const rp = pass;
+		const needsSwap = rp.needsSwap ?? true;
+		const input = rp.input ?? "source";
+		const output = rp.output ?? (needsSwap ? "target" : "source");
 		inputs.push(input);
 		outputs.push(output);
 	}
@@ -385,9 +436,12 @@ async function createRenderer(options) {
 	try {
 		const runtimeContext = buildShaderCompilationRuntimeContext(options);
 		const convertLinearToSrgb = shouldConvertLinearToSrgb(options.outputColorSpace, format);
-		const builtShader = buildShaderSourceWithMap(options.fragmentWgsl, options.uniformLayout, options.textureKeys, {
+		const fragmentTextureKeys = options.textureKeys.filter((key) => options.textureDefinitions[key]?.fragmentVisible !== false);
+		const builtShader = buildShaderSourceWithMap(options.fragmentWgsl, options.uniformLayout, fragmentTextureKeys, {
 			convertLinearToSrgb,
-			fragmentLineMap: options.fragmentLineMap
+			fragmentLineMap: options.fragmentLineMap,
+			...options.storageBufferKeys !== void 0 ? { storageBufferKeys: options.storageBufferKeys } : {},
+			...options.storageBufferDefinitions !== void 0 ? { storageBufferDefinitions: options.storageBufferDefinitions } : {}
 		});
 		const shaderModule = device.createShaderModule({ code: builtShader.code });
 		await assertCompilation(shaderModule, {
@@ -399,10 +453,17 @@ async function createRenderer(options) {
 			runtimeContext
 		});
 		const normalizedTextureDefinitions = normalizeTextureDefinitions(options.textureDefinitions, options.textureKeys);
-		const textureBindings = options.textureKeys.map((key, index) => {
+		const storageBufferKeys = options.storageBufferKeys ?? [];
+		const storageBufferDefinitions = options.storageBufferDefinitions ?? {};
+		const storageTextureKeys = options.storageTextureKeys ?? [];
+		const storageTextureKeySet = new Set(storageTextureKeys);
+		const fragmentTextureIndexByKey = new Map(fragmentTextureKeys.map((key, index) => [key, index]));
+		const textureBindings = options.textureKeys.map((key) => {
 			const config = normalizedTextureDefinitions[key];
 			if (!config) throw new Error(`Missing texture definition for "${key}"`);
-			const { samplerBinding, textureBinding } = getTextureBindings(index);
+			const fragmentTextureIndex = fragmentTextureIndexByKey.get(key);
+			const fragmentVisible = fragmentTextureIndex !== void 0;
+			const { samplerBinding, textureBinding } = getTextureBindings(fragmentTextureIndex ?? 0);
 			const sampler = device.createSampler({
 				magFilter: config.filter,
 				minFilter: config.filter,
@@ -411,7 +472,7 @@ async function createRenderer(options) {
 				addressModeV: config.addressModeV,
 				maxAnisotropy: config.filter === "linear" ? config.anisotropy : 1
 			});
-			const fallbackTexture = createFallbackTexture(device, config.format);
+			const fallbackTexture = createFallbackTexture(device, config.storage ? "rgba8unorm" : config.format);
 			registerInitializationCleanup(() => {
 				fallbackTexture.destroy();
 			});
@@ -420,6 +481,7 @@ async function createRenderer(options) {
 				key,
 				samplerBinding,
 				textureBinding,
+				fragmentVisible,
 				sampler,
 				fallbackTexture,
 				fallbackView,
@@ -442,10 +504,60 @@ async function createRenderer(options) {
 				lastToken: null
 			};
 			if (config.update !== void 0) runtimeBinding.defaultUpdate = config.update;
+			if (config.storage && config.width && config.height) {
+				const storageUsage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST;
+				const storageTexture = device.createTexture({
+					size: {
+						width: config.width,
+						height: config.height,
+						depthOrArrayLayers: 1
+					},
+					format: config.format,
+					usage: storageUsage
+				});
+				registerInitializationCleanup(() => {
+					storageTexture.destroy();
+				});
+				runtimeBinding.texture = storageTexture;
+				runtimeBinding.view = storageTexture.createView();
+				runtimeBinding.width = config.width;
+				runtimeBinding.height = config.height;
+			}
 			return runtimeBinding;
 		});
-		const bindGroupLayout = device.createBindGroupLayout({ entries: createBindGroupLayoutEntries(textureBindings) });
-		const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] });
+		const textureBindingByKey = new Map(textureBindings.map((binding) => [binding.key, binding]));
+		const fragmentTextureBindings = textureBindings.filter((binding) => binding.fragmentVisible);
+		const computeStorageBufferLayoutEntries = storageBufferKeys.map((key, index) => {
+			const bufferType = (storageBufferDefinitions[key]?.access ?? "read-write") === "read" ? "read-only-storage" : "storage";
+			return {
+				binding: index,
+				visibility: GPUShaderStage.COMPUTE,
+				buffer: { type: bufferType }
+			};
+		});
+		const computeStorageBufferTopologyKey = storageBufferKeys.map((key) => `${key}:${storageBufferDefinitions[key]?.access ?? "read-write"}`).join("|");
+		const computeStorageTextureLayoutEntries = storageTextureKeys.map((key, index) => {
+			const config = normalizedTextureDefinitions[key];
+			return {
+				binding: index,
+				visibility: GPUShaderStage.COMPUTE,
+				storageTexture: {
+					access: "write-only",
+					format: config?.format ?? "rgba8unorm",
+					viewDimension: "2d"
+				}
+			};
+		});
+		const computeStorageTextureTopologyKey = storageTextureKeys.map((key) => `${key}:${normalizedTextureDefinitions[key]?.format ?? "rgba8unorm"}`).join("|");
+		const computeStorageBufferBindGroupCache = createComputeStorageBindGroupCache(device);
+		const computeStorageTextureBindGroupCache = createComputeStorageBindGroupCache(device);
+		const bindGroupLayout = device.createBindGroupLayout({ entries: createBindGroupLayoutEntries(fragmentTextureBindings) });
+		const fragmentStorageBindGroupLayout = storageBufferKeys.length > 0 ? device.createBindGroupLayout({ entries: storageBufferKeys.map((_, index) => ({
+			binding: index,
+			visibility: GPUShaderStage.FRAGMENT,
+			buffer: { type: "read-only-storage" }
+		})) }) : null;
+		const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: fragmentStorageBindGroupLayout ? [bindGroupLayout, fragmentStorageBindGroupLayout] : [bindGroupLayout] });
 		const pipeline = device.createRenderPipeline({
 			layout: pipelineLayout,
 			vertex: {
@@ -495,6 +607,278 @@ async function createRenderer(options) {
 			addressModeV: "clamp-to-edge"
 		});
 		let blitBindGroupByView = /* @__PURE__ */ new WeakMap();
+		const storageBufferMap = /* @__PURE__ */ new Map();
+		const pingPongTexturePairs = /* @__PURE__ */ new Map();
+		for (const key of storageBufferKeys) {
+			const definition = storageBufferDefinitions[key];
+			if (!definition) continue;
+			const normalized = normalizeStorageBufferDefinition(definition);
+			const buffer = device.createBuffer({
+				size: normalized.size,
+				usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC
+			});
+			registerInitializationCleanup(() => {
+				buffer.destroy();
+			});
+			if (definition.initialData) {
+				const data = definition.initialData;
+				device.queue.writeBuffer(buffer, 0, data.buffer, data.byteOffset, data.byteLength);
+			}
+			storageBufferMap.set(key, buffer);
+		}
+		const fragmentStorageBindGroup = fragmentStorageBindGroupLayout && storageBufferKeys.length > 0 ? device.createBindGroup({
+			layout: fragmentStorageBindGroupLayout,
+			entries: storageBufferKeys.map((key, index) => {
+				const buffer = storageBufferMap.get(key);
+				if (!buffer) throw new Error(`Storage buffer "${key}" not allocated.`);
+				return {
+					binding: index,
+					resource: { buffer }
+				};
+			})
+		}) : null;
+		const ensurePingPongTexturePair = (target) => {
+			const existing = pingPongTexturePairs.get(target);
+			if (existing) return existing;
+			const config = normalizedTextureDefinitions[target];
+			if (!config || !config.storage) throw new Error(`PingPongComputePass target "${target}" must reference a texture declared with storage:true.`);
+			if (!config.width || !config.height) throw new Error(`PingPongComputePass target "${target}" requires explicit texture width and height.`);
+			const usage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.STORAGE_BINDING | GPUTextureUsage.COPY_DST;
+			const textureA = device.createTexture({
+				size: {
+					width: config.width,
+					height: config.height,
+					depthOrArrayLayers: 1
+				},
+				format: config.format,
+				usage
+			});
+			const textureB = device.createTexture({
+				size: {
+					width: config.width,
+					height: config.height,
+					depthOrArrayLayers: 1
+				},
+				format: config.format,
+				usage
+			});
+			registerInitializationCleanup(() => {
+				textureA.destroy();
+			});
+			registerInitializationCleanup(() => {
+				textureB.destroy();
+			});
+			const sampleType = toGpuTextureSampleType(storageTextureSampleScalarType(config.format));
+			const bindGroupLayout = device.createBindGroupLayout({ entries: [{
+				binding: 0,
+				visibility: GPUShaderStage.COMPUTE,
+				texture: {
+					sampleType,
+					viewDimension: "2d",
+					multisampled: false
+				}
+			}, {
+				binding: 1,
+				visibility: GPUShaderStage.COMPUTE,
+				storageTexture: {
+					access: "write-only",
+					format: config.format,
+					viewDimension: "2d"
+				}
+			}] });
+			const pair = {
+				target,
+				format: config.format,
+				width: config.width,
+				height: config.height,
+				textureA,
+				viewA: textureA.createView(),
+				textureB,
+				viewB: textureB.createView(),
+				bindGroupLayout,
+				readAWriteBBindGroup: null,
+				readBWriteABindGroup: null
+			};
+			pingPongTexturePairs.set(target, pair);
+			return pair;
+		};
+		const computePipelineCache = /* @__PURE__ */ new Map();
+		const buildComputePipelineEntry = (buildOptions) => {
+			const cacheKey = buildOptions.pingPongTarget && buildOptions.pingPongFormat ? `pingpong:${buildOptions.pingPongTarget}:${buildOptions.pingPongFormat}:${buildOptions.computeSource}` : `compute:${buildOptions.computeSource}`;
+			const cached = computePipelineCache.get(cacheKey);
+			if (cached) return cached;
+			const storageBufferDefs = {};
+			for (const key of storageBufferKeys) {
+				const def = storageBufferDefinitions[key];
+				if (def) {
+					const norm = normalizeStorageBufferDefinition(def);
+					storageBufferDefs[key] = {
+						type: norm.type,
+						access: norm.access
+					};
+				}
+			}
+			const storageTextureDefs = {};
+			for (const key of storageTextureKeys) {
+				const texDef = options.textureDefinitions[key];
+				if (texDef?.format) storageTextureDefs[key] = { format: texDef.format };
+			}
+			const isPingPongPipeline = Boolean(buildOptions.pingPongTarget && buildOptions.pingPongFormat);
+			const builtComputeShader = isPingPongPipeline ? buildPingPongComputeShaderSourceWithMap({
+				compute: buildOptions.computeSource,
+				uniformLayout: options.uniformLayout,
+				storageBufferKeys,
+				storageBufferDefinitions: storageBufferDefs,
+				target: buildOptions.pingPongTarget,
+				targetFormat: buildOptions.pingPongFormat
+			}) : buildComputeShaderSourceWithMap({
+				compute: buildOptions.computeSource,
+				uniformLayout: options.uniformLayout,
+				storageBufferKeys,
+				storageBufferDefinitions: storageBufferDefs,
+				storageTextureKeys,
+				storageTextureDefinitions: storageTextureDefs
+			});
+			const computeShaderModule = device.createShaderModule({ code: builtComputeShader.code });
+			const workgroupSize = extractWorkgroupSize(buildOptions.computeSource);
+			const computeUniformBGL = device.createBindGroupLayout({ entries: [{
+				binding: FRAME_BINDING,
+				visibility: GPUShaderStage.COMPUTE,
+				buffer: {
+					type: "uniform",
+					minBindingSize: 16
+				}
+			}, {
+				binding: UNIFORM_BINDING,
+				visibility: GPUShaderStage.COMPUTE,
+				buffer: { type: "uniform" }
+			}] });
+			const storageBGL = computeStorageBufferLayoutEntries.length > 0 ? device.createBindGroupLayout({ entries: computeStorageBufferLayoutEntries }) : null;
+			const storageTextureBGLEntries = isPingPongPipeline ? [{
+				binding: 0,
+				visibility: GPUShaderStage.COMPUTE,
+				texture: {
+					sampleType: toGpuTextureSampleType(storageTextureSampleScalarType(buildOptions.pingPongFormat)),
+					viewDimension: "2d",
+					multisampled: false
+				}
+			}, {
+				binding: 1,
+				visibility: GPUShaderStage.COMPUTE,
+				storageTexture: {
+					access: "write-only",
+					format: buildOptions.pingPongFormat,
+					viewDimension: "2d"
+				}
+			}] : computeStorageTextureLayoutEntries;
+			const storageTextureBGL = storageTextureBGLEntries.length > 0 ? device.createBindGroupLayout({ entries: storageTextureBGLEntries }) : null;
+			const bindGroupLayouts = [computeUniformBGL];
+			if (storageBGL || storageTextureBGL) bindGroupLayouts.push(storageBGL ?? device.createBindGroupLayout({ entries: [] }));
+			if (storageTextureBGL) bindGroupLayouts.push(storageTextureBGL);
+			const computePipelineLayout = device.createPipelineLayout({ bindGroupLayouts });
+			let pipeline;
+			try {
+				pipeline = device.createComputePipeline({
+					layout: computePipelineLayout,
+					compute: {
+						module: computeShaderModule,
+						entryPoint: "compute"
+					}
+				});
+			} catch (error) {
+				throw toComputeCompilationError({
+					error,
+					lineMap: builtComputeShader.lineMap,
+					computeSource: buildOptions.computeSource,
+					runtimeContext
+				});
+			}
+			const computeUniformBindGroup = device.createBindGroup({
+				layout: computeUniformBGL,
+				entries: [{
+					binding: FRAME_BINDING,
+					resource: { buffer: frameBuffer }
+				}, {
+					binding: UNIFORM_BINDING,
+					resource: { buffer: uniformBuffer }
+				}]
+			});
+			const entry = {
+				pipeline,
+				bindGroup: computeUniformBindGroup,
+				workgroupSize,
+				computeSource: buildOptions.computeSource
+			};
+			computePipelineCache.set(cacheKey, entry);
+			return entry;
+		};
+		const getComputeStorageBindGroup = () => {
+			if (computeStorageBufferLayoutEntries.length === 0) return null;
+			const resources = storageBufferKeys.map((key) => {
+				const buffer = storageBufferMap.get(key);
+				if (!buffer) throw new Error(`Storage buffer "${key}" not allocated.`);
+				return buffer;
+			});
+			const storageEntries = resources.map((buffer, index) => {
+				return {
+					binding: index,
+					resource: { buffer }
+				};
+			});
+			return computeStorageBufferBindGroupCache.getOrCreate({
+				topologyKey: computeStorageBufferTopologyKey,
+				layoutEntries: computeStorageBufferLayoutEntries,
+				bindGroupEntries: storageEntries,
+				resourceRefs: resources
+			});
+		};
+		const getComputeStorageTextureBindGroup = () => {
+			if (computeStorageTextureLayoutEntries.length === 0) return null;
+			const resources = storageTextureKeys.map((key) => {
+				const binding = textureBindingByKey.get(key);
+				if (!binding || !binding.texture) throw new Error(`Storage texture "${key}" not allocated.`);
+				return binding.view;
+			});
+			const bgEntries = resources.map((view, index) => {
+				return {
+					binding: index,
+					resource: view
+				};
+			});
+			return computeStorageTextureBindGroupCache.getOrCreate({
+				topologyKey: computeStorageTextureTopologyKey,
+				layoutEntries: computeStorageTextureLayoutEntries,
+				bindGroupEntries: bgEntries,
+				resourceRefs: resources
+			});
+		};
+		const getPingPongStorageTextureBindGroup = (target, readFromA) => {
+			const pair = ensurePingPongTexturePair(target);
+			if (readFromA) {
+				if (!pair.readAWriteBBindGroup) pair.readAWriteBBindGroup = device.createBindGroup({
+					layout: pair.bindGroupLayout,
+					entries: [{
+						binding: 0,
+						resource: pair.viewA
+					}, {
+						binding: 1,
+						resource: pair.viewB
+					}]
+				});
+				return pair.readAWriteBBindGroup;
+			}
+			if (!pair.readBWriteABindGroup) pair.readBWriteABindGroup = device.createBindGroup({
+				layout: pair.bindGroupLayout,
+				entries: [{
+					binding: 0,
+					resource: pair.viewB
+				}, {
+					binding: 1,
+					resource: pair.viewA
+				}]
+			});
+			return pair.readBWriteABindGroup;
+		};
 		const frameBuffer = device.createBuffer({
 			size: 16,
 			usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
@@ -524,7 +908,7 @@ async function createRenderer(options) {
 				binding: UNIFORM_BINDING,
 				resource: { buffer: uniformBuffer }
 			}];
-			for (const binding of textureBindings) {
+			for (const binding of fragmentTextureBindings) {
 				entries.push({
 					binding: binding.samplerBinding,
 					resource: binding.sampler
@@ -588,6 +972,8 @@ async function createRenderer(options) {
 				binding.lastToken = value;
 				return false;
 			}
+			let textureUsage = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT;
+			if (storageTextureKeySet.has(binding.key)) textureUsage |= GPUTextureUsage.STORAGE_BINDING;
 			const texture = device.createTexture({
 				size: {
 					width,
@@ -596,7 +982,7 @@ async function createRenderer(options) {
 				},
 				format,
 				mipLevelCount,
-				usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+				usage: textureUsage
 			});
 			registerInitializationCleanup(() => {
 				texture.destroy();
@@ -618,7 +1004,10 @@ async function createRenderer(options) {
 			binding.lastToken = value;
 			return true;
 		};
-		for (const binding of textureBindings) updateTextureBinding(binding, normalizedTextureDefinitions[binding.key]?.source ?? null, "always");
+		for (const binding of textureBindings) {
+			if (storageTextureKeySet.has(binding.key)) continue;
+			updateTextureBinding(binding, normalizedTextureDefinitions[binding.key]?.source ?? null, "always");
+		}
 		let bindGroup = createBindGroup();
 		let sourceSlotTarget = null;
 		let targetSlotTarget = null;
@@ -667,10 +1056,11 @@ async function createRenderer(options) {
 			if (cachedGraphPasses.length !== passes.length) return false;
 			for (let index = 0; index < passes.length; index += 1) {
 				const pass = passes[index];
+				const rp = pass;
 				const snapshot = cachedGraphPasses[index];
 				if (!pass || !snapshot || snapshot.pass !== pass) return false;
-				if (snapshot.enabled !== pass.enabled || snapshot.needsSwap !== pass.needsSwap || snapshot.input !== pass.input || snapshot.output !== pass.output || snapshot.clear !== pass.clear || snapshot.preserve !== pass.preserve) return false;
-				const passClearColor = pass.clearColor;
+				if (snapshot.enabled !== pass.enabled || snapshot.needsSwap !== rp.needsSwap || snapshot.input !== rp.input || snapshot.output !== rp.output || snapshot.clear !== rp.clear || snapshot.preserve !== rp.preserve) return false;
+				const passClearColor = rp.clearColor;
 				const hasPassClearColor = passClearColor !== void 0;
 				if (snapshot.hasClearColor !== hasPassClearColor) return false;
 				if (passClearColor) {
@@ -692,18 +1082,19 @@ async function createRenderer(options) {
 			cachedGraphPasses.length = passes.length;
 			let index = 0;
 			for (const pass of passes) {
-				const passClearColor = pass.clearColor;
+				const rp = pass;
+				const passClearColor = rp.clearColor;
 				const hasPassClearColor = passClearColor !== void 0;
 				const snapshot = cachedGraphPasses[index];
 				if (!snapshot) {
 					cachedGraphPasses[index] = {
 						pass,
 						enabled: pass.enabled,
-						needsSwap: pass.needsSwap,
-						input: pass.input,
-						output: pass.output,
-						clear: pass.clear,
-						preserve: pass.preserve,
+						needsSwap: rp.needsSwap,
+						input: rp.input,
+						output: rp.output,
+						clear: rp.clear,
+						preserve: rp.preserve,
 						hasClearColor: hasPassClearColor,
 						clearColor0: passClearColor?.[0] ?? 0,
 						clearColor1: passClearColor?.[1] ?? 0,
@@ -715,11 +1106,11 @@ async function createRenderer(options) {
 				}
 				snapshot.pass = pass;
 				snapshot.enabled = pass.enabled;
-				snapshot.needsSwap = pass.needsSwap;
-				snapshot.input = pass.input;
-				snapshot.output = pass.output;
-				snapshot.clear = pass.clear;
-				snapshot.preserve = pass.preserve;
+				snapshot.needsSwap = rp.needsSwap;
+				snapshot.input = rp.input;
+				snapshot.output = rp.output;
+				snapshot.clear = rp.clear;
+				snapshot.preserve = rp.preserve;
 				snapshot.hasClearColor = hasPassClearColor;
 				snapshot.clearColor0 = passClearColor?.[0] ?? 0;
 				snapshot.clearColor1 = passClearColor?.[1] ?? 0;
@@ -845,7 +1236,7 @@ async function createRenderer(options) {
 		/**
 		* Executes a full frame render.
 		*/
-		const render = ({ time, delta, renderMode, uniforms, textures, canvasSize }) => {
+		const render = ({ time, delta, renderMode, uniforms, textures, canvasSize, pendingStorageWrites }) => {
 			if (deviceLostMessage) throw new Error(deviceLostMessage);
 			if (uncapturedErrorMessage) {
 				const message = uncapturedErrorMessage;
@@ -883,8 +1274,18 @@ async function createRenderer(options) {
 				if (dirtyRanges.length > 0) uniformPrevious.set(uniformScratch);
 			}
 			let bindGroupDirty = false;
-			for (const binding of textureBindings) if (updateTextureBinding(binding, textures[binding.key] ?? normalizedTextureDefinitions[binding.key]?.source ?? null, renderMode)) bindGroupDirty = true;
+			for (const binding of textureBindings) {
+				if (storageTextureKeySet.has(binding.key)) continue;
+				if (updateTextureBinding(binding, textures[binding.key] ?? normalizedTextureDefinitions[binding.key]?.source ?? null, renderMode) && binding.fragmentVisible) bindGroupDirty = true;
+			}
 			if (bindGroupDirty) bindGroup = createBindGroup();
+			if (pendingStorageWrites) for (const write of pendingStorageWrites) {
+				const buffer = storageBufferMap.get(write.name);
+				if (buffer) {
+					const data = write.data;
+					device.queue.writeBuffer(buffer, write.offset, data.buffer, data.byteOffset, data.byteLength);
+				}
+			}
 			const commandEncoder = device.createCommandEncoder();
 			const passes = resolvePasses();
 			const clearColor = options.getClearColor();
@@ -909,6 +1310,49 @@ async function createRenderer(options) {
 				canvas: canvasSurface
 			} : null;
 			const sceneOutput = slots ? slots.source : canvasSurface;
+			if (slots) for (const step of graphPlan.steps) {
+				if (step.kind !== "compute") continue;
+				const computePass = step.pass;
+				if (computePass.getCompute && computePass.resolveDispatch && computePass.getWorkgroupSize) {
+					const computeSource = computePass.getCompute();
+					const pingPongTarget = computePass.isPingPong && computePass.getTarget ? computePass.getTarget() : void 0;
+					if (computePass.isPingPong && !pingPongTarget) throw new Error("PingPongComputePass must provide a target texture key.");
+					const pingPongPair = pingPongTarget ? ensurePingPongTexturePair(pingPongTarget) : null;
+					const pipelineEntry = buildComputePipelineEntry({
+						computeSource,
+						...pingPongPair ? {
+							pingPongTarget: pingPongPair.target,
+							pingPongFormat: pingPongPair.format
+						} : {}
+					});
+					const workgroupSize = computePass.getWorkgroupSize();
+					const storageBindGroup = getComputeStorageBindGroup();
+					const storageTextureBindGroup = getComputeStorageTextureBindGroup();
+					const iterations = computePass.isPingPong && computePass.getIterations ? computePass.getIterations() : 1;
+					const currentOutput = computePass.isPingPong && computePass.getCurrentOutput ? computePass.getCurrentOutput() : null;
+					const readFromAAtIterationZero = pingPongPair && currentOutput ? currentOutput !== `${pingPongPair.target}B` : true;
+					for (let iter = 0; iter < iterations; iter += 1) {
+						const dispatch = computePass.resolveDispatch({
+							width,
+							height,
+							time,
+							delta,
+							workgroupSize
+						});
+						const cPass = commandEncoder.beginComputePass();
+						cPass.setPipeline(pipelineEntry.pipeline);
+						cPass.setBindGroup(0, pipelineEntry.bindGroup);
+						if (storageBindGroup) cPass.setBindGroup(1, storageBindGroup);
+						if (pingPongPair) {
+							const readFromA = iter % 2 === 0 ? readFromAAtIterationZero : !readFromAAtIterationZero;
+							cPass.setBindGroup(2, getPingPongStorageTextureBindGroup(pingPongPair.target, readFromA));
+						} else if (storageTextureBindGroup) cPass.setBindGroup(2, storageTextureBindGroup);
+						cPass.dispatchWorkgroups(dispatch[0], dispatch[1], dispatch[2]);
+						cPass.end();
+					}
+					if (computePass.isPingPong && computePass.advanceFrame) computePass.advanceFrame();
+				}
+			}
 			const scenePass = commandEncoder.beginRenderPass({ colorAttachments: [{
 				view: sceneOutput.view,
 				clearValue: {
@@ -922,6 +1366,7 @@ async function createRenderer(options) {
 			}] });
 			scenePass.setPipeline(pipeline);
 			scenePass.setBindGroup(0, bindGroup);
+			if (fragmentStorageBindGroup) scenePass.setBindGroup(1, fragmentStorageBindGroup);
 			scenePass.draw(3);
 			scenePass.end();
 			if (slots) {
@@ -934,6 +1379,7 @@ async function createRenderer(options) {
 					return named;
 				};
 				for (const step of graphPlan.steps) {
+					if (step.kind === "compute") continue;
 					const input = resolveStepSurface(step.input);
 					const output = resolveStepSurface(step.output);
 					step.pass.render({
@@ -983,11 +1429,25 @@ async function createRenderer(options) {
 		initializationCleanups.length = 0;
 		return {
 			render,
+			getStorageBuffer: (name) => {
+				return storageBufferMap.get(name);
+			},
+			getDevice: () => {
+				return device;
+			},
 			destroy: () => {
 				isDestroyed = true;
 				device.removeEventListener("uncapturederror", handleUncapturedError);
 				frameBuffer.destroy();
 				uniformBuffer.destroy();
+				for (const buffer of storageBufferMap.values()) buffer.destroy();
+				storageBufferMap.clear();
+				for (const pair of pingPongTexturePairs.values()) {
+					pair.textureA.destroy();
+					pair.textureB.destroy();
+				}
+				pingPongTexturePairs.clear();
+				computePipelineCache.clear();
 				destroyRenderTexture(sourceSlotTarget);
 				destroyRenderTexture(targetSlotTarget);
 				for (const target of runtimeRenderTargets.values()) target.texture.destroy();