Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20170216-WebAssembly

00580f6c11851d2fff0b3e2f7392226b?s=47 chikoski
February 17, 2017

 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.

00580f6c11851d2fff0b3e2f7392226b?s=128

chikoski

February 17, 2017
Tweet

Transcript

  1. 新しいビルドターゲットとしての Webブラウザ。
 もしくは C/C++ で書く Web フロントエンドプログラム Mozilla Japan N.

    Shimizu (nshimizu@mozilla-japan.org / @chikoski) Developers Summit 2017 (2017/02/16)
  2. HDDPIFMMPIFMMPD

  3. FNDDPJOEFYIUNMIFMMPD

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

  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 • 慶應義塾大学環境情報学部非常勤講師
  6. None
  7. None
  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/)
  9. Mozilla Mission (https://www.mozilla.org/en-US/mission/) Our mission is to promote 
 openness,

    innovation & opportunity on the Web.
  10. IUUQTDPNNPOTXJLJNFEJBPSHXJLJ'JMF6OPGGJDJBM@+BWB4DSJQU@MPHP@TWH IUUQTHJUIVCDPN8FC"TTFNCMZEFTJHOJTTVFT

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

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

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

  14. • WebAssembly(WASM)の特徴 • 高速で高効率な実行 • ポータブル • 安全 • テキストフォーマット有り

    • 他のWeb技術と組み合わせて利用できる • W3Cのコミュニティグループで仕様を議論
 https://www.w3.org/community/webassembly/ WebAssembly:Web向けの新しいバイナリフォーマット
  15. WASM+UI部分をHTMLで提供 • Vimをエディタとして利用 • ゲームエンジン • エミュレーター 全てをWASMで作り込む • ゲーム

    • CAD • VR / AR 速度向上のためにWASMを利用 • VPN、リモートデスクトップ • 音声 / 動画コーデック • 画像処理 IUUQTIFMQTBLVSBBEKQIDKBBSUJDMFT7/$&#&#&#%&#$&"#&&"&"&&#
  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
  17. バイナリエディタで頑張って書く テキスト形式のWASMを書き、 wast2wasmで生成する Emscriptenを使って、 C / C++ のソースコードをから WASMを生成する

  18. IUUQTIBDLTNP[JMMBPSHXFCBTTFNCMZCSPXTFSQSFWJFX

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

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

    コンパイラによる最適化
  21. • 型付きスタックマシンの提供する命令で 関数を定義します • 利用できるデータ型: i32, i64, f32, f64 •

    関数本体は抽象構文木として、
 code section に記述されます • type section には、関数のシグネチャが 記述されます WASMはモジュールを定義します IUUQTSTNTNFXBTNJOUSP
  22. • a = 1 + 2 * 3 は、
 このように表現されます

    • スタックマシンの命令 • set_local • i32.add • i32.mul • i32.const WASMで定義される抽象構文木
  23. NPEVMF  GVODBEE5ISFF QBSBNJ  SFTVMUJ   MPDBMBJ 

     TFU@MPDBMB JBEE JDPOTU  JNVM JDPOTU  JDPOTU   HFU@MPDBM   HFU@MPDBMB   JBEE   FYQPSUBEE5ISFF GVODBEE5ISFF  WAST:WASM のテキスト表現
  24. NPEVMF  UZQF   GVOD QBSBNJ  SFTVMUJ 

     GVOD   UZQF  QBSBNJ  SFTVMUJ  HFU@MPDBM JDPOTU JBEE   FYQPSUBEE4PNF GVOD コンパイラによって最適化されたもの
  25. • バイト単位(8ビット)でアクセスできる線形メモリ
 ヒープ領域 / データ領域 • リトルエンディアン • 最大サイズは 4GiB(1ページ64KiB、32ビット分)

    • 演算子を利用してサイズを増やせます • grow_memory 演算子でサイズを増やせます • current_memory 演算子で現在のサイズを取得できます • JavaScriptからはArrayBuffer として見えます 線形メモリ:WASMのメモリモデル ,J#  BEESFTT@TQBDF@NBY
  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の値を保存する
  27.  GVODIJ QBSBNJ   JTUPSFPGGTFU  HFU@MPDBM  

    JDPOTU     JTUPSFBMJHO  HFU@MPDBM   JDPOTU     SFUVSO   文字列はメモリ上の数列として扱われます I J = CVG WPJEIJ DIBS CVG \ CVG<>I CVG<>J CVG<>= ^
  28. DPOTUJNQPSU0CKFDU\ IFMMP DPOTPMFMPH )FMMP  ^ GFUDI TBNQMFXBTN UIFO SFTQPOTFSFTQPOTFBSSBZ#VGGFS

     UIFO CVGGFS8FC"TTFNCMZJOTUBOUJBUF CVGGFS JNQPSU0CKFDU  UIFO \NPEVMF JOTUBODF^  DPOTPMFMPH JOTUBODFFYQPSUTBEE4PNF   WASM のロード
  29. • オープンソースのトランスコンパイラ • MIT License • University of Illinois/NCSA Open

    Source License • C / C++ をコンパイルして asm.js や
 WASM を出力します • WASMをロードするJSも一緒に出力します • http://emscripten.org/
  30. XIJDIHDDѫ--7.ӼԻՓԱӃӵӉӫӕᒨ⺙ӑӃ VTSCJOHDD XIJDIHJUԥդԡԛդԱ൐ᒉӘӉӫӕᒨ⺙ӑӃ VTSCJOHJU QZUIPOWFSTJPOԽՕ՛԰Ԑ՛ԱӘಌਃӕ1ZUIPOYҶᒨ⺙ӑӃ  XIJDIDNBLF--7.ӼԻՓԱӃӵӉӫӕᒨ⺙ӑӃ VTSMPDBMCJODNBLF Emscripten のインストール(準備)

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

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

    configure用の補助ツール。Emscripten用の環境変数を設定する
  33. FNDDT8"4.PCVJMEJOEFYIUNMIFMMPD FNDDT8"4.PCVJMEJOEFYIUNMIFMMPDQQ FNDDT8"4.0PCVJMEJOEFYIUNMIFMMPD FNDDT8"4.0HPCVJMEJOEFYIUNMIFMMPD emcc の基本的な使い方

  34. Emscriptenで乗り越えられるC / C++ とWebのギャップ 項目 Emscriptenの対処 標準ライブラリ (libc / libc++)

    Emscriptenがlibc/libc++をコンパイルしてリンク リンク static link / dynamic link ファイルシステム POSIX ファイルシステムをエミュレート アセット JSに埋め込み / XHRへ変換 OpenGL WebGLに変換
  35. Emscripten でコンパイルできないコード • インラインアセンブラを利用しているもの • 特定のエンディアンを前提としたコード • 特定のメモリアライメントを前提としているコード • 状態を共有しているマルチスレッドプログラム

    • setjmp / longjmp などを利用して、スタックを操作しているもの • スタックやレジスタをスキャンしているようなもの
  36. FNDDPJOEFYIUNMT8"4.FNCFEGJMFSFBENFUYUNBJOD ԽԉԌՓӼ྾ӫ㈆Ӫ࿾൶ѭቍҿҮԽԉԌՓәҽӋӳӼఐ⇹ӃӵӒӲҮ FNDDPJOEFYIUNMT8"4.QSFMPBEGJMFSFBENFUYUNBJOD ԽԉԌՓӼ9)3ӑ⽠ө㈆Ӫ࿾൶ѭ႙ҷҮԽԉԌՓәҽӋӳӼఐ⇹ӃӵᢅҶӲҮ㮹 ファイル入出力:静的なファイルを読む場合

  37. • 3種類のファイルシステムが存在します • MEMFS • メモリ上にファイルを保存します。揮発性があります。 • デフォルトではこれが利用されます • NODEFS:node.jsで利用されるファイルシステム

    • IDBFS • IndexedDBに書き込むファイルシステム。不揮発性 • 手動でマウントする必要があります Emscripten のファイルシステム
  38. FYUFSOWPJEIS WPJE  TOJQ IS  QSJOUG IFMMPXPSME  IS

     外部関数の実装をJavaScriptで与えられます DPOTUISGVODUJPO \ DPOTPMFMPH   ^ NFSHF*OUP -JCSBSZ.BOBHFSMJCSBSZ \ ISIS ^ 
  39. FNDDPJOEFYIUNMT8"4.KTMJCSBSZMJCKTNBJOD 外部実装をJavaScriptで与える場合のコンパイルオプション

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

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

  42. DPOTUBEE.PEVMFDXSBQ BEE OVNCFS <OVNCFS>  DPOTUTVNBEE    DPOTPMFMPH

    TVN  .PEVMFDXSBQӼහӠҽӒӑѬԐԕԡՅդ԰ҿӶӉ㕉ᡔӼහӣӵӲҰӕӔӴӨӃ エキスポートされた関数の利用
  43. FNDPOGJHVSFDPOGJHVSF FNNBLFNBLF ԿՕԠԏԗ԰ҵӳՒ՛ԗҿӶӵՑԌԾՑՒәѬCDԽԉԌՓӕӁӐҴҵӔҮӒՒ՛ԗӑҷӨӅӽ &NTDSJQUFOәᛌᐻᆵӑԽԉԌՓӘ┣ఌӼఋ᡻ӁӨӃ ᒨ⺙ӕᒸӂӐ.BLFGJMFӼᥨҷᝪҲӐҹӊҿҮ 既存プロジェクトのビルド

  44. JOUNBJO \ XIJMF USVF \ UJDL  ^ ^ ビジーループはemscripten_set_main_loopで書き換える

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

  46. JGFR  $$  &.4$3*15&/ FNDD   BTNT8"4. 

    %*45PEJTUJOEFYIUNM  PCKFDUTNBJOPJOJUGTP  -*#KTMJCSBSZMJCKT   1045+4QPTUKTQPTUKT  -%'-"(4 XBTN  -*#  %*45  1045+4  FOEJG Makefileの条件分岐:$(CC)の値で判断できます
  47. まとめ • WASMはプログラムのバイナリフォーマットで、高速で高効率、しかも安全に実行されます • C / C++ などから変換して作成するのが簡単です • Emscriptenを使うのが、王道です

    • 小さいモジュールなら手で書いて、wast2wasmで変換するのもよいでしょう • デバッグは気合が必要 • C / C++ の状態でできる限りデバッグをしておくとよいでしょう • WASMにした後は、printfデバッグになります
  48. SVTUVQUBSHFUBEEXBTNVOLOPXOFNTDSJQUFO DBSHPOFXCJOIFMMP DEIFMMP DBSHPCVJMEUBSHFUXBTNVOLOPXOFNTDSJQUFO FNSVOOP@CSPXTFSQPSUUBSHFUXBTNVOLOPXOFNTDSJQUFO EFCVH RustからもWASMを出力できます