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

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

@@ -1,224 +1,200 @@
 import * as i0 from '@angular/core';
-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 { input, computed, afterNextRender, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, viewChild, untracked, inject, DestroyRef } from '@angular/core';
+import { omit, is, pick, NgtArgs, injectBeforeRender, injectStore, applyProps, getLocalState } from 'angular-three';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+import CustomShaderMaterial from 'three-custom-shader-material/vanilla';
+import { MeshDistortMaterial, BlurPass, MeshReflectorMaterial, MeshDiscardMaterial, MeshTransmissionMaterial, MeshWobbleMaterial } from 'angular-three-soba/vanilla-exports';
+import { mergeInputs } from 'ngxtension/inject-inputs';
+import { Plane, Vector3, Matrix4, Vector4, PerspectiveCamera, LinearFilter, HalfFloatType, WebGLRenderTarget, DepthTexture, DepthFormat, UnsignedShortType, FrontSide, NoToneMapping, BackSide } from 'three';
+import { MeshRefractionMaterial, PointMaterial } from 'angular-three-soba/shaders';
 import { MeshBVHUniformStruct, MeshBVH, SAH } from 'three-mesh-bvh';
-import { injectNgtsFBO } from 'angular-three-soba/misc';
+import { injectFBO } from 'angular-three-soba/misc';
 
