feat: update to @dimforge/rapier3d-compat 0.13.1 (pmndrs#677)

* feat: bump @dimforge/rapier3d-compat to 0.13.1, expose new functionality

* chore: prettier format

* chore: add contact skin demo

* fix: add softCcdPrediction to cleanRigidBodyPropsForCollider

* chore: update changeset

* fix: prettier format

* chore: change @react-three/rapier-addons to depend on @react-three/rapier ^1.3.1

.changeset/little-doors-doubt.md

@@ -0,0 +1,10 @@
+---
+"@react-three/rapier": minor
+---
+
+feat: bump @dimforge/rapier3d-compat from 0.12.0 to 0.13.1
+
+- Added World prop `lengthUnit` 
+- Renamed World props `allowedLinearError` and `predictionDistance` to `normalizedAllowedLinearError` and `normalizedPredictionDistance`, matching upstream changes
+- Added `softCcdPrediction` RigidBody prop
+- Added `contactSkin` collider prop

demo/src/App.tsx

@@ -21,6 +21,7 @@ import { Colliders } from "./examples/colliders/CollidersExample";
 import { CollisionEventsExample } from "./examples/collision-events/CollisionEventsExample";
 import { ComponentsExample } from "./examples/components/ComponentsExample";
 import { ContactForceEventsExample } from "./examples/contact-force-events/ContactForceEventsExample";
+import { ContactSkinExample } from "./examples/contact-skin/ContactSkinExample";
 import { CradleExample } from "./examples/cradle/CradleExample";
 import { Damping } from "./examples/damping/DampingExample";
 import { DynamicTypeChangeExample } from "./examples/dynamic-type-change/DynamicTypeChangeExample";
@@ -119,7 +120,8 @@ const routes: Record<string, ReactNode> = {
   "immutable-props": <ImmutablePropsExample />,
   snapshot: <SnapshotExample />,
   spring: <SpringExample />,
-  "rope-joint": <RopeJointExample />
+  "rope-joint": <RopeJointExample />,
+  "contact-skin": <ContactSkinExample />
 };
 
 export const App = () => {

demo/src/examples/contact-skin/ContactSkinExample.tsx

@@ -0,0 +1,34 @@
+import { Box, Sphere } from "@react-three/drei";
+import { RapierRigidBody, RigidBody } from "@react-three/rapier";
+import { useRef } from "react";
+
+const Ball = () => {
+  const rb = useRef<RapierRigidBody>(null);
+
+  return (
+    <RigidBody ref={rb} colliders="ball" position={[0, 1, 0]} contactSkin={0.5}>
+      <Sphere castShadow>
+        <meshStandardMaterial color="orange" />
+      </Sphere>
+    </RigidBody>
+  );
+};
+
+const Floor = () => {
+  return (
+    <RigidBody type="fixed" colliders="cuboid" position={[0, -2, 0]}>
+      <Box args={[20, 1, 20]} receiveShadow>
+        <meshStandardMaterial color="white" />
+      </Box>
+    </RigidBody>
+  );
+};
+
+export const ContactSkinExample = () => {
+  return (
+    <group>
+      <Ball />
+      <Floor />
+    </group>
+  );
+};

packages/react-three-rapier-addons/package.json

@@ -7,7 +7,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@react-three/fiber": "*",
-    "@react-three/rapier": "1.3.1",
+    "@react-three/rapier": "^1.3.1",
     "react": ">=18.0.0",
     "three": "*"
   },
@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@react-three/fiber": "8.9.1",
-    "@react-three/rapier": "1.3.1",
+    "@react-three/rapier": "^1.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "three": "0.146.0"

packages/react-three-rapier/package.json

@@ -29,7 +29,7 @@
     "three": ">=0.139.0"
   },
   "dependencies": {
-    "@dimforge/rapier3d-compat": "0.12.0",
+    "@dimforge/rapier3d-compat": "0.13.1",
     "suspend-react": "^0.1.3",
     "three-stdlib": "2.23.9"
   },

packages/react-three-rapier/src/components/Physics.tsx

