feat(rapier): add interaction groups and physics step support

Author: nartc

libs/rapier/src/index.ts

@@ -1,8 +1,10 @@
 export * from './lib/colliders';
 export * from './lib/instanced-rigid-bodies';
+export * from './lib/interaction-groups';
 export * from './lib/joints';
 export * from './lib/mesh-collider';
 export * from './lib/physics';
+export * from './lib/physics-step-callback';
 export * from './lib/rigid-body';
 
 export type * from './lib/types';

libs/rapier/src/lib/interaction-groups.ts

@@ -0,0 +1,66 @@
+import { computed, Directive, effect, inject, InjectionToken, input } from '@angular/core';
+import { InteractionGroups } from '@dimforge/rapier3d-compat';
+
+/**
+ * Calculates an InteractionGroup bitmask for use in the `collisionGroups` or `solverGroups`
+ * properties of RigidBody or Collider components. The first argument represents a list of
+ * groups the entity is in (expressed as numbers from 0 to 15). The second argument is a list
+ * of groups that will be filtered against. When it is omitted, all groups are filtered against.
+ *
+ * @example
+ * A RigidBody that is member of group 0 and will collide with everything from groups 0 and 1:
+ *
+ * ```tsx
+ * <RigidBody collisionGroups={interactionGroups([0], [0, 1])} />
+ * ```
+ *
+ * A RigidBody that is member of groups 0 and 1 and will collide with everything else:
+ *
+ * ```tsx
+ * <RigidBody collisionGroups={interactionGroups([0, 1])} />
+ * ```
+ *
+ * A RigidBody that is member of groups 0 and 1 and will not collide with anything:
+ *
+ * ```tsx
+ * <RigidBody collisionGroups={interactionGroups([0, 1], [])} />
+ * ```
+ *
+ * Please note that Rapier needs interaction filters to evaluate to true between _both_ colliding
+ * entities for collision events to trigger.
+ *
+ * @param memberships Groups the collider is a member of. (Values can range from 0 to 15.)
+ * @param filters Groups the interaction group should filter against. (Values can range from 0 to 15.)
+ * @returns An InteractionGroup bitmask.
+ */
+export function interactionGroups(memberships: number | number[], filters?: number | number[]): InteractionGroups {
+	return (bitmask(memberships) << 16) + (filters !== undefined ? bitmask(filters) : 0b1111_1111_1111_1111);
+}
+
+function bitmask(groups: number | number[]): InteractionGroups {
+	return [groups].flat().reduce((acc, layer) => acc | (1 << layer), 0);
+}
+
+export const COLLISION_GROUPS_HANDLER = new InjectionToken<
+	() => undefined | ((interactionGroups: InteractionGroups) => void)
+>('COLLISION_GROUPS_HANDLER');
+
+@Directive({ selector: 'ngt-object3D[interactionGroups]' })
+export class NgtrInteractionGroups {
+	inputs = input.required<[number | number[], (number | number[])?]>({ alias: 'interactionGroups' });
+	interactionGroups = computed(() => {
+		const [memberships, filters] = this.inputs();
+		return interactionGroups(memberships, filters);
+	});
+
+	constructor() {
+		const collisionGroupsHandlerFn = inject(COLLISION_GROUPS_HANDLER, { host: true, optional: true });
+
+		effect(() => {
+			if (!collisionGroupsHandlerFn) return;
+			const handler = collisionGroupsHandlerFn();
+			if (!handler) return;
+			handler(this.interactionGroups());
+		});
+	}
+}

libs/rapier/src/lib/physics-step-callback.ts

