@motion-core/motion-gpu 0.4.2 → 0.5.0

package/dist/core/renderer.js

@@ -1,9 +1,11 @@
 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 { buildComputeShaderSource, buildPingPongComputeShaderSource, extractWorkgroupSize, storageTextureSampleScalarType } from "./compute-shader.js";
 //#region src/lib/core/renderer.ts
 /**
 * Binding index for frame uniforms (`time`, `delta`, `resolution`).
@@ -28,6 +30,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) {
@@ -85,9 +95,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);
 	}
@@ -387,7 +399,9 @@ async function createRenderer(options) {
 		const convertLinearToSrgb = shouldConvertLinearToSrgb(options.outputColorSpace, format);
 		const builtShader = buildShaderSourceWithMap(options.fragmentWgsl, options.uniformLayout, options.textureKeys, {
 			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,6 +413,10 @@ async function createRenderer(options) {
 			runtimeContext
 		});
 		const normalizedTextureDefinitions = normalizeTextureDefinitions(options.textureDefinitions, options.textureKeys);
+		const storageBufferKeys = options.storageBufferKeys ?? [];
+		const storageBufferDefinitions = options.storageBufferDefinitions ?? {};
+		const storageTextureKeys = options.storageTextureKeys ?? [];
+		const storageTextureKeySet = new Set(storageTextureKeys);
 		const textureBindings = options.textureKeys.map((key, index) => {
 			const config = normalizedTextureDefinitions[key];
 			if (!config) throw new Error(`Missing texture definition for "${key}"`);
@@ -411,7 +429,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();
 			});
@@ -442,10 +460,34 @@ 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 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 +537,283 @@ 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
+			};
+			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 shaderCode = isPingPongPipeline ? buildPingPongComputeShaderSource({
+				compute: buildOptions.computeSource,
+				uniformLayout: options.uniformLayout,
+				storageBufferKeys,
+				storageBufferDefinitions: storageBufferDefs,
+				target: buildOptions.pingPongTarget,
+				targetFormat: buildOptions.pingPongFormat
+			}) : buildComputeShaderSource({
+				compute: buildOptions.computeSource,
+				uniformLayout: options.uniformLayout,
+				storageBufferKeys,
+				storageBufferDefinitions: storageBufferDefs,
+				storageTextureKeys,
+				storageTextureDefinitions: storageTextureDefs
+			});
+			const computeShaderModule = device.createShaderModule({ code: shaderCode });
+			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 storageBGLEntries = 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 storageBGL = storageBGLEntries.length > 0 ? device.createBindGroupLayout({ entries: storageBGLEntries }) : 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"
+				}
+			}] : storageTextureKeys.map((key, index) => {
+				const texDef = options.textureDefinitions[key];
+				return {
+					binding: index,
+					visibility: GPUShaderStage.COMPUTE,
+					storageTexture: {
+						access: "write-only",
+						format: texDef?.format ?? "rgba8unorm",
+						viewDimension: "2d"
+					}
+				};
+			});
+			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 });
+			const entry = {
+				pipeline: device.createComputePipeline({
+					layout: computePipelineLayout,
+					compute: {
+						module: computeShaderModule,
+						entryPoint: "compute"
+					}
+				}),
+				bindGroup: device.createBindGroup({
+					layout: computeUniformBGL,
+					entries: [{
+						binding: FRAME_BINDING,
+						resource: { buffer: frameBuffer }
+					}, {
+						binding: UNIFORM_BINDING,
+						resource: { buffer: uniformBuffer }
+					}]
+				}),
+				workgroupSize,
+				computeSource: buildOptions.computeSource
+			};
+			computePipelineCache.set(cacheKey, entry);
+			return entry;
+		};
+		const getComputeStorageBindGroup = () => {
+			if (storageBufferKeys.length === 0) return null;
+			const storageBGLEntries = 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 storageBGL = device.createBindGroupLayout({ entries: storageBGLEntries });
+			const storageEntries = storageBufferKeys.map((key, index) => {
+				const buffer = storageBufferMap.get(key);
+				if (!buffer) throw new Error(`Storage buffer "${key}" not allocated.`);
+				return {
+					binding: index,
+					resource: { buffer }
+				};
+			});
+			return device.createBindGroup({
+				layout: storageBGL,
+				entries: storageEntries
+			});
+		};
+		const getComputeStorageTextureBindGroup = () => {
+			if (storageTextureKeys.length === 0) return null;
+			const entries = storageTextureKeys.map((key, index) => {
+				const texDef = options.textureDefinitions[key];
+				return {
+					binding: index,
+					visibility: GPUShaderStage.COMPUTE,
+					storageTexture: {
+						access: "write-only",
+						format: texDef?.format ?? "rgba8unorm",
+						viewDimension: "2d"
+					}
+				};
+			});
+			const bgl = device.createBindGroupLayout({ entries });
+			const bgEntries = storageTextureKeys.map((key, index) => {
+				const binding = textureBindings.find((b) => b.key === key);
+				if (!binding || !binding.texture) throw new Error(`Storage texture "${key}" not allocated.`);
+				return {
+					binding: index,
+					resource: binding.view
+				};
+			});
+			return device.createBindGroup({
+				layout: bgl,
+				entries: bgEntries
+			});
+		};
+		const getPingPongStorageTextureBindGroup = (target, readFromA) => {
+			const pair = ensurePingPongTexturePair(target);
+			const readView = readFromA ? pair.viewA : pair.viewB;
+			const writeView = readFromA ? pair.viewB : pair.viewA;
+			return device.createBindGroup({
+				layout: pair.bindGroupLayout,
+				entries: [{
+					binding: 0,
+					resource: readView
+				}, {
+					binding: 1,
+					resource: writeView
+				}]
+			});
+		};
 		const frameBuffer = device.createBuffer({
 			size: 16,
 			usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
@@ -588,6 +907,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 +917,7 @@ async function createRenderer(options) {
 				},
 				format,
 				mipLevelCount,
-				usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT
+				usage: textureUsage
 			});
 			registerInitializationCleanup(() => {
 				texture.destroy();
@@ -618,7 +939,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 +991,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 +1017,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 +1041,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 +1171,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 +1209,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)) 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 +1245,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 +1301,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 +1314,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 +1364,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();