20170216-WebAssembly

新しいビルドターゲットとしての Webブラウザ。  もしくは C/C++ で書く Web フロントエンドプログラム Mozilla Japan N.
Shimizu ([email protected] / @chikoski) Developers Summit 2017 (2017/02/16)

HDDPIFMMPIFMMPD

FNDDPJOEFYIUNMIFMMPD

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

清水智公 (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 • 慶應義塾大学環境情報学部非常勤講師

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/)

Mozilla Mission (https://www.mozilla.org/en-US/mission/) Our mission is to promote   openness,
innovation & opportunity on the Web.

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

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

https://github.com/toyoshim/sion2hd

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

• WebAssembly（WASM）の特徴 • 高速で高効率な実行 • ポータブル • 安全 • テキストフォーマット有り
• 他のWeb技術と組み合わせて利用できる • W3Cのコミュニティグループで仕様を議論  https://www.w3.org/community/webassembly/ WebAssembly：Web向けの新しいバイナリフォーマット

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

Firefox 52 で正式サポート Chrome57で正式サポート IUUQTFOXJLJQFEJBPSHXJLJ(PPHMF@$ISPNFNFEJB'JMF(PPHMF@$ISPNF@GPS@"OESPJE@*DPO@TWH IUUQTDPNNPOTXJLJNFEJBPSHXJLJ'JMF.JDSPTPGU@&EHF@MPHPTWH IUUQTFOXJLJQFEJBPSHXJLJ8FC,JU 開発中 https://webkit.org/status/#speciﬁcation-webassembly AngryBotsの動作デモ動画が 
公開済み https://blogs.windows.com/msedgedev/2016/03/15/ previewing-webassembly-experiments

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

IUUQTIBDLTNP[JMMBPSHXFCBTTFNCMZCSPXTFSQSFWJFX

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

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

• 型付きスタックマシンの提供する命令で関数を定義します • 利用できるデータ型： i32, i64, f32, f64 •
関数本体は抽象構文木として、  code section に記述されます • type section には、関数のシグネチャが記述されます WASMはモジュールを定義します IUUQTSTNTNFXBTNJOUSP

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

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

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

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

演算子振る舞い 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の値を保存する

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

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

• オープンソースのトランスコンパイラ • MIT License • University of Illinois/NCSA Open
Source License • C / C++ をコンパイルして asm.js や  WASM を出力します • WASMをロードするJSも一緒に出力します • http://emscripten.org/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20170216-WebAssembly

20170216-WebAssembly

More Decks by chikoski

Other Decks in Technology

Featured

Transcript