refactor(soba): adjust performances with new renderer

nartc · nartc · commit a83ba07ce4a8 · 2025-01-26T09:05:15.000-06:00
diff --git a/libs/core/src/lib/three-types.ts b/libs/core/src/lib/three-types.ts
@@ -124,6 +124,10 @@ export type NgtThreeElementsMap = {
 	 * @from node_modules/@types/three/src/core/Object3D.d.ts
 	 */
 	'ngt-object3D': Extract<keyof ThreeExports, 'Object3D'>;
+	/**
+	 * @from node_modules/@types/three/src/objects/LOD.d.ts
+	 */
+	'ngt-lOD': Extract<keyof ThreeExports, 'LOD'>;
 	/**
 	 * @from node_modules/@types/three/src/objects/Mesh.d.ts
 	 */
diff --git a/libs/soba/performances/src/lib/adaptive-dpr.ts b/libs/soba/performances/src/lib/adaptive-dpr.ts
@@ -7,35 +7,30 @@ export class NgtsAdaptiveDpr {
 
 	constructor() {
 		const store = injectStore();
-		const gl = store.select('gl');
-		const active = store.select('internal', 'active');
-		const current = store.select('performance', 'current');
-		const initialDpr = store.select('viewport', 'initialDpr');
-		const setDpr = store.select('setDpr');
 
 		effect(() => {
-			const [_current, pixelated, domElement, _setDpr, _initialDpr] = [
-				current(),
+			const [current, pixelated, domElement, setDpr, initialDpr] = [
+				store.performance.current(),
 				untracked(this.pixelated),
-				untracked(gl).domElement,
-				untracked(setDpr),
-				untracked(initialDpr),
+				store.snapshot.gl.domElement,
+				store.snapshot.setDpr,
+				store.snapshot.viewport.initialDpr,
 			];
 
-			_setDpr(_current * _initialDpr);
-			if (pixelated && domElement) domElement.style.imageRendering = _current === 1 ? 'auto' : 'pixelated';
+			setDpr(current * initialDpr);
+			if (pixelated && domElement) domElement.style.imageRendering = current === 1 ? 'auto' : 'pixelated';
 		});
 
 		inject(DestroyRef).onDestroy(() => {
-			const [domElement, _active, _setDpr, _initialDpr, pixelated] = [
-				untracked(gl).domElement,
-				untracked(active),
-				untracked(setDpr),
-				untracked(initialDpr),
+			const [domElement, active, setDpr, initialDpr, pixelated] = [
+				store.snapshot.gl.domElement,
+				store.snapshot.internal.active,
+				store.snapshot.setDpr,
+				store.snapshot.viewport.initialDpr,
 				untracked(this.pixelated),
 			];
 
-			if (_active) _setDpr(_initialDpr);
+			if (active) setDpr(initialDpr);
 			if (pixelated && domElement) domElement.style.imageRendering = 'auto';
 		});
 	}
diff --git a/libs/soba/performances/src/lib/adaptive-events.ts b/libs/soba/performances/src/lib/adaptive-events.ts
@@ -5,12 +5,11 @@ import { injectStore } from 'angular-three';
 export class NgtsAdaptiveEvents {
 	constructor() {
 		const store = injectStore();
-		const current = store.select('performance', 'current');
 		const currentEnabled = store.snapshot.events.enabled;
 
 		effect((onCleanup) => {
-			const _current = current();
-			onCleanup(() => store.snapshot.setEvents({ enabled: _current === 1 }));
+			const current = store.performance.current();
+			onCleanup(() => store.snapshot.setEvents({ enabled: current === 1 }));
 		});
 
 		inject(DestroyRef).onDestroy(() => {
diff --git a/libs/soba/performances/src/lib/detailed.ts b/libs/soba/performances/src/lib/detailed.ts
@@ -7,11 +7,12 @@ import {
 	input,
 	viewChild,
 } from '@angular/core';
-import { extend, getLocalState, injectBeforeRender, NgtLOD, omit, pick } from 'angular-three';
+import { extend, getInstanceState, injectBeforeRender, NgtThreeElements, omit, pick } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
+import * as THREE from 'three';
 import { LOD } from 'three';
 
-export interface NgtsDetailedOptions extends Partial<NgtLOD> {
+export interface NgtsDetailedOptions extends Partial<NgtThreeElements['ngt-lOD']> {
 	hysteresis: number;
 }
 
@@ -32,19 +33,19 @@ const defaultOptions: NgtsDetailedOptions = {
 export class NgtsDetailed {
 	distances = input.required<number[]>();
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
-	parameters = omit(this.options, ['hysteresis']);
+	protected parameters = omit(this.options, ['hysteresis']);
 
-	lodRef = viewChild.required<ElementRef<LOD>>('lod');
+	lodRef = viewChild.required<ElementRef<THREE.LOD>>('lod');
 	private hysteresis = pick(this.options, 'hysteresis');
 
 	constructor() {
 		extend({ LOD });
 
 		effect(() => {
 			const lod = this.lodRef().nativeElement;
-			const localState = getLocalState(lod);
-			if (!localState) return;
-			const [, distances, hysteresis] = [localState.objects(), this.distances(), this.hysteresis()];
+			const instanceState = getInstanceState(lod);
+			if (!instanceState) return;
+			const [, distances, hysteresis] = [instanceState.objects(), this.distances(), this.hysteresis()];
 			lod.levels.length = 0;
 			lod.children.forEach((object, index) => {
 				lod.levels.push({ object, distance: distances[index], hysteresis });
diff --git a/libs/soba/performances/src/lib/instances/instances.ts b/libs/soba/performances/src/lib/instances/instances.ts
@@ -9,18 +9,19 @@ import {
 	input,
 	viewChild,
 } from '@angular/core';
-import { checkUpdate, extend, injectBeforeRender, NgtInstancedMesh, omit, pick, resolveRef } from 'angular-three';
+import { checkUpdate, extend, injectBeforeRender, NgtThreeElements, omit, pick, resolveRef } from 'angular-three';
 import { setUpdateRange } from 'angular-three-soba/misc';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { DynamicDrawUsage, InstancedBufferAttribute, InstancedMesh, Matrix4, Quaternion, Vector3 } from 'three';
+import * as THREE from 'three';
+import { InstancedBufferAttribute, InstancedMesh } from 'three';
 import { NgtPositionMesh, PositionMesh } from './position-mesh';
 
-const parentMatrix = new Matrix4();
-const instanceMatrix = new Matrix4();
-const tempMatrix = new Matrix4();
-const translation = new Vector3();
-const rotation = new Quaternion();
-const scale = new Vector3();
+const parentMatrix = new THREE.Matrix4();
+const instanceMatrix = new THREE.Matrix4();
+const tempMatrix = new THREE.Matrix4();
+const translation = new THREE.Vector3();
+const rotation = new THREE.Quaternion();
+const scale = new THREE.Vector3();
 
 @Component({
 	selector: 'ngts-instance',
@@ -35,7 +36,7 @@ const scale = new Vector3();
 export class NgtsInstance {
 	options = input({} as Partial<NgtPositionMesh>);
 
-	instances = inject(NgtsInstances);
+	protected instances = inject(NgtsInstances);
 
 	positionMeshRef = viewChild.required<ElementRef<PositionMesh>>('positionMesh');
 
@@ -49,7 +50,7 @@ export class NgtsInstance {
 	}
 }
 
-export interface NgtsInstancesOptions extends Partial<NgtInstancedMesh> {
+export interface NgtsInstancesOptions extends Partial<NgtThreeElements['ngt-instanced-mesh']> {
 	range?: number;
 	limit: number;
 	frames: number;
@@ -91,12 +92,12 @@ const defaultOptions: NgtsInstancesOptions = {
 	changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NgtsInstances {
-	protected readonly DynamicDrawUsage = DynamicDrawUsage;
+	protected readonly DynamicDrawUsage = THREE.DynamicDrawUsage;
 
 	options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
 	protected parameters = omit(this.options, ['limit', 'frames', 'range']);
 
-	instancedMeshRef = viewChild.required<ElementRef<InstancedMesh>>('instancedMesh');
+	instancedMeshRef = viewChild.required<ElementRef<THREE.InstancedMesh>>('instancedMesh');
 
 	private limit = pick(this.options, 'limit');
 
diff --git a/libs/soba/performances/src/lib/instances/position-mesh.ts b/libs/soba/performances/src/lib/instances/position-mesh.ts
@@ -1,32 +1,21 @@
 import { ElementRef } from '@angular/core';
-import { NgtObject3DNode, resolveRef } from 'angular-three';
-import {
-	BufferGeometry,
-	Color,
-	Group,
-	InstancedMesh,
-	Intersection,
-	Material,
-	Matrix4,
-	Mesh,
-	MeshBasicMaterial,
-	Raycaster,
-} from 'three';
+import { NgtThreeElement, resolveRef } from 'angular-three';
+import * as THREE from 'three';
 
-export type NgtPositionMesh = NgtObject3DNode<PositionMesh, typeof PositionMesh>;
+export type NgtPositionMesh = NgtThreeElement<typeof PositionMesh>;
 
-const _instanceLocalMatrix = new Matrix4();
-const _instanceWorldMatrix = new Matrix4();
-const _instanceIntersects: Intersection[] = [];
-const _mesh = new Mesh<BufferGeometry, MeshBasicMaterial>();
+const _instanceLocalMatrix = new THREE.Matrix4();
+const _instanceWorldMatrix = new THREE.Matrix4();
+const _instanceIntersects: THREE.Intersection[] = [];
+const _mesh = new THREE.Mesh<THREE.BufferGeometry, THREE.MeshBasicMaterial>();
 
-export class PositionMesh extends Group {
-	color: Color;
-	instance: ElementRef<InstancedMesh> | InstancedMesh | null | undefined;
+export class PositionMesh extends THREE.Group {
+	color: THREE.Color;
+	instance: ElementRef<THREE.InstancedMesh> | THREE.InstancedMesh | null | undefined;
 
 	constructor() {
 		super();
-		this.color = new Color('white');
+		this.color = new THREE.Color('white');
 		this.instance = undefined;
 	}
 
@@ -36,7 +25,7 @@ export class PositionMesh extends Group {
 	}
 
 	// And this will allow the virtual instance to receive events
-	override raycast(raycaster: Raycaster, intersects: Intersection[]) {
+	override raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]) {
 		const parent = resolveRef(this.instance);
 		if (!parent) return;
 		if (!parent.geometry || !parent.material) return;
@@ -51,7 +40,7 @@ export class PositionMesh extends Group {
 		// the mesh represents this single instance
 		_mesh.matrixWorld = _instanceWorldMatrix;
 		// raycast side according to instance material
-		if (parent.material instanceof Material) _mesh.material.side = parent.material.side;
+		if (parent.material instanceof THREE.Material) _mesh.material.side = parent.material.side;
 		else _mesh.material.side = parent.material[0].side;
 		_mesh.raycast(raycaster, _instanceIntersects);
 		// process the result of raycast
diff --git a/libs/soba/performances/src/lib/points/points.ts b/libs/soba/performances/src/lib/points/points.ts
@@ -9,9 +9,10 @@ import {
 	input,
 	viewChild,
 } from '@angular/core';
-import { checkUpdate, extend, injectBeforeRender, NgtPoints, omit, pick, resolveRef } from 'angular-three';
+import { checkUpdate, extend, injectBeforeRender, NgtThreeElements, omit, pick, resolveRef } from 'angular-three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
-import { BufferAttribute, BufferGeometry, DynamicDrawUsage, Matrix4, Points, Vector3 } from 'three';
+import * as THREE from 'three';
+import { BufferAttribute, BufferGeometry, Points } from 'three';
 import { NgtPositionPoint, PositionPoint } from './position-point';
 
 @Component({
@@ -29,7 +30,7 @@ export class NgtsPoint {
 
 	positionPointRef = viewChild.required<ElementRef<PositionPoint>>('positionPoint');
 
-	points = inject(NgtsPointsInstances);
+	protected points = inject(NgtsPointsInstances);
 
 	constructor() {
 		extend({ PositionPoint });
@@ -85,7 +86,7 @@ export class NgtsPointsBuffer {
 	stride = input<2 | 3>(3);
 	options = input({} as Partial<NgtPositionPoint>);
 
-	pointsRef = viewChild.required<ElementRef<Points>>('points');
+	pointsRef = viewChild.required<ElementRef<THREE.Points>>('points');
 
 	constructor() {
 		extend({ Points, BufferAttribute, BufferGeometry });
@@ -101,13 +102,13 @@ export class NgtsPointsBuffer {
 		});
 	}
 
-	protected readonly DynamicDrawUsage = DynamicDrawUsage;
+	protected readonly DynamicDrawUsage = THREE.DynamicDrawUsage;
 }
 
-const parentMatrix = new Matrix4();
-const position = new Vector3();
+const parentMatrix = new THREE.Matrix4();
+const position = new THREE.Vector3();
 
-export interface NgtsPointsInstancesOptions extends Partial<NgtPoints> {
+export interface NgtsPointsInstancesOptions extends Partial<NgtThreeElements['ngt-points']> {
 	range?: number;
 	limit: number;
 }
@@ -157,7 +158,7 @@ export class NgtsPointsInstances {
 	options = input(defaultInstancesOptions, { transform: mergeInputs(defaultInstancesOptions) });
 	parameters = omit(this.options, ['limit', 'range']);
 
-	pointsRef = viewChild.required<ElementRef<Points>>('points');
+	pointsRef = viewChild.required<ElementRef<THREE.Points>>('points');
 
 	private limit = pick(this.options, 'limit');
 
@@ -224,5 +225,5 @@ export class NgtsPointsInstances {
 		};
 	}
 
-	protected readonly DynamicDrawUsage = DynamicDrawUsage;
+	protected readonly DynamicDrawUsage = THREE.DynamicDrawUsage;
 }
diff --git a/libs/soba/performances/src/lib/points/position-point.ts b/libs/soba/performances/src/lib/points/position-point.ts
@@ -1,23 +1,23 @@
 import { ElementRef } from '@angular/core';
-import { NgtObject3DNode, resolveRef } from 'angular-three';
-import { Color, Group, Intersection, Matrix4, Points, Ray, Raycaster, Sphere, Vector3 } from 'three';
+import { NgtThreeElement, resolveRef } from 'angular-three';
+import * as THREE from 'three';
 
-export type NgtPositionPoint = NgtObject3DNode<PositionPoint, typeof PositionPoint>;
+export type NgtPositionPoint = NgtThreeElement<typeof PositionPoint>;
 
-const _inverseMatrix = new Matrix4();
-const _ray = new Ray();
-const _sphere = new Sphere();
-const _position = new Vector3();
+const _inverseMatrix = new THREE.Matrix4();
+const _ray = new THREE.Ray();
+const _sphere = new THREE.Sphere();
+const _position = new THREE.Vector3();
 
-export class PositionPoint extends Group {
+export class PositionPoint extends THREE.Group {
 	size: number;
-	color: Color;
-	instance: ElementRef<Points> | Points | null | undefined;
+	color: THREE.Color;
+	instance: ElementRef<THREE.Points> | THREE.Points | null | undefined;
 
 	constructor() {
 		super();
 		this.size = 0;
-		this.color = new Color('white');
+		this.color = new THREE.Color('white');
 		this.instance = undefined;
 	}
 
@@ -26,7 +26,7 @@ export class PositionPoint extends Group {
 		return resolveRef(this.instance)?.geometry;
 	}
 
-	override raycast(raycaster: Raycaster, intersects: Intersection[]) {
+	override raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]) {
 		const parent = resolveRef(this.instance);
 		if (!parent || !parent.geometry) return;
 		const instanceId = parent.userData['instances'].indexOf(this);
@@ -45,13 +45,13 @@ export class PositionPoint extends Group {
 		const rayPointDistanceSq = _ray.distanceSqToPoint(this.position);
 
 		if (rayPointDistanceSq < localThresholdSq) {
-			const intersectPoint = new Vector3();
+			const intersectPoint = new THREE.Vector3();
 			_ray.closestPointToPoint(this.position, intersectPoint);
 			intersectPoint.applyMatrix4(this.matrixWorld);
 			const distance = raycaster.ray.origin.distanceTo(intersectPoint);
 			if (distance < raycaster.near || distance > raycaster.far) return;
 			intersects.push({
-				distance: distance,
+				distance,
 				distanceToRay: Math.sqrt(rayPointDistanceSq),
 				point: intersectPoint,
 				index: instanceId,
diff --git a/libs/soba/performances/src/lib/segments/segment-object.ts b/libs/soba/performances/src/lib/segments/segment-object.ts
@@ -1,17 +1,17 @@
-import { NgtNode } from 'angular-three';
-import { Color, Vector3 } from 'three';
+import { NgtThreeElement } from 'angular-three';
+import * as THREE from 'three';
 
-export type NgtSegmentObject = NgtNode<SegmentObject, typeof SegmentObject>;
+export type NgtSegmentObject = NgtThreeElement<typeof SegmentObject>;
 
 export class SegmentObject {
-	color: Color;
-	start: Vector3;
-	end: Vector3;
+	color: THREE.Color;
+	start: THREE.Vector3;
+	end: THREE.Vector3;
 
 	constructor() {
-		this.color = new Color('white');
-		this.start = new Vector3(0, 0, 0);
-		this.end = new Vector3(0, 0, 0);
+		this.color = new THREE.Color('white');
+		this.start = new THREE.Vector3(0, 0, 0);
+		this.end = new THREE.Vector3(0, 0, 0);
 	}
 }
 
diff --git a/libs/soba/performances/src/lib/segments/segments.ts b/libs/soba/performances/src/lib/segments/segments.ts
