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
970
Functions in JavaScript
chikoski
1
1.1k
20171018-WASM
chikoski
2
1.3k
20171002-wejs
chikoski
1
570
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.4k
いまさら振り返るPromise
chikoski
1
550
Design and Implementation of Tech Talks
chikoski
0
120
Other Decks in Technology
See All in Technology
ソフトウェアは捨てやすく作ろう/Let's make software easy to discard
sanogemaru
10
5.8k
カンファレンスのつくりかた / The Conference Code: What Makes It All Work
tomzoh
8
930
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
360
KMP導⼊において、マネジャーとして考えた事
sansantech
PRO
1
210
mnt_data_とは?ChatGPTコード実行環境を深堀りしてみた
icck
0
210
CloudBruteによる外部からのS3バケットの探索・公開の発見について / 20250605 Kumiko Hennmi
shift_evolve
3
190
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
19
5.4k
セキュリティSaaS企業が実践するCursor運用ルールと知見 / How a Security SaaS Company Runs Cursor: Rules & Insights
tetsuzawa
0
460
プロジェクトマネジメント実践論|現役エンジニアが語る!~チームでモノづくりをする時のコツとは?~
mixi_engineers
PRO
3
180
コードの考古学 〜労務システムから発掘した成長の糧〜
kenta_smarthr
1
1.2k
Cursor Meetup Tokyo
iamshunta
2
680
ローカル環境でAIを動かそう!
falken
PRO
1
170
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
A better future with KSS
kneath
239
17k
Building Adaptive Systems
keathley
41
2.6k
A designer walks into a library…
pauljervisheath
205
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
GitHub's CSS Performance
jonrohan
1031
460k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
The Cost Of JavaScript in 2023
addyosmani
49
8.1k
Building an army of robots
kneath
306
45k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
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