Understanding Hardware Acceleration on Mobile Browsers
Upcoming SlideShare
Loading in...5

Understanding Hardware Acceleration on Mobile Browsers






Total Views
Views on SlideShare
Embed Views



18 Embeds 3,497

http://econsultancy.com 3352
https://econsultancy.com 69
http://apps.synaptive.net 18
https://twitter.com 14
http://translate.googleusercontent.com 10
http://us-w1.rockmelt.com 9
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.php-talks.com 1
http://www.diffbot.com&_=1356882926413 HTTP 1
http://www.diffbot.com&_=1356882942757 HTTP 1
http://www.diffbot.com&_=1356882911997 HTTP 1
http://electrosmart.com 1 1


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Understanding Hardware Acceleration on Mobile Browsers Understanding Hardware Acceleration on Mobile Browsers Presentation Transcript

  • 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 specific 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 Overflow
  • 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.ofilabs.com @AriyaHidayat