angular-three-postprocessing 2.0.0-beta.25 → 2.0.0-beta.250

package/fesm2022/angular-three-postprocessing.mjs

@@ -1,223 +1,203 @@
 import * as i0 from '@angular/core';
-import { computed, effect, Directive, Input, forwardRef, inject, Injector, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { signalStore, injectNgtRef, injectNgtStore, getLocalState, is, extend, createInjectionToken, injectBeforeRender, NgtArgs } from 'angular-three';
-import { BlendFunction, EffectComposer, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectPass, Pass, BloomEffect, BrightnessContrastEffect, ColorDepthEffect, DepthEffect, DotScreenEffect, HueSaturationEffect, LUT3DEffect, NoiseEffect, PixelationEffect, ScanlineEffect, SepiaEffect, ShockWaveEffect, SMAAEffect, SSAOEffect, TiltShiftEffect, ToneMappingEffect, VignetteEffect } from 'postprocessing';
-import * as THREE from 'three';
-import { Group } from 'three';
+import { inject, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, input, Directive, Injector, computed, viewChild, afterNextRender } from '@angular/core';
+import { injectStore, extend, createApiToken, pick, injectBeforeRender, getLocalState, NgtArgs, vector2, is } from 'angular-three';
+import { createNoopInjectionToken } from 'ngxtension/create-injection-token';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+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, PixelationEffect, ScanlineEffect, SepiaEffect, ShockWaveEffect, SMAAEffect, TiltShiftEffect, VignetteEffect } from 'postprocessing';
+import { Group, HalfFloatType, NoToneMapping, Uniform, Texture, Color, CanvasTexture, RepeatWrapping, NearestFilter, Vector3, Vector2, Mesh } from 'three';
 import { isWebGL2Available } from 'three-stdlib';
+import { easing } from 'maath';
 
-class NgtpEffect {
-    set _blendFunction(blendFunction) {
-        this.inputs.set({ blendFunction });
-    }
-    set _opacity(opacity) {
-        this.inputs.set({ opacity });
+const [injectDefaultEffectOptions, provideDefaultEffectOptions] = createNoopInjectionToken('Default Effect options');
+class NgtpEffectBlendMode {
+    constructor() {
+        this.effect = inject(NgtpEffect, { optional: true });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpEffectBlendMode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: NgtpEffectBlendMode, isStandalone: true, selector: "ngtp-effect-blend-mode", ngImport: i0, template: `
+		@if (effect) {
+			<ngt-value [rawValue]="effect.blendFunction()" attach="blendMode.blendFunction" />
+			<ngt-value [rawValue]="effect.opacity()" attach="blendMode.opacity.value" />
+		}
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpEffectBlendMode, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-effect-blend-mode',
+                    standalone: true,
+                    template: `
+		@if (effect) {
+			<ngt-value [rawValue]="effect.blendFunction()" attach="blendMode.blendFunction" />
+			<ngt-value [rawValue]="effect.opacity()" attach="blendMode.opacity.value" />
+		}
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+class NgtpEffect {
     constructor() {
-        this.inputs = signalStore();
-        this.effectRef = injectNgtRef();
-        this.defaultBlendFunction = BlendFunction.NORMAL;
-        this.nativeArgs = () => [];
-        this.blendFunction = this.inputs.select('blendFunction');
-        this.opacity = this.inputs.select('opacity');
-        this.store = injectNgtStore();
+        this.defaultEffectOptions = injectDefaultEffectOptions({ optional: true });
+        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.nativeInputs = computed(() => {
-            const effect = this.effectRef.nativeElement;
-            if (!effect)
-                return this.previousInputs || null;
-            const localState = getLocalState(effect);
-            if (!localState)
-                return this.previousInputs || null;
-            const nativeProps = localState.nativeProps.state();
-            delete nativeProps['__ngt_dummy_state__'];
-            if ('camera' in nativeProps) {
-                delete nativeProps['camera'];
-            }
-            if (!Object.keys(nativeProps).length)
-                return this.previousInputs || null;
-            return (this.previousInputs = nativeProps);
-        }, { equal: (a, b) => is.equ(a, b, { objects: 'shallow' }) });
-        this.args = computed(() => {
-            const [nativeInputs, nativeArgs] = [this.nativeInputs(), this.nativeArgs()];
-            if (nativeInputs) {
-                nativeArgs.push(nativeInputs);
-            }
-            return nativeArgs;
-        });
-        this.setBlendMode();
-    }
-    setBlendMode() {
-        effect(() => {
-            const [blendFunction, opacity, effect, invalidate] = [
-                this.blendFunction(),
-                this.opacity(),
-                this.effectRef.nativeElement,
-                this.invalidate(),
-            ];
-            if (!effect)
-                return;
-            effect.blendMode.blendFunction =
-                !blendFunction && blendFunction !== 0 ? this.defaultBlendFunction : blendFunction;
-            if (opacity !== undefined)
-                effect.blendMode.opacity.value = opacity;
-            invalidate();
-        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.2", type: NgtpEffect, inputs: { effectRef: "effectRef", _blendFunction: ["blendFunction", "_blendFunction"], _opacity: ["opacity", "_opacity"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpEffect, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return []; }, propDecorators: { effectRef: [{
-                type: Input
-            }], _blendFunction: [{
-                type: Input,
-                args: [{ alias: 'blendFunction' }]
-            }], _opacity: [{
-                type: Input,
-                args: [{ alias: 'opacity' }]
-            }] } });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpEffect, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }] });
+const NgtpEffectHostDirective = { directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] };
 
 extend({ Group });
