20170216-WebAssembly

This slide deck will give us an overview of WebAssembly as well as a brief introduction of compiling C / C++ codes into WASM with Emscripten.

Transcript

1. 新しいビルドターゲットとしての Webブラウザ。

   もしくは C/C++ で書く Web フロントエンドプログラム
   Mozilla Japan
   N. Shimizu (nshimizu@mozilla-japan.org / @chikoski)
   Developers Summit 2017 (2017/02/16)
   

   View Slide

2. HDDPIFMMPIFMMPD
   

   View Slide

3. FNDDPJOEFYIUNMIFMMPD
   

   View Slide

4. IUUQTDPNNPOTXJLJNFEJBPSHXJLJ'JMF6OPGGJDJBM@+BWB4DSJQU@MPHP@TWH
   IUUQTHJUIVCDPN8FC"TTFNCMZEFTJHOJTTVFT
   

   View Slide

5. 清水智公 (Noritada Shimizu / @chikoski)
   • Mozilla Japan テクニカルマーケティング
   • Developer relationship
   • asm.js / WebAssembly / HTML5 games / Rust / Devtools
   • Mozilla Developer Network / Firefox for iOS
   • html5j Webプラットフォーム部 / html5j ゲーム部 / "We are JavaScripters"

   Rust 初心者 LT 会 / Rust programmers' meetup
   • 慶應義塾大学環境情報学部非常勤講師
   

   View Slide

6. View Slide

7. View Slide

