Hardware Acceleration in WebKit

Uploaded on

How accelerated compositing works in WebKit. …

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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-clutterhttp://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 Accelerationvideo stream => main memory => video memory (CPU) (CPU)video stream => decoder (or GPU) => video memory (DMA)
  • 8. iPad plays only one video due to hardwareacceleration 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 IE9http://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 TreeA RenderLayer is created if: Its 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 ClutterCSS3 3D Transforms : ClutterActor, ClutterStage, CoglCSS3 Transitions: ClutterStateCSS3 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-clutterAccelerated Compositing Branchhttps://gitorious.org/webkit-clutter/webkit-clutter/commits/ac2Build instructions here:http://trac.webkit.org/wiki/clutter
  • 24. Hacking Accelerated Compositing inWebKit• ~/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