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

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

@@ -1,57 +1,65 @@
 import * as i0 from '@angular/core';
-import { runInInjectionContext, computed, effect, Directive, inject, ChangeDetectorRef, DestroyRef, Component, CUSTOM_ELEMENTS_SCHEMA, Input, forwardRef, signal, ViewContainerRef, untracked, ViewChild, EventEmitter, TemplateRef, ContentChild, Output, Injector } from '@angular/core';
-import { assertInjectionContext, injectNgtRef, injectBeforeRender, injectNgtStore, safeDetectChanges, extend, signalStore, is, applyProps, createInjectionToken, HTML, checkUpdate, NgtArgs, addEffect, addAfterEffect, NgtPortal, NgtPortalContent } from 'angular-three';
-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 Stats from 'stats-gl';
-import { MeshLineGeometry, MeshLineMaterial } from 'meshline';
+import { computed, isSignal, signal, effect, untracked, Directive, input, viewChild, afterNextRender, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, inject, DestroyRef, TemplateRef, ViewContainerRef, Injector, output, Renderer2, model, ElementRef } from '@angular/core';
+import { injectBeforeRender, resolveRef, injectStore, getLocalState, NgtArgs, omit, pick, extend, applyProps, is, NgtHTML, addEffect, addAfterEffect, checkUpdate } from 'angular-three';
+import { assertInjector } from 'ngxtension/assert-injector';
+import { AnimationMixer, BufferAttribute, REVISION, Mesh, BoxGeometry, MeshNormalMaterial, AxesHelper, Vector3, Euler, Object3D, WebGLRenderTarget, LinearFilter, HalfFloatType, DepthTexture, FloatType, DepthFormat, UnsignedShortType, DoubleSide, Group, PlaneGeometry, ShaderMaterial, Vector2, OrthographicCamera, PerspectiveCamera, InstancedBufferAttribute, Color } from 'three';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+import { mergeInputs } from 'ngxtension/inject-inputs';
+import { DecalGeometry, MeshSurfaceSampler } from 'three-stdlib';
+import { NgTemplateOutlet } from '@angular/common';
 
-function injectNgtsAnimations(animationsFactory, { ref, injector, playFirstClip = true, } = {}) {
-    injector = assertInjectionContext(injectNgtsAnimations, injector);
-    return runInInjectionContext(injector, () => {
-        let actualRef = injectNgtRef();
-        if (ref) {
-            if (ref instanceof THREE.Object3D) {
-                actualRef.nativeElement = ref;
-            }
-            else {
-                actualRef = ref;
-            }
-        }
-        const mixer = new THREE.AnimationMixer(null);
-        const actions = {};
+/**
+ * Use afterNextRender
+ */
+function injectAnimations(animations, object, { injector } = {}) {
+    return assertInjector(injectAnimations, injector, () => {
+        const mixer = new AnimationMixer(null);
+        injectBeforeRender(({ delta }) => {
+            if (!mixer.getRoot())
+                return;
+            mixer.update(delta);
+        });
         let cached = {};
-        let object = null;
+        const actions = {};
         const clips = [];
         const names = [];
-        injectBeforeRender(({ delta }) => mixer.update(delta));
-        const ready = computed(() => !!actualRef.nativeElement && !!animationsFactory().length);
+        const actualObject = computed(() => {
+            if (isSignal(object) || typeof object === 'function') {
+                return resolveRef(object());
+            }
+            return resolveRef(object);
+        });
+        const ready = signal(false);
         effect((onCleanup) => {
-            const actual = actualRef.nativeElement;
-            if (!actual)
+            const obj = actualObject();
+            if (!obj)
+                return;
+            Object.assign(mixer, { _root: obj });
+            const maybeAnimationClips = animations();
+            if (!maybeAnimationClips)
                 return;
-            object = actual;
-            const animations = animationsFactory();
-            for (let i = 0; i < animations.length; i++) {
-                const clip = animations[i];
+            const animationClips = Array.isArray(maybeAnimationClips) ? maybeAnimationClips : maybeAnimationClips.animations;
+            for (let i = 0; i < animationClips.length; i++) {
+                const clip = animationClips[i];
                 names.push(clip.name);
                 clips.push(clip);
-                Object.defineProperty(actions, clip.name, {
-                    enumerable: true,
-                    get: () => {
-                        return cached[clip.name] || (cached[clip.name] = mixer.clipAction(clip, actual));
-                    },
-                });
-                if (i === 0 && playFirstClip) {
-                    actions[clip.name].play();
+                if (!actions[clip.name]) {
+                    Object.defineProperty(actions, clip.name, {
+                        enumerable: true,
+                        get: () => {
+                            if (!cached[clip.name]) {
+                                cached[clip.name] = mixer.clipAction(clip, obj);
+                            }
+                            return cached[clip.name];
+                        },
+                    });
                 }
             }
+            untracked(() => {
+                if (!ready()) {
+                    ready.set(true);
+                }
+            });
             onCleanup(() => {
                 // clear cached
                 cached = {};
@@ -59,543 +67,144 @@ function injectNgtsAnimations(animationsFactory, { ref, injector, playFirstClip
                 mixer.stopAllAction();
                 // uncache actions
                 Object.values(actions).forEach((action) => {
-                    mixer.uncacheAction(action, object);
+                    mixer.uncacheAction(action, obj);
                 });
-                object = null;
             });
         });
-        return { ref: actualRef, actions, mixer, names, clips, ready };
+        return { clips, mixer, actions, names, ready };
     });
 }
 
 class NgtsBakeShadows {
     constructor() {
-        const store = injectNgtStore();
-        const glShadowMap = store.select('gl', 'shadowMap');
-        effect((onCleanup) => {
-            const shadowMap = glShadowMap();
-            shadowMap.autoUpdate = false;
-            shadowMap.needsUpdate = true;
-            onCleanup(() => {
-                shadowMap.autoUpdate = shadowMap.needsUpdate = true;
-            });
+        const autoEffect = injectAutoEffect();
+        const store = injectStore();
+        const gl = store.select('gl');
+        autoEffect(() => {
+            const _gl = gl();
+            _gl.shadowMap.autoUpdate = false;
+            _gl.shadowMap.needsUpdate = true;
+            return () => {
+                _gl.shadowMap.autoUpdate = _gl.shadowMap.needsUpdate = true;
+            };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsBakeShadows, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: NgtsBakeShadows, isStandalone: true, selector: "ngts-bake-shadows", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsBakeShadows, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: NgtsBakeShadows, isStandalone: true, selector: "ngts-bake-shadows", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsBakeShadows, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsBakeShadows, decorators: [{
             type: Directive,
-            args: [{ selector: 'ngts-bake-shadows', standalone: true }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ standalone: true, selector: 'ngts-bake-shadows' }]
+        }], ctorParameters: () => [] });
 
-function injectNgtsFBO(fboParams, { injector } = {}) {
-    injector = assertInjectionContext(injectNgtsFBO, injector);
-    return runInInjectionContext(injector, () => {
-        const store = injectNgtStore();
-        const cdr = inject(ChangeDetectorRef);
-        const targetRef = injectNgtRef(null);
-        inject(DestroyRef).onDestroy(() => targetRef.nativeElement?.dispose());
-        const size = store.select('size');
-        const dpr = store.select('viewport', 'dpr');
-        const fboSettings = 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 } = fboSettings();
-            const { samples = 0, depth, ...targetSettings } = settings;
-            let untrackedTarget = targetRef.untracked;
-            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.nativeElement = target;
-                untrackedTarget = targetRef.untracked;
-            }
-            if (untrackedTarget) {
-                untrackedTarget.setSize(width, height);
-                if (samples)
-                    untrackedTarget.samples = samples;
-                safeDetectChanges(cdr);
-            }
-        });
-        return targetRef;
-    });
-}
-
-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 });
-    }
+/**
+ * Used exclusively as a child of a BufferGeometry.
+ * Computes the BufferAttribute by calling the `compute` function
+ * and attaches the attribute to the geometry.
+ */
+class NgtsComputedAttribute {
     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.nativeElement,
-                this.normalTargetBFbo.nativeElement,
-                this.causticsTargetFbo.nativeElement,
-                this.causticsTargetBFbo.nativeElement,
-                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());
-            }
+        this.compute = input.required();
+        this.name = input.required();
+        this.options = input({});
+        this.bufferAttribute = new BufferAttribute(new Float32Array(0), 1);
+        this.attributeRef = viewChild('attribute');
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const bufferAttribute = this.attributeRef()?.nativeElement;
+                if (!bufferAttribute)
+                    return;
+                const localState = getLocalState(bufferAttribute);
+                if (!localState)
+                    return;
+                const geometry = bufferAttribute.parent ?? localState.parent();
+                const attribute = this.compute()(geometry);
+                bufferAttribute.copy(attribute);
+            });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsCaustics, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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.nativeElement && causticsTargetBFbo.nativeElement"
-					[transparent]="true"
-					[color]="color()"
-					[causticsTexture]="causticsTargetFbo.nativeElement.texture"
-					[causticsTextureB]="causticsTargetBFbo.nativeElement.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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsComputedAttribute, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsComputedAttribute, isStandalone: true, selector: "ngts-computed-attribute", inputs: { compute: { classPropertyName: "compute", publicName: "compute", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "attributeRef", first: true, predicate: ["attribute"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-primitive #attribute *args="[bufferAttribute]" [attach]="['attributes', name()]" [parameters]="options()">
+			<ng-content />
+		</ngt-primitive>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsCaustics, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsComputedAttribute, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-caustics',
+                    selector: 'ngts-computed-attribute',
                     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.nativeElement && causticsTargetBFbo.nativeElement"
