Hardware Acceleration in WebKit provides concise summaries of key points: 1) WebKit uses various techniques like off-screen buffers, JIT compilation, and graphics acceleration to improve browsing performance. Graphics acceleration reduces CPU usage by offloading tasks like rendering to the GPU. 2) WebKit supports hardware acceleration of video playback and 2D canvas rendering through interfaces to video and graphics hardware. This allows smoother playback and animation. 3) Accelerated compositing in WebKit uses multiple tree structures integrated with the rendering process to take advantage of GPU acceleration for CSS3 effects, transitions, animations, and HTML5 video through interfaces like OpenCL.

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