Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WebAssembly とRust の
入口の向かいにある道路の
ベンチに腰掛けるレベルの
さわってみた感想を共有
TGIF 2017-10-27 @zaru
@zaru
WebAssembly
WebAssembly とは
C, C++, Rust 等でコンパイルしたバイナリをブラウザ上で実行できる
JavaScript に比べ高速に動作する
JavaScript の置き換えは目的ではなく、互いに補完し合う関係
現時点では直接DOM ...
Unreal Engine4 demo
Unity demo
ブラウザの対応状況
IE 以外のモダンブラウザは全部対応済み(iOS, Androidも)
どうやって作るか
Emscripten というビルドツールを使う
Rust の場合は rustc , cargo のtargetに wasm32-unknown-emscripten
rustc --target wasm32-unknown-...
とりあえずRust でコードを書く
fn main() {
println!("Hello, world!");
}
WebAssembly 形式にビルドする
rustc --target wasm32-unknown-emscripten w...
いい感じのHTML で読み込む
将来的には <script type='module'> などで簡単に呼べるようになる
<script>
var Module = {};
fetch('wa.wasm')
.then((response) =>...
Web サーバを立ち上げる
CORS があるのでWeb サーバを起動してアクセスする
php -S 0.0.0.0:9999
open http://0.0.0.0:9999/
表示された
Rust の関数をJS から呼ぶ
Rust で関数を定義
fn main() {}
#[no_mangle]
pub extern fn add(a: i32, b: i32) -> i32{
a + b
}
#[no_mangle] を付けてマングリングを防ぐ
マングリングは...
ビルドする
rustc --target wasm32-unknown-emscripten func.rs -o func.js 
-C link-args="-s EXPORTED_FUNCTIONS=['_add']"
EXPORTED_...
JS から呼ぶ
<script>
var Module = {};
fetch('func.wasm')
.then((response) => response.arrayBuffer())
.then((buffer) => {
Modul...
デモとコードの解説をちょっと
https://github.com/zaru/webassembly-demo
WebAssembly の感想
DOM や <canvas> に直接アクセスできない
JS を通じて描画するので非常に面倒
描画パフォーマンスはJS に依存
計算ロジックが複雑みたいなケースじゃないと無駄
例えば囲碁とか?
WebGL ならすご...
Rust の感想
パターンマッチが非常に便利
https://gist.github.com/omasanori/7858569
所有権・借用・ライフタイムの概念が良さげ
Vec が重い…
最適化すればそこまでじゃない?
Goに比べると書くのが...
ありがとうございます
Upcoming SlideShare
Loading in …5
×

WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有

1,012 views

Published on

ソースコード
https://github.com/zaru/webassembly-demo

デモ
https://zaru.github.io/webassembly-demo/rust-canvas/canvas.html

Published in: Technology
  • Be the first to comment

WebAssembly と Rust の入口の向かいにある道路のベンチに腰掛けるレベルのさわってみた感想を共有

  1. 1. WebAssembly とRust の 入口の向かいにある道路の ベンチに腰掛けるレベルの さわってみた感想を共有 TGIF 2017-10-27 @zaru
  2. 2. @zaru
  3. 3. WebAssembly
  4. 4. WebAssembly とは C, C++, Rust 等でコンパイルしたバイナリをブラウザ上で実行できる JavaScript に比べ高速に動作する JavaScript の置き換えは目的ではなく、互いに補完し合う関係 現時点では直接DOM をさわることはできない WebAssembly <-> JavaScript <-> WebAPI(DOM) という関係 asm.js の後継的な存在 Unity やUnrealEngine からWebAssembly (WebGL) 出力ができる
  5. 5. Unreal Engine4 demo
  6. 6. Unity demo
  7. 7. ブラウザの対応状況 IE 以外のモダンブラウザは全部対応済み(iOS, Androidも)
  8. 8. どうやって作るか Emscripten というビルドツールを使う Rust の場合は rustc , cargo のtargetに wasm32-unknown-emscripten rustc --target wasm32-unknown-emscripten wa.rs -o wa.js これで wa.js , wa.wasm が生成される wa.wasm : Rust のバイナリファイル wa.js : .wasm を読み込むために必要なグルーコード あとはHTML でいい感じに読み込む
  9. 9. とりあえずRust でコードを書く fn main() { println!("Hello, world!"); } WebAssembly 形式にビルドする rustc --target wasm32-unknown-emscripten wa.rs -o wa.js
  10. 10. いい感じのHTML で読み込む 将来的には <script type='module'> などで簡単に呼べるようになる <script> var Module = {}; fetch('wa.wasm') .then((response) => response.arrayBuffer()) .then((buffer) => { Module.wasmBinary = buffer; const scriptElem = document.createElement('script'); scriptElem.src = 'wa.js'; document.body.appendChild(scriptElem); }); </script>
  11. 11. Web サーバを立ち上げる CORS があるのでWeb サーバを起動してアクセスする php -S 0.0.0.0:9999 open http://0.0.0.0:9999/
  12. 12. 表示された
  13. 13. Rust の関数をJS から呼ぶ
  14. 14. Rust で関数を定義 fn main() {} #[no_mangle] pub extern fn add(a: i32, b: i32) -> i32{ a + b } #[no_mangle] を付けてマングリングを防ぐ マングリングはコンパイラによって勝手に名前が変わること pub extern で外部関数へ
  15. 15. ビルドする rustc --target wasm32-unknown-emscripten func.rs -o func.js -C link-args="-s EXPORTED_FUNCTIONS=['_add']" EXPORTED_FUNCTIONS で関数名を指定する 関数名の先頭に _ を付ける
  16. 16. JS から呼ぶ <script> var Module = {}; fetch('func.wasm') .then((response) => response.arrayBuffer()) .then((buffer) => { Module.wasmBinary = buffer; const scriptElem = document.createElement('script'); scriptElem.src = 'func.js'; scriptElem.addEventListener('load', (e) => { const add = Module.cwrap('add', 'number', ['number', 'number']); console.log(`1+2=${add(1, 2)}`); }); document.body.appendChild(scriptElem); }); </script>
  17. 17. デモとコードの解説をちょっと https://github.com/zaru/webassembly-demo
  18. 18. WebAssembly の感想 DOM や <canvas> に直接アクセスできない JS を通じて描画するので非常に面倒 描画パフォーマンスはJS に依存 計算ロジックが複雑みたいなケースじゃないと無駄 例えば囲碁とか? WebGL ならすごく良い ネイティブアプリの移植が捗る 将来的にはアクセスできるようになる予定なので期待
  19. 19. Rust の感想 パターンマッチが非常に便利 https://gist.github.com/omasanori/7858569 所有権・借用・ライフタイムの概念が良さげ Vec が重い… 最適化すればそこまでじゃない? Goに比べると書くのが難しい
  20. 20. ありがとうございます

×