Visualization of mechanical CAD drawings using WebAssembly and WebGL - Rust Tokyo 2019

Transcript

1. Visualization of mechanical CAD drawings using WebAssembly and WebGL Rust Tokyo 2019 @TaigaMerlin
2. Introduction • Aki, CTO @ CADDi Inc (キャディ株式会社) • Former embedded engineer • Following Rust since 0.9 • Eagerly awaiting 1.39 (ha)
3. Agenda 1. State of CAD software 2. WebAssembly 3. WebGL 4. Results 5. Learnings
4. State of CAD software
5. [C]omputer [A]ided [D]esign grabcad.com/library/engine-v-twin
6. [C]omputer [A]ided [D]esign www.eventshigh.com
7. CAD in manufacturing 3D geometric kernels • Open CASCADE (C++, OSS) • Parasolid (C, proprietary) • ACIS (C++, proprietary) 2D drawing used in procurement • rust dxf (Rust, OSS) • libdxfrw (C++, OSS)
8. Objective: 2D drawings in the browser
10. Binary code format that runs in a host environment
11. Not just for the web! (See WASI)
12. Host environment What is WebAssembly? C++, Rust, etc .wasm .js .html .css
13. What is WebAssembly? caniuse.com
14. What is WebAssembly? caniuse.com
15. Who’s using WebAssembly? ...and many more!
16. Show me the Rust code!
17. WebAssembly sample ----- RUST ----- #[no_mangle] pub extern fn add(a: i32, b: i32) -> i32 { a+b }
18. WebAssembly sample ----- RUST ----- #[no_mangle] pub extern fn add(a: i32, b: i32) -> i32 { a+b } ----- WASM/WAT ----- (func $add (type 1) (param i32 i32) (result i32) local.get 0 local.get 1 i32.add)
19. WebAssembly is typed ----- RUST ----- #[no_mangle] pub extern fn add(a: i32, b: i32) -> i32 { a+b } ----- WASM/WAT ----- (func $add (type 1) (param i32 i32) (result i32) local.get 0 local.get 1 i32.add)
20. WebAssembly resembles a stack machine ----- RUST ----- #[no_mangle] pub extern fn add(a: i32, b: i32) -> i32 { a+b } ----- WASM/WAT ----- (func $add (type 1) (param i32 i32) (result i32) local.get 0 ← push arg 0 onto the stack local.get 1 i32.add)
21. WebAssembly resembles a stack machine ----- RUST ----- #[no_mangle] pub extern fn add(a: i32, b: i32) -> i32 { a+b } ----- WASM/WAT ----- (func $add (type 1) (param i32 i32) (result i32) local.get 0 ← push arg 0 onto the stack local.get 1 ← push arg 1 onto the stack i32.add)
22. WebAssembly resembles a stack machine ----- RUST ----- #[no_mangle] pub extern fn add(a: i32, b: i32) -> i32 { a+b } ----- WASM/WAT ----- (func $add (type 1) (param i32 i32) (result i32) local.get 0 ← push arg 0 onto the stack local.get 1 ← push arg 1 onto the stack i32.add) ← execute math operation
23. WebAssembly resembles a stack machine ----- RUST ----- #[no_mangle] pub extern fn add(a: i32, b: i32) -> i32 { a+b } ----- WASM/WAT ----- (func $add (type 1) (param i32 i32) (result i32) local.get 0 ← push arg 0 onto the stack local.get 1 ← push arg 1 onto the stack i32.add) ← execute math operation
24. WebAssembly: numeric instructions
25. WebAssembly: trigonometry?
26. WebAssembly: trigonometry?
27. I want my transcendental functions!
28. I want my transcendental functions!
29. WebAssembly interfacing with host environment
30. Rust (.wasm) ⇔ JavaScript (.js) ----- Rust ----- pub fn rust_function () { unsafe { js_function (); } } ----- JavaScript ----- wasm.instance.exports.rust_function (); Calling Rust from JavaScript Calling JavaScript from Rust
31. Call a Rust function from JavaScript ----- Rust ----- #[no_mangle] pub extern fn add(a: i32, b: i32) -> i32 { a + b } ----- SHELL ----- $ rustc -O --target=wasm32-unknown-unknown example.rs -o example.wasm ----- HTML ----- <script> WebAssembly .instantiateStreaming ( fetch('example.wasm' ), {}) .then(wasm => { var add_func = wasm.instance.exports.add; }); </script>
32. Call a Rust function from JavaScript ----- Rust ----- #[no_mangle] pub extern fn add(a: i32, b: i32) -> i32 { a + b } ----- SHELL ----- $ rustc -O --target=wasm32-unknown-unknown example.rs -o example.wasm ----- HTML ----- <script> WebAssembly .instantiateStreaming ( fetch('example.wasm' ), {}) .then(wasm => { var add_func = wasm.instance.exports.add; }); </script> - WebAssembly has no main() - It behaves like a JS module/library
33. Call a Rust function from JavaScript ----- Rust ----- #[no_mangle] pub extern fn add(a: i32, b: i32) -> i32 { a + b } ----- SHELL ----- $ rustc -O --target=wasm32-unknown-unknown example.rs -o example.wasm ----- HTML ----- <script> WebAssembly .instantiateStreaming ( fetch('example.wasm' ), {}) .then(wasm => { var add_func = wasm.instance.exports.add; var result = add_func(10, 20); console.log(result); }); </script>
34. Call a Rust function from JavaScript ----- Rust ----- #[no_mangle] pub extern fn add(a: i32, b: i32) -> i32 { a + b } ----- SHELL ----- $ rustc -O --target=wasm32-unknown-unknown example.rs -o example.wasm ----- HTML ----- <script> WebAssembly .instantiateStreaming ( fetch('example.wasm' ), {}) .then(wasm => { var add_func = wasm.instance.exports.add; var result = add_func(10, 20); console.log(result); }); </script>
35. Call a Rust function from JavaScript • Can be used to implement compute heavy code in Rust • Access those functions from JavaScript • eg: Image resizing algorithm for an image editing online tool
36. Where are my transcendental functions?
37. Call a JavaScript function from Rust ----- Rust ----- #[link(wasm_import_module = "imports")] extern { fn cos(theta: f64) -> f64; } #[no_mangle] pub extern fn do_trig() { unsafe { cos(0.0); } } ----- HTML ----- <script> WebAssembly .instantiateStreaming ( fetch('example.wasm' ), { imports: { cos: (x) => Math.cos(x) } }) .then(wasm => { wasm.instance.exports.do_trig(); }); </script>
38. Call a JavaScript function from Rust ----- Rust ----- #[link(wasm_import_module = "imports")] extern { fn cos(theta: f64) -> f64; } #[no_mangle] pub extern fn do_trig() { unsafe { cos(0.0); } } ----- HTML ----- <script> WebAssembly .instantiateStreaming ( fetch('example.wasm' ), { imports: { cos: (x) => Math.cos(x) } }) .then(wasm => { wasm.instance.exports.do_trig(); }); </script>
39. Call a JavaScript function from Rust ----- Rust ----- #[link(wasm_import_module = "imports")] extern { fn cos(theta: f64) -> f64; } #[no_mangle] pub extern fn do_trig() { unsafe { cos(0.0); } } ----- HTML ----- <script> WebAssembly .instantiateStreaming ( fetch('example.wasm' ), { imports: { cos: (x) => Math.cos(x) } }) .then(wasm => { wasm.instance.exports.do_trig(); }); </script>
40. Call a JavaScript function from Rust ----- Rust ----- #[link(wasm_import_module = "imports")] extern { fn cos(theta: f64) -> f64; } #[no_mangle] pub extern fn do_trig() { unsafe { cos(0.0); } } ----- HTML ----- <script> WebAssembly .instantiateStreaming ( fetch('example.wasm' ), { imports: { cos: (x) => Math.cos(x) } }) .then(wasm => { wasm.instance.exports.do_trig(); }); </script> - We probably want a debug print… - But WebAssembly has no I/O!
41. Let’s print the result! JavaScript Math.cos() Rust do_trig() cos()
42. Let’s print the result! JavaScript Math.cos() console.log() Rust do_trig() cos()
43. Let’s print the result! JavaScript Math.cos() console.log() Rust do_trig() cos() console_log()
44. Call a JavaScript function from Rust ----- RUST ----- #[link(wasm_import_module = "imports")] extern { fn console_log (x: f64); fn cos(theta: f64) -> f64; } #[no_mangle] pub extern fn do_trig() { unsafe { console_log (cos(0.0)); console_log (cos(3.14/4.0)); } } ----- HTML ----- <script> WebAssembly .instantiateStreaming ( fetch('example.wasm' ), { imports: { console_log : (x) => console.log(x), cos: (x) => Math.cos(x) } }) .then(wasm => { wasm.instance.exports.do_trig(); }); </script>
45. Call a JavaScript function from Rust ----- RUST ----- #[link(wasm_import_module = "imports")] extern { fn console_log (x: f64); fn cos(theta: f64) -> f64; } #[no_mangle] pub extern fn do_trig() { unsafe { console_log (cos(0.0)); console_log (cos(3.14/4.0)); } } ----- HTML ----- <script> WebAssembly .instantiateStreaming ( fetch('example.wasm' ), { imports: { console_log : (x) => console.log(x), cos: (x) => Math.cos(x) } }) .then(wasm => { wasm.instance.exports.do_trig(); }); </script>
46. Yay transcendental functions!
47. Call a JavaScript function from Rust ----- RUST ----- #[link(wasm_import_module = "imports")] extern { fn console_log (x: f64); } #[no_mangle] pub extern fn do_trig() { ... } Imported function Exported function
48. example.wasm WebAssembly Format (abridged) Import section Export section console_log() #0 do_trig() #3
49. example.wasm WebAssembly Format (abridged) Import section Export section console_log() Code section local.get 0 local.get 1 i32.add #2 #0 do_trig() #3 Data section 0x67 0x65 0x74 0x20 0x74 0x68 0x69 0x73 0x3f 0x20 0x44 0x4d 0x20 0x6d 0x65 #0
50. example.wasm WebAssembly Format (abridged) Import section Export section console_log() Code section local.get 0 local.get 1 i32.add #2 #0 do_trig() #3 Data section Memory section: declares linear memory regions 0x67 0x65 0x74 0x20 0x74 0x68 0x69 0x73 0x3f 0x20 0x44 0x4d 0x20 0x6d 0x65 #0
51. .wasm file WebAssembly DATA CODE LINEAR MEMORY PROCESSOR program memory program instructions
52. WebAssembly has a Harvard-like architecture DATA PROCESSOR CODE I/O
54. 3D Applications Raytracing experiments.withgoogle.com newnaw.com What can WebGL do?
55. What is WebGL? • JavaScript API for 2D and 3D rendering in the browser caniuse.com
56. What is WebGL2? • WebGL ⇒ WebGL2 ⇒ WebGPU(?) caniuse.com
57. What is WebGL2? • WebGL ⇒ WebGL2 ⇒ WebGPU(?) caniuse.com
58. The difficulty with graphics APIs
59. Software architecture Native Application Native CAD library (x86) Graphics stack (OpenGL)
60. Software architecture Native Application Native CAD library (x86) Graphics stack (OpenGL) Web Application Native CAD library (wasm) Graphics stack (WebGL) vs
61. Software architecture Native Application Native CAD library (x86) Graphics stack (OpenGL) Web Application Native CAD library (wasm) Graphics stack (WebGL) vs - kiss3d (graphics engine supporting WebGL) - rust-dxf (native DXF file parser)
62. Results
63. Results
64. Current challenges • Text rendering for CJK languages (Font support, garbled text, etc) • Running native code expecting native syscalls and interfaces (Emscripten) • Rust graphics ecosystem is still young
65. Access all JavaScript APIs from WebAssembly
66. • wasm-bindgen • web-sys: DOM, WebGL, WebAudio, etc • js-sys: ECMAScript Rust and JavaScript coexist peacefully
67. The future is bright!
68. Thank you! @TaigaMerlin