@motion-core/motion-gpu 0.5.0 → 0.6.0

package/src/lib/core/error-report.ts

@@ -211,6 +211,19 @@ function buildSourceFromDiagnostics(error: unknown): MotionGPUErrorSource | null
 		};
 	}
 
+	if (location.kind === 'compute') {
+		const computeSource = diagnostics.computeSource ?? diagnostics.fragmentSource;
+		const component = 'Compute shader';
+		const locationLabel = formatShaderSourceLocation(location) ?? `compute line ${location.line}`;
+		return {
+			component,
+			location: `${component} (${locationLabel})`,
+			line: location.line,
+			...(column !== undefined ? { column } : {}),
+			snippet: toSnippet(computeSource, location.line)
+		};
+	}
+
 	const defineName = location.define ?? 'unknown';
 	const defineLine = Math.max(1, location.line);
 	const component = `#define ${defineName}`;
@@ -516,7 +529,19 @@ export function toMotionGPUErrorReport(
 		error instanceof Error && error.stack
 			? splitLines(error.stack).filter((line) => line !== message)
 			: [];
-	const classification = classifyErrorMessage(rawMessage);
+	let classification = classifyErrorMessage(rawMessage);
+	if (
+		shaderDiagnostics?.shaderStage === 'compute' &&
+		classification.code === 'WGSL_COMPILATION_FAILED'
+	) {
+		classification = {
+			code: 'COMPUTE_COMPILATION_FAILED',
+			severity: 'error',
+			recoverable: true,
+			title: 'Compute shader compilation failed',
+			hint: 'Check WGSL compute shader sources below and verify storage bindings.'
+		};
+	}
 
 	return {
 		code: classification.code,

package/src/lib/core/material.ts

@@ -542,7 +542,8 @@ function buildTextureConfigSignature<TTextureKey extends string>(
 			normalized.anisotropy,
 			normalized.filter,
 			normalized.addressModeU,
-			normalized.addressModeV
+			normalized.addressModeV,
+			normalized.fragmentVisible ? '1' : '0'
 		].join(':');
 	}
 

package/src/lib/core/renderer.ts

@@ -18,11 +18,12 @@ import {
 } from './textures.js';
 import { packUniformsInto } from './uniforms.js';
 import {
-	buildComputeShaderSource,
-	buildPingPongComputeShaderSource,
+	buildComputeShaderSourceWithMap,
+	buildPingPongComputeShaderSourceWithMap,
 	extractWorkgroupSize,
 	storageTextureSampleScalarType
 } from './compute-shader.js';
+import { createComputeStorageBindGroupCache } from './compute-bindgroup-cache.js';
 import { normalizeStorageBufferDefinition } from './storage-buffers.js';
 import type {
 	AnyPass,
@@ -62,6 +63,7 @@ interface RuntimeTextureBinding {
 	key: string;
 	samplerBinding: number;
 	textureBinding: number;
+	fragmentVisible: boolean;
 	sampler: GPUSampler;
 	fallbackTexture: GPUTexture;
 	fallbackView: GPUTextureView;
@@ -109,6 +111,8 @@ interface PingPongTexturePair {
 	textureB: GPUTexture;
 	viewB: GPUTextureView;
 	bindGroupLayout: GPUBindGroupLayout;
+	readAWriteBBindGroup: GPUBindGroup | null;
+	readBWriteABindGroup: GPUBindGroup | null;
 }
 
 /**
@@ -187,6 +191,7 @@ async function assertCompilation(
 	options?: {
 		lineMap?: ShaderLineMap;
 		fragmentSource?: string;
+		computeSource?: string;
 		includeSources?: Record<string, string>;
 		defineBlockSource?: string;
 		materialSource?: {
@@ -197,6 +202,8 @@ async function assertCompilation(
 			functionName?: string;
 		} | null;
 		runtimeContext?: ShaderCompilationRuntimeContext;
+		errorPrefix?: string;
+		shaderStage?: 'fragment' | 'compute';
 	}
 ): Promise<void> {
 	const info = await module.getCompilationInfo();
@@ -227,11 +234,14 @@ async function assertCompilation(
 			return `[${contextLabel.join(' | ')}] ${diagnostic.message}`;
 		})
 		.join('\n');
-	const error = new Error(`WGSL compilation failed:\n${summary}`);
+	const prefix = options?.errorPrefix ?? 'WGSL compilation failed';
+	const error = new Error(`${prefix}:\n${summary}`);
 	throw attachShaderCompilationDiagnostics(error, {
 		kind: 'shader-compilation',
+		...(options?.shaderStage !== undefined ? { shaderStage: options.shaderStage } : {}),
 		diagnostics,
 		fragmentSource: options?.fragmentSource ?? '',
+		...(options?.computeSource !== undefined ? { computeSource: options.computeSource } : {}),
 		includeSources: options?.includeSources ?? {},
 		...(options?.defineBlockSource !== undefined
 			? { defineBlockSource: options.defineBlockSource }
@@ -245,6 +255,64 @@ function toSortedUniqueStrings(values: string[]): string[] {
 	return Array.from(new Set(values)).sort((a, b) => a.localeCompare(b));
 }
 
+function extractGeneratedLineFromComputeError(message: string): number | null {
+	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: {
+	error: unknown;
+	lineMap: ShaderLineMap;
+	computeSource: string;
+	runtimeContext: ShaderCompilationRuntimeContext;
+}): Error {
+	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 sourceLabel = formatShaderSourceLocation(sourceLocation);
+	const generatedLineLabel = generatedLine > 0 ? `generated WGSL line ${generatedLine}` : null;
+	const contextLabel = [sourceLabel, generatedLineLabel].filter((value) => Boolean(value));
+	const summary =
+		contextLabel.length > 0
+			? `[${contextLabel.join(' | ')}] ${baseError.message}`
+			: baseError.message;
+	const wrapped = new Error(`Compute shader compilation failed:\n${summary}`);
+
+	return attachShaderCompilationDiagnostics(wrapped, {
+		kind: 'shader-compilation',
+		shaderStage: 'compute',
+		diagnostics,
+		fragmentSource: '',
+		computeSource: input.computeSource,
+		includeSources: {},
+		materialSource: null,
+		runtimeContext: input.runtimeContext
+	});
+}
+
 function buildPassGraphSnapshot(
 	passes: AnyPass[] | undefined
 ): NonNullable<ShaderCompilationRuntimeContext['passGraph']> {
@@ -667,10 +735,13 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 	try {
 		const runtimeContext = buildShaderCompilationRuntimeContext(options);
 		const convertLinearToSrgb = shouldConvertLinearToSrgb(options.outputColorSpace, format);
+		const fragmentTextureKeys = options.textureKeys.filter(
+			(key) => options.textureDefinitions[key]?.fragmentVisible !== false
+		);
 		const builtShader = buildShaderSourceWithMap(
 			options.fragmentWgsl,
 			options.uniformLayout,
-			options.textureKeys,
+			fragmentTextureKeys,
 			{
 				convertLinearToSrgb,
 				fragmentLineMap: options.fragmentLineMap,
@@ -702,13 +773,18 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 		const storageBufferDefinitions = options.storageBufferDefinitions ?? {};
 		const storageTextureKeys = options.storageTextureKeys ?? [];
 		const storageTextureKeySet = new Set(storageTextureKeys);
-		const textureBindings = options.textureKeys.map((key, index): RuntimeTextureBinding => {
+		const fragmentTextureIndexByKey = new Map(
+			fragmentTextureKeys.map((key, index) => [key, index] as const)
+		);
+		const textureBindings = options.textureKeys.map((key): RuntimeTextureBinding => {
 			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 !== undefined;
+			const { samplerBinding, textureBinding } = getTextureBindings(fragmentTextureIndex ?? 0);
 			const sampler = device.createSampler({
 				magFilter: config.filter,
 				minFilter: config.filter,
@@ -731,6 +807,7 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 				key,
 				samplerBinding,
 				textureBinding,
+				fragmentVisible,
 				sampler,
 				fallbackTexture,
 				fallbackView,
@@ -779,9 +856,49 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 
 			return runtimeBinding;
 		});
+		const textureBindingByKey = new Map(textureBindings.map((binding) => [binding.key, binding]));
+		const fragmentTextureBindings = textureBindings.filter((binding) => binding.fragmentVisible);
+
+		const computeStorageBufferLayoutEntries: GPUBindGroupLayoutEntry[] = storageBufferKeys.map(
+			(key, index) => {
+				const def = storageBufferDefinitions[key];
+				const access = def?.access ?? 'read-write';
+				const bufferType: GPUBufferBindingType =
+					access === '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: GPUBindGroupLayoutEntry[] = storageTextureKeys.map(
+			(key, index) => {
+				const config = normalizedTextureDefinitions[key];
+				return {
+					binding: index,
+					visibility: GPUShaderStage.COMPUTE,
+					storageTexture: {
+						access: 'write-only' as GPUStorageTextureAccess,
+						format: (config?.format ?? 'rgba8unorm') as GPUTextureFormat,
+						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(textureBindings)
+			entries: createBindGroupLayoutEntries(fragmentTextureBindings)
 		});
 		const fragmentStorageBindGroupLayout =
 			storageBufferKeys.length > 0
@@ -977,7 +1094,9 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 				viewA: textureA.createView(),
 				textureB,
 				viewB: textureB.createView(),
-				bindGroupLayout
+				bindGroupLayout,
+				readAWriteBBindGroup: null,
+				readBWriteABindGroup: null
 			};
 			pingPongTexturePairs.set(target, pair);
 			return pair;
@@ -1028,8 +1147,8 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 			const isPingPongPipeline = Boolean(
 				buildOptions.pingPongTarget && buildOptions.pingPongFormat
 			);
-			const shaderCode = isPingPongPipeline
-				? buildPingPongComputeShaderSource({
+			const builtComputeShader = isPingPongPipeline
+				? buildPingPongComputeShaderSourceWithMap({
 						compute: buildOptions.computeSource,
 						uniformLayout: options.uniformLayout,
 						storageBufferKeys,
@@ -1037,7 +1156,7 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 						target: buildOptions.pingPongTarget!,
 						targetFormat: buildOptions.pingPongFormat!
 					})
-				: buildComputeShaderSource({
+				: buildComputeShaderSourceWithMap({
 						compute: buildOptions.computeSource,
 						uniformLayout: options.uniformLayout,
 						storageBufferKeys,
@@ -1046,7 +1165,7 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 						storageTextureDefinitions: storageTextureDefs
 					});
 
-			const computeShaderModule = device.createShaderModule({ code: shaderCode });
+			const computeShaderModule = device.createShaderModule({ code: builtComputeShader.code });
 			const workgroupSize = extractWorkgroupSize(buildOptions.computeSource);
 
 			// Compute bind group layout: group(0)=uniforms, group(1)=storage buffers, group(2)=storage textures
@@ -1065,20 +1184,9 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 				]
 			});
 
-			const storageBGLEntries: GPUBindGroupLayoutEntry[] = storageBufferKeys.map((key, index) => {
-				const def = storageBufferDefinitions[key];
-				const access = def?.access ?? 'read-write';
-				const bufferType: GPUBufferBindingType =
-					access === 'read' ? 'read-only-storage' : 'storage';
-				return {
-					binding: index,
-					visibility: GPUShaderStage.COMPUTE,
-					buffer: { type: bufferType }
-				};
-			});
 			const storageBGL =
-				storageBGLEntries.length > 0
-					? device.createBindGroupLayout({ entries: storageBGLEntries })
+				computeStorageBufferLayoutEntries.length > 0
+					? device.createBindGroupLayout({ entries: computeStorageBufferLayoutEntries })
 					: null;
 
 			const storageTextureBGLEntries: GPUBindGroupLayoutEntry[] = isPingPongPipeline
@@ -1104,18 +1212,7 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 							}
 						}
 					]
-				: storageTextureKeys.map((key, index) => {
-						const texDef = options.textureDefinitions[key];
-						return {
-							binding: index,
-							visibility: GPUShaderStage.COMPUTE,
-							storageTexture: {
-								access: 'write-only' as GPUStorageTextureAccess,
-								format: (texDef?.format ?? 'rgba8unorm') as GPUTextureFormat,
-								viewDimension: '2d'
-							}
-						};
-					});
+				: computeStorageTextureLayoutEntries;
 			const storageTextureBGL =
 				storageTextureBGLEntries.length > 0
 					? device.createBindGroupLayout({ entries: storageTextureBGLEntries })
@@ -1133,13 +1230,23 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 			}
 
 			const computePipelineLayout = device.createPipelineLayout({ bindGroupLayouts });
-			const pipeline = device.createComputePipeline({
-				layout: computePipelineLayout,
-				compute: {
-					module: computeShaderModule,
-					entryPoint: 'compute'
-				}
-			});
+			let pipeline: GPUComputePipeline;
+			try {
+				pipeline = device.createComputePipeline({
+					layout: computePipelineLayout,
+					compute: {
+						module: computeShaderModule,
+						entryPoint: 'compute'
+					}
+				});
+			} catch (error) {
+				throw toComputeCompilationError({
+					error,
+					lineMap: builtComputeShader.lineMap,
+					computeSource: buildOptions.computeSource,
+					runtimeContext
+				});
+			}
 
 			// Build uniform bind group for compute (group 0)
 			const computeUniformBindGroup = device.createBindGroup({
@@ -1162,63 +1269,49 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 
 		// Helper to get the storage bind group for dispatch
 		const getComputeStorageBindGroup = (): GPUBindGroup | null => {
-			if (storageBufferKeys.length === 0) {
+			if (computeStorageBufferLayoutEntries.length === 0) {
 				return null;
 			}
-			// Rebuild bind group with current storage buffers
-			const storageBGLEntries: GPUBindGroupLayoutEntry[] = storageBufferKeys.map((key, index) => {
-				const def = storageBufferDefinitions[key];
-				const access = def?.access ?? 'read-write';
-				const bufferType: GPUBufferBindingType =
-					access === 'read' ? 'read-only-storage' : 'storage';
-				return {
-					binding: index,
-					visibility: GPUShaderStage.COMPUTE,
-					buffer: { type: bufferType }
-				};
-			});
-			const storageBGL = device.createBindGroupLayout({ entries: storageBGLEntries });
-			const storageEntries: GPUBindGroupEntry[] = storageBufferKeys.map((key, index) => {
+			const resources: GPUBuffer[] = storageBufferKeys.map((key) => {
 				const buffer = storageBufferMap.get(key);
 				if (!buffer) {
 					throw new Error(`Storage buffer "${key}" not allocated.`);
 				}
+				return buffer;
+			});
+			const storageEntries: GPUBindGroupEntry[] = resources.map((buffer, index) => {
 				return { binding: index, resource: { buffer } };
 			});
-			return device.createBindGroup({
-				layout: storageBGL,
-				entries: storageEntries
+			return computeStorageBufferBindGroupCache.getOrCreate({
+				topologyKey: computeStorageBufferTopologyKey,
+				layoutEntries: computeStorageBufferLayoutEntries,
+				bindGroupEntries: storageEntries,
+				resourceRefs: resources
 			});
 		};
 
 		// Helper to get the storage texture bind group for compute dispatch (group 2)
 		const getComputeStorageTextureBindGroup = (): GPUBindGroup | null => {
-			if (storageTextureKeys.length === 0) {
+			if (computeStorageTextureLayoutEntries.length === 0) {
 				return null;
 			}
-			const entries: GPUBindGroupLayoutEntry[] = storageTextureKeys.map((key, index) => {
-				const texDef = options.textureDefinitions[key];
-				return {
-					binding: index,
-					visibility: GPUShaderStage.COMPUTE,
-					storageTexture: {
-						access: 'write-only' as GPUStorageTextureAccess,
-						format: (texDef?.format ?? 'rgba8unorm') as GPUTextureFormat,
-						viewDimension: '2d' as GPUTextureViewDimension
-					}
-				};
-			});
-			const bgl = device.createBindGroupLayout({ entries });
-
-			const bgEntries: GPUBindGroupEntry[] = storageTextureKeys.map((key, index) => {
-				const binding = textureBindings.find((b) => b.key === key);
+			const resources: GPUTextureView[] = storageTextureKeys.map((key) => {
+				const binding = textureBindingByKey.get(key);
 				if (!binding || !binding.texture) {
 					throw new Error(`Storage texture "${key}" not allocated.`);
 				}
-				return { binding: index, resource: binding.view };
+				return binding.view;
+			});
+			const bgEntries: GPUBindGroupEntry[] = resources.map((view, index) => {
+				return { binding: index, resource: view };
 			});
 
-			return device.createBindGroup({ layout: bgl, entries: bgEntries });
+			return computeStorageTextureBindGroupCache.getOrCreate({
+				topologyKey: computeStorageTextureTopologyKey,
+				layoutEntries: computeStorageTextureLayoutEntries,
+				bindGroupEntries: bgEntries,
+				resourceRefs: resources
+			});
 		};
 
 		// Helper to get ping-pong storage texture bind group for compute dispatch (group 2)
@@ -1227,15 +1320,28 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 			readFromA: boolean
 		): GPUBindGroup => {
 			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 }
-				]
-			});
+			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({
@@ -1267,7 +1373,7 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 				{ binding: UNIFORM_BINDING, resource: { buffer: uniformBuffer } }
 			];
 
-			for (const binding of textureBindings) {
+			for (const binding of fragmentTextureBindings) {
 				entries.push({
 					binding: binding.samplerBinding,
 					resource: binding.sampler
@@ -1839,7 +1945,7 @@ export async function createRenderer(options: RendererOptions): Promise<Renderer
 				if (storageTextureKeySet.has(binding.key)) continue;
 				const nextTexture =
 					textures[binding.key] ?? normalizedTextureDefinitions[binding.key]?.source ?? null;
-				if (updateTextureBinding(binding, nextTexture, renderMode)) {
+				if (updateTextureBinding(binding, nextTexture, renderMode) && binding.fragmentVisible) {
 					bindGroupDirty = true;
 				}
 			}

package/src/lib/core/runtime-loop.ts

@@ -54,6 +54,8 @@ function getRendererRetryDelayMs(attempt: number): number {
 	return Math.min(8000, 250 * 2 ** Math.max(0, attempt - 1));
 }
 
+const ERROR_CLEAR_GRACE_MS = 750;
+
 export function createMotionGPURuntimeLoop(
 	options: MotionGPURuntimeLoopOptions
 ): MotionGPURuntimeLoop {
@@ -90,6 +92,16 @@ export function createMotionGPURuntimeLoop(
 	let shouldContinueAfterFrame = false;
 	let activeErrorKey: string | null = null;
 	let errorHistory: MotionGPUErrorReport[] = [];
+	let errorClearReadyAtMs = 0;
+	let lastFrameTimestampMs = performance.now();
+
+	const resolveNowMs = (nowMs?: number): number => {
+		if (typeof nowMs === 'number' && Number.isFinite(nowMs)) {
+			return nowMs;
+		}
+
+		return lastFrameTimestampMs;
+	};
 
 	const getHistoryLimit = (): number => {
 		const value = options.getErrorHistoryLimit?.() ?? 0;
@@ -129,12 +141,13 @@ export function createMotionGPURuntimeLoop(
 			return;
 		}
 
-		errorHistory = errorHistory.slice(errorHistory.length - limit);
+		errorHistory.splice(0, errorHistory.length - limit);
 		publishErrorHistory();
 	};
 
-	const setError = (error: unknown, phase: MotionGPUErrorPhase): void => {
+	const setError = (error: unknown, phase: MotionGPUErrorPhase, nowMs?: number): void => {
 		const report = toMotionGPUErrorReport(error, phase);
+		errorClearReadyAtMs = resolveNowMs(nowMs) + ERROR_CLEAR_GRACE_MS;
 		const reportKey = JSON.stringify({
 			phase: report.phase,
 			title: report.title,
@@ -147,9 +160,9 @@ export function createMotionGPURuntimeLoop(
 		activeErrorKey = reportKey;
 		const historyLimit = getHistoryLimit();
 		if (historyLimit > 0) {
-			errorHistory = [...errorHistory, report];
+			errorHistory.push(report);
 			if (errorHistory.length > historyLimit) {
-				errorHistory = errorHistory.slice(errorHistory.length - historyLimit);
+				errorHistory.splice(0, errorHistory.length - historyLimit);
 			}
 			publishErrorHistory();
 		}
@@ -166,12 +179,16 @@ export function createMotionGPURuntimeLoop(
 		}
 	};
 
-	const clearError = (): void => {
+	const maybeClearError = (nowMs?: number): void => {
 		if (activeErrorKey === null) {
 			return;
 		}
+		if (resolveNowMs(nowMs) < errorClearReadyAtMs) {
+			return;
+		}
 
 		activeErrorKey = null;
+		errorClearReadyAtMs = 0;
 		options.reportError(null);
 	};
 
@@ -200,13 +217,13 @@ export function createMotionGPURuntimeLoop(
 	const resetRuntimeMaps = (): void => {
 		for (const key of Object.keys(runtimeUniforms)) {
 			if (!uniformKeySet.has(key)) {
-				Reflect.deleteProperty(runtimeUniforms, key);
+				delete runtimeUniforms[key];
 			}
 		}
 
 		for (const key of Object.keys(runtimeTextures)) {
 			if (!textureKeySet.has(key)) {
-				Reflect.deleteProperty(runtimeTextures, key);
+				delete runtimeTextures[key];
 			}
 		}
 	};
@@ -214,13 +231,13 @@ export function createMotionGPURuntimeLoop(
 	const resetRenderPayloadMaps = (): void => {
 		for (const key of Object.keys(renderUniforms)) {
 			if (!uniformKeySet.has(key)) {
-				Reflect.deleteProperty(renderUniforms, key);
+				delete renderUniforms[key];
 			}
 		}
 
 		for (const key of Object.keys(renderTextures)) {
 			if (!textureKeySet.has(key)) {
-				Reflect.deleteProperty(renderTextures, key);
+				delete renderTextures[key];
 			}
 		}
 	};
@@ -345,13 +362,14 @@ export function createMotionGPURuntimeLoop(
 		if (isDisposed) {
 			return;
 		}
+		lastFrameTimestampMs = timestamp;
 		syncErrorHistory();
 
 		let materialState: ResolvedMaterial;
 		try {
 			materialState = resolveActiveMaterial();
 		} catch (error) {
-			setError(error, 'initialization');
+			setError(error, 'initialization', timestamp);
 			scheduleFrame();
 			return;
 		}
@@ -418,7 +436,7 @@ export function createMotionGPURuntimeLoop(
 						failedRendererSignature = null;
 						failedRendererAttempts = 0;
 						nextRendererRetryAt = 0;
-						clearError();
+						maybeClearError(performance.now());
 					} catch (error) {
 						failedRendererSignature = rendererSignature;
 						failedRendererAttempts += 1;
@@ -490,15 +508,18 @@ export function createMotionGPURuntimeLoop(
 					uniforms: renderUniforms,
 					textures: renderTextures,
 					canvasSize,
-					...(pendingStorageWrites.length > 0
-						? { pendingStorageWrites: pendingStorageWrites.splice(0) }
-						: {})
+					pendingStorageWrites: pendingStorageWrites.length > 0 ? pendingStorageWrites : undefined
 				});
+				// Clear in-place after synchronous render() completes — avoids
+				// the splice(0) copy and eliminates the conditional spread object.
+				if (pendingStorageWrites.length > 0) {
+					pendingStorageWrites.length = 0;
+				}
 			}
 
-			clearError();
+			maybeClearError(timestamp);
 		} catch (error) {
-			setError(error, 'render');
+			setError(error, 'render', timestamp);
 		} finally {
 			registry.endFrame();
 		}