20170924-html5conference-wasm

WebAssembly:   a fast, efﬁcient, portable, and safe code format
@chikoski

WASM complements JS

Design goals Fast, safe and portable semantics • Executed in
near native speed • Code validation / memory-safe / sandboxed environment • Hardware / language / platform independent Efﬁcient and portable representation • Compact binary format • Modular • Streamable and parallelizable in decoding, validation, and compilation

W3C   Community group & Working group Scope • WebAssembly
core spec • Test suite • JavaScript embedding • Web embedding Resources • https://webassembly.org/ • https://github.com/WebAssembly/ • [email protected]

WASM friendly tools Tool Source code Web site Emscripten C
/ C++ http://kripken.github.io/emscripten-site/ LLVM (Clang) LLVM friendly language https://llvm.org/ Rustc Rust https://rust-lang.org/ AssemTblyScript TypeScript https://github.com/AssemblyScript/assemblyscript Unity C# http://unity3d.com/

WASM availability Firefox 52 Chrome 57 Edge 15 (behind experimental
ﬂag) Safari 11

Module deﬁnition https://rsms.me/wasm-intro

Execution pipeline: JS vs WASM JS WASM Download Decode Parse
Compile Execute Download Decode Compile Execute Execute Validate

< 50% overhead   vs native binary https://hacks.mozilla.org/2016/10/webassembly-browser-preview/

CPU intentional task AV1 bitstream analyzer https://github.com/JasonWeathersby/WASMSobel

Software reuse https://github.com/toyoshim/sion2hd http://rhysd.github.io/react-vimjs/

User engagement https://www.slideshare.net/Unite2017Tokyo/unite-2017-tokyounitywebgl http://www.kairisei-ma.jp/yahoo/

Developer event

WASM Minimal Viable Product

WASM VM: Typed stack machine Operator Description i32.add Sign-agnostic addition
of 32bit integers i64.add Sign-agnostic addition of 64bit integers f32.add Addition of 32bit ﬂoating point values f64.add Addition of 64bit ﬂoat point values

Data types:   i32, i64, f32, and f64 Operator Description
i32.store8 Wrap i32 to i8 and store 1byte i32.store16 Wrap i32 to i16 and store 2bytes i32.store Store 4bytes (no convention) i64.store16 Wrap i64 to i16 and store 2bytes i64.store32 Wrap i64 to i32 and store 4bytes i64.store Store 8bytes (no convention) f32.store Store 4bytes (no convention) f64.store Store 8bytes (no convention)

Linear memory space • Byte (8bit) granularity access, Little endian
• 32bit addresses, 4GiB maximum • Page (64KiB) unit memory size management • ArrayBuffer in JavaScript BEESFTT@TQBDF@NBY grow_memory 64KiB DVSSFOU@NFNPSZ

String: character sequence on the memory WPJEIJ DIBS CVG \
CVG<>I CVG<>J CVG<>= ^ GVODIJ QBSBNJ JTUPSFPGGTFU HFU@MPDBM JDPOTU JTUPSFBMJHO HFU@MPDBM JDPOTU SFUVSO $0 $0 26984 = 0x6968 (0x68 = 'h', 0x69 = 'i')

Address and offset GVODIJ QBSBNJ JTUPSFPGGTFU HFU@MPDBM
JDPOTU JTUPSFBMJHO HFU@MPDBM JDPOTU SFUVSO offset=2 (2byte) $0

Memory alignment GVODIJ QBSBNJ JTUPSFPGGTFU HFU@MPDBM
JDPOTU JTUPSFBMJHO HFU@MPDBM JDPOTU SFUVSO Y Y $0 26984 = 0x6968 (0x68 = 'h', 0x69 = 'i') Store 0x6968 aligned by 1byte

Data structure GVODG QBSBNWBSJ SFTVMUJ HFU@MPDBMWBS
JMPBE GVODG QBSBNWBSJ SFTVMUJ HFU@MPDBMWBS JMPBEPGGTFU offset=4 (32bit) $0

Data section: Static memory initialization EBUB JDPOTU   )FMMP XPSME=
EBUB JDPOTU ==== TOJQ JMPBEPGGTFU JDPOTU )FMMP XPSME= Y

Wrap up: WebAssembly minimum viable product • Binary encoded module
deﬁnition on typed stack machine • Decoded, validated and compiled on target platform • Embedded in JavaScript code • Generated from (LLVM friendly) programming languages WASM Download Decode Compile Execute Validate

AssemblyScript

TypeScript -> WASM • TypeScript compiler API +   Binaryen's
WASM backend • Compiler itself are written in TypeScript • What to except • All types must be annotated • Optional function parameters require an initializer expression • Union types (except classType | null representing a nullable), any and undeﬁned are not supported by design • The result of logical && / || expressions is always bool

