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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Hardware Acceleration in WebKit

16,153
views

Published on

How accelerated compositing works in WebKit. …

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

Published in: Technology, Design

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
16,153
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
269
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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