angular-three-soba 2.0.0-beta.4 → 2.0.0-beta.41

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

@@ -1,10 +1,27 @@
 import * as i0 from '@angular/core';
-import { runInInjectionContext, inject, DestroyRef, effect, Directive, ChangeDetectorRef, signal, computed, untracked } from '@angular/core';
-import { assertInjectionContext, injectNgtRef, injectBeforeRender, NgtStore, safeDetectChanges } from 'angular-three';
+import { runInInjectionContext, computed, effect, Directive, inject, ChangeDetectorRef, signal, DestroyRef, untracked, Component, CUSTOM_ELEMENTS_SCHEMA, Input, forwardRef, ViewContainerRef, ViewChild, EventEmitter, TemplateRef, ContentChild, Output } from '@angular/core';
+import { injectNgtRef, injectBeforeRender, injectNgtStore, safeDetectChanges, extend, signalStore, is, applyProps, HTML, checkUpdate, NgtArgs, addEffect, addAfterEffect, NgtPortal, NgtPortalContent } from 'angular-three';
+import { assertInjector } from 'ngxtension/assert-injector';
 import * as THREE from 'three';
+import { Group, Scene, Mesh, PlaneGeometry, OrthographicCamera, LineBasicMaterial, BoxGeometry, MeshNormalMaterial, AxesHelper, MeshStandardMaterial, ShaderMaterial, CanvasTexture, MeshBasicMaterial, Texture } from 'three';
+import { NgIf, DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { NgtsEdges, NgtsText3D } from 'angular-three-soba/abstractions';
+import { CausticsProjectionMaterial, CausticsMaterial } from 'angular-three-soba/shaders';
+import { NgtsSobaContent } from 'angular-three-soba/utils';
+import { FullScreenQuad, DecalGeometry, MeshSurfaceSampler } from 'three-stdlib';
+import { NgtsCenter } from 'angular-three-soba/staging';
+import { createInjectionToken } from 'ngxtension/create-injection-token';
+import Stats from 'stats-gl';
+import { MeshLineGeometry, MeshLineMaterial } from 'meshline';
 
-function injectNgtsAnimations(animationsFactory, { ref, injector } = {}) {
-    injector = assertInjectionContext(injectNgtsAnimations, injector);
+function injectNgtsAnimations(animationsFactory, { ref, injector, playFirstClip = true, } = {}) {
+    injector = assertInjector(injectNgtsAnimations, injector);
+    const mixer = new THREE.AnimationMixer(null);
+    const actions = {};
+    let cached = {};
+    let object = null;
+    const names = [];
+    const clips = [];
     return runInInjectionContext(injector, () => {
         let actualRef = injectNgtRef();
         if (ref) {
@@ -15,26 +32,13 @@ function injectNgtsAnimations(animationsFactory, { ref, injector } = {}) {
                 actualRef = ref;
             }
         }
-        const mixer = new THREE.AnimationMixer(null);
-        const actions = {};
-        let cached = {};
-        const clips = [];
-        const names = [];
-        inject(DestroyRef).onDestroy(() => {
-            // clear cached
-            cached = {};
-            // uncache actions
-            Object.values(actions).forEach((action) => {
-                mixer.uncacheAction(action, actualRef.untracked);
-            });
-            // stop all actions
-            mixer.stopAllAction();
-        });
         injectBeforeRender(({ delta }) => mixer.update(delta));
-        effect(() => {
+        const ready = computed(() => !!actualRef.nativeElement && !!animationsFactory().length);
+        effect((onCleanup) => {
             const actual = actualRef.nativeElement;
             if (!actual)
                 return;
+            object = actual;
             const animations = animationsFactory();
             for (let i = 0; i < animations.length; i++) {
                 const clip = animations[i];
@@ -46,124 +50,2223 @@ function injectNgtsAnimations(animationsFactory, { ref, injector } = {}) {
                         return cached[clip.name] || (cached[clip.name] = mixer.clipAction(clip, actual));
                     },
                 });
-                if (i === 0) {
+                if (i === 0 && playFirstClip) {
                     actions[clip.name].play();
                 }
             }
+            onCleanup(() => {
+                // clear cached
+                cached = {};
+                // stop all actions
+                mixer.stopAllAction();
+                // uncache actions
+                Object.values(actions).forEach((action) => {
+                    mixer.uncacheAction(action, object);
+                });
+                object = null;
+            });
         });
-        return { ref: actualRef, actions, mixer, names, clips };
+        return { ref: actualRef, actions, mixer, names, clips, ready };
     });
 }
 
 class NgtsBakeShadows {
     constructor() {
-        const store = inject(NgtStore);
-        const gl = store.select('gl');
+        const store = injectNgtStore();
+        const glShadowMap = store.select('gl', 'shadowMap');
         effect((onCleanup) => {
-            gl().shadowMap.autoUpdate = false;
-            gl().shadowMap.needsUpdate = true;
+            const shadowMap = glShadowMap();
+            shadowMap.autoUpdate = false;
+            shadowMap.needsUpdate = true;
             onCleanup(() => {
-                gl().shadowMap.autoUpdate = gl().shadowMap.needsUpdate = true;
+                shadowMap.autoUpdate = shadowMap.needsUpdate = true;
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsBakeShadows, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtsBakeShadows, isStandalone: true, selector: "ngts-bake-shadows", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsBakeShadows, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: NgtsBakeShadows, isStandalone: true, selector: "ngts-bake-shadows", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsBakeShadows, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsBakeShadows, decorators: [{
             type: Directive,
             args: [{ selector: 'ngts-bake-shadows', standalone: true }]
         }], ctorParameters: function () { return []; } });
 
 function injectNgtsFBO(fboParams, { injector } = {}) {
-    injector = assertInjectionContext(injectNgtsFBO, injector);
+    injector = assertInjector(injectNgtsFBO, injector);
     return runInInjectionContext(injector, () => {
-        const store = inject(NgtStore);
+        const store = injectNgtStore();
         const cdr = inject(ChangeDetectorRef);
-        const targetRef = signal(null);
-        inject(DestroyRef).onDestroy(() => targetRef().dispose());
-        requestAnimationFrame(() => {
-            const size = store.select('size');
-            const dpr = store.select('viewport', 'dpr');
-            const trigger = computed(() => {
-                const { width, height, settings } = fboParams();
-                const _width = typeof width === 'number' ? width : size().width * dpr();
-                const _height = typeof height === 'number' ? height : size().height * dpr();
-                const _settings = (typeof width === 'number' ? settings : width) || {};
-                return { width: _width, height: _height, settings: _settings };
-            });
-            effect(() => {
-                const { width, height, settings } = trigger();
-                const { samples = 0, depth, ...targetSettings } = settings;
-                let untrackedTarget = untracked(targetRef);
-                if (!untrackedTarget) {
-                    const target = new THREE.WebGLRenderTarget(width, height, {
-                        minFilter: THREE.LinearFilter,
-                        magFilter: THREE.LinearFilter,
-                        type: THREE.HalfFloatType,
-                        ...targetSettings,
-                    });
-                    if (depth)
-                        target.depthTexture = new THREE.DepthTexture(width, height, THREE.FloatType);
-                    target.samples = samples;
-                    targetRef.set(target);
-                    untrackedTarget = untracked(targetRef);
-                }
+        const targetSignal = signal(null);
+        inject(DestroyRef).onDestroy(() => targetSignal()?.dispose());
+        const [defaultWidth, defaultHeight, dpr] = [
+            store.select('size', 'width'),
+            store.select('size', 'height'),
+            store.select('viewport', 'dpr'),
+        ];
+        const fboSettings = computed(() => {
+            const { width, height, settings } = fboParams();
+            return [
+                typeof width === 'number' ? width : defaultWidth() * dpr(),
+                typeof height === 'number' ? height : defaultHeight() * dpr(),
+                (typeof width === 'number' ? settings : width) || {},
+            ];
+        });
+        effect(() => {
+            const [width, height, { samples = 0, depth, ...settings }] = fboSettings();
+            let untrackedTarget = untracked(targetSignal);
+            if (!untrackedTarget) {
+                const target = new THREE.WebGLRenderTarget(width, height, {
+                    minFilter: THREE.LinearFilter,
+                    magFilter: THREE.LinearFilter,
+                    type: THREE.HalfFloatType,
+                    ...settings,
+                });
+                if (depth)
+                    target.depthTexture = new THREE.DepthTexture(width, height, THREE.FloatType);
+                target.samples = samples;
+                untracked(() => {
+                    targetSignal.set(target);
+                });
+                untrackedTarget = untracked(targetSignal);
+            }
+            if (untrackedTarget) {
                 untrackedTarget.setSize(width, height);
                 if (samples)
                     untrackedTarget.samples = samples;
                 safeDetectChanges(cdr);
-            }, { allowSignalWrites: true, injector });
+            }
         });
-        return targetRef.asReadonly();
+        return targetSignal.asReadonly();
+    });
+}
+
+extend({ Group, Scene, Mesh, PlaneGeometry, OrthographicCamera, CausticsProjectionMaterial, LineBasicMaterial });
+const NORMALPROPS = {
+    depth: true,
+    minFilter: THREE.LinearFilter,
+    magFilter: THREE.LinearFilter,
+    type: THREE.UnsignedByteType,
+};
+const CAUSTICPROPS = {
+    minFilter: THREE.LinearMipmapLinearFilter,
+    magFilter: THREE.LinearFilter,
+    type: THREE.FloatType,
+    generateMipmaps: true,
+};
+function createNormalMaterial(side = THREE.FrontSide) {
+    const viewMatrix = { value: new THREE.Matrix4() };
+    return Object.assign(new THREE.MeshNormalMaterial({ side }), {
+        viewMatrix,
+        onBeforeCompile: (shader) => {
+            shader.uniforms.viewMatrix = viewMatrix;
+            shader.fragmentShader =
+                `vec3 inverseTransformDirection( in vec3 dir, in mat4 matrix ) {
+           return normalize( ( vec4( dir, 0.0 ) * matrix ).xyz );
+         }\n` +
+                    shader.fragmentShader.replace('#include <normal_fragment_maps>', `#include <normal_fragment_maps>
+           normal = inverseTransformDirection( normal, viewMatrix );\n`);
+        },
     });
 }
+class NgtsCaustics {
+    /** How many frames it will render, set it to Infinity for runtime, default: 1 */
+    set _frames(frames) {
+        this.inputs.set({ frames });
+    }
+    /** Enables visual cues to help you stage your scene, default: false */
+    set _debug(debug) {
+        this.inputs.set({ debug });
+    }
+    /** Will display caustics only and skip the models, default: false */
+    set _causticsOnly(causticsOnly) {
+        this.inputs.set({ causticsOnly });
+    }
+    /** Will include back faces and enable the backsideIOR prop, default: false */
+    set _backside(backside) {
+        this.inputs.set({ backside });
+    }
+    /** The IOR refraction index, default: 1.1 */
+    set _ior(ior) {
+        this.inputs.set({ ior });
+    }
+    /** The IOR refraction index for back faces (only available when backside is enabled), default: 1.1 */
+    set _backsideIOR(backsideIOR) {
+        this.inputs.set({ backsideIOR });
+    }
+    /** The texel size, default: 0.3125 */
+    set _worldRadius(worldRadius) {
+        this.inputs.set({ worldRadius });
+    }
+    /** Intensity of the prjected caustics, default: 0.05 */
+    set _intensity(intensity) {
+        this.inputs.set({ intensity });
+    }
+    /** Caustics color, default: white */
+    set _color(color) {
+        this.inputs.set({ color });
+    }
+    /** Buffer resolution, default: 2048 */
+    set _resolution(resolution) {
+        this.inputs.set({ resolution });
+    }
+    /** Camera position, it will point towards the contents bounds center, default: [5, 5, 5] */
+    set _lightSource(lightSource) {
+        this.inputs.set({ lightSource });
+    }
+    constructor() {
+        this.CustomBlending = THREE.CustomBlending;
+        this.OneFactor = THREE.OneFactor;
+        this.SrcAlphaFactor = THREE.SrcAlphaFactor;
+        this.Math = Math;
+        this.inputs = signalStore({
+            frames: 1,
+            ior: 1.1,
+            color: 'white',
+            causticsOnly: false,
+            backside: false,
+            backsideIOR: 1.1,
+            worldRadius: 0.3125,
+            intensity: 0.05,
+            resolution: 2024,
+            lightSource: [5, 5, 5],
+        });
+        this.causticsRef = injectNgtRef();
+        this.resolution = this.inputs.select('resolution');
+        this.normalTargetSettings = computed(() => ({
+            width: this.resolution(),
+            height: this.resolution(),
+            settings: NORMALPROPS,
+        }));
+        this.causticsTargetSettings = computed(() => ({
+            width: this.resolution(),
+            height: this.resolution(),
+            settings: CAUSTICPROPS,
+        }));
+        this.normalTargetFbo = injectNgtsFBO(this.normalTargetSettings);
+        this.normalTargetBFbo = injectNgtsFBO(this.normalTargetSettings);
+        this.causticsTargetFbo = injectNgtsFBO(this.causticsTargetSettings);
+        this.causticsTargetBFbo = injectNgtsFBO(this.causticsTargetSettings);
+        this.store = injectNgtStore();
+        this.color = this.inputs.select('color');
+        this.debug = this.inputs.select('debug');
+        this.planeRef = injectNgtRef();
+        this.sceneRef = injectNgtRef();
+        this.cameraRef = injectNgtRef();
+        this.sceneChildren = this.sceneRef.children();
+        this.planeChildren = this.planeRef.children('both');
+        this.causticsChildren = this.causticsRef.children();
+        this.updateWorldMatrix();
+        this.setBeforeRender();
+    }
+    updateWorldMatrix() {
+        effect(() => {
+            const [caustics] = [
+                this.causticsRef.nativeElement,
+                this.inputs.state(),
+                this.causticsChildren(),
+                this.sceneChildren(),
+            ];
+            if (!caustics)
+                return;
+            caustics.updateWorldMatrix(false, true);
+        });
+    }
+    setBeforeRender() {
+        const causticsMaterial = new CausticsMaterial();
+        const causticsQuad = new FullScreenQuad(causticsMaterial);
+        const normalMaterial = createNormalMaterial();
+        const normalMaterialB = createNormalMaterial(THREE.BackSide);
+        effect((onCleanup) => {
+            const [caustics, scene, camera, normalTarget, normalTargetB, causticsTarget, causticsTargetB, plane, sceneChildren,] = [
+                this.causticsRef.nativeElement,
+                this.sceneRef.nativeElement,
+                this.cameraRef.nativeElement,
+                this.normalTargetFbo(),
+                this.normalTargetBFbo(),
+                this.causticsTargetFbo(),
+                this.causticsTargetBFbo(),
+                this.planeRef.nativeElement,
+                this.sceneChildren(),
+                this.planeChildren(),
+            ];
+            if (!caustics)
+                return;
+            caustics.updateWorldMatrix(false, true);
+            if (sceneChildren.length > 1) {
+                const v = new THREE.Vector3();
+                const lpF = new THREE.Frustum();
+                const lpM = new THREE.Matrix4();
+                const lpP = new THREE.Plane();
+                const lightDir = new THREE.Vector3();
+                const lightDirInv = new THREE.Vector3();
+                const bounds = new THREE.Box3();
+                const focusPos = new THREE.Vector3();
+                let count = 0;
+                const sub = this.store.get('internal').subscribe(({ gl }) => {
+                    const { frames, lightSource, resolution, worldRadius, intensity, backside, backsideIOR, ior, causticsOnly, } = this.inputs.get();
+                    if (frames === Infinity || count++ < frames) {
+                        if (Array.isArray(lightSource))
+                            lightDir.fromArray(lightSource).normalize();
+                        else
+                            lightDir.copy(caustics.worldToLocal(lightSource.nativeElement.getWorldPosition(v)).normalize());
+                        lightDirInv.copy(lightDir).multiplyScalar(-1);
+                        let boundsVertices = [];
+                        scene.parent?.matrixWorld.identity();
+                        bounds.setFromObject(scene, true);
+                        boundsVertices.push(new THREE.Vector3(bounds.min.x, bounds.min.y, bounds.min.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.min.x, bounds.min.y, bounds.max.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.min.x, bounds.max.y, bounds.min.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.min.x, bounds.max.y, bounds.max.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.max.x, bounds.min.y, bounds.min.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.max.x, bounds.min.y, bounds.max.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.max.x, bounds.max.y, bounds.min.z));
+                        boundsVertices.push(new THREE.Vector3(bounds.max.x, bounds.max.y, bounds.max.z));
+                        const worldVerts = boundsVertices.map((v) => v.clone());
+                        bounds.getCenter(focusPos);
+                        boundsVertices = boundsVertices.map((v) => v.clone().sub(focusPos));
+                        const lightPlane = lpP.set(lightDirInv, 0);
+                        const projectedVerts = boundsVertices.map((v) => lightPlane.projectPoint(v, new THREE.Vector3()));
+                        const centralVert = projectedVerts
+                            .reduce((a, b) => a.add(b), v.set(0, 0, 0))
+                            .divideScalar(projectedVerts.length);
+                        const radius = projectedVerts
+                            .map((v) => v.distanceTo(centralVert))
+                            .reduce((a, b) => Math.max(a, b));
+                        const dirLength = boundsVertices.map((x) => x.dot(lightDir)).reduce((a, b) => Math.max(a, b));
+                        // Shadows
+                        camera.position.copy(lightDir.clone().multiplyScalar(dirLength).add(focusPos));
+                        camera.lookAt(scene.localToWorld(focusPos.clone()));
+                        const dirMatrix = lpM.lookAt(camera.position, focusPos, v.set(0, 1, 0));
+                        camera.left = -radius;
+                        camera.right = radius;
+                        camera.top = radius;
+                        camera.bottom = -radius;
+                        const yOffset = v.set(0, radius, 0).applyMatrix4(dirMatrix);
+                        const yTime = (camera.position.y + yOffset.y) / lightDir.y;
+                        camera.near = 0.1;
+                        camera.far = yTime;
+                        camera.updateProjectionMatrix();
+                        camera.updateMatrixWorld();
+                        // Now find size of ground plane
+                        const groundProjectedCoords = worldVerts.map((v) => v.add(lightDir.clone().multiplyScalar(-v.y / lightDir.y)));
+                        const centerPos = groundProjectedCoords
+                            .reduce((a, b) => a.add(b), v.set(0, 0, 0))
+                            .divideScalar(groundProjectedCoords.length);
+                        const maxSize = 2 *
+                            groundProjectedCoords
+                                .map((v) => Math.hypot(v.x - centerPos.x, v.z - centerPos.z))
+                                .reduce((a, b) => Math.max(a, b));
+                        plane.scale.setScalar(maxSize);
+                        plane.position.copy(centerPos);
+                        // if (debug) helper.current?.update();
+                        // Inject uniforms
+                        normalMaterialB.viewMatrix.value = normalMaterial.viewMatrix.value = camera.matrixWorldInverse;
+                        const dirLightNearPlane = lpF.setFromProjectionMatrix(lpM.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse)).planes[4];
+                        causticsMaterial.cameraMatrixWorld = camera.matrixWorld;
+                        causticsMaterial.cameraProjectionMatrixInv = camera.projectionMatrixInverse;
+                        causticsMaterial.lightDir = lightDirInv;
+                        causticsMaterial.lightPlaneNormal = dirLightNearPlane.normal;
+                        causticsMaterial.lightPlaneConstant = dirLightNearPlane.constant;
+                        causticsMaterial.near = camera.near;
+                        causticsMaterial.far = camera.far;
+                        causticsMaterial.resolution = resolution;
+                        causticsMaterial.size = radius;
+                        causticsMaterial.intensity = intensity;
+                        causticsMaterial.worldRadius = worldRadius;
+                        // Switch the scene on
+                        scene.visible = true;
+                        // Render front face normals
+                        gl.setRenderTarget(normalTarget);
+                        gl.clear();
+                        scene.overrideMaterial = normalMaterial;
+                        gl.render(scene, camera);
+                        // Render back face normals, if enabled
+                        gl.setRenderTarget(normalTargetB);
+                        gl.clear();
+                        if (backside) {
+                            scene.overrideMaterial = normalMaterialB;
+                            gl.render(scene, camera);
+                        }
+                        // Remove the override material
+                        scene.overrideMaterial = null;
+                        // Render front face caustics
+                        causticsMaterial.ior = ior;
+                        plane.material.lightProjMatrix = camera.projectionMatrix;
+                        plane.material.lightViewMatrix = camera.matrixWorldInverse;
+                        causticsMaterial.normalTexture = normalTarget?.texture;
+                        causticsMaterial.depthTexture = normalTarget?.depthTexture;
+                        gl.setRenderTarget(causticsTarget);
+                        gl.clear();
+                        causticsQuad.render(gl);
+                        // Render back face caustics, if enabled
+                        causticsMaterial.ior = backsideIOR;
+                        causticsMaterial.normalTexture = normalTargetB?.texture;
+                        causticsMaterial.depthTexture = normalTargetB?.depthTexture;
+                        gl.setRenderTarget(causticsTargetB);
+                        gl.clear();
+                        if (backside)
+                            causticsQuad.render(gl);
+                        // Reset render target
+                        gl.setRenderTarget(null);
+                        // Switch the scene off if caustics is all that's wanted
+                        if (causticsOnly)
+                            scene.visible = false;
+                    }
+                });
+                onCleanup(() => sub());
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsCaustics, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: NgtsCaustics, isStandalone: true, selector: "ngts-caustics", inputs: { causticsRef: "causticsRef", _frames: ["frames", "_frames"], _debug: ["debug", "_debug"], _causticsOnly: ["causticsOnly", "_causticsOnly"], _backside: ["backside", "_backside"], _ior: ["ior", "_ior"], _backsideIOR: ["backsideIOR", "_backsideIOR"], _worldRadius: ["worldRadius", "_worldRadius"], _intensity: ["intensity", "_intensity"], _color: ["color", "_color"], _resolution: ["resolution", "_resolution"], _lightSource: ["lightSource", "_lightSource"] }, ngImport: i0, template: `
+		<ngt-group [ref]="causticsRef" ngtCompound>
+			<ngt-scene [ref]="sceneRef">
+				<ngt-orthographic-camera [ref]="cameraRef" [up]="[0, 1, 0]" />
+				<ng-content />
+			</ngt-scene>
+			<ngt-mesh [renderOrder]="2" [ref]="planeRef" [rotation]="[-Math.PI / 2, 0, 0]">
+				<ngt-plane-geometry />
+				<ngt-caustics-projection-material
+					*ngIf="causticsTargetFbo() && causticsTargetBFbo()"
+					[transparent]="true"
+					[color]="color()"
+					[causticsTexture]="causticsTargetFbo()!.texture"
+					[causticsTextureB]="causticsTargetBFbo()!.texture"
+					[blending]="CustomBlending"
+					[blendSrc]="OneFactor"
+					[blendDst]="SrcAlphaFactor"
+					[depthWrite]="false"
+				/>
+
+				<ngts-edges *ngIf="debug()">
+					<ngt-line-basic-material *ngtsSobaContent color="#ffff00" [toneMapped]="false" />
+				</ngts-edges>
+			</ngt-mesh>
+		</ngt-group>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtsEdges, selector: "ngts-edges", inputs: ["edgesRef", "threshold", "color", "geometry", "userData"] }, { kind: "directive", type: NgtsSobaContent, selector: "ng-template[ngtsSobaContent]", exportAs: ["sobaContent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsCaustics, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-caustics',
+                    standalone: true,
+                    template: `
+		<ngt-group [ref]="causticsRef" ngtCompound>
+			<ngt-scene [ref]="sceneRef">
+				<ngt-orthographic-camera [ref]="cameraRef" [up]="[0, 1, 0]" />
+				<ng-content />
+			</ngt-scene>
+			<ngt-mesh [renderOrder]="2" [ref]="planeRef" [rotation]="[-Math.PI / 2, 0, 0]">
+				<ngt-plane-geometry />
+				<ngt-caustics-projection-material
+					*ngIf="causticsTargetFbo() && causticsTargetBFbo()"
+					[transparent]="true"
+					[color]="color()"
+					[causticsTexture]="causticsTargetFbo()!.texture"
+					[causticsTextureB]="causticsTargetBFbo()!.texture"
+					[blending]="CustomBlending"
+					[blendSrc]="OneFactor"
+					[blendDst]="SrcAlphaFactor"
+					[depthWrite]="false"
+				/>
+
+				<ngts-edges *ngIf="debug()">
+					<ngt-line-basic-material *ngtsSobaContent color="#ffff00" [toneMapped]="false" />
+				</ngts-edges>
+			</ngt-mesh>
+		</ngt-group>
+	`,
+                    imports: [NgIf, NgtsEdges, NgtsSobaContent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { causticsRef: [{
+                type: Input
+            }], _frames: [{
+                type: Input,
+                args: [{ alias: 'frames' }]
+            }], _debug: [{
+                type: Input,
+                args: [{ alias: 'debug' }]
+            }], _causticsOnly: [{
+                type: Input,
+                args: [{ alias: 'causticsOnly' }]
+            }], _backside: [{
+                type: Input,
+                args: [{ alias: 'backside' }]
+            }], _ior: [{
+                type: Input,
+                args: [{ alias: 'ior' }]
+            }], _backsideIOR: [{
+                type: Input,
+                args: [{ alias: 'backsideIOR' }]
+            }], _worldRadius: [{
+                type: Input,
+                args: [{ alias: 'worldRadius' }]
+            }], _intensity: [{
+                type: Input,
+                args: [{ alias: 'intensity' }]
+            }], _color: [{
+                type: Input,
+                args: [{ alias: 'color' }]
+            }], _resolution: [{
+                type: Input,
+                args: [{ alias: 'resolution' }]
+            }], _lightSource: [{
+                type: Input,
+                args: [{ alias: 'lightSource' }]
+            }] } });
+
+extend({ Mesh, BoxGeometry, MeshNormalMaterial, AxesHelper });
+function vecToArray(vec = [0, 0, 0]) {
+    if (Array.isArray(vec)) {
+        return vec;
+    }
+    if (vec instanceof THREE.Vector3 || vec instanceof THREE.Euler) {
+        return [vec.x, vec.y, vec.z];
+    }
+    return [vec, vec, vec];
+}
+class NgtsDecal {
+    set _debug(debug) {
+        this.inputs.set({ debug });
+    }
+    set _mesh(mesh) {
+        this.inputs.set({ mesh });
+    }
+    set _position(position) {
+        this.inputs.set({ position });
+    }
+    set _rotation(rotation) {
+        this.inputs.set({ rotation });
+    }
+    set _scale(scale) {
+        this.inputs.set({ scale });
+    }
+    set _map(map) {
+        this.inputs.set({ map });
+    }
+    set _polygonOffsetFactor(polygonOffsetFactor) {
+        this.inputs.set({ polygonOffsetFactor });
+    }
+    set _depthTest(depthTest) {
+        this.inputs.set({ depthTest });
+    }
+    constructor() {
+        this.inputs = signalStore({
+            debug: false,
+            depthTest: false,
+            polygonOffsetFactor: -10,
+            position: [0, 0, 0],
+            rotation: [0, 0, 0],
+            scale: 1,
+        });
+        this.decalRef = injectNgtRef();
+        this.mesh = this.inputs.select('mesh');
+        this.__position = this.inputs.select('position');
+        this.__rotation = this.inputs.select('rotation');
+        this.__scale = this.inputs.select('scale');
+        this.position = computed(() => vecToArray(this.__position()));
+        this.rotation = computed(() => vecToArray(this.__rotation()));
+        this.scale = computed(() => vecToArray(this.__scale()));
+        this.helperRef = injectNgtRef();
+        this.debug = this.inputs.select('debug');
+        this.depthTest = this.inputs.select('depthTest');
+        this.polygonOffsetFactor = this.inputs.select('polygonOffsetFactor');
+        this.map = this.inputs.select('map');
+        this.processDecal();
+    }
+    processDecal() {
+        effect((onCleanup) => {
+            const decal = this.decalRef.nativeElement;
+            if (!decal)
+                return;
+            const [mesh, position, rotation, scale, helper] = [
+                this.mesh(),
+                this.position(),
+                this.rotation(),
+                this.scale(),
+                this.helperRef.nativeElement,
+            ];
+            const parent = mesh ? (is.ref(mesh) ? mesh.nativeElement : mesh) : decal.parent;
+            if (!(parent instanceof Mesh)) {
+                throw new Error('[NGT] ngts-decal must have a ngt-mesh as parent or specify its "mesh" input');
+            }
+            const state = {
+                position: new THREE.Vector3(),
+                rotation: new THREE.Euler(),
+                scale: new THREE.Vector3(1, 1, 1),
+            };
+            if (parent) {
+                applyProps(state, { position, scale });
+                // Zero out the parents matrix world for this operation
+                const matrixWorld = parent.matrixWorld.clone();
+                parent.matrixWorld.identity();
+                if (!rotation || typeof rotation === 'number') {
+                    const o = new THREE.Object3D();
+                    o.position.copy(state.position);
+                    o.lookAt(parent.position);
+                    if (typeof rotation === 'number')
+                        o.rotateZ(rotation);
+                    applyProps(state, { rotation: o.rotation });
+                }
+                else {
+                    applyProps(state, { rotation });
+                }
+                decal.geometry = new DecalGeometry(parent, state.position, state.rotation, state.scale);
+                if (helper) {
+                    applyProps(helper, state);
+                    // Prevent the helpers from blocking rays
+                    helper.traverse((child) => (child.raycast = () => null));
+                }
+                // Reset parents matix-world
+                parent.matrixWorld = matrixWorld;
+                onCleanup(() => {
+                    decal.geometry.dispose();
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsDecal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: NgtsDecal, isStandalone: true, selector: "ngts-decal", inputs: { decalRef: "decalRef", _debug: ["debug", "_debug"], _mesh: ["mesh", "_mesh"], _position: ["position", "_position"], _rotation: ["rotation", "_rotation"], _scale: ["scale", "_scale"], _map: ["map", "_map"], _polygonOffsetFactor: ["polygonOffsetFactor", "_polygonOffsetFactor"], _depthTest: ["depthTest", "_depthTest"] }, ngImport: i0, template: `
+		<ngt-mesh [ref]="decalRef" ngtCompound>
+			<ngt-value [rawValue]="true" attach="material.transparent" />
+			<ngt-value [rawValue]="true" attach="material.polygonOffset" />
+			<ngt-value [rawValue]="polygonOffsetFactor()" attach="material.polygonOffsetFactor" />
+			<ngt-value [rawValue]="depthTest()" attach="material.depthTest" />
+			<ngt-value [rawValue]="map()" attach="material.map" />
+			<ng-content />
+
+			<ngt-mesh *ngIf="debug()" [ref]="helperRef">
+				<ngt-box-geometry />
+				<ngt-mesh-normal-material [wireframe]="true" />
+				<ngt-axes-helper />
+			</ngt-mesh>
+		</ngt-mesh>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsDecal, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-decal',
+                    standalone: true,
+                    template: `
+		<ngt-mesh [ref]="decalRef" ngtCompound>
+			<ngt-value [rawValue]="true" attach="material.transparent" />
+			<ngt-value [rawValue]="true" attach="material.polygonOffset" />
+			<ngt-value [rawValue]="polygonOffsetFactor()" attach="material.polygonOffsetFactor" />
+			<ngt-value [rawValue]="depthTest()" attach="material.depthTest" />
+			<ngt-value [rawValue]="map()" attach="material.map" />
+			<ng-content />
+
+			<ngt-mesh *ngIf="debug()" [ref]="helperRef">
+				<ngt-box-geometry />
+				<ngt-mesh-normal-material [wireframe]="true" />
+				<ngt-axes-helper />
+			</ngt-mesh>
+		</ngt-mesh>
+	`,
+                    imports: [NgIf],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { decalRef: [{
+                type: Input
+            }], _debug: [{
+                type: Input,
+                args: [{ alias: 'debug' }]
+            }], _mesh: [{
+                type: Input,
+                args: [{ alias: 'mesh' }]
+            }], _position: [{
+                type: Input,
+                args: [{ alias: 'position' }]
+            }], _rotation: [{
+                type: Input,
+                args: [{ alias: 'rotation' }]
+            }], _scale: [{
+                type: Input,
+                args: [{ alias: 'scale' }]
+            }], _map: [{
+                type: Input,
+                args: [{ alias: 'map' }]
+            }], _polygonOffsetFactor: [{
+                type: Input,
+                args: [{ alias: 'polygonOffsetFactor' }]
+            }], _depthTest: [{
+                type: Input,
+                args: [{ alias: 'depthTest' }]
+            }] } });
 
 function injectNgtsDepthBuffer(paramsFactory = () => ({}), { injector } = {}) {
-    injector = assertInjectionContext(injectNgtsDepthBuffer, injector);
+    injector = assertInjector(injectNgtsDepthBuffer, injector);
     return runInInjectionContext(injector, () => {
-        const depthBufferRef = signal(null);
-        const store = inject(NgtStore);
+        const depthBufferSignal = signal(null);
+        const store = injectNgtStore();
         const cdr = inject(ChangeDetectorRef);
-        const size = store.select('size');
-        const dpr = store.select('viewport', 'dpr');
-        requestAnimationFrame(() => {
-            const fboParams = computed(() => {
-                const params = { size: 256, frames: Infinity, ...paramsFactory() };
-                const width = params.size || size().width * dpr();
-                const height = params.size || size().height * dpr();
-                const depthTexture = new THREE.DepthTexture(width, height);
-                depthTexture.format = THREE.DepthFormat;
-                depthTexture.type = THREE.UnsignedShortType;
-                return { width, height, settings: { depthTexture } };
+        const [defaultWidth, defaultHeight, dpr] = [
+            store.select('size', 'width'),
+            store.select('size', 'height'),
+            store.select('viewport', 'dpr'),
+        ];
+        const fboParams = computed(() => {
+            const params = { size: 256, frames: Infinity, ...paramsFactory() };
+            const width = params.size || defaultWidth() * dpr();
+            const height = params.size || defaultHeight() * dpr();
+            const depthTexture = new THREE.DepthTexture(width, height);
+            depthTexture.format = THREE.DepthFormat;
+            depthTexture.type = THREE.UnsignedShortType;
+            return { width, height, settings: { depthTexture } };
+        });
+        const _fbo = injectNgtsFBO(fboParams, { injector });
+        effect(() => {
+            const fbo = _fbo();
+            if (fbo) {
+                untracked(() => {
+                    depthBufferSignal.set(fbo.depthTexture);
+                });
+                safeDetectChanges(cdr);
+            }
+        });
+        let count = 0;
+        injectBeforeRender(({ gl, scene, camera }) => {
+            const params = { size: 256, frames: Infinity, ...paramsFactory() };
+            const fbo = _fbo();
+            if ((params.frames === Infinity || count < params.frames) && fbo) {
+                gl.setRenderTarget(fbo);
+                gl.render(scene, camera);
+                gl.setRenderTarget(null);
+                count++;
+            }
+        }, { injector });
+        return depthBufferSignal.asReadonly();
+    });
+}
+
+/**
+ * augment HTMLElementTagNameMap with the selector of the component.
+ * the type is usually the Inputs' state and the root THREE element
+
+declare global {
+    interface HTMLElementTagNameMap {
+        \/**
+         * @extends ngt-group
+         *\/
+        'ngts-example': NgtsExampleState & NgtGroup;
+    }
+}
+
+*/
+/**
+ * make sure soba's component extends all regular THREE entities that it needs
+ */
+extend({ Group, MeshNormalMaterial, MeshStandardMaterial });
+/**
+ * We can setup public API for this soba component with createInjectionToken + forwardRef
+ * the `example.api` is **usually** a computed property in the component class
+ *
+ * @see Bounds for example
+ */
+const [injectNgtsExampleApi, provideNgtsExampleApi] = createInjectionToken((example) => example.api, { isRoot: false, deps: [forwardRef(() => NgtsExample)] });
+/**
+ * @description this component is only for documentation purposes.
+ */
+class NgtsExample {
+    constructor() {
+        /**
+         * use signalStore to store inputs with default inputs
+         */
+        this.inputs = signalStore({ color: '#cbcbcb', bevelSize: 0.04, debug: false });
+        /**
+         * a soba component usually has a Input for the component ref and this Input always has a default value with injectNgtRef
+         */
+        this.exampleRef = injectNgtRef();
+        /**
+         * exposes signals from inputs
+         */
+        this.bevelSize = this.inputs.select('bevelSize');
+        this.font = this.inputs.select('font');
+        this.debug = this.inputs.select('debug');
+        this.color = this.inputs.select('color');
+        /**
+         * can have internal state
+         */
+        this.count = signal(0);
+        /**
+         * Expose the public API for this soba component
+         */
+        this.api = computed(() => ({
+            bevelSize: this.bevelSize(),
+            increment: () => this.count.update((v) => v + 1),
+            decrement: () => this.count.update((v) => v - 1),
+        }));
+    }
+    /**
+     * setup Input for the Inputs state. Use alias to have an easier time to setup computed
+     *
+     * @example: this way "private font" and "set _font" won't conflict
+     * private font = this.inputs.select('font');
+     */
+    set _font(font) {
+        this.inputs.set({ font });
+    }
+    set _color(color) {
+        this.inputs.set({ color });
+    }
+    set _debug(debug) {
+        this.inputs.set({ debug });
+    }
+    set _bevelSize(bevelSize) {
+        this.inputs.set({ bevelSize });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: NgtsExample, isStandalone: true, selector: "ngts-example", inputs: { exampleRef: "exampleRef", _font: ["font", "_font"], _color: ["color", "_color"], _debug: ["debug", "_debug"], _bevelSize: ["bevelSize", "_bevelSize"] }, providers: [provideNgtsExampleApi()], ngImport: i0, template: `
+		<!-- ngtCompound is used by the Renderer to spread props from ngts-example down to ngt-group -->
+		<!-- i.e: <ngts-example [position]="[1, 1, 1]" />, [1, 1, 1] will be passed down to ngt-group -->
+		<!-- [ref] is used with the Input so that the consumer can pass an external ref and control this internal ngt-group -->
+		<ngt-group ngtCompound [ref]="exampleRef">
+			<ngts-center [top]="true">
+				<ngts-text-3d
+					[bevelEnabled]="true"
+					[bevelSize]="bevelSize()"
+					[font]="font()"
+					[text]="count().toString()"
+				>
+					<ngt-mesh-standard-material *ngIf="!debug(); else withDebug" [color]="color()" />
+					<ng-template #withDebug>
+						<ngt-mesh-normal-material [wireframe]="true" />
+					</ng-template>
+				</ngts-text-3d>
+			</ngts-center>
+			<!-- use Content Projection here so consumers can pass in children for ngt-group -->
+			<ng-content />
+		</ngt-group>
+	`, isInline: true, dependencies: [{ kind: "component", type: NgtsCenter, selector: "ngts-center", inputs: ["centerRef", "top", "right", "bottom", "left", "front", "back", "disableX", "disableY", "disableZ", "disable", "precise", "cacheKey"], outputs: ["centered"] }, { kind: "component", type: NgtsText3D, selector: "ngts-text-3d", inputs: ["textRef", "font", "text", "bevelEnabled", "bevelOffset", "bevelSize", "bevelThickness", "curveSegments", "bevelSegments", "height", "size", "lineHeight", "letterSpacing", "smooth"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsExample, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-example',
+                    standalone: true,
+                    template: `
+		<!-- ngtCompound is used by the Renderer to spread props from ngts-example down to ngt-group -->
+		<!-- i.e: <ngts-example [position]="[1, 1, 1]" />, [1, 1, 1] will be passed down to ngt-group -->
+		<!-- [ref] is used with the Input so that the consumer can pass an external ref and control this internal ngt-group -->
+		<ngt-group ngtCompound [ref]="exampleRef">
+			<ngts-center [top]="true">
+				<ngts-text-3d
+					[bevelEnabled]="true"
+					[bevelSize]="bevelSize()"
+					[font]="font()"
+					[text]="count().toString()"
+				>
+					<ngt-mesh-standard-material *ngIf="!debug(); else withDebug" [color]="color()" />
+					<ng-template #withDebug>
+						<ngt-mesh-normal-material [wireframe]="true" />
+					</ng-template>
+				</ngts-text-3d>
+			</ngts-center>
+			<!-- use Content Projection here so consumers can pass in children for ngt-group -->
+			<ng-content />
+		</ngt-group>
+	`,
+                    /**
+                     * can definitely use other Soba components
+                     */
+                    imports: [NgtsCenter, NgtsText3D, NgIf],
+                    /**
+                     * call the API provider here to actually provide the API for the component's children
+                     */
+                    providers: [provideNgtsExampleApi()],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { exampleRef: [{
+                type: Input
+            }], _font: [{
+                type: Input,
+                args: [{ alias: 'font', required: true }]
+            }], _color: [{
+                type: Input,
+                args: [{ alias: 'color' }]
+            }], _debug: [{
+                type: Input,
+                args: [{ alias: 'debug' }]
+            }], _bevelSize: [{
+                type: Input,
+                args: [{ alias: 'bevelSize' }]
+            }] } });
+
+var _a;
+const v1 = new THREE.Vector3();
+const v2 = new THREE.Vector3();
+const v3 = new THREE.Vector3();
+function defaultCalculatePosition(el, camera, size) {
+    const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+    objectPos.project(camera);
+    const widthHalf = size.width / 2;
+    const heightHalf = size.height / 2;
+    return [objectPos.x * widthHalf + widthHalf, -(objectPos.y * heightHalf) + heightHalf];
+}
+function isObjectBehindCamera(el, camera) {
+    const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+    const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
+    const deltaCamObj = objectPos.sub(cameraPos);
+    const camDir = camera.getWorldDirection(v3);
+    return deltaCamObj.angleTo(camDir) > Math.PI / 2;
+}
+function isObjectVisible(el, camera, raycaster, occlude) {
+    const elPos = v1.setFromMatrixPosition(el.matrixWorld);
+    const screenPos = elPos.clone();
+    screenPos.project(camera);
+    raycaster.setFromCamera(screenPos, camera);
+    const intersects = raycaster.intersectObjects(occlude, true);
+    if (intersects.length) {
+        const intersectionDistance = intersects[0].distance;
+        const pointDistance = elPos.distanceTo(raycaster.ray.origin);
+        return pointDistance < intersectionDistance;
+    }
+    return true;
+}
+function objectScale(el, camera) {
+    if (camera instanceof THREE.OrthographicCamera) {
+        return camera.zoom;
+    }
+    else if (camera instanceof THREE.PerspectiveCamera) {
+        const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+        const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
+        const vFOV = (camera.fov * Math.PI) / 180;
+        const dist = objectPos.distanceTo(cameraPos);
+        const scaleFOV = 2 * Math.tan(vFOV / 2) * dist;
+        return 1 / scaleFOV;
+    }
+    else {
+        return 1;
+    }
+}
+function objectZIndex(el, camera, zIndexRange) {
+    if (camera instanceof THREE.PerspectiveCamera || camera instanceof THREE.OrthographicCamera) {
+        const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
+        const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
+        const dist = objectPos.distanceTo(cameraPos);
+        const A = (zIndexRange[1] - zIndexRange[0]) / (camera.far - camera.near);
+        const B = zIndexRange[1] - A * camera.far;
+        return Math.round(A * dist + B);
+    }
+    return undefined;
+}
+const epsilon = (value) => (Math.abs(value) < 1e-10 ? 0 : value);
+function getCSSMatrix(matrix, multipliers, prepend = '') {
+    let matrix3d = 'matrix3d(';
+    for (let i = 0; i !== 16; i++) {
+        matrix3d += epsilon(multipliers[i] * matrix.elements[i]) + (i !== 15 ? ',' : ')');
+    }
+    return prepend + matrix3d;
+}
+const getCameraCSSMatrix = ((multipliers) => {
+    return (matrix) => getCSSMatrix(matrix, multipliers);
+})([1, -1, 1, 1, 1, -1, 1, 1, 1, -1, 1, 1, 1, -1, 1, 1]);
+const getObjectCSSMatrix = ((scaleMultipliers) => {
+    return (matrix, factor) => getCSSMatrix(matrix, scaleMultipliers(factor), 'translate(-50%,-50%)');
+})((f) => [1 / f, 1 / f, 1 / f, 1, -1 / f, -1 / f, -1 / f, -1, 1 / f, 1 / f, 1 / f, 1, 1, 1, 1, 1]);
+class NgtsHtmlWrapper {
+    static { _a = HTML; }
+    static { this[_a] = true; }
+    constructor() {
+        this.htmlInputs = injectNgtsHtmlInputs();
+        this.store = injectNgtStore();
+        this.gl = this.store.select('gl');
+        this.connected = this.store.select('events', 'connected');
+        this.viewport = this.store.select('viewport');
+        this.scene = this.store.select('scene');
+        this.camera = this.store.select('camera');
+        this.size = this.store.select('size');
+        this.raycaster = this.store.select('raycaster');
+        this.isMeshSizeSet = false;
+        this.document = inject(DOCUMENT);
+        this.vcr = inject(ViewContainerRef);
+        this.portalElement = computed(() => {
+            const portal = this.htmlInputs.portal();
+            if (!portal)
+                return null;
+            return is.ref(portal) ? portal.nativeElement : portal;
+        });
+        this.element = computed(() => this.document.createElement(this.htmlInputs.as()));
+        this.target = computed(() => {
+            const portalElement = this.portalElement();
+            if (portalElement)
+                return portalElement;
+            const connected = this.connected();
+            if (connected)
+                return connected;
+            return this.gl().domElement.parentElement;
+        });
+        this.styles = computed(() => {
+            const [style, center, transform, size, fullscreen] = [
+                this.htmlInputs.style(),
+                this.htmlInputs.center(),
+                this.htmlInputs.transform(),
+                this.size(),
+                this.htmlInputs.fullscreen(),
+            ];
+            if (transform) {
+                return {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: size.width,
+                    height: size.height,
+                    transformStyle: 'preserve-3d',
+                    pointerEvents: 'none',
+                };
+            }
+            return {
+                position: 'absolute',
+                transform: center ? 'translate3d(-50%,-50%,0)' : 'none',
+                ...(fullscreen && {
+                    top: -size.height / 2,
+                    left: -size.width / 2,
+                    width: size.width,
+                    height: size.height,
+                }),
+                ...(style || {}),
+            };
+        });
+        this.transformInnerStyles = computed(() => ({ position: 'absolute', pointerEvents: this.htmlInputs.pointerEvents() }));
+        this.setCanvasElementStyle();
+        this.appendElement();
+        this.setWrapperClass();
+        this.render();
+        this.beforeRender();
+    }
+    setCanvasElementStyle() {
+        effect(() => {
+            const el = untracked(this.gl).domElement;
+            const occlude = this.htmlInputs.occlude();
+            if (occlude && occlude === 'blending') {
+                el.style.zIndex = `${Math.floor(untracked(this.htmlInputs.zIndexRange)[0] / 2)}`;
+                el.style.position = 'absolute';
+                el.style.pointerEvents = 'none';
+            }
+            else {
+                el.style.zIndex = null;
+                el.style.position = null;
+                el.style.pointerEvents = null;
+            }
+        });
+    }
+    appendElement() {
+        effect((onCleanup) => {
+            const [group, element] = [this.htmlInputs.groupRef.nativeElement, this.element()];
+            if (group && element) {
+                const [target, transform, scene, camera, size, calculatePosition, prepend] = [
+                    this.target(),
+                    this.htmlInputs.transform(),
+                    untracked(this.scene),
+                    untracked(this.camera),
+                    untracked(this.size),
+                    untracked(this.htmlInputs.calculatePosition),
+                    untracked(this.htmlInputs.prepend),
+                ];
+                scene.updateMatrixWorld();
+                if (transform) {
+                    element.style.cssText = `position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;`;
+                }
+                else {
+                    const vec = calculatePosition(group, camera, size);
+                    element.style.cssText = `position:absolute;top:0;left:0;transform:translate3d(${vec[0]}px,${vec[1]}px,0);transform-origin:0 0;`;
+                }
+                if (target) {
+                    if (prepend)
+                        target.prepend(element);
+                    else
+                        target.appendChild(element);
+                }
+                onCleanup(() => {
+                    if (target)
+                        target.removeChild(element);
+                    this.vcr.clear();
+                });
+            }
+        });
+    }
+    setWrapperClass() {
+        effect(() => {
+            const [element, wrapperClass] = [this.element(), this.htmlInputs.wrapperClass()];
+            if (element && wrapperClass) {
+                element.className = wrapperClass;
+            }
+        });
+    }
+    render() {
+        effect((onCleanup) => {
+            const [{ transform }, element, content] = [
+                this.htmlInputs.state(),
+                this.element(),
+                this.htmlInputs.content(),
+            ];
+            if (element) {
+                this.isMeshSizeSet = false;
+                const params = transform
+                    ? [this.transformTemplate, {}]
+                    : [this.renderTemplate, { styles: this.styles }];
+                const ref = this.vcr.createEmbeddedView(...params);
+                if (ref.rootNodes?.[0]) {
+                    if (element.hasChildNodes()) {
+                        element.replaceChildren(...ref.rootNodes);
+                    }
+                    else {
+                        element.append(...ref.rootNodes);
+                    }
+                }
+                safeDetectChanges(ref);
+                let contentRef;
+                let contentParent;
+                /**
+                 * NOTE: utilizing rAF here so that renderAnchor (ViewContainerRef) has a chance to be resolved
+                 * TODO: Another approach is to call render() in ngOnInit and pass in an injector to the effect
+                 */
+                const rAF = requestAnimationFrame(() => {
+                    if (content && this.renderAnchor) {
+                        contentRef = this.renderAnchor.createEmbeddedView(content);
+                        contentParent = ref.rootNodes[0].lastElementChild || ref.rootNodes[0];
+                        while (contentParent && contentParent.lastElementChild) {
+                            contentParent = contentParent.lastElementChild;
+                        }
+                        if (contentRef.rootNodes?.[0]) {
+                            if (contentParent.hasChildNodes()) {
+                                contentParent.replaceChildren(...contentRef.rootNodes);
+                            }
+                            else {
+                                contentParent.append(...contentRef.rootNodes);
+                            }
+                        }
+                        safeDetectChanges(contentRef);
+                    }
+                });
+                onCleanup(() => {
+                    cancelAnimationFrame(rAF);
+                    if (contentRef && contentParent) {
+                        contentRef.rootNodes.forEach((node) => {
+                            if (contentParent.hasChildNodes()) {
+                                contentParent.removeChild(node);
+                            }
+                            node.remove();
+                        });
+                        contentRef.destroy();
+                    }
+                    ref.rootNodes.forEach((node) => {
+                        if (element.hasChildNodes()) {
+                            element.removeChild(node);
+                        }
+                        node.remove();
+                    });
+                    ref.destroy();
+                    this.renderAnchor?.clear();
+                    this.vcr.clear();
+                });
+            }
+        });
+    }
+    beforeRender() {
+        let oldPosition = [0, 0];
+        let oldZoom = 0;
+        let visible = true;
+        injectBeforeRender((gl) => {
+            const [group, camera, transform, calculatePosition, size, eps, isRayCastOcclusion, occlude, scene, raycaster, element, zIndexRange, sprite, distanceFactor, occlusionMeshRef, geometry, viewport, scale,] = [
+                this.htmlInputs.groupRef.nativeElement,
+                this.camera(),
+                this.htmlInputs.transform(),
+                this.htmlInputs.calculatePosition(),
+                this.size(),
+                this.htmlInputs.eps(),
+                this.htmlInputs.isRayCastOcclusion(),
+                this.htmlInputs.occlude(),
+                this.scene(),
+                this.raycaster(),
+                this.element(),
+                this.htmlInputs.zIndexRange(),
+                this.htmlInputs.sprite(),
+                this.htmlInputs.distanceFactor(),
+                this.htmlInputs.occlusionMeshRef.nativeElement,
+                this.htmlInputs.geometry(),
+                this.viewport(),
+                this.htmlInputs.scale(),
+            ];
+            if (group && element) {
+                camera.updateMatrixWorld();
+                group.updateWorldMatrix(true, false);
+                const vec = transform ? oldPosition : calculatePosition(group, camera, size);
+                if (transform ||
+                    Math.abs(oldZoom - camera.zoom) > eps ||
+                    Math.abs(oldPosition[0] - vec[0]) > eps ||
+                    Math.abs(oldPosition[1] - vec[1]) > eps) {
+                    const isBehindCamera = isObjectBehindCamera(group, camera);
+                    let raytraceTarget = false;
+                    if (isRayCastOcclusion) {
+                        if (Array.isArray(occlude)) {
+                            raytraceTarget = occlude.map((item) => (is.ref(item) ? item.nativeElement : item));
+                        }
+                        else if (occlude !== 'blending') {
+                            raytraceTarget = [scene];
+                        }
+                    }
+                    const previouslyVisible = visible;
+                    if (raytraceTarget) {
+                        const isVisible = isObjectVisible(group, camera, raycaster, raytraceTarget);
+                        visible = isVisible && !isBehindCamera;
+                    }
+                    else {
+                        visible = !isBehindCamera;
+                    }
+                    if (previouslyVisible !== visible) {
+                        if (this.htmlInputs.occluded.observed) {
+                            this.htmlInputs.occluded.emit(!visible);
+                        }
+                        else {
+                            element.style.display = visible ? 'block' : 'none';
+                        }
+                    }
+                    const halfRange = Math.floor(zIndexRange[0] / 2);
+                    const zRange = occlude
+                        ? isRayCastOcclusion //
+                            ? [zIndexRange[0], halfRange]
+                            : [halfRange - 1, 0]
+                        : zIndexRange;
+                    element.style.zIndex = `${objectZIndex(group, camera, zRange)}`;
+                    if (transform) {
+                        const [widthHalf, heightHalf] = [size.width / 2, size.height / 2];
+                        const fov = camera.projectionMatrix.elements[5] * heightHalf;
+                        const { isOrthographicCamera, top, left, bottom, right } = camera;
+                        const cameraMatrix = getCameraCSSMatrix(camera.matrixWorldInverse);
+                        const cameraTransform = isOrthographicCamera
+                            ? `scale(${fov})translate(${epsilon(-(right + left) / 2)}px,${epsilon((top + bottom) / 2)}px)`
+                            : `translateZ(${fov}px)`;
+                        let matrix = group.matrixWorld;
+                        if (sprite) {
+                            matrix = camera.matrixWorldInverse
+                                .clone()
+                                .transpose()
+                                .copyPosition(matrix)
+                                .scale(group.scale);
+                            matrix.elements[3] = matrix.elements[7] = matrix.elements[11] = 0;
+                            matrix.elements[15] = 1;
+                        }
+                        element.style.width = size.width + 'px';
+                        element.style.height = size.height + 'px';
+                        element.style.perspective = isOrthographicCamera ? '' : `${fov}px`;
+                        if (this.outerDiv?.nativeElement && this.innerDiv?.nativeElement) {
+                            this.outerDiv.nativeElement.style.width = size.width + 'px';
+                            this.outerDiv.nativeElement.style.height = size.height + 'px';
+                            this.outerDiv.nativeElement.style.transform = `${cameraTransform}${cameraMatrix}translate(${widthHalf}px,${heightHalf}px)`;
+                            this.innerDiv.nativeElement.style.transform = getObjectCSSMatrix(matrix, 1 / ((distanceFactor || 10) / 400));
+                        }
+                    }
+                    else {
+                        const scale = distanceFactor === undefined ? 1 : objectScale(group, camera) * distanceFactor;
+                        element.style.transform = `translate3d(${vec[0]}px,${vec[1]}px,0) scale(${scale})`;
+                    }
+                    oldPosition = vec;
+                    oldZoom = camera.zoom;
+                }
+            }
+            if (!isRayCastOcclusion && occlusionMeshRef && !this.isMeshSizeSet) {
+                if (transform) {
+                    if (this.outerDiv?.nativeElement) {
+                        const el = this.outerDiv.nativeElement.children[0];
+                        if (el?.clientWidth && el?.clientHeight) {
+                            const { isOrthographicCamera } = camera;
+                            if (isOrthographicCamera || geometry) {
+                                if (scale !== 1) {
+                                    if (!Array.isArray(scale)) {
+                                        occlusionMeshRef.scale.setScalar(1 / scale);
+                                    }
+                                    else if (scale instanceof THREE.Vector3) {
+                                        occlusionMeshRef.scale.copy(scale.clone().divideScalar(1));
+                                    }
+                                    else {
+                                        occlusionMeshRef.scale.set(1 / scale[0], 1 / scale[1], 1 / scale[2]);
+                                    }
+                                }
+                            }
+                            else {
+                                const ratio = (distanceFactor || 10) / 400;
+                                const w = el.clientWidth * ratio;
+                                const h = el.clientHeight * ratio;
+                                occlusionMeshRef.scale.set(w, h, 1);
+                            }
+                            this.isMeshSizeSet = true;
+                        }
+                    }
+                }
+                else {
+                    const ele = element.children[0];
+                    if (ele?.clientWidth && ele?.clientHeight) {
+                        const ratio = 1 / viewport.factor;
+                        const w = ele.clientWidth * ratio;
+                        const h = ele.clientHeight * ratio;
+                        occlusionMeshRef.scale.set(w, h, 1);
+                        this.isMeshSizeSet = true;
+                    }
+                    occlusionMeshRef.lookAt(gl.camera.position);
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsHtmlWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: NgtsHtmlWrapper, isStandalone: true, selector: "ngts-html-wrapper", viewQueries: [{ propertyName: "transformTemplate", first: true, predicate: ["transformTemplate"], descendants: true, static: true }, { propertyName: "renderTemplate", first: true, predicate: ["renderTemplate"], descendants: true, static: true }, { propertyName: "outerDiv", first: true, predicate: ["transformedOuterDiv"], descendants: true }, { propertyName: "innerDiv", first: true, predicate: ["transformedInnerDiv"], descendants: true }, { propertyName: "renderAnchor", first: true, predicate: ["renderAnchor"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `
+		<ng-template #transformTemplate>
+			<div #transformedOuterDiv [style]="styles()">
+				<div #transformedInnerDiv [style]="transformInnerStyles()">
+					<ng-container *ngTemplateOutlet="renderTemplate; context: { styles: htmlInputs.style }" />
+				</div>
+			</div>
+		</ng-template>
+
+		<ng-template #renderTemplate let-renderedStyles="styles">
+			<div #renderedDiv [class]="htmlInputs.renderedDivClass()" [style]="renderedStyles()">
+				<ng-container #renderAnchor />
+			</div>
+		</ng-template>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsHtmlWrapper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-html-wrapper',
+                    standalone: true,
+                    template: `
+		<ng-template #transformTemplate>
+			<div #transformedOuterDiv [style]="styles()">
+				<div #transformedInnerDiv [style]="transformInnerStyles()">
+					<ng-container *ngTemplateOutlet="renderTemplate; context: { styles: htmlInputs.style }" />
+				</div>
+			</div>
+		</ng-template>
+
+		<ng-template #renderTemplate let-renderedStyles="styles">
+			<div #renderedDiv [class]="htmlInputs.renderedDivClass()" [style]="renderedStyles()">
+				<ng-container #renderAnchor />
+			</div>
+		</ng-template>
+	`,
+                    imports: [NgTemplateOutlet],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { transformTemplate: [{
+                type: ViewChild,
+                args: ['transformTemplate', { static: true }]
+            }], renderTemplate: [{
+                type: ViewChild,
+                args: ['renderTemplate', { static: true }]
+            }], outerDiv: [{
+                type: ViewChild,
+                args: ['transformedOuterDiv']
+            }], innerDiv: [{
+                type: ViewChild,
+                args: ['transformedInnerDiv']
+            }], renderAnchor: [{
+                type: ViewChild,
+                args: ['renderAnchor', { read: ViewContainerRef }]
+            }] } });
+
+extend({ Group, PlaneGeometry, Mesh, ShaderMaterial });
+const [injectNgtsHtmlInputs, provideNgtsHtmlInputs] = createInjectionToken((html) => ({ state: html.inputs.state, ...html.state }), { isRoot: false, deps: [forwardRef(() => NgtsHtml)] });
+class NgtsHtml {
+    constructor() {
+        this.DoubleSide = THREE.DoubleSide;
+        this.inputs = signalStore({
+            as: 'div',
+            prepend: false,
+            transform: false,
+            fullscreen: false,
+            center: false,
+            sprite: false,
+            zIndexRange: [16777271, 0],
+            eps: 0.001,
+            scale: 1,
+            calculatePosition: defaultCalculatePosition,
+            pointerEvents: 'auto',
+            occlude: false,
+            castShadow: false,
+            receiveShadow: false,
+        });
+        this.groupRef = injectNgtRef();
+        this.occluded = new EventEmitter();
+        this.occlusionMeshRef = injectNgtRef();
+        this.transform = this.inputs.select('transform');
+        this.isRayCastOcclusion = computed(() => {
+            const occlude = this.occlude();
+            return ((occlude && occlude !== 'blending') || (Array.isArray(occlude) && !!occlude.length && is.ref(occlude[0])));
+        });
+        this.occlude = this.inputs.select('occlude');
+        this.castShadow = this.inputs.select('castShadow');
+        this.receiveShadow = this.inputs.select('receiveShadow');
+        this.geometry = this.inputs.select('geometry');
+        this.material = this.inputs.select('material');
+        this.scale = this.inputs.select('scale');
+        this.shaders = computed(() => {
+            const transform = this.transform();
+            return {
+                vertexShader: !transform
+                    ? /* glsl */ `
+          /*
+            This shader is from the THREE's SpriteMaterial.
+            We need to turn the backing plane into a Sprite
+            (make it always face the camera) if "transfrom"
+            is false.
+          */
+          #include <common>
+
+          void main() {
+            vec2 center = vec2(0., 1.);
+            float rotation = 0.0;
+
+            // This is somewhat arbitrary, but it seems to work well
+            // Need to figure out how to derive this dynamically if it even matters
+            float size = 0.03;
+
+            vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
+            vec2 scale;
+            scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
+            scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );
+
+            bool isPerspective = isPerspectiveMatrix( projectionMatrix );
+            if ( isPerspective ) scale *= - mvPosition.z;
+
+            vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;
+            vec2 rotatedPosition;
+            rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
+            rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
+            mvPosition.xy += rotatedPosition;
+
+            gl_Position = projectionMatrix * mvPosition;
+          }
+      `
+                    : undefined,
+                fragmentShader: /* glsl */ `
+        void main() {
+          gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+        }
+      `,
+            };
+        });
+        this.state = {
+            zIndexRange: this.inputs.select('zIndexRange'),
+            prepend: this.inputs.select('prepend'),
+            transform: this.transform,
+            center: this.inputs.select('center'),
+            fullscreen: this.inputs.select('fullscreen'),
+            calculatePosition: this.inputs.select('calculatePosition'),
+            wrapperClass: this.inputs.select('wrapperClass'),
+            renderedDivClass: this.inputs.select('renderedDivClass'),
+            style: this.inputs.select('style'),
+            pointerEvents: this.inputs.select('pointerEvents'),
+            eps: this.inputs.select('eps'),
+            distanceFactor: this.inputs.select('distanceFactor'),
+            sprite: this.inputs.select('sprite'),
+            as: this.inputs.select('as'),
+            portal: this.inputs.select('portal'),
+            content: this.inputs.select('content'),
+            occlude: this.occlude,
+            isRayCastOcclusion: this.isRayCastOcclusion,
+            occlusionMeshRef: this.occlusionMeshRef,
+            occluded: this.occluded,
+            geometry: this.geometry,
+            scale: this.scale,
+            groupRef: this.groupRef,
+        };
+    }
+    set content(content) {
+        this.inputs.set({ content });
+    }
+    set _as(as) {
+        this.inputs.set({ as });
+    }
+    set _zIndexRange(zIndexRange) {
+        this.inputs.set({ zIndexRange });
+    }
+    set _portal(portal) {
+        this.inputs.set({ portal });
+    }
+    set _occlude(occlude) {
+        this.inputs.set({ occlude });
+    }
+    set _castShadow(castShadow) {
+        this.inputs.set({ castShadow });
+    }
+    set _receiveShadow(receiveShadow) {
+        this.inputs.set({ receiveShadow });
+    }
+    set _material(material) {
+        this.inputs.set({ material });
+    }
+    set _geometry(geometry) {
+        this.inputs.set({ geometry });
+    }
+    set _scale(scale) {
+        this.inputs.set({ scale });
+    }
+    set _prepend(prepend) {
+        this.inputs.set({ prepend });
+    }
+    set _transform(transform) {
+        this.inputs.set({ transform });
+    }
+    set _center(center) {
+        this.inputs.set({ center });
+    }
+    set _sprite(sprite) {
+        this.inputs.set({ sprite });
+    }
+    set _fullscreen(fullscreen) {
+        this.inputs.set({ fullscreen });
+    }
+    set _eps(eps) {
+        this.inputs.set({ eps });
+    }
+    set _distanceFactor(distanceFactor) {
+        this.inputs.set({ distanceFactor });
+    }
+    set _wrapperClass(wrapperClass) {
+        this.inputs.set({ wrapperClass });
+    }
+    set _renderedDivClass(renderedDivClass) {
+        this.inputs.set({ renderedDivClass });
+    }
+    set _style(style) {
+        this.inputs.set({ style });
+    }
+    set _pointerEvents(pointerEvents) {
+        this.inputs.set({ pointerEvents });
+    }
+    set _calculatePosition(calculatePosition) {
+        this.inputs.set({ calculatePosition });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsHtml, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: NgtsHtml, isStandalone: true, selector: "ngts-html", inputs: { groupRef: "groupRef", _as: ["as", "_as"], _zIndexRange: ["zIndexRange", "_zIndexRange"], _portal: ["portal", "_portal"], _occlude: ["occlude", "_occlude"], _castShadow: ["castShadow", "_castShadow"], _receiveShadow: ["receiveShadow", "_receiveShadow"], _material: ["material", "_material"], _geometry: ["geometry", "_geometry"], _scale: ["scale", "_scale"], _prepend: ["prepend", "_prepend"], _transform: ["transform", "_transform"], _center: ["center", "_center"], _sprite: ["sprite", "_sprite"], _fullscreen: ["fullscreen", "_fullscreen"], _eps: ["eps", "_eps"], _distanceFactor: ["distanceFactor", "_distanceFactor"], _wrapperClass: ["wrapperClass", "_wrapperClass"], _renderedDivClass: ["renderedDivClass", "_renderedDivClass"], _style: ["style", "_style"], _pointerEvents: ["pointerEvents", "_pointerEvents"], _calculatePosition: ["calculatePosition", "_calculatePosition"] }, outputs: { occluded: "occluded" }, providers: [provideNgtsHtmlInputs()], queries: [{ propertyName: "content", first: true, predicate: NgtsSobaContent, descendants: true, read: TemplateRef }], ngImport: i0, template: `
+		<ngt-group ngtCompound [ref]="groupRef" [scale]="scale()">
+			<ngt-mesh
+				*ngIf="occlude() && !isRayCastOcclusion()"
+				[castShadow]="castShadow()"
+				[receiveShadow]="receiveShadow()"
+				[ref]="occlusionMeshRef"
+			>
+				<ngt-plane-geometry *ngIf="geometry()" />
+				<ngt-shader-material
+					*ngIf="material()"
+					[side]="DoubleSide"
+					[vertexShader]="shaders().vertexShader"
+					[fragmentShader]="shaders().fragmentShader"
+				/>
+			</ngt-mesh>
+		</ngt-group>
+
+		<ngts-html-wrapper />
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgtsHtmlWrapper, selector: "ngts-html-wrapper" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsHtml, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-html',
+                    standalone: true,
+                    template: `
+		<ngt-group ngtCompound [ref]="groupRef" [scale]="scale()">
+			<ngt-mesh
+				*ngIf="occlude() && !isRayCastOcclusion()"
+				[castShadow]="castShadow()"
+				[receiveShadow]="receiveShadow()"
+				[ref]="occlusionMeshRef"
+			>
+				<ngt-plane-geometry *ngIf="geometry()" />
+				<ngt-shader-material
+					*ngIf="material()"
+					[side]="DoubleSide"
+					[vertexShader]="shaders().vertexShader"
+					[fragmentShader]="shaders().fragmentShader"
+				/>
+			</ngt-mesh>
+		</ngt-group>
+
+		<ngts-html-wrapper />
+	`,
+                    imports: [NgIf, NgtsHtmlWrapper],
+                    providers: [provideNgtsHtmlInputs()],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { content: [{
+                type: ContentChild,
+                args: [NgtsSobaContent, { read: TemplateRef }]
+            }], groupRef: [{
+                type: Input
+            }], _as: [{
+                type: Input,
+                args: [{ alias: 'as' }]
+            }], _zIndexRange: [{
+                type: Input,
+                args: [{ alias: 'zIndexRange' }]
+            }], _portal: [{
+                type: Input,
+                args: [{ alias: 'portal' }]
+            }], _occlude: [{
+                type: Input,
+                args: [{ alias: 'occlude' }]
+            }], _castShadow: [{
+                type: Input,
+                args: [{ alias: 'castShadow' }]
+            }], _receiveShadow: [{
+                type: Input,
+                args: [{ alias: 'receiveShadow' }]
+            }], _material: [{
+                type: Input,
+                args: [{ alias: 'material' }]
+            }], _geometry: [{
+                type: Input,
+                args: [{ alias: 'geometry' }]
+            }], _scale: [{
+                type: Input,
+                args: [{ alias: 'scale' }]
+            }], _prepend: [{
+                type: Input,
+                args: [{ alias: 'prepend' }]
+            }], _transform: [{
+                type: Input,
+                args: [{ alias: 'transform' }]
+            }], _center: [{
+                type: Input,
+                args: [{ alias: 'center' }]
+            }], _sprite: [{
+                type: Input,
+                args: [{ alias: 'sprite' }]
+            }], _fullscreen: [{
+                type: Input,
+                args: [{ alias: 'fullscreen' }]
+            }], _eps: [{
+                type: Input,
+                args: [{ alias: 'eps' }]
+            }], _distanceFactor: [{
+                type: Input,
+                args: [{ alias: 'distanceFactor' }]
+            }], _wrapperClass: [{
+                type: Input,
+                args: [{ alias: 'wrapperClass' }]
+            }], _renderedDivClass: [{
+                type: Input,
+                args: [{ alias: 'renderedDivClass' }]
+            }], _style: [{
+                type: Input,
+                args: [{ alias: 'style' }]
+            }], _pointerEvents: [{
+                type: Input,
+                args: [{ alias: 'pointerEvents' }]
+            }], _calculatePosition: [{
+                type: Input,
+                args: [{ alias: 'calculatePosition' }]
+            }], occluded: [{
+                type: Output
+            }] } });
+
+const defaultState = {
+    count: 16,
+};
+function injectNgtsSurfaceSampler(surfaceSamplerState, { injector } = {}) {
+    injector = assertInjector(injectNgtsSurfaceSampler, injector);
+    return runInInjectionContext(injector, () => {
+        const state = computed(() => ({ ...defaultState, ...(surfaceSamplerState() || {}) }));
+        const _buffer = signal((() => {
+            const arr = Array.from({ length: state().count }, () => [
+                1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+            ]).flat();
+            return new THREE.InstancedBufferAttribute(Float32Array.from(arr), 16);
+        })());
+        effect(() => {
+            const { mesh, count, transform, instancedMesh, weight } = state();
+            const meshObj = is.ref(mesh) ? mesh.nativeElement : mesh;
+            if (!meshObj)
+                return;
+            const instancedMeshObj = is.ref(instancedMesh) ? instancedMesh.nativeElement : instancedMesh;
+            const buffer = untracked(_buffer);
+            const sampler = new MeshSurfaceSampler(meshObj);
+            if (weight) {
+                sampler.setWeightAttribute(weight);
+            }
+            sampler.build();
+            const position = new THREE.Vector3();
+            const normal = new THREE.Vector3();
+            const color = new THREE.Color();
+            const dummy = new THREE.Object3D();
+            meshObj.updateMatrixWorld(true);
+            for (let i = 0; i < count; i++) {
+                sampler.sample(position, normal, color);
+                if (typeof transform === 'function') {
+                    transform({ dummy, sampledMesh: meshObj, position, normal, color }, i);
+                }
+                else {
+                    dummy.position.copy(position);
+                }
+                dummy.updateMatrix();
+                if (instancedMeshObj) {
+                    instancedMeshObj.setMatrixAt(i, dummy.matrix);
+                }
+                dummy.matrix.toArray(buffer.array, i * 16);
+            }
+            if (instancedMeshObj) {
+                checkUpdate(instancedMeshObj.instanceMatrix);
+            }
+            checkUpdate(buffer);
+            untracked(() => {
+                _buffer.set(buffer.clone());
+            });
+        });
+        return _buffer.asReadonly();
+    });
+}
+extend({ Group });
+class NgtsSampler {
+    set _count(count) {
+        this.inputs.set({ count });
+    }
+    set _mesh(mesh) {
+        this.inputs.set({ mesh });
+    }
+    set _transform(transform) {
+        this.inputs.set({ transform });
+    }
+    set _weight(weight) {
+        this.inputs.set({ weight });
+    }
+    set _instancedMesh(instancedMesh) {
+        this.inputs.set({ instancedMesh });
+    }
+    constructor() {
+        this.inputs = signalStore({ count: 16 });
+        this.samplerRef = injectNgtRef();
+        this.surfaceSamplerState = computed(() => {
+            const sampler = this.samplerRef.nativeElement;
+            if (!sampler)
+                return null;
+            const { count, weight, transform, mesh, instancedMesh } = this.inputs.state();
+            const instancedMeshRef = instancedMesh ??
+                sampler.children.find((child) => child.hasOwnProperty('instanceMatrix'));
+            const meshRef = mesh ?? sampler.children.find((child) => child.type === 'Mesh');
+            return { count, weight, transform, mesh: meshRef, instancedMesh: instancedMeshRef };
+        });
+        injectNgtsSurfaceSampler(this.surfaceSamplerState);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsSampler, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: NgtsSampler, isStandalone: true, selector: "ngts-sampler", inputs: { samplerRef: "samplerRef", _count: ["count", "_count"], _mesh: ["mesh", "_mesh"], _transform: ["transform", "_transform"], _weight: ["weight", "_weight"], _instancedMesh: ["instancedMesh", "_instancedMesh"] }, ngImport: i0, template: `
+		<ngt-group ngtCompound [ref]="samplerRef">
+			<ng-content />
+		</ngt-group>
+	`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsSampler, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-sampler',
+                    standalone: true,
+                    template: `
+		<ngt-group ngtCompound [ref]="samplerRef">
+			<ng-content />
+		</ngt-group>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { samplerRef: [{
+                type: Input
+            }], _count: [{
+                type: Input,
+                args: [{ alias: 'count' }]
+            }], _mesh: [{
+                type: Input,
+                args: [{ alias: 'mesh' }]
+            }], _transform: [{
+                type: Input,
+                args: [{ alias: 'transform' }]
+            }], _weight: [{
+                type: Input,
+                args: [{ alias: 'weight' }]
+            }], _instancedMesh: [{
+                type: Input,
+                args: [{ alias: 'instancedMesh' }]
+            }] } });
+
+extend({ Mesh, CanvasTexture, PlaneGeometry, MeshBasicMaterial });
+class NgtsShadow {
+    constructor() {
+        this.Math = Math;
+        this.DoubleSide = THREE.DoubleSide;
+        this.inputs = signalStore({
+            fog: false,
+            depthWrite: false,
+            colorStop: 0.0,
+            color: 'black',
+            opacity: 0.5,
+        });
+        this.shadowRef = injectNgtRef();
+        this.colorStop = this.inputs.select('colorStop');
+        this.color = this.inputs.select('color');
+        this.opacity = this.inputs.select('opacity');
+        this.fog = this.inputs.select('fog');
+        this.depthWrite = this.inputs.select('depthWrite');
+        this.canvas = computed(() => {
+            const [colorStop, color] = [this.colorStop(), this.color()];
+            const canvas = document.createElement('canvas');
+            canvas.width = 128;
+            canvas.height = 128;
+            const context = canvas.getContext('2d');
+            const gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
+            gradient.addColorStop(colorStop, new THREE.Color(color).getStyle());
+            gradient.addColorStop(1, 'rgba(0,0,0,0)');
+            context.fillStyle = gradient;
+            context.fillRect(0, 0, canvas.width, canvas.height);
+            return canvas;
+        });
+    }
+    set _colorStop(colorStop) {
+        this.inputs.set({ colorStop });
+    }
+    set _fog(fog) {
+        this.inputs.set({ fog });
+    }
+    set _color(color) {
+        this.inputs.set({ color });
+    }
+    set _opacity(opacity) {
+        this.inputs.set({ opacity });
+    }
+    set _depthWrite(depthWrite) {
+        this.inputs.set({ depthWrite });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsShadow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: NgtsShadow, isStandalone: true, selector: "ngts-shadow", inputs: { shadowRef: "shadowRef", _colorStop: ["colorStop", "_colorStop"], _fog: ["fog", "_fog"], _color: ["color", "_color"], _opacity: ["opacity", "_opacity"], _depthWrite: ["depthWrite", "_depthWrite"] }, ngImport: i0, template: `
+		<ngt-mesh ngtCompound [ref]="shadowRef" [rotation]="[-Math.PI / 2, 0, 0]">
+			<ngt-plane-geometry />
+			<ngt-mesh-basic-material
+				[transparent]="true"
+				[opacity]="opacity()"
+				[fog]="fog()"
+				[depthWrite]="depthWrite()"
+				[side]="DoubleSide"
+			>
+				<ngt-canvas-texture *args="[canvas()]" attach="map" />
+			</ngt-mesh-basic-material>
+			<ng-content />
+		</ngt-mesh>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsShadow, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-shadow',
+                    standalone: true,
+                    template: `
+		<ngt-mesh ngtCompound [ref]="shadowRef" [rotation]="[-Math.PI / 2, 0, 0]">
+			<ngt-plane-geometry />
+			<ngt-mesh-basic-material
+				[transparent]="true"
+				[opacity]="opacity()"
+				[fog]="fog()"
+				[depthWrite]="depthWrite()"
+				[side]="DoubleSide"
+			>
+				<ngt-canvas-texture *args="[canvas()]" attach="map" />
+			</ngt-mesh-basic-material>
+			<ng-content />
+		</ngt-mesh>
+	`,
+                    imports: [NgtArgs],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { shadowRef: [{
+                type: Input
+            }], _colorStop: [{
+                type: Input,
+                args: [{ alias: 'colorStop' }]
+            }], _fog: [{
+                type: Input,
+                args: [{ alias: 'fog' }]
+            }], _color: [{
+                type: Input,
+                args: [{ alias: 'color' }]
+            }], _opacity: [{
+                type: Input,
+                args: [{ alias: 'opacity' }]
+            }], _depthWrite: [{
+                type: Input,
+                args: [{ alias: 'depthWrite' }]
+            }] } });
+
+class NgtsStatsGL {
+    set _parent(parent) {
+        this.inputs.set({ parent });
+    }
+    set _containerClass(containerClass) {
+        this.inputs.set({ containerClass });
+    }
+    set _config(config) {
+        this.inputs.set({ config });
+    }
+    constructor() {
+        this.inputs = signalStore();
+        this.document = inject(DOCUMENT);
+        this.store = injectNgtStore();
+        this.gl = this.store.select('gl');
+        this.config = this.inputs.select('config');
+        this.parent = this.inputs.select('parent');
+        this.containerClass = this.inputs.select('containerClass');
+        this.stats = computed(() => {
+            const [config, gl] = [this.config() || {}, this.gl()];
+            const stats = new Stats(config);
+            stats.init(gl.domElement);
+            return stats;
+        });
+        effect((onCleanup) => {
+            const [parent, stats, containerClass] = [this.parent(), this.stats(), this.containerClass()];
+            const node = parent ? (is.ref(parent) ? parent.nativeElement : parent) : this.document.body;
+            node.appendChild(stats.container);
+            if (containerClass)
+                stats.container.classList.add(...containerClass.split(' ').filter(Boolean));
+            const begin = addEffect(() => stats.begin());
+            const end = addAfterEffect(() => stats.end());
+            onCleanup(() => {
+                node.removeChild(stats.container);
+                begin();
+                end();
             });
-            const fboRef = injectNgtsFBO(fboParams, { injector });
-            effect(() => {
-                const fbo = fboRef();
-                if (fbo) {
-                    depthBufferRef.set(fbo.depthTexture);
-                    safeDetectChanges(cdr);
-                }
-            }, { allowSignalWrites: true, injector });
-            let count = 0;
-            injectBeforeRender(({ gl, scene, camera }) => {
-                const params = { size: 256, frames: Infinity, ...paramsFactory() };
-                const fbo = untracked(fboRef);
-                if ((params.frames === Infinity || count < params.frames) && fbo) {
-                    gl.setRenderTarget(fbo);
-                    gl.render(scene, camera);
-                    gl.setRenderTarget(null);
-                    count++;
-                }
-            }, { injector });
-        });
-        return depthBufferRef.asReadonly();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsStatsGL, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: NgtsStatsGL, isStandalone: true, selector: "ngts-stats-gl", inputs: { _parent: ["parent", "_parent"], _containerClass: ["containerClass", "_containerClass"], _config: ["config", "_config"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsStatsGL, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ngts-stats-gl', standalone: true }]
+        }], ctorParameters: function () { return []; }, propDecorators: { _parent: [{
+                type: Input,
+                args: [{ alias: 'parent' }]
+            }], _containerClass: [{
+                type: Input,
+                args: [{ alias: 'containerClass' }]
+            }], _config: [{
+                type: Input,
+                args: [{ alias: 'config' }]
+            }] } });
+
+// default ease
+const easeCircleOut = (x) => Math.sqrt(1 - Math.pow(x - 1, 2));
+// smooth new sample (measurement) based on previous sample (current)
+function smoothAverage(current, measurement, smoothing = 0.9) {
+    return measurement * smoothing + current * (1.0 - smoothing);
+}
+class TrailTexture {
+    constructor({ size = 256, maxAge = 750, radius = 0.3, intensity = 0.2, interpolate = 0, smoothing = 0, minForce = 0.3, blend = 'screen', // source-over is canvas default. Others are slower
+    ease = easeCircleOut, } = {}) {
+        this.size = size;
+        this.maxAge = maxAge;
+        this.radius = radius;
+        this.intensity = intensity;
+        this.ease = ease;
+        this.interpolate = interpolate;
+        this.smoothing = smoothing;
+        this.minForce = minForce;
+        this.blend = blend;
+        this.trail = [];
+        this.force = 0;
+        this.initTexture();
+    }
+    initTexture() {
+        this.canvas = document.createElement('canvas');
+        this.canvas.width = this.canvas.height = this.size;
+        this.ctx = this.canvas.getContext('2d');
+        this.ctx.fillStyle = 'black';
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        this.texture = new Texture(this.canvas);
+        this.canvas.id = 'touchTexture';
+        this.canvas.style.width = this.canvas.style.height = `${this.canvas.width}px`;
+    }
+    update(delta) {
+        this.clear();
+        // age points
+        this.trail.forEach((point, i) => {
+            point.age += delta * 1000;
+            // remove old
+            if (point.age > this.maxAge) {
+                this.trail.splice(i, 1);
+            }
+        });
+        // reset force when empty (when smoothing)
+        if (!this.trail.length)
+            this.force = 0;
+        this.trail.forEach((point) => {
+            this.drawTouch(point);
+        });
+        this.texture.needsUpdate = true;
+    }
+    clear() {
+        this.ctx.globalCompositeOperation = 'source-over';
+        this.ctx.fillStyle = 'black';
+        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+    addTouch(point) {
+        const last = this.trail[this.trail.length - 1];
+        if (last) {
+            const dx = last.x - point.x;
+            const dy = last.y - point.y;
+            const dd = dx * dx + dy * dy;
+            const force = Math.max(this.minForce, Math.min(dd * 10000, 1));
+            this.force = smoothAverage(force, this.force, this.smoothing);
+            if (!!this.interpolate) {
+                const lines = Math.ceil(dd / Math.pow((this.radius * 0.5) / this.interpolate, 2));
+                if (lines > 1) {
+                    for (let i = 1; i < lines; i++) {
+                        this.trail.push({
+                            x: last.x - (dx / lines) * i,
+                            y: last.y - (dy / lines) * i,
+                            age: 0,
+                            force,
+                        });
+                    }
+                }
+            }
+        }
+        this.trail.push({ x: point.x, y: point.y, age: 0, force: this.force });
+    }
+    drawTouch(point) {
+        const pos = {
+            x: point.x * this.size,
+            y: (1 - point.y) * this.size,
+        };
+        let intensity = 1;
+        if (point.age < this.maxAge * 0.3) {
+            intensity = this.ease(point.age / (this.maxAge * 0.3));
+        }
+        else {
+            intensity = this.ease(1 - (point.age - this.maxAge * 0.3) / (this.maxAge * 0.7));
+        }
+        intensity *= point.force;
+        // apply blending
+        this.ctx.globalCompositeOperation = this.blend;
+        const radius = this.size * this.radius * intensity;
+        const grd = this.ctx.createRadialGradient(pos.x, pos.y, Math.max(0, radius * 0.25), pos.x, pos.y, Math.max(0, radius));
+        grd.addColorStop(0, `rgba(255, 255, 255, ${this.intensity})`);
+        grd.addColorStop(1, `rgba(0, 0, 0, 0.0)`);
+        this.ctx.beginPath();
+        this.ctx.fillStyle = grd;
+        this.ctx.arc(pos.x, pos.y, Math.max(0, radius), 0, Math.PI * 2);
+        this.ctx.fill();
+    }
+}
+
+function injectNgtsTrailTexture(trailConfigFn, { injector } = {}) {
+    injector = assertInjector(injectNgtsTrailTexture, injector);
+    return runInInjectionContext(injector, () => {
+        const trail = computed(() => new TrailTexture(trailConfigFn() || {}));
+        const texture = computed(() => trail().texture);
+        injectBeforeRender(({ delta }) => {
+            trail().update(delta);
+        });
+        const onMove = (ev) => trail().addTouch(ev.uv);
+        return { texture, onMove };
+    });
+}
+
+const shiftLeft = (collection, steps = 1) => {
+    collection.set(collection.subarray(steps));
+    collection.fill(-Infinity, -steps);
+    return collection;
+};
+const defaultSettings = {
+    width: 0.2,
+    length: 1,
+    decay: 1,
+    local: false,
+    stride: 0,
+    interval: 1,
+};
+function injectNgtsTrail(targetFactory, settingsFactory, { injector } = {}) {
+    injector = assertInjector(injectNgtsTrail, injector);
+    return runInInjectionContext(injector, () => {
+        const _points = signal(new Float32Array());
+        let frameCount = 0;
+        const prevPosition = new THREE.Vector3();
+        const worldPosition = new THREE.Vector3();
+        const _target = computed(() => {
+            const _target = targetFactory();
+            if (is.ref(_target))
+                return _target.nativeElement;
+            return _target;
+        });
+        const _settings = computed(() => ({ ...defaultSettings, ...settingsFactory() }));
+        const _length = computed(() => _settings().length);
+        effect(() => {
+            const [target, length] = [_target(), _length()];
+            if (target) {
+                untracked(() => {
+                    _points.set(Float32Array.from({ length: length * 10 * 3 }, (_, i) => target.position.getComponent(i % 3)));
+                });
+            }
+        });
+        injectBeforeRender(() => {
+            const [target, points, { local, decay, stride, interval }] = [_target(), _points(), _settings()];
+            if (!target || !points)
+                return;
+            if (frameCount === 0) {
+                let newPosition;
+                if (local) {
+                    newPosition = target.position;
+                }
+                else {
+                    target.getWorldPosition(worldPosition);
+                    newPosition = worldPosition;
+                }
+                const steps = 1 * decay;
+                for (let i = 0; i < steps; i++) {
+                    if (newPosition.distanceTo(prevPosition) < stride)
+                        continue;
+                    shiftLeft(points, 3);
+                    points.set(newPosition.toArray(), points.length - 3);
+                }
+                prevPosition.copy(newPosition);
+            }
+            frameCount++;
+            frameCount = frameCount % interval;
+        });
+        return _points.asReadonly();
     });
 }
+extend({ Group, Mesh });
+class NgtsTrail {
+    set _color(color) {
+        this.inputs.set({ color });
+    }
+    set _attenuation(attenuation) {
+        this.inputs.set({ attenuation });
+    }
+    set _target(target) {
+        this.inputs.set({ target });
+    }
+    set _settings(settings) {
+        this.inputs.set({ settings: { ...defaultSettings, ...settings } });
+    }
+    constructor() {
+        this.inputs = signalStore({ settings: defaultSettings, color: 'hotpink' });
+        this.trailRef = injectNgtRef();
+        this.groupRef = injectNgtRef();
+        this.children = this.groupRef.children('both');
+        this.store = injectNgtStore();
+        this.size = this.store.select('size');
+        this.target = this.inputs.select('target');
+        this.settings = this.inputs.select('settings');
+        this.width = computed(() => this.settings().width);
+        this.color = this.inputs.select('color');
+        this.attenuation = this.inputs.select('attenuation');
+        this.anchor = computed(() => {
+            const target = this.target();
+            if (target)
+                return target;
+            const group = this.groupRef.nativeElement;
+            if (group) {
+                return group.children.find((child) => child instanceof THREE.Object3D) || null;
+            }
+            return null;
+        });
+        this.points = injectNgtsTrail(this.anchor, this.settings);
+        this.scene = this.store.select('scene');
+        this.geometry = new MeshLineGeometry();
+        this.material = computed(() => {
+            const [width, color, size] = [this.width(), this.color(), this.size()];
+            const m = new MeshLineMaterial({
+                lineWidth: 0.1 * width,
+                color,
+                sizeAttenuation: 1,
+                resolution: new THREE.Vector2(size.width, size.height),
+            });
+            // TODO: understand this first
+            // Get and apply first <meshLineMaterial /> from children
+            // let matOverride: React.ReactElement | undefined;
+            // if (children) {
+            // 	if (Array.isArray(children)) {
+            // 		matOverride = children.find((child: React.ReactNode) => {
+            // 			const c = child as React.ReactElement;
+            // 			return typeof c.type === 'string' && c.type === 'meshLineMaterial';
+            // 		}) as React.ReactElement | undefined;
+            // 	} else {
+            // 		const c = children as React.ReactElement;
+            // 		if (typeof c.type === 'string' && c.type === 'meshLineMaterial') {
+            // 			matOverride = c;
+            // 		}
+            // 	}
+            // }
+            // if (typeof matOverride?.props === 'object') {
+            // 	m.setValues(matOverride.props);
+            // }
+            return m;
+        });
+        this.setMaterialSize();
+        this.beforeRender();
+    }
+    setMaterialSize() {
+        effect(() => {
+            const [material, size] = [this.material(), this.size()];
+            material.uniforms['resolution'].value.set(size.width, size.height);
+        });
+    }
+    beforeRender() {
+        injectBeforeRender(() => {
+            const [points, attenuation] = [this.points(), this.attenuation()];
+            this.geometry.setPoints(points, attenuation);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsTrail, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: NgtsTrail, isStandalone: true, selector: "ngts-trail", inputs: { trailRef: "trailRef", _color: ["color", "_color"], _attenuation: ["attenuation", "_attenuation"], _target: ["target", "_target"], _settings: ["settings", "_settings"] }, ngImport: i0, template: `
+		<ngt-group>
+			<ngt-portal [container]="scene()" [autoRender]="false">
+				<ng-template ngtPortalContent>
+					<ngt-mesh [ref]="trailRef" [geometry]="geometry" [material]="material()" />
+				</ng-template>
+			</ngt-portal>
+			<ngt-group [ref]="groupRef">
+				<ng-content />
+			</ngt-group>
+		</ngt-group>
+	`, isInline: true, dependencies: [{ kind: "component", type: NgtPortal, selector: "ngt-portal", inputs: ["container", "state", "autoRender", "autoRenderPriority"], outputs: ["beforeRender"] }, { kind: "directive", type: NgtPortalContent, selector: "ng-template[ngtPortalContent]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsTrail, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-trail',
+                    standalone: true,
+                    template: `
+		<ngt-group>
+			<ngt-portal [container]="scene()" [autoRender]="false">
+				<ng-template ngtPortalContent>
+					<ngt-mesh [ref]="trailRef" [geometry]="geometry" [material]="material()" />
+				</ng-template>
+			</ngt-portal>
+			<ngt-group [ref]="groupRef">
+				<ng-content />
+			</ngt-group>
+		</ngt-group>
+	`,
+                    imports: [NgtPortal, NgtPortalContent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { trailRef: [{
+                type: Input
+            }], _color: [{
+                type: Input,
+                args: [{ alias: 'color' }]
+            }], _attenuation: [{
+                type: Input,
+                args: [{ alias: 'attenuation' }]
+            }], _target: [{
+                type: Input,
+                args: [{ alias: 'target' }]
+            }], _settings: [{
+                type: Input,
+                args: [{ alias: 'settings' }]
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgtsBakeShadows, injectNgtsAnimations, injectNgtsDepthBuffer, injectNgtsFBO };
+export { NgtsBakeShadows, NgtsCaustics, NgtsDecal, NgtsExample, NgtsHtml, NgtsSampler, NgtsShadow, NgtsStatsGL, NgtsTrail, injectNgtsAnimations, injectNgtsDepthBuffer, injectNgtsExampleApi, injectNgtsFBO, injectNgtsHtmlInputs, injectNgtsSurfaceSampler, injectNgtsTrail, injectNgtsTrailTexture, provideNgtsExampleApi, provideNgtsHtmlInputs };
 //# sourceMappingURL=angular-three-soba-misc.mjs.map