Your SlideShare is downloading. ×
0
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Understanding Hardware Acceleration on Mobile Browsers

8,238

Published on

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

No Downloads
Views
Total Views
8,238
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
91
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

×