Details
-
Technical task
-
Resolution: Out of scope
-
P2: Important
-
None
Description
Qt applications running on the Webassembly platform render into a (WebGL) canvas, which is then composited by the web browser together with other page html elements. This adds overhead not seen on native builds in the form of increased CPU usage, typically 10% - 15% of one core on a high-end laptop. Some users report a broken user experience, with 100% CPU usage and dropped frames.
Establish baseline tests: Users are going to report the problems they see with Qt on Wasm , and we need to be able to determine if this is a problem with Qt or with the specific browser+hardware.
Baselines:
- WebGL CPU usage animating at 60 fps
- Native Qt app CPU usage animating at 60 fps
- Wasm Qt app CPU usage animating at 60 fps
Minimize WebGL canvas overhead: there canvas context flags we can set.
- alpha to false (this is the default, based on the QOpenGLContext format)
- antialiasing to false (enabled by default)
- Chrome: lowLatency to true
lowLatency is especially interesting (but Chrome only), and allows skipping the compositor step. See https://www.chromestatus.com/feature/6360971442388992 and https://docs.google.com/document/d/1-Z_dj9AQ4SjgDLAEY3ELR0YrlHR3JZyJPhaHAstS5WU/edit
Results: Animation (60 fps, minimal scene)
Measure update overhead in terms of CPU usage for 60 fps animations. Several APIs/platforms are compared: CSS animations, JavaScript WebGL, Qt OpenGL on wasm, Qt OpenGL on macOS. Web-based APIs are tested on Safari, FireFox, and Chrome.
Test case links:
Qt test case
The CSS and WebGL test cases
(Note: CPU usage fluctuates, and the error here is several percentage points)
API | CPU usage (per process) | CPU usage (total) |
---|---|---|
Qt OpenGL / macOS | 6% | 6% |
Qt OpenGL / WASM Safari | 6% + 1% | 7% |
Qt OpenGL / WASM FireFox | 8% + 7% | 15% |
Qt OpenGL / WASM Chrome | 12% + 10% + 5% | 27% |
WebGL Safari | 6% + 1% | 7% |
WebGL FireFox | 8% + 6% | 15% |
WebGL Chrome | 11% +11% + 3% | 25% |
CSS on Safari | ~0.5% | ~0.5% |
CSS on FireFox | 8% + 1% | 9% |
CSS on Chrome | 6% + 5% + 1% | 12% |