Wednesday, November 2, 11
Wednesday, November 2, 11
Ariya Hidayat & Jarred NichollsSencha
Twitter: @ariyahidayat @jarrednicholls
Hardware Accelerationon Mobile
Wednesday, November 2, 11
Challenges
Wednesday, November 2, 11
Game vs Web
Wednesday, November 2, 11
Game
Animation
Physics
Textured objects
Text
Transformation
Wednesday, November 2, 11
Web Pages
Images
Text
Wednesday, November 2, 11
How Browser Works
Layout engine
Network stack
GraphicsJavaScript engine
User interface
Wednesday, November 2, 11
WebKit Components
WebKit Library
JavaScriptCore
WebCore
HTMLrendering
SVG
DOM CSS
Wednesday, November 2, 11
Platform Abstraction
Network Unicode Clipboard
Graphics Theme Events
Thread Geolocation Timer
Wednesday, November 2, 11
Graphics Abstraction
Mac Chromium Qt Gtk
CoreGraphicsSkia
QPainter
graphics stack
GraphicsContext
Wednesday, November 2, 11
Components of Mobile
Touch interface
GPU
CPU
Radio
Power
Wednesday, November 2, 11
Graphics Processor
Divide and conquer
Very specific purpose
Wednesday, November 2, 11
Optimized for Games
Transformation
Textured triangles
Fixed geometry
Parallelism
Wednesday, November 2, 11
Challenges
Predictable contents (assets) ✔Mostly text ✔Mostly images ✔Expected run-time response immediate
Wednesday, November 2, 11
Primitive Drawing
Wednesday, November 2, 11
Path is Everything
Path
Triangle Rectangle
PolygonEllipse
Wednesday, November 2, 11
Stroke = Outline
Solid Dashed Dotted Textured
Wednesday, November 2, 11
Brush = Fill
SolidNone Gradient Textured
Wednesday, November 2, 11
Smooth via Antialiasing
Multiple levels of transparency
Perfect for parallelism
Wednesday, November 2, 11
Path Approximation
Curves
Polygon
Wednesday, November 2, 11
Gradient: ExpensiveCPU: sequential, tedious
GPU: parallel, still a lot of work
Wednesday, November 2, 11
Blur Shadow: Really Posh
Involved pixel “blending”
GPU: parallel, still tedious
Wednesday, November 2, 11
Transformation
Scaling
RotationPerspective
Wednesday, November 2, 11
Text Rasterization
Wednesday, November 2, 11
Font Atlas
Bye
Buffer
Wednesday, November 2, 11
Simple to Complex
Hello!
Simple shapeSolid color
CurvesGradient brushTextured stroke
Blur shadowSerif textRotated
Make it as an image
Wednesday, November 2, 11
HOW FAST?
Wednesday, November 2, 11
Android Drawing
GraphicsContext
WebCore graphics
Skia
Log file
Wednesday, November 2, 11
Example: BingplatformInitsavePlatformStatetranslate 0,0translate 0,0clip 1,0 0x6.95322e-310fillRect 0,0 800x556 color ff ff ff ffrestorePlatformStateplatformDestroyplatformInitsavePlatformStatetranslate 0,0translate 0,0clip 1,0 0x6.95322e-310fillRect 0,0 800x556 color ff ff ff ffrestorePlatformStateplatformDestroyplatformInitsavePlatformStatetranslate 0,0translate 0,0clip 1,0 0x6.95322e-310fillRect 0,0 800x556 color ff ff ff fffillRect 0,0 800x556 color ff ff ff ff
Wednesday, November 2, 11
How Fast?
#include "TimeCounter.h"
bool WebViewCore::drawContent(SkCanvas* canvas, SkColor){ uint32_t timestamp = getThreadMsec();
.... painting code .... DBG_SET_LOGD("% ms", getThreadMsec() - timestamp);}
external/webkit/WebKit/android/jni/WebViewCore.cpp
Wednesday, November 2, 11
Example: Google News
16:24:04.070 D/webcoreglue( 273): drawContent 11 ms16:24:04.110 D/webcoreglue( 273): drawContent 13 ms16:24:04.150 D/webcoreglue( 273): drawContent 13 ms16:24:04.190 D/webcoreglue( 273): drawContent 10 ms16:24:04.240 D/webcoreglue( 273): drawContent 10 ms16:24:04.280 D/webcoreglue( 273): drawContent 13 ms16:24:04.320 D/webcoreglue( 273): drawContent 13 ms16:24:04.360 D/webcoreglue( 273): drawContent 13 ms16:24:06.080 D/webcoreglue( 273): drawContent 12 ms16:24:06.140 D/webcoreglue( 273): drawContent 10 ms16:24:06.180 D/webcoreglue( 273): drawContent 13 ms16:24:06.230 D/webcoreglue( 273): drawContent 14 ms16:24:06.600 D/webcoreglue( 273): drawContent 26 ms16:24:06.640 D/webcoreglue( 273): drawContent 13 ms16:24:06.860 D/webcoreglue( 273): drawContent 33 ms16:24:06.890 D/webcoreglue( 273): drawContent 12 ms16:24:06.930 D/webcoreglue( 273): drawContent 13 ms16:24:06.960 D/webcoreglue( 273): drawContent 13 ms16:24:07.000 D/webcoreglue( 273): drawContent 13 ms
adb logcat -v time | grep drawContent
Wednesday, November 2, 11
Backing Store
Wednesday, November 2, 11
Maps
Tile
Wednesday, November 2, 11
Pinch to Zoom
when you pinch...
Wednesday, November 2, 11
Responsive UI
Processor
Rendering
User interaction
decoupled
Wednesday, November 2, 11
Rendering vs Interaction
Web Page
Backing StoreScreen
Rendering
User interaction
Wednesday, November 2, 11
Checkerboard Pattern
Wednesday, November 2, 11
Progressive Rendering
Crisp but slow
Fast but blurry
Wednesday, November 2, 11
Tiling System
CPU GPU
........
Texture upload
Wednesday, November 2, 11
Tile Transformation
Panning = Translation Zooming = Scaling
Wednesday, November 2, 11
Backing Store Support
Texture-based
Vector-based
Honeycomb and later
Wednesday, November 2, 11
Y U NOposition:fixed
Wednesday, November 2, 11
Demo
Wednesday, November 2, 11
Layer & Compositing
Wednesday, November 2, 11
Elements = Layers
Wednesday, November 2, 11
Typical Animation
opacity, movement, scaling, rotation, ...
Wednesday, November 2, 11
Immediate Mode
every animation tick
setInterval(function() { box.draw(x, y); x += 10;}, 20);
Wednesday, November 2, 11
Scene Graph
box.drawInto(layer);setInterval(function() { layer.translate(10, 0);}, 20);
Change transformation matrix
Wednesday, November 2, 11
Logical 3-D
Wednesday, November 2, 11
Keep the Textures
Wednesday, November 2, 11
Demo
Wednesday, November 2, 11
Compositing Support
Honeycomb and later
Wednesday, November 2, 11
Well-known Trick
-webkit-transform: translateZ(0)
forcing 3-D transform
Not needed for CSS animation!
Wednesday, November 2, 11
Debugging in Safari
defaults write com.apple.Safari IncludeInternalDebugMenu
Wednesday, November 2, 11
Compositing Indicators
Composited layer
Container layer
No texture
Overflow
Texture (number = upload)
Wednesday, November 2, 11
Debugging in Chrome
about:flags
Wednesday, November 2, 11
Avoid Texture Reupload
No reupload Upload
OpacityPosition
SizeAnimation
Everything else!
“Hardware accelerated CSS”
Wednesday, November 2, 11
Avoid Overcapacity
GPU = Limited silicon spaceLarge layer ➔ broken into “tiles”
Wednesday, November 2, 11
Prepare & Reuse
Viewport
Hide the layer offscreen
Wednesday, November 2, 11
Wrap Up
Wednesday, November 2, 11
Hardware Acceleration
Drawing primitives
Backing stores
Layer & compositing
Wednesday, November 2, 11
THANK YOU!
Wednesday, November 2, 11
QUESTIONS?
ariya @ sencha.com
ariyahidayat
ariya.ofilabs.com
jarred @ sencha.com
jarrednicholls
Wednesday, November 2, 11