@motion-core/motion-gpu 0.4.2 → 0.5.0

package/src/lib/svelte/MotionGPUErrorOverlay.svelte

@@ -16,7 +16,87 @@
 	};
 
 	const shouldShowErrorMessage = (value: MotionGPUErrorReport): boolean => {
-		return normalizeErrorText(value.message) !== normalizeErrorText(value.title);
+		return resolveDisplayMessage(value).length > 0;
+	};
+
+	const resolveDisplayMessage = (value: MotionGPUErrorReport): string => {
+		const rawMessage = value.message.trim();
+		if (rawMessage.length === 0) {
+			return '';
+		}
+
+		const normalizedMessage = normalizeErrorText(rawMessage);
+		const normalizedTitle = normalizeErrorText(value.title);
+		if (normalizedMessage === normalizedTitle) {
+			return '';
+		}
+
+		const escapedTitle = value.title.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+		const prefixPattern = new RegExp(`^${escapedTitle}\\s*[:\\-|]\\s*`, 'i');
+		const stripped = rawMessage.replace(prefixPattern, '').trim();
+		return stripped.length > 0 ? stripped : rawMessage;
+	};
+
+	const formatRuntimeContext = (context: MotionGPUErrorReport['context']): string => {
+		if (!context) {
+			return '';
+		}
+
+		const indentBlock = (value: string, spaces = 2): string => {
+			const prefix = ' '.repeat(spaces);
+			return value
+				.split('\n')
+				.map((line) => `${prefix}${line}`)
+				.join('\n');
+		};
+
+		const formatMaterialSignature = (value: string): string => {
+			const trimmed = value.trim();
+			if (trimmed.length === 0) {
+				return '<empty>';
+			}
+			try {
+				return JSON.stringify(JSON.parse(trimmed), null, 2);
+			} catch {
+				return trimmed;
+			}
+		};
+
+		const lines: string[] = [];
+		if (context.materialSignature) {
+			lines.push('materialSignature:');
+			lines.push(indentBlock(formatMaterialSignature(context.materialSignature)));
+		}
+		if (context.passGraph) {
+			lines.push('passGraph:');
+			lines.push(`  passCount: ${context.passGraph.passCount}`);
+			lines.push(`  enabledPassCount: ${context.passGraph.enabledPassCount}`);
+			lines.push('  inputs:');
+			if (context.passGraph.inputs.length === 0) {
+				lines.push('    - <none>');
+			} else {
+				for (const input of context.passGraph.inputs) {
+					lines.push(`    - ${input}`);
+				}
+			}
+			lines.push('  outputs:');
+			if (context.passGraph.outputs.length === 0) {
+				lines.push('    - <none>');
+			} else {
+				for (const output of context.passGraph.outputs) {
+					lines.push(`    - ${output}`);
+				}
+			}
+		}
+		lines.push('activeRenderTargets:');
+		if (context.activeRenderTargets.length === 0) {
+			lines.push('  - <none>');
+		} else {
+			for (const target of context.activeRenderTargets) {
+				lines.push(`  - ${target}`);
+			}
+		}
+		return lines.join('\n');
 	};
 </script>
 
@@ -30,16 +110,28 @@
 			data-testid="motiongpu-error"
 		>
 			<header class="motiongpu-error-header">
-				<div class="motiongpu-error-badge-wrap">
-					<p class="motiongpu-error-phase">
-						{report.phase}
-					</p>
+				<div class="motiongpu-error-header-top">
+					<div class="motiongpu-error-badges">
+						<div class="motiongpu-error-badge-wrap">
+							<p class="motiongpu-error-badge motiongpu-error-badge-phase">
+								{report.phase}
+							</p>
+						</div>
+						<div class="motiongpu-error-badge-wrap">
+							<p class="motiongpu-error-badge motiongpu-error-badge-severity">
+								{report.severity}
+							</p>
+						</div>
+					</div>
 				</div>
 				<h2 class="motiongpu-error-title">{report.title}</h2>
