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

Like this? Share it with your network

Share

Hardware Acceleration in WebKit

on

  • 16,748 views

How accelerated compositing works in WebKit.

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

Statistics

Views

Total Views
16,748
Views on SlideShare
12,626
Embed Views
4,122

Actions

Likes
10
Downloads
257
Comments
0

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
More...

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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