Installation OQNJOTUBMMBTTFNCMZTDSJQU

Compiler usage BTD<PQUJPOT>FOUSZ'JMF BTDPNBJOXBTNNBJOUT BTDPNBJOXBTNUFYU'JMFNBJOXBUNBJOUT BTDOP3VOUJNFPNBJOXBTNUFYU'JMFNBJOXBUNBJOUT BTDOP3VOUJNF0PNBJOXBTNUFYU'JMFNBJOXBUNBJOUT

Sample code FYQPSUGVODUJPOBEE BJ CJ J\ SFUVSOB C ^

Generated WASM ﬁle NPEVMF UZQF GVOD QBSBNJJ
SFTVMUJ UZQF GVOD QBSBNJ SFTVMUJ GVODBEE UZQF QBSBNJJ SFTVMUJ HFU@MPDBM HFU@MPDBM JBEE NFNPSZ FYQPSUBEE GVODBEE FYQPSUNFNPSZ NFNPSZ

Only "export function" is exported FYQPSUGVODUJPOBEE BJ CJ J\ SFUVSOB
C ^ GVODUJPOJOWFSU4JHO BJ J\ SFUVSOB ^ FYQPSUGVODUJPOTVC BJ CJ J\ SFUVSOBEE B JOWFSU4JHO C ^

Only "export function" is exported NPEVMF UZQF
GVOD QBSBNJJ SFTVMUJ UZQF GVOD QBSBNJ SFTVMUJ GVODBEE UZQF QBSBNJJ SFTVMUJ TOJQ GVODJOWFSU4JHO UZQF QBSBNJ SFTVMUJ TOJQ GVODTVC UZQF QBSBNJJ SFTVMUJ TOJQ NFNPSZ FYQPSUBEE GVODBEE FYQPSUTVC GVODTVC FYQPSUNFNPSZ NFNPSZ

Constructor: memory initializer 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

Methods are translated into functions FYQPSUDMBTT1PJOU\ QVCMJDYJ QVCMJDZJ DPOTUSVDUPS YJ
ZJ \ UIJTYY UIJTZZ ^ QVCMJDOPSN J\ SFUVSOBEE UIJTY UIJTZ ^ QVCMJDEJTUBODF QPJOU1PJOU J\ SFUVSOUIJTOPSN QPJOUOPSN ^ ^ GVOD1PJOUOPSN UZQF QBSBNJ SFTVMUJ HFU@MPDBM JMPBE HFU@MPDBM JMPBEPGGTFU DBMMBEE GVOD1PJOUEJTUBODF UZQF QBSBNJJ SFTVMUJ HFU@MPDBM DBMM1PJOUOPSN HFU@MPDBM DBMM1PJOUOPSN JTVC

"WebGL" platform

Enable WASM in "Plyaer settings"

Compiled products • Build: compiled program • asm.js / WASM
• Assets • TemplateData • CSS, icons and favicon • Progress bar implementation

in Build folder glob Description *.wasm.*.unityweb WASM ﬁle *.asm.*.unityweb asm.js
ﬁle (fall back) webgl.data.unityweb Assets webgl.json Load parameters UnityLoader.js Loader

Unity WebGL build pipeline C# IL C++ WASM + JS
LLVM IL IL2CPP Clang Binaryen Mono

Memory Memory allocated to a web browser Memory allocated to
JavaScript Memory allocated to Unity JS object Memory File System Compiled WASM code WASM binary Code Heap Stack

Unity GC Memory allocated to a web browser Memory allocated
to JavaScript Memory allocated to Unity JS object Memory File System Compiled WASM WASM binary Code Heap Stack

JS GC comes from: Unity's memory Memory allocated to Unity
Memory allocated to a web browser Memory allocated to JavaScript JS object Memory File System WASM binary WASM code

JS GC comes from: Assets on File system Memory allocated
to a web browser Memory allocated to JavaScript Memory allocated to Unity JS object Memory File System WASM code WASM binary Code Heap Stack

Memory ﬁle system App libc libc++ Asynchronous File System API
Synchronous file system WORKERFS NODEFS IDBFS MEMFS

IDBFS is a MEMFS 名前値 /idbfs/readme.txt {"timestamp":"2017-02-02T08:50:56.765", mode: 33206,
contents: {...}} /idbfs/sub/hello.c {"timestamp":"2017-02-02T08:50:56.765", mode: 33206, contents: {...}} /idbfs/main.c {"timestamp":"2017-02-02T08:50:56.765", mode: 33206, contents: {...}} /idbfs/sub/log.c {"timestamp":"2017-02-02T08:50:56.765", mode: 33206, contents: {...}} readme.txt sub / hello.c log.c '4TZODGT USVF '4TZODGT GBMTF

