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