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
740
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
1k
Functions in JavaScript
chikoski
1
1.2k
20171018-WASM
chikoski
2
1.4k
20171002-wejs
chikoski
1
590
20170924-html5conference-wasm
chikoski
5
10k
Equivalence_in_JS
chikoski
0
1.5k
いまさら振り返るPromise
chikoski
1
570
Design and Implementation of Tech Talks
chikoski
0
120
Other Decks in Technology
See All in Technology
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
OSSで50の競合と戦うためにやったこと
yamadashy
3
960
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
620
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
14k
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
400
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
170
「魔法少女まどか☆マギカ Magia Exedra」のIPのキャラクターを描くための3Dルック開発
gree_tech
PRO
0
170
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.8k
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
様々なファイルシステム
sat
PRO
0
230
AIエージェント入門 〜基礎からMCP・A2Aまで〜
shukob
1
170
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
0
420
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Automating Front-end Workflow
addyosmani
1371
200k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Leading Effective Engineering Teams in the AI Era
addyosmani
7
580
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Balancing Empowerment & Direction
lara
5
700
Bash Introduction
62gerente
615
210k
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