Frames Per Second (jQuery EU 2014)

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

Clueless programmer: “Whatevs, 24fps works for movies, works for me, dumbass!”

Hate knowledge?! Want action? Take a quick nap.

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

Frames.. per second? !7

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

But what is the optimum frame rate?* * Trick question

!10 The eye is not a camera.

!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.

!12 So why do frames work, then?

!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.

!14 No frame rate will ever be optimal. But we can get closer..

• 10 fps – absolute minimum • < 16 fps – causes visible stutter, headaches • 24 fps – tolerable, cost-eﬃcient Crappy frame rates 12 fps

• >= 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

!18 Most people, after watching Hobbit movie.

!19 “Film look” is a term that exists, sadly. http://en.wikipedia.org/wiki/Film_look

!20

Hz vs. FPS !21

!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

!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.

!24 Display types?

!25 Movie projectors

!26 CRT’s

!27 LCD - No ﬂicker, no problem!

!28 So high refresh rates in LCDs are a marketing gag?!

!29 Mostly, yes. *

!30 Plasma

!31 “Activate the sub ﬁeld drive!”

!32 To recap:

!33 Ever wondered why movies play back so crappy on your laptop?

!34 FPS and Hz are no mix and match!

!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

!36 German SEE Edition of Lord of the Rings had major sound fail:

!36 German SEE Edition of Lord of the Rings had major sound fail: (Movie version)

!36 German SEE Edition of Lord of the Rings had major sound fail: (BluRay Version)

!37 Speed change is not the best idea.

!38

!39

!40

!41 Easy! Just play every 5th frame twice! Nobody will notice, right?

!42

Jitter* !43 * Judder, Jank

!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

!45 Jitter is what happens when an animation is being played at variable frame rate, rather than a ﬁxed frame rate.

!46 “Sweet then, I’ll settle at a steady 30fps for my game, thanks Paul!”

!47 “Sweet then, I’ll settle at a steady 30fps for my game, thanks Paul!” NOT SO FAST, YOUNG PADAWAN!

!48 Ever wondered why your site looks so shitty at 24fps compared to a movie?

Meet Motion Blur. !49 Photo by E01 on Flickr

!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

!51 via http://freespace.virgin.net/hugo.elias/graphics/x_motion.htm

!52 Without With

!53 The Rotary Disc Shutter

!54 Ironically, Flicker reduces motion blur: http://www.testufo.com/ #test=blackframes&count=2&equalizer=1

!55 Eye-induced motion blur in LCDs Source: http://msdn.microsoft.com/en-us/windows/hardware/gg463407.aspx

!56 The web is missing motion blur: https://dl.dropboxusercontent.com/u/ 8554242/dmitri/projects/MotionBlurDemo/ MotionBlurDemo.html

!57 Why don’t we just add it?

!58 Temporal anti-aliasing is expensive:

!59 60 fps, it is.

!60 Mind = Blown

!61 Photo by E01 on Flickr Hands on

!62 requestAnimationFrame ftw! window.requestAnimationFrame(function(/* time */ time) { // time ~= +new Date // the unix time }); syncs with vsync.

!63 Follow best rendering practices: http://calendar.perfplanet.com/2013/ the-runtime-performance-checklist/

!64 Understand your bottlenecks: Chances are JavaScript does not cause your perf issues!

!65 Debugging is hard.

!66 Measuring FPS accurately is hard.

!67 Remember: You have ~ 16.7ms for all your stuff – but it is shared with the browser!

!68 Digging further

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.”

Input lag > 200ms = unresponsive!! > 100ms = perceived as waiting! < 100ms = feels fast

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.”

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”

Other mixed advice Hide waiting times between transitions Render the layout before content Lazy load content in the background Choose the right easing

Thank you for listening! See you next time! Stay in touch!

Frames Per Second (jQuery EU 2014)

Frames Per Second (jQuery EU 2014)

More Decks by Paul Bakaus

Other Decks in Technology

Featured

Transcript