@react-three/rapier 0.7.7 → 0.8.1

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

@@ -1,13 +1,5 @@
 import { FC } from "react";
 interface DebugProps {
-    /**
-     * The color of the wireframe representing an active collider that is affected by forces and not sleeping.
-     */
-    color?: string;
-    /**
-     * The color of the wireframe representing a static (fixed or kinematic) or sleeping collider.
-     */
-    sleepColor?: string;
 }
 export declare const Debug: FC<DebugProps>;
 export {};

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

@@ -1,4 +1,4 @@
-import { Collider, ColliderDesc, ImpulseJoint, JointData, RigidBody, RigidBodyDesc, World } from "@dimforge/rapier3d-compat";
+import { Collider, ColliderDesc, DebugRenderBuffers, ImpulseJoint, JointData, RigidBody, RigidBodyDesc, World } from "@dimforge/rapier3d-compat";
 import { Quaternion, Vector3 } from "three";
 import { RefGetter } from "./types";
 declare type Vector3Object = {
@@ -160,6 +160,7 @@ export interface WorldApi {
     removeImpulseJoint(joint: ImpulseJoint, wakeUp?: boolean): void;
     forEachCollider(callback: (collider: Collider) => void): void;
     setGravity(gravity: Vector3): void;
+    debugRender(): DebugRenderBuffers;
 }
 export declare const createWorldApi: (ref: RefGetter<World>) => WorldApi;
 export declare const createJointApi: (ref: RefGetter<ImpulseJoint>) => {

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

@@ -287,6 +287,10 @@ export interface UseRigidBodyOptions extends ColliderProps {
      * Passed down to the object3d representing this collider.
      */
     userData?: Object3DProps["userData"];
+    /**
+     * Include invisible objects on the collider creation estimation.
+     */
+    includeInvisible?: boolean;
 }
 export declare type SphericalJointParams = [
     body1Anchor: Vector3Array,

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

@@ -220,7 +220,8 @@ const createWorldApi = ref => {
       x,
       y,
       z
-    }
+    },
+    debugRender: () => ref.current().debugRender()
   };
 }; // TODO: Broken currently, waiting for Rapier3D to fix
 
@@ -910,7 +911,8 @@ const createColliderPropsFromChildren = ({
   const colliderProps = [];
   object.updateWorldMatrix(true, false);
   const invertedParentMatrixWorld = object.matrixWorld.clone().invert();
-  object.traverseVisible(child => {
+
+  const colliderFromChild = child => {
     if ("isMesh" in child) {
       if (_ignoreMeshColliders && isChildOfMeshCollider(child)) return;
       const worldScale = child.getWorldScale(_scale);
@@ -935,7 +937,14 @@ const createColliderPropsFromChildren = ({
         scale: [worldScale.x, worldScale.y, worldScale.z]
       }));
     }
-  });
+  };
+
+  if (options.includeInvisible) {
+    object.traverse(colliderFromChild);
+  } else {
+    object.traverseVisible(colliderFromChild);
+  }
+
   return colliderProps;
 };
 const getColliderArgsFromGeometry = (geometry, colliders) => {
@@ -1369,178 +1378,24 @@ const MeshCollider = props => {
   }, colliderProps))));
 };
 
