詳説WebAssembly

詳説WebAssembly

1. 1. We b A s s e m b l y 2 0 1 7 / 0 4 / 1 9 C R E AT O R S M E E T U P # 5 1
2. 2. • JavaScript web • C/C++ OSS • C/C++ • !!!
3. 3. • • Hello world • API • •
4. 4. We b A s s e m b l y • wasm( ) • (AST : abstract syntax tree) • React Typescript JavaScript • asm.js emscripten • web
5. 5. We b A s s e m b l y C/C++ Obj-C Swift Compiler .wasm Browser Converter .js JSX TypeScript Provider User
6. 6. • 1byte = 8bit • • IEEE 754 • wasm32 / wasm64 (MVP wasm32 ) • API • http://webassembly.org/docs/portability/
7. 7. L LV M • http://llvm.org/ • ( ) • • clang : C / C++ / Objective-C / swift Chris Lattner
8. 8. L LV M LLVM Optimizer Clang dragon egg original frontend C/C++ Obj-C Swift Fortran Ada Go original language x86 backend ARM backend iPhone Android Raspberry Pi PC ...
9. 9. L LV M + b y n a r y e n llcclang C/C++ Obj-C Swift .ll .s s2wasm.wastsexpr-wasm.wasm LLVM binaryen
10. 10. e m s c r i p t e n • http://emscripten.org/ • C/C++ JavaScript ( ) • C/C++ LLVM IR JavaScript • C/C++ , POSIX, SDL, OpenGL • WebAssembly / asm.js / Polyfill Alon Zakai (kripken)
11. 11. e m s c r i p t e n emcc em++ C/C++ -s -WASM=1 .wasm .js .html LLVM Bynaryen
12. 12. H e l l o w o r l d
13. 13. s e t u p e m s c r i p t e n • Linux OSX Portable SDK • https://kripken.github.io/emscripten-site/docs/ getting_started/downloads.html • renv (clang, node.js, llvm, binaryen) $ tar vzxf emsdk-portable.tar.gz $ cd emsdk-portable $ ./emsdk install sdk-incoming-64bit binaryen-master-64bit $ ./emsdk activate sdk-incoming-64bit binaryen-master-64bit $ source ./emsdk_env.sh console
14. 14. H e l l o w o r l d . #include <stdio.h> int main(int argc, char* argv[]) { printf("hello world.”); return 0; } hello.c $ emcc -s -WASM=1 -o hello.html hello.c console hello.html hello.js hello.wasm
15. 15. • hello.html • • $ emrun --no_browser --port 8080 <hello.html > console
16. 16. < o u t p u t > . h t m l • emscripten/incoming/src/shell_minimal.html HTML • -o <output>.js HTML $ emcc -s -WASM=1 --shell-file custom.html -o <output>.html <input>.c console
17. 17. < o u t p u t > . j s • emscripten • • • Module WebAssembly.Module
18. 18. A P I
19. 19. We b A s s e m b l y. i n s t a n t i a t e • <script type='module'> • 1 : wasm ArrayBuffer • 2 : WebAssembly • • • module(WebAssembly.Module) instance(WebAssembly.Instance) • https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/ Global_Objects/WebAssembly/instantiate
20. 20. We b A s s e m b l y. i n s t a n t i a t e fetch('hello.wasm').then(response => response.arrayBuffer() ).then(bytes => WebAssembly.instantiate(bytes, importObject) ).then(results => { var instance = results.instance; var module = results.modules; // }); JavaScript
21. 21. We b A s s e m b l y. M o d u l e • wasm • • WebAssembly.Module
22. 22. We b A s s e m b l y. I n s t a n c e • WebAssembly.Module • new Instance(moduleObject [, importObject]) • instance.exports wasm instance.exports.< >( ); JavaScript
23. 23. i m p o r t O b j e c t var importObject = { env: { memory: new WebAssembly.Memory({ initial: 256 }), // Instance table: new WebAssembly.Table({ initial: 0, element: 'anyfunc' }), // ... // WebAssembly.Module }, global: { ... // } }; JavaScript
24. 24. w a s t • importObject (module .... (import "global" "NaN" (global $import$5 f64)) (import "global" "Infinity" (global $import$6 f64)) .... (import "env" "memory" (memory $0 256 256)) (import "env" "table" (table 10 10 anyfunc)) .... ) wast
25. 25. i m p o r t (module .... (import "env" "_js_hello" (func $import$13 (param i32 i32) (result i32))) .... ) wast extern int js_hello(int arg1, char* arg2); C/C++ importObject['env']['_js_hello'] = function(arg1, arg2) { ... } JavaScript
26. 26. e x p o r t (module (export "_c_hello" (func $7)) (func $7 (type $8) (param $var$0 i32) (param $var$1 f64) (result i32) .... ) ) wast __attribute__((used)) int c_hello(int arg1, double arg2) { .... } C/C++ instance.exports._c_hello(1, 2); JavaScript
27. 27. Browser WebAssembly JavaScript WebAssembly.instantiate instance.export._main main printf writev[import] env.__syscall146 Module.print console.logHello world. run()
28. 28. int value1 = 1192; // 0x04a8 short value2 = 758; // 0x02f6 char value3 = -1; // 0xff char value4 = 99; // 0x63 • importObject.env.memory • wasm • emscripten Module.HEAPU8 DataView C/C++ 00 00 04 a8 02 f6 ff 63 Memory …… … …
29. 29. for (int i = 0; i < 8; i ++) { console.log(Module.HEAPU8[Module.getptr() + i]); } • = OK • int value1 = 1192; // 0x04a8 short value2 = 758; // 0x02f6 char value3 = -1; // 0xff char value4 = 99; // 0x63 // unsigned int getptr(); return (unsigned int)(&value1); C/C++ a8 04 00 00 f6 02 ff 63 JS(emscripten) …… … …
30. 30. for (int i = 0; i < 2; i ++) { console.log(Module.HEAPU32[Module.getptr() / 4 + i]); } for (int i = 0; i < 4; i ++) { console.log(Module.HEAPU16[Module.getptr() / 2 + i]); } i n t s h o r t 00 00 04 a8 63 ff 02 f6 JS(emscripten) … … 04 a8 00 00 02 f6 63 ff JS(emscripten) … … a8 04 00 00 f6 02 ff 63…… … …
31. 31. var v = Module.getValue(Module.getptr(), 'i32'); Module.setValue(Module.getptr(), v + 1, 'i32'); • Module.getValue(< >, < >); • Module.setValue(< >, < >, < >); • WebAssembly getValue JS(emscripten)
32. 32. console.log( Module.Pointer_stringify( Module.getptr())); • C/C++ JavaScript • emscripten Pointer_stringify(< >[, < >]); unsigned int getptr() { char* str = "hello world!"; return (unsigned int)(&str); } C/C++ JS(emscripten)
33. 33. • http://webassembly.org/ • https://developer.mozilla.org/docs/WebAssembly
34. 34. • JavaScript API C/C++ wasm • emscripten
35. 35. • • PROCESS WARP http://www.processwarp.org/ • GitHub llamerada-jp • facebook ito.yuuji • blog http://llamerad-jp.hatenablog.com/