An overview of WebAssembly; how it is used, created, and applied?

できる！ WebAssembly @chikoski from emscripten & WebAssembly night / html5j
Webプラットフォーム部

ケース2：CPUインテンショナルな処理の高速化ケース1：他の言語の資産をWebへ展開 https://github.com/toyoshim/sion2hd AV1 bitstream analyzer http://rhysd.github.io/react-vimjs/ https://github.com/JasonWeathersby/WASMSobel http://webassembly.org/demo/

IUUQTIBDLTNP[JMMBPSHXFCBTTFNCMZCSPXTFSQSFWJFX

https://caniuse.com/#feat=wasm

IUUQTDBOJVTFDPNGFBUXBTN

WASMを生成するツール Tool Language Compiler website Emscripten C / C++ http://kripken.github.io/emscripten-site/
Clang C / C++ https://clang.llvm.org/ lld WASM https://lld.llvm.org/ rustc Rust https://rust-lang.org/ AssemblyScript TypeScript https://github.com/AssemblyScript/assemblyscript Binaryen IR(LLVM / TS / Rust MIR) https://github.com/WebAssembly/binaryen Wabt S-expression / text https://github.com/WebAssembly/wabt Unity Unity(C#) http://unity3d.com/ mono-wasm C# https://github.com/lrz/mono-wasm

UnityのWebGL出力の処理過程 $ *- $ 8"4. +4 --7. *- *-$11
$MBOH #JOBSZFO .POP

WASMでできること • 数値計算 • 整数：i8, i16, i32, i64, u16, u32,
u64 • 浮動小数点：f32, f64 • 線形メモリへのアクセス • バイト単位でのアクセス、oﬀset / align • load / store 命令 • 64KiBのページ / grow_memory / current_memory • 関数の呼び出し (call / call_indirect) https://wasdk.github.io/wasmcodeexplorer/

JavaScript embedding API 1. WASMファイルを用意する 2. WASMモジュールをコンパイルする 3. WASMモジュールをインスタンス化する GFUDI
TPNFXBTN UIFO SFTSFTBSSBZ#VGGFS TUFQ  UIFO CVG8FC"TTFNCMZDPNQJMF CVG TUFQ  UIFO CJO8FC"TTFNCMZJOTUBOUJBUF CJO \^ TUFQ  UIFO NPE\  DPOTUSFTVMUNPEFYQPSUTBEE   ^

Web embedding API ǖ 1SPNJTF3FTVMU0CKFDU8FC"TTFNCMZJOTUBOUJBUF CVGGFS4PVSDF JNQPSU0CKFDU ǖ
CVGGFS4PVSDFWASMのバイト列が入ったArrayBuﬀerオブジェクト ǖ JNQPSU0CKFDUWASMの空間へインポートするオブジェクト DPOTUNFNPSZOFX8FC"TTFNCMZ.FNPSZ \JOJUJBM NBYJNVN^ DPOTUWJFXOFX6JOU"SSBZ NFNPSZCVGGFS 8FC"TTFNCMZJOTUBOUJBUF CJO \ NFNPSZNFNPSZ QVUDJOEFYDPOTPMFMPH WJFX JOEFY ^

Web embedding API • Webページ上での実行を前提にしているAPI • ストリームコンパイルを行います • c.f. 8FC"TTFNCMZTUSFBN*OTUBOUJBUF
8FC"TTFNCMZTUSFBN$PNQJMF GFUDI TPNFXBTN   UIFO CJO8FC"TTFNCMZJOTUBOUJBUF CJO \^   UIFO NPE\  DPOTUSFTVMUNPEFYQPSUTBEE   ^

WebAssembly.Memory • WASMの作業用メモリ（ヒープとデータ） • 初期サイズと最大サイズをコンストラクタで指定します • サイズはページ（64KiB）で指定します • 実データはArrayBuﬀer上に取られます •
リトルエンディアンです DPOTUNFNPSZOFX8FC"TTFNCMZ.FNPSZ \  JOJUJBM NBYJNVN ^ DPOTUWJFXOFX6JOU"SSBZ NFNPSZCVGGFS ,J#

メモリの使用例：Cの文字列の場合 GVODIJ QBSBNJ JTUPSFPGGTFU HFU@MPDBM
JDPOTU JTUPSFBMJHO HFU@MPDBM JDPOTU SFUVSO I J = CVG WPJEIJ DIBS CVG \ CVG<>I CVG<>J CVG<>= ^

メモリの利用例：Cの構造体の場合 CZUFTPGGTFU WBS GVODG QBSBNWBSJ SFTVMUG
HFU@MPDBMWBS GMPBE GVODG QBSBNWBSJ SFTVMUG HFU@MPDBMWBS GMPBEPGGTFU

AssemblyScript

TypeScriptとの違い：そのままは変換できません • 数値をより細かく型づけする必要があります • WASMで定義されている演算子（数値計算系）が、新しい演算子として追加されています • NaN / Inﬁnityは型が変わっています •
undeﬁned / any / union が使用できません（ null | クラス名は除きます） • getter / setter は利用できません • メモリを強く意識する必要があります

FYQPSUGVODUJPOBEE BV CV V\ SFUVSOB C ^ NPEVMF UZQFJJJ
GVOD QBSBNJJ SFTVMUJ NFNPSZ FYQPSUBEE GVODBEE FYQPSUNFNPSZ NFNPSZ GVODBEE UZQFJJJ QBSBNJ QBSBNJ SFTVMUJ JBEE HFU@MPDBM HFU@MPDBM ↓

コンストラクタはメモリを初期化する関数に FYQPSUDMBTT1PJOU\ QVCMJDYJ QVCMJDZJ DPOTUSVDUPS YJ ZJ \ UIJTYY UIJTZZ
^ ^ GVOD1PJOU UZQF QBSBNJJJ SFTVMUJ CMPDL SFTVMUJ MBCFM! HFU@MPDBM HFU@MPDBM JTUPSF HFU@MPDBM HFU@MPDBM JTUPSFPGGTFU HFU@MPDBM FOE →

メソッドはポインタを受け取る関数になります FYQPSUDMBTT1PJOU\ QVCMJDYJ QVCMJDZJ DPOTUSVDUPS YJ ZJ \ UIJTYY UIJTZZ
^ QVCMJDOPSN J\ SFUVSOBEE UIJTY UIJTZ ^ ^ GVOD1PJOUOPSN UZQF QBSBNJ SFTVMUJ HFU@MPDBM JMPBE HFU@MPDBM JMPBEPGGTFU DBMMBEE →

WASMを使う時に注意する点

サイズが大きくなりがちです

ArrayBuﬀer WASM module WASM instance 8FC"TTFNCMZDPNQJMF 8FC"TTFNCMZJOTUBOUJBUF wasm ﬁle GFUDI
IndexedDB

メモリをとても意識することになりますブラウザの使用するメモリ：32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ Unity用のメモリ σʔλ ελοΫ ώʔϓ

ツールチェーンが複雑になります

Webpack

開発ツールのサポート

WASMのGCサポート https://github.com/WebAssembly/gc/blob/master/proposals/gc/Overview.md

IUUQTXXXEFTUSPZBMMTPGUXBSFDPNUBMLTUIFCJSUIBOEEFBUIPGKBWBTDSJQU

An overview of WebAssembly; how it is used, cre...

An overview of WebAssembly; how it is used, created, and applied?

chikoski

More Decks by chikoski

Other Decks in Technology

Featured

Transcript

できる！ WebAssembly @chikoski from emscripten & WebAssembly night / html5j

ケース2：CPUインテンショナルな処理の高速化ケース1：他の言語の資産をWebへ展開 https://github.com/toyoshim/sion2hd AV1 bitstream analyzer http://rhysd.github.io/react-vimjs/ https://github.com/JasonWeathersby/WASMSobel http://webassembly.org/demo/

IUUQTIBDLTNP[JMMBPSHXFCBTTFNCMZCSPXTFSQSFWJFX

https://caniuse.com/#feat=wasm

IUUQTDBOJVTFDPNGFBUXBTN

WASMを生成するツール Tool Language Compiler website Emscripten C / C++ http://kripken.github.io/emscripten-site/

UnityのWebGL出力の処理過程 $ - $ 8"4. +4 --7. - *-$11

WASMでできること • 数値計算 • 整数：i8, i16, i32, i64, u16, u32,

JavaScript embedding API 1. WASMファイルを用意する 2. WASMモジュールをコンパイルする 3. WASMモジュールをインスタンス化する GFUDI

Web embedding API ǖ 1SPNJTF3FTVMU0CKFDU8FC"TTFNCMZJOTUBOUJBUF CVGGFS4PVSDF JNQPSU0CKFDU ǖ

Web embedding API • Webページ上での実行を前提にしているAPI • ストリームコンパイルを行います • c.f. 8FC"TTFNCMZTUSFBN*OTUBOUJBUF

WebAssembly.Memory • WASMの作業用メモリ（ヒープとデータ） • 初期サイズと最大サイズをコンストラクタで指定します • サイズはページ（64KiB）で指定します • 実データはArrayBuﬀer上に取られます •

メモリの使用例：Cの文字列の場合 GVODIJ QBSBNJ JTUPSFPGGTFU HFU@MPDBM

メモリの利用例：Cの構造体の場合 CZUFTPGGTFU WBS GVODG QBSBNWBSJ SFTVMUG

AssemblyScript

TypeScriptとの違い：そのままは変換できません • 数値をより細かく型づけする必要があります • WASMで定義されている演算子（数値計算系）が、新しい演算子として追加されています • NaN / Inﬁnityは型が変わっています •

FYQPSUGVODUJPOBEE BV CV V\ SFUVSOB C ^ NPEVMF UZQFJJJ

コンストラクタはメモリを初期化する関数に FYQPSUDMBTT1PJOU\ QVCMJDYJ QVCMJDZJ DPOTUSVDUPS YJ ZJ \ UIJTYY UIJTZZ

メソッドはポインタを受け取る関数になります FYQPSUDMBTT1PJOU\ QVCMJDYJ QVCMJDZJ DPOTUSVDUPS YJ ZJ \ UIJTYY UIJTZZ