Cannon-es world moves in slow motion with threejs in some devices

Questions
1

Has someone encountered this problem? Sometimes my cannon-es world which is merged with a threejs scene moves in slow motion for some reason? Can someone guide me as to why this is happening?

2

Make sure to run loop of physics separately (using setInterval) from the rendering loop. Physics has to be run framerate-independent, otherwise you get different simulation speeds on different devices.

3

@mjurczyk , do you mean something like this -

		const maxSubSteps = 3;

		function updatePhysics() {
			world.step(fixedTimeStep, fixedTimeStep * maxSubSteps);
		}

		setInterval(updatePhysics, 1000 * fixedTimeStep);
4

The problem here imo is the fixedTimeStep. In a normal physics engine setup, this should be the timeDelta from previous frame.

So something like:

//Global to keep track of previous frame time
let lastTime;

...

in your animation loop fn:
{
  let now = performance.now();
  if(!lastTime)
       lastTime=now;
  let deltaT = (now-lastTime) /1000;
  lastTime=now;
  if(deltaT > (1/10)) deltaT = 1/10; // Prevent "spiral of death"
  world.step(1/60,deltaT,maxSubSteps);

related issues: World.step is buggy when attempting to account for variable framerate · Issue #16 · pmndrs/cannon-es · GitHub

But the code I posted is roughly how it should work, and works in havok/ammo.

If you need more deterministic updating, then instead you have to do the substepping yourself:

//Global to keep track of previous frame time
let lastTime;
let stepAccumulator = 0; //Keep track of fractional steps remaining since last frame
...

in your animation loop fn:
{
  let now = performance.now();
  if(!lastTime)
       lastTime=now;
  let deltaT = (now-lastTime) /1000;
  lastTime=now;
  stepAccumulator += (deltaT * (1/60));
  let numSteps = Math.floor(stepAccumulator);
  stepAccumulator-=numSteps;
  if(numSteps > 10) numSteps = 10; // Prevent "spiral of death"
  for(let i=0;i<numSteps;i++)
    world.step(1/60,1/60,maxSubSteps);