1 年 ago

逸, 科

1 minute

目的

①WebAssemby(wasm)とは何かを知る
②RustからWebAssemblyへの変換方法を知る
③WebAssemblyが本当に高速なのかを知る

方法

WebAssemblyは本当に高速かどうかを調査するために以下のようなマンデルブロ集合を計算、描画するのにかかる時間を計測した。
wasm onlyとwasm + js(計算はwasm,描画はJavascript)、JavaScript Onlyの３パターンで比較。
canvasのサイズは1200*1200。1000回試行を平均。
マンデルブロ集合の実装は実践Rustプログラミング入門を参考に行った。

ブラウザのバージョン
Cromium :92.0.4515.159
Microsoft Edge: 92.0.902.78
Firefox：91.0.1

PC環境
プロセッサ：Intel(R) Core(TM) i7-10700 CPU @ 2.90GHz
RAM：8.00 GB

結果

フィボナッチ数列の場合

WebAssemblyとは？

WebAssemblyとは？メリットはこちらを参照

使ってみての感想

メリット：C/C++/Rustコードを簡単にWEB上で動かせる。
デメリット：WebAssemblyへのコンパイルが遅い。Hello WorldでもCのコンパイルの10倍以上時間かかっている気がする。

コンパイルの仕組み

C/C++はLLVM IRを経て、Clangによりアセンブリコードになり、EmscritptenというコンパイラによりWebAssemblyテキストコード（.wast)、最後にWebAssemblyのバイトコードとなる（.wasm)。
Rust,Go,AssemblyScriptは直接wasm形式にコンパイルできる。

対応ブラウザと互換性

リンク

RustからWebAssemblyへの変換方法を知る

参考

環境構築

環境構築に必要なのは主に3つ。
1.JavaScriptのパッケージ管理ツールnpm
参考

2.プロジェクトをテンプレートから作成するcargo-generate
以下のコマンドでインストール

cargo install cargo-generate

cargo generate --git https://github.com.rustwasm.wasm-pack-template

でテンプレートプロジェクトを作成する。wasm開発用の定型ファイル群を含んだプロジェクトが作成される。

3.wasm-packのインストール
Rustからwasmへのビルド、Rust-wasm-JavaScriptの橋渡しをするラッパーを作成してくれる。

curl https://rustwasm.github.github.io/wasm-pack/installer/init.sh -sSf | sh

ビルド

ビルドの前にテンプレートプロジェクトに作成されたsrcファルダ内のRustファイルで適当な関数を実装する。

wasm-pack build

Webアプリ準備

npm init wasm-app www(好きなフォルダ名）

npm install

Package.jsonに記載されている依存パッケージのインストールを行ってくれる

サーバーの起動

npm run start

localhostにjavascriptから呼ばれたRustの関数が実行される。

目的

方法

結果