@react-three/rapier 0.14.0-rc.1 → 0.14.0-rc.2

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

@@ -1,7 +1,7 @@
 import { ActiveEvents, ColliderDesc, EventQueue, RigidBodyDesc } from '@dimforge/rapier3d-compat';
 export { CoefficientCombineRule, Collider as RapierCollider, RigidBody as RapierRigidBody } from '@dimforge/rapier3d-compat';
-import { useThree, useFrame } from '@react-three/fiber';
-import React, { useRef, useEffect, useMemo, useContext, useState, memo, createContext, useCallback, forwardRef, useImperativeHandle, Fragment } from 'react';
+import { useFrame, useThree } from '@react-three/fiber';
+import React$1, { useRef, useMemo, useEffect, useContext, useState, memo, createContext, useCallback, forwardRef, useImperativeHandle, Fragment } from 'react';
 import { Quaternion, Euler, Vector3, Object3D, Matrix4, MathUtils, BufferAttribute, DynamicDrawUsage } from 'three';
 import { useAsset } from 'use-asset';
 import { mergeVertices, VertexNormalsHelper } from 'three-stdlib';
@@ -153,27 +153,6 @@ function useConst(initialValue) {
   return ref.current.value;
 }
 
-const useRaf = callback => {
-  const cb = useRef(callback);
-  const raf = useRef(0);
-  const lastFrame = useRef(0);
-  useEffect(() => {
-    cb.current = callback;
-  }, [callback]);
-  useEffect(() => {
-    const loop = () => {
-      const now = performance.now();
-      const delta = now - lastFrame.current;
-      raf.current = requestAnimationFrame(loop);
-      cb.current(delta / 1000);
-      lastFrame.current = now;
-    };
-
-    raf.current = requestAnimationFrame(loop);
-    return () => cancelAnimationFrame(raf.current);
-  }, []);
-};
-
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -681,12 +660,67 @@ const Attractor = /*#__PURE__*/memo(props => {
       attractorStates.delete(uuid);
     };
   }, [props]);
-  return /*#__PURE__*/React.createElement("object3D", {
+  return /*#__PURE__*/React$1.createElement("object3D", {
     ref: object,
     position: position
   });
 });
 
+const useRaf = callback => {
+  const cb = useRef(callback);
+  const raf = useRef(0);
+  const lastFrame = useRef(0);
+  useEffect(() => {
+    cb.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    const loop = () => {
+      const now = performance.now();
+      const delta = now - lastFrame.current;
+      raf.current = requestAnimationFrame(loop);
+      cb.current(delta / 1000);
+      lastFrame.current = now;
+    };
+
+    raf.current = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(raf.current);
+  }, []);
+};
+
+const UseFrameStepper = ({
+  onStep,
+  updatePriority
+}) => {
+  useFrame((_, dt) => {
+    onStep(dt);
+  }, updatePriority);
+  return null;
+};
+
+const RafStepper = ({
+  onStep
+}) => {
+  useRaf(dt => {
+    onStep(dt);
+  });
+  return null;
+};
+
+const FrameStepper = ({
+  onStep,
+  type,
+  updatePriority
+}) => {
+  return type === "independent" ? /*#__PURE__*/React.createElement(RafStepper, {
+    onStep: onStep
+  }) : /*#__PURE__*/React.createElement(UseFrameStepper, {
+    onStep: onStep,
+    updatePriority: updatePriority
+  });
+};
+
+var FrameStepper$1 = /*#__PURE__*/memo(FrameStepper);
+
 const rapierContext = /*#__PURE__*/createContext(undefined);
 
 const getCollisionPayloadFromSource = (target, other) => {
@@ -728,7 +762,9 @@ const Physics = ({
   children,
   timeStep: _timeStep = 1 / 60,
   paused: _paused = false,
-  interpolate: _interpolate = true
+  interpolate: _interpolate = true,
+  updatePriority,
+  updateLoop: _updateLoop = "follow"
 }) => {
   const rapier = useAsset(importRapier);
   const {
@@ -1014,13 +1050,10 @@ const Physics = ({
         maxForceMagnitude: event.maxForceMagnitude()
       }));
     });
-    world.forEachActiveRigidBody(body => {
+    world.forEachActiveRigidBody(() => {
       invalidate();
     });
   }, [_paused, _timeStep, _interpolate]);
