angular-three-soba 1.14.0 → 2.0.0-beta.3

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

@@ -1,14 +1,13 @@
 import * as i0 from '@angular/core';
-import { inject, Component, CUSTOM_ELEMENTS_SCHEMA, Input } from '@angular/core';
-import { NgtRxStore, injectNgtRef, injectBeforeRender, NgtArgs, extend, NgtStore, startWithUndefined, getLocalState, NgtPush } from 'angular-three';
+import { inject, Component, CUSTOM_ELEMENTS_SCHEMA, Input, computed, effect } from '@angular/core';
+import { NgtSignalStore, injectNgtRef, injectBeforeRender, NgtArgs, extend, NgtStore, getLocalState } from 'angular-three';
 import { NGTS_DISTORT_MATERIAL_SHADER, MeshReflectorMaterial, BlurPass, MeshRefractionMaterial, MeshTransmissionMaterial, DiscardMaterial, MeshWobbleMaterial } from 'angular-three-soba/shaders';
 import { NgIf } from '@angular/common';
-import { debounceTime, map, combineLatest } from 'rxjs';
 import * as THREE from 'three';
 import { MeshBVH, SAH } from 'three-mesh-bvh';
 import { injectNgtsFBO } from 'angular-three-soba/misc';
 
-class NgtsMeshDistortMaterial extends NgtRxStore {
+class NgtsMeshDistortMaterial extends NgtSignalStore {
     set time(time) {
         this.set({ time });
     }
@@ -21,15 +20,13 @@ class NgtsMeshDistortMaterial extends NgtRxStore {
     set speed(speed) {
         this.set({ speed });
     }
-    initialize() {
-        super.initialize();
-        this.set({ speed: 1, time: 0, distort: 0.4, radius: 1 });
-    }
     constructor() {
-        super();
-        this.MeshDistortMaterial = inject(NGTS_DISTORT_MATERIAL_SHADER);
-        this.material = new this.MeshDistortMaterial();
+        super({ speed: 1, time: 0, distort: 0.4, radius: 1 });
+        this.material = new (inject(NGTS_DISTORT_MATERIAL_SHADER))();
         this.materialRef = injectNgtRef();
+        this.distortTime = this.select('time');
+        this.distortDistort = this.select('distort');
+        this.distortRadius = this.select('radius');
         injectBeforeRender(({ clock }) => {
             this.material.time = clock.getElapsedTime() * this.get('speed');
         });
@@ -39,9 +36,9 @@ class NgtsMeshDistortMaterial extends NgtRxStore {
         <ngt-primitive
             *args="[material]"
             [ref]="materialRef"
-            [time]="get('time')"
-            [distort]="get('distort')"
-            [radius]="get('radius')"
+            [time]="distortTime()"
+            [distort]="distortDistort()"
+            [radius]="distortRadius()"
             ngtCompound
             attach="material"
         />
@@ -56,9 +53,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
         <ngt-primitive
             *args="[material]"
             [ref]="materialRef"
-            [time]="get('time')"
-            [distort]="get('distort')"
-            [radius]="get('radius')"
+            [time]="distortTime()"
+            [distort]="distortDistort()"
+            [radius]="distortRadius()"
             ngtCompound
             attach="material"
         />
@@ -79,7 +76,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 extend({ MeshReflectorMaterial });
-class NgtsMeshReflectorMaterial extends NgtRxStore {
+class NgtsMeshReflectorMaterial extends NgtSignalStore {
     set resolution(resolution) {
         this.set({ resolution });
     }
@@ -119,12 +116,37 @@ class NgtsMeshReflectorMaterial extends NgtRxStore {
     set reflectorOffset(reflectorOffset) {
         this.set({ reflectorOffset });
     }
-    get reflectorProps() {
-        return this.get('reflectorEntities', 'reflectorProps');
-    }
-    initialize() {
-        super.initialize();
-        this.set({
+    #store;
+    #gl;
+    #reflectorPlane;
+    #normal;
+    #reflectorWorldPosition;
+    #cameraWorldPosition;
+    #rotationMatrix;
+    #lookAtPosition;
+    #clipPlane;
+    #view;
+    #target;
+    #q;
+    #textureMatrix;
+    #virtualCamera;
+    #blur;
+    #resolution;
+    #mirror;
+    #mixBlur;
+    #mixStrength;
+    #minDepthThreshold;
+    #maxDepthThreshold;
+    #depthScale;
+    #depthToBlurRatioBias;
+    #distortion;
+    #distortionMap;
+    #mixContrast;
+    #normalizedBlur;
+    #hasBlur;
+    #reflectorEntities;
+    constructor() {
+        super({
             mixBlur: 0,
             mixStrength: 1,
             resolution: 256,
@@ -138,42 +160,73 @@ class NgtsMeshReflectorMaterial extends NgtRxStore {
             mixContrast: 1,
             reflectorOffset: 0,
         });
-    }
-    constructor() {
-        super();
         this.materialRef = injectNgtRef();
-        this.defines$ = this.select('reflectorEntities', 'reflectorProps', 'defines').pipe(debounceTime(0));
-        this.store = inject(NgtStore);
-        this.reflectorPlane = new THREE.Plane();
-        this.normal = new THREE.Vector3();
-        this.reflectorWorldPosition = new THREE.Vector3();
-        this.cameraWorldPosition = new THREE.Vector3();
-        this.rotationMatrix = new THREE.Matrix4();
-        this.lookAtPosition = new THREE.Vector3(0, 0, -1);
-        this.clipPlane = new THREE.Vector4();
-        this.view = new THREE.Vector3();
-        this.target = new THREE.Vector3();
-        this.q = new THREE.Vector4();
-        this.textureMatrix = new THREE.Matrix4();
-        this.virtualCamera = new THREE.PerspectiveCamera();
-        this.connect('normalizedBlur', this.select('blur').pipe(map((blur) => (Array.isArray(blur) ? blur : [blur, blur]))));
-        this.connect('hasBlur', this.select('normalizedBlur').pipe(map(([x, y]) => x + y > 0)));
-        this.connect('reflectorEntities', combineLatest([
-            this.store.select('gl'),
-            this.select('normalizedBlur'),
-            this.select('resolution'),
-            this.select('mirror'),
-            this.select('hasBlur'),
-            this.select('mixBlur'),
-            this.select('mixStrength'),
-            this.select('minDepthThreshold'),
-            this.select('maxDepthThreshold'),
-            this.select('depthScale'),
-            this.select('depthToBlurRatioBias'),
-            this.select('distortion'),
-            this.select('distortionMap').pipe(startWithUndefined()),
-            this.select('mixContrast'),
-        ]).pipe(map(([gl, blur, resolution, mirror, hasBlur, mixBlur, mixStrength, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, distortion, distortionMap, mixContrast,]) => {
+        this.reflectorProps = computed(() => this.#reflectorEntities().reflectorProps);
+        this.defines = computed(() => this.reflectorProps().defines);
+        this.reflectorMirror = computed(() => this.reflectorProps().mirror);
+        this.reflectorTextureMatrix = computed(() => this.reflectorProps().textureMatrix);
+        this.reflectorMixBlur = computed(() => this.reflectorProps().mixBlur);
+        this.reflectorTDiffuse = computed(() => this.reflectorProps().tDiffuse);
+        this.reflectorTDepth = computed(() => this.reflectorProps().tDepth);
+        this.reflectorTDiffuseBlur = computed(() => this.reflectorProps().tDiffuseBlur);
+        this.reflectorHasBlur = computed(() => this.reflectorProps().hasBlur);
+        this.reflectorMixStrength = computed(() => this.reflectorProps().mixStrength);
+        this.reflectorMinDepthThreshold = computed(() => this.reflectorProps().minDepthThreshold);
+        this.reflectorMaxDepthThreshold = computed(() => this.reflectorProps().maxDepthThreshold);
+        this.reflectorDepthScale = computed(() => this.reflectorProps().depthScale);
+        this.reflectorDepthToBlurRatioBias = computed(() => this.reflectorProps().depthToBlurRatioBias);
+        this.reflectorDistortion = computed(() => this.reflectorProps().distortion);
+        this.reflectorDistortionMap = computed(() => this.reflectorProps().distortionMap);
+        this.reflectorMixContrast = computed(() => this.reflectorProps().mixContrast);
+        this.#store = inject(NgtStore);
+        this.#gl = this.#store.select('gl');
+        this.#reflectorPlane = new THREE.Plane();
+        this.#normal = new THREE.Vector3();
+        this.#reflectorWorldPosition = new THREE.Vector3();
+        this.#cameraWorldPosition = new THREE.Vector3();
+        this.#rotationMatrix = new THREE.Matrix4();
+        this.#lookAtPosition = new THREE.Vector3(0, 0, -1);
+        this.#clipPlane = new THREE.Vector4();
+        this.#view = new THREE.Vector3();
+        this.#target = new THREE.Vector3();
+        this.#q = new THREE.Vector4();
+        this.#textureMatrix = new THREE.Matrix4();
+        this.#virtualCamera = new THREE.PerspectiveCamera();
+        this.#blur = this.select('blur');
+        this.#resolution = this.select('resolution');
+        this.#mirror = this.select('mirror');
+        this.#mixBlur = this.select('mixBlur');
+        this.#mixStrength = this.select('mixStrength');
+        this.#minDepthThreshold = this.select('minDepthThreshold');
+        this.#maxDepthThreshold = this.select('maxDepthThreshold');
+        this.#depthScale = this.select('depthScale');
+        this.#depthToBlurRatioBias = this.select('depthToBlurRatioBias');
+        this.#distortion = this.select('distortion');
+        this.#distortionMap = this.select('distortionMap');
+        this.#mixContrast = this.select('mixContrast');
+        this.#normalizedBlur = computed(() => {
+            const blur = this.#blur();
+            return Array.isArray(blur) ? blur : [blur, blur];
+        });
+        this.#hasBlur = computed(() => {
+            const [x, y] = this.#normalizedBlur();
+            return x + y > 0;
+        });
+        this.#reflectorEntities = computed(() => {
+            const gl = this.#gl();
+            const resolution = this.#resolution();
+            const blur = this.#normalizedBlur();
+            const minDepthThreshold = this.#minDepthThreshold();
+            const maxDepthThreshold = this.#maxDepthThreshold();
+            const depthScale = this.#depthScale();
+            const depthToBlurRatioBias = this.#depthToBlurRatioBias();
+            const mirror = this.#mirror();
+            const mixBlur = this.#mixBlur();
+            const mixStrength = this.#mixStrength();
+            const mixContrast = this.#mixContrast();
+            const distortion = this.#distortion();
+            const distortionMap = this.#distortionMap();
+            const hasBlur = this.#hasBlur();
             const parameters = {
                 minFilter: THREE.LinearFilter,
                 magFilter: THREE.LinearFilter,
@@ -198,7 +251,7 @@ class NgtsMeshReflectorMaterial extends NgtRxStore {
             });
             const reflectorProps = {
                 mirror,
-                textureMatrix: this.textureMatrix,
+                textureMatrix: this.#textureMatrix,
                 mixBlur,
                 tDiffuse: fbo1.texture,
                 tDepth: fbo1.depthTexture,
@@ -219,85 +272,30 @@ class NgtsMeshReflectorMaterial extends NgtRxStore {
                 },
             };
             return { fbo1, fbo2, blurPass, reflectorProps };
-        })));
-        injectBeforeRender(this.onBeforeRender.bind(this));
-    }
-    beforeRender(state) {
-        const parent = getLocalState(this.materialRef.nativeElement).parent;
-        if (!parent)
-            return;
-        const { camera } = state;
-        this.reflectorWorldPosition.setFromMatrixPosition(parent.matrixWorld);
-        this.cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
-        this.rotationMatrix.extractRotation(parent.matrixWorld);
-        this.normal.set(0, 0, 1);
-        this.normal.applyMatrix4(this.rotationMatrix);
-        this.reflectorWorldPosition.addScaledVector(this.normal, this.get('reflectorOffset'));
-        this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
-        // Avoid rendering when reflector is facing away
-        if (this.view.dot(this.normal) > 0)
-            return;
-        this.view.reflect(this.normal).negate();
-        this.view.add(this.reflectorWorldPosition);
-        this.rotationMatrix.extractRotation(camera.matrixWorld);
-        this.lookAtPosition.set(0, 0, -1);
-        this.lookAtPosition.applyMatrix4(this.rotationMatrix);
-        this.lookAtPosition.add(this.cameraWorldPosition);
-        this.target.subVectors(this.reflectorWorldPosition, this.lookAtPosition);
-        this.target.reflect(this.normal).negate();
-        this.target.add(this.reflectorWorldPosition);
-        this.virtualCamera.position.copy(this.view);
-        this.virtualCamera.up.set(0, 1, 0);
-        this.virtualCamera.up.applyMatrix4(this.rotationMatrix);
-        this.virtualCamera.up.reflect(this.normal);
-        this.virtualCamera.lookAt(this.target);
-        this.virtualCamera.far = camera.far; // Used in WebGLBackground
-        this.virtualCamera.updateMatrixWorld();
-        this.virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
-        // Update the texture matrix
-        this.textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
-        this.textureMatrix.multiply(this.virtualCamera.projectionMatrix);
-        this.textureMatrix.multiply(this.virtualCamera.matrixWorldInverse);
-        this.textureMatrix.multiply(parent.matrixWorld);
-        // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
-        // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
-        this.reflectorPlane.setFromNormalAndCoplanarPoint(this.normal, this.reflectorWorldPosition);
-        this.reflectorPlane.applyMatrix4(this.virtualCamera.matrixWorldInverse);
-        this.clipPlane.set(this.reflectorPlane.normal.x, this.reflectorPlane.normal.y, this.reflectorPlane.normal.z, this.reflectorPlane.constant);
-        const projectionMatrix = this.virtualCamera.projectionMatrix;
-        this.q.x = (Math.sign(this.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
-        this.q.y = (Math.sign(this.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
-        this.q.z = -1.0;
-        this.q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
-        // Calculate the scaled plane vector
-        this.clipPlane.multiplyScalar(2.0 / this.clipPlane.dot(this.q));
-        // Replacing the third row of the projection matrix
-        projectionMatrix.elements[2] = this.clipPlane.x;
-        projectionMatrix.elements[6] = this.clipPlane.y;
-        projectionMatrix.elements[10] = this.clipPlane.z + 1.0;
-        projectionMatrix.elements[14] = this.clipPlane.w;
+        });
+        injectBeforeRender(this.#onBeforeRender.bind(this));
     }
-    onBeforeRender(state) {
+    #onBeforeRender(state) {
         if (!this.materialRef.nativeElement)
             return;
-        const parent = getLocalState(this.materialRef.nativeElement).parent;
+        const parent = getLocalState(this.materialRef.nativeElement).parent();
         if (!parent)
             return;
         const { gl, scene } = state;
-        const { hasBlur } = this.get();
-        const { fbo1, fbo2, blurPass } = this.get('reflectorEntities');
+        const hasBlur = this.#hasBlur();
+        const { fbo1, fbo2, blurPass } = this.#reflectorEntities();
         if (fbo1 && fbo2 && blurPass) {
             parent.visible = false;
             const currentXrEnabled = gl.xr.enabled;
             const currentShadowAutoUpdate = gl.shadowMap.autoUpdate;
-            this.beforeRender(state);
+            this.#beforeRender(state);
             gl.xr.enabled = false;
             gl.shadowMap.autoUpdate = false;
             gl.setRenderTarget(fbo1);
             gl.state.buffers.depth.setMask(true);
             if (!gl.autoClear)
                 gl.clear();
-            gl.render(scene, this.virtualCamera);
+            gl.render(scene, this.#virtualCamera);
             if (hasBlur)
                 blurPass.render(gl, fbo1, fbo2);
             gl.xr.enabled = currentXrEnabled;
@@ -306,33 +304,88 @@ class NgtsMeshReflectorMaterial extends NgtRxStore {
             gl.setRenderTarget(null);
         }
     }
+    #beforeRender(state) {
+        const parent = getLocalState(this.materialRef.nativeElement).parent();
+        if (!parent)
+            return;
+        const { camera } = state;
+        this.#reflectorWorldPosition.setFromMatrixPosition(parent.matrixWorld);
+        this.#cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
+        this.#rotationMatrix.extractRotation(parent.matrixWorld);
+        this.#normal.set(0, 0, 1);
+        this.#normal.applyMatrix4(this.#rotationMatrix);
+        this.#reflectorWorldPosition.addScaledVector(this.#normal, this.get('reflectorOffset'));
+        this.#view.subVectors(this.#reflectorWorldPosition, this.#cameraWorldPosition);
+        // Avoid rendering when reflector is facing away
+        if (this.#view.dot(this.#normal) > 0)
+            return;
+        this.#view.reflect(this.#normal).negate();
+        this.#view.add(this.#reflectorWorldPosition);
+        this.#rotationMatrix.extractRotation(camera.matrixWorld);
+        this.#lookAtPosition.set(0, 0, -1);
+        this.#lookAtPosition.applyMatrix4(this.#rotationMatrix);
+        this.#lookAtPosition.add(this.#cameraWorldPosition);
+        this.#target.subVectors(this.#reflectorWorldPosition, this.#lookAtPosition);
+        this.#target.reflect(this.#normal).negate();
+        this.#target.add(this.#reflectorWorldPosition);
+        this.#virtualCamera.position.copy(this.#view);
+        this.#virtualCamera.up.set(0, 1, 0);
+        this.#virtualCamera.up.applyMatrix4(this.#rotationMatrix);
+        this.#virtualCamera.up.reflect(this.#normal);
+        this.#virtualCamera.lookAt(this.#target);
+        this.#virtualCamera.far = camera.far; // Used in WebGLBackground
+        this.#virtualCamera.updateMatrixWorld();
+        this.#virtualCamera.projectionMatrix.copy(camera.projectionMatrix);
+        // Update the texture matrix
+        this.#textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
+        this.#textureMatrix.multiply(this.#virtualCamera.projectionMatrix);
+        this.#textureMatrix.multiply(this.#virtualCamera.matrixWorldInverse);
+        this.#textureMatrix.multiply(parent.matrixWorld);
+        // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
+        // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+        this.#reflectorPlane.setFromNormalAndCoplanarPoint(this.#normal, this.#reflectorWorldPosition);
+        this.#reflectorPlane.applyMatrix4(this.#virtualCamera.matrixWorldInverse);
+        this.#clipPlane.set(this.#reflectorPlane.normal.x, this.#reflectorPlane.normal.y, this.#reflectorPlane.normal.z, this.#reflectorPlane.constant);
+        const projectionMatrix = this.#virtualCamera.projectionMatrix;
+        this.#q.x = (Math.sign(this.#clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
+        this.#q.y = (Math.sign(this.#clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
+        this.#q.z = -1.0;
+        this.#q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
+        // Calculate the scaled plane vector
+        this.#clipPlane.multiplyScalar(2.0 / this.#clipPlane.dot(this.#q));
+        // Replacing the third row of the projection matrix
+        projectionMatrix.elements[2] = this.#clipPlane.x;
+        projectionMatrix.elements[6] = this.#clipPlane.y;
+        projectionMatrix.elements[10] = this.#clipPlane.z + 1.0;
+        projectionMatrix.elements[14] = this.#clipPlane.w;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsMeshReflectorMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsMeshReflectorMaterial, isStandalone: true, selector: "ngts-mesh-reflector-material", inputs: { materialRef: "materialRef", resolution: "resolution", mixBlur: "mixBlur", mixStrength: "mixStrength", blur: "blur", mirror: "mirror", minDepthThreshold: "minDepthThreshold", maxDepthThreshold: "maxDepthThreshold", depthScale: "depthScale", depthToBlurRatioBias: "depthToBlurRatioBias", distortionMap: "distortionMap", distortion: "distortion", mixContrast: "mixContrast", reflectorOffset: "reflectorOffset" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-mesh-reflector-material
             ngtCompound
             attach="material"
-            *ngIf="defines$ | ngtPush as defines"
+            *ngIf="defines()"
             [ref]="materialRef"
-            [defines]="defines"
-            [mirror]="reflectorProps.mirror"
-            [textureMatrix]="reflectorProps.textureMatrix"
-            [mixBlur]="reflectorProps.mixBlur"
-            [tDiffuse]="reflectorProps.tDiffuse"
-            [tDepth]="reflectorProps.tDepth"
-            [tDiffuseBlur]="reflectorProps.tDiffuseBlur"
-            [hasBlur]="reflectorProps.hasBlur"
-            [mixStrength]="reflectorProps.mixStrength"
-            [minDepthThreshold]="reflectorProps.minDepthThreshold"
-            [maxDepthThreshold]="reflectorProps.maxDepthThreshold"
-            [depthScale]="reflectorProps.depthScale"
-            [depthToBlurRatioBias]="reflectorProps.depthToBlurRatioBias"
-            [distortion]="reflectorProps.distortion"
-            [distortionMap]="reflectorProps.distortionMap"
-            [mixContrast]="reflectorProps.mixContrast"
+            [defines]="defines()"
+            [mirror]="reflectorMirror()"
+            [textureMatrix]="reflectorTextureMatrix()"
+            [mixBlur]="reflectorMixBlur()"
+            [tDiffuse]="reflectorTDiffuse()"
+            [tDepth]="reflectorTDepth()"
+            [tDiffuseBlur]="reflectorTDiffuseBlur()"
+            [hasBlur]="reflectorHasBlur()"
+            [mixStrength]="reflectorMixStrength()"
+            [minDepthThreshold]="reflectorMinDepthThreshold()"
+            [maxDepthThreshold]="reflectorMaxDepthThreshold()"
+            [depthScale]="reflectorDepthScale()"
+            [depthToBlurRatioBias]="reflectorDepthToBlurRatioBias()"
+            [distortion]="reflectorDistortion()"
+            [distortionMap]="reflectorDistortionMap()"
+            [mixContrast]="reflectorMixContrast()"
         >
             <ng-content />
         </ngt-mesh-reflector-material>
-    `, isInline: true, dependencies: [{ kind: "pipe", type: NgtPush, name: "ngtPush" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsMeshReflectorMaterial, decorators: [{
             type: Component,
@@ -343,29 +396,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
         <ngt-mesh-reflector-material
             ngtCompound
             attach="material"
-            *ngIf="defines$ | ngtPush as defines"
+            *ngIf="defines()"
             [ref]="materialRef"
-            [defines]="defines"
-            [mirror]="reflectorProps.mirror"
-            [textureMatrix]="reflectorProps.textureMatrix"
-            [mixBlur]="reflectorProps.mixBlur"
-            [tDiffuse]="reflectorProps.tDiffuse"
-            [tDepth]="reflectorProps.tDepth"
-            [tDiffuseBlur]="reflectorProps.tDiffuseBlur"
-            [hasBlur]="reflectorProps.hasBlur"
-            [mixStrength]="reflectorProps.mixStrength"
-            [minDepthThreshold]="reflectorProps.minDepthThreshold"
-            [maxDepthThreshold]="reflectorProps.maxDepthThreshold"
-            [depthScale]="reflectorProps.depthScale"
-            [depthToBlurRatioBias]="reflectorProps.depthToBlurRatioBias"
-            [distortion]="reflectorProps.distortion"
-            [distortionMap]="reflectorProps.distortionMap"
-            [mixContrast]="reflectorProps.mixContrast"
+            [defines]="defines()"
+            [mirror]="reflectorMirror()"
+            [textureMatrix]="reflectorTextureMatrix()"
+            [mixBlur]="reflectorMixBlur()"
+            [tDiffuse]="reflectorTDiffuse()"
+            [tDepth]="reflectorTDepth()"
+            [tDiffuseBlur]="reflectorTDiffuseBlur()"
+            [hasBlur]="reflectorHasBlur()"
+            [mixStrength]="reflectorMixStrength()"
+            [minDepthThreshold]="reflectorMinDepthThreshold()"
+            [maxDepthThreshold]="reflectorMaxDepthThreshold()"
+            [depthScale]="reflectorDepthScale()"
+            [depthToBlurRatioBias]="reflectorDepthToBlurRatioBias()"
+            [distortion]="reflectorDistortion()"
+            [distortionMap]="reflectorDistortionMap()"
+            [mixContrast]="reflectorMixContrast()"
         >
             <ng-content />
         </ngt-mesh-reflector-material>
     `,
-                    imports: [NgtArgs, NgtPush, NgIf],
+                    imports: [NgtArgs, NgIf],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { materialRef: [{
@@ -400,7 +453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
 
 extend({ MeshRefractionMaterial });
 const isCubeTexture = (def) => def && def.isCubeTexture;
-class NgtsMeshRefractionMaterial extends NgtRxStore {
+class NgtsMeshRefractionMaterial extends NgtSignalStore {
     /** Environment map */
     set envMap(envMap) {
         this.set({ envMap });
@@ -429,19 +482,28 @@ class NgtsMeshRefractionMaterial extends NgtRxStore {
     set fastChroma(fastChroma) {
         this.set({ fastChroma });
     }
-    initialize() {
-        super.initialize();
-        this.set({
-            aberrationStrength: 0,
-            fastChroma: true,
-        });
-    }
+    #store;
+    #size;
+    #envMap;
     constructor() {
-        super();
+        super({ aberrationStrength: 0, fastChroma: true });
         this.materialRef = injectNgtRef();
-        this.defines$ = this.select('defines');
-        this.store = inject(NgtStore);
-        this.connect('defines', combineLatest([this.select('aberrationStrength'), this.select('fastChroma'), this.select('envMap')]).pipe(map(([aberrationStrength, fastChroma, envMap]) => {
+        this.refractionEnvMap = this.select('envMap');
+        this.refractionBounces = this.select('bounces');
+        this.refractionIor = this.select('ior');
+        this.refractionFresnel = this.select('fresnel');
+        this.refractionAberrationStrength = this.select('aberrationStrength');
+        this.refractionColor = this.select('color');
+        this.refractionFastChroma = this.select('fastChroma');
+        this.#store = inject(NgtStore);
+        this.#size = this.#store.select('size');
+        this.#envMap = this.select('envMap');
+        this.defines = computed(() => {
+            const envMap = this.#envMap();
+            if (!envMap)
+                return null;
+            const aberrationStrength = this.refractionAberrationStrength();
+            const fastChroma = this.refractionFastChroma();
             const temp = {};
             // Sampler2D and SamplerCube need different defines
             const isCubeMap = isCubeTexture(envMap);
@@ -462,21 +524,22 @@ class NgtsMeshRefractionMaterial extends NgtRxStore {
             if (fastChroma)
                 temp['FAST_CHROMA'] = '';
             return temp;
-        })));
-        this.connect('resolution', this.store.select('size').pipe(map((size) => [size.width, size.height])));
+        });
+        this.resolution = computed(() => [this.#size().width, this.#size().height]);
         injectBeforeRender(({ camera }) => {
             if (this.materialRef.nativeElement) {
                 this.materialRef.nativeElement.viewMatrixInverse = camera.matrixWorld;
                 this.materialRef.nativeElement.projectionMatrixInverse = camera.projectionMatrixInverse;
             }
         });
-    }
-    ngOnInit() {
-        this.setupGeometry();
-    }
-    setupGeometry() {
-        this.hold(this.materialRef.$, (material) => {
-            const geometry = getLocalState(material).parent?.geometry;
+        this.#setupGeometry();
+    }
+    #setupGeometry() {
+        effect(() => {
+            const material = this.materialRef.nativeElement;
+            if (!material)
+                return;
+            const geometry = getLocalState(material).parent()?.geometry;
             if (geometry) {
                 material.bvh.updateFrom(new MeshBVH(geometry.toNonIndexed(), { lazyGeneration: false, strategy: SAH }));
             }
@@ -485,23 +548,23 @@ class NgtsMeshRefractionMaterial extends NgtRxStore {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsMeshRefractionMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsMeshRefractionMaterial, isStandalone: true, selector: "ngts-mesh-refraction-material", inputs: { materialRef: "materialRef", envMap: "envMap", bounces: "bounces", ior: "ior", fresnel: "fresnel", aberrationStrength: "aberrationStrength", color: "color", fastChroma: "fastChroma" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-mesh-refraction-material
-            *ngIf="defines$ | ngtPush as defines"
+            *ngIf="defines() as defines"
             [ref]="materialRef"
             [defines]="defines"
-            [resolution]="get('resolution')"
-            [aberrationStrength]="get('aberrationStrength')"
-            [envMap]="get('envMap')"
-            [bounces]="get('bounces')"
-            [ior]="get('ior')"
-            [fresnel]="get('fresnel')"
-            [color]="get('color')"
-            [fastChroma]="get('fastChroma')"
+            [resolution]="resolution()"
+            [aberrationStrength]="refractionAberrationStrength()"
+            [envMap]="refractionEnvMap()"
+            [bounces]="refractionBounces()"
+            [ior]="refractionIor()"
+            [fresnel]="refractionFresnel()"
+            [color]="refractionColor()"
+            [fastChroma]="refractionFastChroma()"
             ngtCompound
             attach="material"
         >
             <ng-content />
         </ngt-mesh-refraction-material>
-    `, isInline: true, dependencies: [{ kind: "pipe", type: NgtPush, name: "ngtPush" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsMeshRefractionMaterial, decorators: [{
             type: Component,
@@ -510,30 +573,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     standalone: true,
                     template: `
         <ngt-mesh-refraction-material
-            *ngIf="defines$ | ngtPush as defines"
+            *ngIf="defines() as defines"
             [ref]="materialRef"
             [defines]="defines"
-            [resolution]="get('resolution')"
-            [aberrationStrength]="get('aberrationStrength')"
-            [envMap]="get('envMap')"
-            [bounces]="get('bounces')"
-            [ior]="get('ior')"
-            [fresnel]="get('fresnel')"
-            [color]="get('color')"
-            [fastChroma]="get('fastChroma')"
+            [resolution]="resolution()"
+            [aberrationStrength]="refractionAberrationStrength()"
+            [envMap]="refractionEnvMap()"
+            [bounces]="refractionBounces()"
+            [ior]="refractionIor()"
+            [fresnel]="refractionFresnel()"
+            [color]="refractionColor()"
+            [fastChroma]="refractionFastChroma()"
             ngtCompound
             attach="material"
         >
             <ng-content />
         </ngt-mesh-refraction-material>
     `,
-                    imports: [NgtPush, NgIf],
+                    imports: [NgIf],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { materialRef: [{
                 type: Input
             }], envMap: [{
-                type: Input
+                type: Input,
+                args: [{ required: true }]
             }], bounces: [{
                 type: Input
             }], ior: [{
@@ -549,7 +613,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 extend({ MeshTransmissionMaterial });
-class NgtsMeshTranmissionMaterial extends NgtRxStore {
+class NgtsMeshTranmissionMaterial extends NgtSignalStore {
     /** transmissionSampler, you can use the threejs transmission sampler texture that is
      *  generated once for all transmissive materials. The upside is that it can be faster if you
      *  use multiple MeshPhysical and Transmission materials, the downside is that transmissive materials
@@ -621,12 +685,15 @@ class NgtsMeshTranmissionMaterial extends NgtRxStore {
     set time(time) {
         this.set({ time });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    #discardMaterial;
+    #backsideResolution;
+    #resolution;
+    #fboBackSettings;
+    #fboMainSettings;
+    constructor() {
+        super({
             transmissionSampler: false,
             backside: false,
-            side: THREE.FrontSide,
             transmission: 1,
             thickness: 0,
             backsideThickness: 0,
@@ -639,23 +706,40 @@ class NgtsMeshTranmissionMaterial extends NgtRxStore {
             temporalDistortion: 0.0,
             buffer: null,
         });
-    }
-    constructor() {
-        super();
         this.materialRef = injectNgtRef();
-        this.discardMaterial = new DiscardMaterial();
-        this.fboBackRef = injectNgtsFBO(() => combineLatest([this.select('backsideResolution'), this.select('resolution')]).pipe(map(([backsideResolution, resolution]) => backsideResolution || resolution)));
-        this.fboMainRef = injectNgtsFBO(() => this.select('resolution'));
+        this.transmissionTransmissionSampler = this.select('transmissionSampler');
+        this.transmissionBackside = this.select('backside');
+        this.transmissionTransmission = this.select('transmission');
+        this.transmissionThickness = this.select('thickness');
+        this.transmissionBacksideThickness = this.select('backsideThickness');
+        this.transmissionSamples = this.select('samples');
+        this.transmissionRoughness = this.select('roughness');
+        this.transmissionAnisotropy = this.select('anisotropy');
+        this.transmissionChromaticAberration = this.select('chromaticAberration');
+        this.transmissionDistortion = this.select('distortion');
+        this.transmissionDistortionScale = this.select('distortionScale');
+        this.transmissionTemporalDistortion = this.select('temporalDistortion');
+        this.transmissionBuffer = this.select('buffer');
+        this.transmissionTime = this.select('time');
+        this.#discardMaterial = new DiscardMaterial();
+        this.#backsideResolution = this.select('backsideResolution');
+        this.#resolution = this.select('resolution');
+        this.#fboBackSettings = computed(() => ({ width: this.#backsideResolution() || this.#resolution() }));
+        this.#fboMainSettings = computed(() => ({ width: this.#resolution() }));
+        this.fboBackRef = injectNgtsFBO(this.#fboBackSettings);
+        this.fboMainRef = injectNgtsFBO(this.#fboMainSettings);
+        this.side = THREE.FrontSide;
         let oldBg;
         let oldTone;
         let parent;
         injectBeforeRender((state) => {
-            const { transmissionSampler, background, backside, backsideThickness, thickness, side } = this.get();
+            if (!this.materialRef.nativeElement)
+                return;
+            const { transmissionSampler, background, backside, backsideThickness, thickness } = this.get();
             this.materialRef.nativeElement.time = state.clock.getElapsedTime();
             // Render only if the buffer matches the built-in and no transmission sampler is set
-            if (this.materialRef.nativeElement.buffer === this.fboMainRef.nativeElement.texture &&
-                !transmissionSampler) {
-                parent = getLocalState(this.materialRef.nativeElement).parent;
+            if (this.materialRef.nativeElement.buffer === this.fboMainRef().texture && !transmissionSampler) {
+                parent = getLocalState(this.materialRef.nativeElement).parent();
                 if (parent) {
                     // Save defaults
                     oldTone = state.gl.toneMapping;
@@ -666,23 +750,23 @@ class NgtsMeshTranmissionMaterial extends NgtRxStore {
                     state.gl.toneMapping = THREE.NoToneMapping;
                     if (background)
                         state.scene.background = background;
-                    parent['material'] = this.discardMaterial;
+                    parent['material'] = this.#discardMaterial;
                     if (backside) {
                         // Render into the backside buffer
-                        state.gl.setRenderTarget(this.fboBackRef.nativeElement);
+                        state.gl.setRenderTarget(this.fboBackRef());
                         state.gl.render(state.scene, state.camera);
                         // And now prepare the material for the main render using the backside buffer
                         parent['material'] = this.materialRef.nativeElement;
-                        parent['material'].buffer = this.fboBackRef.nativeElement.texture;
+                        parent['material'].buffer = this.fboBackRef().texture;
                         parent['material'].thickness = backsideThickness;
                         parent['material'].side = THREE.BackSide;
                     }
                     // Render into the main buffer
-                    state.gl.setRenderTarget(this.fboMainRef.nativeElement);
+                    state.gl.setRenderTarget(this.fboMainRef());
                     state.gl.render(state.scene, state.camera);
                     parent['material'].thickness = thickness;
-                    parent['material'].side = side;
-                    parent['material'].buffer = this.fboMainRef.nativeElement.texture;
+                    parent['material'].side = this.side;
+                    parent['material'].buffer = this.fboMainRef().texture;
                     // Set old state back
                     state.scene.background = oldBg;
                     state.gl.setRenderTarget(null);
@@ -695,21 +779,21 @@ class NgtsMeshTranmissionMaterial extends NgtRxStore {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsMeshTranmissionMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsMeshTranmissionMaterial, isStandalone: true, selector: "ngts-mesh-transmission-material", inputs: { materialRef: "materialRef", transmissionSampler: "transmissionSampler", backside: "backside", backsideThickness: "backsideThickness", resolution: "resolution", backsideResolution: "backsideResolution", samples: "samples", background: "background", transmission: "transmission", thickness: "thickness", roughness: "roughness", chromaticAberration: "chromaticAberration", anisotropy: "anisotropy", distortion: "distortion", distortionScale: "distortionScale", temporalDistortion: "temporalDistortion", buffer: "buffer", time: "time" }, usesInheritance: true, ngImport: i0, template: `
         <ngt-mesh-transmission-material
-            *args="[get('samples'), get('transmissionSampler')]"
             ngtCompound
+            *args="[transmissionSamples(), transmissionTransmissionSampler()]"
             [ref]="materialRef"
-            [buffer]="get('buffer') || fboMainRef.nativeElement?.texture"
-            [_transmission]="get('transmission')"
-            [transmission]="get('transmissionSampler') ? get('transmission') : 0"
-            [thickness]="get('thickness')"
-            [side]="get('side')"
-            [anisotropy]="get('anisotropy')"
-            [roughness]="get('roughness')"
-            [chromaticAberration]="get('chromaticAberration')"
-            [distortion]="get('distortion')"
-            [distortionScale]="get('distortionScale')"
-            [temporalDistortion]="get('temporalDistortion')"
-            [time]="get('time')"
+            [buffer]="transmissionBuffer() || fboMainRef()?.texture"
+            [_transmission]="transmissionTransmission()"
+            [transmission]="transmissionTransmissionSampler() ? transmissionTransmission() : 0"
+            [thickness]="transmissionThickness()"
+            [side]="side"
+            [anisotropy]="transmissionAnisotropy()"
+            [roughness]="transmissionRoughness()"
+            [chromaticAberration]="transmissionChromaticAberration()"
+            [distortion]="transmissionDistortion()"
+            [distortionScale]="transmissionDistortionScale()"
+            [temporalDistortion]="transmissionTemporalDistortion()"
+            [time]="transmissionTime()"
         />
     `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
 }
@@ -720,21 +804,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     standalone: true,
                     template: `
         <ngt-mesh-transmission-material
-            *args="[get('samples'), get('transmissionSampler')]"
             ngtCompound
+            *args="[transmissionSamples(), transmissionTransmissionSampler()]"
             [ref]="materialRef"
-            [buffer]="get('buffer') || fboMainRef.nativeElement?.texture"
-            [_transmission]="get('transmission')"
-            [transmission]="get('transmissionSampler') ? get('transmission') : 0"
-            [thickness]="get('thickness')"
-            [side]="get('side')"
-            [anisotropy]="get('anisotropy')"
-            [roughness]="get('roughness')"
-            [chromaticAberration]="get('chromaticAberration')"
-            [distortion]="get('distortion')"
-            [distortionScale]="get('distortionScale')"
-            [temporalDistortion]="get('temporalDistortion')"
-            [time]="get('time')"
+            [buffer]="transmissionBuffer() || fboMainRef()?.texture"
+            [_transmission]="transmissionTransmission()"
+            [transmission]="transmissionTransmissionSampler() ? transmissionTransmission() : 0"
+            [thickness]="transmissionThickness()"
+            [side]="side"
+            [anisotropy]="transmissionAnisotropy()"
+            [roughness]="transmissionRoughness()"
+            [chromaticAberration]="transmissionChromaticAberration()"
+            [distortion]="transmissionDistortion()"
+            [distortionScale]="transmissionDistortionScale()"
+            [temporalDistortion]="transmissionTemporalDistortion()"
+            [time]="transmissionTime()"
         />
     `,
                     imports: [NgtArgs],
@@ -779,7 +863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
             }] } });
 
 extend({ MeshWobbleMaterial });
-class NgtsMeshWobbleMaterial extends NgtRxStore {
+class NgtsMeshWobbleMaterial extends NgtSignalStore {
     set time(time) {
         this.set({ time });
     }
@@ -789,14 +873,12 @@ class NgtsMeshWobbleMaterial extends NgtRxStore {
     set speed(speed) {
         this.set({ speed });
     }
-    initialize() {
-        super.initialize();
-        this.set({ speed: 1, time: 0, factor: 1 });
-    }
     constructor() {
-        super();
+        super({ speed: 1, time: 0, factor: 1 });
         this.material = new MeshWobbleMaterial();
         this.materialRef = injectNgtRef();
+        this.wobbleTime = this.select('time');
+        this.wobbleFactor = this.select('factor');
         injectBeforeRender(({ clock }) => {
             this.material.time = clock.getElapsedTime() * this.get('speed');
         });
@@ -806,8 +888,8 @@ class NgtsMeshWobbleMaterial extends NgtRxStore {
         <ngt-primitive
             *args="[material]"
             [ref]="materialRef"
-            [time]="get('time')"
-            [factor]="get('factor')"
+            [time]="wobbleTime()"
+            [factor]="wobbleFactor()"
             attach="material"
             ngtCompound
         />
@@ -822,8 +904,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
         <ngt-primitive
             *args="[material]"
             [ref]="materialRef"
-            [time]="get('time')"
-            [factor]="get('factor')"
+            [time]="wobbleTime()"
+            [factor]="wobbleFactor()"
             attach="material"
             ngtCompound
         />