Update Wasm dependencies to fix WebGPU spec change crash in Firefox w…

…ith Vello (#2027)

* Update wasm deps

* Bump wasm-bindgen and fix the depricated methods

Cargo.toml

@@ -62,16 +62,16 @@ ron = "0.8"
 fastnoise-lite = "1.1"
 spirv-std = { git = "https://github.com/GraphiteEditor/rust-gpu.git" }
 wgpu-types = "22"
-wgpu = { version = "22.1", features = ["strict_asserts"] }
+wgpu = { git = "https://github.com/gfx-rs/wgpu.git", features = ["strict_asserts"] } # TODO switch back to stable when a release is made
 once_cell = "1.13" # Remove when `core::cell::LazyCell` (<https://doc.rust-lang.org/core/cell/struct.LazyCell.html>) is stabilized in Rust 1.80 and we bump our MSRV
-wasm-bindgen = "=0.2.92" # NOTICE: ensure this stays in sync with the `wasm-bindgen-cli` version in `website/content/volunteer/guide/getting-started/_index.md`. We pin this version because wasm-bindgen upgrades may break various things.
+wasm-bindgen = "=0.2.95" # NOTICE: ensure this stays in sync with the `wasm-bindgen-cli` version in `website/content/volunteer/guide/getting-started/_index.md`. We pin this version because wasm-bindgen upgrades may break various things.
 wasm-bindgen-futures = "0.4"
-js-sys = "=0.3.69"
-web-sys = "=0.3.69"
+js-sys = "=0.3.72"
+web-sys = "=0.3.72"
 winit = "0.29"
 url = "2.5"
 tokio = { version = "1.29", features = ["fs", "io-std"] }
-vello = { git = "https://github.com/linebender/vello" }
+vello = { git = "https://github.com/0hypercube/vello", branch = "latest-wgpu" } # TODO switch back to stable when a release is made
 resvg = "0.42"
 usvg = "0.42"
 rand = { version = "0.8", default-features = false }

editor/src/messages/portfolio/document/overlays/utility_types.rs

@@ -38,10 +38,10 @@ impl OverlayContext {
 			self.render_context.line_to(quad.0[i].x.round() - 0.5, quad.0[i].y.round() - 0.5);
 		}
 		if let Some(color_fill) = color_fill {
-			self.render_context.set_fill_style(&wasm_bindgen::JsValue::from_str(color_fill));
+			self.render_context.set_fill_style_str(color_fill);
 			self.render_context.fill();
 		}
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(COLOR_OVERLAY_BLUE));
+		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE);
 		self.render_context.stroke();
 	}
 
@@ -70,7 +70,7 @@ impl OverlayContext {
 		self.render_context.begin_path();
 		self.render_context.move_to(start.x, start.y);
 		self.render_context.line_to(end.x, end.y);
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(color.unwrap_or(COLOR_OVERLAY_BLUE)));
+		self.render_context.set_stroke_style_str(color.unwrap_or(COLOR_OVERLAY_BLUE));
 		self.render_context.stroke();
 	}
 
@@ -83,8 +83,8 @@ impl OverlayContext {
 			.expect("Failed to draw the circle");
 
 		let fill = if selected { COLOR_OVERLAY_BLUE } else { COLOR_OVERLAY_WHITE };
-		self.render_context.set_fill_style(&wasm_bindgen::JsValue::from_str(fill));
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(COLOR_OVERLAY_BLUE));
+		self.render_context.set_fill_style_str(fill);
+		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE);
 		self.render_context.fill();
 		self.render_context.stroke();
 	}
@@ -105,8 +105,8 @@ impl OverlayContext {
 
 		self.render_context.begin_path();
 		self.render_context.rect(corner.x, corner.y, size, size);
-		self.render_context.set_fill_style(&wasm_bindgen::JsValue::from_str(color_fill));
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(color_stroke));
+		self.render_context.set_fill_style_str(color_fill);
+		self.render_context.set_stroke_style_str(color_stroke);
 		self.render_context.fill();
 		self.render_context.stroke();
 	}
