Revamp Examples to Match Website (#4765)

* Revamp examples to match website

* Small fixes

* Fix stencil_triangles on resize

* Fix

* Fix everything

.github/workflows/publish.yml

@@ -34,45 +34,15 @@ jobs:
       - name: Install wasm-bindgen
         run: cargo +stable install wasm-bindgen-cli --version=$WASM_BINDGEN_VERSION
 
-      - name: Build WebGPU examples
-        run: cargo build --release --target wasm32-unknown-unknown
-
-      - name: Generate JS bindings for WebGPU examples
-        run: |
-          for i in target/wasm32-unknown-unknown/release/*.wasm;
-          do
-            wasm-bindgen --no-typescript --out-dir target/generated-gpu --web "$i";
-          done
+      - name: Build examples
+        run: cargo xtask run-wasm --no-serve
 
       - name: Deploy WebGPU examples
         uses: JamesIves/[email protected]
         if: github.ref == 'refs/heads/trunk'
         with:
           token: ${{ secrets.WEB_DEPLOY }}
-          folder: target/generated-gpu
-          repository-name: gfx-rs/wgpu-rs.github.io
-          branch: master
-          target-folder: examples-gpu/wasm
-
-      - name: Clean the build
-        run: cargo clean
-
-      - name: Build WebGL examples
-        run: cargo build --release --target wasm32-unknown-unknown --features webgl
-
-      - name: Generate JS bindings for WebGL examples
-        run: |
-          for i in target/wasm32-unknown-unknown/release/*.wasm;
-          do
-            wasm-bindgen --no-typescript --out-dir target/generated-gl --web "$i";
-          done
-
-      - name: Deploy WebGL examples
-        uses: JamesIves/[email protected]
-        if: github.ref == 'refs/heads/trunk'
-        with:
-          token: ${{ secrets.WEB_DEPLOY }}
-          folder: target/generated-gl
+          folder: target/generated
           repository-name: gfx-rs/wgpu-rs.github.io
           branch: master
-          target-folder: examples-gl/wasm
+          target-folder: examples/

Cargo.toml

@@ -77,14 +77,12 @@ cfg_aliases = "0.1"
 cfg-if = "1"
 codespan-reporting = "0.11"
 ctor = "0.2"
-# https://github.com/SiegeEngine/ddsfile/issues/15 (Updated dependencies)
-ddsfile = { version = "0.5.2-unstable", git = "https://github.com/SiegeEngine/ddsfile.git", rev = "9b597930edc00502391cbb1a39708dadde0fd0ff" }
+ddsfile = "0.5.2"
 encase = "0.6"
 env_logger = "0.10"
 fern = "0.6"
 flume = "0.11"
-futures-lite = "1"
-futures-intrusive = "0.5"
+futures-lite = "2"
 rustc-hash = "1.1.0"
 getrandom = "0.2"
 glam = "0.24.2"

examples/Cargo.toml

@@ -24,9 +24,7 @@ bytemuck.workspace = true
 cfg-if.workspace = true
 ddsfile.workspace = true
 encase = { workspace = true, features = ["glam"] }
-env_logger.workspace = true
 flume.workspace = true
-futures-intrusive.workspace = true
 getrandom.workspace = true
 glam.workspace = true
 log.workspace = true
@@ -42,13 +40,15 @@ winit.workspace = true
 [dev-dependencies]
 wgpu-test.workspace = true
 
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+env_logger.workspace = true
+
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 console_error_panic_hook.workspace = true
 console_log.workspace = true
 fern.workspace = true
 js-sys.workspace = true
 wasm-bindgen.workspace = true
-wasm-bindgen-test.workspace = true
 wasm-bindgen-futures.workspace = true
 hal = { workspace = true, optional = true }
 # We need these features in the framework examples and tests
@@ -63,8 +63,7 @@ web-sys = { workspace = true, features = [
     "HtmlImageElement",
     "WebGl2RenderingContext",
     "CanvasRenderingContext2d",
-
-    # Needed for example display logic
-    "HtmlStyleElement",
-    "HtmlHeadElement",
 ] }
+
+[target.'cfg(target_arch = "wasm32")'.dev-dependencies]
+wasm-bindgen-test.workspace = true

examples/src/framework.rs

@@ -98,21 +98,22 @@ impl EventLoopWrapper {
     pub fn new(title: &str) -> Self {
         let event_loop = EventLoop::new().unwrap();
         let mut builder = winit::window::WindowBuilder::new();
-        builder = builder.with_title(title);
-        let window = Arc::new(builder.build(&event_loop).unwrap());
-
         #[cfg(target_arch = "wasm32")]
         {
-            use winit::platform::web::WindowExtWebSys;
-            let canvas = window.canvas().expect("Couldn't get canvas");
-            canvas.style().set_css_text("height: 100%; width: 100%;");
-            // On wasm, append the canvas to the document body
-            web_sys::window()
-                .and_then(|win| win.document())
-                .and_then(|doc| doc.body())
-                .and_then(|body| body.append_child(&canvas).ok())
-                .expect("couldn't append canvas to document body");
+            use wasm_bindgen::JsCast;
+            use winit::platform::web::WindowBuilderExtWebSys;
+            let canvas = web_sys::window()
+                .unwrap()
+                .document()
+                .unwrap()
+                .get_element_by_id("canvas")
+                .unwrap()
+                .dyn_into::<web_sys::HtmlCanvasElement>()
+                .unwrap();
+            builder = builder.with_canvas(Some(canvas));
         }
+        builder = builder.with_title(title);
+        let window = Arc::new(builder.build(&event_loop).unwrap());
 
         Self { event_loop, window }
     }

examples/src/hello_triangle/mod.rs

@@ -150,7 +150,24 @@ async fn run(event_loop: EventLoop<()>, window: Window) {
 
 pub fn main() {
     let event_loop = EventLoop::new().unwrap();
-    let window = winit::window::Window::new(&event_loop).unwrap();
+    #[allow(unused_mut)]
+    let mut builder = winit::window::WindowBuilder::new();
+    #[cfg(target_arch = "wasm32")]
+    {
+        use wasm_bindgen::JsCast;
+        use winit::platform::web::WindowBuilderExtWebSys;
+        let canvas = web_sys::window()
+            .unwrap()
+            .document()
+            .unwrap()
+            .get_element_by_id("canvas")
+            .unwrap()
+            .dyn_into::<web_sys::HtmlCanvasElement>()
+            .unwrap();
+        builder = builder.with_canvas(Some(canvas));
+    }
+    let window = builder.build(&event_loop).unwrap();
+
     #[cfg(not(target_arch = "wasm32"))]
     {
         env_logger::init();
@@ -160,15 +177,6 @@ pub fn main() {
     {
         std::panic::set_hook(Box::new(console_error_panic_hook::hook));
         console_log::init().expect("could not initialize logger");
-        use winit::platform::web::WindowExtWebSys;
-        let canvas = window.canvas().expect("Couldn't get canvas");
-        canvas.style().set_css_text("height: 100%; width: 100%;");
-        // On wasm, append the canvas to the document body
-        web_sys::window()
-            .and_then(|win| win.document())
-            .and_then(|doc| doc.body())
-            .and_then(|body| body.append_child(&canvas).ok())
-            .expect("couldn't append canvas to document body");
         wasm_bindgen_futures::spawn_local(run(event_loop, window));
     }
 }

examples/src/hello_workgroups/mod.rs

@@ -170,10 +170,10 @@ async fn get_data<T: bytemuck::Pod>(
     );
     queue.submit(Some(command_encoder.finish()));
     let buffer_slice = staging_buffer.slice(..);
-    let (sender, receiver) = futures_intrusive::channel::shared::oneshot_channel();
+    let (sender, receiver) = flume::bounded(1);
     buffer_slice.map_async(wgpu::MapMode::Read, move |r| sender.send(r).unwrap());
     device.poll(wgpu::Maintain::Wait);
-    receiver.receive().await.unwrap().unwrap();
+    receiver.recv_async().await.unwrap().unwrap();
     output.copy_from_slice(bytemuck::cast_slice(&buffer_slice.get_mapped_range()[..]));
     staging_buffer.unmap();
 }