Box2D FPS and World Step Tests with JavaScript
This is the third article in a series of Box2D for the JavaScript programmer articles. The previous article detailed a walkthrough of the Box2D example demo.
Intro
One of the challenges facing the web developer is building experiences that must gracefully handle the many different machines and performance characteristics found on the web. Users with widely varying capabilities will visit your game, from the old Pentium to the modern six core machine. Your game, and your physics simulations, should scale to both extremes with some measure of grace.
There are two variables that can control the user's experience: frames per second, or FPS, and Box2D's world step frequency. Understanding how those two variables affect the user's experience is important for a quality physics simulation experience
Demo Controls
Below you will find a Box2D demo with two simulated worlds. For each world, you can control the FPS, the World Step Frequency, and toggle an Adaptive Step Frequency.
FPS
The FPS is frames per second, or how often we are drawing our world to the canvas. We are using requestAnimationFrame, which means the browser is ultimately in charge of regulating frame rate. In most cases, this will be 60 FPS. You can control this with the FPS slider.
Note: the FPS slider also allows you to configure a Random FPS. By sliding the value all the way to Zero, the simulation will pick a frame rate between 20 and 60. It's important to understand, though, that the FPS meter below the canvas is showing you average frame rates. Even though you pick random, it will probably average out to around 30. Regardless, you will see jitters in the animation.
Step Frequency
The Step Frequency slider controls the Box2D simulation time step value in Hz. The general advice is to keep this as high as possible, with 60Hz as the recommended value. This value, if set, will remain constant throughout the simulation. Note: there is no random step rate, the lowest value is 1Hz.
Adaptive Step Frequency
If checked, the Step Frequency value is disabled and ignored, and the delta time between frames is used for the Box2D time step rate.
Demo
Below is the demo. Play with the controls and compare and contrast the performance and animation differences between the world on the left (static, set at 60Hz) and the world on the right (you should change both FPS and Step Freq).
You probably want the full side by side experience, which, alas, cannot fit in Blogger's window.
You probably want the full side by side experience, which, alas, cannot fit in Blogger's window.
Again, the above demo doesn't really work in Blogger's narrow view, so I encourage you to check out the full side by side example for the full effect.
Analysis
Running the simulation at 60/60 (fps/step rate) or 30/30 leads to same visual output. Both simulations appear to simulate the objects falling at the same rate.
Running at 20/20 or less will show inconsistencies as the step rate is too slow for Box2D. It will ultimately correct itself, but you will see objects overlapping (however the world will correct itself).
Running a simulation at 60/30 (high fps, low step rate) will make the world appear "fast". That is, the objects will fall faster than at 60/60.
Running a simulation at 30/60 will make the world appear "slow". This is a more common scenario, with your best intentions to run the simulation at 60Hz but the client machine stuck at 30 FPS for some reason. There do not appear to be any inconsistencies with the simulation.
My favorite stress test was Random/Adaptive. That is, a Random FPS and an adaptive step rate. This simulation appears to be able to handle the stress, and performs quite well. The speed matches the 60/60 best case scenario, even though you see jitters due to the sometimes laggy FPS.
Summary
To get consistent performance, you should keep your FPS and world step rate close in values. The step rate shouldn't drop far below 30Hz, though. Best results are obviously 60 FPS and 60 Hz. However, it does appear that Box2D can handle slight fluctuations with step rate.
Please play with the side by side example. What did you learn?
Up Next
The next article in the series explores how to run Box2D inside of a Web worker for better performance.