angular-three-postprocessing 3.7.0 → 4.0.0-next.2

package/fesm2022/angular-three-postprocessing.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
 import { inject, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, input, Directive, Injector, computed, viewChild, effect, untracked } from '@angular/core';
-import { injectStore, pick, extend, getLocalState, injectBeforeRender, NgtArgs, vector2, is, NgtSelection, omit, resolveRef } from 'angular-three';
+import { injectStore, pick, extend, getInstanceState, injectBeforeRender, NgtArgs, vector2, omit, resolveRef, vector3, is, NgtSelection } from 'angular-three';
 import { createNoopInjectionToken } from 'ngxtension/create-injection-token';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { EffectAttribute, EffectComposer, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectPass, Pass, BloomEffect, BlendFunction, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, DepthOfFieldEffect, MaskFunction, DotScreenEffect, FXAAEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, LUT3DEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SepiaEffect, ShockWaveEffect, SMAAEffect, TiltShiftEffect, ToneMappingEffect, VignetteEffect } from 'postprocessing';
-import { HalfFloatType, Group, NoToneMapping, Uniform, Texture, Color, CanvasTexture, RepeatWrapping, NearestFilter, Vector3, Vector2, Mesh } from 'three';
+import * as THREE from 'three';
+import { Group } from 'three';
 import { isWebGL2Available } from 'three-stdlib';
 import { easing } from 'maath';
 
