feat(rapier): add rapier

apps/kitchen-sink/src/app/app.component.ts

@@ -11,6 +11,7 @@ import { filter, map, tap } from 'rxjs';
 			<option value="soba">/soba</option>
 			<option value="cannon">/cannon</option>
 			<option value="postprocessing">/postprocessing</option>
+			<option value="rapier">/rapier</option>
 		</select>
 	`,
 	imports: [RouterOutlet],

apps/kitchen-sink/src/app/app.config.ts

@@ -1,11 +1,11 @@
 import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
 import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
 	providers: [
 		provideExperimentalZonelessChangeDetection(),
 		// provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
-		provideRouter(appRoutes),
+		provideRouter(appRoutes, withComponentInputBinding()),
 	],
 };

apps/kitchen-sink/src/app/app.routes.ts

@@ -16,6 +16,11 @@ export const appRoutes: Route[] = [
 		loadComponent: () => import('./soba/soba'),
 		loadChildren: () => import('./soba/soba.routes'),
 	},
+	{
+		path: 'rapier',
+		loadComponent: () => import('./rapier/rapier'),
+		loadChildren: () => import('./rapier/rapier.routes'),
+	},
 	{
 		path: '',
 		// redirectTo: 'cannon',

apps/kitchen-sink/src/app/rapier/basic/basic.ts

@@ -0,0 +1,64 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';
+import { injectBeforeRender, NON_ROOT } from 'angular-three';
+import { NgtrCuboidCollider, NgtrPhysics, NgtrRigidBody } from 'angular-three-rapier';
+import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+
+@Component({
+	standalone: true,
+	template: `
+		<ngts-perspective-camera [options]="{ makeDefault: true, position: [5, 5, 5] }" />
+
+		<ngtr-physics [options]="{ debug: true }">
+			<ngt-object3D ngtrRigidBody [options]="{ colliders: 'hull' }" [position]="[0, 5, 0]">
+				<ngt-mesh>
+					<ngt-torus-geometry />
+				</ngt-mesh>
+			</ngt-object3D>
+
+			@if (currentCollider() === 1) {
+				<ngt-object3D ngtrCuboidCollider [args]="[1, 0.5, 1]" (collisionExit)="currentCollider.set(2)" />
+			} @else if (currentCollider() === 2) {
+				<ngt-object3D
+					ngtrCuboidCollider
+					[position]="[0, -1, 0]"
+					[args]="[3, 0.5, 3]"
+					(collisionExit)="currentCollider.set(3)"
+				/>
+			} @else if (currentCollider() === 3) {
+				<ngt-object3D
+					ngtrCuboidCollider
+					[position]="[0, -3, 0]"
+					[args]="[6, 0.5, 6]"
+					(collisionExit)="currentCollider.set(4)"
+				/>
+			} @else {
+				<ngt-object3D ngtrCuboidCollider [position]="[0, -6, 0]" [args]="[20, 0.5, 20]" />
+			}
+		</ngtr-physics>
+
+		<ngts-orbit-controls />
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'experience-basic-rapier' },
+	imports: [NgtrPhysics, NgtrRigidBody, NgtrCuboidCollider, NgtsOrbitControls, NgtsPerspectiveCamera],
+})
+export class Basic {
+	static [NON_ROOT] = true;
+
+	protected currentCollider = signal(1);
+
+	constructor() {
+		injectBeforeRender(({ camera }) => {
+			const currentCollider = this.currentCollider();
+			if (currentCollider === 2) {
+				camera.position.lerp({ x: 10, y: 10, z: 10 }, 0.1);
+			} else if (currentCollider === 3) {
+				camera.position.lerp({ x: 15, y: 15, z: 15 }, 0.1);
+			} else if (currentCollider === 4) {
+				camera.position.lerp({ x: 20, y: 40, z: 40 }, 0.1);
+			}
+		});
+	}
+}

apps/kitchen-sink/src/app/rapier/cluster/cluster.ts

@@ -0,0 +1,76 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	CUSTOM_ELEMENTS_SCHEMA,
+	effect,
+	ElementRef,
+	inject,
+	viewChild,
+} from '@angular/core';
+import { injectBeforeRender, NgtArgs, NON_ROOT } from 'angular-three';
+import { NgtrInstancedRigidBodies, NgtrPhysics } from 'angular-three-rapier';
+import { Color, InstancedMesh, Vector3 } from 'three';
+
+const BALLS = 1000;
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-group>
+			<ngt-object3D [ngtrInstancedRigidBodies]="bodies" [options]="{ colliders: 'ball', linearDamping: 5 }">
+				<ngt-instanced-mesh #instancedMesh *args="[undefined, undefined, BALLS]" [castShadow]="true">
+					<ngt-sphere-geometry *args="[0.2]" />
+					<ngt-mesh-physical-material [roughness]="0" [metalness]="0.5" color="yellow" />
+				</ngt-instanced-mesh>
+			</ngt-object3D>
+		</ngt-group>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'cluster-rapier' },
+	imports: [NgtrInstancedRigidBodies, NgtArgs],
+})
+export class ClusterExample {
+	static [NON_ROOT] = true;
+
+	protected readonly BALLS = BALLS;
+	protected bodies = Array.from({ length: BALLS }, (_, index) => {
+		return {
+			key: index,
+			position: [Math.floor(index / 30), (index % 30) * 0.5, 0] as [number, number, number],
+		};
+	});
+
+	private rigidBodiesRef = viewChild.required(NgtrInstancedRigidBodies);
+	private instancedMeshRef = viewChild<ElementRef<InstancedMesh>>('instancedMesh');
+
+	private physics = inject(NgtrPhysics);
+
+	constructor() {
+		injectBeforeRender(() => {
+			const paused = this.physics.paused();
+			if (paused) return;
+
+			const rigidBodies = this.rigidBodiesRef().rigidBodyRefs();
+			rigidBodies.forEach((body) => {
+				const rigidBody = body.rigidBody();
+				if (rigidBody) {
+					const { x, y, z } = rigidBody.translation();
+					const p = new Vector3(x, y, z);
+					p.normalize().multiplyScalar(-0.01);
+					rigidBody.applyImpulse(p, true);
+				}
+			});
+		});
+
+		effect(() => {
+			const instancedMesh = this.instancedMeshRef()?.nativeElement;
+			if (!instancedMesh) return;
+
+			for (let i = 0; i < BALLS; i++) {
+				instancedMesh.setColorAt(i, new Color(Math.random() * 0xffffff));
+			}
+			if (instancedMesh.instanceColor) instancedMesh.instanceColor.needsUpdate = true;
+		});
+	}
+}