-const geometryFromCollider = collider => {
-  switch (collider.shape.type) {
-    case rapier3dCompat.ShapeType.Cuboid:
-      {
-        const {
-          x,
-          y,
-          z
-        } = collider.shape.halfExtents;
-        return new three.BoxGeometry(x * 2 + 0.01, y * 2 + 0.01, z * 2 + 0.01);
-      }
-
-    case rapier3dCompat.ShapeType.RoundCuboid:
-      {
-        const {
-          x,
-          y,
-          z
-        } = collider.shape.halfExtents;
-        const radius = collider.shape.borderRadius;
-        return new threeStdlib.RoundedBoxGeometry(x * 2 + radius * 2, y * 2 + radius * 2, z * 2 + radius * 2, 8, radius);
-      }
-
-    case rapier3dCompat.ShapeType.Ball:
-      {
-        const r = collider.shape.radius;
-        return new three.SphereGeometry(r + +0.01, 8, 8);
-      }
-
-    case rapier3dCompat.ShapeType.TriMesh:
-      {
-        var _g$index;
-
-        const v = collider.shape.vertices;
-        const i = collider.shape.indices;
-        const g = new three.BufferGeometry(); // Vertices are not always a float3darray (???), so we need to convert them
-
-        const safeVerts = Float32Array.from(v);
-        g.setAttribute("position", new three.BufferAttribute(safeVerts, 3));
-        (_g$index = g.index) === null || _g$index === void 0 ? void 0 : _g$index.set(i);
-        g.setDrawRange(0, g.attributes.position.array.length / 3 - 1);
-        return g;
-      }
-
-    case rapier3dCompat.ShapeType.ConvexPolyhedron:
-      {
-        const cv = collider.shape.vertices; // Vertices are not always a float3darray (???), so we need to convert them
-
-        const safeVerts = Float32Array.from(cv);
-        const cg = new three.BufferGeometry();
-        cg.setAttribute("position", new three.BufferAttribute(safeVerts, 3));
-        return cg;
-      }
-
-    case rapier3dCompat.ShapeType.Cylinder:
-      {
-        const r = collider.shape.radius;
-        const h = collider.shape.halfHeight;
-        const g = new three.CylinderGeometry(r, r, h * 2);
-        return g;
-      }
-
-    case rapier3dCompat.ShapeType.Capsule:
-      {
-        const r = collider.shape.radius;
-        const h = collider.shape.halfHeight;
-        const g = new three.CapsuleGeometry(r, h * 2, 4, 8);
-        return g;
-      }
-
-    case rapier3dCompat.ShapeType.Cone:
-      {
-        const r = collider.shape.radius;
-        const h = collider.shape.halfHeight;
-        const g = new three.ConeGeometry(r, h * 2, 16);
-        return g;
-      }
-
-    case rapier3dCompat.ShapeType.HeightField:
-      {
-        const rows = collider.shape.nrows;
-        const cols = collider.shape.ncols;
-        const heights = collider.shape.heights;
-        const scale = collider.shape.scale;
-        const g = new three.PlaneGeometry(scale.x, scale.z, cols, rows);
-        const verts = g.attributes.position.array;
-        verts.forEach((v, index) => verts[index * 3 + 2] = heights[index] * scale.y);
-        g.scale(1, -1, 1);
-        g.rotateX(-Math.PI / 2);
-        g.rotateY(-Math.PI / 2);
-        return g;
-      }
-  }
-
-  return new three.BoxGeometry(1, 1, 1);
-};
-
-const DebugShape = /*#__PURE__*/React.memo(({
-  colliderHandle,
-  color,
-  sleepColor
-}) => {
+const Debug = () => {
   const {
     world
   } = useRapier();
   const ref = React.useRef(null);
-  const [material] = React.useState(new three.MeshBasicMaterial({
-    color,
-    wireframe: true
-  }));
-  fiber.useFrame(() => {
-    const collider = world.getCollider(colliderHandle);
-
-    if (ref.current && collider) {
-      const {
-        x: rx,
-        y: ry,
-        z: rz,
-        w: rw
-      } = collider.rotation();
-      const {
-        x,
-        y,
-        z
-      } = collider.translation();
-      const parent = collider.parent();
-
-      if (parent !== null && parent !== void 0 && parent.isSleeping() || parent !== null && parent !== void 0 && parent.isFixed() || parent !== null && parent !== void 0 && parent.isKinematic()) {
-        material.color = new three.Color(sleepColor);
-      } else {
-        material.color = new three.Color(color);
-      }
-
-      ref.current.position.set(x, y, z);
-      ref.current.rotation.setFromQuaternion(new three.Quaternion(rx, ry, rz, rw));
-    }
-  });
-  const geometry = React.useMemo(() => {
-    const collider = world.getCollider(colliderHandle);
-    return geometryFromCollider(collider);
-  }, [colliderHandle]);
-  return /*#__PURE__*/React__default["default"].createElement("mesh", {
-    ref: ref,
-    material: material
-  }, /*#__PURE__*/React__default["default"].createElement("primitive", {
-    object: geometry,
-    attach: "geometry"
-  }));
-});
-const Debug = ({
-  color: _color = "red",
-  sleepColor: _sleepColor = "blue"
-}) => {
-  const {
-    world
-  } = useRapier();
-  const [colliders, setColliders] = React.useState([]);
-  React.useRef({});
-
   fiber.useFrame(() => {
-    const newColliders = [];
-    world.forEachCollider(collider => {
-      newColliders.push(collider.handle);
-    });
-    setColliders(newColliders);
+    const mesh = ref.current;
+    if (!mesh) return;
+    const buffers = world.debugRender();
+    mesh.geometry.setAttribute("position", new three.BufferAttribute(buffers.vertices, 3));
+    mesh.geometry.setAttribute("color", new three.BufferAttribute(buffers.colors, 4));
   });
-  return /*#__PURE__*/React__default["default"].createElement("group", null, colliders.map(handle => /*#__PURE__*/React__default["default"].createElement(DebugShape, {
-    key: handle,
-    colliderHandle: handle,
-    color: _color,
-    sleepColor: _sleepColor
-  })));
+  return /*#__PURE__*/React__default["default"].createElement("lineSegments", {
+    ref: ref
+  }, /*#__PURE__*/React__default["default"].createElement("lineBasicMaterial", {
+    color: 0xffffff,
+    vertexColors: true
+  }), /*#__PURE__*/React__default["default"].createElement("bufferGeometry", null));
 };
 
 const _excluded = ["positions", "rotations", "children"];

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

@@ -220,7 +220,8 @@ const createWorldApi = ref => {
       x,
       y,
       z
-    }
+    },
+    debugRender: () => ref.current().debugRender()
   };
 }; // TODO: Broken currently, waiting for Rapier3D to fix
 
