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.

1. Implementing Threaded
Accelerated Compositing
in WebKit GTK+
Gwang Yoon Hwang
ryumiel@company100.net
www.dorothybrowser.com

2. Accelerated Compositing

3. Accelerated Compositing
Compositor
RenderLayer Tree
GraphicsLayer Tree
OpenGL
Display

4. Current WebKit2 Gtk+
Web Process
UI Process
LayerTreeHostGtk
GraphicsLayerTextureM
apper Tree
TextureMapperLayer
Tree
Cairo Surface

5. Motivation
The main thread
- Too busy to perform compositing
• Layout
• Script
• DOM
• Network
• ...

6. Off-the-main-thread Compositing
Main Thread
Compositing Thread
Loading
dfsadfMAin
Parsing
Scripting
Styling
Layout
Compositing
Animating

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. 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. Several Approaches
• Core Animation
o
Mac
• Chromium Compositor
o
Chromium
• Coordinated Graphics System
o
Qt, EFL

10. Coordinated Graphics System
RenderLayer Tree
GraphicsLayerTextureM
apper Tree
TextureMapperLayer
CoordinatedGraphicsLa
yer Tree
Texture Mapper
Coordinated Graphics

11. Coordinated Graphics System
Web Process
CoordinatedLayerTreeHost
UI Process
IPC
CoordinatedLayerTreeHostProxy
LayerTreeRenderer
CoordinatedGraphicsLayer
Tree
TiledBackingStore
GraphicsLayerTextureMapp
er Tree
CoordinatedBackingStore

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. Our Implementation
• Support both WebKit 1 & 2
• Keep UI Process simple
• Crash gracefully on GPU bugs
• Benefits from Coordinated Graphics System

14. Threaded Compositor for GTK+
Web Process
Main Thread
CoordinatedLayerTreeHost
CoordinatedGraphicsLayer
Tree
TiledBackingStore
Compositing Thread
Message
Queue
LayerTreeRenderer
TextureMapperLayer
Tree
CoordinatedBackingStore
UI
Process

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. Demo

17. Performance
Intel Core i5-2400@3.10Ghz, Geforce GTS450, Ubuntu 12.04 x86_64

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. Thank you!

20. Q&A

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. 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.