Understanding Hardware Acceleration on Mobile Browsers Ariya Hidayat
Magical Advice Use translate3d for hardware acceleration
Challenges
Game vs Web
Game Text Textured objects Animation Physics Transformation
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 iOS Android GraphicsContext Skia CoreGraphics Graphics stack
SoC = System-on-a-Chip CPU GPU
GPU Workflow Matrix Vertices Textured Rendered
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 (depending on the blur radius) Solid shadow Blur shadow
CSS = Box Model http://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 Hello! Curves Gradient brush Simple shape Textured stroke Solid color 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 NO position: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 Overflow
Avoid Texture Reupload No reupload Upload Opacity Everything else! Position 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 Layer & compositing Drawing primitives Backing stores
There is no such Traditional graphics programming has been always full of tricks. It will always be.
Thank You Office Hour ariya.hidayat@gmail.com Wed 1:45 PM ariya.ofilabs.com @AriyaHidayat
Recommend
More recommend