Integrating WebGPU In Browser with ThorVG

Transcript

1. Integrating WebGPU In Browser with ThorVG Jinny You (jinny@lottiefiles.com) 12 Nov, 2024
2. What I’ll be talking 1. Introduction WebGPU for browser 2. WebGPU Integration 3. Binary size comparison 4. Browser testing for WebGPU 5. Performance comparison 6. WebGPU/WASM Debugging
3. What is the WebGPU on browser?
4. WebGPU Introduction WebGPU literally Made for browser system
5. WebGPU Introduction Enabling major graphics drivers In web(browser)
6. WebGPU Introduction In the browser leveraging the full power of the graphics driver from the web is challenging.
7. WebGPU Introduction Not just new web technology But standard specification for universal graphics driver It doesn’t require much of knowledge about traditional graphics APIs like WebGL, Metal, Vulkan, Direct3D Start from new.
8. WebGPU Introduction WebGPU unlocks powerful graphics capabilities in the browser. For example: AI/ML, Mining, Game and Graphics…
9. WebGPU Introduction https://gradientflow.com/webgpu-and-ai-andmachine-learning/
10. WebGPU Introduction WebGPU is officially shipped From Chrome 113 https://developer.chrome.com/blog/webgpu-release#a_new_dawn_for_web_graphics
11. WebGPU Introduction But limited Be aware of supported platforms https://caniuse.com/webgpu Safari and Mobile Device Have limitation of WebGPU *Experimental flags or not supported
12. So how to build WebGPU Web?
13. Two ways to develop WebGPU in browser
14. WebGPU Development https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API
15. WebGPU Development https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API
16. WebGPU Development @webgpu/types
17. WebGPU Development https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API
18. WebGPU Development <webgpu.h>
19. WebGPU Development
20. WebGPU Development Written in C++ For native build For browser integration
21. How to ship WebGPU to browser
22. WebGPU Development We integrate WebGPU with native header and ship through WASM for browser
23. WebGPU Development We’ve collaborated WebGPU engineer + Web engineer
24. WebGPU Development
25. WebGPU Development
26. WebGPU Development Header implementation is different
27. WebGPU Development It’s still being developed (Even official specification might not be handled correctly)
28. WebGPU Integration
29. WebGPU Integration
30. WebGPU Integration https://github.com/emscripten-core/emscripten/pull/10218
31. WebGPU Integration Start with `USE_WEBGPU` This links emscripten version of <webgpu.h>
32. WebGPU Integration WebGPU Initialization requires Async call (Promise or async/await) Use `ASYNCIFY`
33. WebGPU Integration Old version of ECMAScript Isn’t fully supported We should bump up the Target ECMA version Check your JS bundler webpack, rollup, esbuild, vite… No support △ async/await We might need
34. WebGPU Integration
35. WebGPU Integration Supported in native but not in browser API Native Browser wgpuAdapterGetLimits() ✅ ❌ WGPUShaderModuleDescriptor (hintCount, hints) ✅ ❌ WGPUDeviceDescriptor (with empty requiredFeatures) ✅ ❌
36. WebGPU Integration Handling async/await in C++ side browser In browser WebGPU initialization functions work different - wgpuInstanceRequestAdapter - wgpuAdapterRequestDevice
37. WebGPU Integration The binding functions those include Asynchronous calls Will change to Asynchronous type in JS - Which means you should wrap super function with async, and call with “await” keyword - It could require interface change on JS API Handling async/await in C++ side
38. WebGPU Integration Handling async/await in C++ side Browser does not wait for Those functions in C++ to be complete https://github.com/thorvg/thorvg/blob/main/src/bindings/wasm/tvgWasmLottieAnimation.cpp
39. WebGPU Integration Handling async/await in C++ side Emscripten’s synchronize strategy https://emscripten.org/docs/api_reference/emscripten.h.html#pseudo-synchronous-functions
40. WebGPU Integration Handling async/await in C++ side `emscripten_sleep` would help initialization
41. WebGPU Integration Handling async/await in C++ side Be careful, concurrent async call at the same time causes runtime error ⚠ The system will freeze
42. WebGPU Integration How WebGPU controls Canvas element 1. Create <canvas> element 2. Throw HTML selector to WebGPU 3. Attach target canvas in WebGPU API
43. WebGPU Integration How WebGPU controls Canvas element - Surface → canvas element - Descriptor → dom selector In the browser
44. WebGPU Integration Shadow root cannot be used ::shadow pseudo doesn’t work in browsers (firefox…) This isn’t string though
45. WebGPU Integration Shadow root could not be used Shadow root is disabled for now
46. WebGPU Integration Thinking about more practical case Any problem in Multiple canvas/animation?
47. WebGPU Integration Thinking about more practical case - WGPU adapter - WGPU device - WGPU instance These can be shared! ⚠ Do not waste resources!
48. WebGPU Integration Thinking about more practical case In the JS WebGPU example we can see Adapter and Device are Requested once From browser side with WASM Must ensure this https://webgpufundamentals.org/webgpu/lessons/webgpu-multiple-canvases.html
49. WebGPU Integration Shared singleton instance Initialize only on the first use. If it already exists, reuse it. https://github.com/thorvg/thorvg/blob/main/src/bindings/wasm/tvgWasmLottieAnimation.cpp
50. WebGPU Integration Multi Canvas
51. WebGPU Integration Multi Animation
52. Binary size Comparison
53. Binary size comparison Browser runtime already include WebGPU implementation Using WebGPU itself doesn’t affect to binary size that much WASM doesn’t ship WebGPU runtime, just link
54. Binary size comparison SW Only Binary (total 959KB) - WASM Binary : 858KB - Glue Code : 101KB WG Only Binary (total 988KB) - WASM Binary : 849KB - Glue Code : 139KB USE_WEBGPU doesn’t raise up the size
55. Binary size comparison But we need “ASYNCIFY” Without this, WebGPU cannot be initialized Even though this option adds considerable size.
56. Binary size comparison SW Only Binary (total 959KB) - WASM Binary : 858KB - Glue Code : 101KB WG Only Binary with ASYNCIFY (total 1.47MB) - WASM Binary : 1.3MB - Glue Code : 146KB After ASYNCIFY
57. Binary size comparison SW+WG Combined Binary (total 1.54MB) - WASM Binary : 1.4MB - Glue Code : 147KB WG Only Binary with ASYNCIFY (total 1.47MB) - WASM Binary : 1.3MB - Glue Code : 146KB SW+WG Combined Binary
58. WebGPU Browser Testing
59. WebGPU Browser Testing Can we simply test WebGPU on native Since we have wgpu native?
60. WebGPU Browser Testing
61. WebGPU Browser Testing 160FPS in Native 41FPS in Browser Performance is not the same
62. WebGPU Browser Testing That’s why we need Browser testing Be mindful “WebGPU for Browser(web)”
63. Performance Comparison
64. Performance comparison 2000 x 2000, frog_vr.json SW : 25FPS WG : 120FPS
65. Performance comparison While WebGPU shows better quality SW Renderer WG Renderer
66. WebGPU / WASM Debugging
67. WebGPU/WASM Debugging You’ll get a stack trace, fix the line Basically same as typical WASM debugging Build with “-g” flag, use DWARF extension
68. WebGPU/WASM Debugging Do check! Where the issue comes from With WebGPU, the problem might not always be on C++ Glue code mutated by ASYNCIFY options
69. WebGPU/WASM Debugging WebGPU may take more STACK_SIZE If animation isn’t rendered without clear reason → STACK_SIZE is not enough Test with large size, make sure proper size for your workload
70. WebGPU/WASM Debugging Try to use latest version of emscripten Many of cases resolved in recent compiler Many bugs might happen in - Unsupported symbols (Native/C++ side) - Glue code JS compatibility issues
71. Q&A