Hardware Acceleration in WebKit

Hardware Acceleration in WebKit 허준회 (Joone Hur) 2011. 12/16

about me• 허준회 Joone Hur (joone@webkit.org, @joone)• WebKit Committer• Working on WebKitGtk+, webkit-clutterhttp://collabora.com

Contents• Accelerating Browsing• Video Acceleration• 2D Acceleration• Accelerated Compositing• WebKit-Clutter• Demo

Accelerating Browsing• Off-screen buffer (Backing Store)• JavaScript engine with JIT (Just-in-Time) compilation• Graphics Acceleration

Graphics Acceleration?• Reducing memory copy• Rendering by GPU instead of CPU o alpha blending o matrix transforms o color space conversion

Graphics Acceleration in WebKit

Video Accelerationvideo stream => main memory => video memory (CPU) (CPU)video stream => decoder (or GPU) => video memory (DMA)

iPad plays only one video due to hardwareacceleration http://shapeshed.com/examples/ HTML5-video-element/

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"

How 2D acceleration works

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

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

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

How it works

Accelerated CSS3 with AC• CSS3 3D transforms• CSS3 Transitions• CSS3 Animations• HTML5 Video

Enabling AC in Chrome => about:flags

WebKit-Clutter

Webkit-Clutter• A WebKit port based on Clutter• The same APIs as WebKitGTK+• Allows clutter applications to embed a webview

Why Webkit-Clutter• Embedding applications can animate webviews• It allows a web page to scroll faster and animations to run smoothly with GPU acceleration

Accelerating Compositing in WebKit-Clutter

How to implement AC using ClutterCSS3 3D Transforms : ClutterActor, ClutterStage, CoglCSS3 Transitions: ClutterStateCSS3 Animations: ClutterAnimator

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

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

Hacking Accelerated Compositing inWebKit• ~/git/WebKit/Source/WebCore/platform/graphics o ca o chromium o clutter o efl o qt o textmap

Etc• Use OpenCL to HW accelerate SVG and CSS Filters

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

http://opensoftware.kr	1735
http://opensoftware.tistory.com	532
http://www.hanrss.com	29
http://feeds.feedburner.com	23
http://www.opensoftware.kr	15
http://webcache.googleusercontent.com	4

Hardware Acceleration in WebKit

by Joone Hur on Dec 19, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 2,338

Statistics

Hardware Acceleration in WebKit — Presentation Transcript