fix: WebGL frame rendering and opencut-wasm 0.2.8

Author: mazeincoding

Cargo.lock

@@ -1,6 +1,6 @@
 use gpui::{
-    App, Application, Bounds, Context, SharedString, Window, WindowBounds, WindowOptions, div,
-    prelude::*, px, rgb, size,
+    div, prelude::*, px, rgb, size, App, Application, Bounds, Context, SharedString, Window,
+    WindowBounds, WindowOptions,
 };
 
 struct AppWindow {

apps/desktop/src/main.rs

@@ -52,7 +52,7 @@
     "nanoid": "^5.1.5",
     "next": "16.1.3",
     "next-themes": "^0.4.4",
-    "opencut-wasm": "^0.2.6",
+    "opencut-wasm": "^0.2.8",
     "pg": "^8.16.2",
     "postgres": "^3.4.5",
     "radix-ui": "^1.4.3",

apps/web/package.json

@@ -10,7 +10,10 @@ import { useKeybindingsStore } from "@/stores/keybindings-store";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { useEditorActions } from "@/hooks/actions/use-editor-actions";
 import { loadFontAtlas } from "@/lib/fonts/google-fonts";
-import { initializeGpuRenderer, isGpuAvailable } from "@/services/renderer/gpu-renderer";
+import {
+	initializeGpuRenderer,
+	isGpuAvailable,
+} from "@/services/renderer/gpu-renderer";
 
 interface EditorProviderProps {
 	projectId: string;
@@ -62,9 +65,16 @@ export function EditorProvider({ projectId, children }: EditorProviderProps) {
 						setIsLoading(false);
 					}
 				} else {
-					setError(
-						err instanceof Error ? err.message : "Failed to load project",
-					);
+					const wasmPanic = (window as Window & { __wasmPanic?: string })
+						.__wasmPanic;
+					if (wasmPanic) {
+						delete (window as Window & { __wasmPanic?: string }).__wasmPanic;
+						setError(wasmPanic);
+					} else {
+						setError(
+							err instanceof Error ? err.message : "Failed to load project",
+						);
+					}
 					setIsLoading(false);
 				}
 			}

apps/web/src/components/providers/editor-provider.tsx

@@ -167,9 +167,13 @@ export class ProjectManager {
 			});
 
 			if (!project.metadata.thumbnail) {
-				const didUpdateThumbnail = await this.updateThumbnailFromTimeline();
-				if (didUpdateThumbnail) {
-					await this.saveCurrentProject();
+				try {
+					const didUpdateThumbnail = await this.updateThumbnailFromTimeline();
+					if (didUpdateThumbnail) {
+						await this.saveCurrentProject();
+					}
+				} catch (error) {
+					console.error("Failed to generate project thumbnail:", error);
 				}
 			}
 		} catch (error) {

apps/web/src/core/managers/project-manager.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);
 		}
 	}
 

apps/web/src/services/renderer/effect-preview.ts

@@ -288,6 +288,59 @@ impl Compositor {
         self.textures.remove(id);
     }
 
+    /// Composites all frame items into a texture and returns it.
+    /// Used on backends that cannot surface-render to an arbitrary canvas (e.g. WebGL).
+    pub fn render_frame_to_texture(
+        &mut self,
+        context: &GpuContext,
+        frame: &FrameDescriptor,
+    ) -> Result<wgpu::Texture, CompositorError> {
+        self.texture_pool.recycle_frame();
+        let mut encoder =
+            context
+                .device()
+                .create_command_encoder(&wgpu::CommandEncoderDescriptor {
+                    label: Some("compositor-frame-encoder"),
+                });
+        let mut scene = self.create_cleared_texture(
+            context,
+            &mut encoder,
+            frame.width,
+            frame.height,
+            frame.clear.color,
+        );
+
+        for item in &frame.items {
+            match item {
+                FrameItemDescriptor::Layer(layer) => {
+                    let layer_texture = self.render_layer(context, &mut encoder, frame, layer)?;
+                    scene = self.blend_texture(
+                        context,
+                        &mut encoder,
+                        &scene,
+                        &layer_texture,
+                        layer.blend_mode,
+                        frame.width,
+                        frame.height,
+                    )?;
+                }
+                FrameItemDescriptor::SceneEffect { effect_pass_groups } => {
+                    scene = self.apply_effect_groups(
+                        context,
+                        &mut encoder,
+                        &scene,
+                        frame.width,
+                        frame.height,
+                        effect_pass_groups,
+                    )?;
+                }
+            }
+        }
+
+        context.queue().submit([encoder.finish()]);
+        Ok(scene)
+    }
+
     pub fn render_frame(
         &mut self,
         context: &GpuContext,

bun.lock

@@ -11,6 +11,7 @@ struct LayerUniforms {
     opacity: f32,
     flip_x: f32,
     flip_y: f32,
+    _padding: vec2f,
 }
 
 @group(0) @binding(0) var source_texture: texture_2d<f32>;

rust/crates/compositor/src/compositor.rs

@@ -10,7 +10,7 @@ wgpu = "29.0.1"
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 wasm-bindgen = "0.2.116"
-web-sys = { version = "0.3.93", features = ["Document", "Window", "HtmlCanvasElement", "OffscreenCanvasRenderingContext2d", "ImageData"] }
+web-sys = { version = "0.3.93", features = ["Document", "Window", "HtmlCanvasElement", "CanvasRenderingContext2d", "OffscreenCanvasRenderingContext2d", "ImageData"] }
 
 [features]
 default = []