All we do in frontend development ends up as pixels on screen yet many people don't really know how a pixel goes from zeroes and ones in memory to bright colours on screen. This talk explains how that works and gives an introduction into the basic principles of 2D and 3D computer graphics, filtering and different techniques to make things look better. This can help you improve your rendering performance not only for games, but regular websites, too.

1. @g33konaut
What happens on the GPU doesn’t stay on the GPU
Life of a pixel

2. @g33konaut
Доброго ранку, Київ!
Як поживаєте?

3. @g33konaut
ZURICH, SWITZERLAND - yeah!

4. @g33konaut
But before we look into browsers...

5. @g33konaut
Software development is hard...

6. @g33konaut
Things go wrong...

7. @g33konaut
...a lot...

8. @g33konaut
… seriously!

9. @g33konaut
Why do we put up with this?

10. @g33konaut
We do it for our users!

11. @g33konaut
And we’re not alone!

12. @g33konaut
… and we’ve got many, many tools!

13. @g33konaut
So much choice can be puzzling...

14. @g33konaut
… because we don’t wanna go wrong ...

15. @g33konaut
Here. It. Comes.

16. @g33konaut
It’s mostly choice & flavour

17. @g33konaut
Creating user value >

18. @g33konaut
Some are simple

19. @g33konaut
Some are complex

20. @g33konaut
Some require … effort ...

21. @g33konaut
It’s about people, learning & fun!
Please keep it like that.

22. @g33konaut
Anyway.
Let’s fight Jank!

23. @g33konaut
First things first: What the flip is a pixel?
RGB

24. @g33konaut
Make it sparkle!
Memory
01010111001010101001001010
10100100100101010100100100
11101010101010101011010110
10111001001110101010111101
1

25. @g33konautSource: Google Developers, CC-BY 3.0

26. @g33konaut
Rendering flow
Image CC-BY 3.0 by Paul Lewis, Google
Developers

27. @g33konaut
Rendering flow
Image CC-BY 3.0 by Paul Lewis, Google
Developers
CPU GPU

28. @g33konaut
GPU, CPU, OMG, WTF?
CPU
● general purpose
● multitasking is a must
● data dependencies
● assumption:
I/O slower than
calculations
GPU
● specialised for graphics
● no dependencies
● highly parallel
● assumption:
unidirectional data flow

29. @g33konaut
Why should we not use JS for drawing stuff?
1920 x 1080 pixels = 2’073’600 pixels
24bit color = 3 byte per pixel = 6’220’800 byte = ~5,3 MB

30. @g33konaut
Hey, main thread,
please draw 2 million pixels in 10ms,
kthxbye.

31. @g33konaut
Hey, CPU, ...

32. @g33konaut
Hey, GPU, ...

33. @g33konaut
Don’t worry, Browsers are clever

34. @g33konaut
Efficient painting in browsers: Tiles

35. @g33konaut
Tiles: How?
● page is organised in layers
● layers may be broken down into tiles
● tiles are saved as bitmaps & uploaded into VRAM
● tiles can very often be reused (minimise/maximise, scroll)

36. @g33konaut
Aaaand action!

37. @g33konaut
CSS Triggers: csstriggers.com

38. @g33konaut
Contain changes with layers JSbin

39. @g33konaut
Make everything a layer! Or… should we?
● layers require VRAM, which is often limited
● tiny overhead at creation time: Upload into VRAM
● things get very, very slow when you overflow VRAM
● you have no idea how much VRAM there is...

40. @g33konaut
Canvas time!
● we are on a separate layer
● we get direct pixel access
● yet there’s performance considerations!

41. @g33konaut
Canvas tips
● don’t do a lot of text rendering
● avoid scaling images in canvas
● avoid a large amount of bit copies (i.e. sweeping fillRect)
● minimise the amount of draw calls (i.e. combine paths)
● try to change as few pixels as possible between frames

42. @g33konaut
Canvas example
requestAnimationFrame(function draw()
{
x = (x+1) % 300;
ctx.fillStyle = '#000';
ctx.fillRect( 0, 0, 300, 300)
ctx.fillStyle = '#f00';
ctx.fillRect(x, 50, 50, 50)
requestAnimationFrame(draw)
})

43. @g33konaut
Canvas example
requestAnimationFrame(function draw()
{
x = (x+1) % 301;
ctx.fillStyle = '#000';
ctx.fillRect( x-1, 50, 1, 50)
ctx.fillStyle = '#f00';
ctx.fillRect(x, 50, 50, 50)
requestAnimationFrame(draw)
})

44. @g33konaut
Canvas performance vs. WebGL
Source: Tizen
CC-BY 3.0

45. @g33konaut
WebGL basically gives you
parallel pixel access

46. @g33konaut
Plus: You can program the GPU

47. @g33konaut
WebGL pipeline (simplified)

48. @g33konaut
Shaders: Vertex Shader & Fragment Shader
● Vertex shaders
○ IN: Vertex
○ OUT: transformed vertex
○ can do things like projection, waves, fish eye lens, etc.
● Fragment shaders
○ IN: screen position, material, light, normal, textures, …
○ OUT: Colour, depth value
○ can do things like reflection, shading, lens flares, HDR

49. @g33konaut
Summary
● Browsers are clever
● Do as much on the GPU, not the CPU
● Beware of Layout & Paint
● Canvas = CPU-bound pixel access
● WebGL = GPU-bound pixel access
● Think of your users & colleagues
● Don’t panic.

50. @g33konaut
Дякую!
Slides: bit.ly/fwd16-performance
Twitter: @g33konaut
Web: archilogic.com