$30 off During Our Annual Pro Sale. View Details »

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

chikoski
December 22, 2017
Technology
1
550

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

chikoski

December 22, 2017
Tweet

More Decks by chikoski

See All by chikoski
20210825_ossx
chikoski
0
130
festudy02-wasm
chikoski
1
810
Functions in JavaScript
chikoski
1
850
20171018-WASM
chikoski
2
1.1k
20171002-wejs
chikoski
1
470
20170924-html5conference-wasm
chikoski
5
9.9k
Equivalence_in_JS
chikoski
0
900
いまさら振り返るPromise
chikoski
1
390
Design and Implementation of Tech Talks
chikoski
0
58

Other Decks in Technology

See All in Technology
Webパフォーマンス高速化とこれからのアーキテクチャ
narirou
9
4.2k
Privacy Techの概要と差分プライバシー(Differential Privacy)の動向
line_developers
PRO
1
160
5Gモバイル技術の基礎講座
ttsubo
2
290
Oracle Database Backup Service：サービス概要のご紹介
oracle4engineer
PRO
0
260
セキュリティ系まとめと地味だけど今すぐ設定すべきモニタリングアップデート
cmusudakeisuke
0
870
EMになって半年でやったこと
yuu26
0
330
Reactのトレンドよくわからん
oukayuka
13
7.3k
【Quollio】メタデータ・マネジメント入門
rytmq
PRO
7
1.8k
事業をエンジニアリングし続けるなかで見えてきた私のキャリア / forkwell-cto-suzuken
carta_engineering
1
190
Machine learning system development
shibuiwilliam
1
120
Oracle Exadata Database Service：サービス概要のご紹介
oracle4engineer
PRO
0
1.9k
OCI Search Service with OpenSearch ご紹介/search-service-overview
oracle4engineer
PRO
0
330

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
28
20k
Six Lessons from altMBA
skipperchong
15
1.6k
Fireside Chat
paigeccino
16
1.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
499
130k
Atom: Resistance is Futile
akmur
256
24k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
The Mythical Team-Month
searls
210
40k
10 Git Anti Patterns You Should be Aware of
lemiorhan
643
54k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
Faster Mobile Websites
deanohume
294
29k
Navigating Team Friction
lara
176
12k
Making Projects Easy
brettharned
101
4.7k

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