Hardware Acceleration in WebKit
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Hardware Acceleration in WebKit



How accelerated compositing works in WebKit.

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



Total Views
Views on SlideShare
Embed Views



10 Embeds 4,122

http://opensoftware.kr 2866
http://opensoftware.tistory.com 1122
http://feeds.feedburner.com 41
http://www.hanrss.com 39
http://www.opensoftware.kr 22
http://www.slashdocs.com 15
http://webcache.googleusercontent.com 12
http://translate.googleusercontent.com 3
https://duckduckgo.com 1
http://www.docshut.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Hardware Acceleration in WebKit Presentation Transcript

  • 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