Merge pull request #312 from armansito/fix-wasm

Fix WASM build

- Rolled wgpu to 0.16.
- Incorprated the instant crate in lieu of std::time::Instant which works on WASM and native builds.
- Fixed the issue with window scaling by setting the canvas size based on winit Window dimensions.
- Fixed a division-by-zero issue in path_coarse_full

This resolves #276

Cargo.toml

@@ -55,9 +55,10 @@ vello_encoding = { path = "crates/encoding" }
 bytemuck = { version = "1.12.1", features = ["derive"] }
 fello = { git = "https://github.com/dfrg/fount", rev = "58a284eaae67512fb61cf76177c5d33238d79cb1" }
 peniko = { git = "https://github.com/linebender/peniko", rev = "cafdac9a211a0fb2fec5656bd663d1ac770bcc81" }
-wgpu = "0.15"
+wgpu = "0.16" # NOTE: Make sure to keep this in sync with the version badge in README.md
 
 # Used for examples
 clap = "4.1.0"
 anyhow = "1.0"
+instant = { version = "0.1.12", features = [ "wasm-bindgen" ] }
 pollster = "0.3.0"

README.md

@@ -7,7 +7,7 @@
 [![Xi Zulip](https://img.shields.io/badge/Xi%20Zulip-%23gpu-blue?logo=Zulip)](https://xi.zulipchat.com/#narrow/stream/197075-gpu)
 [![dependency status](https://deps.rs/repo/github/linebender/vello/status.svg)](https://deps.rs/repo/github/linebender/vello)
 [![MIT/Apache 2.0](https://img.shields.io/badge/license-MIT%2FApache-blue.svg)](#license)
-[![wgpu version](https://img.shields.io/badge/wgpu-v0.15-orange.svg)](https://crates.io/crates/wgpu)
+[![wgpu version](https://img.shields.io/badge/wgpu-v0.16-orange.svg)](https://crates.io/crates/wgpu)
 <!-- [![Crates.io](https://img.shields.io/crates/v/vello.svg)](https://crates.io/crates/vello) -->
 <!-- [![Docs](https://docs.rs/vello/badge.svg)](https://docs.rs/vello) -->
 <!-- [![Build status](https://github.com/linebender/vello/workflows/CI/badge.svg)](https://github.com/linebender/vello/actions) -->
@@ -65,6 +65,9 @@ cargo run -p with_winit -- download
 
 ### Bevy
 
+> **Warning**  
+> This example currently does not compile. We expect to resolve this as soon as Bevy updates to wgpu 0.16
+
 The [Bevy] example ([examples/with_bevy](examples/with_bevy)) demonstrates using Vello within a [Bevy] application.
 This currently draws to a [`wgpu`] `Texture` using `vello`, then uses that texture as the faces of a cube.
 
@@ -86,10 +89,12 @@ Until browser support becomes widespread, it will probably be necessary to use d
 The following command builds and runs a web version of the [winit demo](#winit). 
 This uses [`cargo-run-wasm`](https://github.com/rukai/cargo-run-wasm) to build the example for web, and host a local server for it
 
-Other examples use the `-p` shorthand, but `cargo-run-wasm` requires the full `--package` to be specified
-
 ```shell
-cargo run_wasm --package with_winit
+# Make sure the Rust toolchain supports the wasm32 target
+rustup target add wasm32-unknown-unknown
+
+# The binary name must also be explicitly provided as it differs from the package name
+cargo run_wasm -p with_winit --bin with_winit_bin
 ```
 
 > **Warning**  

examples/headless/src/main.rs

@@ -1,6 +1,5 @@
 use std::{
     fs::File,
-    num::NonZeroU32,
     path::{Path, PathBuf},
 };
 
@@ -189,7 +188,7 @@ async fn render(mut scenes: SceneSet, index: usize, args: &Args) -> Result<()> {
             buffer: &buffer,
             layout: wgpu::ImageDataLayout {
                 offset: 0,
-                bytes_per_row: NonZeroU32::new(padded_byte_width),
+                bytes_per_row: Some(padded_byte_width),
                 rows_per_image: None,
             },
         },

examples/run_wasm/Cargo.toml

@@ -10,5 +10,4 @@ repository.workspace = true
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-# We use cargo-run-wasm main because of our workspace layout
+cargo-run-wasm = "0.3.2"
-cargo-run-wasm = { git = "https://github.com/rukai/cargo-run-wasm", rev = "d14f73de77eaae44714b4817d660026a31f5f5a9" }

examples/run_wasm/src/main.rs

@@ -6,7 +6,7 @@
 /// ```
 /// Generally:
 /// ```
-/// cargo run_wasm --package with_winit
+/// cargo run_wasm -p with_winit
 /// ```
 
 fn main() {

examples/scenes/Cargo.toml

@@ -16,6 +16,7 @@ vello_svg = { path = "../../integrations/vello_svg" }
 anyhow = { workspace = true }
 clap = { workspace = true, features = ["derive"] }
 image = "0.24.5"
+instant = { workspace = true }
 
 # Used for the `download` command
 byte-unit = "4.0"

examples/scenes/src/svg.rs

@@ -1,10 +1,10 @@
 use std::{
     fs::read_dir,
     path::{Path, PathBuf},
-    time::Instant,
 };
 
 use anyhow::{Ok, Result};
+use instant::Instant;
 use vello::{kurbo::Vec2, SceneBuilder, SceneFragment};
 use vello_svg::usvg;
 

examples/with_winit/Cargo.toml

@@ -24,6 +24,7 @@ vello = { path = "../../", features = ["buffer_labels"] }
 scenes = { path = "../scenes" }
 anyhow = { workspace = true }
 clap = { workspace = true, features = ["derive"] }
+instant = { workspace = true }
 pollster = { workspace = true }
 
 wgpu = { workspace = true }

examples/with_winit/src/lib.rs

@@ -14,8 +14,8 @@
 //
 // Also licensed under MIT license, at your choice.
 
+use instant::Instant;
 use std::collections::HashSet;
-use std::time::Instant;
 
 use anyhow::Result;
 use clap::{CommandFactory, Parser};
@@ -483,8 +483,9 @@ pub fn main() -> Result<()> {
             let window = create_window(&event_loop);
             // On wasm, append the canvas to the document body
             let canvas = window.canvas();
-            canvas.set_width(1044);
+            let size = window.inner_size();
-            canvas.set_height(800);
+            canvas.set_width(size.width);
+            canvas.set_height(size.height);
             web_sys::window()
                 .and_then(|win| win.document())
                 .and_then(|doc| doc.body())

shader/path_coarse_full.wgsl

@@ -60,7 +60,7 @@ fn estimate_subdiv(p0: vec2<f32>, p1: vec2<f32>, p2: vec2<f32>, sqrt_tol: f32) -
     let d12 = p2 - p1;
     let dd = d01 - d12;
     let cross = (p2.x - p0.x) * dd.y - (p2.y - p0.y) * dd.x;
-    let cross_inv = 1.0 / cross;
+    let cross_inv = select(1.0 / cross, 1.0e9, abs(cross) < 1.0e-9);
     let x0 = dot(d01, dd) * cross_inv;
     let x2 = dot(d12, dd) * cross_inv;
     let scale = abs(cross / (length(dd) * (x2 - x0)));

src/engine.rs

@@ -17,7 +17,7 @@
 use std::{
     borrow::Cow,
     collections::{hash_map::Entry, HashMap, HashSet},
-    num::{NonZeroU32, NonZeroU64},
+    num::NonZeroU64,
     sync::atomic::{AtomicU64, Ordering},
 };
 
@@ -277,6 +277,9 @@ impl Engine {
                 }
                 Command::UploadImage(image_proxy, bytes) => {
                     let format = image_proxy.format.to_wgpu();
+                    let block_size = format
+                        .block_size(None)
+                        .expect("ImageFormat must have a valid block size");
                     let texture = device.create_texture(&wgpu::TextureDescriptor {
                         label: None,
                         size: wgpu::Extent3d {
@@ -311,9 +314,7 @@ impl Engine {
                         bytes,
                         wgpu::ImageDataLayout {
                             offset: 0,
-                            bytes_per_row: NonZeroU32::new(
+                            bytes_per_row: Some(image_proxy.width * block_size),
-                                image_proxy.width * format.describe().block_size as u32,
-                            ),
                             rows_per_image: None,
                         },
                         wgpu::Extent3d {
@@ -328,6 +329,9 @@ impl Engine {
                 Command::WriteImage(proxy, [x, y, width, height], data) => {
                     if let Ok((texture, _)) = self.bind_map.get_or_create_image(*proxy, device) {
                         let format = proxy.format.to_wgpu();
+                        let block_size = format
+                            .block_size(None)
+                            .expect("ImageFormat must have a valid block size");
                         queue.write_texture(
                             wgpu::ImageCopyTexture {
                                 texture,
@@ -338,9 +342,7 @@ impl Engine {
                             &data[..],
                             wgpu::ImageDataLayout {
                                 offset: 0,
-                                bytes_per_row: NonZeroU32::new(
+                                bytes_per_row: Some(*width * block_size),
-                                    *width * format.describe().block_size as u32,
-                                ),
                                 rows_per_image: None,
                             },
                             wgpu::Extent3d {