@@ -910,7 +911,8 @@ const createColliderPropsFromChildren = ({
   const colliderProps = [];
   object.updateWorldMatrix(true, false);
   const invertedParentMatrixWorld = object.matrixWorld.clone().invert();
-  object.traverseVisible(child => {
+
+  const colliderFromChild = child => {
     if ("isMesh" in child) {
       if (_ignoreMeshColliders && isChildOfMeshCollider(child)) return;
       const worldScale = child.getWorldScale(_scale);
@@ -935,7 +937,14 @@ const createColliderPropsFromChildren = ({
         scale: [worldScale.x, worldScale.y, worldScale.z]
       }));
     }
-  });
+  };
+
+  if (options.includeInvisible) {
+    object.traverse(colliderFromChild);
+  } else {
+    object.traverseVisible(colliderFromChild);
+  }
+
   return colliderProps;
 };
 const getColliderArgsFromGeometry = (geometry, colliders) => {
@@ -1369,178 +1378,24 @@ const MeshCollider = props => {
   }, colliderProps))));
 };
 
-const geometryFromCollider = collider => {
-  switch (collider.shape.type) {
-    case rapier3dCompat.ShapeType.Cuboid:
-      {
-        const {
-          x,
-          y,
-          z
-        } = collider.shape.halfExtents;
-        return new three.BoxGeometry(x * 2 + 0.01, y * 2 + 0.01, z * 2 + 0.01);
-      }
-
-    case rapier3dCompat.ShapeType.RoundCuboid:
-      {
-        const {
-          x,
-          y,
-          z
-        } = collider.shape.halfExtents;
-        const radius = collider.shape.borderRadius;
-        return new threeStdlib.RoundedBoxGeometry(x * 2 + radius * 2, y * 2 + radius * 2, z * 2 + radius * 2, 8, radius);
-      }
-
-    case rapier3dCompat.ShapeType.Ball:
-      {
-        const r = collider.shape.radius;
-        return new three.SphereGeometry(r + +0.01, 8, 8);
-      }
-
-    case rapier3dCompat.ShapeType.TriMesh:
-      {
-        var _g$index;
-
-        const v = collider.shape.vertices;
-        const i = collider.shape.indices;
-        const g = new three.BufferGeometry(); // Vertices are not always a float3darray (???), so we need to convert them
-
-        const safeVerts = Float32Array.from(v);
-        g.setAttribute("position", new three.BufferAttribute(safeVerts, 3));
-        (_g$index = g.index) === null || _g$index === void 0 ? void 0 : _g$index.set(i);
-        g.setDrawRange(0, g.attributes.position.array.length / 3 - 1);
-        return g;
-      }
-
-    case rapier3dCompat.ShapeType.ConvexPolyhedron:
-      {
-        const cv = collider.shape.vertices; // Vertices are not always a float3darray (???), so we need to convert them
-
-        const safeVerts = Float32Array.from(cv);
-        const cg = new three.BufferGeometry();
-        cg.setAttribute("position", new three.BufferAttribute(safeVerts, 3));
-        return cg;
-      }
-
-    case rapier3dCompat.ShapeType.Cylinder:
-      {
-        const r = collider.shape.radius;
-        const h = collider.shape.halfHeight;
-        const g = new three.CylinderGeometry(r, r, h * 2);
-        return g;
-      }
-
-    case rapier3dCompat.ShapeType.Capsule:
-      {
-        const r = collider.shape.radius;
-        const h = collider.shape.halfHeight;
-        const g = new three.CapsuleGeometry(r, h * 2, 4, 8);
-        return g;
-      }
-
-    case rapier3dCompat.ShapeType.Cone:
-      {
-        const r = collider.shape.radius;
-        const h = collider.shape.halfHeight;
-        const g = new three.ConeGeometry(r, h * 2, 16);
-        return g;
-      }
-
-    case rapier3dCompat.ShapeType.HeightField:
-      {
-        const rows = collider.shape.nrows;
-        const cols = collider.shape.ncols;
-        const heights = collider.shape.heights;
-        const scale = collider.shape.scale;
-        const g = new three.PlaneGeometry(scale.x, scale.z, cols, rows);
-        const verts = g.attributes.position.array;
-        verts.forEach((v, index) => verts[index * 3 + 2] = heights[index] * scale.y);
-        g.scale(1, -1, 1);
-        g.rotateX(-Math.PI / 2);
-        g.rotateY(-Math.PI / 2);
-        return g;
-      }
-  }
-
-  return new three.BoxGeometry(1, 1, 1);
-};
-
-const DebugShape = /*#__PURE__*/React.memo(({
-  colliderHandle,
-  color,
-  sleepColor
-}) => {
+const Debug = () => {
   const {
     world
   } = useRapier();
   const ref = React.useRef(null);
-  const [material] = React.useState(new three.MeshBasicMaterial({
-    color,
-    wireframe: true
-  }));
-  fiber.useFrame(() => {
-    const collider = world.getCollider(colliderHandle);
-
-    if (ref.current && collider) {
-      const {
-        x: rx,
-        y: ry,
-        z: rz,
-        w: rw
-      } = collider.rotation();
-      const {
-        x,
-        y,
-        z
-      } = collider.translation();
-      const parent = collider.parent();
-
-      if (parent !== null && parent !== void 0 && parent.isSleeping() || parent !== null && parent !== void 0 && parent.isFixed() || parent !== null && parent !== void 0 && parent.isKinematic()) {
-        material.color = new three.Color(sleepColor);
-      } else {
-        material.color = new three.Color(color);
-      }
-
-      ref.current.position.set(x, y, z);
-      ref.current.rotation.setFromQuaternion(new three.Quaternion(rx, ry, rz, rw));
-    }
-  });
-  const geometry = React.useMemo(() => {
-    const collider = world.getCollider(colliderHandle);
-    return geometryFromCollider(collider);
-  }, [colliderHandle]);
-  return /*#__PURE__*/React__default["default"].createElement("mesh", {
-    ref: ref,
-    material: material
-  }, /*#__PURE__*/React__default["default"].createElement("primitive", {
-    object: geometry,
-    attach: "geometry"
-  }));
-});
-const Debug = ({
-  color: _color = "red",
-  sleepColor: _sleepColor = "blue"
-}) => {
-  const {
-    world
-  } = useRapier();
-  const [colliders, setColliders] = React.useState([]);
-  React.useRef({});
-
   fiber.useFrame(() => {
-    const newColliders = [];
-    world.forEachCollider(collider => {
-      newColliders.push(collider.handle);
-    });
-    setColliders(newColliders);
+    const mesh = ref.current;
+    if (!mesh) return;
+    const buffers = world.debugRender();
+    mesh.geometry.setAttribute("position", new three.BufferAttribute(buffers.vertices, 3));
+    mesh.geometry.setAttribute("color", new three.BufferAttribute(buffers.colors, 4));
   });
-  return /*#__PURE__*/React__default["default"].createElement("group", null, colliders.map(handle => /*#__PURE__*/React__default["default"].createElement(DebugShape, {
-    key: handle,
-    colliderHandle: handle,
-    color: _color,
-    sleepColor: _sleepColor
-  })));
+  return /*#__PURE__*/React__default["default"].createElement("lineSegments", {
+    ref: ref
+  }, /*#__PURE__*/React__default["default"].createElement("lineBasicMaterial", {
+    color: 0xffffff,
+    vertexColors: true
+  }), /*#__PURE__*/React__default["default"].createElement("bufferGeometry", null));
 };
 
 const _excluded = ["positions", "rotations", "children"];

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

@@ -1,10 +1,10 @@
-import { EventQueue, RigidBodyDesc, ColliderDesc, ActiveEvents, ShapeType } from '@dimforge/rapier3d-compat';
+import { EventQueue, RigidBodyDesc, ColliderDesc, ActiveEvents } from '@dimforge/rapier3d-compat';
 export { CoefficientCombineRule, Collider as RapierCollider, RigidBody as RapierRigidBody } from '@dimforge/rapier3d-compat';
 import React, { useRef, useState, useEffect, useMemo, createContext, useContext, memo, forwardRef, useImperativeHandle, useLayoutEffect } from 'react';
 import { useAsset } from 'use-asset';
 import { useFrame } from '@react-three/fiber';
-import { Quaternion, Euler, Vector3, Object3D, Matrix4, MathUtils, InstancedMesh, MeshBasicMaterial, Color, PlaneGeometry, ConeGeometry, CapsuleGeometry, CylinderGeometry, BufferGeometry, BufferAttribute, SphereGeometry, BoxGeometry, DynamicDrawUsage } from 'three';
-import { mergeVertices, RoundedBoxGeometry } from 'three-stdlib';
+import { Quaternion, Euler, Vector3, Object3D, Matrix4, MathUtils, InstancedMesh, BufferAttribute, DynamicDrawUsage } from 'three';
+import { mergeVertices } from 'three-stdlib';
 
 const _quaternion = new Quaternion();
 new Euler();
@@ -195,7 +195,8 @@ const createWorldApi = ref => {
       x,
       y,
       z
-    }
+    },
+    debugRender: () => ref.current().debugRender()
   };
 }; // TODO: Broken currently, waiting for Rapier3D to fix
 