-const [injectNgtpEffectComposerApi, provideNgtpEffectComposerApi] = createInjectionToken((composer) => composer.api, { isRoot: false, deps: [forwardRef(() => NgtpEffectComposer)] });
+const [injectEffectComposerApi, provideEffectComposerApi] = createApiToken(() => NgtpEffectComposer);
+const defaultOptions$3 = {
+    enabled: true,
+    renderPriority: 1,
+    autoClear: true,
+    multisampling: 8,
+    frameBufferType: HalfFloatType,
+};
+function isConvolution(effect) {
+    return (effect.getAttributes() & EffectAttribute.CONVOLUTION) === EffectAttribute.CONVOLUTION;
+}
 class NgtpEffectComposer {
-    set _enabled(enabled) {
-        this.inputs.set({ enabled });
-    }
-    set _depthBuffer(depthBuffer) {
-        this.inputs.set({ depthBuffer });
-    }
-    set _disableNormalPass(disableNormalPass) {
-        this.inputs.set({ disableNormalPass });
-    }
-    set _stencilBuffer(stencilBuffer) {
-        this.inputs.set({ stencilBuffer });
-    }
-    set _autoClear(autoClear) {
-        this.inputs.set({ autoClear });
-    }
-    set _resolutionScale(resolutionScale) {
-        this.inputs.set({ resolutionScale });
-    }
-    set _multisampling(multisampling) {
-        this.inputs.set({ multisampling });
-    }
-    set _frameBufferType(frameBufferType) {
-        this.inputs.set({ frameBufferType });
-    }
-    set _renderPriority(renderPriority) {
-        this.inputs.set({ renderPriority });
-    }
-    set _camera(camera) {
-        this.inputs.set({ camera });
-    }
-    set _scene(scene) {
-        this.inputs.set({ scene });
-    }
     constructor() {
-        this.inputs = signalStore({
-            enabled: true,
-            renderPriority: 1,
-            autoClear: true,
-            multisampling: 8,
-            frameBufferType: THREE.HalfFloatType,
-        });
-        this.composerRef = injectNgtRef();
+        this.options = input(defaultOptions$3, { transform: mergeInputs(defaultOptions$3) });
         this.injector = inject(Injector);
-        this.store = injectNgtStore();
+        this.autoEffect = injectAutoEffect();
+        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.size = this.store.select('size');
-        this.depthBuffer = this.inputs.select('depthBuffer');
-        this.stencilBuffer = this.inputs.select('stencilBuffer');
-        this.multisampling = this.inputs.select('multisampling');
-        this.frameBufferType = this.inputs.select('frameBufferType');
-        this.scene = this.inputs.select('scene');
-        this.camera = this.inputs.select('camera');
-        this.disableNormalPass = this.inputs.select('disableNormalPass');
-        this.resolutionScale = this.inputs.select('resolutionScale');
-        this.autoClear = this.inputs.select('autoClear');
-        this.activeScene = computed(() => this.scene() || this.defaultScene());
-        this.activeCamera = computed(() => this.camera() || this.defaultCamera());
-        this.composerEntities = computed(() => {
+        this.depthBuffer = pick(this.options, 'depthBuffer');
+        this.stencilBuffer = pick(this.options, 'stencilBuffer');
+        this.multisampling = pick(this.options, 'multisampling');
+        this.frameBufferType = pick(this.options, 'frameBufferType');
+        this.scene = computed(() => this.options().scene ?? this.defaultScene());
+        this.camera = computed(() => this.options().camera ?? this.defaultCamera());
+        this.enableNormalPass = pick(this.options, 'enableNormalPass');
+        this.resolutionScale = pick(this.options, 'resolutionScale');
+        this.group = viewChild.required('group');
+        this.composerData = computed(() => {
             const webGL2Available = isWebGL2Available();
-            const [gl, depthBuffer, stencilBuffer, multisampling, frameBufferType, scene, camera, disableNormalPass, resolutionScale,] = [
+            const [gl, scene, camera, depthBuffer, stencilBuffer, multisampling, frameBufferType, enableNormalPass, resolutionScale,] = [
                 this.gl(),
+                this.scene(),
+                this.camera(),
                 this.depthBuffer(),
                 this.stencilBuffer(),
                 this.multisampling(),
                 this.frameBufferType(),
-                this.activeScene(),
-                this.activeCamera(),
-                this.disableNormalPass(),
+                this.enableNormalPass(),
                 this.resolutionScale(),
             ];
-            // Initialize composer
-            const effectComposer = new EffectComposer(gl, {
+            // initialize composer
+            const composer = new EffectComposer(gl, {
                 depthBuffer,
                 stencilBuffer,
                 multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
                 frameBufferType,
             });
-            // Add render pass
-            effectComposer.addPass(new RenderPass(scene, camera));
-            // Create normal pass
+            // add render pass
+            composer.addPass(new RenderPass(scene, camera));
+            // create normal pass
             let downSamplingPass = null;
             let normalPass = null;
-            if (!disableNormalPass) {
+            if (enableNormalPass) {
                 normalPass = new NormalPass(scene, camera);
                 normalPass.enabled = false;
-                effectComposer.addPass(normalPass);
+                composer.addPass(normalPass);
                 if (resolutionScale !== undefined && webGL2Available) {
                     downSamplingPass = new DepthDownsamplingPass({ normalBuffer: normalPass.texture, resolutionScale });
                     downSamplingPass.enabled = false;
-                    effectComposer.addPass(downSamplingPass);
+                    composer.addPass(downSamplingPass);
                 }
             }
-            return { effectComposer, normalPass, downSamplingPass };
+            return { composer, normalPass, downSamplingPass };
         });
-        this.composer = computed(() => this.composerEntities().effectComposer);
         this.api = computed(() => {
-            const [{ effectComposer: composer, normalPass, downSamplingPass }, resolutionScale, camera, scene] = [
-                this.composerEntities(),
+            const [{ composer, normalPass, downSamplingPass }, camera, scene, resolutionScale] = [
+                this.composerData(),
+                this.camera(),
+                this.scene(),
                 this.resolutionScale(),
-                this.activeCamera(),
-                this.activeScene(),
             ];
-            return { composer, normalPass, downSamplingPass, resolutionScale, camera, scene };
+            return { composer, camera, scene, normalPass, downSamplingPass, resolutionScale };
+        });
+        afterNextRender(() => {
+            this.disableToneMapping();
+            this.setComposerSize();
+            this.updatePasses();
+            injectBeforeRender(({ delta }) => {
+                const [{ composer }, { enabled, autoClear, stencilBuffer }, gl] = [
+                    this.composerData(),
+                    this.options(),
+                    this.gl(),
+                ];
+                if (enabled) {
+                    const currentAutoClear = gl.autoClear;
+                    gl.autoClear = autoClear;
+                    if (stencilBuffer && !autoClear)
+                        gl.clearStencil();
+                    composer.render(delta);
+                    gl.autoClear = currentAutoClear;
+                }
+            }, { injector: this.injector, priority: this.options().enabled ? this.options().renderPriority : 0 });
         });
-        this.setComposerSize();
-        this.updatePasses();
     }
-    ngOnInit() {
-        this.beforeRender();
+    // NOTE: Disable tone mapping because threejs disallows tonemapping on render targets
+    disableToneMapping() {
+        this.autoEffect(() => {
+            const gl = this.gl();
+            const currentTonemapping = gl.toneMapping;
+            gl.toneMapping = NoToneMapping;
+            return () => {
+                gl.toneMapping = currentTonemapping;
+            };
+        });
     }
     setComposerSize() {
-        effect(() => {
-            const [composer, size] = [this.composer(), this.size()];
-            composer.setSize(size.width, size.height);
+        this.autoEffect(() => {
+            const [{ composer }, { width, height }] = [this.composerData(), this.size()];
+            if (composer) {
+                composer.setSize(width, height);
+            }
         });
     }
     updatePasses() {
-        effect((onCleanup) => {
-            const [{ effectComposer: composer, normalPass, downSamplingPass }, instance, children, camera] = [
-                this.composerEntities(),
-                this.composerRef.nativeElement,
-                this.composerRef.children('nonObjects')(),
-                this.activeCamera(),
+        this.autoEffect(() => {
+            const [group, { composer, normalPass, downSamplingPass }, camera] = [
+                this.group(),
+                this.composerData(),
+                this.camera(),
             ];
             const passes = [];
-            if (instance && composer && children.length) {
+            if (group.nativeElement && composer) {
+                const localState = getLocalState(group.nativeElement);
+                if (!localState)
+                    return;
+                const children = localState.nonObjects();
                 for (let i = 0; i < children.length; i++) {
                     const child = children[i];
                     if (child instanceof Effect) {
-                        const effects = [];
-                        while (children[i] instanceof Effect)
-                            effects.push(children[i++]);
-                        i--;
+                        const effects = [child];
+                        if (!isConvolution(child)) {
+                            let next = null;
+                            while ((next = children[i + 1]) instanceof Effect) {
+                                if (isConvolution(next))
+                                    break;
+                                effects.push(next);
+                                i++;
+                            }
+                        }
                         const pass = new EffectPass(camera, ...effects);
                         passes.push(pass);
                     }
@@ -225,766 +205,1279 @@ class NgtpEffectComposer {
                         passes.push(child);
                     }
                 }
-                for (const pass of passes)
+                for (const pass of passes) {
                     composer.addPass(pass);
+                }
                 if (normalPass)
                     normalPass.enabled = true;
                 if (downSamplingPass)
                     downSamplingPass.enabled = true;
             }
-            onCleanup(() => {
+            return () => {
                 for (const pass of passes)
                     composer?.removePass(pass);
                 if (normalPass)
                     normalPass.enabled = false;
                 if (downSamplingPass)
                     downSamplingPass.enabled = false;
-            });
+            };
         });
     }
-    beforeRender() {
-        injectBeforeRender(({ delta }) => {
-            const [enabled, gl, autoClear, stencilBuffer, composer] = [
-                this.inputs.get('enabled'),
-                this.gl(),
-                this.autoClear(),
-                this.stencilBuffer(),
-                this.composer(),
-            ];
-            if (enabled) {
-                const currentAutoClear = gl.autoClear;
-                gl.autoClear = autoClear;
-                if (stencilBuffer && !autoClear)
-                    gl.clearStencil();
-                composer.render(delta);
-                gl.autoClear = currentAutoClear;
-            }
-        }, {
-            injector: this.injector,
-            priority: this.inputs.get('enabled') ? this.inputs.get('renderPriority') : 0,
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpEffectComposer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpEffectComposer, isStandalone: true, selector: "ngtp-effect-composer", inputs: { composerRef: "composerRef", _enabled: ["enabled", "_enabled"], _depthBuffer: ["depthBuffer", "_depthBuffer"], _disableNormalPass: ["disableNormalPass", "_disableNormalPass"], _stencilBuffer: ["stencilBuffer", "_stencilBuffer"], _autoClear: ["autoClear", "_autoClear"], _resolutionScale: ["resolutionScale", "_resolutionScale"], _multisampling: ["multisampling", "_multisampling"], _frameBufferType: ["frameBufferType", "_frameBufferType"], _renderPriority: ["renderPriority", "_renderPriority"], _camera: ["camera", "_camera"], _scene: ["scene", "_scene"] }, providers: [provideNgtpEffectComposerApi()], ngImport: i0, template: `
-		<ngt-group [ref]="composerRef">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpEffectComposer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.6", type: NgtpEffectComposer, isStandalone: true, selector: "ngtp-effect-composer", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideEffectComposerApi()], viewQueries: [{ propertyName: "group", first: true, predicate: ["group"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-group #group>
 			<ng-content />
 		</ngt-group>
-	`, isInline: true }); }
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpEffectComposer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpEffectComposer, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-effect-composer',
                     standalone: true,
                     template: `
-		<ngt-group [ref]="composerRef">
+		<ngt-group #group>
 			<ng-content />
 		</ngt-group>
 	`,
-                    providers: [provideNgtpEffectComposerApi()],
+                    providers: [provideEffectComposerApi()],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { composerRef: [{
-                type: Input
-            }], _enabled: [{
-                type: Input,
-                args: [{ alias: 'enabled' }]
-            }], _depthBuffer: [{
-                type: Input,
-                args: [{ alias: 'depthBuffer' }]
-            }], _disableNormalPass: [{
-                type: Input,
-                args: [{ alias: 'disableNormalPass' }]
-            }], _stencilBuffer: [{
-                type: Input,
-                args: [{ alias: 'stencilBuffer' }]
-            }], _autoClear: [{
-                type: Input,
-                args: [{ alias: 'autoClear' }]
-            }], _resolutionScale: [{
-                type: Input,
-                args: [{ alias: 'resolutionScale' }]
-            }], _multisampling: [{
-                type: Input,
-                args: [{ alias: 'multisampling' }]
-            }], _frameBufferType: [{
-                type: Input,
-                args: [{ alias: 'frameBufferType' }]
-            }], _renderPriority: [{
-                type: Input,
-                args: [{ alias: 'renderPriority' }]
-            }], _camera: [{
-                type: Input,
-                args: [{ alias: 'camera' }]
-            }], _scene: [{
-                type: Input,
-                args: [{ alias: 'scene' }]
-            }] } });
+        }], ctorParameters: () => [] });
+
+const fragment = `
+uniform sampler2D uCharacters;
+uniform float uCharactersCount;
+uniform float uCellSize;
+uniform bool uInvert;
+uniform vec3 uColor;
+
+const vec2 SIZE = vec2(16.);
+
+vec3 greyscale(vec3 color, float strength) {
+    float g = dot(color, vec3(0.299, 0.587, 0.114));
+    return mix(color, vec3(g), strength);
+}
+
+vec3 greyscale(vec3 color) {
+    return greyscale(color, 1.0);
+}
+
+void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+    vec2 cell = resolution / uCellSize;
+    vec2 grid = 1.0 / cell;
+    vec2 pixelizedUV = grid * (0.5 + floor(uv / grid));
+    vec4 pixelized = texture2D(inputBuffer, pixelizedUV);
+    float greyscaled = greyscale(pixelized.rgb).r;
+
+    if (uInvert) {
+        greyscaled = 1.0 - greyscaled;
+    }
+
+    float characterIndex = floor((uCharactersCount - 1.0) * greyscaled);
+    vec2 characterPosition = vec2(mod(characterIndex, SIZE.x), floor(characterIndex / SIZE.y));
+    vec2 offset = vec2(characterPosition.x, -characterPosition.y) / SIZE;
+    vec2 charUV = mod(uv * (cell / SIZE), 1.0 / SIZE) - vec2(0., 1.0 / SIZE) + offset;
+    vec4 asciiCharacter = texture2D(uCharacters, charUV);
+
+    asciiCharacter.rgb = uColor * asciiCharacter.r;
+    asciiCharacter.a = pixelized.a;
+    outputColor = asciiCharacter;
+}
+`;
+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)],
+        ]);
+        super('ASCIIEffect', fragment, { uniforms });
+        const charactersTextureUniform = this.uniforms.get('uCharacters');
+        if (charactersTextureUniform) {
+            charactersTextureUniform.value = this.createCharactersTexture(characters, font, fontSize);
+        }
+    }
+    /** Draws the characters on a Canvas and returns a texture */
+    createCharactersTexture(characters, font, fontSize) {
+        const canvas = document.createElement('canvas');
+        const SIZE = 1024;
+        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 context = canvas.getContext('2d');
+        if (!context) {
+            throw new Error('Context not available');
+        }
+        context.clearRect(0, 0, SIZE, SIZE);
+        context.font = `${fontSize}px ${font}`;
+        context.textAlign = 'center';
+        context.textBaseline = 'middle';
+        context.fillStyle = '#fff';
+        for (let i = 0; i < characters.length; i++) {
+            const char = characters[i];
+            const x = i % MAX_PER_ROW;
+            const y = Math.floor(i / MAX_PER_ROW);
+            context.fillText(char, x * CELL + CELL / 2, y * CELL + CELL / 2);
+        }
+        texture.needsUpdate = true;
+        return texture;
+    }
+}
+const defaultOptions$2 = {
+    font: 'arial',
+    characters: ` .:,'-^=*+?!|0#X%WM@`,
+    fontSize: 54,
+    cellSize: 16,
+    color: '#ffffff',
+    invert: false,
+};
+class NgtpASCII {
+    constructor() {
+        this.options = input(defaultOptions$2, { transform: mergeInputs(defaultOptions$2) });
+        this.effect = computed(() => new ASCIIEffect(this.options()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpASCII, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.6", type: NgtpASCII, isStandalone: true, selector: "ngtp-ascii", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-primitive *args="[effect()]" />
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpASCII, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-ascii',
+                    standalone: true,
+                    template: `
+		<ngt-primitive *args="[effect()]" />
+	`,
+                    imports: [NgtArgs],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
 
 extend({ BloomEffect });
-class NgtpBloom extends NgtpEffect {
+class NgtpBloom {
     constructor() {
-        super(...arguments);
-        this.defaultBlendFunction = BlendFunction.ADD;
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpBloom, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpBloom, isStandalone: true, selector: "ngtp-bloom", usesInheritance: true, ngImport: i0, template: `
-		<ngt-bloom-effect ngtCompound *args="args()" [ref]="effectRef" [camera]="camera()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-bloom-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-bloom-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpBloom, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpBloom, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-bloom',
                     standalone: true,
                     template: `
-		<ngt-bloom-effect ngtCompound *args="args()" [ref]="effectRef" [camera]="camera()">
+		<ngt-bloom-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-bloom-effect>
 	`,
-                    imports: [NgtArgs],
+                    imports: [NgtArgs, NgtpEffectBlendMode],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [NgtpEffectHostDirective],
+                    providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })],
                 }]
         }] });
 
 extend({ BrightnessContrastEffect });
-class NgtpBrightnessContrast extends NgtpEffect {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpBrightnessContrast, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpBrightnessContrast, isStandalone: true, selector: "ngtp-brightness-contrast", usesInheritance: true, ngImport: i0, template: `
-		<ngt-brightness-contrast-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+class NgtpBrightnessContrast {
+    constructor() {
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpBrightnessContrast, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-brightness-contrast-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-brightness-contrast-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpBrightnessContrast, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpBrightnessContrast, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-brightness-contrast',
                     standalone: true,
                     template: `
-		<ngt-brightness-contrast-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+		<ngt-brightness-contrast-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-brightness-contrast-effect>
+	`,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [NgtpEffectHostDirective],
+                }]
+        }] });
+
+extend({ ChromaticAberrationEffect });
+class NgtpChromaticAberration {
+    constructor() {
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpChromaticAberration, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-chromatic-aberration-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
+			<ng-content />
+		</ngt-chromatic-aberration-effect>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpChromaticAberration, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-chromatic-aberration',
+                    template: `
+		<ngt-chromatic-aberration-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
+			<ng-content />
+		</ngt-chromatic-aberration-effect>
+	`,
+                    standalone: true,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
+                }]
+        }] });
+
+extend({ ColorAverageEffect });
+class NgtpColorAverage {
+    constructor() {
+        this.options = input({ blendFunction: BlendFunction.NORMAL }, { transform: mergeInputs({ blendFunction: BlendFunction.NORMAL }) });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpColorAverage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-color-average-effect *args="[options().blendFunction]">
+			<ng-content />
+		</ngt-color-average-effect>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpColorAverage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-color-average',
+                    standalone: true,
+                    template: `
+		<ngt-color-average-effect *args="[options().blendFunction]">
+			<ng-content />
+		</ngt-color-average-effect>
 	`,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
 extend({ ColorDepthEffect });
-class NgtpColorDepth extends NgtpEffect {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpColorDepth, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpColorDepth, isStandalone: true, selector: "ngtp-color-depth", usesInheritance: true, ngImport: i0, template: `
-		<ngt-color-depth-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+class NgtpColorDepth {
+    constructor() {
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpColorDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-color-depth-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-color-depth-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpColorDepth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpColorDepth, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-color-depth',
-                    standalone: true,
                     template: `
-		<ngt-color-depth-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+		<ngt-color-depth-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-color-depth-effect>
 	`,
-                    imports: [NgtArgs],
+                    standalone: true,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
                 }]
         }] });
 
 extend({ DepthEffect });
-class NgtpDepth extends NgtpEffect {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpDepth, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpDepth, isStandalone: true, selector: "ngtp-depth", usesInheritance: true, ngImport: i0, template: `
-		<ngt-depth-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+class NgtpDepth {
+    constructor() {
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpDepth, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-depth-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-depth-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpDepth, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpDepth, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-depth',
-                    standalone: true,
                     template: `
-		<ngt-depth-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+		<ngt-depth-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-depth-effect>
 	`,
-                    imports: [NgtArgs],
+                    standalone: true,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
                 }]
         }] });
 
+class NgtpDepthOfField {
+    constructor() {
+        this.autoEffect = injectAutoEffect();
+        this.composerApi = injectEffectComposerApi();
+        this.options = input({});
+        this.autoFocus = computed(() => this.options().target != null);
+        this.effect = computed(() => {
+            const [{ camera }, options, autoFocus] = [this.composerApi(), this.options(), this.autoFocus()];
+            const effect = new DepthOfFieldEffect(camera, options);
+            // Creating a target enables autofocus, R3F will set via props
+            if (autoFocus)
+                effect.target = new Vector3();
+            // Depth texture for depth picking with optional packing strategy
+            if (options.depthTexture) {
+                effect.setDepthTexture(options.depthTexture.texture, options.depthTexture.packing);
+            }
+            // Temporary fix that restores DOF 6.21.3 behavior, everything since then lets shapes leak through the blur
+            const maskPass = effect.maskPass;
+            maskPass.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA;
+            return effect;
+        });
+        afterNextRender(() => {
+            this.autoEffect(() => {
+                const effect = this.effect();
+                return () => {
+                    effect.dispose();
+                };
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpDepthOfField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.6", type: NgtpDepthOfField, isStandalone: true, selector: "ngtp-depth-of-field", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-primitive *args="[effect()]" />
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpDepthOfField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-depth-of-field',
+                    standalone: true,
+                    template: `
+		<ngt-primitive *args="[effect()]" />
+	`,
+                    imports: [NgtArgs],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+
 extend({ DotScreenEffect });
-class NgtpDotScreen extends NgtpEffect {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpDotScreen, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpDotScreen, isStandalone: true, selector: "ngtp-dot-screen", usesInheritance: true, ngImport: i0, template: `
-		<ngt-dot-screen-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+class NgtpDotScreen {
+    constructor() {
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpDotScreen, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-dot-screen-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-dot-screen-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpDotScreen, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpDotScreen, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-dot-screen',
-                    standalone: true,
                     template: `
-		<ngt-dot-screen-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+		<ngt-dot-screen-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-dot-screen-effect>
 	`,
-                    imports: [NgtArgs],
+                    standalone: true,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
                 }]
         }] });
 
+extend({ FXAAEffect });
+class NgtpFXAA {
+    constructor() {
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpFXAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-fXAA-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
+			<ng-content />
+		</ngt-fXAA-effect>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpFXAA, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-fxaa',
+                    template: `
+		<ngt-fXAA-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
+			<ng-content />
+		</ngt-fXAA-effect>
+	`,
+                    standalone: true,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
+                }]
+        }] });
+
+class NgtpGlitch {
+    constructor() {
+        this.autoEffect = injectAutoEffect();
+        this.store = injectStore();
+        this.invalidate = this.store.select('invalidate');
+        this.options = input({ active: true }, { transform: mergeInputs({ active: true }) });
+        this.active = pick(this.options, 'active');
+        this.mode = pick(this.options, 'mode');
+        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.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,
+            });
+        });
+        afterNextRender(() => {
+            this.autoEffect(() => {
+                const effect = this.effect();
+                return () => effect.dispose();
+            });
+            this.autoEffect(() => {
+                const [effect, invalidate, mode, active] = [this.effect(), this.invalidate(), this.mode(), this.active()];
+                effect.mode = active ? mode || GlitchMode.SPORADIC : GlitchMode.DISABLED;
+                invalidate();
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpGlitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.6", type: NgtpGlitch, isStandalone: true, selector: "ngtp-glitch", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-primitive *args="[effect()]" />
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpGlitch, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-glitch',
+                    standalone: true,
+                    template: `
+		<ngt-primitive *args="[effect()]" />
+	`,
+                    imports: [NgtArgs],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+
+class NgtpGodRays {
+    constructor() {
+        this.autoEffect = injectAutoEffect();
+        this.composerApi = injectEffectComposerApi();
+        this.options = input({});
+        this.effect = computed(() => {
+            const [{ camera }, { sun, ...options }] = [this.composerApi(), this.options()];
+            return new GodRaysEffect(camera, is.ref(sun) ? sun.nativeElement : sun, options);
+        });
+        afterNextRender(() => {
+            this.autoEffect(() => {
+                const [sun, effect] = [this.options().sun, this.effect()];
+                effect.lightSource = is.ref(sun) ? sun.nativeElement : sun;
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpGodRays, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.6", type: NgtpGodRays, isStandalone: true, selector: "ngtp-god-rays", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-primitive *args="[effect()]" />
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpGodRays, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-god-rays',
+                    standalone: true,
+                    template: `
+		<ngt-primitive *args="[effect()]" />
+	`,
+                    imports: [NgtArgs],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: () => [] });
+
+class NgtpGrid {
+    constructor() {
+        this.autoEffect = injectAutoEffect();
+        this.store = injectStore();
+        this.invalidate = this.store.select('invalidate');
+        this.options = input({});
+        this.size = pick(this.options, 'size');
+        this.effect = computed(() => {
+            const { size: _, ...options } = this.options();
+            return new GridEffect(options);
+        });
+        afterNextRender(() => {
+            this.autoEffect(() => {
+                const [size, effect] = [this.size(), this.effect()];
+                if (size) {
+                    effect.setSize(size.width, size.height);
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.6", type: NgtpGrid, isStandalone: true, selector: "ngtp-grid", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-primitive *args="[effect()]" />
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpGrid, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-grid',
+                    standalone: true,
+                    template: `
+		<ngt-primitive *args="[effect()]" />
+	`,
+                    imports: [NgtArgs],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }], ctorParameters: () => [] });
+
 extend({ HueSaturationEffect });
-class NgtpHueSaturation extends NgtpEffect {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpHueSaturation, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpHueSaturation, isStandalone: true, selector: "ngtp-hue-saturation", usesInheritance: true, ngImport: i0, template: `
-		<ngt-hue-saturation-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+class NgtpHueSaturation {
+    constructor() {
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpHueSaturation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-hue-saturation-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-hue-saturation-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpHueSaturation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpHueSaturation, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-hue-saturation',
-                    standalone: true,
                     template: `
-		<ngt-hue-saturation-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+		<ngt-hue-saturation-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-hue-saturation-effect>
 	`,
-                    imports: [NgtArgs],
+                    standalone: true,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
                 }]
         }] });
 
-class NgtpLUT {
-    set _lut(lut) {
-        this.inputs.set({ lut });
-    }
-    set _blendFunction(blendFunction) {
-        this.inputs.set({ blendFunction });
+// Created by Anderson Mancini 2023
+// React Three Fiber Ultimate LensFlare
+const LensFlareShader = {
+    fragmentShader: /* glsl */ `
+
+  uniform float iTime;
+  uniform vec2 lensPosition;
+  uniform vec2 iResolution;
+  uniform vec3 colorGain;
+  uniform float starPoints;
+  uniform float glareSize;
+  uniform float flareSize;
+  uniform float flareSpeed;
+  uniform float flareShape;
+  uniform float haloScale;
+  uniform float opacity;
+  uniform bool animated;
+  uniform bool anamorphic;
+  uniform bool enabled;
+  uniform bool secondaryGhosts;
+  uniform bool starBurst;
+  uniform float ghostScale;
+  uniform bool aditionalStreaks;
+  uniform sampler2D lensDirtTexture;
+  vec2 vxtC;
+
+  float rndf(float n){return fract(sin(n) * 43758.5453123);}float niz(float p){float fl = floor(p);float fc = fract(p);return mix(rndf(fl),rndf(fl + 1.0), fc);}
+  vec3 hsv2rgb(vec3 c){vec4 k = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);vec3 p = abs(fract(c.xxx + k.xyz) * 6.0 - k.www);return c.z * mix(k.xxx, clamp(p - k.xxx, 0.0, 1.0), c.y);}
+  float satU(float x){return clamp(x, 0.,1.);}vec2 rtU(vec2 naz, float rtn){return vec2(cos(rtn) * naz.x + sin(rtn) * naz.y,cos(rtn) * naz.y - sin(rtn) * naz.x);}
+  vec3 drwF(vec2 p, float intensity, float rnd, float speed, int id){float flhos = (1. / 32.) * float(id) * 0.1;float lingrad = distance(vec2(0.), p);float expg = 1. / exp(lingrad * (fract(rnd) * 0.66 + 0.33));vec3 qzTg = hsv2rgb(vec3( fract( (expg * 8.) + speed * flareSpeed + flhos), pow(1.-abs(expg*2.-1.), 0.45), 20.0 * expg * intensity));float internalStarPoints;if(anamorphic){internalStarPoints = 1.0;} else{internalStarPoints = starPoints;}float ams = length(p * flareShape * sin(internalStarPoints * atan(p.x, p.y)));float kJhg = pow(1.-satU(ams), ( anamorphic ? 100. : 12.));kJhg += satU(expg-0.9) * 3.;kJhg = pow(kJhg * expg, 8. + (1.-intensity) * 5.);if(flareSpeed > 0.0){return vec3(kJhg) * qzTg;} else{return vec3(kJhg) * flareSize * 15.;}}
+  float ams2(vec3 a, vec3 b) { return abs(a.x - b.x) + abs(a.y - b.y) + abs(a.z - b.z);}vec3 satU(vec3 x){return clamp(x, vec3(0.0), vec3(1.0));}
+  float glR(vec2 naz, vec2 pos, float zsi){vec2 mni;if(animated){mni = rtU(naz-pos, iTime * 0.1);} else{mni = naz-pos;}float ang = atan(mni.y, mni.x) * (anamorphic ? 1.0 : starPoints);float ams2 = length(mni);ams2 = pow(ams2, .9);float f0 = 1.0/(length(naz-pos)*(1.0/zsi*16.0)+.2);return f0+f0*(sin((ang))*.2 +.3);}
+  float sdHex(vec2 p){p = abs(p);vec2 q = vec2(p.x*2.0*0.5773503, p.y + p.x*0.5773503);return dot(step(q.xy,q.yx), 1.0-q.yx);}float fpow(float x, float k){return x > k ? pow((x-k)/(1.0-k),2.0) : 0.0;}
+  vec3 rHx(vec2 naz, vec2 p, float s, vec3 col){naz -= p;if (abs(naz.x) < 0.2*s && abs(naz.y) < 0.2*s){return mix(vec3(0),mix(vec3(0),col,0.1 + fpow(length(naz/s),0.1)*10.0),smoothstep(0.0,0.1,sdHex(naz*20.0/s)));}return vec3(0);}
+  vec3 mLs(vec2 naz, vec2 pos){vec2 mni = naz-pos;vec2 zxMp = naz*(length(naz));float ang = atan(mni.x,mni.y);float f0 = .3/(length(naz-pos)*16.0+1.0);f0 = f0*(sin(niz(sin(ang*3.9-(animated ? iTime : 0.0) * 0.3) * starPoints))*.2 );float f1 = max(0.01-pow(length(naz+1.2*pos),1.9),.0)*7.0;float f2 = max(.9/(10.0+32.0*pow(length(zxMp+0.99*pos),2.0)),.0)*0.35;float f22 = max(.9/(11.0+32.0*pow(length(zxMp+0.85*pos),2.0)),.0)*0.23;float f23 = max(.9/(12.0+32.0*pow(length(zxMp+0.95*pos),2.0)),.0)*0.6;vec2 ztX = mix(naz,zxMp, 0.1);float f4 = max(0.01-pow(length(ztX+0.4*pos),2.9),.0)*4.02;float f42 = max(0.0-pow(length(ztX+0.45*pos),2.9),.0)*4.1;float f43 = max(0.01-pow(length(ztX+0.5*pos),2.9),.0)*4.6;ztX = mix(naz,zxMp,-.4);float f5 = max(0.01-pow(length(ztX+0.1*pos),5.5),.0)*2.0;float f52 = max(0.01-pow(length(ztX+0.2*pos),5.5),.0)*2.0;float f53 = max(0.01-pow(length(ztX+0.1*pos),5.5),.0)*2.0;ztX = mix(naz,zxMp, 2.1);float f6 = max(0.01-pow(length(ztX-0.3*pos),1.61),.0)*3.159;float f62 = max(0.01-pow(length(ztX-0.325*pos),1.614),.0)*3.14;float f63 = max(0.01-pow(length(ztX-0.389*pos),1.623),.0)*3.12;vec3 c = vec3(glR(naz,pos, glareSize));vec2 prot;if(animated){prot = rtU(naz - pos, (iTime * 0.1));} else if(anamorphic){prot = rtU(naz - pos, 1.570796);} else {prot = naz - pos;}c += drwF(prot, (anamorphic ? flareSize * 10. : flareSize), 0.1, iTime, 1);c.r+=f1+f2+f4+f5+f6; c.g+=f1+f22+f42+f52+f62; c.b+=f1+f23+f43+f53+f63;c = c*1.3 * vec3(length(zxMp)+.09);c+=vec3(f0);return c;}
+  vec3 cc(vec3 clr, float fct,float fct2){float w = clr.x+clr.y+clr.z;return mix(clr,vec3(w)*fct,w*fct2);}float rnd(vec2 p){float f = fract(sin(dot(p, vec2(12.1234, 72.8392) )*45123.2));return f;}float rnd(float w){float f = fract(sin(w)*1000.);return f;}
+  float rShp(vec2 p, int N){float f;float a=atan(p.x,p.y)+.2;float b=6.28319/float(N);f=smoothstep(.5,.51, cos(floor(.5+a/b)*b-a)*length(p.xy)* 2.0  -ghostScale);return f;}
+  vec3 drC(vec2 p, float zsi, float dCy, vec3 clr, vec3 clr2, float ams2, vec2 esom){float l = length(p + esom*(ams2*2.))+zsi/2.;float l2 = length(p + esom*(ams2*4.))+zsi/3.;float c = max(0.01-pow(length(p + esom*ams2), zsi*ghostScale), 0.0)*10.;float c1 = max(0.001-pow(l-0.3, 1./40.)+sin(l*20.), 0.0)*3.;float c2 =  max(0.09/pow(length(p-esom*ams2/.5)*1., .95), 0.0)/20.;float s = max(0.02-pow(rShp(p*5. + esom*ams2*5. + dCy, 6) , 1.), 0.0)*1.5;clr = cos(vec3(0.44, .24, .2)*8. + ams2*4.)*0.5+.5;vec3 f = c*clr;f += c1*clr;f += c2*clr;f +=  s*clr;return f-0.01;}
+  vec4 geLC(float x){return vec4(vec3(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(mix(vec3(0., 0., 0.),vec3(0., 0., 0.), smoothstep(0.0, 0.063, x)),vec3(0., 0., 0.), smoothstep(0.063, 0.125, x)),vec3(0.0, 0., 0.), smoothstep(0.125, 0.188, x)),vec3(0.188, 0.131, 0.116), smoothstep(0.188, 0.227, x)),vec3(0.31, 0.204, 0.537), smoothstep(0.227, 0.251, x)),vec3(0.192, 0.106, 0.286), smoothstep(0.251, 0.314, x)),vec3(0.102, 0.008, 0.341), smoothstep(0.314, 0.392, x)),vec3(0.086, 0.0, 0.141), smoothstep(0.392, 0.502, x)),vec3(1.0, 0.31, 0.0), smoothstep(0.502, 0.604, x)),vec3(.1, 0.1, 0.1), smoothstep(0.604, 0.643, x)),vec3(1.0, 0.929, 0.0), smoothstep(0.643, 0.761, x)),vec3(1.0, 0.086, 0.424), smoothstep(0.761, 0.847, x)),vec3(1.0, 0.49, 0.0), smoothstep(0.847, 0.89, x)),vec3(0.945, 0.275, 0.475), smoothstep(0.89, 0.941, x)),vec3(0.251, 0.275, 0.796), smoothstep(0.941, 1.0, x))),1.0);}
+  float diTN(vec2 p){vec2 f = fract(p);f = (f * f) * (3.0 - (2.0 * f));float n = dot(floor(p), vec2(1.0, 157.0));vec4 a = fract(sin(vec4(n + 0.0, n + 1.0, n + 157.0, n + 158.0)) * 43758.5453123);return mix(mix(a.x, a.y, f.x), mix(a.z, a.w, f.x), f.y);}
+  float fbm(vec2 p){const mat2 m = mat2(0.80, -0.60, 0.60, 0.80);float f = 0.0;f += 0.5000*diTN(p); p = m*p*2.02;f += 0.2500*diTN(p); p = m*p*2.03;f += 0.1250*diTN(p); p = m*p*2.01;f += 0.0625*diTN(p);return f/0.9375;}
+  vec4 geLS(vec2 p){vec2 pp = (p - vec2(0.5)) * 2.0;float a = atan(pp.y, pp.x);vec4 cp = vec4(sin(a * 1.0), length(pp), sin(a * 13.0), sin(a * 53.0));float d = sin(clamp(pow(length(vec2(0.5) - p) * 0.5 + haloScale /2., 5.0), 0.0, 1.0) * 3.14159);vec3 c = vec3(d) * vec3(fbm(cp.xy * 16.0) * fbm(cp.zw * 9.0) * max(max(max(max(0.5, sin(a * 1.0)), sin(a * 3.0) * 0.8), sin(a * 7.0) * 0.8), sin(a * 9.0) * 10.6));c *= vec3(mix(2.0, (sin(length(pp.xy) * 256.0) * 0.5) + 0.5, sin((clamp((length(pp.xy) - 0.875) / 0.1, 0.0, 1.0) + 0.0) * 2.0 * 3.14159) * 1.5) + 0.5) * 0.3275;return vec4(vec3(c * 1.0), d);}
+  vec4 geLD(vec2 p){p.xy += vec2(fbm(p.yx * 3.0), fbm(p.yx * 2.0)) * 0.0825;vec3 o = vec3(mix(0.125, 0.25, max(max(smoothstep(0.1, 0.0, length(p - vec2(0.25))),smoothstep(0.4, 0.0, length(p - vec2(0.75)))),smoothstep(0.8, 0.0, length(p - vec2(0.875, 0.125))))));o += vec3(max(fbm(p * 1.0) - 0.5, 0.0)) * 0.5;o += vec3(max(fbm(p * 2.0) - 0.5, 0.0)) * 0.5;o += vec3(max(fbm(p * 4.0) - 0.5, 0.0)) * 0.25;o += vec3(max(fbm(p * 8.0) - 0.75, 0.0)) * 1.0;o += vec3(max(fbm(p * 16.0) - 0.75, 0.0)) * 0.75;o += vec3(max(fbm(p * 64.0) - 0.75, 0.0)) * 0.5;return vec4(clamp(o, vec3(0.15), vec3(1.0)), 1.0);}
+  vec4 txL(sampler2D tex, vec2 xtC){if(((xtC.x < 0.) || (xtC.y < 0.)) || ((xtC.x > 1.) || (xtC.y > 1.))){return vec4(0.0);}else{return texture(tex, xtC); }}
+  vec4 txD(sampler2D tex, vec2 xtC, vec2 dir, vec3 ditn) {return vec4(txL(tex, (xtC + (dir * ditn.r))).r,txL(tex, (xtC + (dir * ditn.g))).g,txL(tex, (xtC + (dir * ditn.b))).b,1.0);}
+  vec4 strB(){vec2 aspXtc = vec2(1.0) - (((vxtC - vec2(0.5)) * vec2(1.0)) + vec2(0.5)); vec2 xtC = vec2(1.0) - vxtC; vec2 ghvc = (vec2(0.5) - xtC) * 0.3 - lensPosition; vec2 ghNm = normalize(ghvc * vec2(1.0)) * vec2(1.0);vec2 haloVec = normalize(ghvc) * 0.6;vec2 hlNm = ghNm * 0.6;vec2 texelSize = vec2(1.0) / vec2(iResolution.xy);vec3 ditn = vec3(-(texelSize.x * 1.5), 0.2, texelSize.x * 1.5);vec4 c = vec4(0.0);for (int i = 0; i < 8; i++) {vec2 offset = xtC + (ghvc * float(i));c += txD(lensDirtTexture, offset, ghNm, ditn) * pow(max(0.0, 1.0 - (length(vec2(0.5) - offset) / length(vec2(0.5)))), 10.0);}vec2 uyTrz = xtC + hlNm; return (c * geLC((length(vec2(0.5) - aspXtc) / length(vec2(haloScale))))) +(txD(lensDirtTexture, uyTrz, ghNm, ditn) * pow(max(0.0, 1.0 - (length(vec2(0.5) - uyTrz) / length(vec2(0.5)))), 10.0));}
+  void mainImage(vec4 v,vec2 r,out vec4 i){vec2 g=r-.5;g.y*=iResolution.y/iResolution.x;vec2 l=lensPosition*.5;l.y*=iResolution.y/iResolution.x;vec3 f=mLs(g,l)*20.*colorGain/256.;if(aditionalStreaks){vec3 o=vec3(.9,.2,.1),p=vec3(.3,.1,.9);for(float n=0.;n<10.;n++)f+=drC(g,pow(rnd(n*2e3)*2.8,.1)+1.41,0.,o+n,p+n,rnd(n*20.)*3.+.2-.5,lensPosition);}if(secondaryGhosts){vec3 n=vec3(0);n+=rHx(g,-lensPosition*.25,ghostScale*1.4,vec3(.25,.35,0));n+=rHx(g,lensPosition*.25,ghostScale*.5,vec3(1,.5,.5));n+=rHx(g,lensPosition*.1,ghostScale*1.6,vec3(1));n+=rHx(g,lensPosition*1.8,ghostScale*2.,vec3(0,.5,.75));n+=rHx(g,lensPosition*1.25,ghostScale*.8,vec3(1,1,.5));n+=rHx(g,-lensPosition*1.25,ghostScale*5.,vec3(.5,.5,.25));n+=fpow(1.-abs(distance(lensPosition*.8,g)-.7),.985)*colorGain/2100.;f+=n;}if(starBurst){vxtC=g+.5;vec4 n=geLD(g);float o=1.-clamp(0.5,0.,.5)*2.;n+=mix(n,pow(n*2.,vec4(2))*.5,o);float s=(g.x+g.y)*(1./6.);vec2 d=mat2(cos(s),-sin(s),sin(s),cos(s))*vxtC;n+=geLS(d)*2.;f+=clamp(n.xyz*strB().xyz,.01,1.);}i=enabled?vec4(mix(f,vec3(0),opacity)+v.xyz,v.w):vec4(v);}
+`,
+};
+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, } = {}) {
+        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)],
+            ]),
+        });
     }