@@ -120,7 +120,7 @@ impl OverlayContext {
 
 		self.render_context.begin_path();
 		self.render_context.rect(corner.x, corner.y, size, size);
-		self.render_context.set_fill_style(&wasm_bindgen::JsValue::from_str(color_fill));
+		self.render_context.set_fill_style_str(color_fill);
 		self.render_context.fill();
 	}
 
@@ -130,8 +130,8 @@ impl OverlayContext {
 		let position = position.round();
 		self.render_context.begin_path();
 		self.render_context.arc(position.x, position.y, radius, 0., TAU).expect("Failed to draw the circle");
-		self.render_context.set_fill_style(&wasm_bindgen::JsValue::from_str(color_fill));
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(color_stroke));
+		self.render_context.set_fill_style_str(color_fill);
+		self.render_context.set_stroke_style_str(color_stroke);
 		self.render_context.fill();
 		self.render_context.stroke();
 	}
@@ -142,15 +142,15 @@ impl OverlayContext {
 
 		self.render_context.begin_path();
 		self.render_context.arc(x, y, PIVOT_DIAMETER / 2., 0., TAU).expect("Failed to draw the circle");
-		self.render_context.set_fill_style(&wasm_bindgen::JsValue::from_str(COLOR_OVERLAY_YELLOW));
+		self.render_context.set_fill_style_str(COLOR_OVERLAY_YELLOW);
 		self.render_context.fill();
 
 		// Crosshair
 
 		// Round line caps add half the stroke width to the length on each end, so we subtract that here before halving to get the radius
 		let crosshair_radius = (PIVOT_CROSSHAIR_LENGTH - PIVOT_CROSSHAIR_THICKNESS) / 2.;
 
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(COLOR_OVERLAY_YELLOW));
+		self.render_context.set_stroke_style_str(COLOR_OVERLAY_YELLOW);
 		self.render_context.set_line_cap("round");
 
 		self.render_context.begin_path();
@@ -174,14 +174,14 @@ impl OverlayContext {
 			self.bezier_command(bezier, transform, move_to);
 		}
 
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(COLOR_OVERLAY_BLUE));
+		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE);
 		self.render_context.stroke();
 	}
 
 	pub fn outline_bezier(&mut self, bezier: Bezier, transform: DAffine2) {
 		self.render_context.begin_path();
 		self.bezier_command(bezier, transform, true);
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(COLOR_OVERLAY_BLUE));
+		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE);
 		self.render_context.stroke();
 	}
 
@@ -243,7 +243,7 @@ impl OverlayContext {
 			}
 		}
 
-		self.render_context.set_stroke_style(&wasm_bindgen::JsValue::from_str(COLOR_OVERLAY_BLUE));
+		self.render_context.set_stroke_style_str(COLOR_OVERLAY_BLUE);
 		self.render_context.stroke();
 	}
 
