lca2013 : implementing threaded accelerated compositing in webkitgtk+
DESCRIPTION
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 offthemain 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.TRANSCRIPT
![Page 1: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/1.jpg)
Implementing Threaded Accelerated Compositing
in WebKit GTK+
Gwang Yoon Hwang
www.dorothybrowser.com
![Page 2: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/2.jpg)
Accelerated Compositing
![Page 3: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/3.jpg)
RenderLayer Tree
GraphicsLayer Tree
Accelerated Compositing
Compositor
OpenGL
Display
![Page 4: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/4.jpg)
Web Process
GraphicsLayerTextureMapper Tree
TextureMapperLayer Tree
UI Process
Current WebKit2 Gtk+
LayerTreeHostGtk
Cairo Surface
![Page 5: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/5.jpg)
Motivation
The main thread - Too busy to perform compositing
• Layout • Script • DOM • Network • ...
![Page 6: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/6.jpg)
dfsadfMAin
Off-the-main-thread Compositing
Main Thread Compositing Thread
Loading
Parsing
Scripting
Styling
Layout
Compositing Animating
![Page 7: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/7.jpg)
What We Want
Main Thread
Process User I/O Event
LayerTreeHostProxy
Compositor Thread
JavasScript Execution
Layout / CPU Rasterization
CSS Keyframe Animation
Viewport update
Sync. Layers
WebCompositorInputHandler
Rasterized Layer
Draw
Slow Scroll/Zoom
Fast Scroll/Zoom
Play Cached KeyFrame Animation
LayerTreeHost Rasterized Layer
Rasterized Layer
![Page 8: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/8.jpg)
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
![Page 9: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/9.jpg)
Several Approaches
• Core Animation o Mac
• Chromium Compositor o Chromium
• Coordinated Graphics System o Qt, EFL
![Page 10: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/10.jpg)
GraphicsLayerTextureMapper Tree
TextureMapperLayer
Coordinated Graphics System
RenderLayer Tree
CoordinatedGraphicsLayer Tree
Coordinated Graphics
Texture Mapper
![Page 11: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/11.jpg)
UI Process
GraphicsLayerTextureMapper Tree
Web Process
Coordinated Graphics System
CoordinatedGraphicsLayer Tree
CoordinatedLayerTreeHost
LayerTreeRenderer
TiledBackingStore CoordinatedBackingStore
IPC CoordinatedLayerTreeHostProxy
![Page 12: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/12.jpg)
Coordinated Graphics System
• Good Things o Memory Usage
§ Tiled Backing Store on layers o Maintainability
§ Share code as much as possible
• Restrictions o WebKit2 only o UI Process will be complex o Weak at GPU bugs
![Page 13: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/13.jpg)
Our Implementation
• Support both WebKit 1 & 2
• Keep UI Process simple
• Crash gracefully on GPU bugs
• Benefits from Coordinated Graphics System
![Page 14: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/14.jpg)
Web Process
Threaded Compositor for GTK+
CoordinatedGraphicsLayer Tree
CoordinatedLayerTreeHost
TextureMapperLayer Tree
LayerTreeRenderer
Main Thread
Message Queue
Compositing Thread
TiledBackingStore CoordinatedBackingStore
UI Process
![Page 15: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/15.jpg)
Refactor Coordinated Graphics
CoordinatedLayerTree
TextureMapperLayer
LayerTreeRenderer
Web Process
Main Thread
Web Process
Compositing Thread
CoordinatedGraphicsLayer
Threaded
enqueueCoordinatedOperation(CoordinatedOperation) commitCoordinatedOperation()
CoordinatedOperation
CreateLayer DeleteLayer
SetRootLayer SyncLayerState
SetLayerChildren ...
IPC
![Page 16: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/16.jpg)
Demo
![Page 18: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/18.jpg)
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
![Page 19: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/19.jpg)
Thank you!
![Page 20: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/20.jpg)
Q & A
![Page 21: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/21.jpg)
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+
![Page 22: LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+](https://reader033.vdocuments.mx/reader033/viewer/2022052504/54b731f64a795925408b45d3/html5/thumbnails/22.jpg)
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.