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

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

@@ -1,152 +1,133 @@
 import * as i0 from '@angular/core';
-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 { 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 * as THREE from 'three';
 import { MeshBVHUniformStruct, MeshBVH, SAH } from 'three-mesh-bvh';
 import { injectNgtsFBO } from 'angular-three-soba/misc';
 
-class NgtsMeshDistortMaterial extends NgtSignalStore {
-    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 });
+    set _speed(speed) {
+        this.inputs.set({ speed });
     }
     constructor() {
-        super({ speed: 1, time: 0, distort: 0.4, radius: 1 });
-        this.material = new (inject(NGTS_DISTORT_MATERIAL_SHADER))();
+        this.inputs = signalStore({
+            speed: 1,
+            time: 0,
+            distort: 0.4,
+            radius: 1,
+        });
         this.materialRef = injectNgtRef();
-        this.distortTime = this.select('time');
-        this.distortDistort = this.select('distort');
-        this.distortRadius = this.select('radius');
+        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]="distortTime()"
-            [distort]="distortDistort()"
-            [radius]="distortRadius()"
-            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.3", ngImport: i0, type: NgtsMeshDistortMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", 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.3", ngImport: i0, type: NgtsMeshDistortMaterial, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-mesh-distort-material',
                     standalone: true,
                     template: `
-        <ngt-primitive
-            *args="[material]"
-            [ref]="materialRef"
-            [time]="distortTime()"
-            [distort]="distortDistort()"
-            [radius]="distortRadius()"
-            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 NgtSignalStore {
-    set resolution(resolution) {
-        this.set({ resolution });
-    }
-    set mixBlur(mixBlur) {
-        this.set({ mixBlur });
-    }
-    set mixStrength(mixStrength) {
-        this.set({ mixStrength });
-    }
-    set blur(blur) {
-        this.set({ blur });
-    }
-    set mirror(mirror) {
-        this.set({ mirror });
-    }
-    set minDepthThreshold(minDepthThreshold) {
-        this.set({ minDepthThreshold });
-    }
-    set maxDepthThreshold(maxDepthThreshold) {
-        this.set({ maxDepthThreshold });
-    }
-    set depthScale(depthScale) {
-        this.set({ depthScale });
-    }
-    set depthToBlurRatioBias(depthToBlurRatioBias) {
-        this.set({ depthToBlurRatioBias });
-    }
-    set distortionMap(distortionMap) {
-        this.set({ distortionMap });
-    }
-    set distortion(distortion) {
-        this.set({ distortion });
-    }
-    set mixContrast(mixContrast) {
-        this.set({ mixContrast });
-    }
-    set reflectorOffset(reflectorOffset) {
-        this.set({ reflectorOffset });
-    }
-    #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;
+class NgtsMeshReflectorMaterial {
+    set _resolution(resolution) {
+        this.inputs.set({ resolution });
+    }
+    set _mixBlur(mixBlur) {
+        this.inputs.set({ mixBlur });
+    }
+    set _mixStrength(mixStrength) {
+        this.inputs.set({ mixStrength });
+    }
+    set _blur(blur) {
+        this.inputs.set({ blur });
+    }
+    set _mirror(mirror) {
+        this.inputs.set({ mirror });
+    }
+    set _minDepthThreshold(minDepthThreshold) {
+        this.inputs.set({ minDepthThreshold });
+    }
+    set _maxDepthThreshold(maxDepthThreshold) {
+        this.inputs.set({ maxDepthThreshold });
+    }
+    set _depthScale(depthScale) {
+        this.inputs.set({ depthScale });
+    }
+    set _depthToBlurRatioBias(depthToBlurRatioBias) {
+        this.inputs.set({ depthToBlurRatioBias });
+    }
+    set _distortionMap(distortionMap) {
+        this.inputs.set({ distortionMap });
+    }
+    set _distortion(distortion) {
+        this.inputs.set({ distortion });
+    }
+    set _mixContrast(mixContrast) {
+        this.inputs.set({ mixContrast });
+    }
+    set _reflectorOffset(reflectorOffset) {
+        this.inputs.set({ reflectorOffset });
+    }
     constructor() {
-        super({
+        this.inputs = signalStore({
             mixBlur: 0,
             mixStrength: 1,
             resolution: 256,
@@ -161,76 +142,75 @@ class NgtsMeshReflectorMaterial extends NgtSignalStore {
             reflectorOffset: 0,
         });
         this.materialRef = injectNgtRef();
-        this.reflectorProps = computed(() => this.#reflectorEntities().reflectorProps);
+        this.reflectorProps = computed(() => this.states().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();
+        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();
+        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.virtualCamera = new THREE.PerspectiveCamera();
+        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();
+        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();
+        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);
@@ -251,7 +231,7 @@ class NgtsMeshReflectorMaterial extends NgtSignalStore {
             });
             const reflectorProps = {
                 mirror,
-                textureMatrix: this.#textureMatrix,
+                textureMatrix: this._textureMatrix,
                 mixBlur,
                 tDiffuse: fbo1.texture,
                 tDepth: fbo1.depthTexture,
@@ -273,29 +253,29 @@ class NgtsMeshReflectorMaterial extends NgtSignalStore {
             };
             return { fbo1, fbo2, blurPass, reflectorProps };
         });
-        injectBeforeRender(this.#onBeforeRender.bind(this));
+        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.#hasBlur();
-        const { fbo1, fbo2, blurPass } = this.#reflectorEntities();
+        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);
+            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;
@@ -304,206 +284,215 @@ class NgtsMeshReflectorMaterial extends NgtSignalStore {
             gl.setRenderTarget(null);
         }
     }
-    #beforeRender(state) {
-        const parent = getLocalState(this.materialRef.nativeElement).parent();
+    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);
+        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.inputs.get('reflectorOffset'));
+        this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
         // Avoid rendering when reflector is facing away
-        if (this.#view.dot(this.#normal) > 0)
+        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);
+        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);
+        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];
+        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));
+        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()"
-            [ref]="materialRef"
-            [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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+        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.2.3", ngImport: i0, type: NgtsMeshReflectorMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", 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.3", 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()"
-            [ref]="materialRef"
-            [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, 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 NgtSignalStore {
+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 });
+    set _fastChroma(fastChroma) {
+        this.inputs.set({ fastChroma });
     }
-    #store;
-    #size;
-    #envMap;
     constructor() {
-        super({ aberrationStrength: 0, fastChroma: true });
+        this.inputs = signalStore({ aberrationStrength: 0, fastChroma: true });
         this.materialRef = injectNgtRef();
-        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.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 = this.#envMap();
+            const [envMap, aberrationStrength, fastChroma] = [this.envMap(), this.aberrationStrength(), this.fastChroma()];
             if (!envMap)
                 return null;
-            const aberrationStrength = this.refractionAberrationStrength();
-            const fastChroma = this.refractionFastChroma();
             const temp = {};
             // Sampler2D and SamplerCube need different defines
             const isCubeMap = isCubeTexture(envMap);
@@ -525,174 +514,182 @@ class NgtsMeshRefractionMaterial extends NgtSignalStore {
                 temp['FAST_CHROMA'] = '';
             return temp;
         });
-        this.resolution = computed(() => [this.#size().width, this.#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;
             }
         });
-        this.#setupGeometry();
+        this.setupGeometry();
     }
-    #setupGeometry() {
+    setupGeometry() {
         effect(() => {
             const material = this.materialRef.nativeElement;
             if (!material)
                 return;
-            const geometry = getLocalState(material).parent()?.geometry;
+            const geometry = getLocalState(material).parent?.()?.geometry;
             if (geometry) {
                 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() as defines"
-            [ref]="materialRef"
-            [defines]="defines"
-            [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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsMeshRefractionMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", 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.3", ngImport: i0, type: NgtsMeshRefractionMaterial, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-mesh-refraction-material',
                     standalone: true,
                     template: `
