Merge pull request linebender#220 from linebender/raph-browser

Full pipeline running in browser

Cargo.toml

@@ -1,7 +1,12 @@
 [workspace]
 resolver = "2"
 
-members = ["piet-scene", "piet-wgsl", "piet-wgsl/examples/winit"]
+members = ["piet-scene", "piet-wgsl", "piet-wgsl/examples/winit", "run-wasm"]
+
+[workspace.package]
+edition = "2021"
+version = "0.1.0"
+authors = ["piet-gpu developers"]
 
 [patch.crates-io]
 # Required for metal support to work on wgpu

piet-wgsl/examples/winit/Cargo.toml

@@ -1,7 +1,8 @@
 [package]
-name = "winit"
-version = "0.1.0"
-edition = "2021"
+name = "winit-demo"
+version.workspace = true
+authors.workspace = true
+edition.workspace = true
 publish = false
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
@@ -14,3 +15,9 @@ winit = "0.27.5"
 pollster = "0.2.5"
 # for picosvg
 roxmltree = "0.13"
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+console_error_panic_hook = "0.1.7"
+console_log = "0.2"
+wasm-bindgen-futures = "0.4.33"
+web-sys = "0.3.60"

piet-wgsl/examples/winit/src/main.rs

@@ -19,25 +19,15 @@ mod simple_text;
 mod test_scene;
 
 use piet_scene::{Scene, SceneBuilder};
-use piet_wgsl::{util::RenderContext, Renderer, Result};
+use piet_wgsl::{util::RenderContext, Renderer};
+use winit::{event_loop::EventLoop, window::Window};
 
