Embed Size (px)
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.
Citation preview
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.