-    set _tetrahedralInterpolation(tetrahedralInterpolation) {
-        this.inputs.set({ tetrahedralInterpolation });
+    update(_renderer, _inputBuffer, deltaTime) {
+        const iTime = this.uniforms.get('iTime');
+        if (iTime) {
+            iTime.value += deltaTime;
+        }
     }
+}
+const defaultOptions$1 = {
+    position: new Vector3(-25, 6, -60),
+    followMouse: false,
+    smoothTime: 0.7,
+};
+class NgtpLensFlare {
     constructor() {
-        this.inputs = signalStore({});
-        this.effectRef = injectNgtRef();
-        this.lut = this.inputs.select('lut');
-        this.tetrahedralInterpolation = this.inputs.select('tetrahedralInterpolation');
-        this.blendFunction = this.inputs.select('blendFunction');
-        this.store = injectNgtStore();
-        this.invalidate = this.store.select('invalidate');
-        this.effect = computed(() => new LUT3DEffect(this.lut(), {
-            blendFunction: this.blendFunction(),
-            tetrahedralInterpolation: this.tetrahedralInterpolation(),
-        }));
-        this.setState();
-    }
-    setState() {
-        effect(() => {
-            const [effect, invalidate, lut, tetrahedralInterpolation] = [
-                this.effect(),
-                this.invalidate(),
-                this.lut(),
-                this.tetrahedralInterpolation(),
-            ];
+        this.autoEffect = injectAutoEffect();
+        this.store = injectStore();
+        this.viewport = this.store.select('viewport');
+        this.raycaster = this.store.select('raycaster');
+        this.pointer = this.store.select('pointer');
+        this.composerApi = injectEffectComposerApi();
+        this.options = input(defaultOptions$1, { transform: mergeInputs(defaultOptions$1) });
+        this.projectedPosition = new Vector3();
+        this.mouse2d = new Vector2();
+        this.effect = computed(() => {
+            const { position: _, followMouse: __, smoothTime: ___, ...options } = this.options();
+            return new LensFlareEffect(options);
+        });
+        afterNextRender(() => {
+            this.autoEffect(() => {
+                const [effect, viewport] = [this.effect(), this.viewport()];
+                const iResolution = effect.uniforms.get('iResolution');
+                if (iResolution) {
+                    iResolution.value.x = viewport.width;
+                    iResolution.value.y = viewport.height;
+                }
+            });
+        });
+        injectBeforeRender(({ delta }) => {
+            const [effect] = [this.effect()];
             if (!effect)
                 return;
-            if (tetrahedralInterpolation)
-                effect.tetrahedralInterpolation = tetrahedralInterpolation;
-            if (lut)
-                effect.lut = lut;
-            invalidate();
+            const [{ followMouse, position, smoothTime }, pointer, { camera, scene }, raycaster] = [
+                this.options(),
+                this.pointer(),
+                this.composerApi(),
+                this.raycaster(),
+            ];
+            const uLensPosition = effect.uniforms.get('lensPosition');
+            const uOpacity = effect.uniforms.get('opacity');
+            if (!uLensPosition || !uOpacity)
+                return;
+            let target = 1;
+            if (followMouse) {
+                uLensPosition.value.x = pointer.x;
+                uLensPosition.value.y = pointer.y;
+                target = 0;
+            }
+            else {
+                this.projectedPosition.copy(position).project(camera);
+                if (this.projectedPosition.z > 1)
+                    return;
+                uLensPosition.value.x = this.projectedPosition.x;
+                uLensPosition.value.y = this.projectedPosition.y;
+                this.mouse2d.set(this.projectedPosition.x, this.projectedPosition.y);
+                raycaster.setFromCamera(this.mouse2d, camera);
+                const intersects = raycaster.intersectObjects(scene.children, true);
+                const { object } = intersects[0] ?? {};
+                if (object) {
+                    if (object.userData?.['lensflare'] === 'no-occlusion') {
+                        target = 0;
+                    }
+                    else if (object instanceof Mesh) {
+                        if (object.material.uniforms?._transmission?.value > 0.2) {
+                            //Check for MeshTransmissionMaterial
+                            target = 0.2;
+                        }
+                        else if (object.material._transmission && object.material._transmission > 0.2) {
+                            //Check for MeshPhysicalMaterial with transmission setting
+                            target = 0.2;
+                        }
+                        else if (object.material.transparent) {
+                            // Check for OtherMaterials with transparent parameter
+                            target = object.material.opacity;
+                        }
+                    }
+                }
+            }
+            easing.damp(uOpacity, 'value', target, smoothTime, delta);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpLUT, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpLUT, isStandalone: true, selector: "ngtp-lut", inputs: { effectRef: "effectRef", _lut: ["lut", "_lut"], _blendFunction: ["blendFunction", "_blendFunction"], _tetrahedralInterpolation: ["tetrahedralInterpolation", "_tetrahedralInterpolation"] }, ngImport: i0, template: `
-		<ngt-primitive *args="[effect()]" [ref]="effectRef" />
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpLensFlare, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.6", type: NgtpLensFlare, isStandalone: true, selector: "ngtp-lens-flare", inputs: { 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: "16.2.2", ngImport: i0, type: NgtpLUT, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpLensFlare, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngtp-lut',
+                    selector: 'ngtp-lens-flare',
                     standalone: true,
                     template: `
-		<ngt-primitive *args="[effect()]" [ref]="effectRef" />
+		<ngt-primitive *args="[effect()]" [dispose]="null" />
 	`,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { effectRef: [{
-                type: Input
-            }], _lut: [{
-                type: Input,
-                args: [{ required: true, alias: 'lut' }]
-            }], _blendFunction: [{
-                type: Input,
-                args: [{ alias: 'blendFunction' }]
-            }], _tetrahedralInterpolation: [{
-                type: Input,
-                args: [{ alias: 'tetrahedralInterpolation' }]
-            }] } });
+        }], ctorParameters: () => [] });
+
+class NgtpLUT {
+    constructor() {
+        this.autoEffect = injectAutoEffect();
+        this.store = injectStore();
+        this.invalidate = this.store.select('invalidate');
+        this.options = input({});
+        this.lut = pick(this.options, 'lut');
+        this.effect = computed(() => {
+            const [lut, { lut: _, ...options }] = [this.lut(), this.options()];
+            return new LUT3DEffect(lut, options);
+        });
+        afterNextRender(() => {
+            this.autoEffect(() => {
+                const [effect, { lut, tetrahedralInterpolation }, invalidate] = [
+                    this.effect(),
+                    this.options(),
+                    this.invalidate(),
+                ];
+                if (tetrahedralInterpolation)
+                    effect.tetrahedralInterpolation = tetrahedralInterpolation;
+                if (lut)
+                    effect.lut = lut;
+                invalidate();
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpLUT, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.6", type: NgtpLUT, isStandalone: true, selector: "ngtp-lut", inputs: { 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: "18.0.6", ngImport: i0, type: NgtpLUT, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-lut',
+                    template: `
+		<ngt-primitive *args="[effect()]" [dispose]="null" />
+	`,
+                    imports: [NgtArgs],
+                    standalone: true,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
 
 extend({ NoiseEffect });
-class NgtpNoise extends NgtpEffect {
+class NgtpNoise {
     constructor() {
-        super(...arguments);
-        this.defaultBlendFunction = BlendFunction.COLOR_DODGE;
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpNoise, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpNoise, isStandalone: true, selector: "ngtp-noise", usesInheritance: true, ngImport: i0, template: `
-		<ngt-noise-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpNoise, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-noise-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-noise-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpNoise, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpNoise, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-noise',
-                    standalone: true,
                     template: `
-		<ngt-noise-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+		<ngt-noise-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-noise-effect>
 	`,
-                    imports: [NgtArgs],
+                    standalone: true,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
+                    providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.COLOR_DODGE })],
                 }]
         }] });
 
 class NgtpPixelation {
     constructor() {
-        this.inputs = signalStore({ granularity: 30 });
-        this.effectRef = injectNgtRef();
-        this.granularity = this.inputs.select('granularity');
+        this.options = input({ granularity: 5 }, { transform: mergeInputs({ granularity: 5 }) });
+        this.granularity = pick(this.options, 'granularity');
         this.effect = computed(() => new PixelationEffect(this.granularity()));
     }
-    set _granularity(granularity) {
-        this.inputs.set({ granularity });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpPixelation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpPixelation, isStandalone: true, selector: "ngtp-pixelation", inputs: { effectRef: "effectRef", _granularity: ["granularity", "_granularity"] }, ngImport: i0, template: `
-		<ngt-primitive *args="[effect()]" [ref]="effectRef" />
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpPixelation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.6", type: NgtpPixelation, isStandalone: true, selector: "ngtp-pixelation", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+		<ngt-primitive *args="[effect()]" />
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpPixelation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpPixelation, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-pixelation',
-                    standalone: true,
                     template: `
-		<ngt-primitive *args="[effect()]" [ref]="effectRef" />
+		<ngt-primitive *args="[effect()]" />
 	`,
-                    imports: [NgtArgs],
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    imports: [NgtArgs],
                 }]
-        }], propDecorators: { effectRef: [{
-                type: Input
-            }], _granularity: [{
-                type: Input,
-                args: [{ alias: 'granularity' }]
-            }] } });
+        }] });
 
 extend({ ScanlineEffect });
-class NgtpScanline extends NgtpEffect {
+const defaultOptions = {
+    density: 1.25,
+};
+class NgtpScanline {
     constructor() {
-        super(...arguments);
-        this.defaultBlendFunction = BlendFunction.OVERLAY;
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input(defaultOptions, { transform: mergeInputs(defaultOptions) });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpScanline, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpScanline, isStandalone: true, selector: "ngtp-scanline", usesInheritance: true, ngImport: i0, template: `
-		<ngt-scanline-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpScanline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-scanline-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-scanline-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpScanline, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpScanline, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-scanline',
-                    standalone: true,
                     template: `
-		<ngt-scanline-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+		<ngt-scanline-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-scanline-effect>
 	`,
-                    imports: [NgtArgs],
+                    standalone: true,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
+                    providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.OVERLAY })],
                 }]
         }] });
 
 extend({ SepiaEffect });
