angular-three-soba 2.2.0 → 2.3.0

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

@@ -1,9 +1,8 @@
 import * as i0 from '@angular/core';
-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 { computed, isSignal, signal, effect, untracked, Directive, input, viewChild, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, inject, DestroyRef, TemplateRef, ViewContainerRef, afterNextRender, 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';
@@ -77,22 +76,21 @@ function injectAnimations(animations, object, { injector } = {}) {
 
 class NgtsBakeShadows {
     constructor() {
-        const autoEffect = injectAutoEffect();
         const store = injectStore();
         const gl = store.select('gl');
-        autoEffect(() => {
+        effect((onCleanup) => {
             const _gl = gl();
             _gl.shadowMap.autoUpdate = false;
             _gl.shadowMap.needsUpdate = true;
-            return () => {
+            onCleanup(() => {
                 _gl.shadowMap.autoUpdate = _gl.shadowMap.needsUpdate = true;
-            };
+            });
         });
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsBakeShadows, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: NgtsBakeShadows, isStandalone: true, selector: "ngts-bake-shadows", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsBakeShadows, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsBakeShadows, decorators: [{
             type: Directive,
             args: [{ standalone: true, selector: 'ngts-bake-shadows' }]
         }], ctorParameters: () => [] });
@@ -109,29 +107,26 @@ class NgtsComputedAttribute {
         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);
-            });
+        effect(() => {
+            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: "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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsComputedAttribute, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", 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: "18.2.0", ngImport: i0, type: NgtsComputedAttribute, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsComputedAttribute, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-computed-attribute',
@@ -179,58 +174,62 @@ class NgtsDecal {
         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
-                const matrixWorld = parent.matrixWorld.clone();
-                parent.matrixWorld.identity();
-                if (!rotation || typeof rotation === 'number') {
-                    const o = new Object3D();
-                    o.position.copy(state.position);
-                    o.lookAt(parent.position);
-                    if (typeof rotation === 'number')
-                        o.rotateZ(rotation);
-                    applyProps(state, { rotation: o.rotation });
-                }
-                else {
-                    applyProps(state, { rotation });
-                }
-                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 matrix-world
-                parent.matrixWorld = matrixWorld;
-                return () => {
-                    thisMesh.geometry.dispose();
-                };
+        effect((onCleanup) => {
+            const thisMesh = this.meshRef().nativeElement;
+            const localState = getLocalState(thisMesh);
+            if (!localState)
+                return;
+            const parent = resolveRef(this.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 parentLocalState = getLocalState(parent);
+            if (!parentLocalState)
+                return;
+            // track parent's children
+            const parentNonObjects = parentLocalState.nonObjects();
+            if (!parentNonObjects || !parentNonObjects.length) {
+                return;
+            }
+            // if parent geometry doesn't have its attributes populated properly, we skip
+            if (!parent.geometry?.attributes?.['position']) {
+                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
+            const matrixWorld = parent.matrixWorld.clone();
+            parent.matrixWorld.identity();
+            if (!rotation || typeof rotation === 'number') {
+                const o = new Object3D();
+                o.position.copy(state.position);
+                o.lookAt(parent.position);
+                if (typeof rotation === 'number')
+                    o.rotateZ(rotation);
+                applyProps(state, { rotation: o.rotation });
+            }
+            else {
+                applyProps(state, { rotation });
+            }
+            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 matrix-world
+            parent.matrixWorld = matrixWorld;
+            onCleanup(() => {
+                thisMesh.geometry.dispose();
             });
         });
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsDecal, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", 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" />
@@ -252,7 +251,7 @@ class NgtsDecal {
 		</ngt-mesh>
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsDecal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsDecal, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-decal',
@@ -353,12 +352,12 @@ class NgtsFBO {
         this.template = inject(TemplateRef);
         this.viewContainerRef = inject(ViewContainerRef);
         let ref;
-        const injector = inject(Injector);
+        const fboTarget = injectFBO(() => {
+            const { width, height, ...settings } = this.fbo();
+            return { width, height, settings };
+        });
         afterNextRender(() => {
-            const fboTarget = injectFBO(() => {
-                const { width, height, ...settings } = this.fbo();
-                return { width, height, settings };
-            }, { injector });
+            // TODO: double check if we need untracked
             untracked(() => {
                 ref = this.viewContainerRef.createEmbeddedView(this.template, { $implicit: fboTarget });
                 ref.detectChanges();
@@ -371,10 +370,10 @@ class NgtsFBO {
     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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsFBO, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsFBO, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[fbo]', standalone: true }]
         }], ctorParameters: () => [] });
@@ -485,8 +484,8 @@ class NgtsHTML {
         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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsHTML, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", 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()">
@@ -507,7 +506,7 @@ class NgtsHTML {
 		<ng-content />
 	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsHTML, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsHTML, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-html',
@@ -654,71 +653,67 @@ class NgtsHTMLContent extends NgtHTML {
                 return parent;
             return (this.events().connected || this.gl().domElement.parentNode);
         });
-        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.host.nativeElement,
-                    untracked(this.prepend),
-                    untracked(this.scene),
-                    untracked(this.calculatePosition),
-                    untracked(this.html.groupRef).nativeElement,
-                    untracked(this.size),
-                    untracked(this.camera),
-                ];
-                scene.updateMatrixWorld();
-                renderer.setStyle(hostEl, 'position', 'absolute');
-                renderer.setStyle(hostEl, 'top', '0');
-                renderer.setStyle(hostEl, 'left', '0');
-                if (transform) {
-                    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);
-                    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');
-                }
-                if (prepend)
-                    target.prepend(hostEl);
-                else
-                    target.appendChild(hostEl);
-                return () => {
-                    if (target)
-                        target.removeChild(hostEl);
-                };
-            });
-            autoEffect(() => {
-                this.options();
-                this.html.options();
-                isMeshSizeSet = false;
+        effect(() => {
+            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');
+            }
+        });
+        effect((onCleanup) => {
+            const [transform, target, hostEl, prepend, scene, calculatePosition, group, size, camera] = [
+                this.html.transform(),
+                this.target(),
+                this.host.nativeElement,
+                untracked(this.prepend),
+                untracked(this.scene),
+                untracked(this.calculatePosition),
+                untracked(this.html.groupRef).nativeElement,
+                untracked(this.size),
+                untracked(this.camera),
+            ];
+            scene.updateMatrixWorld();
+            renderer.setStyle(hostEl, 'position', 'absolute');
+            renderer.setStyle(hostEl, 'top', '0');
+            renderer.setStyle(hostEl, 'left', '0');
+            if (transform) {
+                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);
+                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');
+            }
+            if (prepend)
+                target.prepend(hostEl);
+            else
+                target.appendChild(hostEl);
+            onCleanup(() => {
+                if (target)
+                    target.removeChild(hostEl);
             });
         });
+        effect(() => {
+            const _ = [this.options(), this.html.options()];
+            isMeshSizeSet = false;
+        });
         let visible = true;
         let oldZoom = 0;
         let oldPosition = [0, 0];
@@ -847,8 +842,8 @@ class NgtsHTMLContent extends NgtHTML {
             }
         });
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsHTMLContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.4", 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
@@ -883,7 +878,7 @@ class NgtsHTMLContent extends NgtHTML {
 		</ng-template>
 	`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsHTMLContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsHTMLContent, decorators: [{
             type: Component,
             args: [{
                     selector: '[ngtsHTMLContent]',
@@ -963,39 +958,36 @@ class NgtsIntersect {
     constructor() {
         this.intersect = model(false);
         const host = inject(ElementRef);
-        const injector = inject(Injector);
-        afterNextRender(() => {
-            injectIntersect(() => host, { source: this.intersect, injector });
-        });
+        injectIntersect(() => host, { source: this.intersect });
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsIntersect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.4", 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: "18.2.0", ngImport: i0, type: NgtsIntersect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsIntersect, decorators: [{
             type: Directive,
             args: [{ standalone: true, selector: '[intersect]' }]
         }], ctorParameters: () => [] });
 
 function injectSurfaceSampler(mesh, options = () => ({}), { injector } = {}) {
     return assertInjector(injectSurfaceSampler, injector, () => {
-        const buffer = signal((() => {
+        const initialBufferAttribute = (() => {
             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 InstancedBufferAttribute(Float32Array.from(arr), 16);
-        })());
-        effect(() => {
+        })();
+        return computed(() => {
             const currentMesh = resolveRef(mesh());
             if (!currentMesh)
-                return;
+                return initialBufferAttribute;
             const localState = getLocalState(currentMesh);
             if (!localState)
-                return;
+                return initialBufferAttribute;
             const nonObjects = localState.nonObjects();
             if (!nonObjects ||
                 !nonObjects.length ||
                 nonObjects.every((nonObject) => !nonObject.isBufferGeometry)) {
-                return;
+                return initialBufferAttribute;
             }
             const sampler = new MeshSurfaceSampler(currentMesh);
             const { weight, count = 16, transform, instanceMesh } = options();
@@ -1021,15 +1013,14 @@ function injectSurfaceSampler(mesh, options = () => ({}), { injector } = {}) {
                 if (instance) {
                     instance.setMatrixAt(i, dummy.matrix);
                 }
-                dummy.matrix.toArray(untracked(buffer).array, i * 16);
+                dummy.matrix.toArray(initialBufferAttribute.array, i * 16);
             }
             if (instance) {
                 checkUpdate(instance.instanceMatrix);
             }
-            checkUpdate(buffer);
-            buffer.set(new InstancedBufferAttribute(untracked(buffer).array, untracked(buffer).itemSize).copy(untracked(buffer)));
-        }, { allowSignalWrites: true });
-        return buffer.asReadonly();
+            checkUpdate(initialBufferAttribute);
+            return new InstancedBufferAttribute(initialBufferAttribute.array, initialBufferAttribute.itemSize).copy(initialBufferAttribute);
+        });
     });
 }
 const defaultOptions = {
@@ -1041,41 +1032,43 @@ class NgtsSampler {
         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);
+        // NOTE: this could have been a viewChild.required, but we need to _try_ to consume
+        //  this Signal earlier than when a viewChild.required would resolve.
+        this.groupRef = viewChild('group');
         extend({ Group });
-        const autoEffect = injectAutoEffect();
-        const injector = inject(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 });
+        const sampleState = computed(() => {
+            const group = this.groupRef()?.nativeElement;
+            const localState = getLocalState(group);
+            if (!localState)
+                return { mesh: null, instanced: null };
+            const [mesh, instances] = [resolveRef(this.mesh()), resolveRef(this.instances())];
+            const objects = localState.objects();
+            return {
+                mesh: mesh ?? objects.find((c) => c.type === 'Mesh'),
+                instanced: instances ?? objects.find((c) => !!Object.getOwnPropertyDescriptor(c, 'instanceMatrix')),
+            };
         });
+        const meshToSample = pick(sampleState, 'mesh');
+        const instancedToSample = pick(sampleState, 'instanced');
+        // NOTE: because injectSurfaceSampler returns a computed, we need to consume
+        //  this computed in a Reactive Context (an effect) to ensure the inner logic of
+        //  injectSurfaceSampler is run properly.
+        const sampler = injectSurfaceSampler(meshToSample, () => ({
+            count: this.options().count,
+            transform: this.options().transform,
+            weight: this.options().weight,
+            instanceMesh: instancedToSample(),
+        }));
+        effect(sampler);
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSampler, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.4", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsSampler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: NgtsSampler, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-sampler',