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.

Transcript

1. Tweaking CSS3 for Hardware Acceleration @ariyahidayat Feb 24, 2014 Atlanta, GA
2. /usr/bin/whoami PhantomJS shapesecurity.com Esprima
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.