How to sync Rapier physics to ThreeJS (or screen/browser) Refresh Rate?

I have used Rapier in a ThreeJS project and it works quite well. However, I’m wondering if anyone has done this and if so how they would sync the frame rates.

ThreeJS will naturally refresh with the screen Hz if it is able to keep up and lag if not. If we want the Rapier component to keep sync, how can we do this?

Rapier says the frame rate is set by dt inside of “IntegrationParameters”:

I also see the IntegrationParameters has a constructor:

So is this something we are supposed to create an instance of, modify the dt, and then set into the Rapier world somehow? What would be an example of code to use the “IntegrationParameters”?

My inclination in terms of syncing is that if my ThreeJS loop is:

function animate() {
	
	deltaTime = clock.getDelta(); //.getDelta tells us how much time has passed since the last time we called getDelta. If we call it once, and only once, at the start of each frame, it will tell us how long the previous frame took. 

	//=====================
	//step physics
	//=====================
	if (world !=null){
		world.step();

	}
        //do stuff

	renderer.render( scene, camera );
}

renderer.setAnimationLoop(animate);

Then in theory I could set deltaTime into the Rapier physics sim inside that animate loop each frame, and it would remain synced to my ThreeJS.

Alternatively if setting it every frame would be damaging in some way (too expensive or reset the physics system) then I would want some way to get the screen refresh rate so I can just set that, and listen for any changes in it to reset it if it changes.

Any thoughts? Thanks for any help.

tl;dr:

1) HOW TO SET INTEGRATION PARAMETERS DT INTO RAPIER?
2) HOW TO BEST SYNC THIS TO THREEJS/SCREEN REFRESH RATE?

:grinning:

You can set the world’s timestep property.

const FPS120 = 1/120;
world.timestep = FPS120;

The default timestep is 60 FPS or 0.016, and you can check this SO to get the client refresh rate.

2 Likes