Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
An overview of WebAssembly; how it is used, cre...
Search
chikoski
December 22, 2017
Technology
1
640
An overview of WebAssembly; how it is used, created, and applied?
chikoski
December 22, 2017
Tweet
Share
More Decks by chikoski
See All by chikoski
20210825_ossx
chikoski
0
250
festudy02-wasm
chikoski
1
930
Functions in JavaScript
chikoski
1
1.1k
20171018-WASM
chikoski
2
1.3k
20171002-wejs
chikoski
1
530
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.3k
いまさら振り返るPromise
chikoski
1
510
Design and Implementation of Tech Talks
chikoski
0
110
Other Decks in Technology
See All in Technology
LeSS Yoake 2024 スポンサーセッション
riki_hiraoka
0
160
AWS DDKを利用したDataOps事始め
beex
1
170
エンジニア向け会社紹介資料
caddi_eng
14
270k
不要なリソースを自動で定期的に整理する方法 ~Sandboxアカウントのコストを削減しよう!~
amixedcolor
4
240
塩野義製薬様のAWS統合管理戦略:Organizations設計と運用の具体例
tkikuchi
0
320
複数の外部サービスデータの統合と変換を実現する Railsのインポートアーキテクチャ / Rails import architecture for integration and transformation of multiple external service data
aiandrox
0
340
Demystifying Vite Internals
nozomuikuta
3
760
本番のトラフィック量でHudiを検証して見えてきた課題
joker1007
2
270
Rist_Meetup_Kaggleは業務の役にたつ - ビジネスコンテンツ情報を活用する BtoB 事業編 - / rist-meetup-20241012
taro_masuda
1
350
JPOUG_10_20241018_OracleDB_AWS_v1.3.pdf
asahihidehiko
1
190
Snowflakeでスロークエリ改善に取り組んだ話
tabata0208
0
130
40代後半で開発エンジニアからクラウドインフラエンジニアにキャリアチェンジし、生き残れる自信がようやく持てた話
iwamot
9
8.2k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
How GitHub (no longer) Works
holman
311
140k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
23k
Facilitating Awesome Meetings
lara
49
6k
Six Lessons from altMBA
skipperchong
26
3.4k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Code Review Best Practice
trishagee
64
17k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Music & Morning Musume
bryan
46
6.1k
Transcript
できる! WebAssembly @chikoski from emscripten & WebAssembly night / html5j
Webプラットフォーム部
None
None
ケース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
None
UnityのWebGL出力の処理過程 $ *- $ 8"4. +4 --7. *- *-$11
$MBOH #JOBSZFO .POP
None
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 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 / Infinityは型が変わっています •
undefined / 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を使う時に注意する点
サイズが大きくなりがちです
ArrayBuffer WASM module WASM instance 8FC"TTFNCMZDPNQJMF 8FC"TTFNCMZJOTUBOUJBUF wasm file GFUDI
IndexedDB
メモリをとても意識することになります ブラウザの使用するメモリ:32bitの環境だと最大2G JavaScript VMに割り当てられたメモリ Unity用のメモリ σʔλ ελοΫ ώʔϓ
ツールチェーンが複雑になります
None
Webpack
開発ツールのサポート
WASMのGCサポート https://github.com/WebAssembly/gc/blob/master/proposals/gc/Overview.md
IUUQTXXXEFTUSPZBMMTPGUXBSFDPNUBMLTUIFCJSUIBOEEFBUIPGKBWBTDSJQU