@react-three/rapier 0.6.4 → 0.6.5

package/dist/declarations/src/Physics.d.ts

@@ -19,6 +19,7 @@ export interface RapierContext {
         colliders: RigidBodyAutoCollider;
     };
     rigidBodyEvents: EventMap;
+    isPaused: boolean;
 }
 export declare const RapierContext: React.Context<RapierContext | undefined>;
 declare type EventMap = Map<ColliderHandle | RigidBodyHandle, {
@@ -51,14 +52,15 @@ interface RapierWorldProps {
      * Setting this to a number (eg. 1/60) will run the
      * simulation at that framerate.
      *
-     * "vary" will run the simulation at a delta-value based
-     * on the users current framerate. This ensures simulations
-     * run at the same percieved speed at all framerates, but
-     * can also lead to instability.
+     * @defaultValue 1/60
+     */
+    timeStep?: number;
+    /**
+     * Maximum number of fixed steps to take per function call.
      *
-     * @defaultValue "vary"
+     * @defaultValue 10
      */
-    timeStep?: number | "vary";
+    maxSubSteps?: number;
     /**
      * Pause the physics simulation
      *

package/dist/react-three-rapier.cjs.dev.js

@@ -469,10 +469,15 @@ const Physics = ({
   colliders: _colliders = "cuboid",
   gravity: _gravity = [0, -9.81, 0],
   children,
-  timeStep: _timeStep = "vary",
+  timeStep: _timeStep = 1 / 60,
+  maxSubSteps: _maxSubSteps = 10,
   paused: _paused = false
 }) => {
   const rapier = useAsset.useAsset(importRapier);
+  const [isPaused, setIsPaused] = React.useState(_paused);
+  React.useEffect(() => {
+    setIsPaused(_paused);
+  }, [_paused]);
   const worldRef = React.useRef();
   const getWorldRef = React.useRef(() => {
     if (!worldRef.current) {
@@ -492,7 +497,6 @@ const Physics = ({
     return () => {
       if (world) {
         world.free();
-        worldRef.current = undefined;
       }
     };
   }, []); // Update gravity
@@ -504,22 +508,46 @@ const Physics = ({
       world.gravity = vectorArrayToVector3(_gravity);
     }
   }, [_gravity]);
-  const time = React.useRef(performance.now());
-  fiber.useFrame(context => {
+  const [steppingState] = React.useState({
+    time: 0,
+    lastTime: 0,
+    accumulator: 0
+  });
+  fiber.useFrame((_, delta) => {
     const world = worldRef.current;
-    if (!world) return; // Set timestep to current delta, to allow for variable frame rates
-    // We cap the delta at 100, so that the physics simulation doesn't get wild
-
-    const now = performance.now();
-    const delta = Math.min(100, now - time.current);
-
-    if (_timeStep === "vary") {
-      world.timestep = delta / 1000;
-    } else {
-      world.timestep = _timeStep;
+    if (!world) return;
+    world.timestep = _timeStep;
+    /**
+     * Fixed timeStep simulation progression
+     * @see https://gafferongames.com/post/fix_your_timestep/ 
+    */
+
+    let previousTranslations = {}; // don't step time forwards if paused
+
+    const nowTime = steppingState.time += _paused ? 0 : delta * 1000;
+    const timeStepMs = _timeStep * 1000;
+    const timeSinceLast = nowTime - steppingState.lastTime;
+    steppingState.lastTime = nowTime;
+    steppingState.accumulator += timeSinceLast;
+
+    if (!_paused) {
+      let subSteps = 0;
+
+      while (steppingState.accumulator >= timeStepMs && subSteps < _maxSubSteps) {
+        // Collect previous state
+        world.bodies.forEach(b => {
+          previousTranslations[b.handle] = {
+            rotation: b.rotation(),
+            translation: b.translation()
+          };
+        });
+        world.step(eventQueue);
+        subSteps++;
+        steppingState.accumulator -= timeStepMs;
+      }
     }
 
-    if (!_paused) world.step(eventQueue); // Update meshes
+    const interpolationAlpha = steppingState.accumulator % timeStepMs / timeStepMs; // Update meshes
 
     rigidBodyStates.forEach((state, handle) => {
       const rigidBody = world.getRigidBody(handle);
@@ -545,7 +573,12 @@ const Physics = ({
         return;
       }
 
-      state.setMatrix(_matrix4.compose(rapierVector3ToVector3(rigidBody.translation()), rapierQuaternionToQuaternion(rigidBody.rotation()), state.worldScale).premultiply(state.invertedMatrixWorld));
+      let oldState = previousTranslations[rigidBody.handle];
+      let newTranslation = rapierVector3ToVector3(rigidBody.translation());
+      let newRotation = rapierQuaternionToQuaternion(rigidBody.rotation());
+      let interpolatedTranslation = oldState ? rapierVector3ToVector3(oldState.translation).lerp(newTranslation, interpolationAlpha) : newTranslation;
+      let interpolatedRotation = oldState ? rapierQuaternionToQuaternion(oldState.rotation).slerp(newRotation, interpolationAlpha) : newRotation;
+      state.setMatrix(_matrix4.compose(interpolatedTranslation, interpolatedRotation, state.worldScale).premultiply(state.invertedMatrixWorld));
 
       if (state.mesh instanceof three.InstancedMesh) {
         state.mesh.instanceMatrix.needsUpdate = true;
@@ -595,7 +628,6 @@ const Physics = ({
         });
       }
     });
-    time.current = now;
   });
   const api = React.useMemo(() => createWorldApi(getWorldRef), []);
   const context = React.useMemo(() => ({
@@ -607,8 +639,9 @@ const Physics = ({
     },
     colliderMeshes,
     rigidBodyStates,
-    rigidBodyEvents
-  }), []);
+    rigidBodyEvents,
+    isPaused
+  }), [isPaused]);
   return /*#__PURE__*/React__default["default"].createElement(RapierContext.Provider, {
     value: context
   }, children);

