Start integrating vello into render pipeline

Cache vello render creation

Implement viewport navigation

Close vello path

Add transform parameter to vello render pass

Author: TrueDoctor

Cargo.lock

@@ -66,9 +66,9 @@ web-sys = "=0.3.69"
 winit = "0.29"
 url = "2.5"
 tokio = { version = "1.29", features = ["fs", "io-std"] }
-vello = "0.1"
-resvg = "0.39"
-usvg = "0.39"
+vello = "0.2"
+resvg = "0.41"
+usvg = "0.41"
 rand = { version = "0.8", default-features = false }
 rand_chacha = "0.3"
 glam = { version = "0.25", default-features = false, features = ["serde"] }
@@ -89,7 +89,7 @@ syn = { version = "2.0", default-features = false, features = [
 	"full",
 	"derive",
 ] }
-kurbo = { git = "https://github.com/linebender/kurbo.git", features = [
+kurbo = { version = "0.11.0", features = [
 	"serde",
 ] }
 

Cargo.toml

@@ -20,6 +20,8 @@ gpu = [
 	"wgpu-executor",
 	"gpu-executor",
 ]
+resvg = ["graphene-std/resvg"]
+vello = ["graphene-std/vello", "resvg", "graphene-core/vello"]
 quantization = [
 	"graphene-std/quantization",
 	"interpreted-executor/quantization",

editor/Cargo.toml

@@ -569,7 +569,8 @@ impl MessageHandler<GraphOperationMessage, GraphOperationMessageData<'_>> for Gr
 				parent,
 				insert_index,
 			} => {
-				let tree = match usvg::Tree::from_str(&svg, &usvg::Options::default()) {
+				let database = usvg::fontdb::Database::new();
+				let tree = match usvg::Tree::from_str(&svg, &usvg::Options::default(), &database) {
 					Ok(t) => t,
 					Err(e) => {
 						responses.add(DocumentMessage::DocumentHistoryBackward);
@@ -582,7 +583,7 @@ impl MessageHandler<GraphOperationMessage, GraphOperationMessageData<'_>> for Gr
 				};
 				let mut modify_inputs = ModifyInputsContext::new(document_network, document_metadata, node_graph, responses);
 
-				import_usvg_node(&mut modify_inputs, &usvg::Node::Group(Box::new(tree.root)), transform, id, parent, insert_index);
+				import_usvg_node(&mut modify_inputs, &usvg::Node::Group(Box::new(tree.root().clone())), transform, id, parent, insert_index);
 				load_network_structure(document_network, document_metadata, collapsed);
 			}
 			GraphOperationMessage::SetNodePosition { node_id, position } => {
@@ -715,7 +716,7 @@ fn import_usvg_node(modify_inputs: &mut ModifyInputsContext, node: &usvg::Node,
 	modify_inputs.layer_node = Some(layer);
 	match node {
 		usvg::Node::Group(group) => {
-			for child in &group.children {
+			for child in group.children() {
 				import_usvg_node(modify_inputs, child, transform, NodeId(generate_uuid()), LayerNodeIdentifier::new_unchecked(layer), -1);
 			}
 			modify_inputs.layer_node = Some(layer);
@@ -736,71 +737,74 @@ fn import_usvg_node(modify_inputs: &mut ModifyInputsContext, node: &usvg::Node,
 			let bounds_transform = DAffine2::from_scale_angle_translation(bounds[1] - bounds[0], 0., bounds[0]);
 			let transformed_bound_transform = DAffine2::from_scale_angle_translation(transformed_bounds[1] - transformed_bounds[0], 0., transformed_bounds[0]);
 			apply_usvg_fill(
-				&path.fill,
+				path.fill(),
 				modify_inputs,
 				transform * usvg_transform(node.abs_transform()),
 				bounds_transform,
 				transformed_bound_transform,
 			);
-			apply_usvg_stroke(&path.stroke, modify_inputs);
+			apply_usvg_stroke(path.stroke(), modify_inputs);
 		}
 		usvg::Node::Image(_image) => {
 			warn!("Skip image")
 		}
 		usvg::Node::Text(text) => {
 			let font = Font::new(graphene_core::consts::DEFAULT_FONT_FAMILY.to_string(), graphene_core::consts::DEFAULT_FONT_STYLE.to_string());
-			modify_inputs.insert_text(text.chunks.iter().map(|chunk| chunk.text.clone()).collect(), font, 24., layer);
+			modify_inputs.insert_text(text.chunks().iter().map(|chunk| chunk.text().clone()).collect(), font, 24., layer);
 			modify_inputs.fill_set(Fill::Solid(Color::BLACK));
 		}
 	}
 }
 
-fn apply_usvg_stroke(stroke: &Option<usvg::Stroke>, modify_inputs: &mut ModifyInputsContext) {
+fn apply_usvg_stroke(stroke: Option<&usvg::Stroke>, modify_inputs: &mut ModifyInputsContext) {
 	if let Some(stroke) = stroke {
-		if let usvg::Paint::Color(color) = &stroke.paint {
+		if let usvg::Paint::Color(color) = &stroke.paint() {
 			modify_inputs.stroke_set(Stroke {
-				color: Some(usvg_color(*color, stroke.opacity.get())),
-				weight: stroke.width.get() as f64,
-				dash_lengths: stroke.dasharray.as_ref().map(|lengths| lengths.iter().map(|&length| length as f64).collect()).unwrap_or_default(),
-				dash_offset: stroke.dashoffset as f64,
-				line_cap: match stroke.linecap {
+				color: Some(usvg_color(*color, stroke.opacity().get())),
+				weight: stroke.width().get() as f64,
+				dash_lengths: stroke.dasharray().as_ref().map(|lengths| lengths.iter().map(|&length| length as f64).collect()).unwrap_or_default(),
+				dash_offset: stroke.dashoffset() as f64,
+				line_cap: match stroke.linecap() {
 					usvg::LineCap::Butt => LineCap::Butt,
 					usvg::LineCap::Round => LineCap::Round,
 					usvg::LineCap::Square => LineCap::Square,
 				},
-				line_join: match stroke.linejoin {
+				line_join: match stroke.linejoin() {
 					usvg::LineJoin::Miter => LineJoin::Miter,
 					usvg::LineJoin::MiterClip => LineJoin::Miter,
 					usvg::LineJoin::Round => LineJoin::Round,
 					usvg::LineJoin::Bevel => LineJoin::Bevel,
 				},
-				line_join_miter_limit: stroke.miterlimit.get() as f64,
+				line_join_miter_limit: stroke.miterlimit().get() as f64,
 			})
 		} else {
 			warn!("Skip non-solid stroke")
 		}
 	}
 }
 
-fn apply_usvg_fill(fill: &Option<usvg::Fill>, modify_inputs: &mut ModifyInputsContext, transform: DAffine2, bounds_transform: DAffine2, transformed_bound_transform: DAffine2) {
+fn apply_usvg_fill(fill: Option<&usvg::Fill>, modify_inputs: &mut ModifyInputsContext, transform: DAffine2, bounds_transform: DAffine2, transformed_bound_transform: DAffine2) {
 	if let Some(fill) = &fill {
-		modify_inputs.fill_set(match &fill.paint {
-			usvg::Paint::Color(color) => Fill::solid(usvg_color(*color, fill.opacity.get())),
+		modify_inputs.fill_set(match &fill.paint() {
+			usvg::Paint::Color(color) => Fill::solid(usvg_color(*color, fill.opacity().get())),
 			usvg::Paint::LinearGradient(linear) => {
-				let local = [DVec2::new(linear.x1 as f64, linear.y1 as f64), DVec2::new(linear.x2 as f64, linear.y2 as f64)];
+				let local = [DVec2::new(linear.x1() as f64, linear.y1() as f64), DVec2::new(linear.x2() as f64, linear.y2() as f64)];
 
-				let to_doc_transform = if linear.base.units == usvg::Units::UserSpaceOnUse {
+				// TODO: fix this
+				/*
+				let to_doc_transform = if linear.base.units() == usvg::Units::UserSpaceOnUse {
 					transform
 				} else {
 					transformed_bound_transform
-				};
-				let to_doc = to_doc_transform * usvg_transform(linear.transform);
+				};*/
+				let to_doc_transform = transform;
+				let to_doc = to_doc_transform * usvg_transform(linear.transform());
 
 				let document = [to_doc.transform_point2(local[0]), to_doc.transform_point2(local[1])];
 				let layer = [transform.inverse().transform_point2(document[0]), transform.inverse().transform_point2(document[1])];
 
 				let [start, end] = [bounds_transform.inverse().transform_point2(layer[0]), bounds_transform.inverse().transform_point2(layer[1])];
-				let stops = linear.stops.iter().map(|stop| (stop.offset.get() as f64, usvg_color(stop.color, stop.opacity.get()))).collect();
+				let stops = linear.stops().iter().map(|stop| (stop.offset().get() as f64, usvg_color(stop.color(), stop.opacity().get()))).collect();
 				let stops = GradientStops(stops);
 
 				Fill::Gradient(Gradient {
@@ -812,20 +816,23 @@ fn apply_usvg_fill(fill: &Option<usvg::Fill>, modify_inputs: &mut ModifyInputsCo
 				})
 			}
 			usvg::Paint::RadialGradient(radial) => {
-				let local = [DVec2::new(radial.cx as f64, radial.cy as f64), DVec2::new(radial.fx as f64, radial.fy as f64)];
+				let local = [DVec2::new(radial.cx() as f64, radial.cy() as f64), DVec2::new(radial.fx() as f64, radial.fy() as f64)];
 
+				// TODO: fix this
+				/*
 				let to_doc_transform = if radial.base.units == usvg::Units::UserSpaceOnUse {
 					transform
 				} else {
 					transformed_bound_transform
-				};
-				let to_doc = to_doc_transform * usvg_transform(radial.transform);
+				};*/
+				let to_doc_transform = transform;
+				let to_doc = to_doc_transform * usvg_transform(radial.transform());
 
 				let document = [to_doc.transform_point2(local[0]), to_doc.transform_point2(local[1])];
 				let layer = [transform.inverse().transform_point2(document[0]), transform.inverse().transform_point2(document[1])];
 
 				let [start, end] = [bounds_transform.inverse().transform_point2(layer[0]), bounds_transform.inverse().transform_point2(layer[1])];
-				let stops = radial.stops.iter().map(|stop| (stop.offset.get() as f64, usvg_color(stop.color, stop.opacity.get()))).collect();
+				let stops = radial.stops().iter().map(|stop| (stop.offset().get() as f64, usvg_color(stop.color(), stop.opacity().get()))).collect();
 				let stops = GradientStops(stops);
 
 				Fill::Gradient(Gradient {

editor/src/messages/portfolio/document/graph_operation/graph_operation_message_handler.rs

@@ -1311,15 +1311,16 @@ fn static_nodes() -> Vec<DocumentNodeDefinition> {
 				nodes: [
 					DocumentNode {
 						name: "Create Gpu Surface".to_string(),
+						manual_composition: Some(concrete!(Footprint)),
 						inputs: vec![NodeInput::scope("editor-api")],
-						implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("wgpu_executor::CreateGpuSurfaceNode")),
+						implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("wgpu_executor::CreateGpuSurfaceNode<_>")),
 						..Default::default()
 					},
 					DocumentNode {
 						name: "Cache".to_string(),
-						manual_composition: Some(concrete!(())),
+						manual_composition: Some(concrete!(Footprint)),
 						inputs: vec![NodeInput::node(NodeId(0), 0)],
-						implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_core::memo::MemoNode<_, _>")),
+						implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_core::memo::ImpureMemoNode<_, _, _>")),
 						..Default::default()
 					},
 				]
@@ -2789,16 +2790,17 @@ pub fn wrap_network_in_scope(mut network: NodeNetwork, editor_api: Arc<WasmEdito
 			nodes: [
 				DocumentNode {
 					name: "Create Canvas".to_string(),
-					inputs: vec![NodeInput::network(concrete!(&WasmEditorApi), 1)],
-					implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_std::wasm_application_io::CreateSurfaceNode")),
+					inputs: vec![NodeInput::scope("editor-api")],
+					manual_composition: Some(concrete!(Footprint)),
+					implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("wgpu_executor::CreateGpuSurfaceNode<_>")),
 					skip_deduplication: true,
 					..Default::default()
 				},
 				DocumentNode {
 					name: "Cache".to_string(),
-					manual_composition: Some(concrete!(())),
+					manual_composition: Some(concrete!(Footprint)),
 					inputs: vec![NodeInput::node(NodeId(0), 0)],
-					implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_core::memo::MemoNode<_, _>")),
+					implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_core::memo::ImpureMemoNode<_, _, _>")),
 					..Default::default()
 				},
 				// TODO: Add conversion step
@@ -2809,7 +2811,7 @@ pub fn wrap_network_in_scope(mut network: NodeNetwork, editor_api: Arc<WasmEdito
 						NodeInput::network(graphene_core::Type::Fn(Box::new(concrete!(Footprint)), Box::new(generic!(T))), 0),
 						NodeInput::node(NodeId(1), 0),
 					],
-					implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_std::wasm_application_io::RenderNode<_, _, _>")),
+					implementation: DocumentNodeImplementation::ProtoNode(ProtoNodeIdentifier::new("graphene_std::wasm_application_io::RenderNode<_, _, _, _>")),
 					..Default::default()
 				},
 			]

editor/src/messages/portfolio/document/node_graph/document_node_types.rs

@@ -634,7 +634,7 @@ impl NodeGraphExecutor {
 
 	fn process_node_graph_output(&mut self, node_graph_output: TaggedValue, transform: DAffine2, responses: &mut VecDeque<Message>) -> Result<(), String> {
 		match node_graph_output {
-			TaggedValue::SurfaceFrame(SurfaceFrame { surface_id: _, transform: _ }) => {
+			TaggedValue::SurfaceFrame(SurfaceFrame { surface_id: _, transform: _, .. }) => {
 				// TODO: Reimplement this now that document-legacy is gone
 			}
 			TaggedValue::RenderOutput(graphene_std::wasm_application_io::RenderOutput::Svg(svg)) => {
@@ -643,6 +643,7 @@ impl NodeGraphExecutor {
 				responses.add(DocumentMessage::RenderScrollbars);
 			}
 			TaggedValue::RenderOutput(graphene_std::wasm_application_io::RenderOutput::CanvasFrame(frame)) => {
+				let resolution = frame.resolution;
 				// Send to frontend
 				responses.add(DocumentMessage::RenderScrollbars);
 				let matrix = frame
@@ -655,7 +656,7 @@ impl NodeGraphExecutor {
 					r#"
 					<svg><foreignObject width="{}" height="{}" transform="matrix({})"><div data-canvas-placeholder="canvas{}"></div></foreignObject></svg>
 					"#,
-					1920, 1080, matrix, frame.surface_id.0
+					resolution.x, resolution.y, matrix, frame.surface_id.0
 				);
 				responses.add(FrontendMessage::UpdateDocumentArtwork { svg });
 			}

editor/src/node_graph_executor.rs

@@ -21,7 +21,9 @@ crate-type = ["cdylib", "rlib"]
 [dependencies]
 # Local dependencies
 editor = { path = "../../editor", package = "graphite-editor", features = [
-	"gpu",
+	"gpu", 
+	"resvg", 
+	"vello"
 ] }
 
 # Workspace dependencies

frontend/wasm/Cargo.toml

@@ -13,6 +13,7 @@ homepage = "https://github.com/GraphiteEditor/Graphite/tree/master/libraries/bez
 repository = "https://github.com/GraphiteEditor/Graphite/tree/master/libraries/bezier-rs"
 documentation = "https://graphite.rs/libraries/bezier-rs/"
 
+
 [dependencies]
 # Required dependencies
 glam = { version = "0.25", features = ["serde"] }
@@ -21,5 +22,6 @@ glam = { version = "0.25", features = ["serde"] }
 dyn-any = { version = "0.3.0", path = "../dyn-any", optional = true }
 
 # Optional workspace dependencies
+kurbo = { workspace = true, optional = true }
 serde = { workspace = true, optional = true }
 log = { workspace = true, optional = true }

libraries/bezier-rs/Cargo.toml

@@ -343,6 +343,27 @@ impl<PointId: crate::Identifier> Subpath<PointId> {
 
 		subpath
 	}
+
+	#[cfg(feature = "kurbo")]
+	pub fn to_vello_path(&self, transform: glam::DAffine2) -> kurbo::BezPath {
+		use crate::BezierHandles;
+
+		let mut path = kurbo::BezPath::new();
+		let to_point = |p: DVec2| kurbo::Point::new(p.x, p.y);
+		for segment in self.iter() {
+			let segment = segment.apply_transformation(|p| transform.transform_point2(p));
+			path.move_to(to_point(segment.start));
+			match segment.handles {
+				BezierHandles::Linear => path.line_to(to_point(segment.end)),
+				BezierHandles::Quadratic { handle } => path.quad_to(to_point(handle), to_point(segment.end)),
+				BezierHandles::Cubic { handle_start, handle_end } => path.curve_to(to_point(handle_start), to_point(handle_end), to_point(segment.end)),
+			}
+		}
+		if self.closed {
+			path.close_path();
+		}
+		path
+	}
 }
 
 pub fn solve_spline_first_handle(points: &[DVec2]) -> Vec<DVec2> {

libraries/bezier-rs/src/subpath/core.rs

@@ -14,6 +14,7 @@ nightly = []
 alloc = ["dyn-any", "bezier-rs"]
 type_id_logging = []
 wasm = ["web-sys"]
+vello = ["dep:vello", "bezier-rs/kurbo"]
 std = [
 	"dyn-any",
 	"dyn-any/std",
@@ -57,6 +58,7 @@ rand_chacha = { workspace = true, optional = true }
 bezier-rs = { workspace = true, optional = true }
 kurbo = { workspace = true, optional = true }
 base64 = { workspace = true, optional = true }
+vello = { workspace  = true, optional = true }
 specta = { workspace = true, optional = true }
 rustybuzz = { workspace = true, optional = true }
 wasm-bindgen = { workspace = true, optional = true }

node-graph/gcore/Cargo.toml

@@ -10,7 +10,7 @@ use core::future::Future;
 use core::hash::{Hash, Hasher};
 use core::pin::Pin;
 use core::ptr::addr_of;
-use glam::DAffine2;
+use glam::{DAffine2, UVec2};
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
 #[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
@@ -26,6 +26,7 @@ impl core::fmt::Display for SurfaceId {
 #[cfg_attr(feature = "serde", derive(serde::Serialize, serde::Deserialize))]
 pub struct SurfaceFrame {
 	pub surface_id: SurfaceId,
+	pub resolution: UVec2,
 	pub transform: DAffine2,
 }
 
@@ -51,11 +52,23 @@ unsafe impl StaticType for SurfaceFrame {
 	type Static = SurfaceFrame;
 }
 
-impl<S> From<SurfaceHandleFrame<S>> for SurfaceFrame {
+pub trait Size {
+	fn size(&self) -> UVec2;
+}
+
+#[cfg(target_arch = "wasm32")]
+impl Size for web_sys::HtmlCanvasElement {
+	fn size(&self) -> UVec2 {
+		UVec2::new(self.width(), self.height())
+	}
+}
+
+impl<S: Size> From<SurfaceHandleFrame<S>> for SurfaceFrame {
 	fn from(x: SurfaceHandleFrame<S>) -> Self {
 		Self {
 			surface_id: x.surface_handle.surface_id,
 			transform: x.transform,
+			resolution: x.surface_handle.surface.size(),
 		}
 	}
 }
@@ -70,6 +83,12 @@ pub struct SurfaceHandle<Surface> {
 // #[cfg(target_arch = "wasm32")]
 // unsafe impl<T: dyn_any::WasmNotSync> Sync for SurfaceHandle<T> {}
 
+impl<S: Size> Size for SurfaceHandle<S> {
+	fn size(&self) -> UVec2 {
+		self.surface.size()
+	}
+}
+
 unsafe impl<T: 'static> StaticType for SurfaceHandle<T> {
 	type Static = SurfaceHandle<T>;
 }