Hardware Acceleration in WebKit

허준회 (Joone Hur)

2011. 12/16

about me

• 허준회 Joone Hur (joone@webkit.org, @joone) • WebKit Committer• Working on WebKitGtk+, webkit-clutter

http://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 blendingo matrix transformso color space conversion

Graphics Acceleration in WebKit

Video Acceleration

video stream => main memory => video memory (CPU) (CPU)

video stream => decoder (or GPU) => video memory (DMA)

iPad plays only one video due to hardware acceleration

http://shapeshed.com/examples/HTML5-video-element/

2D Acceleration in WebKit

• GPU accelerated 2D canvaso https://bugs.webkit.org/show_bug.cgi?id=43210

• Can be tested in Chrome browsero about:flags => Enable "GPU Accelerated Canvas 2D"

How 2D acceleration works

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

Tree structures in WebCore

• Document Treeo DOM Tree, Shadow DOM Tree

• Render Treeo RenderObject Treeo RenderStyle Treeo RenderLayer Treeo GraphicsLayer Treeo LineBox Tree

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

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 Clutter

CSS3 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.html

Where do I get it?

https://gitorious.org/webkit-clutter

Accelerated Compositing Branchhttps://gitorious.org/webkit-clutter/webkit-clutter/commits/ac2

Build instructions here:

http://trac.webkit.org/wiki/clutter

Hacking Accelerated Compositing in WebKit• ~/git/WebKit/Source/WebCore/platform/graphics

o cao chromiumo cluttero eflo qto 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