Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20170924-html5conference-wasm

chikoski
September 25, 2017

 20170924-html5conference-wasm

chikoski

September 25, 2017
Tweet

More Decks by chikoski

Other Decks in Technology

Transcript

  1. Design goals Fast, safe and portable semantics • Executed in

    near native speed • Code validation / memory-safe / sandboxed environment • Hardware / language / platform independent Efficient and portable representation • Compact binary format • Modular • Streamable and parallelizable in decoding, validation, and compilation
  2. 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]
  3. 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/
  4. Execution pipeline: JS vs WASM JS WASM Download Decode Parse

    Compile Execute Download Decode Compile Execute Execute Validate
  5. 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 floating point values f64.add Addition of 64bit float point values
  6. 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)
  7. 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
  8. 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')
  9. Address and offset GVODIJ QBSBNJ   JTUPSFPGGTFU  HFU@MPDBM

      JDPOTU   JTUPSFBMJHO  HFU@MPDBM   JDPOTU   SFUVSO    offset=2 (2byte) $0
  10. 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
  11. Data structure GVODG QBSBNWBSJ  SFTVMUJ   HFU@MPDBMWBS 

     JMPBE  GVODG QBSBNWBSJ  SFTVMUJ   HFU@MPDBMWBS   JMPBEPGGTFU   offset=4 (32bit) $0
  12. Data section: Static memory initialization EBUB JDPOTU 
 )FMMP XPSME=

     EBUB JDPOTU ====  TOJQ JMPBEPGGTFU JDPOTU )FMMP XPSME= Y
  13. Wrap up: WebAssembly minimum viable product • Binary encoded module

    definition 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
  14. 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 undefined are not supported by design • The result of logical && / || expressions is always bool
  15. Generated WASM file NPEVMF  UZQF   GVOD QBSBNJJ

     SFTVMUJ   UZQF   GVOD QBSBNJ  SFTVMUJ   GVODBEE UZQF  QBSBNJJ  SFTVMUJ  HFU@MPDBM HFU@MPDBM JBEE   NFNPSZ     FYQPSUBEE GVODBEE   FYQPSUNFNPSZ NFNPSZ
  16. Only "export function" is exported FYQPSUGVODUJPOBEE BJ CJ J\ SFUVSOB

    C ^ GVODUJPOJOWFSU4JHO BJ J\ SFUVSOB ^ FYQPSUGVODUJPOTVC BJ CJ J\ SFUVSOBEE B JOWFSU4JHO C  ^
  17. 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 
  18. 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 
  19. 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 
  20. Compiled products • Build: compiled program • asm.js / WASM

    • Assets • TemplateData • CSS, icons and favicon • Progress bar implementation
  21. in Build folder glob Description *.wasm.*.unityweb WASM file *.asm.*.unityweb asm.js

    file (fall back) webgl.data.unityweb Assets webgl.json Load parameters UnityLoader.js Loader
  22. Unity WebGL build pipeline C# IL C++ WASM + JS

    LLVM IL IL2CPP Clang Binaryen Mono
  23. 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
  24. 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
  25. 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
  26. 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
  27. Memory file system App libc libc++ Asynchronous File System API

    Synchronous file system WORKERFS NODEFS IDBFS MEMFS
  28. 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
  29. JS plugin GVODUJPOIFMMP \ XJOEPXBMFSU )FMMP XPSME  ^ DPOTUNPEVMF\

    IFMMPIFMMP ^ NFSHF*OUP  -JCSBSZ.BOBHFSMJCSBSZ NPEVMF  &YQPTFIFMMPUP6OJUZXPSME Assets/Plugins/WebGL/plugin.jslib
  30. IME input for Unity WebGL • Necessary to handle Japanese

    input • Available on Unity AssetStore
  31. In track • Threads • Shared memory • Atomic operations

    • Exception handling • Fixed-width SIMD • Garbage collection • ECMAScript module integration
  32. 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
  33. 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
  34. Wait / Wake Wait operator • Block thread execution until

    • The memory value of the specified 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.flickr.com/photos/halfdos/273190596
  35. Join our meet-up: emscripten night • Covered topics: • Specifications

    and implementation • Tool chains • Knowledge learned from practice • Next meeting: 
 Oct. 18th, 2017 
 @ Mercari (Roppongi-hills, Tokyo) • Check details at 
 https://emsn.connpass.com/