Adaptive playback

[jessegavin]

TL;DR - How can I programmatically detect slow / choppy animation?

My company uses pixi.js to create animations for digital signage (screens in waiting rooms, train stations, airports, billboards, etc).

Our clients use a wide variety of hardware to display our animated content. Some of them are high powered, but most of them are pretty crappy.

Most of our animations are rendered at HD (1920x1080) or 4K (3840x2160) and often have large images in them (news photo with headline). 

I have noticed on really low-end hardware when we animate the images using a ken-burns effect or a slide-in effect, the animation is VERY choppy, even for devices which support WebGL.

We want to be able to programmatically detect choppy playback and use that info to adapt the animation.

Here's some psuedo code...

if (isLowQuality()) {
  // Show content without animation effects
} else {
  // Use high-quality animation effects (filters, cross-fades, etc)
}

Does anyone here have advice how I could implement the isLowQuality() function?

Do I measure average ticker.FPS over a few seconds?  If so, what's the best way to do that?

I am new to PIXI. Any help is appreciated

[ivan.popelyshev]

So far i didnt encounter better solution than ask user to set the quality. In your case, I guess, its not possible.

[themoonrat]

So, there are 2 methods to have adaptive quality; one is to dynamically change things at runtime depending on performance, and the other is to figure out a quality before the app even loads to adapt.

At runtime, then yes, you are measuring fps. But you have to record a rolling average, really. If after reading the fps over the last 5 seconds, the frame rate had a min of 20 and a max of 30...then it's clear there is a persistent issue in performance, and maybe you could adjust the resolution of the app on the fly, or not play certain particle effects / filters. Just a one off measurement might be you getting unlucky during garbage collection or something. But also make sure make sure that you're measuring at the right time. Don't measure whilst loading assets; download assets and uploading textures to the gpu can cause stutters on any device, so wait to measuring until you know the device has it's best chances of displaying good performance.

Figuring out the quality before the app loads usually gives the best user experience.... and you have 2 ways of this route. The first is as ivan suggested and give the user the option to choose. The other is to try and detect the capabilities of the device and change settings based on that. At a basic level, if the device can only support the canvas renderer, you know you've got a low quality device on your hands. You could detect browser versions. You could detect WebGL capabilities: http://webglreport.com/ is a super useful website in that respect. Compare the hardware you have via that website; find out what differences there are in the hardware that runs your app well and the hardware that runs your app less well. For example, the lower end hardware may support less texture units, or may not support anti-aliasing.