-class NgtpSepia extends NgtpEffect {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpSepia, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpSepia, isStandalone: true, selector: "ngtp-sepia", usesInheritance: true, ngImport: i0, template: `
-		<ngt-sepia-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+class NgtpSepia {
+    constructor() {
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpSepia, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-sepia-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-sepia-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpSepia, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpSepia, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-sepia',
-                    standalone: true,
                     template: `
-		<ngt-sepia-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+		<ngt-sepia-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-sepia-effect>
 	`,
-                    imports: [NgtArgs],
+                    standalone: true,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
                 }]
         }] });
 
 extend({ ShockWaveEffect });
-class NgtpShockWave extends NgtpEffect {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpShockWave, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpShockWave, isStandalone: true, selector: "ngtp-shock-wave", usesInheritance: true, ngImport: i0, template: `
-		<ngt-shock-wave-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+class NgtpShockWave {
+    constructor() {
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpShockWave, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-shock-wave-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-shock-wave-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpShockWave, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpShockWave, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-shock-wave',
-                    standalone: true,
                     template: `
-		<ngt-shock-wave-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+		<ngt-shock-wave-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-shock-wave-effect>
 	`,
-                    imports: [NgtArgs],
+                    standalone: true,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
                 }]
         }] });
 
 extend({ SMAAEffect });
