Work on fixing rendering for wasm+vello

Author: TrueDoctor

desktop/src/window.rs

@@ -4,6 +4,7 @@ use winit::window::{Window as WinitWindow, WindowAttributes};
 
 use crate::consts::APP_NAME;
 use crate::event::AppEventScheduler;
+#[cfg(target_os = "macos")]
 use crate::window::mac::NativeWindowImpl;
 use crate::wrapper::messages::MenuItem;
 
@@ -37,7 +38,7 @@ pub(crate) struct Window {
 
 impl Window {
 	pub(crate) fn init() {
-		NativeWindowImpl::init();
+		native::NativeWindowImpl::init();
 	}
 
 	pub(crate) fn new(event_loop: &dyn ActiveEventLoop, app_event_scheduler: AppEventScheduler) -> Self {

editor/src/node_graph_executor.rs

@@ -421,8 +421,8 @@ impl NodeGraphExecutor {
 				let matrix = format_transform_matrix(frame.transform);
 				let transform = if matrix.is_empty() { String::new() } else { format!(" transform=\"{matrix}\"") };
 				let svg = format!(
-					r#"<svg><foreignObject width="{}" height="{}"{transform}><div data-canvas-placeholder="{}"></div></foreignObject></svg>"#,
-					frame.resolution.x, frame.resolution.y, frame.surface_id.0
+					r#"<svg><foreignObject width="{}" height="{}"{transform}><div data-canvas-placeholder="{}" data-physical-width="{}" data-physical-height="{}"></div></foreignObject></svg>"#,
+					frame.resolution.x, frame.resolution.y, frame.surface_id.0, frame.physical_resolution.x, frame.physical_resolution.y
 				);
 				self.last_svg_canvas = Some(frame);
 				responses.add(FrontendMessage::UpdateDocumentArtwork { svg });

editor/src/node_graph_executor/runtime.rs

@@ -55,6 +55,10 @@ pub struct NodeRuntime {
 	/// The current renders of the thumbnails for layer nodes.
 	thumbnail_renders: HashMap<NodeId, Vec<SvgSegment>>,
 	vector_modify: HashMap<NodeId, Vector>,
+
+	/// Cached surface for WASM viewport rendering (reused across frames)
+	#[cfg(all(target_family = "wasm", feature = "gpu"))]
+	wasm_viewport_surface: Option<wgpu_executor::WgpuSurface>,
 }
 
 /// Messages passed from the editor thread to the node runtime thread.
@@ -131,6 +135,8 @@ impl NodeRuntime {
 			thumbnail_renders: Default::default(),
 			vector_modify: Default::default(),
 			inspect_state: None,
+			#[cfg(all(target_family = "wasm", feature = "gpu"))]
+			wasm_viewport_surface: None,
 		}
 	}
 
@@ -259,6 +265,83 @@ impl NodeRuntime {
 								None,
 							)
 						}
+						#[cfg(all(target_family = "wasm", feature = "gpu"))]
+						Ok(TaggedValue::RenderOutput(RenderOutput {
+							data: RenderOutputType::Texture(image_texture),
+							metadata,
+						})) if !render_config.for_export => {
+							// On WASM, for viewport rendering, blit the texture to a surface and return a CanvasFrame
+							let app_io = self.editor_api.application_io.as_ref().unwrap();
+							let executor = app_io.gpu_executor().expect("GPU executor should be available when we receive a texture");
+
+							// Get or create the cached surface
+							if self.wasm_viewport_surface.is_none() {
+								let surface_handle = app_io.create_window();
+								let wasm_surface = executor
+									.create_surface(graphene_std::wasm_application_io::WasmSurfaceHandle {
+										surface: surface_handle.surface.clone(),
+										window_id: surface_handle.window_id,
+									})
+									.expect("Failed to create surface");
+								self.wasm_viewport_surface = Some(Arc::new(wasm_surface));
+							}
+
+							let surface = self.wasm_viewport_surface.as_ref().unwrap();
+
+							// Use logical resolution for CSS sizing, physical resolution for the actual surface/texture
+							let logical_resolution = render_config.viewport.resolution;
+							let physical_resolution = (logical_resolution.as_dvec2() * render_config.scale).as_uvec2();
+
+							// Blit the texture to the surface
+							let mut encoder = executor.context.device.create_command_encoder(&vello::wgpu::CommandEncoderDescriptor {
+								label: Some("Texture to Surface Blit"),
+							});
+
+							// Configure the surface at physical resolution (for HiDPI displays)
+							let surface_inner = &surface.surface.inner;
+							let surface_caps = surface_inner.get_capabilities(&executor.context.adapter);
+							surface_inner.configure(
+								&executor.context.device,
+								&vello::wgpu::SurfaceConfiguration {
+									usage: vello::wgpu::TextureUsages::RENDER_ATTACHMENT | vello::wgpu::TextureUsages::COPY_DST,
+									format: vello::wgpu::TextureFormat::Rgba8Unorm,
+									width: physical_resolution.x,
+									height: physical_resolution.y,
+									present_mode: surface_caps.present_modes[0],
+									alpha_mode: vello::wgpu::CompositeAlphaMode::Opaque,
+									view_formats: vec![],
+									desired_maximum_frame_latency: 2,
+								},
+							);
+
+							let surface_texture = surface_inner.get_current_texture().expect("Failed to get surface texture");
+
+							// Blit the rendered texture to the surface
+							surface.surface.blitter.copy(
+								&executor.context.device,
+								&mut encoder,
+								&image_texture.texture.create_view(&vello::wgpu::TextureViewDescriptor::default()),
+								&surface_texture.texture.create_view(&vello::wgpu::TextureViewDescriptor::default()),
+							);
+
+							executor.context.queue.submit([encoder.finish()]);
+							surface_texture.present();
+
+							let frame = graphene_std::application_io::SurfaceFrame {
+								surface_id: surface.window_id,
+								resolution: logical_resolution,
+								physical_resolution,
+								transform: glam::DAffine2::IDENTITY,
+							};
+
+							(
+								Ok(TaggedValue::RenderOutput(RenderOutput {
+									data: RenderOutputType::CanvasFrame(frame),
+									metadata,
+								})),
+								None,
+							)
+						}
 						Ok(TaggedValue::RenderOutput(RenderOutput {
 							data: RenderOutputType::Texture(texture),
 							metadata,

frontend/src/components/panels/Document.svelte

@@ -203,17 +203,28 @@
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			let canvas = (window as any).imageCanvases[canvasName];
 
-			if (canvasName !== "0" && canvas.parentElement) {
-				var newCanvas = window.document.createElement("canvas");
-				var context = newCanvas.getContext("2d");
+			// Get logical dimensions from foreignObject parent (set by backend)
+			const foreignObject = placeholder.parentElement;
+			if (!foreignObject) return;
+			const logicalWidth = parseInt(foreignObject.getAttribute("width") || "0");
+			const logicalHeight = parseInt(foreignObject.getAttribute("height") || "0");
 
-				newCanvas.width = canvas.width;
-				newCanvas.height = canvas.height;
+			// if (canvasName !== "0" && canvas.parentElement) {
+			// 	console.log("test");
+			// 	var newCanvas = window.document.createElement("canvas");
+			// 	var context = newCanvas.getContext("2d");
 
-				context?.drawImage(canvas, 0, 0);
+			// 	newCanvas.width = canvas.width;
+			// 	newCanvas.height = canvas.height;
 
-				canvas = newCanvas;
-			}
+			// 	context?.drawImage(canvas, 0, 0);
+
+			// 	canvas = newCanvas;
+			// }
+
+			// Set CSS size to logical resolution (for correct display size)
+			canvas.style.width = `${logicalWidth}px`;
+			canvas.style.height = `${logicalHeight}px`;
 
 			placeholder.replaceWith(canvas);
 		});

node-graph/libraries/application-io/src/lib.rs

@@ -23,7 +23,10 @@ impl std::fmt::Display for SurfaceId {
 #[derive(Debug, Clone, Copy, PartialEq, serde::Serialize, serde::Deserialize)]
 pub struct SurfaceFrame {
 	pub surface_id: SurfaceId,
+	/// Logical resolution in CSS pixels (used for foreignObject dimensions)
 	pub resolution: UVec2,
+	/// Physical resolution in device pixels (used for actual canvas/texture dimensions)
+	pub physical_resolution: UVec2,
 	pub transform: DAffine2,
 }
 
@@ -101,10 +104,12 @@ impl Size for ImageTexture {
 
 impl<S: Size> From<SurfaceHandleFrame<S>> for SurfaceFrame {
 	fn from(x: SurfaceHandleFrame<S>) -> Self {
+		let size = x.surface_handle.surface.size();
 		Self {
 			surface_id: x.surface_handle.window_id,
 			transform: x.transform,
-			resolution: x.surface_handle.surface.size(),
+			resolution: size,
+			physical_resolution: size,
 		}
 	}
 }

node-graph/nodes/gstd/src/render_node.rs

@@ -5,7 +5,7 @@ use core_types::{Color, Context, Ctx, ExtractFootprint, OwnedContextImpl, WasmNo
 use graph_craft::document::value::RenderOutput;
 pub use graph_craft::document::value::RenderOutputType;
 pub use graph_craft::wasm_application_io::*;
-use graphene_application_io::{ApplicationIo, ExportFormat, ImageTexture, RenderConfig, SurfaceFrame};
+use graphene_application_io::{ApplicationIo, ExportFormat, ImageTexture, RenderConfig};
 use graphic_types::Artboard;
 use graphic_types::Graphic;
 use graphic_types::Vector;
@@ -124,7 +124,6 @@ async fn render<'a: 'n>(
 	ctx: impl Ctx + ExtractFootprint + ExtractVarArgs,
 	editor_api: &'a WasmEditorApi,
 	data: RenderIntermediate,
-	_surface_handle: impl Node<Context<'static>, Output = Option<wgpu_executor::WgpuSurface>>,
 ) -> RenderOutput {
 	let footprint = ctx.footprint();
 	let render_params = ctx
@@ -171,14 +170,8 @@ async fn render<'a: 'n>(
 			};
 			let (child, context) = Arc::as_ref(vello_data);
 
-			let surface_handle = if cfg!(all(feature = "vello", target_family = "wasm")) {
-				_surface_handle.eval(None).await
-			} else {
-				None
-			};
-
-			// When rendering to a surface, we do not want to apply the scale
-			let scale = if surface_handle.is_none() { render_params.scale } else { 1. };
+			// Always apply scale when rendering to texture
+			let scale = render_params.scale;
 
 			let scale_transform = glam::DAffine2::from_scale(glam::DVec2::splat(scale));
 			let footprint_transform = scale_transform * footprint.transform;
@@ -204,25 +197,10 @@ async fn render<'a: 'n>(
 				background = Color::WHITE;
 			}
 
-			if let Some(surface_handle) = surface_handle {
-				exec.render_vello_scene(&scene, &surface_handle, resolution, context, background)
-					.await
-					.expect("Failed to render Vello scene");
-
-				let frame = SurfaceFrame {
-					surface_id: surface_handle.window_id,
-					// TODO: Find a cleaner way to get the unscaled resolution here.
-					// This is done because the surface frame (canvas) is in logical pixels, not physical pixels.
-					resolution,
-					transform: glam::DAffine2::IDENTITY,
-				};
+			// Always render to texture (unified path for both WASM and desktop)
+			let texture = exec.render_vello_scene_to_texture(&scene, resolution, context, background).await.expect("Failed to render Vello scene");
 
-				RenderOutputType::CanvasFrame(frame)
-			} else {
-				let texture = exec.render_vello_scene_to_texture(&scene, resolution, context, background).await.expect("Failed to render Vello scene");
-
-				RenderOutputType::Texture(ImageTexture { texture })
-			}
+			RenderOutputType::Texture(ImageTexture { texture })
 		}
 		_ => unreachable!("Render node did not receive its requested data type"),
 	};

node-graph/wgpu-executor/src/vector_to_raster.rs

@@ -0,0 +1,111 @@
+use crate::WgpuExecutor;
+use core_types::Color;
+use core_types::bounds::{BoundingBox, RenderBoundingBox};
+use core_types::ops::Convert;
+use core_types::table::Table;
+use core_types::transform::Footprint;
+use glam::{DAffine2, DVec2, UVec2};
+use graphic_types::raster_types::{GPU, Raster};
+use graphic_types::vector_types::GradientStops;
+use graphic_types::{Artboard, Graphic, Vector};
+use rendering::{Render, RenderOutputType, RenderParams};
+use wgpu::{CommandEncoderDescriptor, TextureFormat, TextureViewDescriptor};
+
+macro_rules! impl_convert {
+	($ty:ty) => {
+		/// Converts Table<T> to Table<Raster<GPU>> by rendering each item to Vello scene and then to texture
+		impl<'i> Convert<Table<Raster<GPU>>, &'i WgpuExecutor> for Table<$ty> {
+			async fn convert(self, footprint: Footprint, executor: &'i WgpuExecutor) -> Table<Raster<GPU>> {
+				// Create render parameters for Vello rendering
+				let render_params = RenderParams {
+					render_mode: graphic_types::vector_types::vector::style::RenderMode::Normal,
+					hide_artboards: false,
+					for_export: false,
+					render_output_type: RenderOutputType::Vello,
+					footprint,
+					..Default::default()
+				};
+
+				let vector = &self;
+				let bounding_box = vector.bounding_box(DAffine2::IDENTITY, true);
+				// TODO: Add cases for infinite bounding boxes
+				let RenderBoundingBox::Rectangle(rect) = bounding_box else {
+					panic!("did not find valid bounding box")
+				};
+
+				// Create a Vello scene for this vector
+				let mut scene = vello::Scene::new();
+				let mut context = crate::RenderContext::default();
+
+				let viewport_bounds = footprint.viewport_bounds_in_local_space();
+
+				let image_bounds = core_types::math::bbox::AxisAlignedBbox { start: rect[0], end: rect[1] };
+				let intersection = viewport_bounds.intersect(&image_bounds);
+
+				let size = intersection.size();
+
+				let offset = (intersection.start - image_bounds.start).max(DVec2::ZERO) + image_bounds.start;
+
+				// If the image would not be visible, return an empty image
+				if size.x <= 0. || size.y <= 0. {
+					return Table::new();
+				}
+
+				let scale = footprint.scale();
+				let width = (size.x * scale.x) as u32;
+				let height = (size.y * scale.y) as u32;
+
+				// Render the scene to a GPU texture
+				let resolution = UVec2::new(width, height);
+				let background = core_types::Color::TRANSPARENT;
+
+				let render_transform = DAffine2::from_scale(scale) * DAffine2::from_translation(-offset);
+				// Render the vector to the Vello scene with the row's transform
+				vector.render_to_vello(&mut scene, render_transform, &mut context, &render_params);
+
+				// Use async rendering to get the texture
+				let texture = executor
+					.render_vello_scene_to_texture(&scene, resolution, &context, background)
+					.await
+					.expect("Failed to render Vello scene to texture");
+
+				let device = &executor.context.device;
+				let queue = &executor.context.queue;
+				let mut encoder = device.create_command_encoder(&CommandEncoderDescriptor::default());
+				let blitter = wgpu::util::TextureBlitter::new(device, TextureFormat::Rgba8UnormSrgb);
+				let view = texture.create_view(&TextureViewDescriptor::default());
+				let new_texture = device.create_texture(&wgpu::wgt::TextureDescriptor {
+					label: None,
+					size: wgpu::Extent3d {
+						width: texture.width(),
+						height: texture.height(),
+						depth_or_array_layers: 1,
+					},
+					mip_level_count: 1,
+					sample_count: 1,
+					dimension: wgpu::TextureDimension::D2,
+					usage: wgpu::TextureUsages::TEXTURE_BINDING | wgpu::TextureUsages::RENDER_ATTACHMENT,
+					format: TextureFormat::Rgba8UnormSrgb,
+					view_formats: &[],
+				});
+				let new_view = new_texture.create_view(&TextureViewDescriptor::default());
+
+				blitter.copy(device, &mut encoder, &view, &new_view);
+				encoder.on_submitted_work_done(move || texture.destroy());
+				let command_buffer = encoder.finish();
+				queue.submit([command_buffer]);
+
+				let mut table = Table::new_from_element(Raster::new_gpu(new_texture));
+				*(table.get_mut(0).as_mut().unwrap().transform) = DAffine2::from_translation(offset) * DAffine2::from_scale(size);
+				// texture.destroy();
+				table
+			}
+		}
+	};
+}
+
+impl_convert!(Vector);
+impl_convert!(Graphic);
+impl_convert!(Artboard);
+impl_convert!(GradientStops);
+impl_convert!(Color);