JS plugin GVODUJPOIFMMP \ XJOEPXBMFSU )FMMP XPSME ^ DPOTUNPEVMF\
IFMMPIFMMP ^ NFSHF*OUP -JCSBSZ.BOBHFSMJCSBSZ NPEVMF &YQPTFIFMMPUP6OJUZXPSME Assets/Plugins/WebGL/plugin.jslib

Call JS function from Unity VTJOH6OJUZ&OHJOF VTJOH4ZTUFN3VOUJNF*OUFSPQ4FSWJDFT QVCMJDDMBTT/FX#FIBWJPVS4DSJQU .POP#FIBWJPVS\ <%MM*NQPSU
@@*OUFSOBM > QSJWBUFTUBUJDFYUFSOWPJEIFMMP ^

IME input for Unity WebGL • Necessary to handle Japanese
input • Available on Unity AssetStore

Features to add after MVP

In track • Threads • Shared memory • Atomic operations
• Exception handling • Fixed-width SIMD • Garbage collection • ECMAScript module integration

SharedArrayBuffer DPOTUCVGGFSOFX"SSBZ#VGGFS XPSLFSQPTU.FTTBHF CVGGFS DPOTUCVGGFSOFX"SSBZ#VGGFS
XPSLFSQPTU.FTTBHF CVGGFS <CVGGFS> DPOTUCVGGFS OFX4IBSFE"SSBZ#VGGFS XPSLFSQPTU.FTTBHF CVGGFS <CVGGFS> .BJO5ISFBE 8PSLFS5ISFBE CVGGFS CVGGFS CVGGFS CVGGFS CVGGFS CVGGFS CVGGFS copy Transfer Refer Refer

Atomic operations • i32.atomic.load8_u • i32.atomic.load16_u • i32.atomic.load • i64.atomic.load8_u
• i64.atomic.load16_u • i64.atomic.load32_u • i64.atomic.load • i32.atomic.store8 • i32.atomic.store16 • i32.atomic.store • i64.atomic.store8 • i64.atomic.store16 • i64.atomic.store32 • i64.atomic.store • i32.atomic.rmw8_u.add • i32.atomic.rmw16_u.add • i32.atomic.rmw.add • i64.atomic.rmw8_u.add • i64.atomic.rmw16_u.add • i64.atomic.rmw32_u.add • i64.atomic.rmw.add • i32.atomic.rmw8_u.sub • i32.atomic.rmw16_u.sub • i32.atomic.rmw.sub • i64.atomic.rmw8_u.sub • i64.atomic.rmw16_u.sub • i64.atomic.rmw32_u.sub • i64.atomic.rmw.sub • i32.atomic.rmw8_u.and • i32.atomic.rmw16_u.and • i32.atomic.rmw.and • i64.atomic.rmw8_u.and • i64.atomic.rmw16_u.and • i64.atomic.rmw32_u.and • i64.atomic.rmw.and • i32.atomic.rmw8_u.or • i32.atomic.rmw16_u.or • i32.atomic.rmw.or • i64.atomic.rmw8_u.or • i64.atomic.rmw16_u.or • i64.atomic.rmw32_u.or • i64.atomic.rmw.or • i32.atomic.rmw8_u.xor • i32.atomic.rmw16_u.xor • i32.atomic.rmw.xor • i64.atomic.rmw8_u.xor • i64.atomic.rmw16_u.xor • i64.atomic.rmw32_u.xor • i64.atomic.rmw.xor • i32.atomic.rmw8_u.xchg • i32.atomic.rmw16_u.xchg • i32.atomic.rmw.xchg • i64.atomic.rmw8_u.xchg • i64.atomic.rmw16_u.xchg • i64.atomic.rmw32_u.xchg • i64.atomic.rmw.xchg • i32.atomic.rmw8_u.cmpx chg • i32.atomic.rmw16_u.cmp xchg • i32.atomic.rmw.cmpxchg • i64.atomic.rmw8_u.cmpx chg • i64.atomic.rmw16_u.cmp xchg • i64.atomic.rmw32_u.cmp xchg • i64.atomic.rmw.cmpxchg

Wait / Wake Wait operator • Block thread execution until
• The memory value of the speciﬁed address changes to expected value • Timeout • operants: address, expected, timeout Wake operator • Wake threads waiting for the value of given address to change • operants: address, # of threads https://www.ﬂickr.com/photos/halfdos/273190596

Join our meet-up: emscripten night • Covered topics: • Speciﬁcations
and implementation • Tool chains • Knowledge learned from practice • Next meeting:   Oct. 18th, 2017   @ Mercari (Roppongi-hills, Tokyo) • Check details at   https://emsn.connpass.com/

20170924-html5conference-wasm

20170924-html5conference-wasm

More Decks by chikoski

Other Decks in Technology

Featured

Transcript