Naga.js
Javascript bindings for Naga(wgsl compiler) based on wasm-bindgen
MIT License
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 viarustup, - Compile our Rust sources into a WebAssembly
.wasmbinary viacargo, - Use
wasm-bindgento 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.