/wgpu-svelte

An example of how to import a WGPU canvas to the svelte framework

Primary LanguageRustMIT LicenseMIT

WGPU + Vite + Svelte

Quick Start

Unix

Assuming a fresh install (no node, no rust)

  1. Clone the repo.
  2. cd into repo
  3. Install nvm, close and reopen terminal after install.
  4. Run
nvm install --lts
  1. To verify install run
node -v
// should output something similar to
v16.13.0
  1. This monorepo uses yarn workspaces under the hood. Install yarn by running
npm i -g yarn
  1. Install rustup + rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
// follow installation prompts, close and reopen terminal after install.
  1. Install wasm-pack
curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
  1. If in Ubuntu or similar, you need to install a CC linker (you might already have it if you've run sudo apt-get update before), run
sudo apt-get update
sudo apt install build-essential
  1. Yarn needs rust to be built at least once so it can cross reference dependencies in the monorepo. Run in the packages/rust directory
cd packages/rust
# build WebAssembly and Javascript wrappers using wasm-pack
# don't panic, this might take a few seconds
wasm-pack build --target web
# Then initialize yarn in the rust directory
yarn
# go back to the monorepo root directory
cd ../..
  1. Install node dependencies, run
yarn
  1. Install cargo watch
cargo install cargo-watch
  1. To start the development server, run
yarn dev
  1. Enjoy! Got some feedback? Open an issue, or better yet, a PR. If you like this template, please star this repo.

What's next

This needs to work with a regular CI (ie: vercel/netlify/github pages). Will create a guide for this if there is enough demand for it.

If this gets enough attention, and there demand for it, I will create a template for sveltekit, and potentially for vue and react.