LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+


Published on

Implementing Threaded Accelerated Compositing in WebKit GTK+

Gwang Yoon Hwang · Slides
The main thread is where everything gets executed including layout and scripting. Thus, running compositing in the main thread severely limits responsiveness and rendering speed. By having a separate thread for compositing, we can bring a significant performance improvement in scrolling, zooming, and rendering, especially CSS3 animations.
Currently, several ports have already implemented off­the­main thread compositing. Coordinated Graphics System, which is used by Qt and EFL, runs accelerated compositing in the UI Process. Compositor Thread used by Google Chrome runs the compositing thread off the main render thread in the Renderer Process.
Our Threaded Compositor is another accelerated compositing implementation, which is a threaded variant of Coordinated Graphics System. We are currently contributing Threaded Compositor to WebKit GTK+. Threaded Compositor makes WebKit GTK+ render CSS3 animations faster. Threaded Compositor brings a few benefits compared to the current Coordinated Graphics System. Firstly, by performing accelerated compositing in the Web Process, the UI process is isolated from the crashes caused by GPU driver bugs. Secondly, by not performing accelerated compositing in the main thread of the UI process, the UI process becomes more responsive to UI events.
In this talk, we will cover how we brought this feature to WebKit GTK+, and its current status. Additionally, optimized features for embedded systems such as memory management will be discussed.
Gwang Yoon is a software engineer at Company 100, working on GPU acceleration for WebKit in embedded systems. He is interested in the WebKit rendering system, especially accelerated compositing and accelerated 2D vector graphics on embedded GPUs.

Published in: Technology, Art & Photos

LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+

  1. 1. Implementing Threaded Accelerated Compositing in WebKit GTK+ Gwang Yoon Hwang
  2. 2. Accelerated Compositing
  3. 3. Accelerated Compositing Compositor RenderLayer Tree GraphicsLayer Tree OpenGL Display
  4. 4. Current WebKit2 Gtk+ Web Process UI Process LayerTreeHostGtk GraphicsLayerTextureM apper Tree TextureMapperLayer Tree Cairo Surface
  5. 5. Motivation The main thread - Too busy to perform compositing •  Layout •  Script •  DOM •  Network •  ...
  6. 6. Off-the-main-thread Compositing Main Thread Compositing Thread Loading dfsadfMAin Parsing Scripting Styling Layout Compositing Animating
  7. 7. What We Want Slow Scroll/ Zoom Fast Scroll/ Zoom Process User I/O Event Compositor Thread Main Thread WebCompositorInputHandler Viewport update Play Cached KeyFrame Animation CSS Keyframe Animation Layout / CPU Rasterization LayerTreeHost Sync. Layers LayerTreeHostProxy Draw Rasterized Layer Rasterized Layer Rasterized Layer JavasScript Execution
  8. 8. Our Requirements •  Responsiveness o  Keep UI responsive at all time •  Stability o  Do not crash UI Process •  Memory Usage o  Conserve GPU memory •  Maintainability o  Share code as much as possible
  9. 9. Several Approaches •  Core Animation o  Mac •  Chromium Compositor o  Chromium •  Coordinated Graphics System o  Qt, EFL
  10. 10. Coordinated Graphics System RenderLayer Tree GraphicsLayerTextureM apper Tree TextureMapperLayer CoordinatedGraphicsLa yer Tree Texture Mapper Coordinated Graphics
  11. 11. Coordinated Graphics System Web Process CoordinatedLayerTreeHost UI Process IPC CoordinatedLayerTreeHostProxy LayerTreeRenderer CoordinatedGraphicsLayer Tree TiledBackingStore GraphicsLayerTextureMapp er Tree CoordinatedBackingStore
  12. 12. Coordinated Graphics System •  Good Things o  Memory Usage §  o  Tiled Backing Store on layers Maintainability §  Share code as much as possible •  Restrictions o  WebKit2 only o  UI Process will be complex o  Weak at GPU bugs
  13. 13. Our Implementation •  Support both WebKit 1 & 2 •  Keep UI Process simple •  Crash gracefully on GPU bugs •  Benefits from Coordinated Graphics System
  14. 14. Threaded Compositor for GTK+ Web Process Main Thread CoordinatedLayerTreeHost CoordinatedGraphicsLayer Tree TiledBackingStore Compositing Thread Message Queue LayerTreeRenderer TextureMapperLayer Tree CoordinatedBackingStore UI Process
  15. 15. Refactor Coordinated Graphics Web Process Web Process IPC Main Thread Compositing Thread CoordinatedLayerTree LayerTreeRenderer Threaded enqueueCoordinatedOperation(CoordinatedOperation) commitCoordinatedOperation() CoordinatedGraphics Layer CoordinatedOperation CreateLayer DeleteLayer SetRootLayer SyncLayerState SetLayerChildren ... TextureMapperLayer
  16. 16. Demo
  17. 17. Performance Intel Core i5-2400@3.10Ghz, Geforce GTS450, Ubuntu 12.04 x86_64
  18. 18. Current Status •  Design Document o  Threaded Coordinated Graphics in GTK+ Port Design Document •  Contributing Threaded Compositor to the WebKit trunk o  Master Bug: Bug 100341 - Implement threaded model of Coordinated Graphics
  19. 19. Thank you!
  20. 20. Q&A
  21. 21. Plan Step 1. Refactor Coordinated Graphics in WebKit2 Qt Step 2. Implement Threaded Coordinated Graphics in WebKit1 Qt / GTK+ Step 3. Implement Threaded Coordinated Graphics in WebKit2 GTK+
  22. 22. Refactor Coordinated Graphics •  Current Pipelines o  IPC based Coordinated Graphics o  TextureMapper using GPU o  TextureMapper using software renderer •  Unite compositing Pipelines o  All ports that use TextureMapper will use Coordinated Graphics.