Understanding Hardware Acceleration on Mobile Browsers

Understanding Hardware Acceleration Ariya Hidayat on Mobile Browsers

whoami

Challenges

Game vs Web

Game Text Textured objects Animation Transformation Physics

Large Area, but Still Bounded

Web Page Images Text

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

WebKit Components DOM CSS WebCore SVG HTML rendering JavaScriptCore WebKit Library

Platform Abstraction Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer

Graphics AbstractionGraphicsContext Mac Chromium Qt Skia CoreGraphics QPainter graphics stack

Mobile Device Radio Touch interface CPU Power GPU

Graphics Processor Divide and conquer Very speciﬁc purpose

Relationship CPU GPU

SoC = System-on-a-Chip

Fundamental Physical Limitations 1.Available memory 2.Bus bandwith 3.Speed difference

Optimized for Games Fixed geometry Transformation Textured triangles Parallelism

ChallengesPredictable contents (assets) ✔Mostly text ✔Mostly images ✔Initial response immediate

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

Primitive Drawing

Path is Everything Triangle Rectangle Path Ellipse Polygon

Stroke = Outline Solid Dashed Dotted Textured

Brush = Fill None Solid Gradient Textured

Smooth via Antialiasing Multiple levels of transparency Perfect for parallelism

Path Approximation Curves Polygon

Gradient: Expensive CPU: sequential, tedious GPU: parallel, still a lot of work

Blur Shadow: Really Posh Involved pixel “blending” GPU: parallel, still tedious

Transformation Scaling Perspective Rotation

Text Rasterization

Font Atlas Buffer Bye

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

Backing Store

Maps Tile

Pinch to Zoomwhen you pinch...

Responsive Interface decoupled Rendering Processor User interaction

Rendering vs Interaction Screen Backing Store RenderingWeb Page User interaction

Checkerboard Pattern

Progressive Rendering Fast but blurry Crisp but slow

Tiling System Texture upload .... .... CPU GPU

Tile Transformation Panning = Translation Zooming = Scaling

Backing Store SupportVector-basedTexture-based Honeycomb and later

Y U NOposition:fixed

Layer & Compositing

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

Elements = Layer

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

Immediate Mode setInterval(function() { box.draw(x, y); x += 10; }, 20); every animation tick

Scene Graph box.drawInto(layer); setInterval(function() { layer.translate(10, 0); Change transformation matrix }, 20);

Logical 3-D

Keep the Textures

Compositing Support Honeycomb and later

Well-known Trick forcing 3-D transform -webkit-transform: translateZ(0) Not needed for CSS animation!

Magical Advice Use translate3d for hardware Misleading (at best) acceleration

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

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

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

Examples

Avoid Overcapacity GPU = Limited silicon space Large layer ➔ broken into “tiles”

Prepare & Reuse Hide the layer offscreen Viewport

Alpha Blending Color change

Alpha Blending: The Trick Blended with

Wrap-up

Hardware Acceleration Drawing Backing Layer & primitives stores compositing

What Can We Learn? Traditional graphics programming has been always full of tricks. It will always be.

There is No Silver Bullet

Thank You ariya.hidayat@gmail.com ariya.oﬁlabs.com @AriyaHidayat

http://econsultancy.com	3092
http://apps.synaptive.net	18
http://translate.googleusercontent.com	10
http://us-w1.rockmelt.com	9
https://twitter.com	6
http://www.hanrss.com	5
http://bizcollege.cms.logly.jp	4
http://www.encarolina.com	3
http://core.traackr.com	3
http://ebulletin.collected.info	2
http://www.newsblur.com	2
http://www.diffbot.com&_=1356882926413 HTTP	1
http://www.diffbot.com&_=1356882942757 HTTP	1
http://www.diffbot.com&_=1356882911997 HTTP	1
http://131.253.14.250	1
http://electrosmart.com	1
http://www.php-talks.com	1

Understanding Hardware Acceleration on Mobile Browsers

by Ariya Hidayat on Jun 08, 2012

Accessibility

Categories

Upload Details

Usage Rights

17 Embeds 3,160

Statistics

Understanding Hardware Acceleration on Mobile Browsers Presentation Transcript