-class NgtpSMAA extends NgtpEffect {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpSMAA, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpSMAA, isStandalone: true, selector: "ngtp-SMAA", usesInheritance: true, ngImport: i0, template: `
-		<ngt-SMAA-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+class NgtpSMAA {
+    constructor() {
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpSMAA, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-sMAA-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
-		</ngt-SMAA-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+		</ngt-sMAA-effect>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpSMAA, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpSMAA, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngtp-SMAA',
-                    standalone: true,
+                    selector: 'ngtp-smaa',
                     template: `
-		<ngt-SMAA-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+		<ngt-sMAA-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
-		</ngt-SMAA-effect>
+		</ngt-sMAA-effect>
 	`,
-                    imports: [NgtArgs],
+                    standalone: true,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
                 }]
         }] });
 
-class NgtpSSAO {
+extend({ TiltShiftEffect });
+class NgtpTiltShift {
     constructor() {
-        this.inputs = signalStore({
-            blendFunction: BlendFunction.MULTIPLY,
-            samples: 30,
-            rings: 4,
-            distanceThreshold: 1.0,
-            distanceFalloff: 0.0,
-            rangeThreshold: 0.5,
-            rangeFalloff: 0.1,
-            luminanceInfluence: 0.9,
-            radius: 20,
-            bias: 0.5,
-            intensity: 1.0,
-            depthAwareUpsampling: true,
-        });
-        this.effectRef = injectNgtRef();
-        this.effectComposerApi = injectNgtpEffectComposerApi();
-        this.effect = computed(() => {
-            const [state, { camera, normalPass, downSamplingPass, resolutionScale }] = [
-                this.inputs.state(),
-                this.effectComposerApi(),
-            ];
-            if (normalPass === null && downSamplingPass === null) {
-                console.error('Please enable the NormalPass in the NgtpEffectComposer in order to use NgtpSSAO.');
-                return null;
-            }
-            return new SSAOEffect(camera, normalPass && !downSamplingPass ? normalPass.texture : null, {
-                ...state,
-                // @ts-expect-error
-                normalDepthBuffer: state.normalDepthBuffer || (downSamplingPass ? downSamplingPass.texture : null),
-                resolutionScale: state.resolutionScale || (resolutionScale ?? 1),
-                depthAwareUpsampling: state.depthAwareUpsampling ?? true,
-            });
-        });
-    }
-    set _blendFunction(blendFunction) {
-        this.inputs.set({ blendFunction });
-    }
-    set _distanceScaling(distanceScaling) {
-        this.inputs.set({ distanceScaling });
-    }
-    set _depthAwareUpsampling(depthAwareUpsampling) {
-        this.inputs.set({ depthAwareUpsampling });
-    }
-    set _normalDepthBuffer(normalDepthBuffer) {
-        this.inputs.set({ normalDepthBuffer });
-    }
-    set _samples(samples) {
-        this.inputs.set({ samples });
-    }
-    set _rings(rings) {
-        this.inputs.set({ rings });
-    }
-    set _worldDistanceThreshold(worldDistanceThreshold) {
-        this.inputs.set({ worldDistanceThreshold });
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
     }
-    set _worldDistanceFalloff(worldDistanceFalloff) {
-        this.inputs.set({ worldDistanceFalloff });
-    }
-    set _worldProximityThreshold(worldProximityThreshold) {
-        this.inputs.set({ worldProximityThreshold });
-    }
-    set _worldProximityFalloff(worldProximityFalloff) {
-        this.inputs.set({ worldProximityFalloff });
-    }
-    set _distanceThreshold(distanceThreshold) {
-        this.inputs.set({ distanceThreshold });
-    }
-    set _distanceFalloff(distanceFalloff) {
-        this.inputs.set({ distanceFalloff });
-    }
-    set _rangeThreshold(rangeThreshold) {
-        this.inputs.set({ rangeThreshold });
-    }
-    set _rangeFalloff(rangeFalloff) {
-        this.inputs.set({ rangeFalloff });
-    }
-    set _minRadiusScale(minRadiusScale) {
-        this.inputs.set({ minRadiusScale });
-    }
-    set _luminanceInfluence(luminanceInfluence) {
-        this.inputs.set({ luminanceInfluence });
-    }
-    set _radius(radius) {
-        this.inputs.set({ radius });
-    }
-    set _intensity(intensity) {
-        this.inputs.set({ intensity });
-    }
-    set _bias(bias) {
-        this.inputs.set({ bias });
-    }
-    set _fade(fade) {
-        this.inputs.set({ fade });
-    }
-    set _color(color) {
-        this.inputs.set({ color });
-    }
-    set _resolutionScale(resolutionScale) {
-        this.inputs.set({ resolutionScale });
-    }
-    set _resolutionX(resolutionX) {
-        this.inputs.set({ resolutionX });
-    }
-    set _resolutionY(resolutionY) {
-        this.inputs.set({ resolutionY });
-    }
-    set _width(width) {
-        this.inputs.set({ width });
-    }
-    set _height(height) {
-        this.inputs.set({ height });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpSSAO, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpSSAO, isStandalone: true, selector: "ngtp-SSAO", inputs: { effectRef: "effectRef", _blendFunction: ["blendFunction", "_blendFunction"], _distanceScaling: ["distanceScaling", "_distanceScaling"], _depthAwareUpsampling: ["depthAwareUpsampling", "_depthAwareUpsampling"], _normalDepthBuffer: ["normalDepthBuffer", "_normalDepthBuffer"], _samples: ["samples", "_samples"], _rings: ["rings", "_rings"], _worldDistanceThreshold: ["worldDistanceThreshold", "_worldDistanceThreshold"], _worldDistanceFalloff: ["worldDistanceFalloff", "_worldDistanceFalloff"], _worldProximityThreshold: ["worldProximityThreshold", "_worldProximityThreshold"], _worldProximityFalloff: ["worldProximityFalloff", "_worldProximityFalloff"], _distanceThreshold: ["distanceThreshold", "_distanceThreshold"], _distanceFalloff: ["distanceFalloff", "_distanceFalloff"], _rangeThreshold: ["rangeThreshold", "_rangeThreshold"], _rangeFalloff: ["rangeFalloff", "_rangeFalloff"], _minRadiusScale: ["minRadiusScale", "_minRadiusScale"], _luminanceInfluence: ["luminanceInfluence", "_luminanceInfluence"], _radius: ["radius", "_radius"], _intensity: ["intensity", "_intensity"], _bias: ["bias", "_bias"], _fade: ["fade", "_fade"], _color: ["color", "_color"], _resolutionScale: ["resolutionScale", "_resolutionScale"], _resolutionX: ["resolutionX", "_resolutionX"], _resolutionY: ["resolutionY", "_resolutionY"], _width: ["width", "_width"], _height: ["height", "_height"] }, ngImport: i0, template: `
-		<ngt-primitive *args="[effect()]" [ref]="effectRef" />
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpTiltShift, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-tilt-shift-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
+			<ng-content />
+		</ngt-tilt-shift-effect>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpSSAO, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpTiltShift, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngtp-SSAO',
-                    standalone: true,
+                    selector: 'ngtp-tilt-shift',
                     template: `
-		<ngt-primitive *args="[effect()]" [ref]="effectRef" />
+		<ngt-tilt-shift-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
+			<ng-content />
+		</ngt-tilt-shift-effect>
 	`,
-                    imports: [NgtArgs],
+                    standalone: true,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
+                    providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })],
                 }]
