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/github-pages-deploy-action@v4.4.3
  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/github-pages-deploy-action@v4.4.3
- 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();
 }