-async fn run() -> Result<()> {
-    use winit::{
-        dpi::LogicalSize,
-        event::*,
-        event_loop::{ControlFlow, EventLoop},
-        window::WindowBuilder,
-    };
-    let event_loop = EventLoop::new();
-    let window = WindowBuilder::new()
-        .with_inner_size(LogicalSize::new(1044, 800))
-        .with_resizable(true)
-        .build(&event_loop)
-        .unwrap();
-    let render_cx = RenderContext::new().await?;
+async fn run(event_loop: EventLoop<()>, window: Window) {
+    use winit::{event::*, event_loop::ControlFlow};
+    let render_cx = RenderContext::new().await.unwrap();
     let size = window.inner_size();
     let mut surface = render_cx.create_surface(&window, size.width, size.height);
-    let mut renderer = Renderer::new(&render_cx.device)?;
+    let mut renderer = Renderer::new(&render_cx.device).unwrap();
     let mut simple_text = simple_text::SimpleText::new();
     let mut current_frame = 0usize;
     let mut scene_ix = 0usize;
@@ -75,7 +65,7 @@ async fn run() -> Result<()> {
             match scene_ix % N_SCENES {
                 0 => test_scene::render_anim_frame(&mut builder, &mut simple_text, current_frame),
                 1 => test_scene::render_blend_grid(&mut builder),
-                2 => test_scene::render_tiger(&mut builder, false),
+                2 => test_scene::render_tiger(&mut builder),
                 3 => test_scene::render_brush_transform(&mut builder, current_frame),
                 4 => test_scene::render_funky_paths(&mut builder),
                 _ => test_scene::render_scene(&mut builder),
@@ -103,5 +93,35 @@ async fn run() -> Result<()> {
 }
 
 fn main() {
-    pollster::block_on(run()).unwrap();
+    #[cfg(not(target_arch = "wasm32"))]
+    {
+        use winit::{dpi::LogicalSize, window::WindowBuilder};
+        let event_loop = EventLoop::new();
+        let window = WindowBuilder::new()
+            .with_inner_size(LogicalSize::new(1044, 800))
+            .with_resizable(true)
+            .build(&event_loop)
+            .unwrap();
+        pollster::block_on(run(event_loop, window));
+    }
+    #[cfg(target_arch = "wasm32")]
+    {
+        let event_loop = EventLoop::new();
+        let window = winit::window::Window::new(&event_loop).unwrap();
+
+        std::panic::set_hook(Box::new(console_error_panic_hook::hook));
+        console_log::init().expect("could not initialize logger");
+        use winit::platform::web::WindowExtWebSys;
+
+        // On wasm, append the canvas to the document body
+        let canvas = window.canvas();
+        canvas.set_width(1044);
+        canvas.set_height(800);
+        web_sys::window()
+            .and_then(|win| win.document())
+            .and_then(|doc| doc.body())
+            .and_then(|body| body.append_child(&web_sys::Element::from(canvas)).ok())
+            .expect("couldn't append canvas to document body");
+        wasm_bindgen_futures::spawn_local(run(event_loop, window));
+    }
 }

piet-wgsl/examples/winit/src/test_scene.rs

@@ -48,9 +48,8 @@ pub fn render_funky_paths(sb: &mut SceneBuilder) {
 const N_CIRCLES: usize = 0;
 
 #[allow(unused)]
-pub fn render_svg(sb: &mut SceneBuilder, svg: &PicoSvg, print_stats: bool) {
+pub fn render_svg(sb: &mut SceneBuilder, svg: &PicoSvg) {
     use crate::pico_svg::*;
-    let start = std::time::Instant::now();
     for item in &svg.items {
         match item {
             Item::Fill(fill) => {
@@ -73,22 +72,15 @@ pub fn render_svg(sb: &mut SceneBuilder, svg: &PicoSvg, print_stats: bool) {
             }
         }
     }
-    if print_stats {
-        println!("flattening and encoding time: {:?}", start.elapsed());
-    }
 }
 
 #[allow(unused)]
-pub fn render_tiger(sb: &mut SceneBuilder, print_stats: bool) {
+pub fn render_tiger(sb: &mut SceneBuilder) {
     use super::pico_svg::*;
     let xml_str =
         std::str::from_utf8(include_bytes!("../../assets/Ghostscript_Tiger.svg")).unwrap();
-    let start = std::time::Instant::now();
     let svg = PicoSvg::load(xml_str, 6.0).unwrap();
-    if print_stats {
-        println!("parsing time: {:?}", start.elapsed());
-    }
-    render_svg(sb, &svg, print_stats);
+    render_svg(sb, &svg);
 }
 
 pub fn render_scene(sb: &mut SceneBuilder) {

piet-wgsl/shader/clip_leaf.wgsl

@@ -33,8 +33,8 @@ var<workgroup> sh_stack_bbox: array<vec4<f32>, WG_SIZE>;
 var<workgroup> sh_bbox: array<vec4<f32>, WG_SIZE>;
 var<workgroup> sh_link: array<i32, WG_SIZE>;
 
-fn search_link(bic: ptr<function, Bic>, ix: u32) -> i32 {
-    var ix = ix;
+fn search_link(bic: ptr<function, Bic>, ix_in: u32) -> i32 {
+    var ix = ix_in;
     var j = 0u;
     while j < firstTrailingBit(WG_SIZE) {
         let base = 2u * WG_SIZE - (2u << (firstTrailingBit(WG_SIZE) - j));
@@ -130,7 +130,7 @@ fn main(
     // Read input and compute Bic binary tree
     let inp = load_clip_path(global_id.x);
     let is_push = inp >= 0;
-    var bic = Bic(1u - u32(is_push), u32(is_push));
+    bic = Bic(1u - u32(is_push), u32(is_push));
     sh_bic[local_id.x] = bic;
     if is_push {
         let path_bbox = path_bboxes[inp];

piet-wgsl/shader/coarse.wgsl

@@ -55,8 +55,7 @@ var<workgroup> sh_part_offsets: array<u32, WG_SIZE>;
 var<workgroup> sh_drawobj_ix: array<u32, WG_SIZE>;
 var<workgroup> sh_tile_stride: array<u32, WG_SIZE>;
 var<workgroup> sh_tile_width: array<u32, WG_SIZE>;
-var<workgroup> sh_tile_x0: array<u32, WG_SIZE>;
-var<workgroup> sh_tile_y0: array<u32, WG_SIZE>;
+var<workgroup> sh_tile_x0y0: array<u32, WG_SIZE>;
 var<workgroup> sh_tile_count: array<u32, WG_SIZE>;
 var<workgroup> sh_tile_base: array<u32, WG_SIZE>;
 
@@ -235,8 +234,7 @@ fn main(
             let x1 = clamp(i32(path.bbox.z) - i32(bin_tile_x), 0, i32(N_TILE_X));
             let y1 = clamp(i32(path.bbox.w) - i32(bin_tile_y), 0, i32(N_TILE_Y));
             sh_tile_width[local_id.x] = u32(x1 - x0);
-            sh_tile_x0[local_id.x] = u32(x0);
-            sh_tile_y0[local_id.x] = u32(y0);
+            sh_tile_x0y0[local_id.x] = u32(x0) | u32(y0 << 16u);
             tile_count = u32(x1 - x0) * u32(y1 - y0);
             // base relative to bin
             let base = path.tiles - u32(dy * i32(stride) + dx);
@@ -270,8 +268,9 @@ fn main(
             tag = scene[config.drawtag_base + drawobj_ix];
             let seq_ix = ix - select(0u, sh_tile_count[el_ix - 1u], el_ix > 0u);
             let width = sh_tile_width[el_ix];
-            let x = sh_tile_x0[el_ix] + seq_ix % width;
-            let y = sh_tile_y0[el_ix] + seq_ix / width;
+            let x0y0 = sh_tile_x0y0[el_ix];
+            let x = (x0y0 & 0xffffu) + seq_ix % width;
+            let y = (x0y0 >> 16u) + seq_ix / width;
             let tile_ix = sh_tile_base[el_ix] + sh_tile_stride[el_ix] * y + x;
             let tile = tiles[tile_ix];
             let is_clip = (tag & 1u) != 0u;

piet-wgsl/shader/shared/blend.wgsl

@@ -74,8 +74,8 @@ fn lum(c: vec3<f32>) -> f32 {
     return dot(c, f);
 }
 
-fn clip_color(c: vec3<f32>) -> vec3<f32> {
-    var c = c;
+fn clip_color(c_in: vec3<f32>) -> vec3<f32> {
+    var c = c_in;
     let l = lum(c);
     let n = min(c.x, min(c.y, c.z));
     let x = max(c.x, max(c.y, c.z));

piet-wgsl/src/shaders/preprocess.rs

@@ -140,7 +140,15 @@ pub fn preprocess(input: &str, defines: &HashSet<String>, imports: &HashMap<&str
             }
         }
         if stack.iter().all(|item| item.active) {
-            output.push_str(line);
+            // Naga does not yet recognize `const` but web does not allow global `let`. We
+            // use `let` in our canonical sources to satisfy wgsl-analyzer but replace with
+            // `const` when targeting web.
+            if cfg!(target_arch = "wasm32") && line.starts_with("let ") {
+                output.push_str("const");
+                output.push_str(&line[3..]);
+            } else {
+                output.push_str(line);
+            }
             output.push('\n');
         }
     }

run-wasm/Cargo.toml

@@ -0,0 +1,11 @@
+[package]
+name = "run-wasm"
+version.workspace = true
+authors.workspace = true
+edition.workspace = true
+publish = false
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+cargo-run-wasm = "0.2.0"

run-wasm/src/main.rs

@@ -0,0 +1,3 @@
+fn main() {
+    cargo_run_wasm::run_wasm_with_css("body { margin: 0px; }");
+}