-					[transparent]="true"
-					[color]="color()"
-					[causticsTexture]="causticsTargetFbo.nativeElement.texture"
-					[causticsTextureB]="causticsTargetBFbo.nativeElement.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>
+		<ngt-primitive #attribute *args="[bufferAttribute]" [attach]="['attributes', name()]" [parameters]="options()">
+			<ng-content />
+		</ngt-primitive>
 	`,
-                    imports: [NgIf, NgtsEdges, NgtsSobaContent],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
                 }]
-        }], 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' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-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];
+function getVersion() {
+    return parseInt(REVISION.replace(/\D+/g, ''));
 }
+
+const defaultOptions$1 = {
+    polygonOffsetFactor: -10,
+    debug: false,
+    depthTest: false,
+};
 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) {
+        this.mesh = input();
+        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
+        this.parameters = omit(this.options, [
+            'debug',
+            'map',
+            'depthTest',
+            'polygonOffsetFactor',
+            'position',
+            'scale',
+            'rotation',
+        ]);
+        this.meshRef = viewChild.required('mesh');
+        this.helperRef = viewChild('helper');
+        this.map = pick(this.options, 'map');
+        this.depthTest = pick(this.options, 'depthTest');
+        this.polygonOffsetFactor = pick(this.options, 'polygonOffsetFactor');
+        this.debug = pick(this.options, 'debug');
+        this.position = pick(this.options, 'position');
+        this.rotation = pick(this.options, 'rotation');
+        this.scale = pick(this.options, 'scale');
+        extend({ Mesh, BoxGeometry, MeshNormalMaterial, AxesHelper });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const thisMesh = this.meshRef().nativeElement;
+                const localState = getLocalState(thisMesh);
+                if (!localState)
+                    return;
+                const mesh = resolveRef(this.mesh());
+                const parent = mesh || localState.parent();
+                if (parent && !parent.isMesh) {
+                    throw new Error('<ngts-decal> must have a Mesh as parent or specify its "mesh" input');
+                }
+                if (!parent)
+                    return;
+                const [position, rotation, scale] = [this.position(), this.rotation(), this.scale()];
+                const state = {
+                    position: new Vector3(),
+                    rotation: new Euler(),
+                    scale: new Vector3(1, 1, 1),
+                };
                 applyProps(state, { position, scale });
-                // Zero out the parents matrix world for this operation
+                // 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();
+                    const o = new Object3D();
                     o.position.copy(state.position);
                     o.lookAt(parent.position);
                     if (typeof rotation === 'number')
@@ -605,287 +214,333 @@ class NgtsDecal {
                 else {
                     applyProps(state, { rotation });
                 }
-                decal.geometry = new DecalGeometry(parent, state.position, state.rotation, state.scale);
+                thisMesh.geometry = new DecalGeometry(parent, state.position, state.rotation, state.scale);
+                const helper = this.helperRef()?.nativeElement;
                 if (helper) {
                     applyProps(helper, state);
                     // Prevent the helpers from blocking rays
                     helper.traverse((child) => (child.raycast = () => null));
                 }
-                // Reset parents matix-world
+                // Reset parents matrix-world
                 parent.matrixWorld = matrixWorld;
-                onCleanup(() => {
-                    decal.geometry.dispose();
-                });
-            }
+                return () => {
+                    thisMesh.geometry.dispose();
+                };
+            });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsDecal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsDecal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsDecal, isStandalone: true, selector: "ngts-decal", inputs: { mesh: { classPropertyName: "mesh", publicName: "mesh", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "meshRef", first: true, predicate: ["mesh"], descendants: true, isSignal: true }, { propertyName: "helperRef", first: true, predicate: ["helper"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-mesh #mesh [parameters]="parameters()">
 			<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>
+			<ng-content>
+				<!-- we only want to pass through these material properties if they don't use a custom material -->
+				<ngt-value [rawValue]="polygonOffsetFactor()" attach="material.polygonOffsetFactor" />
+				<ngt-value [rawValue]="depthTest()" attach="material.depthTest" />
+			</ng-content>
+
+			@if (debug()) {
+				<ngt-mesh #helper>
+					<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"] }] }); }
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsDecal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsDecal, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-decal',
                     standalone: true,
                     template: `
