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
710
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
310
festudy02-wasm
chikoski
1
980
Functions in JavaScript
chikoski
1
1.2k
20171018-WASM
chikoski
2
1.3k
20171002-wejs
chikoski
1
580
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.4k
いまさら振り返るPromise
chikoski
1
560
Design and Implementation of Tech Talks
chikoski
0
120
Other Decks in Technology
See All in Technology
Wasm元年
askua
0
140
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
290
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
mrubyと micro-ROSが繋ぐロボットの世界
kishima
2
280
5min GuardDuty Extended Threat Detection EKS
takakuni
0
140
Model Mondays S2E02: Model Context Protocol
nitya
0
220
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
Uniadex__公開版_20250617-AIxIoTビジネス共創ラボ_ツナガルチカラ_.pdf
iotcomjpadmin
0
160
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
310
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
4
740
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
110
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
Rails Girls Zürich Keynote
gr2m
94
14k
Making Projects Easy
brettharned
116
6.3k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Fireside Chat
paigeccino
37
3.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Six Lessons from altMBA
skipperchong
28
3.8k
KATA
mclloyd
29
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
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