@@ -885,7 +886,8 @@ const createColliderPropsFromChildren = ({
   const colliderProps = [];
   object.updateWorldMatrix(true, false);
   const invertedParentMatrixWorld = object.matrixWorld.clone().invert();
-  object.traverseVisible(child => {
+
+  const colliderFromChild = child => {
     if ("isMesh" in child) {
       if (_ignoreMeshColliders && isChildOfMeshCollider(child)) return;
       const worldScale = child.getWorldScale(_scale);
@@ -910,7 +912,14 @@ const createColliderPropsFromChildren = ({
         scale: [worldScale.x, worldScale.y, worldScale.z]
       }));
     }
-  });
+  };
+
+  if (options.includeInvisible) {
+    object.traverse(colliderFromChild);
+  } else {
+    object.traverseVisible(colliderFromChild);
+  }
+
   return colliderProps;
 };
 const getColliderArgsFromGeometry = (geometry, colliders) => {
@@ -1344,178 +1353,24 @@ const MeshCollider = props => {
   }, colliderProps))));
 };
 
-const geometryFromCollider = collider => {
-  switch (collider.shape.type) {
-    case ShapeType.Cuboid:
-      {
-        const {
-          x,
-          y,
-          z
-        } = collider.shape.halfExtents;
-        return new BoxGeometry(x * 2 + 0.01, y * 2 + 0.01, z * 2 + 0.01);
-      }
-
-    case ShapeType.RoundCuboid:
-      {
-        const {
-          x,
-          y,
-          z
-        } = collider.shape.halfExtents;
-        const radius = collider.shape.borderRadius;
-        return new RoundedBoxGeometry(x * 2 + radius * 2, y * 2 + radius * 2, z * 2 + radius * 2, 8, radius);
-      }
-
-    case ShapeType.Ball:
-      {
-        const r = collider.shape.radius;
-        return new SphereGeometry(r + +0.01, 8, 8);
-      }
-
-    case ShapeType.TriMesh:
-      {
-        var _g$index;
-
-        const v = collider.shape.vertices;
-        const i = collider.shape.indices;
-        const g = new BufferGeometry(); // Vertices are not always a float3darray (???), so we need to convert them
-
-        const safeVerts = Float32Array.from(v);
-        g.setAttribute("position", new BufferAttribute(safeVerts, 3));
-        (_g$index = g.index) === null || _g$index === void 0 ? void 0 : _g$index.set(i);
-        g.setDrawRange(0, g.attributes.position.array.length / 3 - 1);
-        return g;
-      }
-
-    case ShapeType.ConvexPolyhedron:
-      {
-        const cv = collider.shape.vertices; // Vertices are not always a float3darray (???), so we need to convert them
-
-        const safeVerts = Float32Array.from(cv);
-        const cg = new BufferGeometry();
-        cg.setAttribute("position", new BufferAttribute(safeVerts, 3));
-        return cg;
-      }
-
-    case ShapeType.Cylinder:
-      {
-        const r = collider.shape.radius;
-        const h = collider.shape.halfHeight;
-        const g = new CylinderGeometry(r, r, h * 2);
-        return g;
-      }
-
-    case ShapeType.Capsule:
-      {
-        const r = collider.shape.radius;
-        const h = collider.shape.halfHeight;
-        const g = new CapsuleGeometry(r, h * 2, 4, 8);
-        return g;
-      }
-
-    case ShapeType.Cone:
-      {
-        const r = collider.shape.radius;
-        const h = collider.shape.halfHeight;
-        const g = new ConeGeometry(r, h * 2, 16);
-        return g;
-      }
-
-    case ShapeType.HeightField:
-      {
-        const rows = collider.shape.nrows;
-        const cols = collider.shape.ncols;
-        const heights = collider.shape.heights;
-        const scale = collider.shape.scale;
-        const g = new PlaneGeometry(scale.x, scale.z, cols, rows);
-        const verts = g.attributes.position.array;
-        verts.forEach((v, index) => verts[index * 3 + 2] = heights[index] * scale.y);
-        g.scale(1, -1, 1);
-        g.rotateX(-Math.PI / 2);
-        g.rotateY(-Math.PI / 2);
-        return g;
-      }
-  }
-
-  return new BoxGeometry(1, 1, 1);
-};
-
-const DebugShape = /*#__PURE__*/memo(({
-  colliderHandle,
-  color,
-  sleepColor
-}) => {
+const Debug = () => {
   const {
     world
   } = useRapier();
   const ref = useRef(null);
-  const [material] = useState(new MeshBasicMaterial({
-    color,
-    wireframe: true
-  }));
-  useFrame(() => {
-    const collider = world.getCollider(colliderHandle);
-
-    if (ref.current && collider) {
-      const {
-        x: rx,
-        y: ry,
-        z: rz,
-        w: rw
-      } = collider.rotation();
-      const {
-        x,
-        y,
-        z
-      } = collider.translation();
-      const parent = collider.parent();
-
-      if (parent !== null && parent !== void 0 && parent.isSleeping() || parent !== null && parent !== void 0 && parent.isFixed() || parent !== null && parent !== void 0 && parent.isKinematic()) {
-        material.color = new Color(sleepColor);
-      } else {
-        material.color = new Color(color);
-      }
-
-      ref.current.position.set(x, y, z);
-      ref.current.rotation.setFromQuaternion(new Quaternion(rx, ry, rz, rw));
-    }
-  });
-  const geometry = useMemo(() => {
-    const collider = world.getCollider(colliderHandle);
-    return geometryFromCollider(collider);
-  }, [colliderHandle]);
-  return /*#__PURE__*/React.createElement("mesh", {
-    ref: ref,
-    material: material
-  }, /*#__PURE__*/React.createElement("primitive", {
-    object: geometry,
-    attach: "geometry"
-  }));
-});
-const Debug = ({
-  color: _color = "red",
-  sleepColor: _sleepColor = "blue"
-}) => {
-  const {
-    world
-  } = useRapier();
-  const [colliders, setColliders] = useState([]);
-  useRef({});
-
   useFrame(() => {
-    const newColliders = [];
-    world.forEachCollider(collider => {
-      newColliders.push(collider.handle);
-    });
-    setColliders(newColliders);
+    const mesh = ref.current;
+    if (!mesh) return;
+    const buffers = world.debugRender();
+    mesh.geometry.setAttribute("position", new BufferAttribute(buffers.vertices, 3));
+    mesh.geometry.setAttribute("color", new BufferAttribute(buffers.colors, 4));
   });
-  return /*#__PURE__*/React.createElement("group", null, colliders.map(handle => /*#__PURE__*/React.createElement(DebugShape, {
-    key: handle,
-    colliderHandle: handle,
-    color: _color,
-    sleepColor: _sleepColor
-  })));
+  return /*#__PURE__*/React.createElement("lineSegments", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement("lineBasicMaterial", {
+    color: 0xffffff,
+    vertexColors: true
+  }), /*#__PURE__*/React.createElement("bufferGeometry", null));
 };
 
 const _excluded = ["positions", "rotations", "children"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/rapier",
-  "version": "0.7.7",
+  "version": "0.8.1",
   "source": "src/index.ts",
   "main": "dist/react-three-rapier.cjs.js",
   "module": "dist/react-three-rapier.esm.js",
@@ -8,6 +8,9 @@
   "files": [
     "dist"
   ],
+  "scripts": {
+    "ts": "tsc -w"
+  },
   "devDependencies": {
     "@react-three/drei": "^9.34.1",
     "@react-three/fiber": "^8.8.9",

package/readme.md

@@ -122,6 +122,16 @@ const Scene = () => (
 );
 ```
 
+If part of our meshes are invisible and you want to include them in the collider creation, use the `includeInvisible` flag.
+
+```tsx
+<RigidBody colliders="hull" includeInvisible>
+  <object3D>
+    <Suzanne visible={false} />
+  </object3D>
+</RigidBody>
+```
+
 ## Instanced Meshes
 
 Instanced meshes can also be used and have automatic colliders generated from their mesh.
@@ -185,12 +195,7 @@ const Scene = () => {
 
 ## Debug
 
-Use the Debug component to see live representations of all colliders in a scene.
-
-- The `color` prop sets the color of awake colliders that are affected by forces.
-- The `sleepColor` prop set the color of a static (fixed, or kinematic) or sleeping collider.
-
-> Note: Experimental. Not all shapes are supported. Unsupported shapes are always represented by cubes.
+Use the Debug component to see live representations of all colliders in a scene, using the live debug buffer from the physics engine.
 
 ```tsx
 import { Box, Sphere } from "@react-three/drei";
@@ -199,7 +204,7 @@ import { RigidBody, Debug } from "@react-three/rapier";
 const Scene = () => {
   return (
     <Physics>
-      <Debug color="red" sleepColor="blue" />
+      <Debug />
 
       <RigidBody>
         <Box />