Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Ariya Hidayat

February 24, 2014
Tweet

More Decks by Ariya Hidayat

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. View Slide

  4. View Slide

  5. translate 3-D!

    View Slide

  6. Web Page Rendering

    View Slide

  7. Web Page vs Game
    Predictable content/assets ✔
    Mostly text ✔
    Mostly images ✔
    Initial response immediate

    View Slide

  8. Graphics Processing Unit (GPU)
    “Fixed” geometry
    Transformation
    Textured triangles
    Parallelism

    View Slide

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

    View Slide

  10. GPU Programming Workflow
    Vertices Rendered Textured
    Matrix

    View Slide

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

    View Slide

  12. Path = Everything

    View Slide

  13. Stroke = Outline
    Solid Dashed Dotted Textured

    View Slide

  14. Brush = Fill
    Solid
    None Gradient Textured

    View Slide

  15. Path Approximation
    Curves
    Polygons

    View Slide

  16. Antialiasing

    View Slide

  17. Transformation
    Scaling
    Rotation
    Perspective

    View Slide

  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

    View Slide

  19. Animation Mechanics

    View Slide

  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

    View Slide

  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

    View Slide

  22. Compositing Process
    Initialization
    Animation step
    http://ariya.ofilabs.com/2013/06/optimizing-css3-for-gpu-compositing.html

    View Slide

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

    View Slide

  24. Compositing: “Logical” 3-D

    View Slide

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

    View Slide

  26. Tools & Examples

    View Slide

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

    View Slide

  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

    View Slide

  29. Debugging in Chrome
    chrome://flags

    View Slide

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

    View Slide

  31. Compositing Indicator

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. I can haz some HACKS

    View Slide

  40. Traffic Congestion
    Speed vs Traffic Condition

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. Disastrous Layer Upload
    http://codepen.io/ariya/full/xuwgy

    View Slide

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

    View Slide

  46. Final Words

    View Slide

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

    View Slide

  48. No Silver Bullet
    ● Use CSS3 animation & transition
    ● Be advised of texture uploads
    ● Never assume, always measure

    View Slide

  49. Thank You
    @ariyahidayat
    ariya.ofilabs.com/highlights
    speakerdeck.com/ariya
    Some artworks are from http://openclipart.org.

    View Slide