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

package/dist/declarations/src/components/FrameStepper.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { PhysicsProps } from "./Physics";
+interface FrameStepperProps {
+    type?: PhysicsProps["updateLoop"];
+    onStep: (dt: number) => void;
+    updatePriority?: number;
+}
+declare const _default: React.MemoExoticComponent<({ onStep, type, updatePriority }: FrameStepperProps) => JSX.Element>;
+export default _default;

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

@@ -147,6 +147,30 @@ export interface PhysicsProps {
      * @defaultValue true
      **/
     interpolate?: boolean;
+    /**
+     * The update priority at which the physics simulation should run.
+     * Only used when `updateLoop` is set to "follow".
+     *
+     * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#taking-over-the-render-loop
+     * @defaultValue undefined
+     */
+    updatePriority?: number;
+    /**
+     * Set the update loop strategy for the physics world.
+     *
+     * If set to "follow", the physics world will be stepped
+     * in a `useFrame` callback, managed by @react-three/fiber.
+     * You can use `updatePriority` prop to manage the scheduling.
+     *
+     * If set to "independent", the physics world will be stepped
+     * in a separate loop, not tied to the render loop.
+     * This is useful when using the "demand" `frameloop` strategy for the
+     * @react-three/fiber `<Canvas />`.
+     *
+     * @see https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#on-demand-rendering
+     * @defaultValue "follow"
+     */
+    updateLoop?: "follow" | "independent";
 }
 /**
  * The main physics component used to create a physics world.

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

@@ -178,27 +178,6 @@ function useConst(initialValue) {
   return ref.current.value;
 }
 
-const useRaf = callback => {
-  const cb = React.useRef(callback);
-  const raf = React.useRef(0);
-  const lastFrame = React.useRef(0);
-  React.useEffect(() => {
-    cb.current = callback;
-  }, [callback]);
-  React.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 = {};
@@ -712,6 +691,61 @@ const Attractor = /*#__PURE__*/React.memo(props => {
   });
 });
 
+const useRaf = callback => {
+  const cb = React.useRef(callback);
+  const raf = React.useRef(0);
+  const lastFrame = React.useRef(0);
+  React.useEffect(() => {
+    cb.current = callback;
+  }, [callback]);
+  React.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
+}) => {
+  fiber.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__default["default"].createElement(RafStepper, {
+    onStep: onStep
+  }) : /*#__PURE__*/React__default["default"].createElement(UseFrameStepper, {
+    onStep: onStep,
+    updatePriority: updatePriority
+  });
+};
+
+var FrameStepper$1 = /*#__PURE__*/React.memo(FrameStepper);
+
 const rapierContext = /*#__PURE__*/React.createContext(undefined);
 
 const getCollisionPayloadFromSource = (target, other) => {
@@ -753,7 +787,9 @@ const Physics = ({
   children,
   timeStep: _timeStep = 1 / 60,
   paused: _paused = false,
-  interpolate: _interpolate = true
+  interpolate: _interpolate = true,
+  updatePriority,
+  updateLoop: _updateLoop = "follow"
 }) => {
   const rapier = useAsset.useAsset(importRapier);
   const {
@@ -1039,13 +1075,10 @@ const Physics = ({
         maxForceMagnitude: event.maxForceMagnitude()
       }));
     });
-    world.forEachActiveRigidBody(body => {
+    world.forEachActiveRigidBody(() => {
       invalidate();
     });
   }, [_paused, _timeStep, _interpolate]);
