angular-three-postprocessing 3.7.2 → 4.0.0-next.10

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 { 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, SelectiveBloomEffect, SepiaEffect, ShockWaveEffect, SMAAEffect, TiltShiftEffect, ToneMappingEffect, VignetteEffect } from 'postprocessing';
+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.1.4", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", 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 }); }
@@ -51,25 +52,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             type: Directive
         }] });
 
-const defaultOptions$4 = {
+const defaultOptions$5 = {
     enabled: true,
     renderPriority: 1,
     autoClear: true,
     multisampling: 8,
-    frameBufferType: HalfFloatType,
+    frameBufferType: THREE.HalfFloatType,
 };
 function isConvolution(effect) {
     return (effect.getAttributes() & EffectAttribute.CONVOLUTION) === EffectAttribute.CONVOLUTION;
 }
 class NgtpEffectComposer {
     constructor() {
-        this.options = input(defaultOptions$4, { transform: mergeInputs(defaultOptions$4) });
+        this.options = input(defaultOptions$5, { transform: mergeInputs(defaultOptions$5) });
         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');
         this.depthBuffer = pick(this.options, 'depthBuffer');
         this.stencilBuffer = pick(this.options, 'stencilBuffer');
         this.multisampling = pick(this.options, 'multisampling');
@@ -78,8 +75,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 +87,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(),
@@ -124,18 +121,19 @@ class NgtpEffectComposer {
             }
             return { composer, normalPass, downSamplingPass };
         });
+        this.effectComposer = pick(this.composerData, 'composer');
         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 +146,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 +193,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 +271,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 +290,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');
@@ -312,7 +310,7 @@ class ASCIIEffect extends Effect {
         return texture;
     }
 }
-const defaultOptions$3 = {
+const defaultOptions$4 = {
     font: 'arial',
     characters: ` .:,'-^=*+?!|0#X%WM@`,
     fontSize: 54,
@@ -322,7 +320,7 @@ const defaultOptions$3 = {
 };
 class NgtpASCII {
     constructor() {
-        this.options = input(defaultOptions$3, { transform: mergeInputs(defaultOptions$3) });
+        this.options = input(defaultOptions$4, { transform: mergeInputs(defaultOptions$4) });
         this.effect = computed(() => new ASCIIEffect(this.options()));
         effect((onCleanup) => {
             const effect = this.effect();
@@ -347,11 +345,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +375,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpBrightnessContrast, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +406,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpChromaticAberration, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +437,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpColorAverage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +464,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpColorDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +495,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +526,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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 +571,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpDotScreen, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +600,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpFXAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +631,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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 +696,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 +741,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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 +773,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpHueSaturation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 // Created by Anderson Mancini 2023
 // React Three Fiber Ultimate LensFlare
@@ -841,29 +854,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)],
             ]),
         });
     }
@@ -874,31 +887,31 @@ class LensFlareEffect extends Effect {
         }
     }
 }
-const defaultOptions$2 = {
-    position: new Vector3(-25, 6, -60),
+const defaultOptions$3 = {
+    position: new THREE.Vector3(-25, 6, -60),
     followMouse: false,
     smoothTime: 0.7,
 };
 class NgtpLensFlare {
     constructor() {
-        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
+        this.options = input(defaultOptions$3, { transform: mergeInputs(defaultOptions$3) });
         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 +922,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 +954,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 +997,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 +1039,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpNoise, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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,18 +1069,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.COLOR_DODGE })],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
