wgpu
Table of Contents
Some notes for wgpu.
I plan to use wgpu as my graphics framework. I mainly need it for shaders and performance. I will use it with wasm so I can do web rendering. The goal is to complete my 3d color selector project.
1. Example Project
Find an example project that already uses wgpu, wasm, and shaders.
cargo update cargo xtask run-wasm
2. Key Components
2.1. Server
Light weight server to serve the html and javascript.
2.2. Cargo
The workspace root in ./Cargo.toml defines members. One of the members is xtask. The package wgpu-xtask is aliased to xtask in ./.cargo/config.toml.
2.3. xtask
The main function parses the arguments to figure out the subcommand. One of the subcommands is run-wasm. xshell is used for executing a series of commands: build (webgpu, webgl), copy static files, and server startup. The build target is wasm32-unknown-unknown; this is followed by wasm-bindgen.
cargo build --target wasm32-unknown-unknown -p wgpu-examples --no-default-features --features webgpu {release_flag...} wasm-bindgen target/wasm32-unknown-unknown/{output_dir}/wgpu-examples.wasm --target web --no-typescript --out-dir target/generated --out-name webgpu
cargo build --target wasm32-unknown-unknown -p wgpu-examples --no-default-features --features webgl {release_flag...} wasm-bindgen target/wasm32-unknown-unknown/{output_dir}/wgpu-examples.wasm --target web --no-typescript --out-dir target/generated --out-name webgl2
simple-http-server target/generated -c wasm,html,js -i --coep --coop --ip 127.0.0.1
2.4. wasm-bindgen
Note that module.default() is called with no arguments from target/generated/index.html. Observe export default __wbg_init; from target/generated/webgpu.js. The default module is webgpu_bg.wasm. The js file is created by wasm-bindgen when --target web is set.
Since I want to prioritize Rust development and I don’t have specific JS dependencies, I will start with --target web and reserve the option to migrate to --target bundler in the future.
The entry point should be marked by #[wasm_bindgen(start)]. The examples in wgpu do not use this attribute. They are built from a binary instead of a library. The main function of the binary implicitly has the equivalent of #[wasm_bindgen(start)] which results in a behavior where the main function is called when the wasm module initializes.
2.4.1. wasm-bingen binaries
cargo install wasm-bindgen-cli cargo install wasm-pack
To update rust:
rustup update
2.4.2. web-sys
Web API Rust bindings.
2.5. Other
Identify key components.
How does wasm interface with javascript?
Create new repo.
Features
- Event loop
- Colorspace conversion functions
- XYZ, oklch, rgb, rgb linear
- Light and mix modifiers. Whitepoint.
- Coordinate system
- Basic mesh rendering
- Colorspace mesh generation
- Shader to render the mesh
- Mesh warping
- Wireframe rendering
- Rotation
- Panning
- Zooming
- Resizing
- Projection mapping
- Pointer input