feat(rapier): full collider shapes support

apps/playground/src/pages/rapier/HeightfieldDemo.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { type ExposedRigidBody, HeightfieldCollider, Physics, RigidBody } from '@tresjs/rapier'
+import { ACESFilmicToneMapping, SRGBColorSpace } from 'three'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: ACESFilmicToneMapping,
+}
+
+const { debug } = useControls({
+  debug: true,
+})
+
+const heights = new Float32Array([
+  0.0,
+  0.5,
+  0.0, // column 1
+  0.2,
+  1.0,
+  0.2, // column 2
+  0.0,
+  0.5,
+  0.0, // column 3
+])
+const scale = { x: 10.0, y: 1.0, z: 10.0 }
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[11, 25, 25]" :look-at="[0, 0, 0]" />
+    <OrbitControls />
+
+    <Suspense>
+      <Physics :debug>
+        <RigidBody
+          type="fixed"
+          :collider="false"
+        >
+          <HeightfieldCollider
+            :args="[2, 2, heights, scale]"
+          />
+          <TresMesh>
+            <TresPlaneGeometry :args="[20, 20, 20]" :rotate-x="-Math.PI / 2" />
+            <TresMeshBasicMaterial color="#f4f4f4" />
+          </TresMesh>
+        </RigidBody>
+      </Physics>
+    </Suspense>
+    <TresDirectionalLight :position="[1, 2, 3]" :intensity="1.5" />
+  </TresCanvas>
+</template>

apps/playground/src/pages/rapier/InstancedRigidBody.vue

