Rust+Wasm+WebGL

class: center, middle

# Rust+Wasm+WebGL

Create interesting interactive 3D content for the web

Antonio Caggiano

Collabora Ltd.

---

# Setup

- https://rustwasm.github.io/docs/book/game-of-life/setup.html
- rustup, rustc, cargo
- wasm-pack
- cargo-generate
- npm

---

# Project

1. `cargo generate –git https://github.com/rustwasm/wasm-pack-template`
2. `npm init wasm-app wasm-pack-template/www`
3. `cd wasm-pack-template && wasm-pack build`
4. `cd www && npm install && npm run start`

---

# HTML + JavaScript + WebGL

- `<canvas>` as drawing area
- `index.js` responsible for calling `requestAnimationFrame(callback)`
- ```
  #[wasm_bindgen]
  pub fn hello_from_rust() {
      alert("Hello from Rust!");
  }
  ```
- WebGL context can be created in Rust

---

# web_sys

- https://rustwasm.github.io/docs/wasm-bindgen/web-sys/index.html
- Access to document, window, Web APIs
- Heavy use of features for faster build times
- Rust-analyzer unfriendly
- Web function overloads means multiple Rust functions
- Some Web functions expect JS values

---

# Demo

https://github.com/fahien/rust-webgl-demo

<button id="start">Start</button>
<canvas id="area">click here</canvas>

---

# References

- https://github.com/lykhouzov/rust-wasm-webgl
- https://rustwasm.github.io/docs/book/
- https://rustwasm.github.io/docs/wasm-bindgen/introduction.html