Frames Per Second (jQuery EU 2014)

Slide 1

Slide 1 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Frames Per Second

Slide 2

Slide 2 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus

Slide 3

Slide 3 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Clueless programmer: “Whatevs, 24fps works for movies, works for me, dumbass!”

Slide 4

Slide 4 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Hate knowledge?! Want action? Take a quick nap.

Slide 5

Slide 5 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Shutter speed Motion blur Persistence of Vision Phi Phenomenon Refresh Rate HFR Flicker Fusion Threshold Subﬁeld Drive 2-3 pulldown Jitter requestAnimationFrame vsync Input lag Perceived performance

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Frames.. per second? !7

Slide 8

Slide 8 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus When we started to record and project film, there was no scientific evidence behind many discoveries - just trial and error First cameras recorded at variable FPS, and projected at variable FPS (hand-controlled), usually at 16-24 fps Through lots of trial and error, and because sound playback had to be uniform and steady, people settled on 24fps, and it was deemed “good enough”, and film was expensive

Slide 9

Slide 9 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus But what is the optimum frame rate?* * Trick question

Slide 10

Slide 10 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !10 The eye is not a camera.

Slide 11

Slide 11 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !11 Motion perception is the process of inferring the speed and direction of elements in a scene based on visual, vestibular and proprioceptive inputs. Although this process appears straightforward to most observers, it has proven to be a diﬃcult problem from a computational perspective, and extraordinarily diﬃcult to explain in terms of neural processing.

Slide 12

Slide 12 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !12 So why do frames work, then?

Slide 13

Slide 13 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !13 Persistence of Vision Persistence of vision is the phenomenon of the eye by which an afterimage is thought to persist for approximately one twenty-ﬁfth of a second on the retina. Phi Phenomenon The phi phenomenon is the optical illusion of perceiving continuous motion between separate objects viewed rapidly in succession.

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !14 No frame rate will ever be optimal. But we can get closer..

Slide 16

Slide 16 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus • 10 fps – absolute minimum • < 16 fps – causes visible stutter, headaches • 24 fps – tolerable, cost-eﬃcient Crappy frame rates 12 fps

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus • >= 30 fps – decent, but not lifelike • 48 fps (HFR) – good, but not enough • 60 fps – sweet spot! • > 67 fps – does not improve the picture further* Good frame rates

Slide 19

Slide 19 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus

Slide 20

Slide 20 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus

Slide 21

Slide 21 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !18 Most people, after watching Hobbit movie.

Slide 22

Slide 22 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !19 “Film look” is a term that exists, sadly. http://en.wikipedia.org/wiki/Film_look

Slide 23

Slide 23 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !20

Slide 24

Slide 24 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Hz vs. FPS !21

Slide 25

Slide 25 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !22 The refresh rate is the number of times in a second that a display hardware updates its buﬀer. This is distinct from the measure of frame rate in that the refresh rate includes the repeated drawing of identical frames, while frame rate measures how often a video source can feed an entire frame of new data to a display. http://en.wikipedia.org/wiki/Refresh_rate

Slide 26

Slide 26 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !23 Describes the number of times the image on screen is fully redrawn / refreshed! The refresh rate can be terribly important or not at all important, depending on the display type and frame rate.

Slide 27

Slide 27 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !24 Display types?

Slide 28

Slide 28 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !25 Movie projectors

Slide 29

Slide 29 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !26 CRT’s

Slide 30

Slide 30 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !27 LCD - No ﬂicker, no problem!

Slide 31

Slide 31 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !28 So high refresh rates in LCDs are a marketing gag?!

Slide 32

Slide 32 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !29 Mostly, yes. *

Slide 33

Slide 33 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !30 Plasma

Slide 34

Slide 34 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !31 “Activate the sub ﬁeld drive!”

Slide 35

Slide 35 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !32 To recap:

Slide 36

Slide 36 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !33 Ever wondered why movies play back so crappy on your laptop?

Slide 37

Slide 37 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !34 FPS and Hz are no mix and match!

Slide 38

Slide 38 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !35 Telecine The process of transferring (converting) motion picture ﬁlm into video. Three common methods Lazy method: Speed up Crazy method: 2:3 pulldown (PAL: 2:2) Judder method: 5th frame 2x

Slide 39

Slide 39 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !36 German SEE Edition of Lord of the Rings had major sound fail:

Slide 40

Slide 40 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !36 German SEE Edition of Lord of the Rings had major sound fail: (Movie version)

Slide 41

Slide 41 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !36 German SEE Edition of Lord of the Rings had major sound fail: (BluRay Version)

Slide 42

Slide 42 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !37 Speed change is not the best idea.

Slide 43

Slide 43 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !38

