angular-three-postprocessing 2.0.0-beta.22 → 2.0.0-beta.235

package/fesm2022/angular-three-postprocessing.mjs

@@ -1,223 +1,212 @@
 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, ViewContainerRef, contentChild, TemplateRef, afterNextRender } from '@angular/core';
+import { injectNgtRef, injectNgtStore, extend, injectBeforeRender, getLocalState, NgtArgs } from 'angular-three';
+import { injectAutoEffect } from 'ngxtension/auto-effect';
+import { createNoopInjectionToken } from 'ngxtension/create-injection-token';
+import { mergeInputs } from 'ngxtension/inject-inputs';
+import { EffectAttribute, EffectComposer, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectPass, Pass, BloomEffect, BlendFunction } from 'postprocessing';
+import { Group, HalfFloatType, NoToneMapping } from 'three';
 import { isWebGL2Available } from 'three-stdlib';
 
+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.3", ngImport: i0, type: NgtpEffectBlendMode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.3", 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.3", 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 {
-    set _blendFunction(blendFunction) {
-        this.inputs.set({ blendFunction });
-    }
-    set _opacity(opacity) {
-        this.inputs.set({ opacity });
-    }
     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.defaultEffectOptions = injectDefaultEffectOptions({ optional: true });
+        this.effectRef = input(injectNgtRef());
+        this.blendFunction = input(this.defaultEffectOptions?.blendFunction);
+        this.opacity = input(this.defaultEffectOptions?.opacity);
+        this.autoEffect = injectAutoEffect();
         this.store = injectNgtStore();
         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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.3", type: NgtpEffect, isStandalone: true, inputs: { effectRef: { classPropertyName: "effectRef", publicName: "effectRef", isSignal: true, isRequired: false, transformFunction: null }, 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: "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' }]
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtpEffect, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }] });
+const NgtpEffectHostDirective = { directive: NgtpEffect, inputs: ['blendFunction', 'opacity', 'effectRef'] };
 
 extend({ Group });
-const [injectNgtpEffectComposerApi, provideNgtpEffectComposerApi] = createInjectionToken((composer) => composer.api, { isRoot: false, deps: [forwardRef(() => NgtpEffectComposer)] });
+const defaultOptions = {
+    enabled: true,
+    renderPriority: 1,
+    autoClear: true,
+    multisampling: 8,
+    frameBufferType: HalfFloatType,
+};
+function isConvolution(effect) {
+    return (effect.getAttributes() & EffectAttribute.CONVOLUTION) === EffectAttribute.CONVOLUTION;
+}
+class NgtpEffects {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtpEffects, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: NgtpEffects, isStandalone: true, selector: "ng-template[effects]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtpEffects, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[effects]', standalone: true }]
+        }] });
 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, { transform: mergeInputs(defaultOptions) });
         this.injector = inject(Injector);
+        this.autoEffect = injectAutoEffect();
         this.store = injectNgtStore();
+        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 = computed(() => this.options().depthBuffer);
+        this.stencilBuffer = computed(() => this.options().stencilBuffer);
+        this.multisampling = computed(() => this.options().multisampling);
+        this.frameBufferType = computed(() => this.options().frameBufferType);
+        this.scene = computed(() => this.options().scene ?? this.defaultScene());
+        this.camera = computed(() => this.options().camera ?? this.defaultCamera());
+        this.enableNormalPass = computed(() => this.options().enableNormalPass);
+        this.resolutionScale = computed(() => this.options().resolutionScale);
+        this.group = viewChild.required('group');
+        this.groupAnchor = viewChild.required('group', { read: ViewContainerRef });
+        this.content = contentChild.required(NgtpEffects, { read: TemplateRef });
+        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(),
-                this.resolutionScale(),
-                this.activeCamera(),
-                this.activeScene(),
-            ];
-            return { composer, normalPass, downSamplingPass, resolutionScale, camera, scene };
+        afterNextRender(() => {
+            this.disableToneMapping();
+            this.setComposerSize();
+            this.render();
+            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);
+            }
         });
     }
+    render() {
+        this.autoEffect((injector) => {
+            const ref = this.groupAnchor().createEmbeddedView(this.content(), {}, { injector });
+            ref.detectChanges();
+            return () => ref.destroy();
+        }, { allowSignalWrites: true });
+    }
     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 +214,72 @@ 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">
-			<ng-content />
-		</ngt-group>
-	`, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: NgtpEffectComposer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.0.3", type: NgtpEffectComposer, isStandalone: true, selector: "ngtp-effect-composer", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "content", first: true, predicate: NgtpEffects, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "group", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "groupAnchor", first: true, predicate: ["group"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+		<ngt-group #group ngtCompound></ngt-group>
+	`, 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.3", ngImport: i0, type: NgtpEffectComposer, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-effect-composer',
                     standalone: true,
                     template: `
-		<ngt-group [ref]="composerRef">
-			<ng-content />
-		</ngt-group>
+		<ngt-group #group ngtCompound></ngt-group>
 	`,
-                    providers: [provideNgtpEffectComposerApi()],
                     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: () => [] });
 
 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.3", ngImport: i0, type: NgtpBloom, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.3", 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", "effectRef", "effectRef"] }], ngImport: i0, template: `
+		<ngt-bloom-effect *args="[options()]" [camera]="effect.camera()" [ref]="effect.effectRef()" ngtCompound>
+			<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.3", 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()" [ref]="effect.effectRef()" ngtCompound>
+			<ngtp-effect-blend-mode />
 			<ng-content />
 		</ngt-bloom-effect>
 	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-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">