-class NgtsMeshDistortMaterial {
-    set _time(time) {
-        this.inputs.set({ time });
-    }
-    set _distort(distort) {
-        this.inputs.set({ distort });
-    }
-    set _radius(radius) {
-        this.inputs.set({ radius });
-    }
-    set _speed(speed) {
-        this.inputs.set({ speed });
-    }
+class NgtsCustomShaderMaterial {
     constructor() {
-        this.inputs = signalStore({
-            speed: 1,
-            time: 0,
-            distort: 0.4,
-            radius: 1,
+        this.baseMaterial = input.required();
+        this.attach = input('material');
+        this.options = input({});
+        this.parameters = omit(this.options, ['fragmentShader', 'vertexShader', 'uniforms', 'cacheKey']);
+        this.base = computed(() => {
+            const baseMaterial = this.baseMaterial();
+            return is.ref(baseMaterial) ? baseMaterial.nativeElement : baseMaterial;
+        });
+        this.fragmentShader = pick(this.options, 'fragmentShader');
+        this.vertexShader = pick(this.options, 'vertexShader');
+        this.uniforms = pick(this.options, 'uniforms');
+        this.cacheKey = pick(this.options, 'cacheKey');
+        this.material = computed(() => {
+            const [base, fragmentShader, vertexShader, uniforms, cacheKey] = [
+                this.base(),
+                this.fragmentShader(),
+                this.vertexShader(),
+                this.uniforms(),
+                this.cacheKey(),
+            ];
+            // NOTE: this is specific to angular-three
+            if (is.instance(base)) {
+                delete base['__ngt__'];
+                delete base['__ngt_renderer__'];
+            }
+            return new CustomShaderMaterial({
+                baseMaterial: base,
+                fragmentShader,
+                vertexShader,
+                uniforms,
+                cacheKey,
+            });
+        });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const material = this.material();
+                return () => material.dispose();
+            });
         });
-        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');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCustomShaderMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtsCustomShaderMaterial, isStandalone: true, selector: "ngts-custom-shader-material", inputs: { baseMaterial: { classPropertyName: "baseMaterial", publicName: "baseMaterial", isSignal: true, isRequired: true, transformFunction: null }, attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-primitive *args="[material()]" [attach]="attach()" [parameters]="parameters()">
+			<ng-content />
+		</ngt-primitive>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsCustomShaderMaterial, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-custom-shader-material',
+                    standalone: true,
+                    template: `
+		<ngt-primitive *args="[material()]" [attach]="attach()" [parameters]="parameters()">
+			<ng-content />
+		</ngt-primitive>
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
+                }]
+        }], ctorParameters: () => [] });
+
+const defaultOptions$4 = {
+    speed: 1,
+};
+class NgtsMeshDistortMaterial {
+    constructor() {
+        this.attach = input('material');
+        this.options = input(defaultOptions$4, { transform: mergeInputs(defaultOptions$4) });
+        this.parameters = omit(this.options, ['speed']);
+        this.material = new MeshDistortMaterial();
+        this.speed = pick(this.options, 'speed');
         injectBeforeRender(({ clock }) => {
-            this.material.time = clock.getElapsedTime() * this.inputs.get('speed');
+            this.material.time = clock.getElapsedTime() * this.speed();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsMeshDistortMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsMeshDistortMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtsMeshDistortMaterial, isStandalone: true, selector: "ngts-mesh-distort-material", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-primitive *args="[material]" [attach]="attach()" [parameters]="parameters()">
+			<ng-content />
+		</ngt-primitive>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsMeshDistortMaterial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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]="time()"
-			[distort]="distort()"
-			[radius]="radius()"
-			ngtCompound
-			attach="material"
-		/>
+		<ngt-primitive *args="[material]" [attach]="attach()" [parameters]="parameters()">
+			<ng-content />
+		</ngt-primitive>
 	`,
-                    imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { materialRef: [{
-                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' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-extend({ MeshReflectorMaterial });
+const defaultOptions$3 = {
+    mixBlur: 0,
+    mixStrength: 1,
+    resolution: 256,
+    blur: [0, 0],
+    minDepthThreshold: 0.9,
+    maxDepthThreshold: 1,
+    depthScale: 0,
+    depthToBlurRatioBias: 0.25,
+    mirror: 0,
+    distortion: 1,
+    mixContrast: 1,
+    reflectorOffset: 0,
+};
 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() {
-        this.inputs = signalStore({
-            mixBlur: 0,
-            mixStrength: 1,
-            resolution: 256,
-            blur: [0, 0],
-            minDepthThreshold: 0.9,
-            maxDepthThreshold: 1,
-            depthScale: 0,
-            depthToBlurRatioBias: 0.25,
-            mirror: 0,
-            distortion: 1,
-            mixContrast: 1,
-            reflectorOffset: 0,
-        });
-        this.materialRef = injectNgtRef();
-        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.attach = input('material');
+        this.options = input(defaultOptions$3, { transform: mergeInputs(defaultOptions$3) });
+        this.parameters = omit(this.options, [
+            'distortionMap',
+            'resolution',
+            'mixBlur',
+            'mixStrength',
+            'blur',
+            'minDepthThreshold',
+            'maxDepthThreshold',
+            'depthScale',
+            'depthToBlurRatioBias',
+            'mirror',
+            'distortion',
+            'mixContrast',
+            'reflectorOffset',
+        ]);
+        this.store = injectStore();
         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.materialRef = viewChild('material');
+        this.reflectOptions = pick(this.options, [
+            'distortionMap',
+            'resolution',
+            'mixBlur',
+            'mixStrength',
+            'blur',
+            'minDepthThreshold',
+            'maxDepthThreshold',
+            'depthScale',
+            'depthToBlurRatioBias',
+            'mirror',
+            'distortion',
+            'mixContrast',
+            'reflectorOffset',
+        ]);
+        this.blur = pick(this.reflectOptions, 'blur');
         this.normalizedBlur = computed(() => {
-            const blur = this.__blur();
+            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,
-                type: THREE.HalfFloatType,
+        this.hasBlur = computed(() => this.normalizedBlur()[0] + this.normalizedBlur()[1] > 0);
+        this.reflectorPlane = new Plane();
+        this.normal = new Vector3();
+        this.reflectorWorldPosition = new Vector3();
+        this.cameraWorldPosition = new Vector3();
+        this.rotationMatrix = new Matrix4();
+        this.lookAtPosition = new Vector3(0, 0, -1);
+        this.clipPlane = new Vector4();
+        this.view = new Vector3();
+        this.target = new Vector3();
+        this.q = new Vector4();
+        this.textureMatrix = new Matrix4();
+        this.virtualCamera = new PerspectiveCamera();
+        this.reflectState = computed(() => {
+            const [gl, { resolution, minDepthThreshold, maxDepthThreshold, depthScale, depthToBlurRatioBias, mirror, mixBlur, mixStrength, distortion, distortionMap, mixContrast, }, blur, hasBlur,] = [this.gl(), this.reflectOptions(), this.normalizedBlur(), this.hasBlur()];
+            const renderTargetParameters = {
+                minFilter: LinearFilter,
+                magFilter: LinearFilter,
+                type: HalfFloatType,
             };
-            const fbo1 = new THREE.WebGLRenderTarget(resolution, resolution, parameters);
+            const fbo1 = new WebGLRenderTarget(resolution, resolution, renderTargetParameters);
             fbo1.depthBuffer = true;
-            fbo1.depthTexture = new THREE.DepthTexture(resolution, resolution);
-            fbo1.depthTexture.format = THREE.DepthFormat;
-            fbo1.depthTexture.type = THREE.UnsignedShortType;
-            const fbo2 = new THREE.WebGLRenderTarget(resolution, resolution, parameters);
+            fbo1.depthTexture = new DepthTexture(resolution, resolution);
+            fbo1.depthTexture.format = DepthFormat;
+            fbo1.depthTexture.type = UnsignedShortType;
+            const fbo2 = new WebGLRenderTarget(resolution, resolution, renderTargetParameters);
             const blurPass = new BlurPass({
                 gl,
                 resolution,
@@ -229,9 +205,19 @@ class NgtsMeshReflectorMaterial {
                 depthScale,
                 depthToBlurRatioBias,
             });
-            const reflectorProps = {
+            const defines = {};
+            if (hasBlur) {
+                defines['USE_BLUR'] = '';
+            }
+            if (depthScale > 0) {
+                defines['USE_DEPTH'] = '';
+            }
+            if (distortionMap) {
+                defines['USE_DISTORTION'] = '';
+            }
+            const reflectorParameters = {
                 mirror,
-                textureMatrix: this._textureMatrix,
+                textureMatrix: this.textureMatrix,
                 mixBlur,
                 tDiffuse: fbo1.texture,
                 tDepth: fbo1.depthTexture,
@@ -245,30 +231,59 @@ class NgtsMeshReflectorMaterial {
                 distortion,
                 distortionMap,
                 mixContrast,
-                defines: {
-                    USE_BLUR: hasBlur ? '' : undefined,
-                    USE_DEPTH: depthScale > 0 ? '' : undefined,
-                    USE_DISTORTION: distortionMap ? '' : undefined,
-                },
+                defines,
             };
-            return { fbo1, fbo2, blurPass, reflectorProps };
+            return { fbo1, fbo2, blurPass, reflectorParameters };
         });
-        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) {
+        this.definesKey = computed(() => {
+            const defines = this.reflectState().reflectorParameters.defines;
+            return Object.entries(defines).reduce((acc, [key, value]) => (value != null ? `${acc} ${key}` : acc), '');
+        });
+        this.material = computed(() => {
+            const prevMaterial = untracked(this.materialRef)?.nativeElement;
+            if (prevMaterial) {
+                prevMaterial.dispose();
+                delete prevMaterial['__ngt__'];
+                delete prevMaterial['__ngt_renderer__'];
+            }
+            // tracking defines key so that the material is recreated when the defines change
+            this.definesKey();
+            return new MeshReflectorMaterial();
+        });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const material = this.materialRef()?.nativeElement;
+                if (!material)
+                    return;
+                const { reflectorParameters } = this.reflectState();
+                applyProps(material, { ...reflectorParameters, ...this.parameters() });
+            });
+        });
+        inject(DestroyRef).onDestroy(() => {
+            const material = this.materialRef()?.nativeElement;
+            if (material) {
+                material.dispose();
+                delete material['__ngt__'];
+                delete material['__ngt_renderer__'];
+            }
+        });
+        injectBeforeRender(({ gl, scene }) => {
+            const material = this.materialRef()?.nativeElement;
+            if (!material)
+                return;
+            const localState = getLocalState(material);
+            if (!localState)
+                return;
+            const parent = Reflect.get(material, 'parent') ?? untracked(localState.parent);
+            if (!parent)
+                return;
+            const { fbo1, fbo2, blurPass } = this.reflectState();
+            const hasBlur = this.hasBlur();
             parent.visible = false;
             const currentXrEnabled = gl.xr.enabled;
             const currentShadowAutoUpdate = gl.shadowMap.autoUpdate;
-            this.beforeRender(state);
+            this.beforeRender();
             gl.xr.enabled = false;
             gl.shadowMap.autoUpdate = false;
             gl.setRenderTarget(fbo1);
@@ -282,19 +297,26 @@ class NgtsMeshReflectorMaterial {
             gl.shadowMap.autoUpdate = currentShadowAutoUpdate;
             parent.visible = true;
             gl.setRenderTarget(null);
-        }
+        });
     }
-    beforeRender(state) {
-        const parent = getLocalState(this.materialRef.nativeElement).parent?.();
+    beforeRender() {
+        const material = this.materialRef()?.nativeElement;
+        if (!material)
+            return;
+        const localState = getLocalState(material);
+        if (!localState)
+            return;
+        const parent = Reflect.get(material, 'parent') ?? untracked(localState.parent);
         if (!parent)
             return;
-        const { camera } = state;
+        const { camera } = this.store.snapshot;
+        const { reflectorOffset } = untracked(this.reflectOptions);
         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.reflectorWorldPosition.addScaledVector(this.normal, reflectorOffset);
         this.view.subVectors(this.reflectorWorldPosition, this.cameraWorldPosition);
         // Avoid rendering when reflector is facing away
         if (this.view.dot(this.normal) > 0)
@@ -317,10 +339,10 @@ class NgtsMeshReflectorMaterial {
         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);
@@ -339,162 +361,59 @@ class NgtsMeshReflectorMaterial {
         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.1.7", ngImport: i0, type: NgtsMeshReflectorMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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()"
-		>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsMeshReflectorMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsMeshReflectorMaterial, isStandalone: true, selector: "ngts-mesh-reflector-material", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "materialRef", first: true, predicate: ["material"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-primitive #material *args="[material()]" [attach]="attach()">
 			<ng-content />
-		</ngt-mesh-reflector-material>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+		</ngt-primitive>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsMeshReflectorMaterial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsMeshReflectorMaterial, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-mesh-reflector-material',
                     standalone: true,
                     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()"
-		>
+		<ngt-primitive #material *args="[material()]" [attach]="attach()">
 			<ng-content />
-		</ngt-mesh-reflector-material>
+		</ngt-primitive>
 	`,
-                    imports: [NgIf, NgtKey],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { materialRef: [{
-                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' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-extend({ MeshRefractionMaterial });
-const isCubeTexture = (def) => def && def.isCubeTexture;
+const defaultOptions$2 = {
+    bounces: 2,
+    ior: 2.4,
+    fresnel: 0,
+    aberrationStrength: 0,
+    color: 'white',
+    fastChroma: true,
+};
+function isCubeTexture(def) {
+    return def && def.isCubeTexture;
+}
 class NgtsMeshRefractionMaterial {
-    /** Environment map */
-    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.inputs.set({ bounces });
-    }
-    /** Refraction index, 2.4 */
-    set _ior(ior) {
-        this.inputs.set({ ior });
-    }
-    /** Fresnel (strip light), 0 */
-    set _fresnel(fresnel) {
-        this.inputs.set({ fresnel });
-    }
-    /** RGB shift intensity, can be expensive, 0 */
-    set _aberrationStrength(aberrationStrength) {
-        this.inputs.set({ aberrationStrength });
-    }
-    /** Color, white */
-    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.inputs.set({ fastChroma });
-    }
     constructor() {
-        this.inputs = signalStore({ aberrationStrength: 0, fastChroma: true });
-        this.materialRef = injectNgtRef();
-        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.envMap = input.required();
+        this.attach = input('material');
+        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
+        this.parameters = omit(this.options, ['fastChroma', 'aberrationStrength']);
+        this.fastChroma = pick(this.options, 'fastChroma');
+        this.aberrationStrength = pick(this.options, 'aberrationStrength');
+        this.materialRef = viewChild('material');
+        this.store = injectStore();
         this.size = this.store.select('size');
+        this.resolution = computed(() => [this.size().width, this.size().height]);
         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 [envMap, aberrationStrength, fastChroma] = [
+                untracked(this.envMap),
+                this.aberrationStrength(),
+                this.fastChroma(),
+            ];
             const isCubeMap = isCubeTexture(envMap);
             const w = (isCubeMap ? envMap.image[0]?.width : envMap.image.width) ?? 1024;
             const cubeSize = w / 4;
@@ -514,484 +433,344 @@ class NgtsMeshRefractionMaterial {
                 temp['FAST_CHROMA'] = '';
             return temp;
         });
-        this.resolution = computed(() => [this.size().width, this.size().height]);
+        this.defineKeys = computed(() => {
+            return Object.keys(this.defines()).join(' ');
+        });
+        this.material = computed(() => {
+            const prevMaterial = untracked(this.materialRef)?.nativeElement;
+            if (prevMaterial) {
+                prevMaterial.dispose();
+                delete prevMaterial['__ngt__'];
+                delete prevMaterial['__ngt_renderer__'];
+            }
+            // track by this.defineKeys
+            this.defineKeys();
+            return new MeshRefractionMaterial();
+        });
+        const autoEffect = injectAutoEffect();
+        afterNextRender(() => {
+            autoEffect(() => {
+                const material = this.materialRef()?.nativeElement;
+                if (!material)
+                    return;
+                const localState = getLocalState(material);
+                if (!localState)
+                    return;
+                const parent = untracked(localState.parent);
+                const geometry = parent.geometry;
+                if (geometry) {
+                    material.bvh = new MeshBVHUniformStruct();
+                    material.bvh.updateFrom(new MeshBVH(geometry.clone().toNonIndexed(), { strategy: SAH }));
+                }
+            });
+        });
         injectBeforeRender(({ camera }) => {
-            const material = this.materialRef.nativeElement;
+            const material = this.materialRef()?.nativeElement;
             if (material) {
                 material.viewMatrixInverse = camera.matrixWorld;
                 material.projectionMatrixInverse = camera.projectionMatrixInverse;
             }
         });
-        this.setupGeometry();
-    }
-    setupGeometry() {
-        effect(() => {
-            const material = this.materialRef.nativeElement;
-            if (!material)
-                return;
-            const geometry = getLocalState(material).parent?.()?.geometry;
-            if (geometry) {
-                material.bvh = new MeshBVHUniformStruct();
-                material.bvh.updateFrom(new MeshBVH(geometry.clone().toNonIndexed(), { lazyGeneration: false, strategy: SAH }));
+        inject(DestroyRef).onDestroy(() => {
+            const material = this.materialRef()?.nativeElement;
+            if (material) {
+                material.dispose();
+                delete material['__ngt__'];
+                delete material['__ngt_renderer__'];
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsMeshRefractionMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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()"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsMeshRefractionMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsMeshRefractionMaterial, isStandalone: true, selector: "ngts-mesh-refraction-material", inputs: { envMap: { classPropertyName: "envMap", publicName: "envMap", isSignal: true, isRequired: true, transformFunction: null }, attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "materialRef", first: true, predicate: ["material"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-primitive
+			*args="[material()]"
+			#material
+			[attach]="attach()"
+			[parameters]="parameters()"
 			[envMap]="envMap()"
-			[bounces]="bounces()"
-			[ior]="ior()"
-			[fresnel]="fresnel()"
-			[color]="color()"
-			[fastChroma]="fastChroma()"
-			ngtCompound
-			attach="material"
+			[aberrationStrength]="aberrationStrength()"
+			[resolution]="resolution()"
+			[defines]="defines()"
 		>
 			<ng-content />
-		</ngt-mesh-refraction-material>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+		</ngt-primitive>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsMeshRefractionMaterial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsMeshRefractionMaterial, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-mesh-refraction-material',
                     standalone: true,
                     template: `
-		<ngt-mesh-refraction-material
-			*ngIf="defines() as defines"
-			[key]="defines"
-			[ref]="materialRef"
-			[defines]="defines"
-			[resolution]="resolution()"
-			[aberrationStrength]="aberrationStrength()"
+		<ngt-primitive
+			*args="[material()]"
+			#material
+			[attach]="attach()"
+			[parameters]="parameters()"
 			[envMap]="envMap()"
-			[bounces]="bounces()"
-			[ior]="ior()"
-			[fresnel]="fresnel()"
-			[color]="color()"
-			[fastChroma]="fastChroma()"
-			ngtCompound
-			attach="material"
+			[aberrationStrength]="aberrationStrength()"
+			[resolution]="resolution()"
+			[defines]="defines()"
 		>
 			<ng-content />
-		</ngt-mesh-refraction-material>
+		</ngt-primitive>
 	`,
-                    imports: [NgIf, NgtKey],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { materialRef: [{
-                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' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-extend({ MeshTransmissionMaterial });
-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.inputs.set({ transmissionSampler });
-    }
-    /** Render the backside of the material (more cost, better results), default: false */
-    set _backside(backside) {
-        this.inputs.set({ backside });
-    }
-    /** Backside thickness (when backside is true), default: 0 */
-    set _backsideThickness(backsideThickness) {
-        this.inputs.set({ backsideThickness });
-    }
-    /** Resolution of the local buffer, default: undefined (fullscreen) */
-    set _resolution(resolution) {
-        this.inputs.set({ resolution });
-    }
-    /** Resolution of the local buffer for backfaces, default: undefined (fullscreen) */
-    set _backsideResolution(backsideResolution) {
-        this.inputs.set({ backsideResolution });
-    }
-    /** Refraction samples, default: 10 */
-    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.inputs.set({ background });
-    }
-    /* Transmission, default: 1 */
-    set _transmission(transmission) {
-        this.inputs.set({ transmission });
-    }
-    /* Thickness (refraction), default: 0 */
-    set _thickness(thickness) {
-        this.inputs.set({ thickness });
-    }
-    /* Roughness (blur), default: 0 */
-    set _roughness(roughness) {
-        this.inputs.set({ roughness });
-    }
-    /* Chromatic aberration, default: 0.03 */
-    set _chromaticAberration(chromaticAberration) {
-        this.inputs.set({ chromaticAberration });
-    }
-    /* Anisotropy, default: 0.1 */
-    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.inputs.set({ distortion });
-    }
-    /* Distortion scale, default: 0.5 */
-    set _distortionScale(distortionScale) {
-        this.inputs.set({ distortionScale });
-    }
-    /* Temporal distortion (speed of movement), default: 0.0 */
-    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.inputs.set({ buffer });
-    }
-    /** Internals */
-    set _time(time) {
-        this.inputs.set({ time });
-    }
+const defaultOptions$1 = {
+    transmissionSampler: false,
+    backside: false,
+    side: FrontSide,
+    transmission: 1,
+    thickness: 0,
+    backsideThickness: 0,
+    backsideEnvMapIntensity: 1,
+    samples: 10,
+};
+class NgtsMeshTransmissionMaterial {
     constructor() {
-        this.inputs = signalStore({
-            transmissionSampler: false,
-            backside: false,
-            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,
+        this.attach = input('material');
+        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
+        this.parameters = omit(this.options, [
+            'buffer',
+            'transmissionSampler',
+            'backside',
+            'side',
+            'transmission',
+            'thickness',
+            'backsideThickness',
+            'backsideEnvMapIntensity',
+            'samples',
+            'resolution',
+            'backsideResolution',
+            'background',
+            'anisotropy',
+            'anisotropicBlur',
+        ]);
+        this.resolution = pick(this.options, 'resolution');
+        this.backsideResolution = pick(this.options, 'backsideResolution');
+        this.samples = pick(this.options, 'samples');
+        this.buffer = pick(this.options, 'buffer');
+        this.anisotropy = pick(this.options, 'anisotropy');
+        this.anisotropicBlur = pick(this.options, 'anisotropicBlur');
+        this.background = pick(this.options, 'background');
+        this.backside = pick(this.options, 'backside');
+        this.backsideThickness = pick(this.options, 'backsideThickness');
+        this.backsideEnvMapIntensity = pick(this.options, 'backsideEnvMapIntensity');
+        this.transmissionSampler = pick(this.options, 'transmissionSampler');
+        this.transmission = pick(this.options, 'transmission');
+        this.thickness = pick(this.options, 'thickness');
+        this.side = pick(this.options, 'side');
+        this.materialRef = viewChild('material');
+        this.backResolution = computed(() => this.backsideResolution() || this.resolution());
+        this.fboBack = injectFBO(() => ({ width: this.backResolution() }));
+        this.fboMain = injectFBO(() => ({ width: this.resolution() }));
+        this.bufferTexture = computed(() => this.buffer() || this.fboMain().texture);
+        this.anisotropicBlurOption = computed(() => this.anisotropicBlur() || this.anisotropy());
+        this.discardMaterial = new MeshDiscardMaterial();
+        this.material = computed(() => {
+            const previousMaterial = untracked(this.materialRef)?.nativeElement;
+            if (previousMaterial) {
+                previousMaterial.dispose();
+                delete previousMaterial['__ngt__'];
+                delete previousMaterial['__ngt_renderer__'];
+            }
+            const [samples, transmissionSampler] = [this.samples(), this.transmissionSampler()];
+            return new MeshTransmissionMaterial({ samples, transmissionSampler });
+        });
+        inject(DestroyRef).onDestroy(() => {
+            const material = this.materialRef()?.nativeElement;
+            if (material) {
+                material.dispose();
+                delete material['__ngt__'];
+                delete material['__ngt_renderer__'];
+            }
         });
-        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.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 oldEnvMapIntensity;
         let oldTone;
         let parent;
-        injectBeforeRender((state) => {
-            if (!this.materialRef.nativeElement)
+        injectBeforeRender(({ clock, gl, scene, camera }) => {
+            const material = this.materialRef()?.nativeElement;
+            if (!material)
                 return;
-            const { transmissionSampler, background, backside, backsideThickness, thickness } = this.inputs.get();
-            this.materialRef.nativeElement.time = state.clock.getElapsedTime();
+            const [fboMain, fboBack, transmissionSampler, background, backside, backsideThickness, backsideEnvMapIntensity, thickness, side,] = [
+                this.fboMain(),
+                this.fboBack(),
+                this.transmissionSampler(),
+                this.background(),
+                this.backside(),
+                this.backsideThickness(),
+                this.backsideEnvMapIntensity(),
+                this.thickness(),
+                this.side(),
+            ];
+            material.time = clock.getElapsedTime();
             // Render only if the buffer matches the built-in and no transmission sampler is set
-            if (this.materialRef.nativeElement.buffer === this.fboMainRef.nativeElement?.texture &&
-                !transmissionSampler) {
-                parent = getLocalState(this.materialRef.nativeElement).parent?.();
+            // @ts-expect-error - we know material.buffer is not just undefined | null
+            if (material.buffer === fboMain.texture && !transmissionSampler) {
+                parent = getLocalState(material)?.parent();
                 if (parent) {
                     // Save defaults
-                    oldTone = state.gl.toneMapping;
-                    oldBg = state.scene.background;
+                    oldTone = gl.toneMapping;
+                    oldBg = scene.background;
+                    oldEnvMapIntensity = material.envMapIntensity;
                     // Switch off tonemapping lest it double tone maps
                     // Save the current background and set the HDR as the new BG
                     // Use discardmaterial, the parent will be invisible, but it's shadows will still be cast
-                    state.gl.toneMapping = THREE.NoToneMapping;
+                    gl.toneMapping = NoToneMapping;
                     if (background)
-                        state.scene.background = background;
-                    parent['material'] = this.discardMaterial;
+                        scene.background = background;
+                    parent.material = this.discardMaterial;
                     if (backside) {
                         // Render into the backside buffer
-                        state.gl.setRenderTarget(this.fboBackRef.nativeElement);
-                        state.gl.render(state.scene, state.camera);
+                        gl.setRenderTarget(fboBack);
+                        gl.render(scene, 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'].thickness = backsideThickness;
-                        parent['material'].side = THREE.BackSide;
+                        parent.material = material;
+                        Object.assign(parent.material, {
+                            buffer: fboBack.texture,
+                            thickness: backsideThickness,
+                            side: BackSide,
+                            envMapIntensity: backsideEnvMapIntensity,
+                        });
                     }
                     // Render into the main buffer
-                    state.gl.setRenderTarget(this.fboMainRef.nativeElement);
-                    state.gl.render(state.scene, state.camera);
-                    parent['material'].thickness = thickness;
-                    parent['material'].side = this.side;
-                    parent['material'].buffer = this.fboMainRef.nativeElement?.texture;
+                    gl.setRenderTarget(fboMain);
+                    gl.render(scene, camera);
+                    parent.material = material;
+                    Object.assign(parent.material, {
+                        buffer: fboMain.texture,
+                        thickness,
+                        side,
+                        envMapIntensity: oldEnvMapIntensity,
+                    });
                     // Set old state back
-                    state.scene.background = oldBg;
-                    state.gl.setRenderTarget(null);
-                    parent['material'] = this.materialRef.nativeElement;
-                    state.gl.toneMapping = oldTone;
+                    scene.background = oldBg;
+                    gl.setRenderTarget(null);
+                    gl.toneMapping = oldTone;
                 }
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsMeshTranmissionMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsMeshTransmissionMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.0", type: NgtsMeshTransmissionMaterial, isStandalone: true, selector: "ngts-mesh-transmission-material", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "materialRef", first: true, predicate: ["material"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-primitive
+			*args="[material()]"
+			#material
+			[attach]="attach()"
+			[parameters]="parameters()"
 			[_transmission]="transmission()"
 			[transmission]="transmissionSampler() ? transmission() : 0"
+			[buffer]="bufferTexture()"
+			[anisotropicBlur]="anisotropicBlurOption()"
+			[side]="side()"
 			[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"] }] }); }
+		>
+			<ng-content />
+		</ngt-primitive>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsMeshTranmissionMaterial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsMeshTransmissionMaterial, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngts-mesh-transmission-material',
                     standalone: true,
                     template: `
-		<ngt-mesh-transmission-material
-			ngtCompound
-			*args="[samples(), transmissionSampler()]"
-			[ref]="materialRef"
-			[buffer]="buffer() || fboMainRef.nativeElement?.texture"
+		<ngt-primitive
+			*args="[material()]"
+			#material
+			[attach]="attach()"
+			[parameters]="parameters()"
 			[_transmission]="transmission()"
 			[transmission]="transmissionSampler() ? transmission() : 0"
+			[buffer]="bufferTexture()"
+			[anisotropicBlur]="anisotropicBlurOption()"
+			[side]="side()"
 			[thickness]="thickness()"
-			[side]="side"
-			[anisotropicBlur]="anisotropicBlur() ?? anisotropy()"
-			[roughness]="roughness()"
-			[chromaticAberration]="chromaticAberration()"
-			[distortion]="distortion()"
-			[distortionScale]="distortionScale()"
-			[temporalDistortion]="temporalDistortion()"
-			[time]="time()"
-		/>
+		>
+			<ng-content />
+		</ngt-primitive>
 	`,
-                    imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { materialRef: [{
-                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' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-extend({ MeshWobbleMaterial });
+const defaultOptions = {
+    speed: 1,
+};
 class NgtsMeshWobbleMaterial {
-    set _time(time) {
-        this.inputs.set({ time });
-    }
-    set _factor(factor) {
-        this.inputs.set({ factor });
-    }
-    set _speed(speed) {
-        this.inputs.set({ speed });
-    }
     constructor() {
-        this.inputs = signalStore({ speed: 1, time: 0, factor: 1 });
-        this.materialRef = injectNgtRef();
+        this.attach = input('material');
+        this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+        this.parameters = omit(this.options, ['speed']);
         this.material = new MeshWobbleMaterial();
-        this.time = this.inputs.select('time');
-        this.factor = this.inputs.select('factor');
         injectBeforeRender(({ clock }) => {
-            this.material.time = clock.getElapsedTime() * this.inputs.get('speed');
+            const material = this.material;
+            material.time = clock.elapsedTime * this.options().speed;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsMeshWobbleMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsMeshWobbleMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtsMeshWobbleMaterial, isStandalone: true, selector: "ngts-mesh-wobble-material", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-primitive *args="[material]" [parameters]="parameters()" [attach]="attach()">
+			<ng-content />
+		</ngt-primitive>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsMeshWobbleMaterial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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]="time()"
-			[factor]="factor()"
-			attach="material"
-			ngtCompound
-		/>
+		<ngt-primitive *args="[material]" [parameters]="parameters()" [attach]="attach()">
+			<ng-content />
+		</ngt-primitive>
 	`,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { materialRef: [{
-                type: Input
-            }], _time: [{
-                type: Input,
-                args: [{ alias: 'time' }]
-            }], _factor: [{
-                type: Input,
-                args: [{ alias: 'factor' }]
-            }], _speed: [{
-                type: Input,
-                args: [{ alias: 'speed' }]
-            }] } });
+        }], ctorParameters: () => [] });
 
-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({});
+        this.attach = input('material');
+        this.options = input({});
+        this.material = new PointMaterial(this.options());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPointMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: NgtsPointMaterial, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: NgtsPointMaterial, isStandalone: true, selector: "ngts-point-material", inputs: { attach: { classPropertyName: "attach", publicName: "attach", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-primitive *args="[material]" [attach]="attach()" [parameters]="options()">
+			<ng-content />
+		</ngt-primitive>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgtsPointMaterial, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.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],
+                    template: `
+		<ngt-primitive *args="[material]" [attach]="attach()" [parameters]="options()">
+			<ng-content />
+		</ngt-primitive>
+	`,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs],
                 }]
-        }], propDecorators: { pointMaterialRef: [{
-                type: Input
-            }] } });
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NgtsMeshDistortMaterial, NgtsMeshReflectorMaterial, NgtsMeshRefractionMaterial, NgtsMeshTranmissionMaterial, NgtsMeshWobbleMaterial, NgtsPointMaterial, PointMaterial };
+export { NgtsCustomShaderMaterial, NgtsMeshDistortMaterial, NgtsMeshReflectorMaterial, NgtsMeshRefractionMaterial, NgtsMeshTransmissionMaterial, NgtsMeshWobbleMaterial, NgtsPointMaterial };
 //# sourceMappingURL=angular-three-soba-materials.mjs.map