Implementing Threaded Accelerated Compositing
in WebKit GTK+
Gwang Yoon Hwang
www.dorothybrowser.com
Accelerated Compositing
RenderLayer Tree
GraphicsLayer Tree
Accelerated Compositing
Compositor
OpenGL
Display
Web Process
GraphicsLayerTextureMapper Tree
TextureMapperLayer Tree
UI Process
Current WebKit2 Gtk+
LayerTreeHostGtk
Cairo Surface
Motivation
The main thread - Too busy to perform compositing
• Layout • Script • DOM • Network • ...
dfsadfMAin
Off-the-main-thread Compositing
Main Thread Compositing Thread
Loading
Parsing
Scripting
Styling
Layout
Compositing Animating
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
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
Several Approaches
• Core Animation o Mac
• Chromium Compositor o Chromium
• Coordinated Graphics System o Qt, EFL
GraphicsLayerTextureMapper Tree
TextureMapperLayer
Coordinated Graphics System
RenderLayer Tree
CoordinatedGraphicsLayer Tree
Coordinated Graphics
Texture Mapper
UI Process
GraphicsLayerTextureMapper Tree
Web Process
Coordinated Graphics System
CoordinatedGraphicsLayer Tree
CoordinatedLayerTreeHost
LayerTreeRenderer
TiledBackingStore CoordinatedBackingStore
IPC CoordinatedLayerTreeHostProxy
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
Our Implementation
• Support both WebKit 1 & 2
• Keep UI Process simple
• Crash gracefully on GPU bugs
• Benefits from Coordinated Graphics System
Web Process
Threaded Compositor for GTK+
CoordinatedGraphicsLayer Tree
CoordinatedLayerTreeHost
TextureMapperLayer Tree
LayerTreeRenderer
Main Thread
Message Queue
Compositing Thread
TiledBackingStore CoordinatedBackingStore
UI Process
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
Demo
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
Thank you!
Q & A
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+
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.
Recommended