-		<ngt-mesh [ref]="decalRef" ngtCompound>
+		<ngt-mesh #mesh [parameters]="parameters()">
 			<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>
+			<ng-content>
+				<!-- we only want to pass through these material properties if they don't use a custom material -->
+				<ngt-value [rawValue]="polygonOffsetFactor()" attach="material.polygonOffsetFactor" />
+				<ngt-value [rawValue]="depthTest()" attach="material.depthTest" />
+			</ng-content>
+
+			@if (debug()) {
+				<ngt-mesh #helper>
+					<ngt-box-geometry />
+					<ngt-mesh-normal-material [wireframe]="true" />
+					<ngt-axes-helper />
+				</ngt-mesh>
+			}
 		</ngt-mesh>
 	`,
-                    imports: [NgIf],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], 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' }]
-            }] } });
+        }], ctorParameters: () => [] });
+
+/**
+ * NOTE: Sets `BufferAttribute.updateRange` since r159.
+ */
+const setUpdateRange = (attribute, updateRange) => {
+    if ('updateRanges' in attribute) {
+        // attribute.updateRanges[0] = updateRange;
+        attribute.addUpdateRange(updateRange.offset, updateRange.count);
+    }
+    else {
+        Object.assign(attribute, { updateRange });
+    }
+};
+const LinearEncoding = 3000;
+const sRGBEncoding = 3001;
 
-function injectNgtsDepthBuffer(paramsFactory = () => ({}), { injector } = {}) {
-    injector = assertInjectionContext(injectNgtsDepthBuffer, injector);
-    return runInInjectionContext(injector, () => {
-        const depthBufferRef = injectNgtRef(null);
-        const store = injectNgtStore();
-        const cdr = inject(ChangeDetectorRef);
+function injectFBO(params, { injector } = {}) {
+    return assertInjector(injectFBO, injector, () => {
+        const store = injectStore();
         const size = store.select('size');
-        const dpr = store.select('viewport', 'dpr');
-        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 viewport = store.select('viewport');
+        const width = computed(() => {
+            const { width } = params();
+            return typeof width === 'number' ? width : size().width * viewport().dpr;
         });
-        const fboRef = injectNgtsFBO(fboParams, { injector });
-        effect(() => {
-            const fbo = fboRef.nativeElement;
-            if (fbo) {
-                depthBufferRef.nativeElement = fbo.depthTexture;
-                safeDetectChanges(cdr);
+        const height = computed(() => {
+            const { height } = params();
+            return typeof height === 'number' ? height : size().height * viewport().dpr;
+        });
+        const settings = computed(() => {
+            const { width, settings } = params();
+            const _settings = (typeof width === 'number' ? settings : width) || {};
+            if (_settings.samples === undefined) {
+                _settings.samples = 0;
             }
+            return _settings;
+        });
+        const target = computed(() => {
+            const [{ samples = 0, depth, ...targetSettings }, _width, _height] = [
+                untracked(settings),
+                untracked(width),
+                untracked(height),
+            ];
+            const target = new WebGLRenderTarget(_width, _height, {
+                minFilter: LinearFilter,
+                magFilter: LinearFilter,
+                type: HalfFloatType,
+                ...targetSettings,
+            });
+            if (depth) {
+                target.depthTexture = new DepthTexture(_width, _height, FloatType);
+            }
+            target.samples = samples;
+            return target;
+        });
+        effect(() => {
+            const [{ samples = 0 }, _width, _height, _target] = [settings(), width(), height(), target()];
+            _target.setSize(_width, _height);
+            if (samples)
+                _target.samples = samples;
         });
+        inject(DestroyRef).onDestroy(() => target().dispose());
+        return target;
+    });
+}
+class NgtsFBO {
+    constructor() {
+        this.fbo = input({});
+        this.template = inject(TemplateRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        let ref;
+        const injector = inject(Injector);
+        afterNextRender(() => {
+            const fboTarget = injectFBO(() => {
+                const { width, height, ...settings } = this.fbo();
+                return { width, height, settings };
+            }, { injector });
+            untracked(() => {
+                ref = this.viewContainerRef.createEmbeddedView(this.template, { $implicit: fboTarget });
+                ref.detectChanges();
+            });
+        });
+        inject(DestroyRef).onDestroy(() => {
+            ref?.destroy();
+        });
+    }
+    static ngTemplateContextGuard(_, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsFBO, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtsFBO, isStandalone: true, selector: "ng-template[fbo]", inputs: { fbo: { classPropertyName: "fbo", publicName: "fbo", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsFBO, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[fbo]', standalone: true }]
+        }], ctorParameters: () => [] });
+
+function injectDepthBuffer(params = () => ({}), { injector } = {}) {
+    return assertInjector(injectDepthBuffer, injector, () => {
+        const size = computed(() => params().size || 256);
+        const frames = computed(() => params().frames || Infinity);
+        const store = injectStore();
+        const width = store.select('size', 'width');
+        const height = store.select('size', 'height');
+        const dpr = store.select('viewport', 'dpr');
+        const w = computed(() => size() || width() * dpr());
+        const h = computed(() => size() || height() * dpr());
+        const depthConfig = computed(() => {
+            const depthTexture = new DepthTexture(w(), h());
+            depthTexture.format = DepthFormat;
+            depthTexture.type = UnsignedShortType;
+            return { depthTexture };
+        });
+        const depthFBO = injectFBO(() => ({
+            width: w(),
+            height: h(),
+            settings: depthConfig(),
+        }));
         let count = 0;
         injectBeforeRender(({ gl, scene, camera }) => {
-            const params = { size: 256, frames: Infinity, ...paramsFactory() };
-            const fbo = fboRef.untracked;
-            if ((params.frames === Infinity || count < params.frames) && fbo) {
-                gl.setRenderTarget(fbo);
+            if (frames() === Infinity || count < frames()) {
+                gl.setRenderTarget(depthFBO());
                 gl.render(scene, camera);
                 gl.setRenderTarget(null);
                 count++;
             }
-        }, { injector });
-        return depthBufferRef;
+        });
+        return pick(depthFBO, 'depthTexture');
     });
 }
 
-/**
- * augment HTMLElementTagNameMap with the selector of the component.
- * the type is usually the Inputs' state and the root THREE element
+const defaultHtmlOptions = {
+    occlude: false,
+    transform: false,
+    castShadow: false,
+    receiveShadow: false,
+};
+class NgtsHTML {
+    constructor() {
+        this.options = input(defaultHtmlOptions, { transform: mergeInputs(defaultHtmlOptions) });
+        this.parameters = omit(this.options, ['occlude', 'castShadow', 'receiveShadow', 'transform']);
+        this.groupRef = viewChild.required('group');
+        this.occlusionMeshRef = viewChild('occlusionMesh');
+        this.occlusionGeometryRef = viewChild('occlusionGeometry');
+        this.occlude = pick(this.options, 'occlude');
+        this.transform = pick(this.options, 'transform');
+        this.castShadow = pick(this.options, 'castShadow');
+        this.receiveShadow = pick(this.options, 'receiveShadow');
+        this.scale = pick(this.options, 'scale');
+        this.isRaycastOcclusion = computed(() => {
+            const occlude = this.occlude();
+            return (occlude && occlude !== 'blending') || (Array.isArray(occlude) && occlude.length && is.ref(occlude[0]));
+        });
+        this.shaders = computed(() => {
+            const transform = this.transform();
+            const vertexShader = !transform
+                ? /* language=glsl 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>
 
-declare global {
-    interface HTMLElementTagNameMap {
-        \/**
-         * @extends ngt-group
-         *\/
-        'ngts-example': NgtsExampleState & NgtGroup;
-    }
-}
+          void main() {
+            vec2 center = vec2(0., 1.);
+            float rotation = 0.0;
 
-*/
-/**
- * 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.1.7", ngImport: i0, type: NgtsExample, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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 />
+            // 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;
+            const fragmentShader = /* language=glsl glsl */ `
+      void main() {
+        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+      }
+    `;
+            return { vertexShader, fragmentShader };
+        });
+        this.vertexShader = pick(this.shaders, 'vertexShader');
+        this.fragmentShader = pick(this.shaders, 'fragmentShader');
+        this.DoubleSide = DoubleSide;
+        extend({ Group, Mesh, PlaneGeometry, ShaderMaterial });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsHTML, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsHTML, isStandalone: true, selector: "ngts-html", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "occlusionMeshRef", first: true, predicate: ["occlusionMesh"], descendants: true, isSignal: true }, { propertyName: "occlusionGeometryRef", first: true, predicate: ["occlusionGeometry"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-group #group [parameters]="parameters()">
+			@if (occlude() && !isRaycastOcclusion()) {
+				<ngt-mesh #occlusionMesh [castShadow]="castShadow()" [receiveShadow]="receiveShadow()">
+					<ng-content select="[data-occlusion-geometry]">
+						<ngt-plane-geometry #occlusionGeometry />
+					</ng-content>
+					<ng-content select="[data-occlusion-material]">
+						<ngt-shader-material
+							[side]="DoubleSide"
+							[vertexShader]="vertexShader()"
+							[fragmentShader]="fragmentShader()"
+						/>
+					</ng-content>
+				</ngt-mesh>
+			}
 		</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"] }] }); }
+
+		<ng-content />
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsExample, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsHTML, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-example',
+                    selector: 'ngts-html',
                     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 #group [parameters]="parameters()">
+			@if (occlude() && !isRaycastOcclusion()) {
+				<ngt-mesh #occlusionMesh [castShadow]="castShadow()" [receiveShadow]="receiveShadow()">
+					<ng-content select="[data-occlusion-geometry]">
+						<ngt-plane-geometry #occlusionGeometry />
+					</ng-content>
+					<ng-content select="[data-occlusion-material]">
+						<ngt-shader-material
+							[side]="DoubleSide"
+							[vertexShader]="vertexShader()"
+							[fragmentShader]="fragmentShader()"
+						/>
+					</ng-content>
+				</ngt-mesh>
+			}
 		</ngt-group>
+
+		<ng-content />
 	`,
