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

No content

No content

ケース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

No content

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

No content

WASMでできること • 数値計算 • 整数：i8, i16, i32, i64, u16, u32, u64 • 浮動小数点：f32, f64 • 線形メモリへのアクセス • バイト単位でのアクセス 、offset / 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のバイト列が入ったArrayBufferオブジェクト ǖ 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）で指定します • 実データはArrayBuffer上に取られます • リトルエンディアンです 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 DIBSCVG \ CVG<>I CVG<>J CVG<>= ^

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

AssemblyScript

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

FYQPSUGVODUJPOBEE BV CV V\ SFUVSOBC ^ 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を使う時に注意する点

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

ArrayBuffer WASM module WASM instance 8FC"TTFNCMZDPNQJMF 8FC"TTFNCMZJOTUBOUJBUF wasm file GFUDI IndexedDB

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

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

No content

Webpack

開発ツールのサポート

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

IUUQTXXXEFTUSPZBMMTPGUXBSFDPNUBMLTUIFCJSUIBOEEFBUIPGKBWBTDSJQU