From 729d10592f4e802f91c555c309ff3ba4b119f843 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Sun, 19 Apr 2026 07:42:52 +0200 Subject: fix: WebGL frame rendering and opencut-wasm 0.2.8 --- rust/crates/compositor/src/compositor.rs | 53 +++++++ rust/crates/compositor/src/shaders/layer.wgsl | 1 + rust/crates/gpu/Cargo.toml | 2 +- rust/crates/gpu/src/context.rs | 207 +++++++++++++++++++------- rust/wasm/Cargo.toml | 2 +- rust/wasm/src/compositor.rs | 52 ++++--- rust/wasm/src/gpu.rs | 20 ++- 7 files changed, 263 insertions(+), 74 deletions(-) (limited to 'rust') diff --git a/rust/crates/compositor/src/compositor.rs b/rust/crates/compositor/src/compositor.rs index c0e6ec3b..84bcceae 100644 --- a/rust/crates/compositor/src/compositor.rs +++ b/rust/crates/compositor/src/compositor.rs @@ -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 { + 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, diff --git a/rust/crates/compositor/src/shaders/layer.wgsl b/rust/crates/compositor/src/shaders/layer.wgsl index 9e335687..61457d84 100644 --- a/rust/crates/compositor/src/shaders/layer.wgsl +++ b/rust/crates/compositor/src/shaders/layer.wgsl @@ -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; diff --git a/rust/crates/gpu/Cargo.toml b/rust/crates/gpu/Cargo.toml index 4ee7571e..ff465324 100644 --- a/rust/crates/gpu/Cargo.toml +++ b/rust/crates/gpu/Cargo.toml @@ -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 = [] diff --git a/rust/crates/gpu/src/context.rs b/rust/crates/gpu/src/context.rs index e72a959b..39070ec2 100644 --- a/rust/crates/gpu/src/context.rs +++ b/rust/crates/gpu/src/context.rs @@ -40,10 +40,17 @@ pub struct GpuContext { texture_sampler_bind_group_layout: wgpu::BindGroupLayout, blit_pipeline: wgpu::RenderPipeline, supports_external_texture_copies: bool, + /// The HTML canvas that the WebGL context is bound to. Only populated on the WebGL + /// fallback path. Used by render_texture_via_gl_canvas to output frames on WebGL. + #[cfg(all(feature = "wasm", target_arch = "wasm32"))] + gl_canvas: Option, } impl GpuContext { pub async fn new() -> Result { + #[cfg(all(feature = "wasm", target_arch = "wasm32"))] + let (instance, adapter, device, queue, gl_canvas) = Self::acquire_device().await?; + #[cfg(not(all(feature = "wasm", target_arch = "wasm32")))] let (instance, adapter, device, queue) = Self::acquire_device().await?; let texture_format = if adapter.get_info().backend == wgpu::Backend::Gl { wgpu::TextureFormat::Rgba8Unorm @@ -161,9 +168,37 @@ impl GpuContext { texture_sampler_bind_group_layout, blit_pipeline, supports_external_texture_copies, + #[cfg(all(feature = "wasm", target_arch = "wasm32"))] + gl_canvas, }) } + #[cfg(all(feature = "wasm", target_arch = "wasm32"))] + async fn acquire_device() -> Result< + ( + wgpu::Instance, + wgpu::Adapter, + wgpu::Device, + wgpu::Queue, + Option, + ), + GpuError, + > { + let instance = wgpu::util::new_instance_with_webgpu_detection( + wgpu::InstanceDescriptor::new_without_display_handle(), + ) + .await; + + match Self::try_request_device(&instance, None).await { + Ok((adapter, device, queue)) => return Ok((instance, adapter, device, queue, None)), + Err(_) => {} + } + + let (gl_instance, adapter, device, queue, canvas) = Self::try_gl_fallback().await?; + Ok((gl_instance, adapter, device, queue, Some(canvas))) + } + + #[cfg(not(all(feature = "wasm", target_arch = "wasm32")))] async fn acquire_device() -> Result<(wgpu::Instance, wgpu::Adapter, wgpu::Device, wgpu::Queue), GpuError> { let instance = wgpu::util::new_instance_with_webgpu_detection( @@ -180,8 +215,16 @@ impl GpuContext { } #[cfg(all(feature = "wasm", target_arch = "wasm32"))] - async fn try_gl_fallback() - -> Result<(wgpu::Instance, wgpu::Adapter, wgpu::Device, wgpu::Queue), GpuError> { + async fn try_gl_fallback() -> Result< + ( + wgpu::Instance, + wgpu::Adapter, + wgpu::Device, + wgpu::Queue, + web_sys::HtmlCanvasElement, + ), + GpuError, + > { let mut gl_desc = wgpu::InstanceDescriptor::new_without_display_handle(); gl_desc.backends = wgpu::Backends::GL; gl_desc.display = Some(Box::new(WebDisplay)); @@ -196,11 +239,11 @@ impl GpuContext { .unchecked_into(); canvas.set_width(1); canvas.set_height(1); - let surface = gl_instance.create_surface(wgpu::SurfaceTarget::Canvas(canvas))?; + let surface = gl_instance.create_surface(wgpu::SurfaceTarget::Canvas(canvas.clone()))?; let (adapter, device, queue) = Self::try_request_device(&gl_instance, Some(&surface)).await?; - Ok((gl_instance, adapter, device, queue)) + Ok((gl_instance, adapter, device, queue, canvas)) } #[cfg(not(all(feature = "wasm", target_arch = "wasm32")))] @@ -302,6 +345,13 @@ impl GpuContext { &self.blit_pipeline } + /// Whether the GPU backend can render to arbitrary canvas surfaces. + /// True for WebGPU, false for WebGL which can only surface-render to + /// the specific canvas its GL context was originally created on. + pub fn supports_surface_rendering(&self) -> bool { + self.supports_external_texture_copies + } + pub fn render_texture_to_surface( &self, texture: &wgpu::Texture, @@ -493,80 +543,129 @@ impl GpuContext { return self.render_texture_to_surface(texture, &surface, width, height); } - self.readback_texture_to_offscreen_canvas(texture, canvas, width, height) + self.render_texture_to_offscreen_canvas_via_gl_canvas(texture, canvas, width, height) } #[cfg(all(feature = "wasm", target_arch = "wasm32"))] - fn readback_texture_to_offscreen_canvas( + fn render_texture_to_offscreen_canvas_via_gl_canvas( &self, texture: &wgpu::Texture, canvas: &wgpu::web_sys::OffscreenCanvas, width: u32, height: u32, ) -> Result<(), GpuError> { - let buffer_size = (width * height * 4) as u64; - let buffer = self.device.create_buffer(&wgpu::BufferDescriptor { - label: Some("gpu-readback-buffer"), - size: buffer_size, - usage: wgpu::BufferUsages::COPY_DST | wgpu::BufferUsages::MAP_READ, - mapped_at_creation: false, - }); + let gl_canvas = self.render_texture_to_gl_canvas_surface(texture, width, height)?; + + let ctx: web_sys::OffscreenCanvasRenderingContext2d = canvas + .get_context("2d") + .ok() + .flatten() + .ok_or(GpuError::AdapterUnavailable)? + .unchecked_into(); + ctx.clear_rect(0.0, 0.0, width as f64, height as f64); + ctx.draw_image_with_html_canvas_element(gl_canvas, 0.0, 0.0) + .map_err(|_| GpuError::AdapterUnavailable)?; + + Ok(()) + } + + #[cfg(all(feature = "wasm", target_arch = "wasm32"))] + fn render_texture_to_gl_canvas_surface( + &self, + texture: &wgpu::Texture, + width: u32, + height: u32, + ) -> Result<&web_sys::HtmlCanvasElement, GpuError> { + let gl_canvas = self + .gl_canvas + .as_ref() + .ok_or(GpuError::AdapterUnavailable)?; + + gl_canvas.set_width(width); + gl_canvas.set_height(height); + + let surface = self + .instance + .create_surface(wgpu::SurfaceTarget::Canvas(gl_canvas.clone()))?; + + let caps = surface.get_capabilities(&self.adapter); + let surface_format = if caps.formats.contains(&self.texture_format) { + self.texture_format + } else if !caps.formats.is_empty() { + caps.formats[0] + } else { + return Err(GpuError::UnsupportedSurfaceFormat); + }; + + if surface_format != self.texture_format { + return Err(GpuError::UnsupportedSurfaceFormat); + } + + let config = wgpu::SurfaceConfiguration { + usage: wgpu::TextureUsages::RENDER_ATTACHMENT, + format: surface_format, + width, + height, + present_mode: wgpu::PresentMode::Fifo, + alpha_mode: caps + .alpha_modes + .first() + .copied() + .unwrap_or(wgpu::CompositeAlphaMode::Auto), + view_formats: vec![], + desired_maximum_frame_latency: 2, + }; + surface.configure(&self.device, &config); + + let surface_texture = self.acquire_surface_texture(&surface)?; + let surface_view = surface_texture + .texture + .create_view(&wgpu::TextureViewDescriptor::default()); let mut encoder = self .device .create_command_encoder(&wgpu::CommandEncoderDescriptor { - label: Some("gpu-readback-encoder"), + label: Some("gpu-gl-canvas-blit-encoder"), }); - encoder.copy_texture_to_buffer( - wgpu::TexelCopyTextureInfo { - texture, - mip_level: 0, - origin: wgpu::Origin3d::ZERO, - aspect: wgpu::TextureAspect::All, - }, - wgpu::TexelCopyBufferInfo { - buffer: &buffer, - layout: wgpu::TexelCopyBufferLayout { - offset: 0, - bytes_per_row: Some(width * 4), - rows_per_image: Some(height), - }, - }, - wgpu::Extent3d { - width, - height, - depth_or_array_layers: 1, - }, + self.encode_texture_blit_to_view( + &mut encoder, + texture, + &surface_view, + "gpu-gl-canvas-blit", ); self.queue.submit([encoder.finish()]); + surface_texture.present(); - let slice = buffer.slice(..); - slice.map_async(wgpu::MapMode::Read, |_| {}); - let _ = self.device.poll(wgpu::PollType::wait_indefinitely()); - - let data = slice.get_mapped_range(); - let mut rgba_bytes = data.to_vec(); - drop(data); - buffer.unmap(); - - if self.texture_format == wgpu::TextureFormat::Bgra8Unorm { - for pixel in rgba_bytes.chunks_exact_mut(4) { - pixel.swap(0, 2); - } - } + Ok(gl_canvas) + } - let clamped = wasm_bindgen::Clamped(&rgba_bytes[..]); - let image_data = - web_sys::ImageData::new_with_u8_clamped_array_and_sh(clamped, width, height) - .map_err(|_| GpuError::AdapterUnavailable)?; + /// Renders a texture to an arbitrary HTML canvas on the WebGL backend. + /// + /// WebGL can only surface-render to the canvas its GL context was originally created on. + /// This method renders the texture to the GL canvas, then uses drawImage to copy the + /// result to the target canvas — avoiding the async buffer readback issue entirely. + /// + /// The HTML canvas default color space is sRGB, so the surface may report + /// `Rgba8UnormSrgb` as its preferred format even though our render textures use + /// `Rgba8Unorm`. We explicitly select `Rgba8Unorm` from the surface's supported + /// format list (WebGL2 supports both) to avoid the format mismatch. + #[cfg(all(feature = "wasm", target_arch = "wasm32"))] + pub fn render_texture_via_gl_canvas( + &self, + texture: &wgpu::Texture, + target_canvas: &web_sys::HtmlCanvasElement, + width: u32, + height: u32, + ) -> Result<(), GpuError> { + let gl_canvas = self.render_texture_to_gl_canvas_surface(texture, width, height)?; - let ctx: web_sys::OffscreenCanvasRenderingContext2d = canvas + let ctx: web_sys::CanvasRenderingContext2d = target_canvas .get_context("2d") .ok() .flatten() .ok_or(GpuError::AdapterUnavailable)? .unchecked_into(); - ctx.put_image_data(&image_data, 0.0, 0.0) + ctx.draw_image_with_html_canvas_element(gl_canvas, 0.0, 0.0) .map_err(|_| GpuError::AdapterUnavailable)?; Ok(()) diff --git a/rust/wasm/Cargo.toml b/rust/wasm/Cargo.toml index 98e9ed30..d8bda107 100644 --- a/rust/wasm/Cargo.toml +++ b/rust/wasm/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "opencut-wasm" -version = "0.2.5" +version = "0.2.8" edition = "2024" description = "Shared video editor logic compiled to WebAssembly" repository = "https://github.com/opencut/opencut" diff --git a/rust/wasm/src/compositor.rs b/rust/wasm/src/compositor.rs index 55756a21..126c7468 100644 --- a/rust/wasm/src/compositor.rs +++ b/rust/wasm/src/compositor.rs @@ -131,22 +131,41 @@ pub fn render_frame(options: JsValue) -> Result<(), JsValue> { )); }; - let surface = gpu_runtime - .context - .instance() - .create_surface(wgpu::SurfaceTarget::Canvas(runtime.canvas.clone())) - .map_err(|error| JsValue::from_str(&error.to_string()))?; - - runtime - .compositor - .render_frame( - &gpu_runtime.context, - RenderFrameOptions { - frame: &frame, - surface: &surface, - }, - ) - .map_err(|error| JsValue::from_str(&error.to_string())) + if gpu_runtime.context.supports_surface_rendering() { + let surface = gpu_runtime + .context + .instance() + .create_surface(wgpu::SurfaceTarget::Canvas(runtime.canvas.clone())) + .map_err(|error| JsValue::from_str(&error.to_string()))?; + + runtime + .compositor + .render_frame( + &gpu_runtime.context, + RenderFrameOptions { + frame: &frame, + surface: &surface, + }, + ) + .map_err(|error| JsValue::from_str(&error.to_string())) + } else { + // WebGL cannot surface-render to an arbitrary canvas element. + // Composite to a texture, then blit to the canvas via the 2D context. + let texture = runtime + .compositor + .render_frame_to_texture(&gpu_runtime.context, &frame) + .map_err(|error| JsValue::from_str(&error.to_string()))?; + + gpu_runtime + .context + .render_texture_via_gl_canvas( + &texture, + &runtime.canvas, + frame.width, + frame.height, + ) + .map_err(|error| JsValue::from_str(&error.to_string())) + } }) }) } @@ -171,4 +190,3 @@ fn parse_upload_texture_options(value: JsValue) -> Result> = const { RefCell::new(None) }; } +fn set_panic_hook() { + static SET_HOOK: std::sync::Once = std::sync::Once::new(); + SET_HOOK.call_once(|| { + std::panic::set_hook(Box::new(|info| { + // Store the full panic message in window.__wasmPanic so the JS catch block + // can surface it instead of the opaque "Unreachable" WASM trap message. + if let Some(window) = web_sys::window() { + let _ = Reflect::set( + &window, + &JsValue::from_str("__wasmPanic"), + &JsValue::from_str(&info.to_string()), + ); + } + console_error_panic_hook::hook(info); + })); + }); +} + #[wasm_bindgen(js_name = initializeGpu)] pub async fn initialize_gpu() -> Result<(), JsValue> { - console_error_panic_hook::set_once(); + set_panic_hook(); if GPU_RUNTIME.with(|runtime| runtime.borrow().is_some()) { return Ok(()); -- cgit v1.3.1