Sample request three .jsAnimationFrame OR TweenMax

Question

I experimented with Greensock TweenMax JS and Three.js . Since both libraries use requestAnimationFrame (rAF), I needed to decide which library should handle this.

If I use rAF built into Three.js , it runs at about 30 frames per second and is pretty smooth.

If I use TweenMax for example: TweenMax.ticker.addEventListener('tick', animate); It runs at about 55-60 frames per second, but is a bit volatile.

I can change the fps in TweenMax to TweenMax.ticker.fps(30); which is expected to be similar to the tr.js rAF version.

My question is, which method is preferred and considered best practice over another? Also, if I choose Three.js, can I change the fps in its rAF implementation?

Finally, how would you define fps to fit a wider audience? Limiting to 30 frames per second seems nice, but a little arbitrary, some users may have much higher rates than I assume.

UPDATE:

From the feedback from mrdoob and jack, I tried both rAFs in three .js and rAFs using TweenMax with turning anti-aliasing on and off.

antialias on:

 Three.js rAF (default) - 30fps smooth. 

http://jsfiddle.net/cR7Lx/21/

 TweenMax rAF (default) - 55-60fps slightly choppy. 

http://jsfiddle.net/cR7Lx/23/

 TweenMax rAF (fps(30)) - 30fps smooth. 

http://jsfiddle.net/cR7Lx/24/

antialias off:

 Three.js rAF (default) - 30 - 60fps slightly choppy. TweenMax rAF (default) - 92-120fps slightly choppy. TweenMax rAF (fps(30)) - 30fps smooth. 

Maybe with someone who knows how requestAnimationFrame works under the hood to help explain the differences, now I will use either TweenMax 30fps or Three.js with antialiases.

Answer 1

Just to clarify, the default behavior of TweenMax by default does not impose a limit on fps, because ... well ... that the requestAnimationFrame point in the first place is what the browser dictates (and usually about 60 frames per give me a sec). Setting a specific fps using TweenMax.ticker.fps () just puts a cap on it (unless you set TweenMax.ticker.useRAF (false), in which case it will use setTimout () to get as close to fps as you can )

I noticed that someone said you have to set fps to TweenMax to make it smooth, and I just wanted to clarify that this is not true - it just skips RAF updates if / when they happen too fast - I can Imagine yourself how it will make something smoother. Most likely, it will be the other way around.

Use only TweenMax.ticker.fps () if you want LOWER frame rates below the normal browser refresh rate, which, again, is usually around 60 frames per second. If you are looking for the smoothest results, I would probably stick with the standard TweenMax configuration. You can try to disable requestAnimationFrame and use very high fps (TweenMax.ticker.useRAF (false), TweenMax.ticker.fps (100)), but the downside is that you lose all the benefits of RAF, for example, improved battery life on mobile devices, when the tab is inactive, synchronized updates with updating its own browser, etc.

The biggest reason for abrupt behavior is rendering graphics in a browser that is not related to the JavaScript animation engine.

I am not familiar with Three.js, so I can’t talk about its capabilities or which option is better to use to manage other things (sorry). All I can say is a big GreenSock fan (haha)

Answer 2

When I checked both executions in fact, they are actually very similar. They both use this with a slight difference.

Performing thrice. calculates your last call and delays the next call (16 ms - lastCall) to fix your fps 60. If he cannot do it in 16 ms, he will naturally wait as long as necessary.

The TweenMax effect does not fix your fps again. Instead, you need to call fps manually. This makes this a volatile situation. Because you should always give the right fps value (not much - not less) in order to adjust the delay time.

EDIT:

I need to change the behavior of TweenMax because I skipped the call this.fps (fps) constructor at the end of the ticker class, which sets the default value of fps to 60 when fps is undefined.