CSS Animation with GPU

Presented at SF Web Performance Meetup, Nov 17, 2016.

https://www.meetup.com/SF-Web-Performance-Group/events/235424858/

A common advice to have a smooth CSS animation is to follow the best practice of using a restrictive set of CSS properties. In this talk, we will dive a bit deeper to understand how our favorite browser's rendering engine utilizes the graphics processing unit (GPU) to perform CSS animation, what we shall do to have the GPU compositing as efficient as possible, and some tools to help debugging and understanding any potential issues. Finally, we will apply what we learn to build a buttery smooth 3-D Cover Flow clone with the power of CSS and JavaScript.

Transcript

1. CSS Animation with GPU
   

   View Slide

2. Translate 3-D!
   

   View Slide

3. Best Practices Under the Hood Experiments
   

   View Slide

4. Demo ariya.github.io/kinetic
   

   View Slide

5. View Slide

6. User Interface
   Browser Engine
   Graphics Stack
   Rendering Engine
   JavaScript Engine
   Networking I/O
   

   View Slide

7. HTML
   Parser
   DOM
   CSS
   Parser
   HTML
   Style
   Sheets
   DOM Tree
   Style
   Rules
   Render
   Tree
   Render
   Layout
   Paint
   http://www.html5rocks.com/en/tutorials/internals/howbrowserswork
   

   View Slide

8. HTMLDocument
   HTMLBodyElement
   HTMLParagraphElement
   RenderRoot
   RenderBody
   RenderText
   • metrics (box model)
   • hit testing
   Hello, SF Web Perf!
   DOM Tree vs Render Tree
   

   View Slide

9. Anti-aliasing
   

   View Slide

10. Curve Approximation
    Polygon
    

    View Slide

11. Font Atlas
    Bye
    Buffer
    

    View Slide

12. When I don’t know what happened,
    it just bothers me, gets under my skin,
    and I need to write about it.
    Taylor
    Swift
    

    View Slide

13. Graphics Processing Unit
    (GPU)
    Central Processing Unit
    (CPU)
    

    View Slide

14. Optimized for Games
    

    View Slide

15. Predictable contents (assets)
    ✔
    Mostly text
    ✔
    Mostly images
    ✔
    

    View Slide

16. CSS 3-D (Transformation)
    http://ariya.github.io/css/spinningcube/
    

    View Slide

17. Compositing
    

    View Slide

18. View Slide

19. Layer Compositing
    Background
    Foreground
    

    View Slide

20. Same foreground layer,
    Different transformation matrix
    Layer Compositing
    

    View Slide

21. Render Object to Layer
    

    View Slide

22. Render Object to Layer
    3-D transformation,
    CSS animation,
    …
    

    View Slide

23. Debugging in Safari
    $ defaults write com.apple.Safari IncludeInternalDebugMenu 1
    https://ariya.io/2013/06/optimizing-css3-for-gpu-compositing
    

    View Slide

24. View Slide

25. https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool
    

    View Slide

26. Available Layer Operations
    Opacity
    Transformation
    Filter
    

    View Slide

27. Initialize: Texture Upload
    “Hey, this is good stuff. Keep it around as texture #42.”
    ....
    ....
    

    View Slide

28. Animation Step: Texture Operation
    “Apply [operation] to texture #42.”
    

    View Slide

29. Mechanics of Optimized Animation
    Completed?
    STOP
    Create a layer
    Apply layer
    operation
    

    View Slide

30. Traffic Matters
    http://calendar.perfplanet.com/2014/hardware-accelerated-css-the-nice-vs-the-naughty/
    

    View Slide

31. Terrible Animation
    Completed?
    STOP
    Create a layer
    Send a layer update
    Another texture upload
    

    View Slide

32. Texture Reupload = Bad
    http://codepen.io/ariya/full/xuwgy
    translate3d ???
    

    View Slide

33. Pablo
    Picasso
    

    View Slide

34. Let’s Cheat: Color Transition
    http://codepen.io/ariya/full/ofDIh
    

    View Slide

35. https://ariya.io/2014/02/tricks-for-gpu-composited-css
    

    View Slide

36. Let’s Cheat Again!
    https://ariya.io/2014/02/tricks-for-gpu-composited-css
    

    View Slide

37. View Slide

38. Steve Jobs, MacWorld 2007
    

    View Slide

39. Drag-and-Scroll Technique
    Intercept browser events
    Track position + apply CSS transform
    Illusion of scrolling
    

    View Slide

40. http://ariya.github.io/kinetic/2/
    Momentum Effect
    Flick List
    Kinetic Scrolling
    https://ariya.io/2013/11/javascript-kinetic-scrolling-part-2
    

    View Slide

41. Steady
    touchstart
    Pressed
    Manual
    Scrolling
    Automatic
    Scrolling
    touchend
    touchmove
    touchend and
    zero speed
    timer tick
    decelerate to
    zero speed
    touchstart
    timer tick
    touchend and
    positive speed
    

    View Slide

42. time
    Scroll offset
    Deceleration
    

    View Slide

43. Deceleration
    time
    velocity
    Exponential
    decay
    

    View Slide

44. Model-View
    Event Handler Kinetic Model View
    Touch events
    Scroll offset
    

    View Slide

45. Model-View
    Event Handler Kinetic Model View
    Touch events
    CSS transform
    

    View Slide

46. Cover Flow Wireframe
    

    View Slide

47. No transformation
    translateX(-110px)
    translateZ(-150px)
    rotateY(60deg)
    translateX(110px)
    translateZ(-150px)
    rotateY(-60deg)
    

    View Slide

48. Perspective 3-D
    translateX(-110px) translateX(-110px)
    translateZ(-150px)
    translateX(-110px)
    translateZ(-150px)
    rotateY(60deg)
    

    View Slide

49. https://ariya.io/2014/01/javascript-kinetic-scrolling-part-5-cover-flow-effect
    

    View Slide

50. View Slide

51. TELL ME … DO YOU EVEN?
    

    View Slide

52. Best Practices Under the Hood Experiments
    

    View Slide

53. Thank You
    shapesecurity.com
    Some artworks are from http://openclipart.org.
    speakerdeck.com/ariya
    @ariyahidayat
    

    View Slide