+				<p class="motiongpu-error-recoverable">
+					Recoverable: <span>{report.recoverable ? 'yes' : 'no'}</span>
+				</p>
 			</header>
 			<div class="motiongpu-error-body">
 				{#if shouldShowErrorMessage(report)}
-					<p class="motiongpu-error-message">{report.message}</p>
+					<p class="motiongpu-error-message">{resolveDisplayMessage(report)}</p>
 				{/if}
 				<p class="motiongpu-error-hint">{report.hint}</p>
 			</div>
@@ -87,6 +179,12 @@
 						<pre>{report.stack.join('\n')}</pre>
 					</details>
 				{/if}
+				{#if report.context}
+					<details class="motiongpu-error-details">
+						<summary>Runtime context</summary>
+						<pre>{formatRuntimeContext(report.context)}</pre>
+					</details>
+				{/if}
 			</div>
 		</section>
 	</div>
@@ -162,6 +260,19 @@
 		border-bottom: 1px solid var(--motiongpu-color-border);
 	}
 
+	.motiongpu-error-header-top {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.75rem;
+	}
+
+	.motiongpu-error-badges {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		flex-wrap: wrap;
+	}
+
 	.motiongpu-error-badge-wrap {
 		display: inline-flex;
 		align-items: center;
@@ -173,7 +284,7 @@
 		background: var(--motiongpu-color-background-muted);
 	}
 
-	.motiongpu-error-phase {
+	.motiongpu-error-badge {
 		display: inline-flex;
 		align-items: center;
 		margin: 0;
@@ -193,6 +304,20 @@
 		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
 	}
 
+	.motiongpu-error-recoverable {
+		margin: 0;
+		font-size: 0.67rem;
+		line-height: 1.2;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
+		color: var(--motiongpu-color-foreground-muted);
+	}
+
+	.motiongpu-error-recoverable span {
+		font-family: var(--motiongpu-font-mono);
+		color: var(--motiongpu-color-foreground);
+	}
+
 	.motiongpu-error-title {
 		margin: 0;
 		font-size: clamp(1.02rem, 1vw + 0.72rem, 1.32rem);
@@ -372,6 +497,11 @@
 		.motiongpu-error-title {
 			font-size: 1.02rem;
 		}
+
+		.motiongpu-error-header-top {
+			flex-direction: column;
+			align-items: flex-start;
+		}
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/src/lib/svelte/index.ts

@@ -3,7 +3,13 @@
  */
 export { default as FragCanvas } from './FragCanvas.svelte';
 export { defineMaterial } from '../core/material.js';
-export { BlitPass, CopyPass, ShaderPass } from '../passes/index.js';
+export {
+	BlitPass,
+	CopyPass,
+	ShaderPass,
+	ComputePass,
+	PingPongComputePass
+} from '../passes/index.js';
 export { useMotionGPU } from './motiongpu-context.js';
 export { useFrame } from './frame-context.js';
 export { useTexture } from './use-texture.js';
@@ -11,6 +17,8 @@ export type {
 	FrameInvalidationToken,
 	FrameState,
 	OutputColorSpace,
+	AnyPass,
+	ComputePassLike,
 	RenderPass,
 	RenderPassContext,
 	RenderPassFlags,
@@ -49,3 +57,12 @@ export type {
 export type { MotionGPUContext } from './motiongpu-context.js';
 export type { UseFrameOptions, UseFrameResult } from './frame-context.js';
 export type { TextureUrlInput, UseTextureResult } from './use-texture.js';
+export type {
+	StorageBufferAccess,
+	StorageBufferDefinition,
+	StorageBufferDefinitionMap,
+	StorageBufferType,
+	ComputePassContext
+} from '../core/types.js';
+export type { ComputePassOptions, ComputeDispatchContext } from '../passes/ComputePass.js';
+export type { PingPongComputePassOptions } from '../passes/PingPongComputePass.js';