How accelerated compositing works in WebKit. Introduction to WebKit-Clutter

1. Hardware Acceleration in
WebKit
허준회 (Joone Hur)
2011. 12/16

2. about me
• 허준회 Joone Hur (joone@webkit.org, @joone)
• WebKit Committer
• Working on WebKitGtk+, webkit-clutter
http://collabora.com

3. Contents
• Accelerating Browsing
• Video Acceleration
• 2D Acceleration
• Accelerated Compositing
• WebKit-Clutter
• Demo

4. Accelerating Browsing
• Off-screen buffer (Backing Store)
• JavaScript engine with JIT (Just-in-Time)
compilation
• Graphics Acceleration

5. Graphics Acceleration?
• Reducing memory copy
• Rendering by GPU instead of CPU
o alpha blending
o matrix transforms
o color space conversion

6. Graphics Acceleration in WebKit

7. Video Acceleration
video stream => main memory => video memory
(CPU) (CPU)
video stream => decoder (or GPU) => video memory
(DMA)

8. iPad plays only one video due to hardware
acceleration
http://shapeshed.com/examples/
HTML5-video-element/

9. 2D Acceleration in WebKit
• GPU accelerated 2D canvas
o https://bugs.webkit.org/show_bug.cgi?id=43210
• Can be tested in Chrome browser
o about:flags => Enable "GPU Accelerated Canvas 2D"

10. How 2D acceleration works

11. Major steps in HTML page rendering in IE9
http://blogs.msdn.com/b/ie/archive/2010/09/10/
the-architecture-of-full-hardware-acceleration-of-all-web-page-content.aspx

12. Tree structures in WebCore
• Document Tree
o DOM Tree, Shadow DOM Tree
• Render Tree
o RenderObject Tree
o RenderStyle Tree
o RenderLayer Tree
o GraphicsLayer Tree
o LineBox Tree

13. RenderLayer Tree
A RenderLayer is created if:
 It's the root object for the page (RenderView)
 It has explicit CSS position properties (relative, absolute, fixed)
 It has CSS3 transforms property
 It is transparent (CSS opacity)
 It has overflow, an alpha mask or reflection
 Corresponds to <canvas> element that has a 3D (WebGL) context
 Corresponds to a <video> element

14. How it works

15. Accelerated CSS3 with AC
• CSS3 3D transforms
• CSS3 Transitions
• CSS3 Animations
• HTML5 Video

16. Enabling AC in Chrome => about:flags

17. WebKit-Clutter

18. Webkit-Clutter
• A WebKit port based on Clutter
• The same APIs as WebKitGTK+
• Allows clutter applications to embed a webview

19. Why Webkit-Clutter
• Embedding applications can animate webviews
• It allows a web page to scroll faster and animations to run
smoothly with GPU acceleration

20. Accelerating Compositing in WebKit-Clutter

21. How to implement AC using Clutter
CSS3 3D Transforms : ClutterActor, ClutterStage, Cogl
CSS3 Transitions: ClutterState
CSS3 Animations: ClutterAnimator

22. Demo
• http://www.webkit.org/blog-files/3d-transforms/morphing-
cubes.html
• http://www.webkit.org/blog-files/3d-transforms/poster-
circle.html
• http://www.paulrhayes.com/experiments/cube/multiCubes.ht
ml

23. Where do I get it?
https://gitorious.org/webkit-clutter
Accelerated Compositing Branch
https://gitorious.org/webkit-clutter/webkit-clutter/commits/ac2
Build instructions here:
http://trac.webkit.org/wiki/clutter

24. Hacking Accelerated Compositing in
WebKit
• ~/git/WebKit/Source/WebCore/platform/graphics
o ca
o chromium
o clutter
o efl
o qt
o textmap

25. Etc
• Use OpenCL to HW accelerate SVG and CSS Filters

26. References
• Rendering in WebKit, http://www.youtube.com/watch?
v=RVnARGhhs9w
• The Architecture of Full Hardware Acceleration of All Web
Page
Content, http://blogs.msdn.com/b/ie/archive/2010/09/10/the-
architecture-of-full-hardware-acceleration-of-all-web-page-
content.aspx
• http://www.webkit.org/blog/386/3d-transforms/
• https://sites.google.com/a/chromium.org/dev/developers/des
ign-documents/gpu-accelerated-compositing-in-chrome