Successfully reported this slideshow.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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 Abstraction GraphicsContext 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. Challenges Predictable contents (assets) ✔ Mostly text ✔ Mostly images ✔ Initial response immediate
  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 Zoom when you pinch...
  35. Responsive Interface decoupled Rendering Processor User interaction
  36. Rendering vs Interaction Screen Backing Store Rendering Web 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 Support Vector-based Texture-based Honeycomb and later
  42. Y U NO position: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 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 @AriyaHidayat