rust-perlin-wasm-test

Generates wind blown particles using WASM.

1. About
2. Develop
  2-1. Rust
  2-2. Node.js
  2-3. MIME TYPE
3. Installed NPM Packages
4. Notes
5. LICENSE

View Demo

IMPORTANT:
Please note THIS IS VERY OLD.
Check out my perlin-experiment.
It is doing something different, but has the latest setup.

1. About

Nothing very fancy.
Just calling from browser the perlin noise generator provided by one of Rust's crates, noise.
Currently, the array iteration for making a vector field (of wind vectors) is done by Javascript. Hopefully, I will let Rust do the job instead.

2. Develop

If you were to try it yourself, you need Node.js and Rust.

2-1. Rust

If you are using rustup, change your default toolchain to nightly.

rustup default nightly

You need wasm32-unknown-unknown.

rustup target add wasm32-unknown-unknown

You need wasm-gc (to optimise the WASM binary).

cargo instal wasm-gc

2-2. Node.js

# ts-node

yarn global add ts-node

# git clone

git clone https://github.com/minagawah/rust-perlin-wasm-test.git

# Run

dev

yarn run serve

prod

yarn run build

2-3. MIME TYPE

Simply uploading WASM file to the remote server won't work.
In order for WebAssembly.instantiateStreaming, fetching API, to work, your server must send a MIME header specific to the WASM file.
If you don't have an access to the server hosting the WASM file, there is a workaround which first extracts ArrayBuffer out of the file:
https://stackoverflow.com/questions/52239924/webassembly-instantiatestreaming-wrong-mime-type#answer-52732080
Otherwise, access your hosting server, and simply set to your .htaccess:

AddType application/wasm .wasm

3. Installed NPM Packages

yarn global add ts-node

yarn add typescript ts-loader eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin webpack webpack-cli webpack-dev-server file-loader html-loader css-loader style-loader postcss-loader autoprefixer html-webpack-plugin copy-webpack-plugin clean-webpack-plugin mini-css-extract-plugin webpack-manifest-plugin license-webpack-plugin webpack-merge tape @types/tape --dev

yarn add debounce-ctx
yarn add victor

4. Notes

https://users.rust-lang.org/t/wasm-unknown-vs-emscripten/22997/2
IIUC wasm32-unknown-emscripten can be viewed as a legacy, "hacky" approach,
so I think you should prefer using wasm32-unknown-unkown with wasm-bindgen or stdweb if possible.

https://qiita.com/legokichi/items/5d6344314ab6d6633554
wasm-bindgen: 基本的な型のなどが入ったクレート
js-sys: Rust から JavaScript の値を生成するためのクレート
web-sys: Rust から DOM とかを叩くためのクレート
wasm-bindgen-futures: Rust の Future と JavaScript の Promise の型を相互変換するためのクレート
wasm-bindgen-cli: wasm-bindgen や js-sys や web-sys クレートを使って生成した wasm ファイルに Rust と JS の FFI のランタイムを追加するビルドツール
wasm-pack: wasm-bindgen を使った Rust コードを npm の package.json から呼ぶための設定ファイルを出力するビルドツール

Rust and WebAssembly
https://rustwasm.github.io/docs/book/print.html

5. License

Provided under WTFPL.
Remember, there are some NPM libraries that are under certain license restrictions.