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

00580f6c11851d2fff0b3e2f7392226b?s=47 N. Shimizu
December 22, 2017

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

00580f6c11851d2fff0b3e2f7392226b?s=128

N. Shimizu

December 22, 2017
Tweet

Transcript

  1. できる! WebAssembly @chikoski from emscripten & WebAssembly night / html5j

    Webプラットフォーム部
  2. None
  3. None
  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
  9. None
  10. UnityのWebGL出力の処理過程 $ *- $ 8"4.  +4 --7. *- *-$11

    $MBOH #JOBSZFO .POP
  11. None
  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 SFTSFTBSSBZ#VGGFS TUFQ
 UIFO CVG8FC"TTFNCMZDPNQJMF CVG TUFQ
 UIFO CJO8FC"TTFNCMZJOTUBOUJBUF CJO \^ TUFQ
 UIFO NPE\
 DPOTUSFTVMUNPEFYQPSUTBEE   
 ^ 
  14. 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  ^ 
  15. Web embedding API • Webページ上での実行を前提にしているAPI • ストリームコンパイルを行います • c.f. 8FC"TTFNCMZTUSFBN*OTUBOUJBUF

    8FC"TTFNCMZTUSFBN$PNQJMF GFUDI TPNFXBTN 
 UIFO CJO8FC"TTFNCMZJOTUBOUJBUF CJO \^ 
 UIFO NPE\
 DPOTUSFTVMUNPEFYQPSUTBEE   
 ^ 
  16. WebAssembly.Memory • WASMの作業用メモリ(ヒープとデータ) • 初期サイズと最大サイズをコンストラクタで指定します • サイズはページ(64KiB)で指定します • 実データはArrayBuffer上に取られます •

    リトルエンディアンです DPOTUNFNPSZOFX8FC"TTFNCMZ.FNPSZ \
 JOJUJBM NBYJNVN ^  DPOTUWJFXOFX6JOU"SSBZ NFNPSZCVGGFS  ,J#
  17. メモリの使用例:Cの文字列の場合  GVODIJ QBSBNJ   JTUPSFPGGTFU  HFU@MPDBM 

     JDPOTU     JTUPSFBMJHO  HFU@MPDBM   JDPOTU     SFUVSO   I J = CVG WPJEIJ DIBS CVG \ CVG<>I CVG<>J CVG<>= ^
  18. メモリの利用例:Cの構造体の場合   CZUFTPGGTFU WBS GVODG QBSBNWBSJ  SFTVMUG 

    HFU@MPDBMWBS GMPBE  GVODG QBSBNWBSJ  SFTVMUG  HFU@MPDBMWBS GMPBEPGGTFU
  19. AssemblyScript

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

    undefined / any / union が使用できません( null | クラス名 は除きます) • getter / setter は利用できません • メモリを強く意識する必要があります
  21. 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 ↓
  22. コンストラクタはメモリを初期化する関数に 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  →
  23. メソッドはポインタを受け取る関数になります FYQPSUDMBTT1PJOU\ QVCMJDYJ QVCMJDZJ DPOTUSVDUPS YJ ZJ \ UIJTYY UIJTZZ

    ^ QVCMJDOPSN J\ SFUVSOBEE UIJTY UIJTZ  ^ ^ GVOD1PJOUOPSN UZQF  QBSBNJ  SFTVMUJ  HFU@MPDBM JMPBE HFU@MPDBM JMPBEPGGTFU DBMMBEE →
  24. WASMを使う時に注意する点

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

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

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

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

  29. None
  30. Webpack

  31. 開発ツールのサポート

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

  33. IUUQTXXXEFTUSPZBMMTPGUXBSFDPNUBMLTUIFCJSUIBOEEFBUIPGKBWBTDSJQU