angular-three-soba 2.0.0-beta.8 → 2.0.0

package/fesm2022/angular-three-soba-performances.mjs

@@ -1,159 +1,379 @@
 import * as i0 from '@angular/core';
-import { signal, effect, untracked, Directive, Input, computed, ElementRef, forwardRef, inject, Injector, Component, CUSTOM_ELEMENTS_SCHEMA, NgZone, TemplateRef, ContentChild } from '@angular/core';
-import { injectNgtStore, signalStore, injectNgtRef, extend, createInjectionToken, checkUpdate, injectBeforeRender, is, NgtArgs } from 'angular-three';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
-import { NgtsSobaContent } from 'angular-three-soba/utils';
-import * as THREE from 'three';
-import { Points, BufferGeometry, BufferAttribute } from 'three';
+import { input, afterNextRender, untracked, Directive, viewChild, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, inject, computed } from '@angular/core';
+import { injectStore, omit, pick, extend, getLocalState, injectBeforeRender, resolveRef, checkUpdate, NgtArgs, vector3 } from 'angular-three';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+import { mergeInputs } from 'ngxtension/inject-inputs';
+import { LOD, Matrix4, Mesh, Group, Color, Material, Vector3, Quaternion, DynamicDrawUsage, InstancedMesh, InstancedBufferAttribute, Ray, Sphere, Points, BufferAttribute, BufferGeometry, Vector2 } from 'three';
+import { setUpdateRange } from 'angular-three-soba/misc';
 import { Line2, LineMaterial, LineSegmentsGeometry } from 'three-stdlib';
 
 class NgtsAdaptiveDpr {
-    set _pixelated(pixelated) {
-        this.pixelated.set(pixelated);
-    }
     constructor() {
-        this.pixelated = signal(false);
-        this.store = injectNgtStore();
-        this.current = this.store.select('performance', 'current');
-        this.active = this.store.get('internal', 'active');
-        this.setDpr = this.store.get('setDpr');
-        this.initialDpr = this.store.get('viewport', 'initialDpr');
-        this.domElement = this.store.get('gl', 'domElement');
-        effect((onCleanup) => {
-            onCleanup(() => {
-                if (this.active) {
-                    this.setDpr(this.initialDpr);
-                }
-                if (this.pixelated() && this.domElement) {
-                    this.domElement.style.imageRendering = 'auto';
-                }
+        this.pixelated = input(false);
+        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');
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const domElement = untracked(gl).domElement;
+                return () => {
+                    const [_active, _setDpr, _initialDpr, pixelated] = [
+                        untracked(active),
+                        untracked(setDpr),
+                        untracked(initialDpr),
+                        untracked(this.pixelated),
+                    ];
+                    if (_active)
+                        _setDpr(_initialDpr);
+                    if (pixelated && domElement)
+                        domElement.style.imageRendering = 'auto';
+                };
+            });
+            autoEffect(() => {
+                const [_current, pixelated, domElement, _setDpr, _initialDpr] = [
+                    current(),
+                    untracked(this.pixelated),
+                    untracked(gl).domElement,
+                    untracked(setDpr),
+                    untracked(initialDpr),
+                ];
+                _setDpr(_current * _initialDpr);
+                if (pixelated && domElement)
+                    domElement.style.imageRendering = _current === 1 ? 'auto' : 'pixelated';
             });
-        });
-        effect(() => {
-            const current = this.current();
-            this.setDpr(current * this.initialDpr);
-            if (untracked(this.pixelated) && this.domElement) {
-                this.domElement.style.imageRendering = current === 1 ? 'auto' : 'pixelated';
-            }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsAdaptiveDpr, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtsAdaptiveDpr, isStandalone: true, selector: "ngts-adaptive-dpr", inputs: { _pixelated: ["pixelated", "_pixelated"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAdaptiveDpr, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtsAdaptiveDpr, isStandalone: true, selector: "ngts-adaptive-dpr", inputs: { pixelated: { classPropertyName: "pixelated", publicName: "pixelated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsAdaptiveDpr, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAdaptiveDpr, decorators: [{
             type: Directive,
             args: [{ selector: 'ngts-adaptive-dpr', standalone: true }]
-        }], ctorParameters: function () { return []; }, propDecorators: { _pixelated: [{
-                type: Input,
-                args: [{ alias: 'pixelated' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
 class NgtsAdaptiveEvents {
     constructor() {
-        this.store = injectNgtStore();
-        this.setEvents = this.store.get('setEvents');
-        this.current = this.store.select('performance', 'current');
-        effect((onCleanup) => {
-            const enabled = this.store.get('events', 'enabled');
-            onCleanup(() => {
-                this.setEvents({ enabled });
+        const autoEffect = injectAutoEffect();
+        const store = injectStore();
+        const current = store.select('performance', 'current');
+        afterNextRender(() => {
+            autoEffect(() => {
+                const enabled = store.snapshot.events.enabled;
+                return () => store.snapshot.setEvents({ enabled });
+            });
+            autoEffect(() => {
+                const _current = current();
+                return () => store.snapshot.setEvents({ enabled: _current === 1 });
             });
-        });
-        effect(() => {
-            const current = this.current();
-            this.setEvents({ enabled: current === 1 });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsAdaptiveEvents, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtsAdaptiveEvents, isStandalone: true, selector: "ngts-adaptive-events", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAdaptiveEvents, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: NgtsAdaptiveEvents, isStandalone: true, selector: "ngts-adaptive-events", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsAdaptiveEvents, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsAdaptiveEvents, decorators: [{
             type: Directive,
-            args: [{ selector: 'ngts-adaptive-events', standalone: true }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ standalone: true, selector: 'ngts-adaptive-events' }]
+        }], ctorParameters: () => [] });
 
-class NgtsPointsInput {
+const defaultOptions$1 = {
+    hysteresis: 0,
+};
+class NgtsDetailed {
     constructor() {
-        this.inputs = signalStore({
-            stride: 3,
-            limit: 1000,
+        this.distances = input.required();
+        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
+        this.parameters = omit(this.options, ['hysteresis']);
+        this.lodRef = viewChild.required('lod');
+        this.hysteresis = pick(this.options, 'hysteresis');
+        extend({ LOD });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const lod = this.lodRef().nativeElement;
+                const localState = getLocalState(lod);
+                if (!localState)
+                    return;
+                const [, distances, hysteresis] = [localState.objects(), this.distances(), this.hysteresis()];
+                lod.levels.length = 0;
+                lod.children.forEach((object, index) => {
+                    lod.levels.push({ object, distance: distances[index], hysteresis });
+                });
+            });
+        });
+        injectBeforeRender(({ camera }) => {
+            this.lodRef().nativeElement.update(camera);
         });
-        this.pointsRef = injectNgtRef();
-        this.limit = this.inputs.select('limit');
-        this.range = this.inputs.select('range');
-        this.positions = this.inputs.select('positions');
-        this.colors = this.inputs.select('colors');
-        this.colorsLength = computed(() => this.colors()?.length || 0);
-        this.sizes = this.inputs.select('sizes');
-        this.sizesLength = computed(() => this.sizes()?.length || 0);
-        this.stride = this.inputs.select('stride');
     }
-    set _range(range) {
-        this.inputs.set({ range });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsDetailed, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsDetailed, isStandalone: true, selector: "ngts-detailed", inputs: { distances: { classPropertyName: "distances", publicName: "distances", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "lodRef", first: true, predicate: ["lod"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-lOD #lod [parameters]="parameters()">
+			<ng-content />
+		</ngt-lOD>
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsDetailed, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-detailed',
+                    standalone: true,
+                    template: `
+		<ngt-lOD #lod [parameters]="parameters()">
+			<ng-content />
+		</ngt-lOD>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+
+const _instanceLocalMatrix = new Matrix4();
+const _instanceWorldMatrix = new Matrix4();
+const _instanceIntersects = [];
+const _mesh = new Mesh();
+class PositionMesh extends Group {
+    constructor() {
+        super();
+        this.color = new Color('white');
+        this.instance = undefined;
     }
-    set _limit(limit) {
-        this.inputs.set({ limit });
+    // This will allow the virtual instance have bounds
+    get geometry() {
+        return resolveRef(this.instance)?.geometry;
     }
-    set _positions(positions) {
-        this.inputs.set({ positions });
+    // And this will allow the virtual instance to receive events
+    raycast(raycaster, intersects) {
+        const parent = resolveRef(this.instance);
+        if (!parent)
+            return;
+        if (!parent.geometry || !parent.material)
+            return;
+        _mesh.geometry = parent.geometry;
+        const matrixWorld = parent.matrixWorld;
+        const instanceId = parent.userData['instances'].indexOf(this);
+        // If the instance wasn't found or exceeds the parents draw range, bail out
+        if (instanceId === -1 || instanceId > parent.count)
+            return;
+        // calculate the world matrix for each instance
+        parent.getMatrixAt(instanceId, _instanceLocalMatrix);
+        _instanceWorldMatrix.multiplyMatrices(matrixWorld, _instanceLocalMatrix);
+        // 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;
+        else
+            _mesh.material.side = parent.material[0].side;
+        _mesh.raycast(raycaster, _instanceIntersects);
+        // process the result of raycast
+        for (let i = 0, l = _instanceIntersects.length; i < l; i++) {
+            const intersect = _instanceIntersects[i];
+            intersect.instanceId = instanceId;
+            intersect.object = this;
+            intersects.push(intersect);
+        }
+        _instanceIntersects.length = 0;
     }
-    set _colors(colors) {
-        this.inputs.set({ colors });
+}
+
+const parentMatrix$1 = new Matrix4();
+const instanceMatrix = new Matrix4();
+const tempMatrix = new Matrix4();
+const translation = new Vector3();
+const rotation = new Quaternion();
+const scale = new Vector3();
+class NgtsInstance {
+    constructor() {
+        this.options = input({});
+        this.instances = inject(NgtsInstances);
+        this.positionMeshRef = viewChild.required('positionMesh');
+        extend({ PositionMesh });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                return this.instances.subscribe(this.positionMeshRef().nativeElement);
+            });
+        });
     }
-    set _sizes(sizes) {
-        this.inputs.set({ sizes });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsInstance, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsInstance, isStandalone: true, selector: "ngts-instance", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "positionMeshRef", first: true, predicate: ["positionMesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-position-mesh #positionMesh [instance]="instances.instancedMeshRef()" [parameters]="options()">
+			<ng-content />
+		</ngt-position-mesh>
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsInstance, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-instance',
+                    standalone: true,
+                    template: `
+		<ngt-position-mesh #positionMesh [instance]="instances.instancedMeshRef()" [parameters]="options()">
+			<ng-content />
+		</ngt-position-mesh>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+const defaultOptions = {
+    limit: 1000,
+    frames: Infinity,
+};
+class NgtsInstances {
+    constructor() {
+        this.DynamicDrawUsage = DynamicDrawUsage;
+        this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+        this.parameters = omit(this.options, ['limit', 'frames', 'range']);
+        this.instancedMeshRef = viewChild.required('instancedMesh');
+        this.limit = pick(this.options, 'limit');
+        this.buffers = computed(() => {
+            const limit = this.limit();
+            const matrices = new Float32Array(limit * 16);
+            for (let i = 0; i < limit; i++) {
+                tempMatrix.identity().toArray(matrices, i * 16);
+            }
+            const colors = new Float32Array([...Array.from({ length: limit * 3 }, () => 1)]);
+            return { matrices, colors };
+        });
+        this.instances = [];
+        extend({ InstancedMesh, InstancedBufferAttribute });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const instancedMesh = this.instancedMeshRef()?.nativeElement;
+                if (!instancedMesh)
+                    return;
+                checkUpdate(instancedMesh.instanceMatrix);
+            });
+        });
+        let iterations = 0;
+        let count = 0;
+        injectBeforeRender(() => {
+            const instancedMesh = this.instancedMeshRef()?.nativeElement;
+            if (!instancedMesh)
+                return;
+            const { frames, limit, range } = this.options();
+            const { matrices, colors } = this.buffers();
+            if (frames === Infinity || iterations < frames) {
+                instancedMesh.updateMatrix();
+                instancedMesh.updateMatrixWorld();
+                parentMatrix$1.copy(instancedMesh.matrixWorld).invert();
+                count = Math.min(limit, range !== undefined ? range : limit, this.instances.length);
+                instancedMesh.count = count;
+                setUpdateRange(instancedMesh.instanceMatrix, { offset: 0, count: count * 16 });
+                if (instancedMesh.instanceColor) {
+                    setUpdateRange(instancedMesh.instanceColor, { offset: 0, count: count * 3 });
+                }
+                for (let i = 0; i < this.instances.length; i++) {
+                    const instance = resolveRef(this.instances[i]);
+                    if (instance) {
+                        // Multiply the inverse of the InstancedMesh world matrix or else
+                        // Instances will be double-transformed if <Instances> isn't at identity
+                        instance.matrixWorld.decompose(translation, rotation, scale);
+                        instanceMatrix.compose(translation, rotation, scale).premultiply(parentMatrix$1);
+                        instanceMatrix.toArray(matrices, i * 16);
+                        checkUpdate(instancedMesh.instanceMatrix);
+                        instance.color.toArray(colors, i * 3);
+                        checkUpdate(instancedMesh.instanceColor);
+                    }
+                }
+                iterations++;
+            }
+        });
     }
-    set _stride(stride) {
-        this.inputs.set({ stride });
+    subscribe(ref) {
+        this.instances.push(ref);
+        return () => {
+            this.instances = this.instances.filter((i) => i !== ref);
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPointsInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtsPointsInput, inputs: { pointsRef: "pointsRef", _range: ["range", "_range"], _limit: ["limit", "_limit"], _positions: ["positions", "_positions"], _colors: ["colors", "_colors"], _sizes: ["sizes", "_sizes"], _stride: ["stride", "_stride"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsInstances, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsInstances, isStandalone: true, selector: "ngts-instances", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "instancedMeshRef", first: true, predicate: ["instancedMesh"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-instanced-mesh
+			#instancedMesh
+			[userData]="{ instances }"
+			[matrixAutoUpdate]="false"
+			[raycast]="null"
+			[parameters]="parameters()"
+		>
+			<ngt-instanced-buffer-attribute
+				attach="instanceMatrix"
+				[usage]="DynamicDrawUsage"
+				[count]="buffers().matrices.length / 16"
+				[array]="buffers().matrices"
+				[itemSize]="16"
+			/>
+			<ngt-instanced-buffer-attribute
+				attach="instanceColor"
+				[usage]="DynamicDrawUsage"
+				[count]="buffers().colors.length / 3"
+				[array]="buffers().colors"
+				[itemSize]="3"
+			/>
+			<ng-content />
+		</ngt-instanced-mesh>
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPointsInput, decorators: [{
-            type: Directive
-        }], propDecorators: { pointsRef: [{
-                type: Input
-            }], _range: [{
-                type: Input,
-                args: [{ alias: 'range' }]
-            }], _limit: [{
-                type: Input,
-                args: [{ alias: 'limit' }]
-            }], _positions: [{
-                type: Input,
-                args: [{ alias: 'positions' }]
-            }], _colors: [{
-                type: Input,
-                args: [{ alias: 'colors' }]
-            }], _sizes: [{
-                type: Input,
-                args: [{ alias: 'sizes' }]
-            }], _stride: [{
-                type: Input,
-                args: [{ alias: 'stride' }]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsInstances, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-instances',
+                    standalone: true,
+                    template: `
+		<ngt-instanced-mesh
+			#instancedMesh
+			[userData]="{ instances }"
+			[matrixAutoUpdate]="false"
+			[raycast]="null"
+			[parameters]="parameters()"
+		>
+			<ngt-instanced-buffer-attribute
+				attach="instanceMatrix"
+				[usage]="DynamicDrawUsage"
+				[count]="buffers().matrices.length / 16"
+				[array]="buffers().matrices"
+				[itemSize]="16"
+			/>
+			<ngt-instanced-buffer-attribute
+				attach="instanceColor"
+				[usage]="DynamicDrawUsage"
+				[count]="buffers().colors.length / 3"
+				[array]="buffers().colors"
+				[itemSize]="3"
+			/>
+			<ng-content />
+		</ngt-instanced-mesh>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
+                }]
+        }], ctorParameters: () => [] });
 
-const _inverseMatrix = /*@__PURE__*/ new THREE.Matrix4();
-const _ray = /*@__PURE__*/ new THREE.Ray();
-const _sphere = /*@__PURE__*/ new THREE.Sphere();
-const _position = /*@__PURE__*/ new THREE.Vector3();
-class PositionPoint extends THREE.Group {
+const _inverseMatrix = new Matrix4();
+const _ray = new Ray();
+const _sphere = new Sphere();
+const _position = new Vector3();
+class PositionPoint extends Group {
     constructor() {
         super();
         this.size = 0;
-        this.color = new THREE.Color('white');
-        this.instance = new ElementRef(undefined);
-        this.instanceKey = new ElementRef(undefined);
+        this.color = new Color('white');
+        this.instance = undefined;
     }
     // This will allow the virtual instance have bounds
     get geometry() {
-        return this.instance.nativeElement?.geometry;
+        return resolveRef(this.instance)?.geometry;
     }
     raycast(raycaster, intersects) {
-        const parent = this.instance.nativeElement;
+        const parent = resolveRef(this.instance);
         if (!parent || !parent.geometry)
             return;
-        const instanceId = parent.userData['instances'].indexOf(this.instanceKey);
+        const instanceId = parent.userData['instances'].indexOf(this);
         // If the instance wasn't found or exceeds the parents draw range, bail out
         if (instanceId === -1 || instanceId > parent.geometry.drawRange.count)
             return;
@@ -167,7 +387,7 @@ class PositionPoint extends THREE.Group {
         const localThresholdSq = localThreshold * localThreshold;
         const rayPointDistanceSq = _ray.distanceSqToPoint(this.position);
         if (rayPointDistanceSq < localThresholdSq) {
-            const intersectPoint = new THREE.Vector3();
+            const intersectPoint = new Vector3();
             _ray.closestPointToPoint(this.position, intersectPoint);
             intersectPoint.applyMatrix4(this.matrixWorld);
             const distance = raycaster.ray.origin.distanceTo(intersectPoint);
@@ -185,281 +405,265 @@ class PositionPoint extends THREE.Group {
     }
 }
 
-extend({ Points, BufferGeometry, BufferAttribute, PositionPoint });
-const [injectNgtsPointsInstanceApi, provideNgtsPointsInstancesApi] = createInjectionToken(function pointsInstancesApi(instances) {
-    return instances.api;
-}, { isRoot: false, deps: [forwardRef(() => NgtsPointsInstances)] });
-class NgtsPointsInstances {
+class NgtsPoint {
     constructor() {
-        this.nullRaycast = () => null;
-        this.DynamicDrawUsage = THREE.DynamicDrawUsage;
-        this.pointsInput = inject(NgtsPointsInput);
-        this.positionPoints = signal([]);
-        this.parentMatrix = new THREE.Matrix4();
-        this.position = new THREE.Vector3();
-        this.points = this.positionPoints.asReadonly();
-        this.positions = computed(() => new Float32Array(this.pointsInput.limit() * 3));
-        this.colors = computed(() => Float32Array.from({ length: this.pointsInput.limit() * 3 }, () => 1));
-        this.sizes = computed(() => Float32Array.from({ length: this.pointsInput.limit() }, () => 1));
-        this.injector = inject(Injector);
-        this.api = computed(() => ({
-            getParent: () => this.pointsInput.pointsRef,
-            subscribe: (pointRef) => {
-                untracked(() => {
-                    this.positionPoints.update((s) => [...s, pointRef]);
-                });
-                return () => {
-                    untracked(() => {
-                        this.positionPoints.update((s) => s.filter((positionPoint) => positionPoint !== pointRef));
-                    });
-                };
-            },
-        }));
-        this.checkUpdatePositionAttribute();
-        this.beforeRender();
-    }
-    checkUpdatePositionAttribute() {
-        effect(() => {
-            const points = this.pointsInput.pointsRef.nativeElement;
-            if (!points)
-                return;
-            checkUpdate(points.geometry.attributes['position']);
+        this.options = input({});
+        this.positionPointRef = viewChild.required('positionPoint');
+        this.points = inject(NgtsPointsInstances);
+        extend({ PositionPoint });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                return this.points.subscribe(this.positionPointRef().nativeElement);
+            });
         });
     }
-    beforeRender() {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPoint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsPoint, isStandalone: true, selector: "ngts-point", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "positionPointRef", first: true, predicate: ["positionPoint"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-position-point #positionPoint [parameters]="options()" [instance]="points.pointsRef()">
+			<ng-content />
+		</ngt-position-point>
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPoint, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-point',
+                    standalone: true,
+                    template: `
+		<ngt-position-point #positionPoint [parameters]="options()" [instance]="points.pointsRef()">
+			<ng-content />
+		</ngt-position-point>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+class NgtsPointsBuffer {
+    constructor() {
+        this.positions = input.required();
+        this.colors = input();
+        this.sizes = input();
+        this.stride = input(3);
+        this.options = input({});
+        this.pointsRef = viewChild.required('points');
+        this.DynamicDrawUsage = DynamicDrawUsage;
+        extend({ Points, BufferAttribute, BufferGeometry });
         injectBeforeRender(() => {
-            const points = this.pointsInput.pointsRef.nativeElement;
+            const points = this.pointsRef()?.nativeElement;
             if (!points)
                 return;
-            const [limit, range, positionPoints, positions, colors, sizes] = [
-                this.pointsInput.limit(),
-                this.pointsInput.range(),
-                this.positionPoints(),
-                this.positions(),
-                this.colors(),
-                this.sizes(),
-            ];
-            points.updateMatrix();
-            points.updateMatrixWorld();
-            this.parentMatrix.copy(points.matrixWorld).invert();
-            points.geometry.drawRange.count = Math.min(limit, range !== undefined ? range : limit, positionPoints.length);
-            for (let i = 0; i < positionPoints.length; i++) {
-                const positionPointRef = positionPoints[i];
-                const positionPoint = is.ref(positionPointRef) ? positionPointRef.nativeElement : positionPointRef;
-                if (!positionPoint)
-                    continue;
-                positionPoint.getWorldPosition(this.position).applyMatrix4(this.parentMatrix);
-                this.position.toArray(positions, i * 3);
-                checkUpdate(points.geometry.attributes['position']);
-                positionPoint.matrixWorldNeedsUpdate = true;
-                positionPoint.color.toArray(colors, i * 3);
-                checkUpdate(points.geometry.attributes['color']);
-                sizes.set([positionPoint.size], i);
-                checkUpdate(points.geometry.attributes['size']);
-            }
+            const attributes = points.geometry.attributes;
+            checkUpdate(attributes['position']);
+            if (this.colors())
+                checkUpdate(attributes['color']);
+            if (this.sizes())
+                checkUpdate(attributes['size']);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPointsInstances, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsPointsInstances, isStandalone: true, selector: "ngts-points-instances", providers: [provideNgtsPointsInstancesApi()], ngImport: i0, template: `
-		<ngt-points
-			[ref]="pointsInput.pointsRef"
-			[userData]="{ instances: points() }"
-			[matrixAutoUpdate]="false"
-			[raycast]="nullRaycast"
-			ngtCompound
-		>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPointsBuffer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsPointsBuffer, isStandalone: true, selector: "ngts-points-buffer", inputs: { positions: { classPropertyName: "positions", publicName: "positions", isSignal: true, isRequired: true, transformFunction: null }, colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null }, stride: { classPropertyName: "stride", publicName: "stride", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "pointsRef", first: true, predicate: ["points"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-points #points [parameters]="options()">
 			<ngt-buffer-geometry>
 				<ngt-buffer-attribute
 					attach="attributes.position"
-					[count]="positions().length / 3"
+					[count]="positions().length / stride()"
 					[array]="positions()"
-					[itemSize]="3"
-					[usage]="DynamicDrawUsage"
-				/>
-				<ngt-buffer-attribute
-					attach="attributes.color"
-					[count]="colors().length / 3"
-					[array]="colors()"
-					[itemSize]="3"
-					[usage]="DynamicDrawUsage"
-				/>
-				<ngt-buffer-attribute
-					attach="attributes.size"
-					[count]="sizes().length"
-					[array]="sizes()"
-					[itemSize]="1"
+					[itemSize]="stride()"
 					[usage]="DynamicDrawUsage"
 				/>
+				@if (colors(); as colors) {
+					<ngt-buffer-attribute
+						attach="attributes.color"
+						[count]="colors.length / stride()"
+						[array]="colors"
+						[itemSize]="3"
+						[usage]="DynamicDrawUsage"
+					/>
+				}
+				@if (sizes(); as sizes) {
+					<ngt-buffer-attribute
+						attach="attributes.size"
+						[count]="sizes.length / stride()"
+						[array]="sizes"
+						[itemSize]="1"
+						[usage]="DynamicDrawUsage"
+					/>
+				}
 			</ngt-buffer-geometry>
 			<ng-content />
 		</ngt-points>
-	`, isInline: true }); }
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPointsInstances, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPointsBuffer, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-points-instances',
+                    selector: 'ngts-points-buffer',
                     standalone: true,
                     template: `
-		<ngt-points
-			[ref]="pointsInput.pointsRef"
-			[userData]="{ instances: points() }"
-			[matrixAutoUpdate]="false"
-			[raycast]="nullRaycast"
-			ngtCompound
-		>
+		<ngt-points #points [parameters]="options()">
 			<ngt-buffer-geometry>
 				<ngt-buffer-attribute
 					attach="attributes.position"
-					[count]="positions().length / 3"
+					[count]="positions().length / stride()"
 					[array]="positions()"
-					[itemSize]="3"
-					[usage]="DynamicDrawUsage"
-				/>
-				<ngt-buffer-attribute
-					attach="attributes.color"
-					[count]="colors().length / 3"
-					[array]="colors()"
-					[itemSize]="3"
-					[usage]="DynamicDrawUsage"
-				/>
-				<ngt-buffer-attribute
-					attach="attributes.size"
-					[count]="sizes().length"
-					[array]="sizes()"
-					[itemSize]="1"
+					[itemSize]="stride()"
 					[usage]="DynamicDrawUsage"
 				/>
+				@if (colors(); as colors) {
+					<ngt-buffer-attribute
+						attach="attributes.color"
+						[count]="colors.length / stride()"
+						[array]="colors"
+						[itemSize]="3"
+						[usage]="DynamicDrawUsage"
+					/>
+				}
+				@if (sizes(); as sizes) {
+					<ngt-buffer-attribute
+						attach="attributes.size"
+						[count]="sizes.length / stride()"
+						[array]="sizes"
+						[itemSize]="1"
+						[usage]="DynamicDrawUsage"
+					/>
+				}
 			</ngt-buffer-geometry>
 			<ng-content />
 		</ngt-points>
 	`,
-                    providers: [provideNgtsPointsInstancesApi()],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return []; } });
-class NgtsPoint {
+        }], ctorParameters: () => [] });
+const parentMatrix = new Matrix4();
+const position = new Vector3();
+const defaultInstancesOptions = { limit: 1000 };
+class NgtsPointsInstances {
     constructor() {
-        this.pointRef = injectNgtRef();
-        this.zone = inject(NgZone);
-        this.injector = inject(Injector);
-        this.pointsInstancesApi = injectNgtsPointsInstanceApi();
-    }
-    ngOnInit() {
-        effect((onCleanup) => {
-            const cleanup = this.zone.runOutsideAngular(() => {
-                const api = this.pointsInstancesApi();
-                return api.subscribe(this.pointRef);
+        this.options = input(defaultInstancesOptions, { transform: mergeInputs(defaultInstancesOptions) });
+        this.parameters = omit(this.options, ['limit', 'range']);
+        this.pointsRef = viewChild.required('points');
+        this.limit = pick(this.options, 'limit');
+        this.buffers = computed(() => {
+            const limit = this.limit();
+            return {
+                positions: new Float32Array(limit * 3),
+                colors: Float32Array.from({ length: limit * 3 }, () => 1),
+                sizes: Float32Array.from({ length: limit }, () => 1),
+            };
+        });
+        this.positionPoints = [];
+        this.DynamicDrawUsage = DynamicDrawUsage;
+        extend({ Points, BufferAttribute, BufferGeometry });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const points = this.pointsRef()?.nativeElement;
+                if (!points)
+                    return;
+                checkUpdate(points.geometry.attributes['position']);
             });
-            onCleanup(cleanup);
-        }, { injector: this.injector });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPoint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsPoint, isStandalone: true, selector: "ngts-point", inputs: { pointRef: "pointRef" }, ngImport: i0, template: `
-		<ngt-position-point
-			[instance]="pointsInstancesApi().getParent()"
-			[ref]="pointRef"
-			[instanceKey]="pointRef"
-			ngtCompound
-		>
-			<ng-content />
-		</ngt-position-point>
-	`, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPoint, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-point',
-                    standalone: true,
-                    template: `
-		<ngt-position-point
-			[instance]="pointsInstancesApi().getParent()"
-			[ref]="pointRef"
-			[instanceKey]="pointRef"
-			ngtCompound
-		>
-			<ng-content />
-		</ngt-position-point>
-	`,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { pointRef: [{
-                type: Input
-            }] } });
-class NgtsPointsBuffers {
-    constructor() {
-        this.DynamicDrawUsage = THREE.DynamicDrawUsage;
-        this.pointsInput = inject(NgtsPointsInput);
-        this.store = injectNgtStore();
+        });
         injectBeforeRender(() => {
-            const points = this.pointsInput.pointsRef.nativeElement;
+            const points = this.pointsRef()?.nativeElement;
             if (!points)
                 return;
-            const [sizes, colors] = [this.pointsInput.sizes(), this.pointsInput.colors()];
-            const attr = points.geometry.attributes;
-            checkUpdate(attr['position']);
-            if (colors)
-                checkUpdate(attr['color']);
-            if (sizes)
-                checkUpdate(attr['size']);
+            const { limit, range } = this.options();
+            const { positions, sizes, colors } = this.buffers();
+            points.updateMatrix();
+            points.updateMatrixWorld();
+            parentMatrix.copy(points.matrixWorld).invert();
+            points.geometry.drawRange.count = Math.min(limit, range !== undefined ? range : limit, this.positionPoints.length);
+            for (let i = 0; i < this.positionPoints.length; i++) {
+                const positionPoint = resolveRef(this.positionPoints[i]);
+                if (positionPoint) {
+                    positionPoint.getWorldPosition(position).applyMatrix4(parentMatrix);
+                    position.toArray(positions, i * 3);
+                    checkUpdate(points.geometry.attributes['position']);
+                    positionPoint.matrixWorldNeedsUpdate = true;
+                    positionPoint.color.toArray(colors, i * 3);
+                    checkUpdate(points.geometry.attributes['color']);
+                    sizes.set([positionPoint.size], i);
+                    checkUpdate(points.geometry.attributes['size']);
+                }
+            }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPointsBuffers, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsPointsBuffers, isStandalone: true, selector: "ngts-points-buffers", ngImport: i0, template: `
-		<ngt-points [ref]="pointsInput.pointsRef" ngtCompound>
+    subscribe(ref) {
+        this.positionPoints.push(ref);
+        return () => {
+            this.positionPoints = this.positionPoints.filter((p) => p !== ref);
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPointsInstances, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsPointsInstances, isStandalone: true, selector: "ngts-points-instances", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "pointsRef", first: true, predicate: ["points"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-points
+			#points
+			[userData]="{ instances: positionPoints }"
+			[matrixAutoUpdate]="false"
+			[raycast]="null"
+			[parameters]="parameters()"
+		>
 			<ngt-buffer-geometry>
 				<ngt-buffer-attribute
 					attach="attributes.position"
-					[count]="pointsInput.positions().length / pointsInput.stride()"
-					[array]="pointsInput.positions()"
-					[itemSize]="pointsInput.stride()"
+					[count]="buffers().positions.length / 3"
+					[array]="buffers().positions"
+					[itemSize]="3"
 					[usage]="DynamicDrawUsage"
 				/>
 				<ngt-buffer-attribute
 					attach="attributes.color"
-					[count]="pointsInput.colorsLength() / pointsInput.stride()"
-					[array]="pointsInput.colors()"
-					[itemSize]="pointsInput.stride()"
+					[count]="buffers().colors.length / 3"
+					[array]="buffers().colors"
+					[itemSize]="3"
 					[usage]="DynamicDrawUsage"
 				/>
 				<ngt-buffer-attribute
 					attach="attributes.size"
-					[count]="pointsInput.sizesLength() / pointsInput.stride()"
-					[array]="pointsInput.sizes()"
+					[count]="buffers().sizes.length"
+					[array]="buffers().sizes"
 					[itemSize]="1"
 					[usage]="DynamicDrawUsage"
 				/>
 			</ngt-buffer-geometry>
 			<ng-content />
 		</ngt-points>
-	`, isInline: true }); }
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPointsBuffers, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPointsInstances, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-points-buffers',
+                    selector: 'ngts-points-instances',
                     standalone: true,
                     template: `
-		<ngt-points [ref]="pointsInput.pointsRef" ngtCompound>
+		<ngt-points
+			#points
+			[userData]="{ instances: positionPoints }"
+			[matrixAutoUpdate]="false"
+			[raycast]="null"
+			[parameters]="parameters()"
+		>
 			<ngt-buffer-geometry>
 				<ngt-buffer-attribute
 					attach="attributes.position"
-					[count]="pointsInput.positions().length / pointsInput.stride()"
-					[array]="pointsInput.positions()"
-					[itemSize]="pointsInput.stride()"
+					[count]="buffers().positions.length / 3"
+					[array]="buffers().positions"
+					[itemSize]="3"
 					[usage]="DynamicDrawUsage"
 				/>
 				<ngt-buffer-attribute
 					attach="attributes.color"
-					[count]="pointsInput.colorsLength() / pointsInput.stride()"
-					[array]="pointsInput.colors()"
-					[itemSize]="pointsInput.stride()"
+					[count]="buffers().colors.length / 3"
+					[array]="buffers().colors"
+					[itemSize]="3"
 					[usage]="DynamicDrawUsage"
 				/>
 				<ngt-buffer-attribute
 					attach="attributes.size"
-					[count]="pointsInput.sizesLength() / pointsInput.stride()"
-					[array]="pointsInput.sizes()"
+					[count]="buffers().sizes.length"
+					[array]="buffers().sizes"
 					[itemSize]="1"
 					[usage]="DynamicDrawUsage"
 				/>
@@ -468,158 +672,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 		</ngt-points>
 	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return []; } });
-class NgtsPoints extends NgtsPointsInput {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPoints, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsPoints, isStandalone: true, selector: "ngts-points", providers: [{ provide: NgtsPointsInput, useExisting: NgtsPoints }], queries: [{ propertyName: "content", first: true, predicate: NgtsSobaContent, descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: `
-		<ngts-points-buffers *ngIf="positions()">
-			<ng-container *ngTemplateOutlet="content" />
-		</ngts-points-buffers>
-		<ngts-points-instances *ngIf="!positions()" #pointsInstances>
-			<!-- NOTE: passing in the injector to templateOutlet allow the consumers to abstract ngts-point -->
-			<ng-container *ngTemplateOutlet="content; injector: pointsInstances.injector" />
-		</ngts-points-instances>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtsPointsBuffers, selector: "ngts-points-buffers" }, { kind: "component", type: NgtsPointsInstances, selector: "ngts-points-instances" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPoints, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-points',
-                    standalone: true,
-                    template: `
-		<ngts-points-buffers *ngIf="positions()">
-			<ng-container *ngTemplateOutlet="content" />
-		</ngts-points-buffers>
-		<ngts-points-instances *ngIf="!positions()" #pointsInstances>
-			<!-- NOTE: passing in the injector to templateOutlet allow the consumers to abstract ngts-point -->
-			<ng-container *ngTemplateOutlet="content; injector: pointsInstances.injector" />
-		</ngts-points-instances>
-	`,
-                    imports: [NgIf, NgtsPointsBuffers, NgtsPointsInstances, NgTemplateOutlet],
-                    providers: [{ provide: NgtsPointsInput, useExisting: NgtsPoints }],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { content: [{
-                type: ContentChild,
-                args: [NgtsSobaContent, { static: true, read: TemplateRef }]
-            }] } });
+        }], ctorParameters: () => [] });
 
 class SegmentObject {
     constructor() {
-        this.color = new THREE.Color('white');
-        this.start = new THREE.Vector3(0, 0, 0);
-        this.end = new THREE.Vector3(0, 0, 0);
+        this.color = new Color('white');
+        this.start = new Vector3(0, 0, 0);
+        this.end = new Vector3(0, 0, 0);
     }
 }
 
-const normPos = (pos) => pos instanceof THREE.Vector3
-    ? pos
-    : new THREE.Vector3(...(typeof pos === 'number' ? [pos, pos, pos] : pos));
-extend({ SegmentObject });
-const [injectNgtsSegmentsApi, provideNgtsSegmentsApi] = createInjectionToken((segments) => segments.api, { isRoot: false, deps: [forwardRef(() => NgtsSegments)] });
 class NgtsSegment {
     constructor() {
-        this.inputs = signalStore({});
-        this.segmentRef = injectNgtRef();
-        this.segmentsApi = injectNgtsSegmentsApi();
-        this.injector = inject(Injector);
-        this.zone = inject(NgZone);
-        this.start = this.inputs.select('start');
-        this.end = this.inputs.select('end');
-        this.normalizedStart = computed(() => normPos(this.start()));
-        this.normalizedEnd = computed(() => normPos(this.end()));
-        this.color = this.inputs.select('color');
-    }
-    set _start(start) {
-        this.inputs.set({ start });
-    }
-    set _end(end) {
-        this.inputs.set({ end });
-    }
-    set _color(color) {
-        this.inputs.set({ color });
-    }
-    ngOnInit() {
-        effect((onCleanup) => {
-            const cleanup = this.zone.runOutsideAngular(() => {
-                const api = this.segmentsApi();
-                return api.subscribe(this.segmentRef);
+        this.start = input.required();
+        this.end = input.required();
+        this.color = input();
+        this.normalizedStart = vector3(this.start);
+        this.normalizedEnd = vector3(this.end);
+        this.segmentRef = viewChild.required('segment');
+        this.segments = inject(NgtsSegments);
+        extend({ SegmentObject });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                return this.segments.subscribe(this.segmentRef());
             });
-            onCleanup(cleanup);
-        }, { injector: this.injector });
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsSegment, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsSegment, isStandalone: true, selector: "ngts-segment", inputs: { segmentRef: "segmentRef", _start: ["start", "_start"], _end: ["end", "_end"], _color: ["color", "_color"] }, ngImport: i0, template: `
-		<ngt-segment-object [ref]="segmentRef" [color]="color()" [start]="normalizedStart()" [end]="normalizedEnd()" />
-	`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSegment, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsSegment, isStandalone: true, selector: "ngts-segment", inputs: { start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: true, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "segmentRef", first: true, predicate: ["segment"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-segment-object #segment [color]="color()" [start]="normalizedStart()" [end]="normalizedEnd()" />
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsSegment, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSegment, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-segment',
                     standalone: true,
                     template: `
-		<ngt-segment-object [ref]="segmentRef" [color]="color()" [start]="normalizedStart()" [end]="normalizedEnd()" />
+		<ngt-segment-object #segment [color]="color()" [start]="normalizedStart()" [end]="normalizedEnd()" />
 	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { segmentRef: [{
-                type: Input
-            }], _start: [{
-                type: Input,
-                args: [{ alias: 'start' }]
-            }], _end: [{
-                type: Input,
-                args: [{ alias: 'end' }]
-            }], _color: [{
-                type: Input,
-                args: [{ alias: 'color' }]
-            }] } });
+        }], ctorParameters: () => [] });
+const defaultSegmentsOptions = {
+    limit: 1000,
+    lineWidth: 1.0,
+};
 class NgtsSegments {
-    set _limit(limit) {
-        this.inputs.set({ limit });
-    }
-    set _lineWidth(lineWidth) {
-        this.inputs.set({ lineWidth });
-    }
     constructor() {
-        this.inputs = signalStore({ limit: 1000, lineWidth: 1 });
-        this.segmentsRef = injectNgtRef();
-        this.segments = signal([]);
-        this.limit = this.inputs.select('limit');
-        this.positions = computed(() => Array(this.limit() * 6).fill(0));
-        this.colors = computed(() => Array(this.limit() * 6).fill(0));
-        this.resolution = new THREE.Vector2(512, 512);
-        this.lineWidth = this.inputs.select('lineWidth');
+        this.options = input(defaultSegmentsOptions, { transform: mergeInputs(defaultSegmentsOptions) });
+        this.parameters = omit(this.options, ['limit', 'lineWidth']);
+        this.lineWidth = pick(this.options, 'lineWidth');
+        this.limit = pick(this.options, 'limit');
+        this.lineRef = viewChild('line');
+        this.segments = [];
         this.line = new Line2();
         this.material = new LineMaterial();
         this.geometry = new LineSegmentsGeometry();
-        this.api = computed(() => ({
-            subscribe: (segmentRef) => {
-                untracked(() => {
-                    this.segments.update((s) => [...s, segmentRef]);
-                });
-                return () => {
-                    untracked(() => {
-                        this.segments.update((s) => s.filter((segment) => segment !== segmentRef));
-                    });
-                };
-            },
+        this.resolution = new Vector2(512, 512);
+        this.materialParameters = computed(() => ({
+            vertexColors: true,
+            resolution: this.resolution,
+            linewidth: this.lineWidth(),
+            ...this.parameters(),
         }));
-        this.beforeRender();
-    }
-    beforeRender() {
+        this.positions = computed(() => {
+            const limit = this.limit();
+            return Array.from({ length: limit * 6 }, () => 0);
+        });
+        this.colors = computed(() => {
+            const limit = this.limit();
+            return Array.from({ length: limit * 6 }, () => 0);
+        });
         injectBeforeRender(() => {
-            const [segments, limit, positions, colors] = [
-                this.segments(),
-                this.limit(),
-                this.positions(),
-                this.colors(),
-            ];
+            const [limit, positions, colors] = [this.limit(), this.positions(), this.colors()];
             for (let i = 0; i < limit; i++) {
-                const segmentRef = segments[i];
-                const segment = is.ref(segmentRef) ? segmentRef.nativeElement : segmentRef;
+                const segment = resolveRef(this.segments[i]);
                 if (segment) {
                     positions[i * 6 + 0] = segment.start.x;
                     positions[i * 6 + 1] = segment.start.y;
@@ -640,58 +772,42 @@ class NgtsSegments {
             this.line.computeLineDistances();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsSegments, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: NgtsSegments, isStandalone: true, selector: "ngts-segments", inputs: { segmentsRef: "segmentsRef", _limit: ["limit", "_limit"], _lineWidth: ["lineWidth", "_lineWidth"] }, providers: [provideNgtsSegmentsApi()], ngImport: i0, template: `
-		<ngt-primitive *args="[line]" [ref]="segmentsRef">
+    subscribe(ref) {
+        this.segments.push(ref);
+        return () => {
+            this.segments = this.segments.filter((i) => i !== ref);
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSegments, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsSegments, isStandalone: true, selector: "ngts-segments", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "lineRef", first: true, predicate: ["line"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-primitive #line *args="[line]">
 			<ngt-primitive *args="[geometry]" attach="geometry" />
-			<ngt-primitive
-				*args="[material]"
-				attach="material"
-				ngtCompound
-				[vertexColors]="true"
-				[resolution]="resolution"
-				[linewidth]="lineWidth()"
-			/>
+			<ngt-primitive *args="[material]" attach="material" [parameters]="materialParameters()" />
 			<ng-content />
 		</ngt-primitive>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsSegments, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSegments, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-segments',
                     standalone: true,
                     template: `
-		<ngt-primitive *args="[line]" [ref]="segmentsRef">
+		<ngt-primitive #line *args="[line]">
 			<ngt-primitive *args="[geometry]" attach="geometry" />
-			<ngt-primitive
-				*args="[material]"
-				attach="material"
-				ngtCompound
-				[vertexColors]="true"
-				[resolution]="resolution"
-				[linewidth]="lineWidth()"
-			/>
+			<ngt-primitive *args="[material]" attach="material" [parameters]="materialParameters()" />
 			<ng-content />
 		</ngt-primitive>
 	`,
-                    imports: [NgtArgs],
-                    providers: [provideNgtsSegmentsApi()],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { segmentsRef: [{
-                type: Input
-            }], _limit: [{
-                type: Input,
-                args: [{ alias: 'limit' }]
-            }], _lineWidth: [{
-                type: Input,
-                args: [{ alias: 'lineWidth' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgtsAdaptiveDpr, NgtsAdaptiveEvents, NgtsPoint, NgtsPoints, NgtsPointsBuffers, NgtsPointsInstances, NgtsSegment, NgtsSegments, SegmentObject, injectNgtsPointsInstanceApi, injectNgtsSegmentsApi, provideNgtsPointsInstancesApi, provideNgtsSegmentsApi };
+export { NgtsAdaptiveDpr, NgtsAdaptiveEvents, NgtsDetailed, NgtsInstance, NgtsInstances, NgtsPoint, NgtsPointsBuffer, NgtsPointsInstances, NgtsSegment, NgtsSegments };
 //# sourceMappingURL=angular-three-soba-performances.mjs.map