-        }], propDecorators: { effectRef: [{
-                type: Input
-            }], _blendFunction: [{
-                type: Input,
-                args: [{ alias: 'blendFunction' }]
-            }], _distanceScaling: [{
-                type: Input,
-                args: [{ alias: 'distanceScaling' }]
-            }], _depthAwareUpsampling: [{
-                type: Input,
-                args: [{ alias: 'depthAwareUpsampling' }]
-            }], _normalDepthBuffer: [{
-                type: Input,
-                args: [{ alias: 'normalDepthBuffer' }]
-            }], _samples: [{
-                type: Input,
-                args: [{ alias: 'samples' }]
-            }], _rings: [{
-                type: Input,
-                args: [{ alias: 'rings' }]
-            }], _worldDistanceThreshold: [{
-                type: Input,
-                args: [{ alias: 'worldDistanceThreshold' }]
-            }], _worldDistanceFalloff: [{
-                type: Input,
-                args: [{ alias: 'worldDistanceFalloff' }]
-            }], _worldProximityThreshold: [{
-                type: Input,
-                args: [{ alias: 'worldProximityThreshold' }]
-            }], _worldProximityFalloff: [{
-                type: Input,
-                args: [{ alias: 'worldProximityFalloff' }]
-            }], _distanceThreshold: [{
-                type: Input,
-                args: [{ alias: 'distanceThreshold' }]
-            }], _distanceFalloff: [{
-                type: Input,
-                args: [{ alias: 'distanceFalloff' }]
-            }], _rangeThreshold: [{
-                type: Input,
-                args: [{ alias: 'rangeThreshold' }]
-            }], _rangeFalloff: [{
-                type: Input,
-                args: [{ alias: 'rangeFalloff' }]
-            }], _minRadiusScale: [{
-                type: Input,
-                args: [{ alias: 'minRadiusScale' }]
-            }], _luminanceInfluence: [{
-                type: Input,
-                args: [{ alias: 'luminanceInfluence' }]
-            }], _radius: [{
-                type: Input,
-                args: [{ alias: 'radius' }]
-            }], _intensity: [{
-                type: Input,
-                args: [{ alias: 'intensity' }]
-            }], _bias: [{
-                type: Input,
-                args: [{ alias: 'bias' }]
-            }], _fade: [{
-                type: Input,
-                args: [{ alias: 'fade' }]
-            }], _color: [{
-                type: Input,
-                args: [{ alias: 'color' }]
-            }], _resolutionScale: [{
-                type: Input,
-                args: [{ alias: 'resolutionScale' }]
-            }], _resolutionX: [{
-                type: Input,
-                args: [{ alias: 'resolutionX' }]
-            }], _resolutionY: [{
-                type: Input,
-                args: [{ alias: 'resolutionY' }]
-            }], _width: [{
-                type: Input,
-                args: [{ alias: 'width' }]
-            }], _height: [{
-                type: Input,
-                args: [{ alias: 'height' }]
-            }] } });
+        }] });
 