apps/kitchen-sink/src/app/rapier/constants.ts

@@ -0,0 +1,17 @@
+import { Basic } from './basic/basic';
+import { ClusterExample } from './cluster/cluster';
+import { InstancedMeshExample } from './instanced-mesh/instanced-mesh';
+import { JointsExample } from './joints/joints';
+import { PerformanceExample } from './performance/performance';
+import { RopeJointExample } from './rope-joint/rope-joint';
+import { SpringExample } from './spring/spring';
+
+export const SCENES_MAP = {
+	basic: Basic,
+	instancedMesh: InstancedMeshExample,
+	performance: PerformanceExample,
+	joints: JointsExample,
+	cluster: ClusterExample,
+	ropeJoint: RopeJointExample,
+	spring: SpringExample,
+} as const;

apps/kitchen-sink/src/app/rapier/instanced-mesh/instanced-mesh.ts

@@ -0,0 +1,96 @@
+import {
+	ChangeDetectionStrategy,
+	Component,
+	CUSTOM_ELEMENTS_SCHEMA,
+	effect,
+	ElementRef,
+	signal,
+	viewChild,
+} from '@angular/core';
+import { injectStore, NgtArgs, NgtThreeEvent, NON_ROOT } from 'angular-three';
+import { NgtrInstancedRigidBodies, NgtrInstancedRigidBodyOptions } from 'angular-three-rapier';
+import { Color, InstancedMesh } from 'three';
+import { injectSuzanne } from '../suzanne';
+
+const MAX_COUNT = 2000;
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-group>
+			@if (gltf(); as gltf) {
+				<ngt-object3D
+					#instancedRigidBodies="instancedRigidBodies"
+					[ngtrInstancedRigidBodies]="bodies()"
+					[options]="{ colliders: 'hull' }"
+				>
+					<ngt-instanced-mesh
+						*args="[gltf.nodes.Suzanne.geometry, undefined, MAX_COUNT]"
+						#instancedMesh
+						[castShadow]="true"
+						[count]="bodies().length"
+						(click)="onClick(instancedRigidBodies, $any($event))"
+					>
+						<ngt-mesh-physical-material />
+					</ngt-instanced-mesh>
+				</ngt-object3D>
+			}
+		</ngt-group>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'instanced-mesh-rapier' },
+	imports: [NgtrInstancedRigidBodies, NgtArgs],
+})
+export class InstancedMeshExample {
+	static [NON_ROOT] = true;
+
+	protected readonly MAX_COUNT = MAX_COUNT;
+
+	private instancedMeshRef = viewChild<ElementRef<InstancedMesh>>('instancedMesh');
+
+	protected gltf = injectSuzanne();
+	private store = injectStore();
+
+	protected bodies = signal(Array.from({ length: 100 }, () => this.createBody()));
+
+	constructor() {
+		effect(() => {
+			const instancedMesh = this.instancedMeshRef()?.nativeElement;
+			if (!instancedMesh) return;
+
+			for (let i = 0; i < MAX_COUNT; i++) {
+				instancedMesh.setColorAt(i, new Color(Math.random() * 0xffffff));
+			}
+			if (instancedMesh.instanceColor) {
+				instancedMesh.instanceColor.needsUpdate = true;
+			}
+		});
+
+		effect((onCleanup) => {
+			const sub = this.store.snapshot.pointerMissed$.subscribe(() => {
+				this.bodies.update((prev) => [...prev, this.createBody()]);
+			});
+			onCleanup(() => sub.unsubscribe());
+		});
+	}
+
+	private createBody(): NgtrInstancedRigidBodyOptions {
+		return {
+			key: Math.random(),
+			position: [Math.random() * 20, Math.random() * 20, Math.random() * 20],
+			rotation: [Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2],
+			scale: [0.5 + Math.random(), 0.5 + Math.random(), 0.5 + Math.random()],
+		};
+	}
+
+	onClick(instancedRigidBodies: NgtrInstancedRigidBodies, event: NgtThreeEvent<MouseEvent>) {
+		if (event.instanceId !== undefined) {
+			instancedRigidBodies
+				.rigidBodyRefs()
+				.at(event.instanceId)
+				?.rigidBody()
+				?.applyTorqueImpulse({ x: 0, y: 50, z: 0 }, true);
+		}
+	}
+}