angular-three-soba 2.0.0-beta.2 → 2.0.0-beta.21

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

@@ -0,0 +1,956 @@
+import * as i0 from '@angular/core';
+import { signal, effect, untracked, Directive, Input, ElementRef, forwardRef, inject, NgZone, Injector, Component, CUSTOM_ELEMENTS_SCHEMA, computed, TemplateRef, ContentChild } from '@angular/core';
+import { injectNgtStore, extend, createInjectionToken, injectNgtRef, signalStore, checkUpdate, injectBeforeRender, is, NgtArgs } from 'angular-three';
+import { NgTemplateOutlet, NgIf } from '@angular/common';
+import { NgtsSobaContent } from 'angular-three-soba/utils';
+import * as THREE from 'three';
+import { InstancedMesh, InstancedBufferAttribute, Points, BufferGeometry, BufferAttribute } from 'three';
+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';
+                }
+            });
+        });
+        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.2.2", ngImport: i0, type: NgtsAdaptiveDpr, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: NgtsAdaptiveDpr, isStandalone: true, selector: "ngts-adaptive-dpr", inputs: { _pixelated: ["pixelated", "_pixelated"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsAdaptiveDpr, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ngts-adaptive-dpr', standalone: true }]
+        }], ctorParameters: function () { return []; }, propDecorators: { _pixelated: [{
+                type: Input,
+                args: [{ alias: 'pixelated' }]
+            }] } });
+
+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 });
+            });
+        });
+        effect(() => {
+            const current = this.current();
+            this.setEvents({ enabled: current === 1 });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsAdaptiveEvents, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: NgtsAdaptiveEvents, isStandalone: true, selector: "ngts-adaptive-events", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsAdaptiveEvents, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ngts-adaptive-events', standalone: true }]
+        }], ctorParameters: function () { return []; } });
+
+const _instanceLocalMatrix = /*@__PURE__*/ new THREE.Matrix4();
+const _instanceWorldMatrix = /*@__PURE__*/ new THREE.Matrix4();
+const _instanceIntersects =  [];
+const _mesh = /*@__PURE__*/ new THREE.Mesh();
+class PositionMesh extends THREE.Group {
+    constructor() {
+        super();
+        this.color = new THREE.Color('white');
+        this.instance = new ElementRef(undefined);
+        this.instanceKey = new ElementRef(undefined);
+    }
+    // This will allow the virtual instance have bounds
+    get geometry() {
+        return this.instance.nativeElement?.geometry;
+    }
+    // And this will allow the virtual instance to receive events
+    raycast(raycaster, intersects) {
+        const parent = this.instance.nativeElement;
+        if (!parent)
+            return;
+        if (!parent.geometry || !parent.material)
+            return;
+        _mesh.geometry = parent.geometry;
+        const matrixWorld = parent.matrixWorld;
+        const instanceId = parent.userData['instances'].indexOf(this.instanceKey);
+        // 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 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
+        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;
+    }
+}
+
+extend({ PositionMesh, InstancedMesh, InstancedBufferAttribute });
+const parentMatrix = /*@__PURE__*/ new THREE.Matrix4();
+const instanceMatrix = /*@__PURE__*/ new THREE.Matrix4();
+const tempMatrix = /*@__PURE__*/ new THREE.Matrix4();
+const translation = /*@__PURE__*/ new THREE.Vector3();
+const rotation = /*@__PURE__*/ new THREE.Quaternion();
+const scale = /*@__PURE__*/ new THREE.Vector3();
+const [injectNgtsInstancesApi, provideNgtsInstancesApi] = createInjectionToken((instances) => instances.api, { isRoot: false, deps: [forwardRef(() => NgtsInstances)] });
+class NgtsInstance {
+    constructor() {
+        this.instanceRef = injectNgtRef();
+        this.zone = inject(NgZone);
+        this.injector = inject(Injector);
+        this.instancesApi = injectNgtsInstancesApi();
+    }
+    ngOnInit() {
+        effect((onCleanup) => {
+            const cleanup = this.zone.runOutsideAngular(() => this.instancesApi.subscribe(this.instanceRef));
+            onCleanup(cleanup);
+        }, { injector: this.injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsInstance, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsInstance, isStandalone: true, selector: "ngts-instance", inputs: { instanceRef: "instanceRef" }, ngImport: i0, template: `
+		<ngt-position-mesh
+			[ref]="instanceRef"
+			[instance]="instancesApi.getParent()"
+			[instanceKey]="instanceRef"
+			ngtCompound
+		>
+			<ng-content />
+		</ngt-position-mesh>
+	`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsInstance, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-instance',
+                    standalone: true,
+                    template: `
+		<ngt-position-mesh
+			[ref]="instanceRef"
+			[instance]="instancesApi.getParent()"
+			[instanceKey]="instanceRef"
+			ngtCompound
+		>
+			<ng-content />
+		</ngt-position-mesh>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { instanceRef: [{
+                type: Input
+            }] } });
+class NgtsInstances {
+    set _range(range) {
+        this.inputs.set({ range });
+    }
+    set _limit(limit) {
+        this.inputs.set({ limit });
+    }
+    set _frames(frames) {
+        this.inputs.set({ frames });
+    }
+    constructor() {
+        this.DynamicDrawUsage = THREE.DynamicDrawUsage;
+        this.nullRaycast = () => null;
+        this.inputs = signalStore({ limit: 1000, frames: Infinity });
+        this.instancesRef = injectNgtRef();
+        this.limit = this.inputs.select('limit');
+        this.positionMeshes = signal([]);
+        this.meshes = this.positionMeshes.asReadonly();
+        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.api = {
+            getParent: () => this.instancesRef,
+            subscribe: (meshRef) => {
+                untracked(() => {
+                    this.positionMeshes.update((s) => [...s, meshRef]);
+                });
+                return () => {
+                    untracked(() => {
+                        this.positionMeshes.update((s) => s.filter((positionMesh) => positionMesh !== meshRef));
+                    });
+                };
+            },
+        };
+        this.checkUpdate();
+        this.beforeRender();
+    }
+    checkUpdate() {
+        effect(() => {
+            const instancedMesh = this.instancesRef.nativeElement;
+            if (!instancedMesh)
+                return;
+            // NOTE: not sure why matrices ends up a different instance than array
+            // we reassign it here
+            instancedMesh.instanceMatrix.array = untracked(this.buffers).matrices;
+            checkUpdate(instancedMesh.instanceMatrix);
+        });
+    }
+    beforeRender() {
+        let count = 0;
+        let updateRange = 0;
+        injectBeforeRender(() => {
+            const [{ frames, limit, range }, instancedMesh, instances, { matrices, colors }] = [
+                this.inputs.get(),
+                this.instancesRef.nativeElement,
+                this.meshes(),
+                this.buffers(),
+            ];
+            if ((frames === Infinity || count < frames) && instancedMesh) {
+                instancedMesh.updateMatrix();
+                instancedMesh.updateMatrixWorld();
+                parentMatrix.copy(instancedMesh.matrixWorld).invert();
+                updateRange = Math.min(limit, range !== undefined ? range : limit, instances.length);
+                instancedMesh.count = updateRange;
+                instancedMesh.instanceMatrix.updateRange.count = updateRange * 16;
+                if (instancedMesh.instanceColor) {
+                    instancedMesh.instanceColor.updateRange.count = updateRange * 3;
+                }
+                for (let i = 0; i < instances.length; i++) {
+                    const instanceRef = instances[i];
+                    const instance = is.ref(instanceRef) ? instanceRef.nativeElement : instanceRef;
+                    // 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);
+                    instanceMatrix.toArray(matrices, i * 16);
+                    checkUpdate(instancedMesh.instanceMatrix);
+                    instance.color.toArray(colors, i * 3);
+                    checkUpdate(instancedMesh.instanceColor);
+                }
+                count++;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsInstances, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsInstances, isStandalone: true, selector: "ngts-instances", inputs: { instancesRef: "instancesRef", _range: ["range", "_range"], _limit: ["limit", "_limit"], _frames: ["frames", "_frames"] }, providers: [provideNgtsInstancesApi()], queries: [{ propertyName: "content", first: true, predicate: NgtsSobaContent, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: `
+		<ngt-instanced-mesh
+			[userData]="{ instances: meshes() }"
+			[ref]="instancesRef"
+			[matrixAutoUpdate]="false"
+			[raycast]="nullRaycast"
+			ngtCompound
+		>
+			<ngt-instanced-buffer-attribute
+				*args="[buffers().matrices, 16]"
+				attach="instanceMatrix"
+				[usage]="DynamicDrawUsage"
+			/>
+			<ngt-instanced-buffer-attribute
+				*args="[buffers().colors, 3]"
+				attach="instanceColor"
+				[usage]="DynamicDrawUsage"
+			/>
+			<ng-container *ngTemplateOutlet="content" />
+		</ngt-instanced-mesh>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsInstances, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-instances',
+                    standalone: true,
+                    template: `
+		<ngt-instanced-mesh
+			[userData]="{ instances: meshes() }"
+			[ref]="instancesRef"
+			[matrixAutoUpdate]="false"
+			[raycast]="nullRaycast"
+			ngtCompound
+		>
+			<ngt-instanced-buffer-attribute
+				*args="[buffers().matrices, 16]"
+				attach="instanceMatrix"
+				[usage]="DynamicDrawUsage"
+			/>
+			<ngt-instanced-buffer-attribute
+				*args="[buffers().colors, 3]"
+				attach="instanceColor"
+				[usage]="DynamicDrawUsage"
+			/>
+			<ng-container *ngTemplateOutlet="content" />
+		</ngt-instanced-mesh>
+	`,
+                    imports: [NgtArgs, NgTemplateOutlet],
+                    providers: [provideNgtsInstancesApi()],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { instancesRef: [{
+                type: Input
+            }], _range: [{
+                type: Input,
+                args: [{ alias: 'range' }]
+            }], _limit: [{
+                type: Input,
+                args: [{ alias: 'limit' }]
+            }], _frames: [{
+                type: Input,
+                args: [{ alias: 'frames' }]
+            }], content: [{
+                type: ContentChild,
+                args: [NgtsSobaContent, { static: true, read: TemplateRef }]
+            }] } });
+
+class NgtsPointsInput {
+    constructor() {
+        this.inputs = signalStore({
+            stride: 3,
+            limit: 1000,
+        });
+        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 });
+    }
+    set _limit(limit) {
+        this.inputs.set({ limit });
+    }
+    set _positions(positions) {
+        this.inputs.set({ positions });
+    }
+    set _colors(colors) {
+        this.inputs.set({ colors });
+    }
+    set _sizes(sizes) {
+        this.inputs.set({ sizes });
+    }
+    set _stride(stride) {
+        this.inputs.set({ stride });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsPointsInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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' }]
+            }] } });
+
+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 {
+    constructor() {
+        super();
+        this.size = 0;
+        this.color = new THREE.Color('white');
+        this.instance = new ElementRef(undefined);
+        this.instanceKey = new ElementRef(undefined);
+    }
+    // This will allow the virtual instance have bounds
+    get geometry() {
+        return this.instance.nativeElement?.geometry;
+    }
+    raycast(raycaster, intersects) {
+        const parent = this.instance.nativeElement;
+        if (!parent || !parent.geometry)
+            return;
+        const instanceId = parent.userData['instances'].indexOf(this.instanceKey);
+        // If the instance wasn't found or exceeds the parents draw range, bail out
+        if (instanceId === -1 || instanceId > parent.geometry.drawRange.count)
+            return;
+        const threshold = raycaster.params.Points?.threshold ?? 1;
+        _sphere.set(this.getWorldPosition(_position), threshold);
+        if (raycaster.ray.intersectsSphere(_sphere) === false)
+            return;
+        _inverseMatrix.copy(parent.matrixWorld).invert();
+        _ray.copy(raycaster.ray).applyMatrix4(_inverseMatrix);
+        const localThreshold = threshold / ((this.scale.x + this.scale.y + this.scale.z) / 3);
+        const localThresholdSq = localThreshold * localThreshold;
+        const rayPointDistanceSq = _ray.distanceSqToPoint(this.position);
+        if (rayPointDistanceSq < localThresholdSq) {
+            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,
+                distanceToRay: Math.sqrt(rayPointDistanceSq),
+                point: intersectPoint,
+                index: instanceId,
+                face: null,
+                object: this,
+            });
+        }
+    }
+}
+
+extend({ Points, BufferGeometry, BufferAttribute, PositionPoint });
+const [injectNgtsPointsInstanceApi, provideNgtsPointsInstancesApi] = createInjectionToken(function pointsInstancesApi(instances) {
+    return instances.api;
+}, { isRoot: false, deps: [forwardRef(() => NgtsPointsInstances)] });
+class NgtsPointsInstances {
+    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 = {
+            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']);
+        });
+    }
+    beforeRender() {
+        injectBeforeRender(() => {
+            const points = this.pointsInput.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']);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsPointsInstances, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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
+		>
+			<ngt-buffer-geometry>
+				<ngt-buffer-attribute
+					attach="attributes.position"
+					[count]="positions().length / 3"
+					[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"
+					[usage]="DynamicDrawUsage"
+				/>
+			</ngt-buffer-geometry>
+			<ng-content />
+		</ngt-points>
+	`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsPointsInstances, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-points-instances',
+                    standalone: true,
+                    template: `
+		<ngt-points
+			[ref]="pointsInput.pointsRef"
+			[userData]="{ instances: points() }"
+			[matrixAutoUpdate]="false"
+			[raycast]="nullRaycast"
+			ngtCompound
+		>
+			<ngt-buffer-geometry>
+				<ngt-buffer-attribute
+					attach="attributes.position"
+					[count]="positions().length / 3"
+					[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"
+					[usage]="DynamicDrawUsage"
+				/>
+			</ngt-buffer-geometry>
+			<ng-content />
+		</ngt-points>
+	`,
+                    providers: [provideNgtsPointsInstancesApi()],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; } });
+class NgtsPoint {
+    constructor() {
+        this.pointRef = injectNgtRef();
+        this.zone = inject(NgZone);
+        this.injector = inject(Injector);
+        this.pointsInstancesApi = injectNgtsPointsInstanceApi();
+    }
+    ngOnInit() {
+        effect((onCleanup) => {
+            const cleanup = this.zone.runOutsideAngular(() => this.pointsInstancesApi.subscribe(this.pointRef));
+            onCleanup(cleanup);
+        }, { injector: this.injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsPoint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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.2.2", 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;
+            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']);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsPointsBuffers, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtsPointsBuffers, isStandalone: true, selector: "ngts-points-buffers", ngImport: i0, template: `
+		<ngt-points [ref]="pointsInput.pointsRef" ngtCompound>
+			<ngt-buffer-geometry>
+				<ngt-buffer-attribute
+					attach="attributes.position"
+					[count]="pointsInput.positions().length / pointsInput.stride()"
+					[array]="pointsInput.positions()"
+					[itemSize]="pointsInput.stride()"
+					[usage]="DynamicDrawUsage"
+				/>
+				<ngt-buffer-attribute
+					attach="attributes.color"
+					[count]="pointsInput.colorsLength() / pointsInput.stride()"
+					[array]="pointsInput.colors()"
+					[itemSize]="pointsInput.stride()"
+					[usage]="DynamicDrawUsage"
+				/>
+				<ngt-buffer-attribute
+					attach="attributes.size"
+					[count]="pointsInput.sizesLength() / pointsInput.stride()"
+					[array]="pointsInput.sizes()"
+					[itemSize]="1"
+					[usage]="DynamicDrawUsage"
+				/>
+			</ngt-buffer-geometry>
+			<ng-content />
+		</ngt-points>
+	`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsPointsBuffers, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-points-buffers',
+                    standalone: true,
+                    template: `
+		<ngt-points [ref]="pointsInput.pointsRef" ngtCompound>
+			<ngt-buffer-geometry>
+				<ngt-buffer-attribute
+					attach="attributes.position"
+					[count]="pointsInput.positions().length / pointsInput.stride()"
+					[array]="pointsInput.positions()"
+					[itemSize]="pointsInput.stride()"
+					[usage]="DynamicDrawUsage"
+				/>
+				<ngt-buffer-attribute
+					attach="attributes.color"
+					[count]="pointsInput.colorsLength() / pointsInput.stride()"
+					[array]="pointsInput.colors()"
+					[itemSize]="pointsInput.stride()"
+					[usage]="DynamicDrawUsage"
+				/>
+				<ngt-buffer-attribute
+					attach="attributes.size"
+					[count]="pointsInput.sizesLength() / pointsInput.stride()"
+					[array]="pointsInput.sizes()"
+					[itemSize]="1"
+					[usage]="DynamicDrawUsage"
+				/>
+			</ngt-buffer-geometry>
+			<ng-content />
+		</ngt-points>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; } });
+class NgtsPoints extends NgtsPointsInput {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsPoints, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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.2.2", 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 }]
+            }] } });
+
+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);
+    }
+}
+
+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);
+            });
+            onCleanup(cleanup);
+        }, { injector: this.injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsSegment, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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()" />
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { segmentRef: [{
+                type: Input
+            }], _start: [{
+                type: Input,
+                args: [{ alias: 'start' }]
+            }], _end: [{
+                type: Input,
+                args: [{ alias: 'end' }]
+            }], _color: [{
+                type: Input,
+                args: [{ alias: 'color' }]
+            }] } });
+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.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.beforeRender();
+    }
+    beforeRender() {
+        injectBeforeRender(() => {
+            const [segments, limit, positions, colors] = [
+                this.segments(),
+                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;
+                if (segment) {
+                    positions[i * 6 + 0] = segment.start.x;
+                    positions[i * 6 + 1] = segment.start.y;
+                    positions[i * 6 + 2] = segment.start.z;
+                    positions[i * 6 + 3] = segment.end.x;
+                    positions[i * 6 + 4] = segment.end.y;
+                    positions[i * 6 + 5] = segment.end.z;
+                    colors[i * 6 + 0] = segment.color.r;
+                    colors[i * 6 + 1] = segment.color.g;
+                    colors[i * 6 + 2] = segment.color.b;
+                    colors[i * 6 + 3] = segment.color.r;
+                    colors[i * 6 + 4] = segment.color.g;
+                    colors[i * 6 + 5] = segment.color.b;
+                }
+            }
+            this.geometry.setColors(colors);
+            this.geometry.setPositions(positions);
+            this.line.computeLineDistances();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsSegments, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", 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">
+			<ngt-primitive *args="[geometry]" attach="geometry" />
+			<ngt-primitive
+				*args="[material]"
+				attach="material"
+				ngtCompound
+				[vertexColors]="true"
+				[resolution]="resolution"
+				[linewidth]="lineWidth()"
+			/>
+			<ng-content />
+		</ngt-primitive>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtsSegments, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-segments',
+                    standalone: true,
+                    template: `
+		<ngt-primitive *args="[line]" [ref]="segmentsRef">
+			<ngt-primitive *args="[geometry]" attach="geometry" />
+			<ngt-primitive
+				*args="[material]"
+				attach="material"
+				ngtCompound
+				[vertexColors]="true"
+				[resolution]="resolution"
+				[linewidth]="lineWidth()"
+			/>
+			<ng-content />
+		</ngt-primitive>
+	`,
+                    imports: [NgtArgs],
+                    providers: [provideNgtsSegmentsApi()],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { segmentsRef: [{
+                type: Input
+            }], _limit: [{
+                type: Input,
+                args: [{ alias: 'limit' }]
+            }], _lineWidth: [{
+                type: Input,
+                args: [{ alias: 'lineWidth' }]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgtsAdaptiveDpr, NgtsAdaptiveEvents, NgtsInstance, NgtsInstances, NgtsPoint, NgtsPoints, NgtsPointsBuffers, NgtsPointsInstances, NgtsSegment, NgtsSegments, PositionMesh, SegmentObject, injectNgtsInstancesApi, injectNgtsPointsInstanceApi, injectNgtsSegmentsApi, provideNgtsInstancesApi, provideNgtsPointsInstancesApi, provideNgtsSegmentsApi };
+//# sourceMappingURL=angular-three-soba-performances.mjs.map