-extend({ TiltShiftEffect });
-class NgtpTiltShift extends NgtpEffect {
+const TiltShiftShader = {
+    fragmentShader: `
+
+    // original shader by Evan Wallace
+
+    #define MAX_ITERATIONS 100
+
+    uniform float blur;
+    uniform float taper;
+    uniform vec2 start;
+    uniform vec2 end;
+    uniform vec2 direction;
+    uniform int samples;
+
+    float random(vec3 scale, float seed) {
+        /* use the fragment position for a different seed per-pixel */
+        return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
+    }
+
+    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+        vec4 color = vec4(0.0);
+        float total = 0.0;
+        vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);
+        vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);
+        float f_samples = float(samples);
+        float half_samples = f_samples / 2.0;
+
+        // use screen diagonal to normalize blur radii
+        float maxScreenDistance = distance(vec2(0.0), resolution); // diagonal distance
+        float gradientRadius = taper * (maxScreenDistance);
+        float blurRadius = blur * (maxScreenDistance / 16.0);
+
+        /* randomize the lookup values to hide the fixed number of samples */
+        float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
+        vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));
+        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradientRadius) * blurRadius;
+
+        #pragma unroll_loop_start
+        for (int i = 0; i <= MAX_ITERATIONS; i++) {
+            if (i >= samples) { break; } // return early if over sample count
+            float f_i = float(i);
+            float s_i = -half_samples + f_i;
+            float percent = (s_i + offset - 0.5) / half_samples;
+            float weight = 1.0 - abs(percent);
+            vec4 sample_i = texture2D(inputBuffer, uv + normalize(direction) / resolution * percent * radius);
+            /* switch to pre-multiplied alpha to correctly blur transparent images */
+            sample_i.rgb *= sample_i.a;
+            color += sample_i * weight;
+            total += weight;
+        }
+        #pragma unroll_loop_end
+
+        outputColor = color / total;
+
+        /* switch back from pre-multiplied alpha */
+        outputColor.rgb /= outputColor.a + 0.00001;
+    }
+    `,
+};
+class TiltShift2Effect extends Effect {
+    constructor({ blendFunction = BlendFunction.NORMAL, blur = 0.15, // [0, 1], can go beyond 1 for extra
+    taper = 0.5, // [0, 1], can go beyond 1 for extra
+    start = [0.5, 0.0], // [0,1] percentage x,y of screenspace
+    end = [0.5, 1.0], // [0,1] percentage x,y of screenspace
+    samples = 10.0, // number of blur samples
+    direction = [1, 1], // direction of blur
+     } = {}) {
+        super('TiltShiftEffect', TiltShiftShader.fragmentShader, {
+            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)],
+            ]),
+        });
+    }
+}
+extend({ TiltShift2Effect });
+class NgtpTiltShift2 {
     constructor() {
-        super(...arguments);
-        this.defaultBlendFunction = BlendFunction.ADD;
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpTiltShift, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpTiltShift, isStandalone: true, selector: "ngtp-tilt-shift", usesInheritance: true, ngImport: i0, template: `
-		<ngt-tilt-shift-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpTiltShift2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-tilt-shift2-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
-		</ngt-tilt-shift-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+		</ngt-tilt-shift2-effect>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpTiltShift, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpTiltShift2, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngtp-tilt-shift',
+                    selector: 'ngtp-tilt-shift2',
                     standalone: true,
                     template: `
-		<ngt-tilt-shift-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+		<ngt-tilt-shift2-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
-		</ngt-tilt-shift-effect>
+		</ngt-tilt-shift2-effect>
 	`,
-                    imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
+                    providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })],
                 }]
         }] });
 
-extend({ ToneMappingEffect });
-class NgtpToneMapping extends NgtpEffect {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpToneMapping, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpToneMapping, isStandalone: true, selector: "ngtp-tone-mapping", usesInheritance: true, ngImport: i0, template: `
-		<ngt-tone-mapping-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+extend({ VignetteEffect });
+class NgtpVignette {
+    constructor() {
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpVignette, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-vignette-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
-		</ngt-tone-mapping-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+		</ngt-vignette-effect>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpToneMapping, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpVignette, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngtp-tone-mapping',
-                    standalone: true,
+                    selector: 'ngtp-vignette',
                     template: `
-		<ngt-tone-mapping-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+		<ngt-vignette-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
-		</ngt-tone-mapping-effect>
+		</ngt-vignette-effect>
 	`,
-                    imports: [NgtArgs],
+                    standalone: true,
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
                 }]
         }] });
 