-const defaultOptions$1 = {
+const defaultOptions$2 = {
     selectionLayer: 10,
 };
 class NgtpOutline {
     constructor() {
-        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
+        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
         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 +1143,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 +1154,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 +1164,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 +1237,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-extend({ ScanlineEffect });
-const defaultOptions = {
+const defaultOptions$1 = {
     density: 1.25,
 };
 class NgtpScanline {
     constructor() {
+        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
         this.effect = inject(NgtpEffect, { host: true });
-        this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+        extend({ ScanlineEffect });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpScanline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +1270,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.OVERLAY })],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
+
+// const addLight = (light: Object3D, effect: SelectiveBloomEffect) => light.layers.enable(effect.selection.layer)
+// const removeLight = (light: Object3D, effect: SelectiveBloomEffect) => light.layers.disable(effect.selection.layer)
+const defaultOptions = {
+    selectionLayer: 10,
+    inverted: false,
+    ignoreBackground: false,
+};
+class NgtpSelectiveBloom {
+    constructor() {
+        this.lights = input.required();
+        this.selection = input([]);
+        this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
+        this.blendFunction = pick(this.options, 'blendFunction');
+        this.luminanceThreshold = pick(this.options, 'luminanceThreshold');
+        this.luminanceSmoothing = pick(this.options, 'luminanceSmoothing');
+        this.mipmapBlur = pick(this.options, 'mipmapBlur');
+        this.intensity = pick(this.options, 'intensity');
+        this.radius = pick(this.options, 'radius');
+        this.levels = pick(this.options, 'levels');
+        this.kernelSize = pick(this.options, 'kernelSize');
+        this.resolutionScale = pick(this.options, 'resolutionScale');
+        this.width = pick(this.options, 'width');
+        this.height = pick(this.options, 'height');
+        this.resolutionX = pick(this.options, 'resolutionX');
+        this.resolutionY = pick(this.options, 'resolutionY');
+        this.inverted = pick(this.options, 'inverted');
+        this.ignoreBackground = pick(this.options, 'ignoreBackground');
+        this.selectionLayer = pick(this.options, 'selectionLayer');
+        this.store = injectStore();
+        this.effectComposer = inject(NgtpEffectComposer);
+        this.ngtSelection = inject(NgtSelection, { optional: true });
+        this.resolvedLights = computed(() => this.lights().map((light) => resolveRef(light)));
+        this.resolvedSelected = computed(() => {
+            const selection = this.selection();
+            if (!selection)
+                return [];
+            const array = Array.isArray(selection) ? selection : [selection];
+            return array.map((selected) => resolveRef(selected));
+        });
+        this.resolvedNgtSelected = computed(() => {
+            if (!this.ngtSelection || !this.ngtSelection.enabled)
+                return [];
+            return this.ngtSelection.selected().map((selected) => resolveRef(selected));
+        });
+        this.effect = computed(() => {
+            const effect = new SelectiveBloomEffect(this.effectComposer.scene(), this.effectComposer.camera(), {
+                blendFunction: this.blendFunction() || BlendFunction.ADD,
+                luminanceThreshold: this.luminanceThreshold(),
+                luminanceSmoothing: this.luminanceSmoothing(),
+                mipmapBlur: this.mipmapBlur(),
+                intensity: this.intensity(),
+                radius: this.radius(),
+                levels: this.levels(),
+                kernelSize: this.kernelSize(),
+                resolutionScale: this.resolutionScale(),
+                width: this.width(),
+                height: this.height(),
+                resolutionX: this.resolutionX(),
+                resolutionY: this.resolutionY(),
+            });
+            effect.inverted = this.inverted();
+            effect.ignoreBackground = this.ignoreBackground();
+            return effect;
+        });
+        effect((onCleanup) => {
+            // skip input selection altogether if NgtSelection is used
+            if (this.ngtSelection)
+                return;
+            const selection = this.resolvedSelected();
+            if (!selection.length)
+                return;
+            const [effect, invalidate] = [this.effect(), this.store.invalidate(), this.selectionLayer()];
+            effect.selection.set(selection);
+            invalidate();
+            onCleanup(() => {
+                effect.selection.clear();
+                invalidate();
+            });
+        });
+        effect(() => {
+            const [selectionLayer, invalidate, effect] = [this.selectionLayer(), this.store.invalidate(), this.effect()];
+            effect.selection.layer = selectionLayer;
+            invalidate();
+        });
+        effect((onCleanup) => {
+            const lights = this.resolvedLights();
+            if (lights.length <= 0)
+                return;
+            const [effect, invalidate] = [this.effect(), this.store.invalidate(), this.selectionLayer()];
+            lights.forEach((light) => light && this.addLight(effect, light));
+            invalidate();
+            onCleanup(() => {
+                lights.forEach((light) => light && this.removeLight(effect, light));
+                invalidate();
+            });
+        });
+        effect((onCleanup) => {
+            const selected = this.resolvedNgtSelected();
+            if (!selected.length)
+                return;
+            const [effect, invalidate] = [this.effect(), this.store.invalidate(), this.selectionLayer()];
+            effect.selection.set(selected);
+            invalidate();
+            onCleanup(() => {
+                effect.selection.clear();
+                invalidate();
+            });
+        });
+    }
+    addLight(effect, light) {
+        light.layers.enable(effect.selection.layer);
+    }
+    removeLight(effect, light) {
+        light.layers.disable(effect.selection.layer);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpSelectiveBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: NgtpSelectiveBloom, isStandalone: true, selector: "ngtp-selective-bloom", inputs: { lights: { classPropertyName: "lights", publicName: "lights", isSignal: true, isRequired: true, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-primitive *args="[effect()]" [dispose]="null" />
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NgtpSelectiveBloom, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-selective-bloom',
+                    template: `
+		<ngt-primitive *args="[effect()]" [dispose]="null" />
+	`,
+                    imports: [NgtArgs],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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.1.4", ngImport: i0, type: NgtpSepia, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +1434,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpShockWave, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +1465,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpSMAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +1496,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpTiltShift, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +1528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const TiltShiftShader = {
     fragmentShader: /* language=glsl glsl */ `
@@ -1452,12 +1601,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 +1614,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.1.4", ngImport: i0, type: NgtpTiltShift2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +1643,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpToneMapping, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +1672,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", 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.1.4", ngImport: i0, type: NgtpVignette, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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 +1703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                     imports: [NgtArgs, NgtpEffectBlendMode],
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const WaterShader = {
     fragmentShader: /* language=glsl glsl */ `
@@ -1576,15 +1725,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.1.4", ngImport: i0, type: NgtpWater, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", 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,11 +1759,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                     hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }],
                     providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })],
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ASCIIEffect, LensFlareEffect, NgtpASCII, NgtpBloom, NgtpBrightnessContrast, NgtpChromaticAberration, NgtpColorAverage, NgtpColorDepth, NgtpDepth, NgtpDepthOfField, NgtpDotScreen, NgtpEffect, NgtpEffectBlendMode, NgtpEffectComposer, NgtpFXAA, NgtpGlitch, NgtpGodRays, NgtpGrid, NgtpHueSaturation, NgtpLUT, NgtpLensFlare, NgtpNoise, NgtpOutline, NgtpPixelation, NgtpSMAA, NgtpScanline, NgtpSepia, NgtpShockWave, NgtpTiltShift, NgtpTiltShift2, NgtpToneMapping, NgtpVignette, NgtpWater, TiltShift2Effect, WaterEffect, injectDefaultEffectOptions, provideDefaultEffectOptions };
+export { ASCIIEffect, LensFlareEffect, NgtpASCII, NgtpBloom, NgtpBrightnessContrast, NgtpChromaticAberration, NgtpColorAverage, NgtpColorDepth, NgtpDepth, NgtpDepthOfField, NgtpDotScreen, NgtpEffect, NgtpEffectBlendMode, NgtpEffectComposer, NgtpFXAA, NgtpGlitch, NgtpGodRays, NgtpGrid, NgtpHueSaturation, NgtpLUT, NgtpLensFlare, NgtpNoise, NgtpOutline, NgtpPixelation, NgtpSMAA, NgtpScanline, NgtpSelectiveBloom, NgtpSepia, NgtpShockWave, NgtpTiltShift, NgtpTiltShift2, NgtpToneMapping, NgtpVignette, NgtpWater, TiltShift2Effect, WaterEffect, injectDefaultEffectOptions, provideDefaultEffectOptions };
 //# sourceMappingURL=angular-three-postprocessing.mjs.map