@@ -44,7 +44,7 @@ watch(torusInstancedMesh, (mesh) => {
 
     <Suspense>
       <Physics debug>
-        <InstancedRigidBody collider="hull">
+        <InstancedRigidBody collider="convexHull">
           <TresInstancedMesh ref="torusInstancedMesh" :args="[torusKnots, torusKnotsMaterial, 3]" />
         </InstancedRigidBody>
 

apps/playground/src/router/routes/rapier/index.ts

@@ -65,6 +65,11 @@ export const rapierRoutes = [
     name: 'Solver Groups',
     component: () => import('@/pages/rapier/SolverGroupsDemo.vue'),
   },
+  {
+    path: '/rapier/heightfield',
+    name: 'Heightfield',
+    component: () => import('@/pages/rapier/HeightfieldDemo.vue'),
+  },
   {
     path: '/rapier/ragdoll',
     name: 'Basic Ragdoll',

packages/rapier/src/components/InstancedRigidBody.vue

@@ -5,8 +5,12 @@ import { onUnmounted, onUpdated, shallowRef, watch } from 'vue'
 
 import { useRapierContext } from '../composables'
 import { MATRIX_ZERO, QUATERNION_ZERO, VECTOR_ZERO } from '../constants/'
-import { createCollider, createRigidBody } from '../core'
-import type { InstancedRigidBodyProps, RigidBodyContext, TresInstancedMesh } from '../types'
+import { createCollider, createRigidBody, createRigidBodyAutoColliderPropsFromObject } from '../core'
+import type {
+  InstancedRigidBodyProps,
+  RigidBodyContext,
+  TresInstancedMesh,
+} from '../types'
 
 const props = withDefaults(defineProps<Partial<InstancedRigidBodyProps>>(), {
   type: 'dynamic',
@@ -59,10 +63,14 @@ watch(bodyGroup, (group) => {
     rigidBodyInfo.rigidBody.setTranslation(position, true)
     rigidBodyInfo.rigidBody.setRotation(quaternion, true)
 
+    const colliderProps = createRigidBodyAutoColliderPropsFromObject(
+      object,
+      props.collider,
+      rigidBodyInfo.rigidBody,
+    )
     const colliderInfo = {
       ...createCollider({
-        object,
-        shape: props.collider,
+        ...colliderProps,
         rigidBody: rigidBodyInfo.rigidBody,
         world,
       }),

packages/rapier/src/components/Physics.vue

@@ -10,11 +10,11 @@ import { GRAVITY } from '../constants'
 import {
   collisionTrigger,
   emitIntersection,
-  getCollisionObjectFromSource,
   getCollisionSourceFromColliderHandle,
+  getNodeObjectsFromCollisionSource,
 } from '../utils'
 import Debug from './Debug.vue'
-import type { PhysicsProps } from '../types'
+import type { PhysicsProps, SourceTarget } from '../types'
 
 const props = withDefaults(
   defineProps<Partial<PhysicsProps>>(),
@@ -63,20 +63,24 @@ onBeforeRender(() => {
   eventQueue.drainCollisionEvents((handle1, handle2, started) => {
     const source1 = getCollisionSourceFromColliderHandle(world.value, handle1)
     const source2 = getCollisionSourceFromColliderHandle(world.value, handle2)
-    const object1 = getCollisionObjectFromSource(source1, scene)
-    const object2 = getCollisionObjectFromSource(source2, scene)
+    const [groupObject1, currentObject1] = getNodeObjectsFromCollisionSource(source1, scene)
+    const [groupObject2, currentObject2] = getNodeObjectsFromCollisionSource(source2, scene)
 
-    if (!object1 || !object2) { return }
+    if (!groupObject1 || !currentObject1 || !groupObject2 || !currentObject2) { return }
 
-    collisionTrigger(
-      { objects: object1, context: source1 },
-      { objects: object2, context: source2 },
-      started,
-    )
+    const sourceTarget1: SourceTarget = {
+      objects: [groupObject1, currentObject1],
+      context: source1,
+    }
+    const sourceTarget2: SourceTarget = {
+      objects: [groupObject2, currentObject2],
+      context: source2,
+    }
 
+    collisionTrigger(sourceTarget1, sourceTarget2, started)
     emitIntersection(
-      { objects: object2, context: source2 },
-      { objects: object1, context: source1 },
+      sourceTarget2,
+      sourceTarget1,
       started && world.value.intersectionPair(source1.collider, source2.collider),
     )
   })

packages/rapier/src/components/RigidBody.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ActiveCollisionTypes } from '@dimforge/rapier3d-compat'
-import { type TresObject3D, useLoop } from '@tresjs/core'
+import { useLoop } from '@tresjs/core'
 import { Object3D } from 'three'
 import {
   nextTick,
@@ -13,7 +13,7 @@ import {
 } from 'vue'
 
 import { useRapierContext } from '../composables'
-import { createColliderPropsFromObject, createRigidBody } from '../core'
+import { createRigidBody, createRigidBodyAutoColliderPropsFromObject } from '../core'
 import { hasValidColliderGeometry } from '../utils'
 import { makePropsWatcherRB } from '../utils/props'
 import { Collider } from './colliders'
@@ -93,9 +93,10 @@ watch(bodyGroup, async (group) => {
       // Skip children without valid geometry (e.g., collider wrappers, empty Object3Ds)
       if (!hasValidColliderGeometry(child as Object3D)) { continue }
 
-      const createdProps = createColliderPropsFromObject(
-        child as TresObject3D,
+      const createdProps = createRigidBodyAutoColliderPropsFromObject(
+        child,
         props.collider,
+        newPhysicsState.rigidBody,
       )
       collidersProps.push({ ...props, ...createdProps })
     }

packages/rapier/src/components/colliders/BallCollider.vue → packages/rapier/src/components/colliders/Ball.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import Collider from './BaseCollider.vue'
+import Collider from './Base.vue'
 import type { ColliderProps } from '../../types'
 
-const props = defineProps<Partial<Omit<ColliderProps, 'shape'>>>()
+const props = defineProps<Partial<Omit<ColliderProps, 'shape' | 'args'>> & {
+  args?: [radius?: number]
+}>()
 </script>
 
 <template>

packages/rapier/src/components/colliders/Capsule.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Collider from './Base.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape' | 'args'>> & {
+  args?: [radius?: number, halfHeight?: number]
+}>()
+</script>
+
+<template>
+  <Collider shape="capsule" v-bind="props" />
+</template>

packages/rapier/src/components/colliders/Cone.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Collider from './Base.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape' | 'args'>> & {
+  args?: [radius?: number, halfHeight?: number]
+}>()
+</script>
+
+<template>
+  <Collider shape="cone" v-bind="props" />
+</template>

packages/rapier/src/components/colliders/ConvexHull.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Collider from './Base.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape' | 'args'>> & {
+  args?: [vertices: Float32Array]
+}>()
+</script>
+
+<template>
+  <Collider shape="convexHull" v-bind="props" />
+</template>

packages/rapier/src/components/colliders/ConvexMesh.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Collider from './Base.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape' | 'args'>> & {
+  args?: [radius?: number, halfHeight?: number]
+}>()
+</script>
+
+<template>
+  <Collider shape="convexMesh" v-bind="props" />
+</template>

packages/rapier/src/components/colliders/Cuboid.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Collider from './Base.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape' | 'args'>> & {
+  args?: [halfWidth?: number, halfHeight?: number, halfDepth?: number]
+}>()
+</script>
+
+<template>
+  <Collider shape="cuboid" v-bind="props" />
+</template>

packages/rapier/src/components/colliders/Cylinder.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import Collider from './Base.vue'
+import type { ColliderProps } from '../../types'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape' | 'args'>> & {
+  args?: [radius?: number, halfHeight?: number]
+}>()
+</script>
+
+<template>
+  <Collider shape="cylinder" v-bind="props" />
+</template>

packages/rapier/src/components/colliders/Heightfield.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { Vector3 } from '@dimforge/rapier3d-compat'
+
+import type { ColliderProps } from '../../types'
+import Collider from './Base.vue'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape' | 'args'>> & {
+  args: [nrows?: number, ncols?: number, heights?: Float32Array, scale?: Vector3]
+}>()
+</script>
+
+<template>
+  <Collider shape="heightfield" v-bind="props" />
+</template>

packages/rapier/src/components/colliders/Polyline.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ColliderProps } from '../../types'
+import Collider from './Base.vue'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape' | 'args'>> & {
+  args?: [points?: Float32Array, indices?: Uint32Array]
+}>()
+</script>
+
+<template>
+  <Collider shape="polyline" v-bind="props" />
+</template>

packages/rapier/src/components/colliders/RoundCone.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ColliderProps } from '../../types'
+import Collider from './Base.vue'
+
+const props = defineProps<Partial<Omit<ColliderProps, 'shape' | 'args'>> & {
+  args?: [radius?: number, halfHeight?: number]
+}>()
+</script>
+
+<template>
+  <Collider shape="roundCone" v-bind="props" />
+</template>