8. Proudly non-profit, Mozilla makes products like Firefox
   with a mission to keep the power of the Web in the
   hands of users everywhere.
   Mozilla Mission (https://www.mozilla.org/en-US/mission/)
   

   View Slide

9. Mozilla Mission (https://www.mozilla.org/en-US/mission/)
   Our mission is to promote 

   openness, innovation & opportunity on the Web.
   

   View Slide

10. IUUQTDPNNPOTXJLJNFEJBPSHXJLJ'JMF6OPGGJDJBM@+BWB4DSJQU@MPHP@TWH
    IUUQTHJUIVCDPN8FC"TTFNCMZEFTJHOJTTVFT
    

    View Slide

11. AngryBots (http://webassembly.org/demo/)
    

    View Slide

12. https://github.com/toyoshim/sion2hd
    

    View Slide

13. http://rhysd.github.io/react-vimjs/
    

    View Slide

14. • WebAssembly（WASM）の特徴
    • 高速で高効率な実行
    • ポータブル
    • 安全
    • テキストフォーマット有り
    • 他のWeb技術と組み合わせて利用できる
    • W3Cのコミュニティグループで仕様を議論

    https://www.w3.org/community/webassembly/
    WebAssembly：Web向けの新しいバイナリフォーマット
    

    View Slide

15. WASM＋UI部分をHTMLで提供
    • Vimをエディタとして利用
    • ゲームエンジン
    • エミュレーター
    全てをWASMで作り込む
    • ゲーム
    • CAD
    • VR / AR
    速度向上のためにWASMを利用
    • VPN、リモートデスクトップ
    • 音声 / 動画コーデック
    • 画像処理
    IUUQTIFMQTBLVSBBEKQIDKBBSUJDMFT7/$&#&#&#%&#$&"#&&"&"&&#
    

    View Slide

16. Firefox 52 で正式サポート
    Chrome57で正式サポート
    IUUQTFOXJLJQFEJBPSHXJLJ(PPHMF@$ISPNFNFEJB'JMF(PPHMF@$ISPNF@GPS@"OESPJE@*DPO@TWH
    IUUQTDPNNPOTXJLJNFEJBPSHXJLJ'JMF.JDSPTPGU@&EHF@MPHPTWH
    IUUQTFOXJLJQFEJBPSHXJLJ8FC,JU
    開発中
    https://webkit.org/status/#specification-webassembly
    AngryBotsの動作デモ動画が

    公開済み
    https://blogs.windows.com/msedgedev/2016/03/15/
    previewing-webassembly-experiments
    

    View Slide

17. バイナリエディタで頑張って書く テキスト形式のWASMを書き、
    wast2wasmで生成する
    Emscriptenを使って、
    C / C++ のソースコードをから
    WASMを生成する
    

    View Slide

18. IUUQTIBDLTNP[JMMBPSHXFCBTTFNCMZCSPXTFSQSFWJFX
    

    View Slide

19. ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ
    WASM
    ߏจղੳ
    μ΢ϯϩʔυ ίϯύΠϧ
    ࣮ߦ
    JS
    

    View Slide

20. ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ
    WASM
    ߏจղੳ
    μ΢ϯϩʔυ ίϯύΠϧ
    ࣮ߦ
    JS
    コンパイラによる最適化
    

    View Slide

21. • 型付きスタックマシンの提供する命令で
    関数を定義します
    • 利用できるデータ型： i32, i64, f32, f64
    • 関数本体は抽象構文木として、

    code section に記述されます
    • type section には、関数のシグネチャが
    記述されます
    WASMはモジュールを定義します
    IUUQTSTNTNFXBTNJOUSP
    

    View Slide

22. • a = 1 + 2 * 3 は、

    このように表現されます
    • スタックマシンの命令
    • set_local
    • i32.add
    • i32.mul
    • i32.const
    WASMで定義される抽象構文木
    

    View Slide

23. NPEVMF
    GVODBEE5ISFF QBSBNJ
    SFTVMUJ
    
    MPDBMBJ
    
    TFU@MPDBMB JBEE JDPOTU
    JNVM JDPOTU
    JDPOTU
    
    
    
    
    HFU@MPDBM
    
    HFU@MPDBMB
    
    JBEE
    
    
    FYQPSUBEE5ISFF GVODBEE5ISFF
    
    
    
    
    WAST：WASM のテキスト表現
    

    View Slide

24. NPEVMF
    UZQF
    GVOD QBSBNJ
    SFTVMUJ
    
    
    
    GVOD
    UZQF
    QBSBNJ
    SFTVMUJ
    
    HFU@MPDBM
    JDPOTU
    JBEE
    
    FYQPSUBEE4PNF GVOD
    
    
    
    コンパイラによって最適化されたもの
    

    View Slide

25. • バイト単位（8ビット）でアクセスできる線形メモリ

    ヒープ領域 / データ領域
    • リトルエンディアン
    • 最大サイズは 4GiB(1ページ64KiB、32ビット分）
    • 演算子を利用してサイズを増やせます
    • grow_memory 演算子でサイズを増やせます
    • current_memory 演算子で現在のサイズを取得できます
    • JavaScriptからはArrayBuffer として見えます
    線形メモリ：WASMのメモリモデル
    ,J#
    
    BEESFTT@TQBDF@NBY
    

    View Slide

26. 演算子 振る舞い
    i32.load8_s 1バイトをロードし、i32へと拡張する
    i32.load8_u 1バイトをロードし、u32へと拡張する
    i32.load16_s 2バイトをロードし、i32へと拡張する
    i32.load16_u 2バイトをロードし、u32へと拡張する
    i32.load 4バイトロードする
    i32.store8 i32の値をi8として保存する
    i32.store16 i32の値をi16として保存する
    i32.store i32の値を保存する
    

    View Slide

27. GVODIJ QBSBNJ
    
    JTUPSFPGGTFU
    HFU@MPDBM
    
    JDPOTU
    
    
    
    JTUPSFBMJHO
    HFU@MPDBM
    
    JDPOTU
    
    
    
    SFUVSO
    
    
    
    文字列はメモリ上の数列として扱われます
    I J =
    CVG
    WPJEIJ DIBSCVG
    \
    CVG<>I
    CVG<>J
    CVG<>=
    ^
    

    View Slide

28. DPOTUJNQPSU0CKFDU\
    IFMMP
    DPOTPMFMPH )FMMP
    
    ^
    GFUDI TBNQMFXBTN
    UIFO SFTQPOTFSFTQPOTFBSSBZ#VGGFS
    
    
    UIFO CVGGFS8FC"TTFNCMZJOTUBOUJBUF CVGGFS JNQPSU0CKFDU
    
    
    UIFO \NPEVMF JOTUBODF^
    
    DPOTPMFMPH JOTUBODFFYQPSUTBEE4PNF
    
    
    
    WASM のロード
    

    View Slide

29. • オープンソースのトランスコンパイラ
    • MIT License
    • University of Illinois/NCSA Open
    Source License
    • C / C++ をコンパイルして asm.js や

    WASM を出力します
    • WASMをロードするJSも一緒に出力します
    • http://emscripten.org/
    

    View Slide

30. XIJDIHDDѫ--7.ӼԻՓԱӃӵӉӫӕᒨ⺙ӑӃ
    VTSCJOHDD
    XIJDIHJUԥդԡԛդԱ൐ᒉӘӉӫӕᒨ⺙ӑӃ
    VTSCJOHJU
    QZUIPOWFSTJPOԽՕ՛԰Ԑ՛ԱӘಌਃӕ1ZUIPOYҶᒨ⺙ӑӃ
    
    XIJDIDNBLF--7.ӼԻՓԱӃӵӉӫӕᒨ⺙ӑӃ
    VTSMPDBMCJODNBLF
    Emscripten のインストール(準備）
    

    View Slide

31. HJUDMPOFIUUQTHJUIVCDPNKVKFNTELHJU
    DEFNTEL
    FNTELVQEBUF
    FNTELJOTUBMMTELJODPNJOHCJUCJOBSZFONBTUFSCJU
    FNTELBDUJWBUFTELJODPNJOHCJUCJOBSZFONBTUFSCJU
    TPVSDFFNTEL@FOWTI
    Emscriptenのインストール
    

    View Slide

32. インストールされるツール
    ツール 役割
    emsdk Emscriptenの管理ツール。更新、バージョン変更などを行える
    emcc コンパイラのフロントエンド。ソースコードのコンパイルに利用
    emmake Make用の補助ツール。Emscripten用の環境変数を設定する
    emconfigure configure用の補助ツール。Emscripten用の環境変数を設定する
    

    View Slide

33. FNDDT8"4.PCVJMEJOEFYIUNMIFMMPD
    FNDDT8"4.PCVJMEJOEFYIUNMIFMMPDQQ
    FNDDT8"4.0PCVJMEJOEFYIUNMIFMMPD
    FNDDT8"4.0HPCVJMEJOEFYIUNMIFMMPD
    emcc の基本的な使い方
    

    View Slide

34. Emscriptenで乗り越えられるC / C++ とWebのギャップ
    項目 Emscriptenの対処
    標準ライブラリ (libc / libc++) Emscriptenがlibc/libc++をコンパイルしてリンク
    リンク static link / dynamic link
    ファイルシステム POSIX ファイルシステムをエミュレート
    アセット JSに埋め込み / XHRへ変換
    OpenGL WebGLに変換
    

    View Slide

35. Emscripten でコンパイルできないコード
    • インラインアセンブラを利用しているもの
    • 特定のエンディアンを前提としたコード
    • 特定のメモリアライメントを前提としているコード
    • 状態を共有しているマルチスレッドプログラム
    • setjmp / longjmp などを利用して、スタックを操作しているもの
    • スタックやレジスタをスキャンしているようなもの
    

    View Slide

36. FNDDPJOEFYIUNMT8"4.FNCFEGJMFSFBENFUYUNBJOD
    ԽԉԌՓӼ྾ӫ㈆Ӫ࿾൶ѭቍҿҮԽԉԌՓәҽӋӳӼఐ⇹ӃӵӒӲҮ
    FNDDPJOEFYIUNMT8"4.QSFMPBEGJMFSFBENFUYUNBJOD
    ԽԉԌՓӼ9)3ӑ⽠ө㈆Ӫ࿾൶ѭ႙ҷҮԽԉԌՓәҽӋӳӼఐ⇹ӃӵᢅҶӲҮ㮹
    ファイル入出力：静的なファイルを読む場合
    

    View Slide

37. • 3種類のファイルシステムが存在します
    • MEMFS
    • メモリ上にファイルを保存します。揮発性があります。
    • デフォルトではこれが利用されます
    • NODEFS：node.jsで利用されるファイルシステム
    • IDBFS
    • IndexedDBに書き込むファイルシステム。不揮発性
    • 手動でマウントする必要があります
    Emscripten のファイルシステム
    

    View Slide

38. FYUFSOWPJEIS WPJE
    
    TOJQ
    IS
    
    QSJOUG IFMMPXPSME
    
    IS
    
    外部関数の実装をJavaScriptで与えられます
    DPOTUISGVODUJPO \
    DPOTPMFMPH
    
    ^
    NFSHF*OUP -JCSBSZ.BOBHFSMJCSBSZ \
    ISIS
    ^
    
    

    View Slide

39. FNDDPJOEFYIUNMT8"4.KTMJCSBSZMJCKTNBJOD
    外部実装をJavaScriptで与える場合のコンパイルオプション
    

    View Slide

40. FYUFSO$\
    JOUBEE JOUB JOUC
    \
    SFUVSOBC
    ^
    ^
    関数のエキスポート
    

    View Slide

41. FNDDPBEEKTT&91035&%@'6/$5*0/4<@BEE>T8"4.BEED
    &91035&%@'6/$5*0/4ӕԐԕԡՅդ԰Ӄӵ㕉ᡔൻӼ⡣ఇӁӨӃ
    㕉ᡔൻӘ㛤ӕ@ӼӎһӵӘӼᒶӶӔҮӑҹӊҿҮ
    エキスポートする関数を指定してコンパイル
    

    View Slide

42. DPOTUBEE.PEVMFDXSBQ BEE OVNCFS <OVNCFS>
    
    DPOTUTVNBEE
    
    DPOTPMFMPH TVN
    
    .PEVMFDXSBQӼහӠҽӒӑѬԐԕԡՅդ԰ҿӶӉ㕉ᡔӼහӣӵӲҰӕӔӴӨӃ
    エキスポートされた関数の利用
    

    View Slide

43. FNDPOGJHVSFDPOGJHVSF
    FNNBLFNBLF
    ԿՕԠԏԗ԰ҵӳՒ՛ԗҿӶӵՑԌԾՑՒәѬCDԽԉԌՓӕӁӐҴҵӔҮӒՒ՛ԗӑҷӨӅӽ
    &NTDSJQUFOәᛌᐻᆵӑԽԉԌՓӘ┣ఌӼఋ᡻ӁӨӃ
    ᒨ⺙ӕᒸӂӐ.BLFGJMFӼᥨҷᝪҲӐҹӊҿҮ
    既存プロジェクトのビルド
    

    View Slide

44. JOUNBJO
    \
    XIJMF USVF
    \
    UJDL
    
    ^
    ^
    ビジーループはemscripten_set_main_loopで書き換える
    JODMVEFFNTDSJQUFOI
    JOUNBJO
    \
    FNTDSJQUFO@TFU@NBJO@MPPQ UJDL
    
    ^
    

    View Slide

45. JGEFG@@&.4$3*15&/@@
    JODMVEFFNTDSJQUFOI
    &.@"4. BMFSU IFMMP
    
    
    FOEJG
    @@&.4$3*15&/@@Ҷᇰ⡼ҿӶӐҮӵҵӓҰҵӑԛ՛ԹԌՓ↯ဩӼఋ᡻ӑҷӨӃѭ
    条件付きコンパイル
    

    View Slide

46. JGFR $$
    &.4$3*15&/
    FNDD
    
    BTNT8"4.
    %*45PEJTUJOEFYIUNM
    PCKFDUTNBJOPJOJUGTP
    -*#KTMJCSBSZMJCKT
    1045+4QPTUKTQPTUKT
    -%'-"(4 XBTN
    -*#
    %*45
    1045+4
    
    FOEJG
    Makefileの条件分岐：$(CC)の値で判断できます
    

    View Slide

47. まとめ
    • WASMはプログラムのバイナリフォーマットで、高速で高効率、しかも安全に実行されます
    • C / C++ などから変換して作成するのが簡単です
    • Emscriptenを使うのが、王道です
    • 小さいモジュールなら手で書いて、wast2wasmで変換するのもよいでしょう
    • デバッグは気合が必要
    • C / C++ の状態でできる限りデバッグをしておくとよいでしょう
    • WASMにした後は、printfデバッグになります
    

    View Slide

48. SVTUVQUBSHFUBEEXBTNVOLOPXOFNTDSJQUFO
    DBSHPOFXCJOIFMMP
    DEIFMMP
    DBSHPCVJMEUBSHFUXBTNVOLOPXOFNTDSJQUFO
    FNSVOOP@CSPXTFSQPSUUBSHFUXBTNVOLOPXOFNTDSJQUFO
    EFCVH
    RustからもWASMを出力できます
    

    View Slide