@@ -0,0 +1,28 @@
+import { DestroyRef, inject, Injector } from '@angular/core';
+import { assertInjector } from 'ngxtension/assert-injector';
+import { NgtrPhysics } from './physics';
+import type { NgtrWorldStepCallback } from './types';
+
+export function injectBeforePhysicsStep(callback: NgtrWorldStepCallback, injector?: Injector) {
+	return assertInjector(injectBeforePhysicsStep, injector, () => {
+		const physics = inject(NgtrPhysics);
+
+		physics.beforeStepCallbacks.add(callback);
+
+		inject(DestroyRef).onDestroy(() => {
+			physics.beforeStepCallbacks.delete(callback);
+		});
+	});
+}
+
+export function injectAfterPhysicsStep(callback: NgtrWorldStepCallback, injector?: Injector) {
+	return assertInjector(injectAfterPhysicsStep, injector, () => {
+		const physics = inject(NgtrPhysics);
+
+		physics.afterStepCallbacks.add(callback);
+
+		inject(DestroyRef).onDestroy(() => {
+			physics.afterStepCallbacks.delete(callback);
+		});
+	});
+}

libs/rapier/src/lib/physics.ts

@@ -127,8 +127,8 @@ export class NgtrPhysics {
 	colliderStates: NgtrColliderStateMap = new Map();
 	rigidBodyEvents: NgtrEventMap = new Map();
 	colliderEvents: NgtrEventMap = new Map();
-	private beforeStepCallbacks: NgtrWorldStepCallbackSet = new Set();
-	private afterStepCallbacks: NgtrWorldStepCallbackSet = new Set();
+	beforeStepCallbacks: NgtrWorldStepCallbackSet = new Set();
+	afterStepCallbacks: NgtrWorldStepCallbackSet = new Set();
 
 	private eventQueue = computed(() => {
 		const rapier = this.rapier();

libs/rapier/src/lib/rigid-body.ts

@@ -11,8 +11,16 @@ import {
 	model,
 	output,
 	untracked,
+	viewChildren,
 } from '@angular/core';
-import { ActiveEvents, Collider, ColliderDesc, RigidBody, RigidBodyDesc } from '@dimforge/rapier3d-compat';
+import {
+	ActiveEvents,
+	Collider,
+	ColliderDesc,
+	InteractionGroups,
+	RigidBody,
+	RigidBodyDesc,
+} from '@dimforge/rapier3d-compat';
 import {
 	applyProps,
 	extend,
@@ -29,6 +37,7 @@ import {
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import * as THREE from 'three';
 import { Object3D } from 'three';
+import { COLLISION_GROUPS_HANDLER } from './interaction-groups';
 import { NgtrPhysics } from './physics';
 import { _matrix4, _position, _rotation, _scale, _vector3 } from './shared';
 import type {
@@ -439,6 +448,27 @@ export const rigidBodyDefaultOptions: NgtrRigidBodyOptions = {
 	schemas: [CUSTOM_ELEMENTS_SCHEMA],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	imports: [NgtrAnyCollider],
+	providers: [
+		{
+			provide: COLLISION_GROUPS_HANDLER,
+			useFactory: (rigidBody: NgtrRigidBody) => {
+				return () => {
+					const anyColliders = rigidBody.anyColliders();
+					if (!anyColliders.length) return;
+
+					const colliders = anyColliders.map((anyCollider) => anyCollider['collider']);
+					return (interactionGroups: InteractionGroups) => {
+						for (const colliderFn of colliders) {
+							const collider = colliderFn();
+							if (!collider) continue;
+							collider.setCollisionGroups(interactionGroups);
+						}
+					};
+				};
+			},
+			deps: [NgtrRigidBody],
+		},
+	],
 })
 export class NgtrRigidBody {
 	type = input.required({
@@ -455,6 +485,8 @@ export class NgtrRigidBody {
 	userData = input<NgtThreeElements['ngt-object3D']['userData']>();
 	options = input(rigidBodyDefaultOptions, { transform: mergeInputs(rigidBodyDefaultOptions) });
 
+	anyColliders = viewChildren(NgtrAnyCollider);
+
 	private object3DParameters = computed(() => {
 		const [position, rotation, scale, quaternion, userData] = [
 			this.position(),