-extend({ VignetteEffect });
-class NgtpVignette extends NgtpEffect {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpVignette, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: NgtpVignette, isStandalone: true, selector: "ngtp-vignette", usesInheritance: true, ngImport: i0, template: `
-		<ngt-vignette-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+const WaterShader = {
+    fragmentShader: `
+  uniform float factor;
+  void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+    vec2 vUv = uv;
+    float frequency = 6.0 * factor;
+    float amplitude = 0.015 * factor;
+    float x = vUv.y * frequency + time * .7;
+    float y = vUv.x * frequency + time * .3;
+    vUv.x += cos(x+y) * amplitude * cos(y);
+    vUv.y += sin(x-y) * amplitude * cos(y);
+    vec4 rgba = texture2D(inputBuffer, vUv);
+    outputColor = rgba;
+  }`,
+};
+class WaterEffect extends Effect {
+    constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {
+        super('WaterEffect', WaterShader.fragmentShader, {
+            blendFunction,
+            attributes: EffectAttribute.CONVOLUTION,
+            uniforms: new Map([['factor', new Uniform(factor)]]),
+        });
+    }
+}
+extend({ WaterEffect });
+class NgtpWater {
+    constructor() {
+        this.effect = inject(NgtpEffect, { host: true });
+        this.options = input({});
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpWater, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.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: `
+		<ngt-water-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
-		</ngt-vignette-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+		</ngt-water-effect>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }, { kind: "component", type: NgtpEffectBlendMode, selector: "ngtp-effect-blend-mode" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpVignette, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: NgtpWater, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngtp-vignette',
+                    selector: 'ngtp-water',
                     standalone: true,
                     template: `
-		<ngt-vignette-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+		<ngt-water-effect *args="[options()]" [camera]="effect.camera()">
+			<ngtp-effect-blend-mode />
 			<ng-content />
-		</ngt-vignette-effect>
+		</ngt-water-effect>
 	`,
-                    imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgtArgs, NgtpEffectBlendMode],
+                    hostDirectives: [NgtpEffectHostDirective],
+                    providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.NORMAL })],
                 }]
         }] });
 
@@ -992,5 +1485,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgtpBloom, NgtpBrightnessContrast, NgtpColorDepth, NgtpDepth, NgtpDotScreen, NgtpEffect, NgtpEffectComposer, NgtpHueSaturation, NgtpLUT, NgtpNoise, NgtpPixelation, NgtpSMAA, NgtpSSAO, NgtpScanline, NgtpSepia, NgtpShockWave, NgtpTiltShift, NgtpToneMapping, NgtpVignette, injectNgtpEffectComposerApi, provideNgtpEffectComposerApi };
+export { ASCIIEffect, LensFlareEffect, NgtpASCII, NgtpBloom, NgtpBrightnessContrast, NgtpChromaticAberration, NgtpColorAverage, NgtpColorDepth, NgtpDepth, NgtpDepthOfField, NgtpDotScreen, NgtpEffect, NgtpEffectBlendMode, NgtpEffectComposer, NgtpEffectHostDirective, NgtpFXAA, NgtpGlitch, NgtpGodRays, NgtpGrid, NgtpHueSaturation, NgtpLUT, NgtpLensFlare, NgtpNoise, NgtpPixelation, NgtpSMAA, NgtpScanline, NgtpSepia, NgtpShockWave, NgtpTiltShift, NgtpTiltShift2, NgtpVignette, NgtpWater, TiltShift2Effect, WaterEffect, injectDefaultEffectOptions, injectEffectComposerApi, provideDefaultEffectOptions, provideEffectComposerApi };
 //# sourceMappingURL=angular-three-postprocessing.mjs.map