20170924-html5conference-wasm

00580f6c11851d2fff0b3e2f7392226b?s=47 N. Shimizu
September 25, 2017

 20170924-html5conference-wasm

00580f6c11851d2fff0b3e2f7392226b?s=128

N. Shimizu

September 25, 2017
Tweet

Transcript

  1. WebAssembly: 
 a fast, efficient, portable, and safe code format

    @chikoski
  2. WASM complements JS

  3. 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
  4. W3C 
 Community group & Working group Scope • WebAssembly

    core spec • Test suite • JavaScript embedding • Web embedding Resources • https://webassembly.org/ • https://github.com/WebAssembly/ • public-webassembly-announce@w3.org
  5. 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/
  6. WASM availability Firefox 52 Chrome 57 Edge 15 (behind experimental

    flag) Safari 11
  7. Module definition https://rsms.me/wasm-intro

  8. Execution pipeline: JS vs WASM JS WASM Download Decode Parse

    Compile Execute Download Decode Compile Execute Execute Validate
  9. < 50% overhead 
 vs native binary https://hacks.mozilla.org/2016/10/webassembly-browser-preview/

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

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

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

  13. Developer event

  14. WASM Minimal Viable Product

  15. 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
  16. 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)
  17. 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
  18. 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')
  19. Address and offset GVODIJ QBSBNJ   JTUPSFPGGTFU  HFU@MPDBM

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

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

     EBUB JDPOTU ====  TOJQ JMPBEPGGTFU JDPOTU )FMMP XPSME= Y
  23. 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
  24. AssemblyScript

  25. 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
  26. Installation OQNJOTUBMMBTTFNCMZTDSJQU

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

  28. Sample code FYQPSUGVODUJPOBEE BJ CJ J\ SFUVSOB C ^

  29. 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
  30. Only "export function" is exported FYQPSUGVODUJPOBEE BJ CJ J\ SFUVSOB

    C ^ GVODUJPOJOWFSU4JHO BJ J\ SFUVSOB ^ FYQPSUGVODUJPOTVC BJ CJ J\ SFUVSOBEE B JOWFSU4JHO C  ^
  31. 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 
  32. 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 
  33. 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 
  34. Unity

  35. "WebGL" platform

  36. Enable WASM in "Plyaer settings"

  37. Compiled products • Build: compiled program • asm.js / WASM

    • Assets • TemplateData • CSS, icons and favicon • Progress bar implementation
  38. 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
  39. Unity WebGL build pipeline C# IL C++ WASM + JS

    LLVM IL IL2CPP Clang Binaryen Mono
  40. 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
  41. 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
  42. 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
  43. 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
  44. Memory file system App libc libc++ Asynchronous File System API

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

    IFMMPIFMMP ^ NFSHF*OUP  -JCSBSZ.BOBHFSMJCSBSZ NPEVMF  &YQPTFIFMMPUP6OJUZXPSME Assets/Plugins/WebGL/plugin.jslib
  47. Call JS function from Unity VTJOH6OJUZ&OHJOF VTJOH4ZTUFN3VOUJNF*OUFSPQ4FSWJDFT QVCMJDDMBTT/FX#FIBWJPVS4DSJQU .POP#FIBWJPVS\ <%MM*NQPSU

    @@*OUFSOBM > QSJWBUFTUBUJDFYUFSOWPJEIFMMP  ^
  48. IME input for Unity WebGL • Necessary to handle Japanese

    input • Available on Unity AssetStore
  49. Features to add after MVP

  50. In track • Threads • Shared memory • Atomic operations

    • Exception handling • Fixed-width SIMD • Garbage collection • ECMAScript module integration
  51. 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
  52. 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
  53. 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
  54. 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/