@@ -41,8 +42,8 @@ class NgtpEffect {
         this.blendFunction = input(this.defaultEffectOptions?.blendFunction);
         this.opacity = input(this.defaultEffectOptions?.opacity);
         this.store = injectStore();
-        this.camera = this.store.select('camera');
-        this.invalidate = this.store.select('invalidate');
+        this.camera = this.store.camera;
+        this.invalidate = this.store.invalidate;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.6", type: NgtpEffect, isStandalone: true, inputs: { blendFunction: { classPropertyName: "blendFunction", publicName: "blendFunction", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
@@ -56,7 +57,7 @@ const defaultOptions$4 = {
     renderPriority: 1,
     autoClear: true,
     multisampling: 8,
-    frameBufferType: HalfFloatType,
+    frameBufferType: THREE.HalfFloatType,
 };
 function isConvolution(effect) {
     return (effect.getAttributes() & EffectAttribute.CONVOLUTION) === EffectAttribute.CONVOLUTION;
@@ -66,10 +67,10 @@ class NgtpEffectComposer {
         this.options = input(defaultOptions$4, { transform: mergeInputs(defaultOptions$4) });
         this.injector = inject(Injector);
         this.store = injectStore();
-        this.size = this.store.select('size');
-        this.gl = this.store.select('gl');
-        this.defaultScene = this.store.select('scene');
-        this.defaultCamera = this.store.select('camera');
+        // private size = this.store.select('size');
+        // private gl = this.store.select('gl');
+        // private defaultScene = this.store.select('scene');
+        // private defaultCamera = this.store.select('camera');
         this.depthBuffer = pick(this.options, 'depthBuffer');
         this.stencilBuffer = pick(this.options, 'stencilBuffer');
         this.multisampling = pick(this.options, 'multisampling');
@@ -78,8 +79,8 @@ class NgtpEffectComposer {
         this.resolutionScale = pick(this.options, 'resolutionScale');
         this.enabled = pick(this.options, 'enabled');
         this.renderPriority = pick(this.options, 'renderPriority');
-        this.scene = computed(() => this.options().scene ?? this.defaultScene());
-        this.camera = computed(() => this.options().camera ?? this.defaultCamera());
+        this.scene = computed(() => this.options().scene ?? this.store.scene());
+        this.camera = computed(() => this.options().camera ?? this.store.camera());
         this.groupRef = viewChild.required('group');
         this.priority = computed(() => {
             const enabled = this.enabled();
@@ -90,7 +91,7 @@ class NgtpEffectComposer {
         this.composerData = computed(() => {
             const webGL2Available = isWebGL2Available();
             const [gl, scene, camera, depthBuffer, stencilBuffer, multisampling, frameBufferType, enableNormalPass, resolutionScale,] = [
-                this.gl(),
+                this.store.gl(),
                 this.scene(),
                 this.camera(),
                 this.depthBuffer(),
@@ -127,15 +128,15 @@ class NgtpEffectComposer {
         extend({ Group });
         // NOTE: Disable tone mapping because threejs disallows tonemapping on render targets
         effect((onCleanup) => {
-            const gl = this.gl();
+            const gl = this.store.gl();
             const currentTonemapping = gl.toneMapping;
-            gl.toneMapping = NoToneMapping;
+            gl.toneMapping = THREE.NoToneMapping;
             onCleanup(() => {
                 gl.toneMapping = currentTonemapping;
             });
         });
         effect(() => {
-            const [{ composer }, { width, height }] = [this.composerData(), this.size()];
+            const [{ composer }, width, height] = [this.composerData(), this.store.size.width(), this.store.size.height()];
             if (composer) {
                 composer.setSize(width, height);
             }
@@ -148,10 +149,10 @@ class NgtpEffectComposer {
             ];
             const passes = [];
             if (composer) {
-                const localState = getLocalState(group);
-                if (!localState)
+                const instanceState = getInstanceState(group);
+                if (!instanceState)
                     return;
-                const children = localState.nonObjects();
+                const children = instanceState.nonObjects();
                 for (let i = 0; i < children.length; i++) {
                     const child = children[i];
                     if (child instanceof Effect) {
@@ -195,7 +196,7 @@ class NgtpEffectComposer {
                 const [{ composer }, { enabled, autoClear, stencilBuffer }, gl] = [
                     this.composerData(),
                     this.options(),
-                    this.gl(),
+                    this.store.snapshot.gl,
                 ];
                 if (enabled) {
                     const currentAutoClear = gl.autoClear;
@@ -273,11 +274,11 @@ void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor)
 class ASCIIEffect extends Effect {
     constructor({ font = 'arial', characters = ` .:,'-^=*+?!|0#X%WM@`, fontSize = 54, cellSize = 16, color = '#ffffff', invert = false, } = {}) {
         const uniforms = new Map([
-            ['uCharacters', new Uniform(new Texture())],
-            ['uCellSize', new Uniform(cellSize)],
-            ['uCharactersCount', new Uniform(characters.length)],
-            ['uColor', new Uniform(new Color(color))],
-            ['uInvert', new Uniform(invert)],
+            ['uCharacters', new THREE.Uniform(new THREE.Texture())],
+            ['uCellSize', new THREE.Uniform(cellSize)],
+            ['uCharactersCount', new THREE.Uniform(characters.length)],
+            ['uColor', new THREE.Uniform(new THREE.Color(color))],
+            ['uInvert', new THREE.Uniform(invert)],
         ]);
         super('ASCIIEffect', fragment, { uniforms });
         const charactersTextureUniform = this.uniforms.get('uCharacters');
@@ -292,7 +293,7 @@ class ASCIIEffect extends Effect {
         const MAX_PER_ROW = 16;
         const CELL = SIZE / MAX_PER_ROW;
         canvas.width = canvas.height = SIZE;
-        const texture = new CanvasTexture(canvas, undefined, RepeatWrapping, RepeatWrapping, NearestFilter, NearestFilter);
+        const texture = new THREE.CanvasTexture(canvas, undefined, THREE.RepeatWrapping, THREE.RepeatWrapping, THREE.NearestFilter, THREE.NearestFilter);
         const context = canvas.getContext('2d');
         if (!context) {
             throw new Error('Context not available');
@@ -347,11 +348,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-extend({ BloomEffect });
 class NgtpBloom {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ BloomEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpBloom, isStandalone: true, selector: "ngtp-bloom", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -377,13 +378,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-extend({ BrightnessContrastEffect });
 class NgtpBrightnessContrast {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ BrightnessContrastEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpBrightnessContrast, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpBrightnessContrast, isStandalone: true, selector: "ngtp-brightness-contrast", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -408,13 +409,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-extend({ ChromaticAberrationEffect });
 class NgtpChromaticAberration {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ ChromaticAberrationEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpChromaticAberration, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpChromaticAberration, isStandalone: true, selector: "ngtp-chromatic-aberration", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -439,12 +440,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-extend({ ColorAverageEffect });
 class NgtpColorAverage {
     constructor() {
         this.options = input({ blendFunction: BlendFunction.NORMAL }, { transform: mergeInputs({ blendFunction: BlendFunction.NORMAL }) });
+        extend({ ColorAverageEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpColorAverage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpColorAverage, isStandalone: true, selector: "ngtp-color-average", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
@@ -466,13 +467,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-extend({ ColorDepthEffect });
 class NgtpColorDepth {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ ColorDepthEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpColorDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpColorDepth, isStandalone: true, selector: "ngtp-color-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -497,13 +498,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-extend({ DepthEffect });
 class NgtpDepth {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ DepthEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpDepth, isStandalone: true, selector: "ngtp-depth", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -528,19 +529,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class NgtpDepthOfField {
     constructor() {
         this.options = input({});
-        this.autoFocus = computed(() => this.options().target != null);
         this.effectComposer = inject(NgtpEffectComposer);
         this.effect = computed(() => {
-            const [camera, options, autoFocus] = [this.effectComposer.camera(), this.options(), this.autoFocus()];
+            const [camera, options] = [this.effectComposer.camera(), this.options()];
+            const autoFocus = options.target != null;
             const effect = new DepthOfFieldEffect(camera, options);
-            // Creating a target enables autofocus, R3F will set via props
+            // Creating a target enables autofocus, NGT will set via props
             if (autoFocus)
-                effect.target = new Vector3();
+                effect.target = new THREE.Vector3();
             // Depth texture for depth picking with optional packing strategy
             if (options.depthTexture) {
                 effect.setDepthTexture(options.depthTexture.texture, options.depthTexture.packing);
@@ -573,11 +574,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-extend({ DotScreenEffect });
 class NgtpDotScreen {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ DotScreenEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpDotScreen, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpDotScreen, isStandalone: true, selector: "ngtp-dot-screen", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -602,13 +603,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-extend({ FXAAEffect });
 class NgtpFXAA {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ FXAAEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpFXAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpFXAA, isStandalone: true, selector: "ngtp-fxaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -633,35 +634,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class NgtpGlitch {
     constructor() {
         this.options = input({ active: true }, { transform: mergeInputs({ active: true }) });
         this.active = pick(this.options, 'active');
         this.mode = pick(this.options, 'mode');
+        this.ratio = pick(this.options, 'ratio');
+        this.dtSize = pick(this.options, 'dtSize');
+        this.columns = pick(this.options, 'columns');
+        this.blendFunction = pick(this.options, 'blendFunction');
+        this.perturbationMap = pick(this.options, 'perturbationMap');
         this.delay = vector2(this.options, 'delay');
         this.duration = vector2(this.options, 'duration');
         this.chromaticAberrationOffset = vector2(this.options, 'chromaticAberrationOffset');
         this.strength = vector2(this.options, 'strength');
         this.store = injectStore();
-        this.invalidate = this.store.select('invalidate');
-        this.effect = computed(() => {
-            const [{ ratio, dtSize, columns, blendFunction, perturbationMap }, delay, duration, chromaticAberrationOffset, strength,] = [this.options(), this.delay(), this.duration(), this.chromaticAberrationOffset(), this.strength()];
-            return new GlitchEffect({
-                ratio,
-                dtSize,
-                columns,
-                blendFunction,
-                perturbationMap,
-                delay,
-                duration,
-                chromaticAberrationOffset,
-                strength,
-            });
-        });
+        this.effect = computed(() => new GlitchEffect({
+            ratio: this.ratio(),
+            dtSize: this.dtSize(),
+            columns: this.columns(),
+            blendFunction: this.blendFunction(),
+            perturbationMap: this.perturbationMap(),
+            delay: this.delay(),
+            duration: this.duration(),
+            chromaticAberrationOffset: this.chromaticAberrationOffset(),
+            strength: this.strength(),
+        }));
         effect(() => {
-            const [glitchEffect, invalidate, mode, active] = [this.effect(), this.invalidate(), this.mode(), this.active()];
+            const [glitchEffect, invalidate, mode, active] = [
+                this.effect(),
+                this.store.invalidate(),
+                this.mode(),
+                this.active(),
+            ];
             glitchEffect.mode = active ? mode || GlitchMode.SPORADIC : GlitchMode.DISABLED;
             invalidate();
         });
@@ -692,13 +699,24 @@ class NgtpGodRays {
     constructor() {
         this.options = input({});
         this.effectComposer = inject(NgtpEffectComposer);
+        this.effectOptions = omit(this.options, ['sun']);
+        this.sun = pick(this.options, 'sun');
+        this.sunElement = computed(() => {
+            const sun = this.sun();
+            if (typeof sun === 'function')
+                return resolveRef(sun());
+            return resolveRef(sun);
+        });
         this.effect = computed(() => {
-            const [camera, { sun, ...options }] = [this.effectComposer.camera(), this.options()];
-            return new GodRaysEffect(camera, is.ref(sun) ? sun.nativeElement : sun, options);
+            const [camera, sunElement, options] = [this.effectComposer.camera(), this.sunElement(), this.effectOptions()];
+            return new GodRaysEffect(camera, sunElement, options);
         });
         effect(() => {
-            const [sun, godRaysEffect] = [this.options().sun, this.effect()];
-            godRaysEffect.lightSource = is.ref(sun) ? sun.nativeElement : sun;
+            const sunElement = this.sunElement();
+            if (!sunElement)
+                return;
+            const godRaysEffect = this.effect();
+            godRaysEffect.lightSource = sunElement;
         });
         effect((onCleanup) => {
             const effect = this.effect();
@@ -726,11 +744,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 class NgtpGrid {
     constructor() {
         this.options = input({});
+        this.effectOptions = omit(this.options, ['size']);
         this.size = pick(this.options, 'size');
-        this.effect = computed(() => {
-            const { size: _, ...options } = this.options();
-            return new GridEffect(options);
-        });
+        this.effect = computed(() => new GridEffect(this.effectOptions()));
         effect(() => {
             const [size, effect] = [this.size(), this.effect()];
             if (size) {
@@ -760,11 +776,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-extend({ HueSaturationEffect });
 class NgtpHueSaturation {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ HueSaturationEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpHueSaturation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpHueSaturation, isStandalone: true, selector: "ngtp-hue-saturation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -789,7 +805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 // Created by Anderson Mancini 2023
 // React Three Fiber Ultimate LensFlare
@@ -841,29 +857,29 @@ const LensFlareShader = {
 `,
 };
 class LensFlareEffect extends Effect {
-    constructor({ blendFunction = BlendFunction.NORMAL, enabled = true, glareSize = 0.2, lensPosition = [0.01, 0.01], iResolution = [0, 0], starPoints = 6, flareSize = 0.01, flareSpeed = 0.01, flareShape = 0.01, animated = true, anamorphic = false, colorGain = new Color(20, 20, 20), lensDirtTexture = null, haloScale = 0.5, secondaryGhosts = true, aditionalStreaks = true, ghostScale = 0.0, opacity = 1.0, starBurst = false, } = {}) {
+    constructor({ blendFunction = BlendFunction.NORMAL, enabled = true, glareSize = 0.2, lensPosition = [0.01, 0.01], iResolution = [0, 0], starPoints = 6, flareSize = 0.01, flareSpeed = 0.01, flareShape = 0.01, animated = true, anamorphic = false, colorGain = new THREE.Color(20, 20, 20), lensDirtTexture = null, haloScale = 0.5, secondaryGhosts = true, aditionalStreaks = true, ghostScale = 0.0, opacity = 1.0, starBurst = false, } = {}) {
         super('LensFlareEffect', LensFlareShader.fragmentShader, {
             blendFunction,
             uniforms: new Map([
-                ['enabled', new Uniform(enabled)],
-                ['glareSize', new Uniform(glareSize)],
-                ['lensPosition', new Uniform(lensPosition)],
-                ['iTime', new Uniform(0)],
-                ['iResolution', new Uniform(iResolution)],
-                ['starPoints', new Uniform(starPoints)],
-                ['flareSize', new Uniform(flareSize)],
-                ['flareSpeed', new Uniform(flareSpeed)],
-                ['flareShape', new Uniform(flareShape)],
-                ['animated', new Uniform(animated)],
-                ['anamorphic', new Uniform(anamorphic)],
-                ['colorGain', new Uniform(colorGain)],
-                ['lensDirtTexture', new Uniform(lensDirtTexture)],
-                ['haloScale', new Uniform(haloScale)],
-                ['secondaryGhosts', new Uniform(secondaryGhosts)],
-                ['aditionalStreaks', new Uniform(aditionalStreaks)],
-                ['ghostScale', new Uniform(ghostScale)],
-                ['starBurst', new Uniform(starBurst)],
-                ['opacity', new Uniform(opacity)],
+                ['enabled', new THREE.Uniform(enabled)],
+                ['glareSize', new THREE.Uniform(glareSize)],
+                ['lensPosition', new THREE.Uniform(lensPosition)],
+                ['iTime', new THREE.Uniform(0)],
+                ['iResolution', new THREE.Uniform(iResolution)],
+                ['starPoints', new THREE.Uniform(starPoints)],
+                ['flareSize', new THREE.Uniform(flareSize)],
+                ['flareSpeed', new THREE.Uniform(flareSpeed)],
+                ['flareShape', new THREE.Uniform(flareShape)],
+                ['animated', new THREE.Uniform(animated)],
+                ['anamorphic', new THREE.Uniform(anamorphic)],
+                ['colorGain', new THREE.Uniform(colorGain)],
+                ['lensDirtTexture', new THREE.Uniform(lensDirtTexture)],
+                ['haloScale', new THREE.Uniform(haloScale)],
+                ['secondaryGhosts', new THREE.Uniform(secondaryGhosts)],
+                ['aditionalStreaks', new THREE.Uniform(aditionalStreaks)],
+                ['ghostScale', new THREE.Uniform(ghostScale)],
+                ['starBurst', new THREE.Uniform(starBurst)],
+                ['opacity', new THREE.Uniform(opacity)],
             ]),
         });
     }
@@ -875,7 +891,7 @@ class LensFlareEffect extends Effect {
     }
 }
 const defaultOptions$2 = {
-    position: new Vector3(-25, 6, -60),
+    position: new THREE.Vector3(-25, 6, -60),
     followMouse: false,
     smoothTime: 0.7,
 };
@@ -883,22 +899,22 @@ class NgtpLensFlare {
     constructor() {
         this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
         this.store = injectStore();
-        this.viewport = this.store.select('viewport');
-        this.raycaster = this.store.select('raycaster');
-        this.pointer = this.store.select('pointer');
         this.effectComposer = inject(NgtpEffectComposer);
-        this.projectedPosition = new Vector3();
-        this.mouse2d = new Vector2();
-        this.effect = computed(() => {
-            const { position: _, followMouse: __, smoothTime: ___, ...options } = this.options();
-            return new LensFlareEffect(options);
-        });
+        this.effectOptions = omit(this.options, ['position', 'followMouse', 'smoothTime']);
+        this.position = vector3(this.options, 'position');
+        this.projectedPosition = new THREE.Vector3();
+        this.mouse2d = new THREE.Vector2();
+        this.effect = computed(() => new LensFlareEffect(this.effectOptions()));
         effect(() => {
-            const [lensFlareEffect, viewport] = [this.effect(), this.viewport()];
+            const [lensFlareEffect, width, height] = [
+                this.effect(),
+                this.store.viewport.width(),
+                this.store.viewport.height(),
+            ];
             const iResolution = lensFlareEffect.uniforms.get('iResolution');
             if (iResolution) {
-                iResolution.value.x = viewport.width;
-                iResolution.value.y = viewport.height;
+                iResolution.value.x = width;
+                iResolution.value.y = height;
             }
         });
         effect((onCleanup) => {
@@ -909,12 +925,13 @@ class NgtpLensFlare {
             const [effect] = [this.effect()];
             if (!effect)
                 return;
-            const [{ followMouse, position, smoothTime }, pointer, camera, scene, raycaster] = [
+            const [{ followMouse, smoothTime }, position, pointer, camera, scene, raycaster] = [
                 this.options(),
-                this.pointer(),
+                this.position(),
+                this.store.snapshot.pointer,
                 this.effectComposer.camera(),
                 this.effectComposer.scene(),
-                this.raycaster(),
+                this.store.snapshot.raycaster,
             ];
             const uLensPosition = effect.uniforms.get('lensPosition');
             const uOpacity = effect.uniforms.get('opacity');
@@ -940,12 +957,14 @@ class NgtpLensFlare {
                     if (object.userData?.['lensflare'] === 'no-occlusion') {
                         target = 0;
                     }
-                    else if (object instanceof Mesh) {
-                        if (object.material.uniforms?._transmission?.value > 0.2) {
+                    else if (is.three(object, 'isMesh')) {
+                        if (object.material.uniforms?.['_transmission']?.value > 0.2) {
                             //Check for MeshTransmissionMaterial
                             target = 0.2;
                         }
-                        else if (object.material._transmission && object.material._transmission > 0.2) {
+                        else if ('_transmission' in object.material &&
+                            typeof object.material._transmission === 'number' &&
+                            object.material._transmission > 0.2) {
                             //Check for MeshPhysicalMaterial with transmission setting
                             target = 0.2;
                         }
@@ -981,17 +1000,18 @@ class NgtpLUT {
     constructor() {
         this.options = input({});
         this.lut = pick(this.options, 'lut');
+        this.tetrahedralInterpolation = pick(this.options, 'tetrahedralInterpolation');
         this.store = injectStore();
-        this.invalidate = this.store.select('invalidate');
         this.effect = computed(() => {
-            const [lut, { lut: _, ...options }] = [this.lut(), this.options()];
+            const { lut, ...options } = this.options();
             return new LUT3DEffect(lut, options);
         });
         effect(() => {
-            const [effect, { lut, tetrahedralInterpolation }, invalidate] = [
+            const [effect, lut, tetrahedralInterpolation, invalidate] = [
                 this.effect(),
-                this.options(),
-                this.invalidate(),
+                this.lut(),
+                this.tetrahedralInterpolation(),
+                this.store.invalidate(),
             ];
             if (tetrahedralInterpolation)
                 effect.tetrahedralInterpolation = tetrahedralInterpolation;
@@ -1022,11 +1042,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-extend({ NoiseEffect });
 class NgtpNoise {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ NoiseEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpNoise, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpNoise, isStandalone: true, selector: "ngtp-noise", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.COLOR_DODGE })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -1052,7 +1072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.COLOR_DODGE })],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const defaultOptions$1 = {
     selectionLayer: 10,
@@ -1063,7 +1083,6 @@ class NgtpOutline {
         this.ngtSelection = inject(NgtSelection, { optional: true });
         this.effectComposer = inject(NgtpEffectComposer);
         this.store = injectStore();
-        this.invalidate = this.store.select('invalidate');
         this.selection = pick(this.options, 'selection');
         this.selectionLayer = pick(this.options, 'selectionLayer');
         this.blendFunction = pick(this.options, 'blendFunction');
@@ -1127,7 +1146,7 @@ class NgtpOutline {
             onCleanup(() => effect.dispose());
         });
         effect(() => {
-            const [effect, invalidate, selectionLayer] = [this.effect(), this.invalidate(), this.selectionLayer()];
+            const [effect, invalidate, selectionLayer] = [this.effect(), this.store.invalidate(), this.selectionLayer()];
             effect.selectionLayer = selectionLayer;
             invalidate();
         });
@@ -1138,7 +1157,7 @@ class NgtpOutline {
                 if (this.selection() === undefined) {
                     throw new Error('[NGT PostProcessing]: ngtp-outline requires selection input or use NgtSelection');
                 }
-                const cleanup = this.handleSelectionChangeEffect(this.selection, this.effect, this.invalidate);
+                const cleanup = this.handleSelectionChangeEffect(this.selection, this.effect, this.store.invalidate);
                 onCleanup(() => {
                     cleanup?.();
                 });
@@ -1148,7 +1167,7 @@ class NgtpOutline {
             const selectionEnabled = this.ngtSelection.enabled();
             if (!selectionEnabled)
                 return;
-            const cleanup = this.handleSelectionChangeEffect(this.ngtSelection.selected, this.effect, this.invalidate);
+            const cleanup = this.handleSelectionChangeEffect(this.ngtSelection.selected, this.effect, this.store.invalidate);
             onCleanup(() => {
                 cleanup?.();
             });
@@ -1221,14 +1240,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-extend({ ScanlineEffect });
 const defaultOptions = {
     density: 1.25,
 };
 class NgtpScanline {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ ScanlineEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpScanline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpScanline, isStandalone: true, selector: "ngtp-scanline", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.OVERLAY })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -1254,13 +1273,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.OVERLAY })],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-extend({ SepiaEffect });
 class NgtpSepia {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ SepiaEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpSepia, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpSepia, isStandalone: true, selector: "ngtp-sepia", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -1285,13 +1304,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-extend({ ShockWaveEffect });
 class NgtpShockWave {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ ShockWaveEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpShockWave, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpShockWave, isStandalone: true, selector: "ngtp-shock-wave", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -1316,13 +1335,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-extend({ SMAAEffect });
 class NgtpSMAA {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ SMAAEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpSMAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpSMAA, isStandalone: true, selector: "ngtp-smaa", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -1347,13 +1366,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-extend({ TiltShiftEffect });
 class NgtpTiltShift {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ TiltShiftEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpTiltShift, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpTiltShift, isStandalone: true, selector: "ngtp-tilt-shift", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -1379,7 +1398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const TiltShiftShader = {
     fragmentShader: /* language=glsl glsl */ `
@@ -1452,12 +1471,12 @@ class TiltShift2Effect extends Effect {
             blendFunction,
             attributes: EffectAttribute.CONVOLUTION,
             uniforms: new Map([
-                ['blur', new Uniform(blur)],
-                ['taper', new Uniform(taper)],
-                ['start', new Uniform(start)],
-                ['end', new Uniform(end)],
-                ['samples', new Uniform(samples)],
-                ['direction', new Uniform(direction)],
+                ['blur', new THREE.Uniform(blur)],
+                ['taper', new THREE.Uniform(taper)],
+                ['start', new THREE.Uniform(start)],
+                ['end', new THREE.Uniform(end)],
+                ['samples', new THREE.Uniform(samples)],
+                ['direction', new THREE.Uniform(direction)],
             ]),
         });
     }
@@ -1465,8 +1484,8 @@ class TiltShift2Effect extends Effect {
 extend({ TiltShift2Effect });
 class NgtpTiltShift2 {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpTiltShift2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpTiltShift2, isStandalone: true, selector: "ngtp-tilt-shift2", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -1494,11 +1513,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }] });
 
-extend({ ToneMappingEffect });
 class NgtpToneMapping {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ ToneMappingEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpToneMapping, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpToneMapping, isStandalone: true, selector: "ngtp-tone-mapping", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -1523,13 +1542,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-extend({ VignetteEffect });
 class NgtpVignette {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ VignetteEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpVignette, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpVignette, isStandalone: true, selector: "ngtp-vignette", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -1554,7 +1573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const WaterShader = {
     fragmentShader: /* language=glsl glsl */ `
@@ -1576,15 +1595,15 @@ class WaterEffect extends Effect {
         super('WaterEffect', WaterShader.fragmentShader, {
             blendFunction,
             attributes: EffectAttribute.CONVOLUTION,
-            uniforms: new Map([['factor', new Uniform(factor)]]),
+            uniforms: new Map([['factor', new THREE.Uniform(factor)]]),
         });
     }
 }
-extend({ WaterEffect });
 class NgtpWater {
     constructor() {
-        this.effect = inject(NgtpEffect, { host: true });
         this.options = input({});
+        this.effect = inject(NgtpEffect, { host: true });
+        extend({ WaterEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtpWater, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: NgtpWater, isStandalone: true, selector: "ngtp-water", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })], hostDirectives: [{ directive: NgtpEffect, inputs: ["blendFunction", "blendFunction", "opacity", "opacity"] }], ngImport: i0, template: `
@@ -1610,7 +1629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.