Understanding Hardware Acceleration                                      Ariya Hidayat                on Mobile Browsers
whoami
Challenges
Game vs Web
Game                                     Text                                            Textured                         ...
Large Area, but Still Bounded
Web Page             Images      Text
From Wave to Pixels                       Network stack                                   Layout engine                   ...
WebKit Components          DOM               CSS                WebCore              SVG   HTML                      rende...
Platform Abstraction       Network          Unicode      Clipboard       Graphics          Theme        Events        Thre...
Graphics AbstractionGraphicsContext       Mac        Chromium       Qt                                   Skia             ...
Mobile Device                         Radio       Touch interface                                 CPU              Power  ...
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 diffe...
Optimized for Games                      Fixed geometry                      Transformation                      Textured ...
ChallengesPredictable contents (assets)   ✔Mostly text                           ✔Mostly images                   ✔Initial...
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                                       Per...
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            ...
Backing Store
Maps       Tile
Pinch to Zoomwhen you pinch...
Responsive Interface                                 decoupled     Rendering                Processor                     ...
Rendering vs Interaction                                          Screen                  Backing Store      RenderingWeb ...
Checkerboard Pattern
Progressive Rendering    Fast but blurry                        Crisp but slow
Tiling System                       Texture upload                ....                ....    CPU                         ...
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          ...
Elements = Layer
Typical Animation       opacity, movement, scaling, rotation, ...
Immediate Mode          setInterval(function() {              box.draw(x, y);              x += 10;          }, 20);      ...
Scene Graph  box.drawInto(layer);  setInterval(function() {      layer.translate(10, 0);   Change transformation          ...
Logical 3-D
Keep the Textures
Compositing Support               Honeycomb and later
Well-known Trick                                       forcing 3-D transform             -webkit-transform: translateZ(0) ...
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 l...
Avoid Texture Reupload         No reupload                           Upload         Opacity                        Everyth...
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 al...
There is No Silver Bullet
Thank You            ariya.hidayat@gmail.com            ariya.ofilabs.com            @AriyaHidayat
Understanding Hardware Acceleration on Mobile Browsers
Upcoming SlideShare
Loading in...5
×

Understanding Hardware Acceleration on Mobile Browsers

8,458

Published on

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

No Downloads
Views
Total Views
8,458
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
91
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Understanding Hardware Acceleration on Mobile Browsers

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

    Clipping is a handy way to collect important slides you want to go back to later.

×