Hardware Acceleration in WebKit
•
15 likes•11,033 views
Hardware Acceleration in WebKit provides concise summaries of key points: 1) WebKit uses various techniques like off-screen buffers, JIT compilation, and graphics acceleration to improve browsing performance. Graphics acceleration reduces CPU usage by offloading tasks like rendering to the GPU. 2) WebKit supports hardware acceleration of video playback and 2D canvas rendering through interfaces to video and graphics hardware. This allows smoother playback and animation. 3) Accelerated compositing in WebKit uses multiple tree structures integrated with the rendering process to take advantage of GPU acceleration for CSS3 effects, transitions, animations, and HTML5 video through interfaces like OpenCL.
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to Hardware Acceleration in WebKit
Similar to Hardware Acceleration in WebKit (20)
More from Joone Hur
More from Joone Hur (10)
Recently uploaded
Recently uploaded (20)
Hardware Acceleration in WebKit
- 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-clutter http://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 Acceleration video stream => main memory => video memory (CPU) (CPU) video stream => decoder (or GPU) => video memory (DMA)
- 8. iPad plays only one video due to hardware acceleration 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 IE9 http://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 Tree A RenderLayer is created if: It's 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 Clutter CSS3 3D Transforms : ClutterActor, ClutterStage, Cogl CSS3 Transitions: ClutterState CSS3 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-clutter Accelerated Compositing Branch https://gitorious.org/webkit-clutter/webkit-clutter/commits/ac2 Build instructions here: http://trac.webkit.org/wiki/clutter
- 24. Hacking Accelerated Compositing in WebKit • ~/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