Slide 44

Slide 44 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !39

Slide 45

Slide 45 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !40

Slide 46

Slide 46 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !41 Easy! Just play every 5th frame twice! Nobody will notice, right?

Slide 47

Slide 47 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !42

Slide 48

Slide 48 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Jitter* !43 * Judder, Jank

Slide 49

Slide 49 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !44 Jitter is the undesired deviation from true periodicity of an assumed periodic signal in electronics and telecommunications, often in relation to a reference clock source. Wikipedia

Slide 50

Slide 50 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !45 Jitter is what happens when an animation is being played at variable frame rate, rather than a ﬁxed frame rate.

Slide 51

Slide 51 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !46 “Sweet then, I’ll settle at a steady 30fps for my game, thanks Paul!”

Slide 52

Slide 52 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !47 “Sweet then, I’ll settle at a steady 30fps for my game, thanks Paul!” NOT SO FAST, YOUNG PADAWAN!

Slide 53

Slide 53 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !48 Ever wondered why your site looks so shitty at 24fps compared to a movie?

Slide 54

Slide 54 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Meet Motion Blur. !49 Photo by E01 on Flickr

Slide 55

Slide 55 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !50 Motion blur is the apparent streaking of rapidly moving objects in a still image or a sequence of images such as a movie or animation. It results when the image being recorded changes during the recording of a single frame, either due to rapid movement or long exposure. Wikipedia

Slide 56

Slide 56 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !51 via http://freespace.virgin.net/hugo.elias/graphics/x_motion.htm

Slide 57

Slide 57 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !52 Without With

Slide 58

Slide 58 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !53 The Rotary Disc Shutter

Slide 59

Slide 59 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !53 The Rotary Disc Shutter

Slide 60

Slide 60 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !54 Ironically, Flicker reduces motion blur: http://www.testufo.com/ #test=blackframes&count=2&equalizer=1

Slide 61

Slide 61 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !55 Eye-induced motion blur in LCDs Source: http://msdn.microsoft.com/en-us/windows/hardware/gg463407.aspx

Slide 62

Slide 62 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !56 The web is missing motion blur: https://dl.dropboxusercontent.com/u/ 8554242/dmitri/projects/MotionBlurDemo/ MotionBlurDemo.html

Slide 63

Slide 63 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !57 Why don’t we just add it?

Slide 64

Slide 64 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !58 Temporal anti-aliasing is expensive:

Slide 65

Slide 65 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !59 60 fps, it is.

Slide 66

Slide 66 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !60 Mind = Blown

Slide 67

Slide 67 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !61 Photo by E01 on Flickr Hands on

Slide 68

Slide 68 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !62 requestAnimationFrame ftw! window.requestAnimationFrame(function(/* time */ time) { // time ~= +new Date // the unix time }); syncs with vsync.

Slide 69

Slide 69 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !63 Follow best rendering practices: http://calendar.perfplanet.com/2013/ the-runtime-performance-checklist/

Slide 70

Slide 70 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !64 Understand your bottlenecks: Chances are JavaScript does not cause your perf issues!

Slide 71

Slide 71 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !65 Debugging is hard.

Slide 72

Slide 72 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !66 Measuring FPS accurately is hard.

Slide 73

Slide 73 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !67 Remember: You have ~ 16.7ms for all your stuff – but it is shared with the browser!

Slide 74

Slide 74 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus !68 Digging further

Slide 75

Slide 75 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Input lag “In video games, input lag is either the delay between the television or monitor receiving a signal and it being displayed on the screen, or the delay between pressing a button and seeing the game react.”

Slide 76

Slide 76 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Input lag > 200ms = unresponsive!! > 100ms = perceived as waiting! < 100ms = feels fast

Slide 77

Slide 77 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Perceived performance “Perceived performance, in computer engineering, refers to how quickly a software feature appears to perform its task. The concept applies mainly to user acceptance aspects.”

Slide 78

Slide 78 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Progress Bars http://www.newscientist.com/ video/76695476001- progress-bar-illusion.html Increase the Number of Pulsations - “The progress bar with increasing pulsation was more likely to be perceived as having a shorter duration” Accelerate the Progress and Avoid Pauses at the End - Progress bars “with the fastest progress occurring near the end of the process” were perceived faster than progress bars “with pauses near the process conclusion”

Slide 79

Slide 79 text

Slide 80

Slide 80 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Other mixed advice Hide waiting times between transitions Render the layout before content Lazy load content in the background Choose the right easing

Slide 81

Slide 81 text

Frames Per Second 02/28/2014 Slide http://paulbakaus.com | @pbakaus | +PaulBakaus Thank you for listening! See you next time! Stay in touch!