Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-72003 Improving Qt for Webassembly performance
  3. QTBUG-72126

Webassembly: Measure and minimize canvas overhead



    • WebAssembly


      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.

      • 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%


        No reviews matched the request. Check your Options in the drop-down menu of this sections header.



            sorvig Morten Sørvig
            sorvig Morten Sørvig
            1 Vote for this issue
            5 Start watching this issue



              Gerrit Reviews

                There are no open Gerrit changes