package/dist/react-three-rapier.cjs.prod.js

@@ -469,10 +469,15 @@ const Physics = ({
   colliders: _colliders = "cuboid",
   gravity: _gravity = [0, -9.81, 0],
   children,
-  timeStep: _timeStep = "vary",
+  timeStep: _timeStep = 1 / 60,
+  maxSubSteps: _maxSubSteps = 10,
   paused: _paused = false
 }) => {
   const rapier = useAsset.useAsset(importRapier);
+  const [isPaused, setIsPaused] = React.useState(_paused);
+  React.useEffect(() => {
+    setIsPaused(_paused);
+  }, [_paused]);
   const worldRef = React.useRef();
   const getWorldRef = React.useRef(() => {
     if (!worldRef.current) {
@@ -492,7 +497,6 @@ const Physics = ({
     return () => {
       if (world) {
         world.free();
-        worldRef.current = undefined;
       }
     };
   }, []); // Update gravity
@@ -504,22 +508,46 @@ const Physics = ({
       world.gravity = vectorArrayToVector3(_gravity);
     }
   }, [_gravity]);
-  const time = React.useRef(performance.now());
-  fiber.useFrame(context => {
+  const [steppingState] = React.useState({
+    time: 0,
+    lastTime: 0,
+    accumulator: 0
+  });
+  fiber.useFrame((_, delta) => {
     const world = worldRef.current;
-    if (!world) return; // Set timestep to current delta, to allow for variable frame rates
-    // We cap the delta at 100, so that the physics simulation doesn't get wild
-
-    const now = performance.now();
-    const delta = Math.min(100, now - time.current);
-
-    if (_timeStep === "vary") {
-      world.timestep = delta / 1000;
-    } else {
-      world.timestep = _timeStep;
+    if (!world) return;
+    world.timestep = _timeStep;
+    /**
+     * Fixed timeStep simulation progression
+     * @see https://gafferongames.com/post/fix_your_timestep/ 
+    */
+
+    let previousTranslations = {}; // don't step time forwards if paused
+
+    const nowTime = steppingState.time += _paused ? 0 : delta * 1000;
+    const timeStepMs = _timeStep * 1000;
+    const timeSinceLast = nowTime - steppingState.lastTime;
+    steppingState.lastTime = nowTime;
+    steppingState.accumulator += timeSinceLast;
+
+    if (!_paused) {
+      let subSteps = 0;
+
+      while (steppingState.accumulator >= timeStepMs && subSteps < _maxSubSteps) {
+        // Collect previous state
+        world.bodies.forEach(b => {
+          previousTranslations[b.handle] = {
+            rotation: b.rotation(),
+            translation: b.translation()
+          };
+        });
+        world.step(eventQueue);
+        subSteps++;
+        steppingState.accumulator -= timeStepMs;
+      }
     }
 
-    if (!_paused) world.step(eventQueue); // Update meshes
+    const interpolationAlpha = steppingState.accumulator % timeStepMs / timeStepMs; // Update meshes
 
     rigidBodyStates.forEach((state, handle) => {
       const rigidBody = world.getRigidBody(handle);
@@ -545,7 +573,12 @@ const Physics = ({
         return;
       }
 
-      state.setMatrix(_matrix4.compose(rapierVector3ToVector3(rigidBody.translation()), rapierQuaternionToQuaternion(rigidBody.rotation()), state.worldScale).premultiply(state.invertedMatrixWorld));
+      let oldState = previousTranslations[rigidBody.handle];
+      let newTranslation = rapierVector3ToVector3(rigidBody.translation());
+      let newRotation = rapierQuaternionToQuaternion(rigidBody.rotation());
+      let interpolatedTranslation = oldState ? rapierVector3ToVector3(oldState.translation).lerp(newTranslation, interpolationAlpha) : newTranslation;
+      let interpolatedRotation = oldState ? rapierQuaternionToQuaternion(oldState.rotation).slerp(newRotation, interpolationAlpha) : newRotation;
+      state.setMatrix(_matrix4.compose(interpolatedTranslation, interpolatedRotation, state.worldScale).premultiply(state.invertedMatrixWorld));
 
       if (state.mesh instanceof three.InstancedMesh) {
         state.mesh.instanceMatrix.needsUpdate = true;
@@ -595,7 +628,6 @@ const Physics = ({
         });
       }
     });
-    time.current = now;
   });
   const api = React.useMemo(() => createWorldApi(getWorldRef), []);
   const context = React.useMemo(() => ({
@@ -607,8 +639,9 @@ const Physics = ({
     },
     colliderMeshes,
     rigidBodyStates,
-    rigidBodyEvents
-  }), []);
+    rigidBodyEvents,
+    isPaused
+  }), [isPaused]);
   return /*#__PURE__*/React__default["default"].createElement(RapierContext.Provider, {
     value: context
   }, children);

package/dist/react-three-rapier.esm.js

@@ -1,6 +1,6 @@
 import { ColliderDesc, ActiveEvents, RigidBodyDesc, CoefficientCombineRule, EventQueue, ShapeType } from '@dimforge/rapier3d-compat';
 export { CoefficientCombineRule, Collider as RapierCollider, RigidBody as RapierRigidBody } from '@dimforge/rapier3d-compat';
-import React, { useRef, useState, useEffect, useMemo, createContext, useContext, forwardRef, useImperativeHandle, memo, useLayoutEffect } from 'react';
+import React, { useState, useEffect, useRef, useMemo, createContext, useContext, forwardRef, useImperativeHandle, memo, useLayoutEffect } from 'react';
 import { useAsset } from 'use-asset';
 import { useFrame } from '@react-three/fiber';
 import { Quaternion, Euler, Vector3, Object3D, Matrix4, InstancedMesh, CylinderBufferGeometry, BufferGeometry, BufferAttribute, SphereBufferGeometry, BoxBufferGeometry, DynamicDrawUsage } from 'three';
@@ -444,10 +444,15 @@ const Physics = ({
   colliders: _colliders = "cuboid",
   gravity: _gravity = [0, -9.81, 0],
   children,
-  timeStep: _timeStep = "vary",
+  timeStep: _timeStep = 1 / 60,
+  maxSubSteps: _maxSubSteps = 10,
   paused: _paused = false
 }) => {
   const rapier = useAsset(importRapier);
+  const [isPaused, setIsPaused] = useState(_paused);
+  useEffect(() => {
+    setIsPaused(_paused);
+  }, [_paused]);
   const worldRef = useRef();
   const getWorldRef = useRef(() => {
     if (!worldRef.current) {
@@ -467,7 +472,6 @@ const Physics = ({
     return () => {
       if (world) {
         world.free();
-        worldRef.current = undefined;
       }
     };
   }, []); // Update gravity
@@ -479,22 +483,46 @@ const Physics = ({
       world.gravity = vectorArrayToVector3(_gravity);
     }
   }, [_gravity]);
-  const time = useRef(performance.now());
-  useFrame(context => {
+  const [steppingState] = useState({
+    time: 0,
+    lastTime: 0,
+    accumulator: 0
+  });
+  useFrame((_, delta) => {
     const world = worldRef.current;
-    if (!world) return; // Set timestep to current delta, to allow for variable frame rates
-    // We cap the delta at 100, so that the physics simulation doesn't get wild
-
-    const now = performance.now();
-    const delta = Math.min(100, now - time.current);
-
-    if (_timeStep === "vary") {
-      world.timestep = delta / 1000;
-    } else {
-      world.timestep = _timeStep;
+    if (!world) return;
+    world.timestep = _timeStep;
+    /**
+     * Fixed timeStep simulation progression
+     * @see https://gafferongames.com/post/fix_your_timestep/ 
+    */
+
+    let previousTranslations = {}; // don't step time forwards if paused
+
+    const nowTime = steppingState.time += _paused ? 0 : delta * 1000;
+    const timeStepMs = _timeStep * 1000;
+    const timeSinceLast = nowTime - steppingState.lastTime;
+    steppingState.lastTime = nowTime;
+    steppingState.accumulator += timeSinceLast;
+
+    if (!_paused) {
+      let subSteps = 0;
+
+      while (steppingState.accumulator >= timeStepMs && subSteps < _maxSubSteps) {
+        // Collect previous state
+        world.bodies.forEach(b => {
+          previousTranslations[b.handle] = {
+            rotation: b.rotation(),
+            translation: b.translation()
+          };
+        });
+        world.step(eventQueue);
+        subSteps++;
+        steppingState.accumulator -= timeStepMs;
+      }
     }
 
-    if (!_paused) world.step(eventQueue); // Update meshes
+    const interpolationAlpha = steppingState.accumulator % timeStepMs / timeStepMs; // Update meshes
 
     rigidBodyStates.forEach((state, handle) => {
       const rigidBody = world.getRigidBody(handle);
@@ -520,7 +548,12 @@ const Physics = ({
         return;
       }
 
-      state.setMatrix(_matrix4.compose(rapierVector3ToVector3(rigidBody.translation()), rapierQuaternionToQuaternion(rigidBody.rotation()), state.worldScale).premultiply(state.invertedMatrixWorld));
+      let oldState = previousTranslations[rigidBody.handle];
+      let newTranslation = rapierVector3ToVector3(rigidBody.translation());
+      let newRotation = rapierQuaternionToQuaternion(rigidBody.rotation());
+      let interpolatedTranslation = oldState ? rapierVector3ToVector3(oldState.translation).lerp(newTranslation, interpolationAlpha) : newTranslation;
+      let interpolatedRotation = oldState ? rapierQuaternionToQuaternion(oldState.rotation).slerp(newRotation, interpolationAlpha) : newRotation;
+      state.setMatrix(_matrix4.compose(interpolatedTranslation, interpolatedRotation, state.worldScale).premultiply(state.invertedMatrixWorld));
 
       if (state.mesh instanceof InstancedMesh) {
         state.mesh.instanceMatrix.needsUpdate = true;
@@ -570,7 +603,6 @@ const Physics = ({
         });
       }
     });
-    time.current = now;
   });
   const api = useMemo(() => createWorldApi(getWorldRef), []);
   const context = useMemo(() => ({
@@ -582,8 +614,9 @@ const Physics = ({
     },
     colliderMeshes,
     rigidBodyStates,
-    rigidBodyEvents
-  }), []);
+    rigidBodyEvents,
+    isPaused
+  }), [isPaused]);
   return /*#__PURE__*/React.createElement(RapierContext.Provider, {
     value: context
   }, children);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/rapier",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "source": "src/index.ts",
   "main": "dist/react-three-rapier.cjs.js",
   "module": "dist/react-three-rapier.esm.js",

package/readme.md

@@ -251,6 +251,7 @@ In order, but also not necessarily:
 - [x] Collision events
 - [x] Colliders outside RigidBodies
 - [x] InstancedMesh support
+- [x] Timestep improvements for determinism
 - [ ] Normalize and improve collision events (add events to single Colliders, InstancedRigidBodies, etc)
 - [ ] Docs
 - [ ] CodeSandbox examples