Understanding Hardware Acceleration on Mobile Browsers

13,493 views
12,714 views

Published on

Published in: Technology, Art & Photos
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,493
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
92
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Understanding Hardware Acceleration on Mobile Browsers

  1. Understanding Hardware Acceleration Ariya Hidayat on Mobile Browsers
  2. whoami
  3. Challenges
  4. Game vs Web
  5. Game Text Textured objects Animation Transformation Physics
  6. Large Area, but Still Bounded
  7. Web Page Images Text
  8. From Wave to Pixels Network stack Layout engine JavaScript engine Graphics User interface
  9. WebKit Components DOM CSS WebCore SVG HTML rendering JavaScriptCore WebKit Library
  10. Platform Abstraction Network Unicode Clipboard Graphics Theme Events Thread Geolocation Timer
  11. Graphics AbstractionGraphicsContext Mac Chromium Qt Skia CoreGraphics QPainter graphics stack
  12. Mobile Device Radio Touch interface CPU Power GPU
  13. Graphics Processor Divide and conquer Very specific purpose
  14. Relationship CPU GPU
  15. SoC = System-on-a-Chip
  16. Fundamental Physical Limitations 1.Available memory 2.Bus bandwith 3.Speed difference
  17. Optimized for Games Fixed geometry Transformation Textured triangles Parallelism
  18. ChallengesPredictable contents (assets) ✔Mostly text ✔Mostly images ✔Initial response immediate
  19. http://www.trollquotes.org/619-super-spider-bat-troll-quote/
  20. Primitive Drawing
  21. Path is Everything Triangle Rectangle Path Ellipse Polygon
  22. Stroke = Outline Solid Dashed Dotted Textured
  23. Brush = Fill None Solid Gradient Textured
  24. Smooth via Antialiasing Multiple levels of transparency Perfect for parallelism
  25. Path Approximation Curves Polygon
  26. Gradient: Expensive CPU: sequential, tedious GPU: parallel, still a lot of work
  27. Blur Shadow: Really Posh Involved pixel “blending” GPU: parallel, still tedious
  28. Transformation Scaling Perspective Rotation
  29. Text Rasterization
  30. Font Atlas Buffer Bye
  31. Simple to Complex ello! H Simple shape Curves Solid color Gradient brush Textured stroke Blur shadow Make it as an Serif text image Rotated
  32. Backing Store
  33. Maps Tile
  34. Pinch to Zoomwhen you pinch...
  35. Responsive Interface decoupled Rendering Processor User interaction
  36. Rendering vs Interaction Screen Backing Store RenderingWeb Page User interaction
  37. Checkerboard Pattern
  38. Progressive Rendering Fast but blurry Crisp but slow
  39. Tiling System Texture upload .... .... CPU GPU
  40. Tile Transformation Panning = Translation Zooming = Scaling
  41. Backing Store SupportVector-basedTexture-based Honeycomb and later
  42. Y U NOposition:fixed
  43. Layer & Compositing
  44. Mechanics of Animation “Hey, this is good stuff. Keep it around as texture #42.” Initialization “Apply [operation] to texture #42.” Animation step
  45. Elements = Layer
  46. Typical Animation opacity, movement, scaling, rotation, ...
  47. Immediate Mode setInterval(function() {     box.draw(x, y);     x += 10; }, 20); every animation tick
  48. Scene Graph box.drawInto(layer); setInterval(function() {     layer.translate(10, 0); Change transformation matrix }, 20);
  49. Logical 3-D
  50. Keep the Textures
  51. Compositing Support Honeycomb and later
  52. Well-known Trick forcing 3-D transform -webkit-transform: translateZ(0) Not needed for CSS animation!
  53. Magical Advice Use translate3d for hardware Misleading (at best) acceleration
  54. Debugging in Safari defaults write com.apple.Safari IncludeInternalDebugMenu 1
  55. Compositing Indicators Texture (number = upload) Composited layer No texture Container layer Overflow
  56. Avoid Texture Reupload No reupload Upload Opacity Everything else! Position Size Animation “Hardware accelerated CSS”
  57. Examples
  58. Avoid Overcapacity GPU = Limited silicon space Large layer ➔ broken into “tiles”
  59. Prepare & Reuse Hide the layer offscreen Viewport
  60. Alpha Blending Color change
  61. Alpha Blending: The Trick Blended with
  62. Wrap-up
  63. Hardware Acceleration Drawing Backing Layer & primitives stores compositing
  64. What Can We Learn? Traditional graphics programming has been always full of tricks. It will always be.
  65. There is No Silver Bullet
  66. Thank You ariya.hidayat@gmail.com ariya.ofilabs.com @AriyaHidayat

×