angular-three-soba 1.14.1 → 2.0.0-beta.11

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

@@ -1,130 +1,133 @@
 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 { NGTS_DISTORT_MATERIAL_SHADER, MeshReflectorMaterial, BlurPass, MeshRefractionMaterial, MeshTransmissionMaterial, DiscardMaterial, MeshWobbleMaterial } from 'angular-three-soba/shaders';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, Input, computed, effect } from '@angular/core';
+import { signalStore, injectNgtRef, injectBeforeRender, NgtArgs, extend, injectNgtStore, getLocalState, NgtKey } from 'angular-three';
+import { injectNgtsMeshDistortMaterial, 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 { MeshBVHUniformStruct, MeshBVH, SAH } from 'three-mesh-bvh';
 import { injectNgtsFBO } from 'angular-three-soba/misc';
 
-class NgtsMeshDistortMaterial extends NgtRxStore {
-    set time(time) {
-        this.set({ time });
+class NgtsMeshDistortMaterial {
+    set _time(time) {
+        this.inputs.set({ time });
     }
-    set distort(distort) {
-        this.set({ distort });
+    set _distort(distort) {
+        this.inputs.set({ distort });
     }
-    set radius(radius) {
-        this.set({ radius });
+    set _radius(radius) {
+        this.inputs.set({ radius });
     }
-    set speed(speed) {
-        this.set({ speed });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ speed: 1, time: 0, distort: 0.4, radius: 1 });
+    set _speed(speed) {
+        this.inputs.set({ speed });
     }
     constructor() {
-        super();
-        this.MeshDistortMaterial = inject(NGTS_DISTORT_MATERIAL_SHADER);
-        this.material = new this.MeshDistortMaterial();
+        this.inputs = signalStore({
+            speed: 1,
+            time: 0,
+            distort: 0.4,
+            radius: 1,
+        });
         this.materialRef = injectNgtRef();
+        this.MeshDistortMaterial = injectNgtsMeshDistortMaterial();
+        this.material = new this.MeshDistortMaterial();
+        this.time = this.inputs.select('time');
+        this.distort = this.inputs.select('distort');
+        this.radius = this.inputs.select('radius');
         injectBeforeRender(({ clock }) => {
-            this.material.time = clock.getElapsedTime() * this.get('speed');
+            this.material.time = clock.getElapsedTime() * this.inputs.get('speed');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsMeshDistortMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsMeshDistortMaterial, isStandalone: true, selector: "ngts-mesh-distort-material", inputs: { materialRef: "materialRef", time: "time", distort: "distort", radius: "radius", speed: "speed" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive
-            *args="[material]"
-            [ref]="materialRef"
-            [time]="get('time')"
-            [distort]="get('distort')"
-            [radius]="get('radius')"
-            ngtCompound
-            attach="material"
-        />
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtsMeshDistortMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgtsMeshDistortMaterial, isStandalone: true, selector: "ngts-mesh-distort-material", inputs: { materialRef: "materialRef", _time: ["time", "_time"], _distort: ["distort", "_distort"], _radius: ["radius", "_radius"], _speed: ["speed", "_speed"] }, ngImport: i0, template: `
+		<ngt-primitive
+			*args="[material]"
+			[ref]="materialRef"
+			[time]="time()"
+			[distort]="distort()"
+			[radius]="radius()"
+			ngtCompound
+			attach="material"
+		/>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsMeshDistortMaterial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtsMeshDistortMaterial, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-mesh-distort-material',
                     standalone: true,
                     template: `
-        <ngt-primitive
-            *args="[material]"
-            [ref]="materialRef"
-            [time]="get('time')"
-            [distort]="get('distort')"
-            [radius]="get('radius')"
-            ngtCompound
-            attach="material"
-        />
-    `,
+		<ngt-primitive
+			*args="[material]"
+			[ref]="materialRef"
+			[time]="time()"
+			[distort]="distort()"
+			[radius]="radius()"
+			ngtCompound
+			attach="material"
+		/>
+	`,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { materialRef: [{
                 type: Input
-            }], time: [{
-                type: Input
-            }], distort: [{
-                type: Input
-            }], radius: [{
-                type: Input
-            }], speed: [{
-                type: Input
+            }], _time: [{
+                type: Input,
+                args: [{ alias: 'time' }]
+            }], _distort: [{
+                type: Input,
+                args: [{ alias: 'distort' }]
+            }], _radius: [{
+                type: Input,
+                args: [{ alias: 'radius' }]
+            }], _speed: [{
+                type: Input,
+                args: [{ alias: 'speed' }]
             }] } });
 
 extend({ MeshReflectorMaterial });
-class NgtsMeshReflectorMaterial extends NgtRxStore {
-    set resolution(resolution) {
-        this.set({ resolution });
-    }
-    set mixBlur(mixBlur) {
-        this.set({ mixBlur });
+class NgtsMeshReflectorMaterial {
+    set _resolution(resolution) {
+        this.inputs.set({ resolution });
     }
-    set mixStrength(mixStrength) {
-        this.set({ mixStrength });
+    set _mixBlur(mixBlur) {
+        this.inputs.set({ mixBlur });
     }
-    set blur(blur) {
-        this.set({ blur });
+    set _mixStrength(mixStrength) {
+        this.inputs.set({ mixStrength });
     }
-    set mirror(mirror) {
-        this.set({ mirror });
+    set _blur(blur) {
+        this.inputs.set({ blur });
     }
-    set minDepthThreshold(minDepthThreshold) {
-        this.set({ minDepthThreshold });
+    set _mirror(mirror) {
+        this.inputs.set({ mirror });
     }
-    set maxDepthThreshold(maxDepthThreshold) {
-        this.set({ maxDepthThreshold });
+    set _minDepthThreshold(minDepthThreshold) {
+        this.inputs.set({ minDepthThreshold });
     }
-    set depthScale(depthScale) {
-        this.set({ depthScale });
+    set _maxDepthThreshold(maxDepthThreshold) {
+        this.inputs.set({ maxDepthThreshold });
     }
-    set depthToBlurRatioBias(depthToBlurRatioBias) {
-        this.set({ depthToBlurRatioBias });
+    set _depthScale(depthScale) {
+        this.inputs.set({ depthScale });
     }
-    set distortionMap(distortionMap) {
-        this.set({ distortionMap });
+    set _depthToBlurRatioBias(depthToBlurRatioBias) {
+        this.inputs.set({ depthToBlurRatioBias });
     }
-    set distortion(distortion) {
-        this.set({ distortion });
+    set _distortionMap(distortionMap) {
+        this.inputs.set({ distortionMap });
     }
-    set mixContrast(mixContrast) {
-        this.set({ mixContrast });
+    set _distortion(distortion) {
+        this.inputs.set({ distortion });
     }
-    set reflectorOffset(reflectorOffset) {
-        this.set({ reflectorOffset });
+    set _mixContrast(mixContrast) {
+        this.inputs.set({ mixContrast });
     }
-    get reflectorProps() {
-        return this.get('reflectorEntities', 'reflectorProps');
+    set _reflectorOffset(reflectorOffset) {
+        this.inputs.set({ reflectorOffset });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    constructor() {
+        this.inputs = signalStore({
             mixBlur: 0,
             mixStrength: 1,
             resolution: 256,
@@ -138,12 +141,26 @@ 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.reflectorProps = computed(() => this.states().reflectorProps);
+        this.defines = computed(() => this.reflectorProps().defines);
+        this.mirror = computed(() => this.reflectorProps().mirror);
+        this.textureMatrix = computed(() => this.reflectorProps().textureMatrix);
+        this.mixBlur = computed(() => this.reflectorProps().mixBlur);
+        this.tDiffuse = computed(() => this.reflectorProps().tDiffuse);
+        this.tDepth = computed(() => this.reflectorProps().tDepth);
+        this.tDiffuseBlur = computed(() => this.reflectorProps().tDiffuseBlur);
+        this.hasBlur = computed(() => this.reflectorProps().hasBlur);
+        this.mixStrength = computed(() => this.reflectorProps().mixStrength);
+        this.minDepthThreshold = computed(() => this.reflectorProps().minDepthThreshold);
+        this.maxDepthThreshold = computed(() => this.reflectorProps().maxDepthThreshold);
+        this.depthScale = computed(() => this.reflectorProps().depthScale);
+        this.depthToBlurRatioBias = computed(() => this.reflectorProps().depthToBlurRatioBias);
+        this.distortion = computed(() => this.reflectorProps().distortion);
+        this.distortionMap = computed(() => this.reflectorProps().distortionMap);
+        this.mixContrast = computed(() => this.reflectorProps().mixContrast);
+        this.store = injectNgtStore();
+        this.gl = this.store.select('gl');
         this.reflectorPlane = new THREE.Plane();
         this.normal = new THREE.Vector3();
         this.reflectorWorldPosition = new THREE.Vector3();
@@ -154,30 +171,46 @@ class NgtsMeshReflectorMaterial extends NgtRxStore {
         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._textureMatrix = new THREE.Matrix4();
+        this.__blur = this.inputs.select('blur');
+        this.__resolution = this.inputs.select('resolution');
+        this.__mirror = this.inputs.select('mirror');
+        this.__mixBlur = this.inputs.select('mixBlur');
+        this.__mixStrength = this.inputs.select('mixStrength');
+        this.__minDepthThreshold = this.inputs.select('minDepthThreshold');
+        this.__maxDepthThreshold = this.inputs.select('maxDepthThreshold');
+        this.__depthScale = this.inputs.select('depthScale');
+        this.__depthToBlurRatioBias = this.inputs.select('depthToBlurRatioBias');
+        this.__distortion = this.inputs.select('distortion');
+        this.__distortionMap = this.inputs.select('distortionMap');
+        this.__mixContrast = this.inputs.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.states = 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,
-                encoding: gl.outputEncoding,
                 type: THREE.HalfFloatType,
             };
             const fbo1 = new THREE.WebGLRenderTarget(resolution, resolution, parameters);
@@ -198,7 +231,7 @@ class NgtsMeshReflectorMaterial extends NgtRxStore {
             });
             const reflectorProps = {
                 mirror,
-                textureMatrix: this.textureMatrix,
+                textureMatrix: this._textureMatrix,
                 mixBlur,
                 tDiffuse: fbo1.texture,
                 tDepth: fbo1.depthTexture,
@@ -219,11 +252,40 @@ class NgtsMeshReflectorMaterial extends NgtRxStore {
                 },
             };
             return { fbo1, fbo2, blurPass, reflectorProps };
-        })));
+        });
         injectBeforeRender(this.onBeforeRender.bind(this));
     }
+    onBeforeRender(state) {
+        if (!this.materialRef.nativeElement)
+            return;
+        const parent = getLocalState(this.materialRef.nativeElement).parent?.();
+        if (!parent)
+            return;
+        const { gl, scene } = state;
+        const hasBlur = this.__hasBlur();
+        const { fbo1, fbo2, blurPass } = this.states();
+        if (fbo1 && fbo2 && blurPass) {
+            parent.visible = false;
+            const currentXrEnabled = gl.xr.enabled;
+            const currentShadowAutoUpdate = gl.shadowMap.autoUpdate;
+            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);
+            if (hasBlur)
+                blurPass.render(gl, fbo1, fbo2);
+            gl.xr.enabled = currentXrEnabled;
+            gl.shadowMap.autoUpdate = currentShadowAutoUpdate;
+            parent.visible = true;
+            gl.setRenderTarget(null);
+        }
+    }
     beforeRender(state) {
-        const parent = getLocalState(this.materialRef.nativeElement).parent;
+        const parent = getLocalState(this.materialRef.nativeElement).parent?.();
         if (!parent)
             return;
         const { camera } = state;
@@ -232,7 +294,7 @@ class NgtsMeshReflectorMaterial extends NgtRxStore {
         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.reflectorWorldPosition.addScaledVector(this.normal, this.inputs.get('reflectorOffset'));
         this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
         // Avoid rendering when reflector is facing away
         if (this.view.dot(this.normal) > 0)
@@ -255,10 +317,10 @@ class NgtsMeshReflectorMaterial extends NgtRxStore {
         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);
+        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);
@@ -277,171 +339,160 @@ class NgtsMeshReflectorMaterial extends NgtRxStore {
         projectionMatrix.elements[10] = this.clipPlane.z + 1.0;
         projectionMatrix.elements[14] = this.clipPlane.w;
     }
-    onBeforeRender(state) {
-        if (!this.materialRef.nativeElement)
-            return;
-        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');
-        if (fbo1 && fbo2 && blurPass) {
-            parent.visible = false;
-            const currentXrEnabled = gl.xr.enabled;
-            const currentShadowAutoUpdate = gl.shadowMap.autoUpdate;
-            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);
-            if (hasBlur)
-                blurPass.render(gl, fbo1, fbo2);
-            gl.xr.enabled = currentXrEnabled;
-            gl.shadowMap.autoUpdate = currentShadowAutoUpdate;
-            parent.visible = true;
-            gl.setRenderTarget(null);
-        }
-    }
-    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"
-            [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"
-        >
-            <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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtsMeshReflectorMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgtsMeshReflectorMaterial, isStandalone: true, selector: "ngts-mesh-reflector-material", inputs: { materialRef: "materialRef", _resolution: ["resolution", "_resolution"], _mixBlur: ["mixBlur", "_mixBlur"], _mixStrength: ["mixStrength", "_mixStrength"], _blur: ["blur", "_blur"], _mirror: ["mirror", "_mirror"], _minDepthThreshold: ["minDepthThreshold", "_minDepthThreshold"], _maxDepthThreshold: ["maxDepthThreshold", "_maxDepthThreshold"], _depthScale: ["depthScale", "_depthScale"], _depthToBlurRatioBias: ["depthToBlurRatioBias", "_depthToBlurRatioBias"], _distortionMap: ["distortionMap", "_distortionMap"], _distortion: ["distortion", "_distortion"], _mixContrast: ["mixContrast", "_mixContrast"], _reflectorOffset: ["reflectorOffset", "_reflectorOffset"] }, ngImport: i0, template: `
+		<ngt-mesh-reflector-material
+			*ngIf="defines() as defines"
+			[key]="defines"
+			ngtCompound
+			attach="material"
+			[ref]="materialRef"
+			[defines]="defines"
+			[mirror]="mirror()"
+			[textureMatrix]="textureMatrix()"
+			[mixBlur]="mixBlur()"
+			[tDiffuse]="tDiffuse()"
+			[tDepth]="tDepth()"
+			[tDiffuseBlur]="tDiffuseBlur()"
+			[hasBlur]="hasBlur()"
+			[mixStrength]="mixStrength()"
+			[minDepthThreshold]="minDepthThreshold()"
+			[maxDepthThreshold]="maxDepthThreshold()"
+			[depthScale]="depthScale()"
+			[depthToBlurRatioBias]="depthToBlurRatioBias()"
+			[distortion]="distortion()"
+			[distortionMap]="distortionMap()"
+			[mixContrast]="mixContrast()"
+		>
+			<ng-content />
+		</ngt-mesh-reflector-material>
+	`, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtsMeshReflectorMaterial, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-mesh-reflector-material',
                     standalone: true,
                     template: `
-        <ngt-mesh-reflector-material
-            ngtCompound
-            attach="material"
-            *ngIf="defines$ | ngtPush as 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"
-        >
-            <ng-content />
-        </ngt-mesh-reflector-material>
-    `,
-                    imports: [NgtArgs, NgtPush, NgIf],
+		<ngt-mesh-reflector-material
+			*ngIf="defines() as defines"
+			[key]="defines"
+			ngtCompound
+			attach="material"
+			[ref]="materialRef"
+			[defines]="defines"
+			[mirror]="mirror()"
+			[textureMatrix]="textureMatrix()"
+			[mixBlur]="mixBlur()"
+			[tDiffuse]="tDiffuse()"
+			[tDepth]="tDepth()"
+			[tDiffuseBlur]="tDiffuseBlur()"
+			[hasBlur]="hasBlur()"
+			[mixStrength]="mixStrength()"
+			[minDepthThreshold]="minDepthThreshold()"
+			[maxDepthThreshold]="maxDepthThreshold()"
+			[depthScale]="depthScale()"
+			[depthToBlurRatioBias]="depthToBlurRatioBias()"
+			[distortion]="distortion()"
+			[distortionMap]="distortionMap()"
+			[mixContrast]="mixContrast()"
+		>
+			<ng-content />
+		</ngt-mesh-reflector-material>
+	`,
+                    imports: [NgIf, NgtKey],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { materialRef: [{
                 type: Input
-            }], resolution: [{
-                type: Input
-            }], mixBlur: [{
-                type: Input
-            }], mixStrength: [{
-                type: Input
-            }], blur: [{
-                type: Input
-            }], mirror: [{
-                type: Input
-            }], minDepthThreshold: [{
-                type: Input
-            }], maxDepthThreshold: [{
-                type: Input
-            }], depthScale: [{
-                type: Input
-            }], depthToBlurRatioBias: [{
-                type: Input
-            }], distortionMap: [{
-                type: Input
-            }], distortion: [{
-                type: Input
-            }], mixContrast: [{
-                type: Input
-            }], reflectorOffset: [{
-                type: Input
+            }], _resolution: [{
+                type: Input,
+                args: [{ alias: 'resolution' }]
+            }], _mixBlur: [{
+                type: Input,
+                args: [{ alias: 'mixBlur' }]
+            }], _mixStrength: [{
+                type: Input,
+                args: [{ alias: 'mixStrength' }]
+            }], _blur: [{
+                type: Input,
+                args: [{ alias: 'blur' }]
+            }], _mirror: [{
+                type: Input,
+                args: [{ alias: 'mirror' }]
+            }], _minDepthThreshold: [{
+                type: Input,
+                args: [{ alias: 'minDepthThreshold' }]
+            }], _maxDepthThreshold: [{
+                type: Input,
+                args: [{ alias: 'maxDepthThreshold' }]
+            }], _depthScale: [{
+                type: Input,
+                args: [{ alias: 'depthScale' }]
+            }], _depthToBlurRatioBias: [{
+                type: Input,
+                args: [{ alias: 'depthToBlurRatioBias' }]
+            }], _distortionMap: [{
+                type: Input,
+                args: [{ alias: 'distortionMap' }]
+            }], _distortion: [{
+                type: Input,
+                args: [{ alias: 'distortion' }]
+            }], _mixContrast: [{
+                type: Input,
+                args: [{ alias: 'mixContrast' }]
+            }], _reflectorOffset: [{
+                type: Input,
+                args: [{ alias: 'reflectorOffset' }]
             }] } });
 
 extend({ MeshRefractionMaterial });
 const isCubeTexture = (def) => def && def.isCubeTexture;
-class NgtsMeshRefractionMaterial extends NgtRxStore {
+class NgtsMeshRefractionMaterial {
     /** Environment map */
-    set envMap(envMap) {
-        this.set({ envMap });
+    set _envMap(envMap) {
+        this.inputs.set({ envMap });
     }
     /** Number of ray-cast bounces, it can be expensive to have too many, 2 */
-    set bounces(bounces) {
-        this.set({ bounces });
+    set _bounces(bounces) {
+        this.inputs.set({ bounces });
     }
     /** Refraction index, 2.4 */
-    set ior(ior) {
-        this.set({ ior });
+    set _ior(ior) {
+        this.inputs.set({ ior });
     }
     /** Fresnel (strip light), 0 */
-    set fresnel(fresnel) {
-        this.set({ fresnel });
+    set _fresnel(fresnel) {
+        this.inputs.set({ fresnel });
     }
     /** RGB shift intensity, can be expensive, 0 */
-    set aberrationStrength(aberrationStrength) {
-        this.set({ aberrationStrength });
+    set _aberrationStrength(aberrationStrength) {
+        this.inputs.set({ aberrationStrength });
     }
     /** Color, white */
-    set color(color) {
-        this.set({ color });
+    set _color(color) {
+        this.inputs.set({ color });
     }
     /** If this is on it uses fewer ray casts for the RGB shift sacrificing physical accuracy, true */
-    set fastChroma(fastChroma) {
-        this.set({ fastChroma });
-    }
-    initialize() {
-        super.initialize();
-        this.set({
-            aberrationStrength: 0,
-            fastChroma: true,
-        });
+    set _fastChroma(fastChroma) {
+        this.inputs.set({ fastChroma });
     }
     constructor() {
-        super();
+        this.inputs = signalStore({ 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.envMap = this.inputs.select('envMap');
+        this.bounces = this.inputs.select('bounces');
+        this.ior = this.inputs.select('ior');
+        this.fresnel = this.inputs.select('fresnel');
+        this.aberrationStrength = this.inputs.select('aberrationStrength');
+        this.color = this.inputs.select('color');
+        this.fastChroma = this.inputs.select('fastChroma');
+        this.store = injectNgtStore();
+        this.size = this.store.select('size');
+        this.defines = computed(() => {
+            const [envMap, aberrationStrength, fastChroma] = [this.envMap(), this.aberrationStrength(), this.fastChroma()];
+            if (!envMap)
+                return null;
             const temp = {};
             // Sampler2D and SamplerCube need different defines
             const isCubeMap = isCubeTexture(envMap);
@@ -462,200 +513,234 @@ 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;
+            const material = this.materialRef.nativeElement;
+            if (material) {
+                material.viewMatrixInverse = camera.matrixWorld;
+                material.projectionMatrixInverse = camera.projectionMatrixInverse;
             }
         });
-    }
-    ngOnInit() {
         this.setupGeometry();
     }
     setupGeometry() {
-        this.hold(this.materialRef.$, (material) => {
-            const geometry = getLocalState(material).parent?.geometry;
+        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 }));
+                material.bvh = new MeshBVHUniformStruct();
+                material.bvh.updateFrom(new MeshBVH(geometry.clone().toNonIndexed(), { lazyGeneration: false, strategy: SAH }));
             }
         });
     }
-    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"
-            [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')"
-            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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtsMeshRefractionMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgtsMeshRefractionMaterial, isStandalone: true, selector: "ngts-mesh-refraction-material", inputs: { materialRef: "materialRef", _envMap: ["envMap", "_envMap"], _bounces: ["bounces", "_bounces"], _ior: ["ior", "_ior"], _fresnel: ["fresnel", "_fresnel"], _aberrationStrength: ["aberrationStrength", "_aberrationStrength"], _color: ["color", "_color"], _fastChroma: ["fastChroma", "_fastChroma"] }, ngImport: i0, template: `
+		<ngt-mesh-refraction-material
+			*ngIf="defines() as defines"
+			[key]="defines"
+			[ref]="materialRef"
+			[defines]="defines"
+			[resolution]="resolution()"
+			[aberrationStrength]="aberrationStrength()"
+			[envMap]="envMap()"
+			[bounces]="bounces()"
+			[ior]="ior()"
+			[fresnel]="fresnel()"
+			[color]="color()"
+			[fastChroma]="fastChroma()"
+			ngtCompound
+			attach="material"
+		>
+			<ng-content />
+		</ngt-mesh-refraction-material>
+	`, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtsMeshRefractionMaterial, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-mesh-refraction-material',
                     standalone: true,
                     template: `
-        <ngt-mesh-refraction-material
-            *ngIf="defines$ | ngtPush 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')"
-            ngtCompound
-            attach="material"
-        >
-            <ng-content />
-        </ngt-mesh-refraction-material>
-    `,
-                    imports: [NgtPush, NgIf],
+		<ngt-mesh-refraction-material
+			*ngIf="defines() as defines"
+			[key]="defines"
+			[ref]="materialRef"
+			[defines]="defines"
+			[resolution]="resolution()"
+			[aberrationStrength]="aberrationStrength()"
+			[envMap]="envMap()"
+			[bounces]="bounces()"
+			[ior]="ior()"
+			[fresnel]="fresnel()"
+			[color]="color()"
+			[fastChroma]="fastChroma()"
+			ngtCompound
+			attach="material"
+		>
+			<ng-content />
+		</ngt-mesh-refraction-material>
+	`,
+                    imports: [NgIf, NgtKey],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { materialRef: [{
                 type: Input
-            }], envMap: [{
-                type: Input
-            }], bounces: [{
-                type: Input
-            }], ior: [{
-                type: Input
-            }], fresnel: [{
-                type: Input
-            }], aberrationStrength: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], fastChroma: [{
-                type: Input
+            }], _envMap: [{
+                type: Input,
+                args: [{ required: true, alias: 'envMap' }]
+            }], _bounces: [{
+                type: Input,
+                args: [{ alias: 'bounces' }]
+            }], _ior: [{
+                type: Input,
+                args: [{ alias: 'ior' }]
+            }], _fresnel: [{
+                type: Input,
+                args: [{ alias: 'fresnel' }]
+            }], _aberrationStrength: [{
+                type: Input,
+                args: [{ alias: 'aberrationStrength' }]
+            }], _color: [{
+                type: Input,
+                args: [{ alias: 'color' }]
+            }], _fastChroma: [{
+                type: Input,
+                args: [{ alias: 'fastChroma' }]
             }] } });
 
 extend({ MeshTransmissionMaterial });
-class NgtsMeshTranmissionMaterial extends NgtRxStore {
+class NgtsMeshTranmissionMaterial {
     /** 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
      *  using this can't see other transparent or transmissive objects, default: false */
-    set transmissionSampler(transmissionSampler) {
-        this.set({ transmissionSampler });
+    set _transmissionSampler(transmissionSampler) {
+        this.inputs.set({ transmissionSampler });
     }
     /** Render the backside of the material (more cost, better results), default: false */
-    set backside(backside) {
-        this.set({ backside });
+    set _backside(backside) {
+        this.inputs.set({ backside });
     }
     /** Backside thickness (when backside is true), default: 0 */
-    set backsideThickness(backsideThickness) {
-        this.set({ backsideThickness });
+    set _backsideThickness(backsideThickness) {
+        this.inputs.set({ backsideThickness });
     }
     /** Resolution of the local buffer, default: undefined (fullscreen) */
-    set resolution(resolution) {
-        this.set({ resolution });
+    set _resolution(resolution) {
+        this.inputs.set({ resolution });
     }
     /** Resolution of the local buffer for backfaces, default: undefined (fullscreen) */
-    set backsideResolution(backsideResolution) {
-        this.set({ backsideResolution });
+    set _backsideResolution(backsideResolution) {
+        this.inputs.set({ backsideResolution });
     }
     /** Refraction samples, default: 10 */
-    set samples(samples) {
-        this.set({ samples });
+    set _samples(samples) {
+        this.inputs.set({ samples });
     }
     /** Buffer scene background (can be a texture, a cubetexture or a color), default: null */
-    set background(background) {
-        this.set({ background });
+    set _background(background) {
+        this.inputs.set({ background });
     }
     /* Transmission, default: 1 */
-    set transmission(transmission) {
-        this.set({ transmission });
+    set _transmission(transmission) {
+        this.inputs.set({ transmission });
     }
     /* Thickness (refraction), default: 0 */
-    set thickness(thickness) {
-        this.set({ thickness });
+    set _thickness(thickness) {
+        this.inputs.set({ thickness });
     }
     /* Roughness (blur), default: 0 */
-    set roughness(roughness) {
-        this.set({ roughness });
+    set _roughness(roughness) {
+        this.inputs.set({ roughness });
     }
     /* Chromatic aberration, default: 0.03 */
-    set chromaticAberration(chromaticAberration) {
-        this.set({ chromaticAberration });
+    set _chromaticAberration(chromaticAberration) {
+        this.inputs.set({ chromaticAberration });
     }
     /* Anisotropy, default: 0.1 */
-    set anisotropy(anisotropy) {
-        this.set({ anisotropy });
+    set _anisotropy(anisotropy) {
+        this.inputs.set({ anisotropy });
+    }
+    /* AnisotropicBlur, default: 0.1 */
+    set _anisotropicBlur(anisotropicBlur) {
+        this.inputs.set({ anisotropicBlur });
     }
     /* Distortion, default: 0 */
-    set distortion(distortion) {
-        this.set({ distortion });
+    set _distortion(distortion) {
+        this.inputs.set({ distortion });
     }
     /* Distortion scale, default: 0.5 */
-    set distortionScale(distortionScale) {
-        this.set({ distortionScale });
+    set _distortionScale(distortionScale) {
+        this.inputs.set({ distortionScale });
     }
     /* Temporal distortion (speed of movement), default: 0.0 */
-    set temporalDistortion(temporalDistortion) {
-        this.set({ temporalDistortion });
+    set _temporalDistortion(temporalDistortion) {
+        this.inputs.set({ temporalDistortion });
     }
     /** The scene rendered into a texture (use it to share a texture between materials), default: null  */
-    set buffer(buffer) {
-        this.set({ buffer });
+    set _buffer(buffer) {
+        this.inputs.set({ buffer });
     }
     /** Internals */
-    set time(time) {
-        this.set({ time });
+    set _time(time) {
+        this.inputs.set({ time });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    constructor() {
+        this.inputs = signalStore({
             transmissionSampler: false,
             backside: false,
-            side: THREE.FrontSide,
             transmission: 1,
             thickness: 0,
             backsideThickness: 0,
             samples: 10,
             roughness: 0,
             anisotropy: 0.1,
+            anisotropicBlur: 0.1,
             chromaticAberration: 0.03,
             distortion: 0,
             distortionScale: 0.5,
             temporalDistortion: 0.0,
             buffer: null,
         });
-    }
-    constructor() {
-        super();
         this.materialRef = injectNgtRef();
+        this.transmissionSampler = this.inputs.select('transmissionSampler');
+        this.backside = this.inputs.select('backside');
+        this.transmission = this.inputs.select('transmission');
+        this.thickness = this.inputs.select('thickness');
+        this.backsideThickness = this.inputs.select('backsideThickness');
+        this.samples = this.inputs.select('samples');
+        this.roughness = this.inputs.select('roughness');
+        this.anisotropy = this.inputs.select('anisotropy');
+        this.anisotropicBlur = this.inputs.select('anisotropicBlur');
+        this.chromaticAberration = this.inputs.select('chromaticAberration');
+        this.distortion = this.inputs.select('distortion');
+        this.distortionScale = this.inputs.select('distortionScale');
+        this.temporalDistortion = this.inputs.select('temporalDistortion');
+        this.buffer = this.inputs.select('buffer');
+        this.time = this.inputs.select('time');
         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.backsideResolution = this.inputs.select('backsideResolution');
+        this.resolution = this.inputs.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.inputs.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 &&
+            if (this.materialRef.nativeElement.buffer === this.fboMainRef.nativeElement?.texture &&
                 !transmissionSampler) {
-                parent = getLocalState(this.materialRef.nativeElement).parent;
+                parent = getLocalState(this.materialRef.nativeElement).parent?.();
                 if (parent) {
                     // Save defaults
                     oldTone = state.gl.toneMapping;
@@ -673,7 +758,7 @@ class NgtsMeshTranmissionMaterial extends NgtRxStore {
                         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.nativeElement?.texture;
                         parent['material'].thickness = backsideThickness;
                         parent['material'].side = THREE.BackSide;
                     }
@@ -681,8 +766,8 @@ class NgtsMeshTranmissionMaterial extends NgtRxStore {
                     state.gl.setRenderTarget(this.fboMainRef.nativeElement);
                     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.nativeElement?.texture;
                     // Set old state back
                     state.scene.background = oldBg;
                     state.gl.setRenderTarget(null);
@@ -692,152 +777,215 @@ 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
-            [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')"
-        />
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtsMeshTranmissionMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgtsMeshTranmissionMaterial, isStandalone: true, selector: "ngts-mesh-transmission-material", inputs: { materialRef: "materialRef", _transmissionSampler: ["transmissionSampler", "_transmissionSampler"], _backside: ["backside", "_backside"], _backsideThickness: ["backsideThickness", "_backsideThickness"], _resolution: ["resolution", "_resolution"], _backsideResolution: ["backsideResolution", "_backsideResolution"], _samples: ["samples", "_samples"], _background: ["background", "_background"], _transmission: ["transmission", "_transmission"], _thickness: ["thickness", "_thickness"], _roughness: ["roughness", "_roughness"], _chromaticAberration: ["chromaticAberration", "_chromaticAberration"], _anisotropy: ["anisotropy", "_anisotropy"], _anisotropicBlur: ["anisotropicBlur", "_anisotropicBlur"], _distortion: ["distortion", "_distortion"], _distortionScale: ["distortionScale", "_distortionScale"], _temporalDistortion: ["temporalDistortion", "_temporalDistortion"], _buffer: ["buffer", "_buffer"], _time: ["time", "_time"] }, ngImport: i0, template: `
+		<ngt-mesh-transmission-material
+			ngtCompound
+			*args="[samples(), transmissionSampler()]"
+			[ref]="materialRef"
+			[buffer]="buffer() || fboMainRef.nativeElement?.texture"
+			[_transmission]="transmission()"
+			[transmission]="transmissionSampler() ? transmission() : 0"
+			[thickness]="thickness()"
+			[side]="side"
+			[anisotropicBlur]="anisotropicBlur() ?? anisotropy()"
+			[roughness]="roughness()"
+			[chromaticAberration]="chromaticAberration()"
+			[distortion]="distortion()"
+			[distortionScale]="distortionScale()"
+			[temporalDistortion]="temporalDistortion()"
+			[time]="time()"
+		/>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsMeshTranmissionMaterial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtsMeshTranmissionMaterial, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-mesh-transmission-material',
                     standalone: true,
                     template: `
-        <ngt-mesh-transmission-material
-            *args="[get('samples'), get('transmissionSampler')]"
-            ngtCompound
-            [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')"
-        />
-    `,
+		<ngt-mesh-transmission-material
+			ngtCompound
+			*args="[samples(), transmissionSampler()]"
+			[ref]="materialRef"
+			[buffer]="buffer() || fboMainRef.nativeElement?.texture"
+			[_transmission]="transmission()"
+			[transmission]="transmissionSampler() ? transmission() : 0"
+			[thickness]="thickness()"
+			[side]="side"
+			[anisotropicBlur]="anisotropicBlur() ?? anisotropy()"
+			[roughness]="roughness()"
+			[chromaticAberration]="chromaticAberration()"
+			[distortion]="distortion()"
+			[distortionScale]="distortionScale()"
+			[temporalDistortion]="temporalDistortion()"
+			[time]="time()"
+		/>
+	`,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { materialRef: [{
                 type: Input
-            }], transmissionSampler: [{
-                type: Input
-            }], backside: [{
-                type: Input
-            }], backsideThickness: [{
-                type: Input
-            }], resolution: [{
-                type: Input
-            }], backsideResolution: [{
-                type: Input
-            }], samples: [{
-                type: Input
-            }], background: [{
-                type: Input
-            }], transmission: [{
-                type: Input
-            }], thickness: [{
-                type: Input
-            }], roughness: [{
-                type: Input
-            }], chromaticAberration: [{
-                type: Input
-            }], anisotropy: [{
-                type: Input
-            }], distortion: [{
-                type: Input
-            }], distortionScale: [{
-                type: Input
-            }], temporalDistortion: [{
-                type: Input
-            }], buffer: [{
-                type: Input
-            }], time: [{
-                type: Input
+            }], _transmissionSampler: [{
+                type: Input,
+                args: [{ alias: 'transmissionSampler' }]
+            }], _backside: [{
+                type: Input,
+                args: [{ alias: 'backside' }]
+            }], _backsideThickness: [{
+                type: Input,
+                args: [{ alias: 'backsideThickness' }]
+            }], _resolution: [{
+                type: Input,
+                args: [{ alias: 'resolution' }]
+            }], _backsideResolution: [{
+                type: Input,
+                args: [{ alias: 'backsideResolution' }]
+            }], _samples: [{
+                type: Input,
+                args: [{ alias: 'samples' }]
+            }], _background: [{
+                type: Input,
+                args: [{ alias: 'background' }]
+            }], _transmission: [{
+                type: Input,
+                args: [{ alias: 'transmission' }]
+            }], _thickness: [{
+                type: Input,
+                args: [{ alias: 'thickness' }]
+            }], _roughness: [{
+                type: Input,
+                args: [{ alias: 'roughness' }]
+            }], _chromaticAberration: [{
+                type: Input,
+                args: [{ alias: 'chromaticAberration' }]
+            }], _anisotropy: [{
+                type: Input,
+                args: [{ alias: 'anisotropy' }]
+            }], _anisotropicBlur: [{
+                type: Input,
+                args: [{ alias: 'anisotropicBlur' }]
+            }], _distortion: [{
+                type: Input,
+                args: [{ alias: 'distortion' }]
+            }], _distortionScale: [{
+                type: Input,
+                args: [{ alias: 'distortionScale' }]
+            }], _temporalDistortion: [{
+                type: Input,
+                args: [{ alias: 'temporalDistortion' }]
+            }], _buffer: [{
+                type: Input,
+                args: [{ alias: 'buffer' }]
+            }], _time: [{
+                type: Input,
+                args: [{ alias: 'time' }]
             }] } });
 
 extend({ MeshWobbleMaterial });
-class NgtsMeshWobbleMaterial extends NgtRxStore {
-    set time(time) {
-        this.set({ time });
+class NgtsMeshWobbleMaterial {
+    set _time(time) {
+        this.inputs.set({ time });
     }
-    set factor(factor) {
-        this.set({ factor });
+    set _factor(factor) {
+        this.inputs.set({ factor });
     }
-    set speed(speed) {
-        this.set({ speed });
-    }
-    initialize() {
-        super.initialize();
-        this.set({ speed: 1, time: 0, factor: 1 });
+    set _speed(speed) {
+        this.inputs.set({ speed });
     }
     constructor() {
-        super();
-        this.material = new MeshWobbleMaterial();
+        this.inputs = signalStore({ speed: 1, time: 0, factor: 1 });
         this.materialRef = injectNgtRef();
+        this.material = new MeshWobbleMaterial();
+        this.time = this.inputs.select('time');
+        this.factor = this.inputs.select('factor');
         injectBeforeRender(({ clock }) => {
-            this.material.time = clock.getElapsedTime() * this.get('speed');
+            this.material.time = clock.getElapsedTime() * this.inputs.get('speed');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsMeshWobbleMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtsMeshWobbleMaterial, isStandalone: true, selector: "ngts-mesh-wobble-material", inputs: { materialRef: "materialRef", time: "time", factor: "factor", speed: "speed" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive
-            *args="[material]"
-            [ref]="materialRef"
-            [time]="get('time')"
-            [factor]="get('factor')"
-            attach="material"
-            ngtCompound
-        />
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtsMeshWobbleMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgtsMeshWobbleMaterial, isStandalone: true, selector: "ngts-mesh-wobble-material", inputs: { materialRef: "materialRef", _time: ["time", "_time"], _factor: ["factor", "_factor"], _speed: ["speed", "_speed"] }, ngImport: i0, template: `
+		<ngt-primitive
+			*args="[material]"
+			[ref]="materialRef"
+			[time]="time()"
+			[factor]="factor()"
+			attach="material"
+			ngtCompound
+		/>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtsMeshWobbleMaterial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtsMeshWobbleMaterial, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-mesh-wobble-material',
                     standalone: true,
                     template: `
-        <ngt-primitive
-            *args="[material]"
-            [ref]="materialRef"
-            [time]="get('time')"
-            [factor]="get('factor')"
-            attach="material"
-            ngtCompound
-        />
-    `,
+		<ngt-primitive
+			*args="[material]"
+			[ref]="materialRef"
+			[time]="time()"
+			[factor]="factor()"
+			attach="material"
+			ngtCompound
+		/>
+	`,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
         }], ctorParameters: function () { return []; }, propDecorators: { materialRef: [{
                 type: Input
-            }], time: [{
-                type: Input
-            }], factor: [{
-                type: Input
-            }], speed: [{
+            }], _time: [{
+                type: Input,
+                args: [{ alias: 'time' }]
+            }], _factor: [{
+                type: Input,
+                args: [{ alias: 'factor' }]
+            }], _speed: [{
+                type: Input,
+                args: [{ alias: 'speed' }]
+            }] } });
+
+const opaque_fragment = parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'opaque_fragment' : 'output_fragment';
+class PointMaterial extends THREE.PointsMaterial {
+    constructor(parameters) {
+        super(parameters);
+        this.onBeforeCompile = (shader, renderer) => {
+            const { isWebGL2 } = renderer.capabilities;
+            shader.fragmentShader = shader.fragmentShader.replace(`#include <${opaque_fragment}>`, `
+        ${!isWebGL2
+                ? `#extension GL_OES_standard_derivatives : enable\n#include <${opaque_fragment}>`
+                : `#include <${opaque_fragment}>`}
+      vec2 cxy = 2.0 * gl_PointCoord - 1.0;
+      float r = dot(cxy, cxy);
+      float delta = fwidth(r);
+      float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
+      gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );
+      #include <tonemapping_fragment>
+      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
+      `);
+        };
+    }
+}
+class NgtsPointMaterial {
+    constructor() {
+        this.pointMaterialRef = injectNgtRef();
+        this.material = new PointMaterial({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtsPointMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgtsPointMaterial, isStandalone: true, selector: "ngts-point-material", inputs: { pointMaterialRef: "pointMaterialRef" }, ngImport: i0, template: `<ngt-primitive ngtCompound [ref]="pointMaterialRef" *args="[material]" attach="material" />`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtsPointMaterial, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-point-material',
+                    standalone: true,
+                    template: `<ngt-primitive ngtCompound [ref]="pointMaterialRef" *args="[material]" attach="material" />`,
+                    imports: [NgtArgs],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], propDecorators: { pointMaterialRef: [{
                 type: Input
             }] } });
 
@@ -845,5 +993,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgtsMeshDistortMaterial, NgtsMeshReflectorMaterial, NgtsMeshRefractionMaterial, NgtsMeshTranmissionMaterial, NgtsMeshWobbleMaterial };
+export { NgtsMeshDistortMaterial, NgtsMeshReflectorMaterial, NgtsMeshRefractionMaterial, NgtsMeshTranmissionMaterial, NgtsMeshWobbleMaterial, NgtsPointMaterial, PointMaterial };
 //# sourceMappingURL=angular-three-soba-materials.mjs.map