Understanding Hardware Acceleration on Mobile Browsers

Understanding Hardware Acceleration on Mobile Browsers Ariya Hidayat

Magical Advice Use translate3d for hardware acceleration

Challenges

Game vs Web

Game Text Textured objects Animation Transformation Physics

Large but Still Bounded

Web Page Images Text

Challenges Predictable contents (assets) ✔ Mostly text ✔ Mostly images ✔ Initial response immediate

Browser Rendering

From Wave to Pixels Network stack Layout engine JavaScript engine Graphics User interface

WebKit Components Render Engine CSS DOM SVG HTML Canvas WebCore Client Interface JavaScript Engine (JSC/V8)

Platform Abstraction Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer

Graphics Abstraction GraphicsContext iOS Android Skia CoreGraphics Graphics stack

SoC = System-on-a-Chip CPU GPU

GPU Workflow Matrix Vertices Rendered Textured

Optimized for Games “Fixed” geometry Transformation Textured triangles Parallelism

Powerful Capabilities http://epicgames.com/technology/epic-citadel http://www.rage.com/

http://www.trollquotes.org/619-super-spider-bat-troll-quote/

Fundamental Physical Limitations  Memory - Can’t store too much stuff  Speed - Quad-core CPU can do certain operations better  Bandwidth - Bottleneck can be in the data transfer

Traffic Congestion

Primitive Drawing

Path is Everything Triangle Rectangle Path Ellipse Polygon

Stroke = Outline Solid Dashed Dotted Textured

Brush = Fill None Solid Gradient Textured

Gradient = Non-uniform Pixel Values

Drawing Time: Solid vs Gradient Only border Solid color fill 14x slower (depending on the dimension) Linear gradient fill Radial gradient fill

Path Approximation Curves Polygon

Smooth via Antialiasing Multiple levels of transparency Perfect for parallelism

Shadow Involved pixel “blending” Often obstructed

Drawing Time: Solid vs Blur Shadow 20x slower Solid shadow (depending on the blur radius) Blur shadow

CSS = Box Modelhttp://www.w3.org/TR/CSS2/zindex.html Appendix E. Elaborate description of Stacking Contexts

Shadow Abuse 12,000 pixels Blur shadow

Transformation Scaling Perspective Rotation

Text Rasterization

Font Atlas Buffer Bye

From Simple to Complex ello! H Curves Simple shape Gradient brush Solid color Textured stroke Blur shadow Serif text Rotated Make it as an image

Library Instrumentation platformInit savePlatformState translate 0,0 translate 0,0 clip 1,0 0x6.95322e-310 fillRect 0,0 800x556 color ff ff ff ff restorePlatformState platformDestroy platformInit savePlatformState translate 0,0 translate 0,0 clip 1,0 0x6.95322e-310 fillRect 0,0 800x556 color ff ff ff ff restorePlatformState platformDestroy platformInit savePlatformState translate 0,0 translate 0,0 clip 1,0 0x6.95322e-310 fillRect 0,0 800x556 color ff ff ff ff fillRect 0,0 800x556 color ff ff ff ff

Painting Performance 16:24:04.070 D/webcoreglue( 273): drawContent 11 ms 16:24:04.110 D/webcoreglue( 273): drawContent 13 ms 16:24:04.150 D/webcoreglue( 273): drawContent 13 ms 16:24:04.190 D/webcoreglue( 273): drawContent 10 ms 16:24:04.240 D/webcoreglue( 273): drawContent 10 ms 16:24:04.280 D/webcoreglue( 273): drawContent 13 ms 16:24:04.320 D/webcoreglue( 273): drawContent 13 ms 16:24:04.360 D/webcoreglue( 273): drawContent 13 ms 16:24:06.080 D/webcoreglue( 273): drawContent 12 ms 16:24:06.140 D/webcoreglue( 273): drawContent 10 ms 16:24:06.180 D/webcoreglue( 273): drawContent 13 ms 16:24:06.230 D/webcoreglue( 273): drawContent 14 ms 16:24:06.600 D/webcoreglue( 273): drawContent 26 ms 16:24:06.640 D/webcoreglue( 273): drawContent 13 ms 16:24:06.860 D/webcoreglue( 273): drawContent 33 ms 16:24:06.890 D/webcoreglue( 273): drawContent 12 ms 16:24:06.930 D/webcoreglue( 273): drawContent 13 ms 16:24:06.960 D/webcoreglue( 273): drawContent 13 ms 16:24:07.000 D/webcoreglue( 273): drawContent 13 ms

Backing Store

Maps Tiles

Responsive Interface Rendering Processor User interaction

Pinch to Zoom when you pinch...

Rendering vs Interaction Rendering Web Page User interaction

Checkerboard Pattern Poor man’s indicator of performance

Progressive Rendering Fast but blurry Crisp but slow

Perceived Responsiveness User pinches Smooth scaled Blocky (but fast!)

Tiling System .... .... CPU GPU Streamed What happens if the page background changes color?

Tile Transformation Panning = Translation Zooming = Scaling

Y U NOposition:fixed

Layer & Compositing

Typical Animation opacity, movement, scaling, rotation, ...

Principles of Fluid Animation At the beginning, push as many resources 1 as possible to the GPU During the animation, minimize 2 CPU-GPU interaction

Immediate vs Retained At the beginning... draw the shape onto a buffer For every animation tick... draw the shape at (x, y) blit the buffer at (x, y) x = x + 10 x = x + 10 Off main thread

Mechanics of Animation “Hey, this is good stuff. Cache it as texture #42.” Initialization “Apply [operation] to texture #42.” Animation step

Elements = Layer

Logical 3-D

Compositing By Force -webkit-transform: translateZ(0) Not needed for CSS animation! .someid { -webkit-animation-name: somekeyframeanimation; -webkit-animation-duration: 7s; -webkit-transform: translateZ(0); } Don’t do that

Debugging in Safari defaults write com.apple.Safari IncludeInternalDebugMenu 1

Compositing Indicators Texture (number = upload) Composited layer No associated texture Container layer Overﬂow

Avoid Texture Reupload No reupload Upload Opacity Position Everything else! Size Animation “Hardware accelerated CSS”

Examples

Color Transition @-webkit-keyframes box { 0% { -webkit-transform: background-color: blue; } 100% { -webkit-transform: background-color: green; } } Need a new texture uploaded to the GPU for every in-between color

Color Transition: The Trick Blended with

Prepare and Reuse Hide the layer offscreen Viewport

Timer Latency Depending on user reaction •Animation end triggers the JavaScript callback •JavaScript code kicks the next animation Prepare both animation and hide the “wrong” one

Avoid Overcapacity Texture upload .... .... Think of the GPU memory like a cache.

Wrap-up

Hardware Acceleration Drawing primitives Backing stores Layer & compositing

There is no such Traditional graphicsprogramming has been always full of tricks. It will always be.

Thank You ariya.hidayat@gmail.com Ofﬁce Hour Wed 1:45 PM ariya.oﬁlabs.com @AriyaHidayat

http://lanyrd.com	44
http://www.twylah.com	25
http://www.brijj.com	5
https://twitter.com	4
http://tweetedtimes.com	3
http://www.crowdlens.com	1
http://twitter.com	1

Understanding Hardware Acceleration on Mobile Browsers

by Ariya Hidayat on Jun 26, 2012

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 83

Statistics

Understanding Hardware Acceleration on Mobile Browsers Presentation Transcript