@@ -318,6 +318,16 @@ export interface PhysicsProps {
    */
   erp?: number;
 
+  /**
+   * The approximate size of most dynamic objects in the scene.
+   *
+   * This value is used internally to estimate some length-based tolerance.
+   * This value can be understood as the number of units-per-meter in your physical world compared to a human-sized world in meter.
+   *
+   * @defaultValue 1
+   */
+  lengthUnit?: number;
+
   /**
    * Set the base automatic colliders for this physics world
    * All Meshes inside RigidBodies will generate a collider
@@ -407,7 +417,8 @@ export const Physics: FC<PhysicsProps> = (props) => {
     numInternalPgsIterations = 1,
     minIslandSize = 128,
     maxCcdSubsteps = 1,
-    erp = 0.8
+    erp = 0.8,
+    lengthUnit = 1
   } = props;
   const rapier = suspend(importRapier, ["@react-thee/rapier", importRapier]);
   const { invalidate } = useThree();
@@ -451,11 +462,14 @@ export const Physics: FC<PhysicsProps> = (props) => {
     worldProxy.integrationParameters.numInternalPgsIterations =
       numInternalPgsIterations;
 
-    worldProxy.integrationParameters.allowedLinearError = allowedLinearError;
+    worldProxy.integrationParameters.normalizedAllowedLinearError =
+      allowedLinearError;
     worldProxy.integrationParameters.minIslandSize = minIslandSize;
     worldProxy.integrationParameters.maxCcdSubsteps = maxCcdSubsteps;
-    worldProxy.integrationParameters.predictionDistance = predictionDistance;
+    worldProxy.integrationParameters.normalizedPredictionDistance =
+      predictionDistance;
     worldProxy.integrationParameters.erp = erp;
+    worldProxy.lengthUnit = lengthUnit;
   }, [
     worldProxy,
     ...gravity,
@@ -466,7 +480,8 @@ export const Physics: FC<PhysicsProps> = (props) => {
     minIslandSize,
     maxCcdSubsteps,
     predictionDistance,
-    erp
+    erp,
+    lengthUnit
   ]);
 
   const getSourceFromColliderHandle = useCallback((handle: ColliderHandle) => {

packages/react-three-rapier/src/hooks/joints.ts

@@ -5,7 +5,7 @@ import {
   RevoluteImpulseJoint,
   RopeImpulseJoint,
   SphericalImpulseJoint,
-  SpringImpulseJoint,
+  SpringImpulseJoint
 } from "@dimforge/rapier3d-compat";
 import { RefObject, useRef } from "react";
 import {
@@ -17,7 +17,7 @@ import {
   SphericalJointParams,
   SpringJointParams,
   UseImpulseJoint,
-  useRapier,
+  useRapier
 } from "..";
 import {
   vector3ToRapierVector,

packages/react-three-rapier/src/types.ts

@@ -250,6 +250,19 @@ export interface ColliderOptions<ColliderArgs extends Array<unknown>> {
     angularInertiaLocalFrame: Rotation;
   };
 
+  /**
+   * The contact skin of the collider.
+   *
+   * The contact skin acts as if the collider was enlarged with a skin of width contactSkin around it, keeping objects further apart when colliding.
+   *
+   * A non-zero contact skin can increase performance, and in some cases, stability.
+   * However it creates a small gap between colliding object (equal to the sum of their skin).
+   * If the skin is sufficiently small, this might not be visually significant or can be hidden by the rendering assets.
+   *
+   * @defaultValue 0
+   */
+  contactSkin?: number;
+
   /**
    * Sets whether or not this collider is a sensor.
    */
@@ -362,6 +375,21 @@ export interface RigidBodyOptions extends ColliderProps {
    */
   ccd?: boolean;
 
+  /**
+   * The maximum prediction distance Soft Continuous Collision-Detection.
+   *
+   * When set to 0, soft-CCD is disabled.
+   *
+   * Soft-CCD helps prevent tunneling especially of slow-but-thin to moderately fast objects.
+   * The soft CCD prediction distance indicates how far in the object’s path the CCD algorithm is allowed to inspect.
+   * Large values can impact performance badly by increasing the work needed from the broad-phase.
+   *
+   * It is a generally cheaper variant of regular CCD since it relies on predictive constraints instead of shape-cast and substeps.
+   *
+   * @defaultValue 0
+   */
+  softCcdPrediction?: number;
+
   /**
    * Initial position of the RigidBody
    */
@@ -460,10 +488,7 @@ export interface RigidBodyOptions extends ColliderProps {
 }
 
 // Joints
-export type SphericalJointParams = [
-  body1Anchor: Vector3,
-  body2Anchor: Vector3
-];
+export type SphericalJointParams = [body1Anchor: Vector3, body2Anchor: Vector3];
 
 export type FixedJointParams = [
   body1Anchor: Vector3,

packages/react-three-rapier/src/utils/singleton-proxy.ts

@@ -6,13 +6,17 @@
  */
 export const createSingletonProxy = <
   SingletonClass extends object,
-  CreationFn extends () => SingletonClass = () => SingletonClass,
+  CreationFn extends () => SingletonClass = () => SingletonClass
 >(
   /**
    * A function that returns a new instance of the class
    */
   createInstance: CreationFn
-): { proxy: SingletonClass; reset: () => void, set: (newInstance: SingletonClass) => void } => {
+): {
+  proxy: SingletonClass;
+  reset: () => void;
+  set: (newInstance: SingletonClass) => void;
+} => {
   let instance: SingletonClass | undefined;
 
   const handler: ProxyHandler<SingletonClass> = {

packages/react-three-rapier/src/utils/utils-collider.ts

@@ -138,6 +138,9 @@ const mutableColliderOptions: MutableColliderOptions = {
   restitutionCombineRule: (collider, value) => {
     collider.setRestitutionCombineRule(value);
   },
+  contactSkin: (collider, value: number) => {
+    collider.setContactSkin(value);
+  },
   // To make sure the options all mutable options are listed
   quaternion: () => {},
   position: () => {},
@@ -476,6 +479,7 @@ export const cleanRigidBodyPropsForCollider = (props: RigidBodyProps = {}) => {
     canSleep,
     ccd,
     gravityScale,
+    softCcdPrediction,
     ...rest
   } = props;
 

packages/react-three-rapier/src/utils/utils-rigidbody.ts

@@ -114,6 +114,9 @@ export const mutableRigidBodyOptions: MutableRigidBodyOptions = {
   ccd: (rb: RigidBody, value: boolean) => {
     rb.enableCcd(value);
   },
+  softCcdPrediction: (rb: RigidBody, value: number) => {
+    rb.setSoftCcdPrediction(value);
+  },
   userData: (rb: RigidBody, value: { [key: string]: any }) => {
     rb.userData = value;
   },

packages/react-three-rapier/src/utils/utils.ts

@@ -1,12 +1,15 @@
 import { useRef } from "react";
 import {
   Quaternion as RapierQuaternion,
-  Vector3 as RapierVector3,
+  Vector3 as RapierVector3
 } from "@dimforge/rapier3d-compat";
 import { Euler, Quaternion, Vector3 } from "three";
 import { _euler, _quaternion, _vector3 } from "./shared-objects";
 import { RigidBodyTypeString, Vector3Tuple } from "../types";
-import { Vector3 as Vector3Like, Quaternion as QuaternionLike } from "@react-three/fiber";
+import {
+  Vector3 as Vector3Like,
+  Quaternion as QuaternionLike
+} from "@react-three/fiber";
 
 export const vectorArrayToVector3 = (arr: Vector3Tuple) => {
   const [x, y, z] = arr;

packages/react-three-rapier/tests/physics.test.tsx

@@ -67,7 +67,7 @@ describe("physics", () => {
       });
 
       expect(vec3(rigidBody.current?.translation()).toArray()).to.deep.eq([
-        0.6666666269302368, 0.6649635434150696, 0.6666666269302368,
+        0.6666666269302368, 0.6649635434150696, 0.6666666269302368
       ]);
 
       await pause(100);

yarn.lock

@@ -1595,10 +1595,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@dimforge/rapier3d-compat@0.12.0":
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz#7b3365e1dfdc5cd957b45afe920b4ac06c7cd389"
-  integrity sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==
+"@dimforge/rapier3d-compat@0.13.1":
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/@dimforge/rapier3d-compat/-/rapier3d-compat-0.13.1.tgz#d9da32941de5fcfae55ffb6ac26c38539f57ddf4"
+  integrity sha512-SsQ/MTH4Vvs8f62g31iVV1VOmzwNwsJl91rVzafi5B2mCrI2OsQ3VyjJOb4/tvS5VNc6OLjIDgfClcOAkW+O2A==
 
 "@esbuild/[email protected]":
   version "0.17.14"