• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,902
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
88
Comments
0
Likes
8

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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