naga.js

naga.js compiled by using rustwasm toolkit

Getting Started

This section describes how to set up the toolchain for compiling Rust programs to WebAssembly and integrate them into JavaScript.

The Rust Toolchain

You will need the standard Rust toolchain, including rustup, rustc, and cargo.

Follow these instructions to install the Rust toolchain.

The Rust and WebAssembly experience is riding the Rust release trains to stable! That means we don't require any experimental feature flags. However, we do require Rust 1.30 or newer.

wasm-pack

wasm-pack is your one-stop shop for building, testing, and publishing Rust-generated WebAssembly.

Get wasm-pack here!

cargo-generate

cargo-generate helps you get up and running quickly with a new Rust project by leveraging a pre-existing git repository as a template.

Install cargo-generate with this command:

cargo install cargo-generate

npm

npm is a package manager for JavaScript. We will use it to install and run a JavaScript bundler and development server. At the end of the tutorial, we will publish our compiled .wasm to the npm registry.

Follow these instructions to install npm.

If you already have npm installed, make sure it is up-to-date with this command:

npm install npm@latest -g

Build the Project

We use wasm-pack to orchestrate the following build steps:

• Ensure that we have Rust 1.30 or newer and the wasm32-unknown-unknown target installed via rustup,
• Compile our Rust sources into a WebAssembly .wasm binary via cargo,
• Use wasm-bindgen to generate the JavaScript API for using our Rust-generated WebAssembly.

To do all of that, run this command inside the project directory:

wasm-pack build --target web

When the build has completed, we can find its artifacts in the pkg directory, and it should have these contents:

pkg/
├── package.json
├── README.md
├── naga_wasm_bg.wasm
├── naga_wasm.d.ts
|—— naga_wasm_bg.wasm.d.ts
└── naga_wasm.js

The README.md file is copied from the main project, but the others are completely new.

Example

The example folder show how to use the wasm binary into you project:

npm install
npm run dev

Paste the host address in Chrome and open developer tool, refresh the page will stop in the debugger mark. Move your mouse on the variable wgsl will show the formatted wgsl shader source code. You can use this project to test whether the glsl to wgsl transition have the right result.