From 729d10592f4e802f91c555c309ff3ba4b119f843 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 19 Apr 2026 07:42:52 +0200
Subject: fix: WebGL frame rendering and opencut-wasm 0.2.8

---
 apps/web/src/services/renderer/effect-preview.ts | 68 +++++++++++++-----------
 1 file changed, 38 insertions(+), 30 deletions(-)

(limited to 'apps/web/src/services/renderer/effect-preview.ts')

diff --git a/apps/web/src/services/renderer/effect-preview.ts b/apps/web/src/services/renderer/effect-preview.ts
index 8e081039..06e64d0e 100644
--- a/apps/web/src/services/renderer/effect-preview.ts
+++ b/apps/web/src/services/renderer/effect-preview.ts
@@ -18,11 +18,7 @@ class EffectPreviewService {
 		this.loadPreviewImage();
 	}
 
-	onPreviewImageReady({
-		callback,
-	}: {
-		callback: () => void;
-	}): () => void {
+	onPreviewImageReady({ callback }: { callback: () => void }): () => void {
 		this.onReadyCallbacks.add(callback);
 		return () => this.onReadyCallbacks.delete(callback);
 	}
@@ -39,35 +35,47 @@ class EffectPreviewService {
 		uniformDimensions?: { width: number; height: number };
 	}): void {
 		const size = PREVIEW_SIZE;
-		const source = this.getTestSource({ width: size, height: size });
-		if (!source) return;
-
-		const definition = effectsRegistry.get(effectType);
-		const resolvedParams =
-			Object.keys(params).length > 0
-				? params
-				: buildDefaultParamValues(definition.params);
-
-		const passes = resolveEffectPasses({
-			definition,
-			effectParams: resolvedParams,
-			width: uniformDimensions?.width ?? size,
-			height: uniformDimensions?.height ?? size,
-		});
-		const result = this.applyGpuEffect({
-			source,
-			width: size,
-			height: size,
-			passes,
-		});
-
 		const targetCtx = targetCanvas.getContext(
 			"2d",
 		) as CanvasRenderingContext2D | null;
-		if (targetCtx) {
-			targetCanvas.width = size;
-			targetCanvas.height = size;
+		if (!targetCtx) {
+			return;
+		}
+
+		targetCanvas.width = size;
+		targetCanvas.height = size;
+
+		const source = this.getTestSource({ width: size, height: size });
+		if (!source) {
+			targetCtx.clearRect(0, 0, size, size);
+			return;
+		}
+
+		try {
+			const definition = effectsRegistry.get(effectType);
+			const resolvedParams =
+				Object.keys(params).length > 0
+					? params
+					: buildDefaultParamValues(definition.params);
+
+			const passes = resolveEffectPasses({
+				definition,
+				effectParams: resolvedParams,
+				width: uniformDimensions?.width ?? size,
+				height: uniformDimensions?.height ?? size,
+			});
+			const result = this.applyGpuEffect({
+				source,
+				width: size,
+				height: size,
+				passes,
+			});
+
 			targetCtx.drawImage(result, 0, 0, size, size);
+		} catch (error) {
+			console.warn("Failed to render effect preview", { effectType, error });
+			targetCtx.clearRect(0, 0, size, size);
+			targetCtx.drawImage(source, 0, 0, size, size);
 		}
 	}
 
-- 
cgit v1.3.1