-  useRaf(dt => {
-    if (!_paused) step(dt);
-  });
   const context = useMemo(() => ({
     rapier,
     world: api,
@@ -1038,9 +1071,18 @@ const Physics = ({
     isPaused: _paused,
     step
   }), [_paused, step]);
-  return /*#__PURE__*/React.createElement(rapierContext.Provider, {
+  const stepCallback = useCallback(delta => {
+    if (!_paused) {
+      step(delta);
+    }
+  }, [_paused, step]);
+  return /*#__PURE__*/React$1.createElement(rapierContext.Provider, {
     value: context
-  }, children);
+  }, /*#__PURE__*/React$1.createElement(FrameStepper$1, {
+    onStep: stepCallback,
+    type: _updateLoop,
+    updatePriority: updatePriority
+  }), children);
 };
 
 function _extends() {
@@ -1176,7 +1218,7 @@ const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwarded
   }, [props, rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options]);
   useUpdateColliderOptions(getInstance, mergedProps, colliderStates);
   useColliderEvents(getInstance, mergedProps, colliderEvents, getActiveCollisionEventsFromProps(rigidBodyContext === null || rigidBodyContext === void 0 ? void 0 : rigidBodyContext.options));
-  return /*#__PURE__*/React.createElement("object3D", {
+  return /*#__PURE__*/React$1.createElement("object3D", {
     position: position,
     rotation: rotation,
     quaternion: quaternion,
@@ -1190,8 +1232,8 @@ const AnyCollider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwarded
  * A cuboid collider shape
  * @category Colliders
  */
-const CuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const CuboidCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "cuboid",
     ref: ref
   }));
@@ -1201,8 +1243,8 @@ const CuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const RoundCuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const RoundCuboidCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "roundCuboid",
     ref: ref
   }));
@@ -1212,8 +1254,8 @@ const RoundCuboidCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const BallCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const BallCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "ball",
     ref: ref
   }));
@@ -1223,8 +1265,8 @@ const BallCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const CapsuleCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const CapsuleCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "capsule",
     ref: ref
   }));
@@ -1234,8 +1276,8 @@ const CapsuleCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const HeightfieldCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const HeightfieldCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "heightfield",
     ref: ref
   }));
@@ -1245,8 +1287,8 @@ const HeightfieldCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const TrimeshCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const TrimeshCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "trimesh",
     ref: ref
   }));
@@ -1256,8 +1298,8 @@ const TrimeshCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const ConeCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const ConeCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "cone",
     ref: ref
   }));
@@ -1267,8 +1309,8 @@ const ConeCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const CylinderCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const CylinderCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "cylinder",
     ref: ref
   }));
@@ -1278,8 +1320,8 @@ const CylinderCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
  * @category Colliders
  */
 
-const ConvexHullCollider = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(AnyCollider, _extends({}, props, {
+const ConvexHullCollider = /*#__PURE__*/React$1.forwardRef((props, ref) => {
+  return /*#__PURE__*/React$1.createElement(AnyCollider, _extends({}, props, {
     shape: "convexHull",
     ref: ref
   }));
@@ -1507,16 +1549,16 @@ const RigidBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, forwardedRe
       options: mergedOptions
     };
   }, [mergedOptions]);
-  return /*#__PURE__*/React.createElement(RigidBodyContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(RigidBodyContext.Provider, {
     value: contextValue
-  }, /*#__PURE__*/React.createElement("object3D", _extends({
+  }, /*#__PURE__*/React$1.createElement("object3D", _extends({
     ref: ref
   }, objectProps, {
     position: position,
     rotation: rotation,
     quaternion: quaternion,
     scale: scale
-  }), children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React.createElement(AnyCollider, _extends({
+  }), children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React$1.createElement(AnyCollider, _extends({
     key: index
   }, colliderProps)))));
 }));
@@ -1545,12 +1587,12 @@ const MeshCollider = /*#__PURE__*/memo(props => {
     });
   }, [physicsOptions, options]);
   const childColliderProps = useChildColliderProps(object, mergedOptions, false);
-  return /*#__PURE__*/React.createElement("object3D", {
+  return /*#__PURE__*/React$1.createElement("object3D", {
     ref: object,
     userData: {
       r3RapierType: "MeshCollider"
     }
-  }, children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React.createElement(AnyCollider, _extends({
+  }, children, childColliderProps.map((colliderProps, index) => /*#__PURE__*/React$1.createElement(AnyCollider, _extends({
     key: index
   }, colliderProps))));
 });
@@ -1603,13 +1645,13 @@ const AttractorHelper = props => {
       (_normalsHelper$curren = normalsHelper.current) === null || _normalsHelper$curren === void 0 ? void 0 : _normalsHelper$curren.update();
     }
   });