@@ -273,7 +273,7 @@ impl OverlayContext {
 	fn draw_text(&self, background_color: Option<&str>, local_position: DVec2, metrics: web_sys::TextMetrics, font_color: &str, text: &str) {
 		// Render background
 		if let Some(background) = background_color {
-			self.render_context.set_fill_style(&background.into());
+			self.render_context.set_fill_style_str(background);
 			self.render_context.fill_rect(
 				local_position.x + metrics.actual_bounding_box_left(),
 				local_position.y - metrics.font_bounding_box_ascent() - metrics.font_bounding_box_descent(),
@@ -284,7 +284,7 @@ impl OverlayContext {
 
 		// Render text
 		self.render_context.set_font("12px Source Sans Pro, Arial, sans-serif");
-		self.render_context.set_fill_style(&font_color.into());
+		self.render_context.set_fill_style_str(font_color);
 		self.render_context
 			.fill_text(text, local_position.x, local_position.y - metrics.font_bounding_box_descent())
 			.expect("Failed to draw the text on the canvas");

node-graph/gcore/src/application_io.rs

@@ -78,14 +78,14 @@ impl Hash for TextureFrame {
 	fn hash<H: Hasher>(&self, state: &mut H) {
 		self.transform.to_cols_array().iter().for_each(|x| x.to_bits().hash(state));
 		#[cfg(feature = "wgpu")]
-		self.texture.global_id().hash(state);
+		self.texture.hash(state);
 	}
 }
 
 impl PartialEq for TextureFrame {
 	fn eq(&self, other: &Self) -> bool {
 		#[cfg(feature = "wgpu")]
-		return self.transform.eq(&other.transform) && self.texture.global_id() == other.texture.global_id();
+		return self.transform.eq(&other.transform) && self.texture == other.texture;
 
 		#[cfg(not(feature = "wgpu"))]
 		self.transform.eq(&other.transform)

node-graph/gcore/src/graphic_element/renderer.rs

@@ -793,13 +793,7 @@ impl GraphicElementRendered for ImageFrame<Color> {
 		if image.data.is_empty() {
 			return;
 		}
-		let image = vello::peniko::Image {
-			data: image.to_flat_u8().0.into(),
-			width: image.width,
-			height: image.height,
-			format: peniko::Format::Rgba8,
-			extend: peniko::Extend::Repeat,
-		};
+		let image = vello::peniko::Image::new(image.to_flat_u8().0.into(), peniko::Format::Rgba8, image.width, image.height).with_extend(peniko::Extend::Repeat);
 		let transform = transform * self.transform * DAffine2::from_scale(1. / DVec2::new(image.width as f64, image.height as f64));
 
 		scene.draw_image(&image, vello::kurbo::Affine::new(transform.to_cols_array()));
@@ -876,23 +870,11 @@ impl GraphicElementRendered for Raster {
 				if image.data.is_empty() {
 					return;
 				}
-				let image = vello::peniko::Image {
-					data: image.to_flat_u8().0.into(),
-					width: image.width,
-					height: image.height,
-					format: peniko::Format::Rgba8,
-					extend: peniko::Extend::Repeat,
-				};
+				let image = vello::peniko::Image::new(image.to_flat_u8().0.into(), peniko::Format::Rgba8, image.width, image.height).with_extend(peniko::Extend::Repeat);
 				(image, image_frame.alpha_blending)
 			}
 			Raster::Texture(texture) => {
-				let image = vello::peniko::Image {
-					data: vec![].into(),
-					width: texture.texture.width(),
-					height: texture.texture.height(),
-					format: peniko::Format::Rgba8,
-					extend: peniko::Extend::Repeat,
-				};
+				let image = vello::peniko::Image::new(vec![].into(), peniko::Format::Rgba8, texture.texture.width(), texture.texture.height()).with_extend(peniko::Extend::Repeat);
 				let id = image.data.id();
 				context.ressource_overrides.insert(id, texture.texture.clone());
 				(image, texture.alpha_blend)

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

@@ -102,7 +102,7 @@ async fn execute_shader<I: Pod + Send + Sync, O: Pod + Send + Sync>(device: Arc<
 		label: None,
 		layout: None,
 		module: &cs_module,
-		entry_point: entry_point.as_str(),
+		entry_point: Some(entry_point.as_str()),
 		compilation_options: Default::default(),
 		cache: None,
 	});
@@ -130,7 +130,7 @@ async fn execute_shader<I: Pod + Send + Sync, O: Pod + Send + Sync>(device: Arc<
 	{
 		let mut cpass = encoder.begin_compute_pass(&wgpu::ComputePassDescriptor { label: None, timestamp_writes: None });
 		cpass.set_pipeline(&compute_pipeline);
-		cpass.set_bind_group(0, &bind_group, &[]);
+		cpass.set_bind_group(0, Some(&bind_group), &[]);
 		cpass.insert_debug_marker("compute node network evaluation");
 		cpass.dispatch_workgroups(data.len().min(65535) as u32, 1, 1); // Number of cells to run, the (x,y,z) size of item being processed
 	}

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

@@ -17,7 +17,7 @@ use futures::Future;
 use glam::{DAffine2, UVec2};
 use std::pin::Pin;
 use std::sync::Arc;
-use vello::{AaConfig, AaSupport, DebugLayers, RenderParams, Renderer, RendererOptions, Scene};
+use vello::{AaConfig, AaSupport, RenderParams, Renderer, RendererOptions, Scene};
 use wgpu::util::DeviceExt;
 use wgpu::{Buffer, BufferDescriptor, Origin3d, ShaderModule, SurfaceConfiguration, SurfaceError, Texture, TextureAspect, TextureView};
 
@@ -160,8 +160,6 @@ impl WgpuExecutor {
 			width,
 			height,
 			antialiasing_method: AaConfig::Msaa8,
-			// This setting can be used to visualize things like bounding boxes used for rendering
-			debug: DebugLayers::none(),
 		};
 
 		{
@@ -178,10 +176,7 @@ impl WgpuExecutor {
 					Some(texture_view),
 				);
 			}
-			renderer
-				.render_to_surface_async(&self.context.device, &self.context.queue, scene, &surface_texture, &render_params)
-				.await
-				.unwrap();
+			renderer.render_to_surface(&self.context.device, &self.context.queue, scene, &surface_texture, &render_params).unwrap();
 		}
 
 		surface_texture.present();
@@ -301,7 +296,7 @@ impl WgpuExecutor {
 			label: None,
 			layout: None,
 			module: &layout.shader.0,
-			entry_point: layout.entry_point.as_str(),
+			entry_point: Some(layout.entry_point.as_str()),
 			compilation_options: Default::default(),
 			cache: None,
 		});
@@ -335,7 +330,7 @@ impl WgpuExecutor {
 			let dimensions = instances.get();
 			let mut cpass = encoder.begin_compute_pass(&wgpu::ComputePassDescriptor { label: None, timestamp_writes: None });
 			cpass.set_pipeline(&compute_pipeline);
-			cpass.set_bind_group(0, &bind_group, &[]);
+			cpass.set_bind_group(0, Some(&bind_group), &[]);
 			cpass.insert_debug_marker("compute node network evaluation");
 			cpass.push_debug_group("compute shader");
 			cpass.dispatch_workgroups(dimensions.0, dimensions.1, dimensions.2); // Number of cells to run, the (x,y,z) size of item being processed
@@ -450,7 +445,7 @@ impl WgpuExecutor {
 			});
 
 			render_pass.set_pipeline(&self.render_configuration.render_pipeline);
-			render_pass.set_bind_group(0, &output_texture_bind_group, &[]);
+			render_pass.set_bind_group(0, Some(&output_texture_bind_group), &[]);
 			render_pass.set_vertex_buffer(0, self.render_configuration.vertex_buffer.slice(..));
 			render_pass.set_index_buffer(self.render_configuration.index_buffer.slice(..), wgpu::IndexFormat::Uint16);
 			render_pass.draw_indexed(0..self.render_configuration.num_indices, 0, 0..1);
@@ -600,13 +595,13 @@ impl WgpuExecutor {
 			layout: Some(&render_pipeline_layout),
 			vertex: wgpu::VertexState {
 				module: &shader,
-				entry_point: "vs_main",
+				entry_point: Some("vs_main"),
 				buffers: &[Vertex::desc()],
 				compilation_options: Default::default(),
 			},
 			fragment: Some(wgpu::FragmentState {
 				module: &shader,
-				entry_point: "fs_main",
+				entry_point: Some("fs_main"),
 				targets: &[Some(wgpu::ColorTargetState {
 					format: wgpu::TextureFormat::Bgra8Unorm,
 					blend: Some(wgpu::BlendState {

website/content/volunteer/guide/getting-started/_index.md

@@ -21,7 +21,7 @@ Next, install the dependencies required for development builds:
 ```sh
 cargo install cargo-watch
 cargo install wasm-pack
-cargo install -f [email protected].92
+cargo install -f [email protected].95
 ```
 
 Regarding the last one: you'll likely get faster build times if you manually install that specific version of `wasm-bindgen-cli`. It is supposed to be installed automatically but a version mismatch causes it to reinstall every single recompilation. It may need to be manually updated periodically to match the version of the `wasm-bindgen` dependency in [`Cargo.toml`](https://github.com/GraphiteEditor/Graphite/blob/master/Cargo.toml).