-  useRaf(dt => {
-    if (!_paused) step(dt);
-  });
   const context = React.useMemo(() => ({
     rapier,
     world: api,
@@ -1063,9 +1096,18 @@ const Physics = ({
     isPaused: _paused,
     step
   }), [_paused, step]);
+  const stepCallback = React.useCallback(delta => {
+    if (!_paused) {
+      step(delta);
+    }
+  }, [_paused, step]);
   return /*#__PURE__*/React__default["default"].createElement(rapierContext.Provider, {
     value: context
-  }, children);
+  }, /*#__PURE__*/React__default["default"].createElement(FrameStepper$1, {
+    onStep: stepCallback,
+    type: _updateLoop,
+    updatePriority: updatePriority
+  }), children);
 };
 
 function _extends() {

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

@@ -178,27 +178,6 @@ function useConst(initialValue) {
   return ref.current.value;
 }
 
-const useRaf = callback => {
-  const cb = React.useRef(callback);
-  const raf = React.useRef(0);
-  const lastFrame = React.useRef(0);
-  React.useEffect(() => {
-    cb.current = callback;
-  }, [callback]);
-  React.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 = {};
@@ -712,6 +691,61 @@ const Attractor = /*#__PURE__*/React.memo(props => {
   });
 });
 
+const useRaf = callback => {
+  const cb = React.useRef(callback);
+  const raf = React.useRef(0);
+  const lastFrame = React.useRef(0);
+  React.useEffect(() => {
+    cb.current = callback;
+  }, [callback]);
+  React.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
+}) => {
+  fiber.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__default["default"].createElement(RafStepper, {
+    onStep: onStep
+  }) : /*#__PURE__*/React__default["default"].createElement(UseFrameStepper, {
+    onStep: onStep,
+    updatePriority: updatePriority
+  });
+};
+
+var FrameStepper$1 = /*#__PURE__*/React.memo(FrameStepper);
+
 const rapierContext = /*#__PURE__*/React.createContext(undefined);
 
 const getCollisionPayloadFromSource = (target, other) => {
@@ -753,7 +787,9 @@ const Physics = ({
   children,
   timeStep: _timeStep = 1 / 60,
   paused: _paused = false,
-  interpolate: _interpolate = true
+  interpolate: _interpolate = true,
+  updatePriority,
+  updateLoop: _updateLoop = "follow"
 }) => {
   const rapier = useAsset.useAsset(importRapier);
   const {
@@ -1039,13 +1075,10 @@ const Physics = ({
         maxForceMagnitude: event.maxForceMagnitude()
       }));
     });
-    world.forEachActiveRigidBody(body => {
+    world.forEachActiveRigidBody(() => {
       invalidate();
     });
   }, [_paused, _timeStep, _interpolate]);
-  useRaf(dt => {
-    if (!_paused) step(dt);
-  });
   const context = React.useMemo(() => ({
     rapier,
     world: api,
@@ -1063,9 +1096,18 @@ const Physics = ({
     isPaused: _paused,
     step
   }), [_paused, step]);
+  const stepCallback = React.useCallback(delta => {
+    if (!_paused) {
+      step(delta);
+    }
+  }, [_paused, step]);
   return /*#__PURE__*/React__default["default"].createElement(rapierContext.Provider, {
     value: context
-  }, children);
+  }, /*#__PURE__*/React__default["default"].createElement(FrameStepper$1, {
+    onStep: stepCallback,
+    type: _updateLoop,
+    updatePriority: updatePriority
+  }), children);
 };
 
 function _extends() {

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, { 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 = {};
@@ -687,6 +666,61 @@ const Attractor = /*#__PURE__*/memo(props => {
   });
 });
 
+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]);
+  const stepCallback = useCallback(delta => {
+    if (!_paused) {
+      step(delta);
+    }
+  }, [_paused, step]);
   return /*#__PURE__*/React.createElement(rapierContext.Provider, {
     value: context
-  }, children);
+  }, /*#__PURE__*/React.createElement(FrameStepper$1, {
+    onStep: stepCallback,
+    type: _updateLoop,
+    updatePriority: updatePriority
+  }), children);
 };
 
 function _extends() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/rapier",
-  "version": "0.14.0-rc.1",
+  "version": "0.14.0-rc.3",
   "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>
+```