-  return /*#__PURE__*/React.createElement("mesh", {
+  return /*#__PURE__*/React$1.createElement("mesh", {
     ref: ref,
     position: props.object.position,
     frustumCulled: false
-  }, /*#__PURE__*/React.createElement("sphereGeometry", {
+  }, /*#__PURE__*/React$1.createElement("sphereGeometry", {
     args: [0.2, 6, 6]
-  }), /*#__PURE__*/React.createElement("meshBasicMaterial", {
+  }), /*#__PURE__*/React$1.createElement("meshBasicMaterial", {
     color: color,
     wireframe: true
   }));
@@ -1635,13 +1677,13 @@ const Debug = /*#__PURE__*/memo(() => {
       currMap.current = new Map(attractorStates);
     }
   });
-  return /*#__PURE__*/React.createElement("group", null, /*#__PURE__*/React.createElement("lineSegments", {
+  return /*#__PURE__*/React$1.createElement("group", null, /*#__PURE__*/React$1.createElement("lineSegments", {
     ref: ref,
     frustumCulled: false
-  }, /*#__PURE__*/React.createElement("lineBasicMaterial", {
+  }, /*#__PURE__*/React$1.createElement("lineBasicMaterial", {
     color: 0xffffff,
     vertexColors: true
-  }), /*#__PURE__*/React.createElement("bufferGeometry", null)), attractors.map((attractor, i) => /*#__PURE__*/React.createElement(AttractorHelper, _extends({
+  }), /*#__PURE__*/React$1.createElement("bufferGeometry", null)), attractors.map((attractor, i) => /*#__PURE__*/React$1.createElement(AttractorHelper, _extends({
     key: attractor.object.uuid
   }, attractor))));
 });
@@ -1710,21 +1752,21 @@ const InstancedRigidBodies = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props,
     return state;
   };
 
-  return /*#__PURE__*/React.createElement("object3D", _extends({
+  return /*#__PURE__*/React$1.createElement("object3D", _extends({
     ref: object
   }, rigidBodyProps, {
     position: position,
     rotation: rotation,
     quaternion: quaternion,
     scale: scale
-  }), /*#__PURE__*/React.createElement("object3D", {
+  }), /*#__PURE__*/React$1.createElement("object3D", {
     ref: instancedWrapper
-  }, children), instances === null || instances === void 0 ? void 0 : instances.map((instance, index) => /*#__PURE__*/React.createElement(RigidBody, _extends({}, rigidBodyProps, instance, {
+  }, children), instances === null || instances === void 0 ? void 0 : instances.map((instance, index) => /*#__PURE__*/React$1.createElement(RigidBody, _extends({}, rigidBodyProps, instance, {
     ref: body => rigidBodyApis.current[index] = body,
     transformState: state => applyInstancedState(state, index)
-  }), /*#__PURE__*/React.createElement(React.Fragment, null, colliderNodes.map((node, index) => /*#__PURE__*/React.createElement(Fragment, {
+  }), /*#__PURE__*/React$1.createElement(React$1.Fragment, null, colliderNodes.map((node, index) => /*#__PURE__*/React$1.createElement(Fragment, {
     key: index
-  }, node)), childColliderProps.map((colliderProps, colliderIndex) => /*#__PURE__*/React.createElement(AnyCollider, _extends({
+  }, node)), childColliderProps.map((colliderProps, colliderIndex) => /*#__PURE__*/React$1.createElement(AnyCollider, _extends({
     key: colliderIndex
   }, colliderProps)))))));
 }));

package/package.json

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

package/readme.md

@@ -838,4 +838,14 @@ step(1 / 60);
 ```
 
 ### On-demand rendering
-`@react-three/rapier` runs the physics simulation independently from the render loop, and will tell `@react-three/fiber` to render if the scene has active (non-sleeping) RigidBodies. This allows you to use the `<Canvas frameloop="demand" />` (https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering) strategy to only render the scene when needed.
+By default `@react-three/rapier` will update the physics simulation when a frame renders. This is fine for most cases, but if you want to only render the scene when things have changed, you need to run the physics simulation independently from the render loop.
+
+- See https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering, for info on on-demand rendering in `@react-tree/fiber`.
+
+Setting `<Physics updateLoop="independent" />` will make the physics simulation run in it's own `requestAnimationFrame` loop, and call `invalidate` on the canvas only when there are active (moving) bodies.
+
+```tsx
+<Canvas frameloop="demand">
+  <Physics updateLoop="independent">...</Physics>
+</Canvas>
+```