Tweaking CSS3 for Hardware Acceleration

Tweaking CSS3 for Hardware Acceleration

Presented at DevNexus 2014, Atlanta (GA).

New CSS3 features such as animation, transition, and filters empower web designers to enrich the web pages with various types of interactivity and effects. Modern browsers, both on the desktop and mobile, are capable of rendering these CSS3 effects with the dedicated graphics processing unit (GPU) by using the compositing technique. There has been a lot of well-known CSS3 best practices, often centered around "use 3-d transform”. This talk sheds some more light on the browser interactions with the GPU and explain what happens behind the scenes, particularly for the objective of maximizing the synergy between the GPU and the CPU to have the most optimal CSS rendering performance.

0284b8950e0f4a57bcc092d4dbb98d97?s=128

Ariya Hidayat

February 24, 2014
Tweet

Transcript

  1. Tweaking CSS3 for Hardware Acceleration @ariyahidayat Feb 24, 2014 Atlanta,

    GA
  2. /usr/bin/whoami PhantomJS shapesecurity.com Esprima

  3. None
  4. None
  5. translate 3-D!

  6. Web Page Rendering

  7. Web Page vs Game Predictable content/assets ✔ Mostly text ✔

    Mostly images ✔ Initial response immediate
  8. Graphics Processing Unit (GPU) “Fixed” geometry Transformation Textured triangles Parallelism

  9. Optimized for Games http://epicgames.com/technology/epic-citadel http://www.rage.com/

  10. GPU Programming Workflow Vertices Rendered Textured Matrix

  11. http://ariya.ofilabs.com/2014/01/javascript-kinetic-scrolling-part-5-cover-flow-effect.html http://bit.ly/coverflow3d CSS 3-D

  12. Path = Everything

  13. Stroke = Outline Solid Dashed Dotted Textured

  14. Brush = Fill Solid None Gradient Textured

  15. Path Approximation Curves Polygons

  16. Antialiasing

  17. Transformation Scaling Rotation Perspective

  18. Physical Limitations Memory Can’t store too much stuff Speed CPU

    is faster for some operations Bandwidth Data transfer can be the bottleneck Power Electrons always need energy
  19. Animation Mechanics

  20. Fluid Animation At the beginning, push as many resources as

    possible to the GPU During the animation, minimize the interaction between CPU-GPU 1 2
  21. Rendering Styles For every animation tick... At the beginning Draw

    the shape onto a buffer Blit the buffer at (x,y) x = x + 10 Draw the shape at (x, y) x = x + 10 Immediate Retained
  22. Compositing Process Initialization Animation step http://ariya.ofilabs.com/2013/06/optimizing-css3-for-gpu-compositing.html

  23. DOM Element = Layer http://www.webkit.org/blog-files/leaves/

  24. Compositing: “Logical” 3-D

  25. Efficient Compositing “Hardware accelerated” Hard Easy Opacity Transformation Filter Everything

    else!
  26. Tools & Examples

  27. Frame Rate HUD in Chrome chrome://flags http://ariya.ofilabs.com/2013/03/frame-rate-hud-on-chrome-for-android.html

  28. Continuous Painting in Chrome http://ariya.ofilabs.com/2013/08/continuous-painting-mode-in-chrome.html Page paint time (ms) for

    every single frame
  29. Debugging in Chrome chrome://flags

  30. Debugging in Safari defaults write com.apple.Safari IncludeInternalDebugMenu 1

  31. Compositing Indicator

  32. Continuous Upload = Disaster http://codepen.io/ariya/full/xuwgy translate3d ???

  33. Transformation & Opacity http://ariya.github.com/css/spinningcube/ http://codepen.io/ariya/full/spzad

  34. three.js Periodic Table http://mrdoob.github.com/three.js/examples/css3d_periodictable.html

  35. Montage MovieShow http://montagejs.github.com/montage/samples/popcorn/

  36. Filter http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/

  37. Photon CSS Lighting http://photon.attasi.com/

  38. FPS View http://www.keithclark.co.uk/labs/css3-fps-new/

  39. I can haz some HACKS

  40. Traffic Congestion Speed vs Traffic Condition

  41. Avoid Overcapacity Think of GPU like a cache .... ....

    Texture upload
  42. Prepare & Reuse Hide the poster (=layer) offscreen http://montagejs.github.com/montage/samples/popcorn/

  43. Color Transition @keyframes box { 0% { transform: background-color: blue;

    } 100% { transform: background-color: green; } }
  44. Disastrous Layer Upload http://codepen.io/ariya/full/xuwgy

  45. Transition Trick http://ariya.ofilabs.com/2014/02/tricks-for-gpu-composited-css.html

  46. Final Words

  47. http://www.trollquotes.org/619-super-spider-bat-troll-quote/

  48. No Silver Bullet • Use CSS3 animation & transition •

    Be advised of texture uploads • Never assume, always measure
  49. Thank You @ariyahidayat ariya.ofilabs.com/highlights speakerdeck.com/ariya Some artworks are from http://openclipart.org.