-        <ngt-mesh-refraction-material
-            *ngIf="defines() as defines"
-            [ref]="materialRef"
-            [defines]="defines"
-            [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: [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: [{
+            }], _envMap: [{
                 type: Input,
-                args: [{ required: true }]
-            }], bounces: [{
-                type: Input
-            }], ior: [{
-                type: Input
-            }], fresnel: [{
-                type: Input
-            }], aberrationStrength: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], fastChroma: [{
-                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 NgtSignalStore {
+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 });
-    }
-    #discardMaterial;
-    #backsideResolution;
-    #resolution;
-    #fboBackSettings;
-    #fboMainSettings;
+    set _time(time) {
+        this.inputs.set({ time });
+    }
     constructor() {
-        super({
+        this.inputs = signalStore({
             transmissionSampler: false,
             backside: false,
             transmission: 1,
@@ -701,6 +698,7 @@ class NgtsMeshTranmissionMaterial extends NgtSignalStore {
             samples: 10,
             roughness: 0,
             anisotropy: 0.1,
+            anisotropicBlur: 0.1,
             chromaticAberration: 0.03,
             distortion: 0,
             distortionScale: 0.5,
@@ -708,27 +706,28 @@ class NgtsMeshTranmissionMaterial extends NgtSignalStore {
             buffer: null,
         });
         this.materialRef = injectNgtRef();
-        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.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.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;
@@ -736,11 +735,11 @@ class NgtsMeshTranmissionMaterial extends NgtSignalStore {
         injectBeforeRender((state) => {
             if (!this.materialRef.nativeElement)
                 return;
-            const { transmissionSampler, background, backside, backsideThickness, thickness } = this.get();
+            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().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;
@@ -751,14 +750,14 @@ class NgtsMeshTranmissionMaterial extends NgtSignalStore {
                     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());
                         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().texture;
+                        parent['material'].buffer = this.fboBackRef()?.texture;
                         parent['material'].thickness = backsideThickness;
                         parent['material'].side = THREE.BackSide;
                     }
@@ -767,7 +766,7 @@ class NgtsMeshTranmissionMaterial extends NgtSignalStore {
                     state.gl.render(state.scene, state.camera);
                     parent['material'].thickness = thickness;
                     parent['material'].side = this.side;
-                    parent['material'].buffer = this.fboMainRef().texture;
+                    parent['material'].buffer = this.fboMainRef()?.texture;
                     // Set old state back
                     state.scene.background = oldBg;
                     state.gl.setRenderTarget(null);
@@ -777,150 +776,219 @@ class NgtsMeshTranmissionMaterial extends NgtSignalStore {
             }
         });
     }
-    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
-            ngtCompound
-            *args="[transmissionSamples(), transmissionTransmissionSampler()]"
-            [ref]="materialRef"
-            [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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: NgtsMeshTranmissionMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", 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()?.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.3", ngImport: i0, type: NgtsMeshTranmissionMaterial, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-mesh-transmission-material',
                     standalone: true,
                     template: `
-        <ngt-mesh-transmission-material
-            ngtCompound
-            *args="[transmissionSamples(), transmissionTransmissionSampler()]"
-            [ref]="materialRef"
-            [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()"
-        />
-    `,
+		<ngt-mesh-transmission-material
+			ngtCompound
+			*args="[samples(), transmissionSampler()]"
+			[ref]="materialRef"
+			[buffer]="buffer() || fboMainRef()?.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 NgtSignalStore {
-    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 });
+    set _speed(speed) {
+        this.inputs.set({ speed });
     }
     constructor() {
-        super({ speed: 1, time: 0, factor: 1 });
-        this.material = new MeshWobbleMaterial();
+        this.inputs = signalStore({ speed: 1, time: 0, factor: 1 });
         this.materialRef = injectNgtRef();
-        this.wobbleTime = this.select('time');
-        this.wobbleFactor = this.select('factor');
+        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]="wobbleTime()"
-            [factor]="wobbleFactor()"
-            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.3", ngImport: i0, type: NgtsMeshWobbleMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", 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.3", ngImport: i0, type: NgtsMeshWobbleMaterial, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-mesh-wobble-material',
                     standalone: true,
                     template: `
-        <ngt-primitive
-            *args="[material]"
-            [ref]="materialRef"
-            [time]="wobbleTime()"
-            [factor]="wobbleFactor()"
-            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.3", ngImport: i0, type: NgtsPointMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", 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.3", 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
             }] } });
 
@@ -928,5 +996,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