Tweaking CSS3 for Hardware Acceleration

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

/usr/bin/whoami PhantomJS shapesecurity.com Esprima

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

translate 3-D!

Slide 6

Slide 6 text

Web Page Rendering

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

GPU Programming Workflow Vertices Rendered Textured Matrix

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Path = Everything

Slide 13

Slide 13 text

Stroke = Outline Solid Dashed Dotted Textured

Slide 14

Slide 14 text

Brush = Fill Solid None Gradient Textured

Slide 15

Slide 15 text

Path Approximation Curves Polygons

Slide 16

Slide 16 text

Antialiasing

Slide 17

Slide 17 text

Transformation Scaling Rotation Perspective

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Animation Mechanics

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Compositing: “Logical” 3-D

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Tools & Examples

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Debugging in Chrome chrome://flags

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Compositing Indicator

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

I can haz some HACKS

Slide 40

Slide 40 text

Traffic Congestion Speed vs Traffic Condition

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Final Words

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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