Your SlideShare is downloading. ×
  • Like
Hardware Acceleration in WebKit
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Hardware Acceleration in WebKit


How accelerated compositing works in WebKit. …

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

Published 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 Committer• Working on WebKitGtk+, webkit-clutter
  • 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 HTML5-video-element/
  • 9. 2D Acceleration in WebKit• GPU accelerated 2D canvas o• 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
  • 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• cubes.html• circle.html• ml
  • 23. Where do I get it? Compositing Branch instructions here:
  • 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, v=RVnARGhhs9w• The Architecture of Full Hardware Acceleration of All Web Page Content, architecture-of-full-hardware-acceleration-of-all-web-page- content.aspx•• ign-documents/gpu-accelerated-compositing-in-chrome