-			<ng-content />
-		</ngt-brightness-contrast-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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">
-			<ng-content />
-		</ngt-brightness-contrast-effect>
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-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">
-			<ng-content />
-		</ngt-color-depth-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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">
-			<ng-content />
-		</ngt-color-depth-effect>
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-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">
-			<ng-content />
-		</ngt-depth-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpDepth, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngtp-depth',
-                    standalone: true,
-                    template: `
-		<ngt-depth-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
-			<ng-content />
-		</ngt-depth-effect>
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-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">
-			<ng-content />
-		</ngt-dot-screen-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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">
-			<ng-content />
-		</ngt-dot-screen-effect>
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-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">
-			<ng-content />
-		</ngt-hue-saturation-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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">
-			<ng-content />
-		</ngt-hue-saturation-effect>
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-class NgtpLUT {
-    set _lut(lut) {
-        this.inputs.set({ lut });
-    }
-    set _blendFunction(blendFunction) {
-        this.inputs.set({ blendFunction });
-    }
-    set _tetrahedralInterpolation(tetrahedralInterpolation) {
-        this.inputs.set({ tetrahedralInterpolation });
-    }
-    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(),
-            ];
-            if (!effect)
-                return;
-            if (tetrahedralInterpolation)
-                effect.tetrahedralInterpolation = tetrahedralInterpolation;
-            if (lut)
-                effect.lut = lut;
-            invalidate();
-        });
-    }
-    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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpLUT, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngtp-lut',
-                    standalone: true,
-                    template: `
-		<ngt-primitive *args="[effect()]" [ref]="effectRef" />
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], 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' }]
-            }] } });
-
-extend({ NoiseEffect });
-class NgtpNoise extends NgtpEffect {
-    constructor() {
-        super(...arguments);
-        this.defaultBlendFunction = BlendFunction.COLOR_DODGE;
-    }
-    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">
-			<ng-content />
-		</ngt-noise-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpNoise, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngtp-noise',
-                    standalone: true,
-                    template: `
-		<ngt-noise-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
-			<ng-content />
-		</ngt-noise-effect>
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-class NgtpPixelation {
-    constructor() {
-        this.inputs = signalStore({ granularity: 30 });
-        this.effectRef = injectNgtRef();
-        this.granularity = this.inputs.select('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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpPixelation, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngtp-pixelation',
-                    standalone: true,
-                    template: `
-		<ngt-primitive *args="[effect()]" [ref]="effectRef" />
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], propDecorators: { effectRef: [{
-                type: Input
-            }], _granularity: [{
-                type: Input,
-                args: [{ alias: 'granularity' }]
-            }] } });
-
-extend({ ScanlineEffect });
-class NgtpScanline extends NgtpEffect {
-    constructor() {
-        super(...arguments);
-        this.defaultBlendFunction = BlendFunction.OVERLAY;
-    }
-    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">
-			<ng-content />
-		</ngt-scanline-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpScanline, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngtp-scanline',
-                    standalone: true,
-                    template: `
-		<ngt-scanline-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
-			<ng-content />
-		</ngt-scanline-effect>
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-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">
-			<ng-content />
-		</ngt-sepia-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpSepia, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngtp-sepia',
-                    standalone: true,
-                    template: `
-		<ngt-sepia-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
-			<ng-content />
-		</ngt-sepia-effect>
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-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">
-			<ng-content />
-		</ngt-shock-wave-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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">
-			<ng-content />
-		</ngt-shock-wave-effect>
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-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">
-			<ng-content />
-		</ngt-SMAA-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpSMAA, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngtp-SMAA',
-                    standalone: true,
-                    template: `
-		<ngt-SMAA-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
-			<ng-content />
-		</ngt-SMAA-effect>
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-class NgtpSSAO {
-    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 });
-    }
-    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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpSSAO, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngtp-SSAO',
-                    standalone: true,
-                    template: `
-		<ngt-primitive *args="[effect()]" [ref]="effectRef" />
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }], 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 {
-    constructor() {
-        super(...arguments);
-        this.defaultBlendFunction = BlendFunction.ADD;
-    }
-    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">
-			<ng-content />
-		</ngt-tilt-shift-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpTiltShift, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngtp-tilt-shift',
-                    standalone: true,
-                    template: `
-		<ngt-tilt-shift-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
-			<ng-content />
-		</ngt-tilt-shift-effect>
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-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">
-			<ng-content />
-		</ngt-tone-mapping-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpToneMapping, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngtp-tone-mapping',
-                    standalone: true,
-                    template: `
-		<ngt-tone-mapping-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
-			<ng-content />
-		</ngt-tone-mapping-effect>
-	`,
-                    imports: [NgtArgs],
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                }]
-        }] });
-
-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">
-			<ng-content />
-		</ngt-vignette-effect>
-	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: NgtpVignette, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngtp-vignette',
-                    standalone: true,
-                    template: `
-		<ngt-vignette-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
-			<ng-content />
-		</ngt-vignette-effect>
-	`,
-                    imports: [NgtArgs],
+                    imports: [NgtArgs, NgtpEffectBlendMode],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [NgtpEffectHostDirective],
+                    providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD })],
                 }]
         }] });
 
@@ -992,5 +287,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 { NgtpBloom, NgtpEffect, NgtpEffectBlendMode, NgtpEffectComposer, NgtpEffectHostDirective, NgtpEffects, injectDefaultEffectOptions, provideDefaultEffectOptions };
 //# sourceMappingURL=angular-three-postprocessing.mjs.map