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

Transcript

1. できる！ WebAssembly @chikoski from emscripten & WebAssembly night / html5j Webプラットフォーム部
4. ケース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/
5. IUUQTIBDLTNP[JMMBPSHXFCBTTFNCMZCSPXTFSQSFWJFX
6. https://caniuse.com/#feat=wasm
7. IUUQTDBOJVTFDPNGFBUXBTN
8. 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
10. UnityのWebGL出力の処理過程 $ *- $ 8"4.
    
    +4 --7.
    *- *-$11 $MBOH #JOBSZFO .POP
12. 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/
13. JavaScript embedding API 1. WASMファイルを用意する 2. WASMモジュールをコンパイルする 3. WASMモジュールをインスタンス化する GFUDI TPNFXBTN UIFO SFT
    
    SFTBSSBZ#VGGFS
    
    TUFQ
    

    
    UIFO CVG
    
    8FC"TTFNCMZDPNQJMF CVG
    
    
    
    
    
    
    
    
    
    
    TUFQ
    

    
    UIFO CJO
    
    8FC"TTFNCMZJOTUBOUJBUF CJO
    \^
    
    
    TUFQ
    

    
    UIFO NPE
    
    \

    
    
    
    
    DPOTU
    SFTVMU
    
    NPEFYQPSUTBEE 
     

    
    ^ 
14. Web embedding API ǖ 1SPNJTF3FTVMU0CKFDU
    8FC"TTFNCMZJOTUBOUJBUF CVGGFS4PVSDF
    JNQPSU0CKFDU
    ǖ CVGGFS4PVSDF
    WASMのバイト列が入ったArrayBufferオブジェクト ǖ JNQPSU0CKFDU
    WASMの空間へインポートするオブジェクト DPOTU
    NFNPSZ
    
    OFX
    8FC"TTFNCMZ.FNPSZ \JOJUJBM
    
    NBYJNVN
    ^ 
    DPOTU
    WJFX
    
    OFX
    6JOU"SSBZ NFNPSZCVGGFS 
    8FC"TTFNCMZJOTUBOUJBUF CJO
    \
    
    
    NFNPSZ
    NFNPSZ
    
    
    QVUD
    JOEFY
    
    DPOTPMFMPH WJFX JOEFY
    ^ 
15. Web embedding API • Webページ上での実行を前提にしているAPI • ストリームコンパイルを行います • c.f. 8FC"TTFNCMZTUSFBN*OTUBOUJBUF 8FC"TTFNCMZTUSFBN$PNQJMF GFUDI TPNFXBTN
    
    
    
    

    
    UIFO CJO
    
    8FC"TTFNCMZJOTUBOUJBUF CJO
    \^ 

    
    UIFO NPE
    
    \

    
    
    
    
    DPOTU
    SFTVMU
    
    NPEFYQPSUTBEE 
     

    
    ^ 
16. WebAssembly.Memory • WASMの作業用メモリ（ヒープとデータ） • 初期サイズと最大サイズをコンストラクタで指定します • サイズはページ（64KiB）で指定します • 実データはArrayBuffer上に取られます • リトルエンディアンです DPOTU
    NFNPSZ
    
    OFX
    8FC"TTFNCMZ.FNPSZ \

    
    JOJUJBM
    
    NBYJNVN
    
    ^ 
    DPOTU
    WJFX
    
    OFX
    6JOU"SSBZ NFNPSZCVGGFS  ,J#
17. メモリの使用例：Cの文字列の場合
    
    GVOD
    IJ
    QBSBN
    
    J
    
    
    
    
    JTUPSF
    PGGTFU
    
    
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    
    
    JDPOTU
    
    
    
    
    
    
    
    
    
    
    JTUPSF
    BMJHO
    
    
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    
    
    JDPOTU
    
    
    
    
    
    
    
    
    
    
    SFUVSO
    
    
    I J = CVG WPJE
    IJ DIBS
    CVG \
    
    
    CVG<>
    
    I
    
    
    CVG<>
    
    J
    
    
    CVG<>
    
    =
    ^
18. メモリの利用例：Cの構造体の場合   CZUFT
    PGGTFU WBS GVOD
    G
    QBSBN
    WBS
    J
    SFTVMU
    G
    
    
    HFU@MPDBM
    WBS
    
    
    GMPBE
    
    GVOD
    G
    QBSBN
    WBS
    J
    SFTVMU
    G
    
    
    HFU@MPDBM
    WBS
    
    
    GMPBE
    PGGTFU
    
19. AssemblyScript
20. TypeScriptとの違い：そのままは変換できません • 数値をより細かく型づけする必要があります • WASMで定義されている演算子（数値計算系）が、新しい演算子として追加されています • NaN / Infinityは型が変わっています • undefined / any / union が使用できません（ null | クラス名 は除きます） • getter / setter は利用できません • メモリを強く意識する必要があります
21. FYQPSU
    GVODUJPO
    BEE B
    V
    C
    V
    
    V
    \
    
    
    SFUVSO
    B
    
    C
    ^ NPEVMF
    
    UZQF
    JJJ
    GVOD
    QBSBN
    J
    J
    SFTVMU
    J
    
    NFNPSZ
    
    
    
    FYQPSU
    BEE
    GVOD
    BEE
    
    FYQPSU
    NFNPSZ
    NFNPSZ
    
    
    GVOD
    BEE
    UZQF
    JJJ
    QBSBN
    
    J
    QBSBN
    
    J
    SFTVMU
    J
    
    
    JBEE
    
    
    
    HFU@MPDBM
    
    
    
    
    HFU@MPDBM
     ↓
22. コンストラクタはメモリを初期化する関数に FYQPSU
    DMBTT
    1PJOU
    \
    
    
    QVCMJD
    Y
    J
    
    
    QVCMJD
    Z
    J
    
    
    DPOTUSVDUPS Y
    J
    Z
    J
    \
    
    
    
    
    UIJTY
    
    Y
    
    
    
    
    UIJTZ
    
    Z
    
    
    ^
    ^ GVOD
    1PJOU
    UZQF
    
    
    
    
    QBSBN
    J
    J
    J
    SFTVMU
    J
    
    
    CMPDL
    SFTVMU
    J
    
    
    MBCFM
    
    !
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    JTUPSF
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    HFU@MPDBM
    
    
    
    
    
    JTUPSF
    PGGTFU
    
    
    
    
    HFU@MPDBM
    
    
    
    FOE
    →
23. メソッドはポインタを受け取る関数になります FYQPSU
    DMBTT
    1PJOU
    \
    
    
    QVCMJD
    Y
    J
    
    
    QVCMJD
    Z
    J
    
    
    DPOTUSVDUPS Y
    J
    Z
    J
    \
    
    
    
    
    UIJTY
    
    Y
    
    
    
    
    UIJTZ
    
    Z
    
    
    ^
    
    
    QVCMJD
    OPSN 
    J
    \
    
    
    
    
    SFUVSO
    BEE UIJTY
    UIJTZ 
    
    
    ^
    ^ GVOD
    1PJOUOPSN
    UZQF
    
    
    
    
    QBSBN
    J
    SFTVMU
    J
    
    
    HFU@MPDBM
    
    
    
    JMPBE
    
    
    HFU@MPDBM
    
    
    
    JMPBE
    PGGTFU
    
    
    DBMM
    BEE →
24. WASMを使う時に注意する点
25. サイズが大きくなりがちです
26. ArrayBuffer WASM module WASM instance 8FC"TTFNCMZDPNQJMF 8FC"TTFNCMZJOTUBOUJBUF wasm file GFUDI IndexedDB
27. メモリをとても意識することになります ブラウザの使用するメモリ：32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ Unity用のメモリ σʔλ ελοΫ ώʔϓ
28. ツールチェーンが複雑になります
30. Webpack
31. 開発ツールのサポート
32. WASMのGCサポート https://github.com/WebAssembly/gc/blob/master/proposals/gc/Overview.md
33. IUUQTXXXEFTUSPZBMMTPGUXBSFDPNUBMLTUIFCJSUIBOEEFBUIPGKBWBTDSJQU