20170924-html5conference-wasm

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

WASM complements JS

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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]

Slide 5

Slide 5 text

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/

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Developer event

Slide 14

Slide 14 text

WASM Minimal Viable Product

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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)

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

AssemblyScript

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Installation OQNJOTUBMMBTTFNCMZTDSJQU

Slide 27

Slide 27 text

Compiler usage BTDFOUSZ'JMF BTDPNBJOXBTNNBJOUT BTDPNBJOXBTNUFYU'JMFNBJOXBUNBJOUT BTDOP3VOUJNFPNBJOXBTNUFYU'JMFNBJOXBUNBJOUT BTDOP3VOUJNF0PNBJOXBTNUFYU'JMFNBJOXBUNBJOUT

Slide 28

Slide 28 text

Sample code FYQPSUGVODUJPOBEE BJ CJ J\ SFUVSOBC ^

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Unity

Slide 35

Slide 35 text

"WebGL" platform

Slide 36

Slide 36 text

Enable WASM in "Plyaer settings"

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Features to add after MVP

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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/