-                    /**
-                     * 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],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], 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' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-var _a;
-const v1 = new THREE.Vector3();
-const v2 = new THREE.Vector3();
-const v3 = new THREE.Vector3();
+const v1 = new Vector3();
+const v2 = new Vector3();
+const v3 = new Vector3();
+const v4 = new Vector2();
 function defaultCalculatePosition(el, camera, size) {
     const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
     objectPos.project(camera);
@@ -904,7 +559,8 @@ function isObjectVisible(el, camera, raycaster, occlude) {
     const elPos = v1.setFromMatrixPosition(el.matrixWorld);
     const screenPos = elPos.clone();
     screenPos.project(camera);
-    raycaster.setFromCamera(screenPos, camera);
+    v4.set(screenPos.x, screenPos.y);
+    raycaster.setFromCamera(v4, camera);
     const intersects = raycaster.intersectObjects(occlude, true);
     if (intersects.length) {
         const intersectionDistance = intersects[0].distance;
@@ -914,10 +570,9 @@ function isObjectVisible(el, camera, raycaster, occlude) {
     return true;
 }
 function objectScale(el, camera) {
-    if (camera instanceof THREE.OrthographicCamera) {
+    if (camera instanceof OrthographicCamera)
         return camera.zoom;
-    }
-    else if (camera instanceof THREE.PerspectiveCamera) {
+    if (camera instanceof PerspectiveCamera) {
         const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
         const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
         const vFOV = (camera.fov * Math.PI) / 180;
@@ -925,12 +580,10 @@ function objectScale(el, camera) {
         const scaleFOV = 2 * Math.tan(vFOV / 2) * dist;
         return 1 / scaleFOV;
     }
-    else {
-        return 1;
-    }
+    return 1;
 }
 function objectZIndex(el, camera, zIndexRange) {
-    if (camera instanceof THREE.PerspectiveCamera || camera instanceof THREE.OrthographicCamera) {
+    if (camera instanceof PerspectiveCamera || camera instanceof OrthographicCamera) {
         const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
         const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
         const dist = objectPos.distanceTo(cameraPos);
@@ -940,7 +593,9 @@ function objectZIndex(el, camera, zIndexRange) {
     }
     return undefined;
 }
-const epsilon = (value) => (Math.abs(value) < 1e-10 ? 0 : value);
+function epsilon(value) {
+    return Math.abs(value) < 1e-10 ? 0 : value;
+}
 function getCSSMatrix(matrix, multipliers, prepend = '') {
     let matrix3d = 'matrix3d(';
     for (let i = 0; i !== 16; i++) {
@@ -954,231 +609,133 @@ const getCameraCSSMatrix = ((multipliers) => {
 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; }
+
+const defaultHtmlContentOptions = {
+    eps: 0.001,
+    zIndexRange: [16777271, 0],
+    pointerEvents: 'auto',
+    calculatePosition: defaultCalculatePosition,
+    containerClass: '',
+    containerStyle: {},
+    center: false,
+    prepend: false,
+    fullscreen: false,
+    sprite: false,
+};
+class NgtsHTMLContent extends NgtHTML {
     constructor() {
-        this.htmlInputs = injectNgtsHtmlInputs();
-        this.store = injectNgtStore();
+        super();
+        this.options = input(defaultHtmlContentOptions, {
+            transform: mergeInputs(defaultHtmlContentOptions),
+            alias: 'ngtsHTMLContent',
+        });
+        this.occluded = output();
+        this.html = inject(NgtsHTML);
+        this.transformOuterRef = viewChild('transformOuter');
+        this.transformInnerRef = viewChild('transformInner');
+        this.containerRef = viewChild('container');
         this.gl = this.store.select('gl');
-        this.connected = this.store.select('events', 'connected', { equal: Object.is });
-        this.viewport = this.store.select('viewport');
-        this.scene = this.store.select('scene');
+        this.events = this.store.select('events');
         this.camera = this.store.select('camera');
+        this.scene = this.store.select('scene');
         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.parent = pick(this.options, 'parent');
+        this.zIndexRange = pick(this.options, 'zIndexRange');
+        this.calculatePosition = pick(this.options, 'calculatePosition');
+        this.prepend = pick(this.options, 'prepend');
+        this.center = pick(this.options, 'center');
+        this.fullscreen = pick(this.options, 'fullscreen');
+        this.pointerEvents = pick(this.options, 'pointerEvents');
+        this.containerClass = pick(this.options, 'containerClass');
+        this.containerStyle = pick(this.options, 'containerStyle');
         this.target = computed(() => {
-            const portalElement = this.portalElement();
-            if (portalElement)
-                return portalElement;
-            const connected = this.connected();
-            if (connected)
-                return connected;
-            return this.gl().domElement.parentElement;
+            const parent = resolveRef(this.parent());
+            if (parent)
+                return parent;
+            return (this.events().connected || this.gl().domElement.parentNode);
         });
-        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] = [
+        const autoEffect = injectAutoEffect();
+        const renderer = inject(Renderer2);
+        let isMeshSizeSet = false;
+        afterNextRender(() => {
+            autoEffect(() => {
+                const [occlude, canvasEl, zIndexRange] = [
+                    this.html.occlude(),
+                    untracked(this.gl).domElement,
+                    untracked(this.zIndexRange),
+                ];
+                if (occlude && occlude === 'blending') {
+                    renderer.setStyle(canvasEl, 'z-index', `${Math.floor(zIndexRange[0] / 2)}`);
+                    renderer.setStyle(canvasEl, 'position', 'absolute');
+                    renderer.setStyle(canvasEl, 'pointer-events', 'none');
+                }
+                else {
+                    renderer.removeStyle(canvasEl, 'z-index');
+                    renderer.removeStyle(canvasEl, 'position');
+                    renderer.removeStyle(canvasEl, 'pointer-events');
+                }
+            });
+            autoEffect(() => {
+                const [transform, target, hostEl, prepend, scene, calculatePosition, group, size, camera] = [
+                    this.html.transform(),
                     this.target(),
-                    this.htmlInputs.transform(),
+                    this.host.nativeElement,
+                    untracked(this.prepend),
                     untracked(this.scene),
-                    untracked(this.camera),
+                    untracked(this.calculatePosition),
+                    untracked(this.html.groupRef).nativeElement,
                     untracked(this.size),
-                    untracked(this.htmlInputs.calculatePosition),
-                    untracked(this.htmlInputs.prepend),
+                    untracked(this.camera),
                 ];
                 scene.updateMatrixWorld();
+                renderer.setStyle(hostEl, 'position', 'absolute');
+                renderer.setStyle(hostEl, 'top', '0');
+                renderer.setStyle(hostEl, 'left', '0');
                 if (transform) {
-                    element.style.cssText = `position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;`;
+                    renderer.setStyle(hostEl, 'pointer-events', 'none');
+                    renderer.setStyle(hostEl, 'overflow', 'hidden');
+                    renderer.removeStyle(hostEl, 'transform');
+                    renderer.removeStyle(hostEl, 'transform-origin');
                 }
                 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);
+                    renderer.setStyle(hostEl, 'transform', `translate3d(${vec[0]}px,${vec[1]}px,0)`);
+                    renderer.setStyle(hostEl, 'transform-origin', '0 0');
+                    renderer.removeStyle(hostEl, 'pointer-events');
+                    renderer.removeStyle(hostEl, 'overflow');
                 }
-                onCleanup(() => {
+                if (prepend)
+                    target.prepend(hostEl);
+                else
+                    target.appendChild(hostEl);
+                return () => {
                     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();
-                });
-            }
+                        target.removeChild(hostEl);
+                };
+            });
+            autoEffect(() => {
+                this.options();
+                this.html.options();
+                isMeshSizeSet = false;
+            });
         });
-    }
-    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(),
+        let oldZoom = 0;
+        let oldPosition = [0, 0];
+        injectBeforeRender(({ camera: rootCamera }) => {
+            const [hostEl, transformOuterEl, transformInnerEl, group, occlusionMesh, occlusionGeometry, isRaycastOcclusion, { camera, size, viewport, raycaster, scene }, { calculatePosition, eps, zIndexRange, sprite, distanceFactor }, { transform, occlude, scale },] = [
+                this.host.nativeElement,
+                this.transformOuterRef()?.nativeElement,
+                this.transformInnerRef()?.nativeElement,
+                this.html.groupRef().nativeElement,
+                this.html.occlusionMeshRef()?.nativeElement,
+                this.html.occlusionGeometryRef()?.nativeElement,
+                this.html.isRaycastOcclusion(),
+                this.store.snapshot,
+                this.options(),
+                this.html.options(),
             ];
-            if (group && element) {
+            if (group) {
                 camera.updateMatrixWorld();
                 group.updateWorldMatrix(true, false);
                 const vec = transform ? oldPosition : calculatePosition(group, camera, size);
@@ -1188,12 +745,12 @@ class NgtsHtmlWrapper {
                     Math.abs(oldPosition[1] - vec[1]) > eps) {
                     const isBehindCamera = isObjectBehindCamera(group, camera);
                     let raytraceTarget = false;
-                    if (isRayCastOcclusion) {
-                        if (occlude !== 'blending') {
-                            raytraceTarget = [scene];
+                    if (isRaycastOcclusion) {
+                        if (Array.isArray(occlude)) {
+                            raytraceTarget = occlude.map((item) => resolveRef(item));
                         }
-                        else if (Array.isArray(occlude)) {
-                            raytraceTarget = occlude.map((item) => (is.ref(item) ? item.nativeElement : item));
+                        else if (occlude !== 'blending') {
+                            raytraceTarget = [scene];
                         }
                     }
                     const previouslyVisible = visible;
@@ -1205,20 +762,18 @@ class NgtsHtmlWrapper {
                         visible = !isBehindCamera;
                     }
                     if (previouslyVisible !== visible) {
-                        if (this.htmlInputs.occluded.observed) {
-                            this.htmlInputs.occluded.emit(!visible);
-                        }
-                        else {
-                            element.style.display = visible ? 'block' : 'none';
-                        }
+                        if (this.occluded['listeners'])
+                            this.occluded.emit(!visible);
+                        else
+                            renderer.setStyle(hostEl, 'display', visible ? 'block' : 'none');
                     }
                     const halfRange = Math.floor(zIndexRange[0] / 2);
                     const zRange = occlude
-                        ? isRayCastOcclusion //
+                        ? isRaycastOcclusion //
                             ? [zIndexRange[0], halfRange]
                             : [halfRange - 1, 0]
                         : zIndexRange;
-                    element.style.zIndex = `${objectZIndex(group, camera, zRange)}`;
+                    renderer.setStyle(hostEl, 'z-index', `${objectZIndex(group, camera, zRange)}`);
                     if (transform) {
                         const [widthHalf, heightHalf] = [size.width / 2, size.height / 2];
                         const fov = camera.projectionMatrix.elements[5] * heightHalf;
@@ -1229,48 +784,42 @@ class NgtsHtmlWrapper {
                             : `translateZ(${fov}px)`;
                         let matrix = group.matrixWorld;
                         if (sprite) {
-                            matrix = camera.matrixWorldInverse
-                                .clone()
-                                .transpose()
-                                .copyPosition(matrix)
-                                .scale(group.scale);
+                            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));
+                        renderer.setStyle(hostEl, 'width', size.width + 'px');
+                        renderer.setStyle(hostEl, 'height', size.height + 'px');
+                        renderer.setStyle(hostEl, 'perspective', isOrthographicCamera ? '' : `${fov}px`);
+                        if (transformOuterEl && transformInnerEl) {
+                            renderer.setStyle(transformOuterEl, 'transform', `${cameraTransform}${cameraMatrix}translate(${widthHalf}px,${heightHalf}px)`);
+                            renderer.setStyle(transformInnerEl, '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})`;
+                        renderer.setStyle(hostEl, 'transform', `translate3d(${vec[0]}px,${vec[1]}px,0) scale(${scale})`);
                     }
                     oldPosition = vec;
                     oldZoom = camera.zoom;
                 }
             }
-            if (!isRayCastOcclusion && occlusionMeshRef && !this.isMeshSizeSet) {
+            if (!isRaycastOcclusion && occlusionMesh && !isMeshSizeSet) {
                 if (transform) {
-                    if (this.outerDiv?.nativeElement) {
-                        const el = this.outerDiv.nativeElement.children[0];
+                    if (transformOuterEl) {
+                        const el = transformOuterEl.children[0];
                         if (el?.clientWidth && el?.clientHeight) {
                             const { isOrthographicCamera } = camera;
-                            if (isOrthographicCamera || geometry) {
-                                if (scale !== 1) {
+                            if (isOrthographicCamera || occlusionGeometry) {
+                                if (scale) {
                                     if (!Array.isArray(scale)) {
-                                        occlusionMeshRef.scale.setScalar(1 / scale);
+                                        occlusionMesh.scale.setScalar(1 / scale);
                                     }
-                                    else if (scale instanceof THREE.Vector3) {
-                                        occlusionMeshRef.scale.copy(scale.clone().divideScalar(1));
+                                    else if (scale instanceof Vector3) {
+                                        occlusionMesh.scale.copy(scale.clone().divideScalar(1));
                                     }
                                     else {
-                                        occlusionMeshRef.scale.set(1 / scale[0], 1 / scale[1], 1 / scale[2]);
+                                        occlusionMesh.scale.set(1 / scale[0], 1 / scale[1], 1 / scale[2]);
                                     }
                                 }
                             }
@@ -1278,1001 +827,300 @@ class NgtsHtmlWrapper {
                                 const ratio = (distanceFactor || 10) / 400;
                                 const w = el.clientWidth * ratio;
                                 const h = el.clientHeight * ratio;
-                                occlusionMeshRef.scale.set(w, h, 1);
+                                occlusionMesh.scale.set(w, h, 1);
                             }
-                            this.isMeshSizeSet = true;
+                            isMeshSizeSet = true;
                         }
                     }
                 }
                 else {
-                    const ele = element.children[0];
+                    const ele = hostEl.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;
+                        occlusionMesh.scale.set(w, h, 1);
+                        isMeshSizeSet = true;
                     }
-                    occlusionMeshRef.lookAt(gl.camera.position);
+                    occlusionMesh.lookAt(rootCamera.position);
                 }
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsHtmlWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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 }" />
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsHTMLContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: NgtsHTMLContent, isStandalone: true, selector: "[ngtsHTMLContent]", inputs: { options: { classPropertyName: "options", publicName: "ngtsHTMLContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { occluded: "occluded" }, host: { attributes: { "data-ngts-html-content": "" } }, viewQueries: [{ propertyName: "transformOuterRef", first: true, predicate: ["transformOuter"], descendants: true, isSignal: true }, { propertyName: "transformInnerRef", first: true, predicate: ["transformInner"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+		@if (html.transform()) {
+			<div
+				#transformOuter
+				style="position: absolute; top: 0; left: 0; transform-style: preserve-3d; pointer-events: none;"
+				[style.width.px]="size().width"
+				[style.height.px]="size().height"
+			>
+				<div #transformInner style="position: absolute" [style.pointer-events]="pointerEvents()">
+					<div #container [class]="containerClass()" [style]="containerStyle()">
+						<ng-container [ngTemplateOutlet]="content" />
+					</div>
 				</div>
 			</div>
-		</ng-template>
-
-		<ng-template #renderTemplate let-renderedStyles="styles">
-			<div #renderedDiv [class]="htmlInputs.renderedDivClass()" [style]="renderedStyles()">
-				<ng-container #renderAnchor />
+		} @else {
+			<div
+				#container
+				style="position:absolute"
+				[style.transform]="center() ? 'translate3d(-50%,-50%,0)' : 'none'"
+				[style.top]="fullscreen() ? -size().height / 2 + 'px' : 'unset'"
+				[style.left]="fullscreen() ? -size().width / 2 + 'px' : 'unset'"
+				[style.width]="fullscreen() ? size().width : 'unset'"
+				[style.height]="fullscreen() ? size().height : 'unset'"
+				[class]="containerClass()"
+				[style]="containerStyle()"
+			>
+				<ng-container [ngTemplateOutlet]="content" />
 			</div>
+		}
+
+		<ng-template #content>
+			<ng-content />
 		</ng-template>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsHtmlWrapper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsHTMLContent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngts-html-wrapper',
+                    selector: '[ngtsHTMLContent]',
                     standalone: true,
                     template: `
-		<ng-template #transformTemplate>
-			<div #transformedOuterDiv [style]="styles()">
-				<div #transformedInnerDiv [style]="transformInnerStyles()">
-					<ng-container *ngTemplateOutlet="renderTemplate; context: { styles: htmlInputs.style }" />
+		@if (html.transform()) {
+			<div
+				#transformOuter
+				style="position: absolute; top: 0; left: 0; transform-style: preserve-3d; pointer-events: none;"
+				[style.width.px]="size().width"
+				[style.height.px]="size().height"
+			>
+				<div #transformInner style="position: absolute" [style.pointer-events]="pointerEvents()">
+					<div #container [class]="containerClass()" [style]="containerStyle()">
+						<ng-container [ngTemplateOutlet]="content" />
+					</div>
 				</div>
 			</div>
-		</ng-template>
-
-		<ng-template #renderTemplate let-renderedStyles="styles">
-			<div #renderedDiv [class]="htmlInputs.renderedDivClass()" [style]="renderedStyles()">
-				<ng-container #renderAnchor />
+		} @else {
+			<div
+				#container
+				style="position:absolute"
+				[style.transform]="center() ? 'translate3d(-50%,-50%,0)' : 'none'"
+				[style.top]="fullscreen() ? -size().height / 2 + 'px' : 'unset'"
+				[style.left]="fullscreen() ? -size().width / 2 + 'px' : 'unset'"
+				[style.width]="fullscreen() ? size().width : 'unset'"
+				[style.height]="fullscreen() ? size().height : 'unset'"
+				[class]="containerClass()"
+				[style]="containerStyle()"
+			>
+				<ng-container [ngTemplateOutlet]="content" />
 			</div>
+		}
+
+		<ng-template #content>
+			<ng-content />
 		</ng-template>
 	`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgTemplateOutlet],
+                    host: { 'data-ngts-html-content': '' },
                 }]
-        }], 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 }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-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])));
+function injectIntersect(object, { injector, source = signal(false) } = {}) {
+    return assertInjector(injectIntersect, injector, () => {
+        let check = false;
+        let temp = false;
+        effect((onCleanup) => {
+            const obj = resolveRef(object());
+            if (!obj)
+                return;
+            // Stamp out frustum check pre-emptively
+            const unsub1 = addEffect(() => {
+                check = false;
+                return true;
+            });
+            // If the object is inside the frustum three will call onRender
+            const oldOnRender = obj.onBeforeRender.bind(obj);
+            obj.onBeforeRender = () => (check = true);
+            // Compare the check value against the temp value, if it differs set state
+            const unsub2 = addAfterEffect(() => {
+                if (check !== temp)
+                    source.set((temp = check));
+                return true;
+            });
+            onCleanup(() => {
+                obj.onBeforeRender = oldOnRender;
+                unsub1();
+                unsub2();
+            });
         });
-        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);
-        }
-      `,
-            };
+        return source.asReadonly();
+    });
+}
+class NgtsIntersect {
+    constructor() {
+        this.intersect = model(false);
+        const host = inject(ElementRef);
+        const injector = inject(Injector);
+        afterNextRender(() => {
+            injectIntersect(() => host, { source: this.intersect, injector });
         });
-        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.1.7", ngImport: i0, type: NgtsHtml, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsIntersect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.0", type: NgtsIntersect, isStandalone: true, selector: "[intersect]", inputs: { intersect: { classPropertyName: "intersect", publicName: "intersect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intersect: "intersectChange" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsIntersect, decorators: [{
+            type: Directive,
+            args: [{ standalone: true, selector: '[intersect]' }]
+        }], ctorParameters: () => [] });
 
-const defaultState = {
-    count: 16,
-};
-function injectNgtsSurfaceSampler(surfaceSamplerState, { injector } = {}) {
-    injector = assertInjectionContext(injectNgtsSurfaceSampler, injector);
-    return runInInjectionContext(injector, () => {
-        const state = computed(() => {
-            const _state = surfaceSamplerState();
-            if (!_state)
-                return null;
-            return { ...defaultState, ..._state };
-        });
-        const _buffer = signal((() => {
-            const arr = Array.from({ length: state()?.count || defaultState.count }, () => [
+function injectSurfaceSampler(mesh, options = () => ({}), { injector } = {}) {
+    return assertInjector(injectSurfaceSampler, injector, () => {
+        const buffer = signal((() => {
+            const arr = Array.from({ length: options().count ?? 16 }, () => [
                 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);
+            return new InstancedBufferAttribute(Float32Array.from(arr), 16);
         })());
         effect(() => {
-            const _state = state();
-            if (!_state)
+            const currentMesh = resolveRef(mesh());
+            if (!currentMesh)
                 return;
-            const { mesh, count, transform, instancedMesh, weight } = _state;
-            const meshObj = is.ref(mesh) ? mesh.nativeElement : mesh;
-            if (!meshObj)
+            const localState = getLocalState(currentMesh);
+            if (!localState)
                 return;
-            const instancedMeshObj = is.ref(instancedMesh) ? instancedMesh.nativeElement : instancedMesh;
-            const buffer = untracked(_buffer);
-            const sampler = new MeshSurfaceSampler(meshObj);
+            const nonObjects = localState.nonObjects();
+            if (!nonObjects ||
+                !nonObjects.length ||
+                nonObjects.every((nonObject) => !nonObject.isBufferGeometry)) {
+                return;
+            }
+            const sampler = new MeshSurfaceSampler(currentMesh);
+            const { weight, count = 16, transform, instanceMesh } = options();
             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);
+            const position = new Vector3();
+            const normal = new Vector3();
+            const color = new Color();
+            const dummy = new Object3D();
+            const instance = resolveRef(instanceMesh);
+            currentMesh.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);
+                    transform({ dummy, sampledMesh: currentMesh, position, normal, color }, i);
                 }
                 else {
                     dummy.position.copy(position);
                 }
                 dummy.updateMatrix();
-                if (instancedMeshObj) {
-                    instancedMeshObj.setMatrixAt(i, dummy.matrix);
+                if (instance) {
+                    instance.setMatrixAt(i, dummy.matrix);
                 }
-                dummy.matrix.toArray(buffer.array, i * 16);
+                dummy.matrix.toArray(untracked(buffer).array, i * 16);
             }
-            if (instancedMeshObj) {
-                checkUpdate(instancedMeshObj.instanceMatrix);
+            if (instance) {
+                checkUpdate(instance.instanceMatrix);
             }
             checkUpdate(buffer);
-            untracked(() => {
-                _buffer.set(buffer.clone());
-            });
-        });
-        return _buffer.asReadonly();
+            buffer.set(new InstancedBufferAttribute(untracked(buffer).array, untracked(buffer).itemSize).copy(untracked(buffer)));
+        }, { allowSignalWrites: true });
+        return buffer.asReadonly();
     });
 }
-extend({ Group });
+const defaultOptions = {
+    count: 16,
+};
 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 };
-        });
+        this.mesh = input(null);
+        this.instances = input(null);
+        this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+        this.parameters = omit(this.options, ['weight', 'transform', 'count']);
+        this.groupRef = viewChild.required('group');
+        this.meshToSample = signal(null);
+        this.instancedToSample = signal(null);
+        extend({ Group });
+        const autoEffect = injectAutoEffect();
         const injector = inject(Injector);
-        effect(() => {
-            injectNgtsSurfaceSampler(this.surfaceSamplerState, { injector });
+        afterNextRender(() => {
+            autoEffect(() => {
+                const group = this.groupRef().nativeElement;
+                const localState = getLocalState(group);
+                if (!localState)
+                    return;
+                const [mesh, instances] = [resolveRef(this.mesh()), resolveRef(this.instances())];
+                this.meshToSample.set(mesh ?? localState.objects().find((c) => c.type === 'Mesh'));
+                this.instancedToSample.set(instances ??
+                    localState
+                        .objects()
+                        .find((c) => !!Object.getOwnPropertyDescriptor(c, 'instanceMatrix')));
+            }, { allowSignalWrites: true });
+            injectSurfaceSampler(this.meshToSample, () => ({
+                count: this.options().count,
+                transform: this.options().transform,
+                weight: this.options().weight,
+                instanceMesh: this.instancedToSample(),
+            }), { injector });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsSampler, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSampler, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsSampler, isStandalone: true, selector: "ngts-sampler", inputs: { mesh: { classPropertyName: "mesh", publicName: "mesh", isSignal: true, isRequired: false, transformFunction: null }, instances: { classPropertyName: "instances", publicName: "instances", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-group #group [parameters]="parameters()">
 			<ng-content />
 		</ngt-group>
-	`, isInline: true }); }
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsSampler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSampler, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-sampler',
                     standalone: true,
                     template: `
-		<ngt-group ngtCompound [ref]="samplerRef">
+		<ngt-group #group [parameters]="parameters()">
 			<ng-content />
 		</ngt-group>
 	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], 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.1.7", ngImport: i0, type: NgtsShadow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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.1.7", 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();
-            });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsStatsGL, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", 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.1.7", 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();
-    }
-}
+        }], ctorParameters: () => [] });
 
-function injectNgtsTrailTexture(trailConfigFn, { injector } = {}) {
-    injector = assertInjectionContext(injectNgtsTrailTexture, injector);
-    return runInInjectionContext(injector, () => {
-        const config = computed(() => trailConfigFn() || {});
-        const trail = computed(() => new TrailTexture(config()));
-        const texture = computed(() => trail().texture);
-        injectBeforeRender(({ delta }) => {
-            trail().update(delta);
-        });
-        const onMove = (ev) => trail().addTouch(ev.uv);
-        return { texture, onMove };
-    });
+const tV0 = new Vector3();
+const tV1 = new Vector3();
+const tV2 = new Vector3();
+function getPoint2(point3, camera, size) {
+    const widthHalf = size.width / 2;
+    const heightHalf = size.height / 2;
+    camera.updateMatrixWorld(false);
+    const vector = point3.project(camera);
+    vector.x = vector.x * widthHalf + widthHalf;
+    vector.y = -(vector.y * heightHalf) + heightHalf;
+    return vector;
 }
-
-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 = assertInjectionContext(injectNgtsTrail, injector);
-    return runInInjectionContext(injector, () => {
-        const points = injectNgtRef();
-        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) {
-                points.nativeElement = Float32Array.from({ length: length * 10 * 3 }, (_, i) => target.position.getComponent(i % 3));
-            }
-        });
-        injectBeforeRender(() => {
-            const [target, _points, { local, decay, stride, interval }] = [
-                _target(),
-                points.nativeElement,
-                _settings(),
-            ];
-            if (!target)
-                return;
-            if (!_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;
-    });
+function getPoint3(point2, camera, size, zValue = 1) {
+    const vector = tV0.set((point2.x / size.width) * 2 - 1, -(point2.y / size.height) * 2 + 1, zValue);
+    vector.unproject(camera);
+    return vector;
 }
-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.nativeElement, this.attenuation()];
-            if (!points)
-                return;
-            this.geometry.setPoints(points, attenuation);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsTrail, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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]" }] }); }
+function calculateScaleFactor(point3, radiusPx, camera, size) {
+    const point2 = getPoint2(tV2.copy(point3), camera, size);
+    let scale = 0;
+    for (let i = 0; i < 2; ++i) {
+        const point2off = tV1.copy(point2).setComponent(i, point2.getComponent(i) + radiusPx);
+        const point3off = getPoint3(point2off, camera, size, point2off.z);
+        scale = Math.max(scale, point3.distanceTo(point3off));
+    }
+    return scale;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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, NgtsCaustics, NgtsDecal, NgtsExample, NgtsHtml, NgtsSampler, NgtsShadow, NgtsStatsGL, NgtsTrail, injectNgtsAnimations, injectNgtsDepthBuffer, injectNgtsExampleApi, injectNgtsFBO, injectNgtsHtmlInputs, injectNgtsSurfaceSampler, injectNgtsTrail, injectNgtsTrailTexture, provideNgtsExampleApi, provideNgtsHtmlInputs };
+export { LinearEncoding, NgtsBakeShadows, NgtsComputedAttribute, NgtsDecal, NgtsFBO, NgtsHTML, NgtsHTMLContent, NgtsIntersect, NgtsSampler, calculateScaleFactor, getVersion, injectAnimations, injectDepthBuffer, injectFBO, injectIntersect, injectSurfaceSampler, sRGBEncoding, setUpdateRange };
 //# sourceMappingURL=angular-three-soba-misc.mjs.map