Successfully reported this slideshow.

Google I/O 2011, Android Accelerated Rendering

14,528 views

Published on

Published in: Technology
  • Be the first to comment

Google I/O 2011, Android Accelerated Rendering

  1. 1. AndroidRenderingRomain Guy @romainguyChet Haase @chethaaseMay 11, 2011Feedback goo.gl/wI57LHashtags #io2011, #Android
  2. 2. Android AcceleratedRenderingRomain Guy @romainguyChet Haase @chethaaseMay 11, 2011Feedback goo.gl/wI57LHashtags #io2011, #Android
  3. 3. Hardware OpenGL
  4. 4. Why now?
  5. 5. memcpy (MiB/s) Pixel count1100 825 550 275 0 G1 Droid N1 NS XOOM
  6. 6. UI on the GPU
  7. 7. on the GPU UI
  8. 8. Software rendering
  9. 9. Hardware rendering
  10. 10. Drawing a list
  11. 11. Drawing a list
  12. 12. Drawing a button
  13. 13. Drawing a button
  14. 14. Drawing a path
  15. 15. Drawing a path
  16. 16. Drawing a path
  17. 17. attribute vec4 position;attribute vec2 texCoords;uniform mat4 transform;uniform mat4 screenSpace;varying vec2 outTexCoords;varying vec2 linear;void main(void) { outTexCoords = texCoords; linear = vec2((screenSpace * position).x, 0.5); gl_Position = transform * position;} Text+gradient vertex shader
  18. 18. precision mediump float;varying vec2 outTexCoords;varying vec2 linear;uniform sampler2D sampler;uniform sampler2D gradientSampler;void main(void) { lowp vec4 color; vec4 gradient = texture2D(gradientSampler, linear); color = gradient * texture2D(sampler, outTexCoords).a; gl_FragColor = color;} Text+gradient fragment shader
  19. 19. ?
  20. 20. android:hardwareAccelerated="true"
  21. 21. Hardware acceleration control
  22. 22. 1 <application android:hardwareAccelerated="true">2 <activity ... />3 <activity android:hardwareAccelerated="false" />4 </application>
  23. 23. getWindow().setFlags(    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED,    WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED);
  24. 24. view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
  25. 25. View.isHardwareAccelerated();Canvas.isHardwareAccelerated(); GPU aware code
  26. 26. Caveats
  27. 27. Canvas clipPath clipRegion drawPicture drawPoints drawPosText drawTextOnPath drawVerticesPaint setLinearText setMaskFilter setRasterizerUnsupported operations
  28. 28. 3D transforms, XOR, Diff,Canvas clipRect ReverseDiff ignored drawBitmapMesh Colors array ignored drawLines No anti-aliasing setDrawFilter IgnoredPaint setDither Ignored setFilterBitmap Filtering always on setShadowLayer Works with text only Limitations
  29. 29. ComposeShader Cannot contain another ComposeShader Cannot contain two shaders of the same type Limitations
  30. 30. view.setLayerType(View.LAYER_TYPE_SOFTWARE, null); Workaround
  31. 31. New drawing model
  32. 32. ViewRoot ViewGroupView View Old model
  33. 33. ViewRoot ViewGroupView View invalidate() Old model
  34. 34. ViewRoot ViewGroupView View invalidate() Old model
  35. 35. ViewRoot ViewGroup invalidate()View View invalidate() Old model
  36. 36. ViewRoot ViewGroup invalidate()View View invalidate() Old model
  37. 37. ViewRoot invalidate() ViewGroup invalidate()View View invalidate() Old model
  38. 38. ViewRoot invalidate() ViewGroup invalidate()View View invalidate() Old model
  39. 39. ViewRoot ViewGroupView View Old model
  40. 40. ViewRoot draw() ViewGroupView View Old model
  41. 41. ViewRoot draw() ViewGroupView View Old model
  42. 42. ViewRoot draw() ViewGroup draw()View View Old model
  43. 43. ViewRoot draw() ViewGroup draw()View View Old model
  44. 44. • No logic!• List of drawing commands• Cached when a View changes DisplayList
  45. 45. Save 3DrawPatchSave 3ClipRect 20.00, 4.00, 99.00, 44.00, 1Translate 20.00, 12.00DrawText 9, 18, 9, 0.00, 19.00, 0x17e898RestoreRestoreToCount 0 DisplayList to draw a Button
  46. 46. ViewRoot ViewGroup DisplayListView A View B DisplayList B DisplayList A New model
  47. 47. ViewRoot ViewGroup DisplayListView A View B DisplayList B DisplayList A invalidate() New model
  48. 48. ViewRoot ViewGroup DisplayListView A View B DisplayList B DisplayList A mark dirty invalidate() New model
  49. 49. ViewRoot ViewGroup DisplayListView A View B DisplayList B DisplayList A mark dirty invalidate() New model
  50. 50. ViewRoot ViewGroup DisplayList invalidate()View A View B DisplayList B DisplayList A mark dirty invalidate() New model
  51. 51. ViewRoot invalidate() ViewGroup DisplayList invalidate()View A View B DisplayList B DisplayList A mark dirty invalidate() New model
  52. 52. rebuild ViewRoot ViewGroup DisplayListView A View B DisplayList B DisplayList A New model
  53. 53. rebuild ViewRoot ViewGroup rebuild DisplayListView A View B DisplayList B DisplayList A New model
  54. 54. ViewRoot ViewGroup DisplayListView A View B DisplayList B DisplayList A New model
  55. 55. draw() ViewRoot ViewGroup DisplayListView A View B DisplayList B DisplayList A New model
  56. 56. 1 background.draw();2 panel.draw();3 selector.draw();4 wifi.draw();5 turnOnWifi.draw();6 checkBox.draw(); Old model
  57. 57. 1 selector.draw();2 drawDisplayLists(); New model
  58. 58. Old model New modelView.invalidate()Intersects a dirty View When does View.draw() run?
  59. 59. ViewRoot ViewGroupView View Old model
  60. 60. ViewRoot ViewGroup invalidate()View View Old model
  61. 61. ViewRoot ViewGroup invalidate()View View Old model
  62. 62. ViewRoot invalidate() ViewGroup invalidate()View View Old model
  63. 63. ViewRoot invalidate() ViewGroup invalidate()View View Old model
  64. 64. ViewRoot ViewGroupView View Old model
  65. 65. ViewRoot draw() ViewGroupView View Old model
  66. 66. ViewRoot draw() ViewGroupView View Old model
  67. 67. ViewRoot draw() ViewGroupdraw() View View Old model
  68. 68. ViewRoot draw() ViewGroupdraw() draw() View View Old model
  69. 69. ViewRoot ViewGroup DisplayListView A View B DisplayList B DisplayList A New model
  70. 70. ViewRootinvalidate() ViewGroup DisplayList View A View B DisplayList B DisplayList A New model
  71. 71. ViewRootinvalidate() ViewGroup DisplayList mark dirty View A View B DisplayList B DisplayList A New model
  72. 72. ViewRootinvalidate() ViewGroup DisplayList mark dirty View A View B DisplayList B DisplayList A New model
  73. 73. ViewRoot invalidate()invalidate() ViewGroup DisplayList View A View B DisplayList B DisplayList A New model
  74. 74. ViewRoot draw()invalidate() ViewGroup DisplayList View A View B DisplayList B DisplayList A New model
  75. 75. ViewRootinvalidate() ViewGroup DisplayList rebuild View A View B DisplayList B DisplayList A New model
  76. 76. ViewRootinvalidate() ViewGroup DisplayList rebuild View A View B DisplayList B DisplayList A New model
  77. 77. View.setLayerType(int type, Paint p)
  78. 78. Button draw()DisplayList Display Save DrawPatch ClipRect Translate DrawText Restore
  79. 79. Button draw() draw()DisplayList Layer Display Save DrawPatch ClipRect Translate DrawText Restore
  80. 80. view.setLayerType(View.LAYER_TYPE_NONE, null) 3 types of layers
  81. 81. view.setLayerType(View.LAYER_TYPE_SOFTWARE, null) Software layer
  82. 82. view.setLayerType(View.LAYER_TYPE_HARDWARE, null) Hardware layer
  83. 83. 1. Performance Hardware layers
  84. 84. Drawing a ListView Hardware layer DisplayList Software Time in ms 0.009 2.1 10.3Measured when drawing a ListView with Android 3.0 on a Motorola XOOM
  85. 85. 2. Visual effectsHardware and software layers
  86. 86. ColorMatrix m = new ColorMatrix();m.setSaturation(0.0f);Paint p = new Paint();p.setColorFilter(new ColorMatrixColorFilter(m));page.setLayerType(LAYER_TYPE_HARDWARE, p);
  87. 87. 3. Compatibility Software layers
  88. 88. 4. AnimationsHardware and software layers
  89. 89. Opacity Position Size Orientation Origin alpha x scaleX rotation pivotX y scaleY rotationX pivotY translationX rotationY translationY Layers-friendly properties
  90. 90. ViewRoot ViewGroup DisplayListView A View B Layer B DisplayList A Layers-friendly properties
  91. 91. ViewRoot ViewGroup DisplayListView A View B Layer B DisplayList A setRotationY(45) Layers-friendly properties
  92. 92. ViewRoot ViewGroup DisplayList invalidate()View A View B Layer B DisplayList A setRotationY(45) Layers-friendly properties
  93. 93. ViewRoot mark dirty ViewGroup DisplayList invalidate()View A View B Layer B DisplayList A setRotationY(45) Layers-friendly properties
  94. 94. ViewRoot mark dirty ViewGroup DisplayList invalidate()View A View B Layer B DisplayList A setRotationY(45) Layers-friendly properties
  95. 95. Save 3DrawDisplayList ADrawLayer BRestore Parent DisplayList
  96. 96. viewB.setRotationY(45)Save 3DrawDisplayList ADrawLayer BRestore Parent DisplayList
  97. 97. viewB.setRotationY(45)Save 3 Save 3DrawDisplayList A DrawDisplayList ADrawLayer B Rotate 0.0, 45.0, 0.0Restore DrawLayer B Restore Parent DisplayList
  98. 98. view.setLayerType(View.LAYER_TYPE_HARDWARE, null);ObjectAnimator.ofFloat(view, "rotationY", 180).start(); Animating a complex View efficiently
  99. 99. view.setLayerType(View.LAYER_TYPE_HARDWARE, null);ObjectAnimator animator = ObjectAnimator.ofFloat( view, "rotationY", 180);animator.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) {    view.setLayerType(View.LAYER_TYPE_NONE, null);   }});animator.start();
  100. 100. Tips & tricks
  101. 101. 1. Don’t use too many views Keep your hierarchy flat
  102. 102. 2. Be careful of setAlpha()Without hardware layers, it costs 2x the fill-rate
  103. 103. 3. Reuse rendering objectsDon’t create new Paints, Bitmaps, etc. in draw()
  104. 104. 4. Don’t modify Bitmaps oftenEvery change causes a texture upload
  105. 105. 5. Don’t modify Paths oftenEvery change causes a new rasterization
  106. 106. 6. Avoid overdrawGPUs are fill-rate limited
  107. 107. 7. ProfileDDMS and traceview are your friends
  108. 108. Android blog d.android.comRomain’s blog curious-creature.org Chet’s blog graphics-geek.blogspot.com
  109. 109. Feedback http://goo.gl/wI57LHashtags #io2011, #Android
  110. 110. Q&A Feedback http://goo.gl/wI57L Hashtags #io2011, #Android

×