angular-three-postprocessing 1.6.1 → 2.0.0-beta.11

package/fesm2022/angular-three-postprocessing.mjs

@@ -1,168 +1,160 @@
 import * as i0 from '@angular/core';
-import { inject, Directive, Input, reflectComponentType, InjectionToken, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { NgtRxStore, NgtStore, startWithUndefined, extend, injectNgtRef, getLocalState } from 'angular-three';
-import { BlendFunction, EffectComposer, RenderPass, NormalPass, DepthDownsamplingPass, EffectPass } from 'postprocessing';
-import { combineLatest, map } from 'rxjs';
-import { RxActionFactory } from '@rx-angular/state/actions';
+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 { isWebGL2Available } from 'three-stdlib';
 
-class NgtpEffect extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.defaultBlendMode = BlendFunction.NORMAL;
-        this.store = inject(NgtStore);
-    }
-    set blendFunction(blendFunction) {
-        this.set({ blendFunction });
-    }
-    set opacity(opacity) {
-        this.set({ opacity });
+class NgtpEffect {
+    set _blendFunction(blendFunction) {
+        this.inputs.set({ blendFunction });
     }
-    ngOnChanges(changes) {
-        this.set((s) => ({
-            ...s,
-            ...simpleChangesToStateObject(changes, ['blendFunction', 'opacity']),
-        }));
+    set _opacity(opacity) {
+        this.inputs.set({ opacity });
     }
-    ngOnInit() {
-        this.connect('effect', componentInputsToCombinedStream(this), (props) => {
-            delete props['__ngt_dummy__'];
-            delete props['effect'];
-            return new this.effectConstructor(props);
+    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.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.configureBlendMode();
-    }
-    configureBlendMode() {
-        this.hold(combineLatest([
-            this.select('effect'),
-            this.select('blendFunction').pipe(startWithUndefined()),
-            this.select('opacity').pipe(startWithUndefined()),
-        ]), ([effect, blendFunction, opacity]) => {
-            const invalidate = this.store.get('invalidate');
+        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.defaultBlendMode : 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.0.0", ngImport: i0, type: NgtpEffect, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.0", type: NgtpEffect, inputs: { blendFunction: "blendFunction", opacity: "opacity" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.0", type: NgtpEffect, inputs: { effectRef: "effectRef", _blendFunction: ["blendFunction", "_blendFunction"], _opacity: ["opacity", "_opacity"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpEffect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtpEffect, decorators: [{
             type: Directive
-        }], propDecorators: { blendFunction: [{
-                type: Input
-            }], opacity: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { effectRef: [{
                 type: Input
+            }], _blendFunction: [{
+                type: Input,
+                args: [{ alias: 'blendFunction' }]
+            }], _opacity: [{
+                type: Input,
+                args: [{ alias: 'opacity' }]
             }] } });
-function simpleChangesToStateObject(changes, keysToDelete = []) {
-    for (const key of keysToDelete) {
-        if (changes[key])
-            delete changes[key];
-    }
-    return Object.entries(changes).reduce((obj, [key, change]) => {
-        obj[key] = change.currentValue;
-        return obj;
-    }, {});
-}
-function componentInputsToCombinedStream(component, filterFn = () => true) {
-    const inputs = reflectComponentType(component.constructor)
-        ?.inputs.filter(filterFn)
-        .map((input) => input.propName) || [];
-    return combineLatest(inputs.reduce((combined, input) => {
-        let input$ = component.select(input);
-        if (component.get(input) === undefined) {
-            input$ = input$.pipe(startWithUndefined());
-        }
-        combined[input] = input$;
-        return combined;
-    }, {}));
-}
 
 extend({ Group });
-const NGTP_EFFECT_COMPOSER_API = new InjectionToken('NgtpEffectComposer API');
-function effectComposerApiFactory(composer) {
-    const api = {};
-    Object.defineProperties(api, {
-        composer: { get: () => composer.get('entities')[0] },
-        normalPass: { get: () => composer.get('entities')[1] },
-        downSamplingPass: { get: () => composer.get('entities')[2] },
-        resolutionScale: { get: () => composer.get('resolutionScale') },
-        scene: { get: () => composer.get('activeScene') },
-        camera: { get: () => composer.get('activeCamera') },
-        select: { get: () => composer.select.bind(composer) },
-        get: { get: () => composer.get.bind(composer) },
-    });
-    return api;
-}
-class NgtpEffectComposer extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.composerRef = injectNgtRef();
-        this.store = inject(NgtStore);
-        this.actions = inject((RxActionFactory)).create();
+const [injectNgtpEffectComposerApi, provideNgtpEffectComposerApi] = createInjectionToken((composer) => composer.api, { isRoot: false, deps: [forwardRef(() => NgtpEffectComposer)] });
+class NgtpEffectComposer {
+    set _enabled(enabled) {
+        this.inputs.set({ enabled });
     }
-    set enabled(enabled) {
-        this.set({ enabled });
+    set _depthBuffer(depthBuffer) {
+        this.inputs.set({ depthBuffer });
     }
-    set depthBuffer(depthBuffer) {
-        this.set({ depthBuffer });
+    set _disableNormalPass(disableNormalPass) {
+        this.inputs.set({ disableNormalPass });
     }
-    set disableNormalPass(disableNormalPass) {
-        this.set({ disableNormalPass });
+    set _stencilBuffer(stencilBuffer) {
+        this.inputs.set({ stencilBuffer });
     }
-    set stencilBuffer(stencilBuffer) {
-        this.set({ stencilBuffer });
+    set _autoClear(autoClear) {
+        this.inputs.set({ autoClear });
     }
-    set autoClear(autoClear) {
-        this.set({ autoClear });
+    set _resolutionScale(resolutionScale) {
+        this.inputs.set({ resolutionScale });
     }
-    set resolutionScale(resolutionScale) {
-        this.set({ resolutionScale });
+    set _multisampling(multisampling) {
+        this.inputs.set({ multisampling });
     }
-    set multisampling(multisampling) {
-        this.set({ multisampling });
+    set _frameBufferType(frameBufferType) {
+        this.inputs.set({ frameBufferType });
     }
-    set frameBufferType(frameBufferType) {
-        this.set({ frameBufferType });
+    set _renderPriority(renderPriority) {
+        this.inputs.set({ renderPriority });
     }
-    set renderPriority(renderPriority) {
-        this.set({ renderPriority });
+    set _camera(camera) {
+        this.inputs.set({ camera });
     }
-    set camera(camera) {
-        this.set({ camera });
+    set _scene(scene) {
+        this.inputs.set({ scene });
     }
-    set scene(scene) {
-        this.set({ scene });
-    }
-    initialize() {
-        super.initialize();
-        this.set({
+    constructor() {
+        this.inputs = signalStore({
             enabled: true,
             renderPriority: 1,
             autoClear: true,
-            multisampling: 0,
+            multisampling: 8,
             frameBufferType: THREE.HalfFloatType,
         });
-    }
-    ngOnInit() {
-        this.connect('activeScene', combineLatest([this.store.select('scene'), this.select('scene').pipe(startWithUndefined())]).pipe(map(([defaultScene, scene]) => scene || defaultScene)));
-        this.connect('activeCamera', combineLatest([this.store.select('camera'), this.select('camera').pipe(startWithUndefined())]).pipe(map(([defaultCamera, camera]) => camera || defaultCamera)));
-        this.connect('entities', combineLatest([
-            this.store.select('gl'),
-            this.select('activeScene'),
-            this.select('activeCamera'),
-            this.select('multisampling'),
-            this.select('frameBufferType'),
-            this.select('depthBuffer').pipe(startWithUndefined()),
-            this.select('stencilBuffer').pipe(startWithUndefined()),
-            this.select('disableNormalPass').pipe(startWithUndefined()),
-            this.select('resolutionScale').pipe(startWithUndefined()),
-        ]).pipe(map(([gl, scene, camera, multisampling, frameBufferType, depthBuffer, stencilBuffer, disableNormalPass, resolutionScale,]) => {
+        this.composerRef = injectNgtRef();
+        this.injector = inject(Injector);
+        this.store = injectNgtStore();
+        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(() => {
             const webGL2Available = isWebGL2Available();
+            const [gl, depthBuffer, stencilBuffer, multisampling, frameBufferType, scene, camera, disableNormalPass, resolutionScale,] = [
+                this.gl(),
+                this.depthBuffer(),
+                this.stencilBuffer(),
+                this.multisampling(),
+                this.frameBufferType(),
+                this.activeScene(),
+                this.activeCamera(),
+                this.disableNormalPass(),
+                this.resolutionScale(),
+            ];
             // Initialize composer
             const effectComposer = new EffectComposer(gl, {
                 depthBuffer,
@@ -180,142 +172,813 @@ class NgtpEffectComposer extends NgtRxStore {
                 normalPass.enabled = false;
                 effectComposer.addPass(normalPass);
                 if (resolutionScale !== undefined && webGL2Available) {
-                    downSamplingPass = new DepthDownsamplingPass({
-                        normalBuffer: normalPass.texture,
-                        resolutionScale,
-                    });
+                    downSamplingPass = new DepthDownsamplingPass({ normalBuffer: normalPass.texture, resolutionScale });
                     downSamplingPass.enabled = false;
                     effectComposer.addPass(downSamplingPass);
                 }
             }
-            return [effectComposer, normalPass, downSamplingPass];
-        })));
+            return { effectComposer, 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 };
+        });
         this.setComposerSize();
-        this.setEffectPassed();
-        this.setBeforeRender();
+        this.updatePasses();
+    }
+    ngOnInit() {
+        this.beforeRender();
     }
     setComposerSize() {
-        this.hold(combineLatest([this.select('entities'), this.store.select('size')]), ([[composer], size]) => void composer.setSize(size.width, size.height));
-    }
-    setEffectPassed() {
-        this.effect(combineLatest([
-            this.select('entities'),
-            this.select('activeCamera'),
-            this.composerRef.children$('nonObjects'),
-        ]), ([[composer, normalPass, downSamplingPass], camera, effects]) => {
-            let effectPass;
-            if (this.composerRef.nativeElement &&
-                Object.keys(getLocalState(this.composerRef.nativeElement)).length &&
-                composer) {
-                effectPass = new EffectPass(camera, ...effects);
-                effectPass.renderToScreen = true;
-                composer.addPass(effectPass);
+        effect(() => {
+            const [composer, size] = [this.composer(), this.size()];
+            composer.setSize(size.width, size.height);
+        });
+    }
+    updatePasses() {
+        effect((onCleanup) => {
+            const [{ effectComposer: composer, normalPass, downSamplingPass }, instance, children, camera] = [
+                this.composerEntities(),
+                this.composerRef.nativeElement,
+                this.composerRef.children('nonObjects')(),
+                this.activeCamera(),
+            ];
+            const passes = [];
+            if (instance && composer && children.length) {
+                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 pass = new EffectPass(camera, ...effects);
+                        passes.push(pass);
+                    }
+                    else if (child instanceof Pass) {
+                        passes.push(child);
+                    }
+                }
+                for (const pass of passes)
+                    composer.addPass(pass);
                 if (normalPass)
                     normalPass.enabled = true;
                 if (downSamplingPass)
                     downSamplingPass.enabled = true;
             }
-            return () => {
-                if (effectPass)
-                    composer?.removePass(effectPass);
+            onCleanup(() => {
+                for (const pass of passes)
+                    composer?.removePass(pass);
                 if (normalPass)
                     normalPass.enabled = false;
                 if (downSamplingPass)
                     downSamplingPass.enabled = false;
-            };
+            });
         });
     }
-    setBeforeRender() {
-        const renderPriority = this.get('renderPriority');
-        const enabled = this.get('enabled');
-        this.effect(this.actions.setBeforeRender$, () => this.store.get('internal').subscribe(({ delta }) => {
-            const [composer] = this.get('entities') || [];
-            const enabled = this.get('enabled');
-            const autoClear = this.get('autoClear');
-            const gl = this.store.get('gl');
-            const size = this.store.get('size');
-            const camera = this.store.get('camera');
-            if (composer && enabled) {
-                if (!gl.xr.isPresenting) {
-                    gl.autoClear = autoClear;
-                    composer.render(delta);
-                    return;
-                }
-                // manually handle XR
-                gl.xr.enabled = false;
-                // update camera with XRPose
-                gl.xr.updateCamera(camera);
-                // render stereo cameras
-                const { cameras } = gl.xr.getCamera();
-                cameras.forEach(({ viewport, matrixWorld, projectionMatrix }) => {
-                    gl.setViewport(viewport);
-                    camera.position.setFromMatrixPosition(matrixWorld);
-                    camera.projectionMatrix.copy(projectionMatrix);
-                    composer.render(delta);
-                });
-                // reset
-                gl.setViewport(0, 0, size.width, size.height);
-                gl.xr.updateCamera(camera);
-                gl.xr.enabled = true;
+    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;
             }
-        }, enabled ? renderPriority : 0));
-        this.actions.setBeforeRender();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpEffectComposer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpEffectComposer, isStandalone: true, selector: "ngtp-effect-composer", inputs: { composerRef: "composerRef", enabled: "enabled", depthBuffer: "depthBuffer", disableNormalPass: "disableNormalPass", stencilBuffer: "stencilBuffer", autoClear: "autoClear", resolutionScale: "resolutionScale", multisampling: "multisampling", frameBufferType: "frameBufferType", renderPriority: "renderPriority", camera: "camera", scene: "scene" }, providers: [
-            { provide: NGTP_EFFECT_COMPOSER_API, useFactory: effectComposerApiFactory, deps: [NgtpEffectComposer] },
-            RxActionFactory,
-        ], usesInheritance: true, ngImport: i0, template: `
-        <ngt-group [ref]="composerRef">
-            <ng-content />
-        </ngt-group>
-    `, isInline: true }); }
+        }, {
+            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.0", ngImport: i0, type: NgtpEffectComposer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpEffectComposer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtpEffectComposer, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-effect-composer',
                     standalone: true,
                     template: `
-        <ngt-group [ref]="composerRef">
-            <ng-content />
-        </ngt-group>
-    `,
-                    providers: [
-                        { provide: NGTP_EFFECT_COMPOSER_API, useFactory: effectComposerApiFactory, deps: [NgtpEffectComposer] },
-                        RxActionFactory,
-                    ],
+		<ngt-group [ref]="composerRef">
+			<ng-content />
+		</ngt-group>
+	`,
+                    providers: [provideNgtpEffectComposerApi()],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
                 }]
-        }], propDecorators: { composerRef: [{
-                type: Input
-            }], enabled: [{
-                type: Input
-            }], depthBuffer: [{
-                type: Input
-            }], disableNormalPass: [{
-                type: Input
-            }], stencilBuffer: [{
-                type: Input
-            }], autoClear: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { composerRef: [{
                 type: Input
-            }], resolutionScale: [{
-                type: Input
-            }], multisampling: [{
-                type: Input
-            }], frameBufferType: [{
-                type: Input
-            }], renderPriority: [{
+            }], _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' }]
+            }] } });
+
+extend({ BloomEffect });
+class NgtpBloom extends NgtpEffect {
+    constructor() {
+        super(...arguments);
+        this.defaultBlendFunction = BlendFunction.ADD;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtpBloom, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: NgtpBloom, isStandalone: true, selector: "ngtp-bloom", usesInheritance: true, ngImport: i0, template: `
+		<ngt-bloom-effect ngtCompound *args="args()" [ref]="effectRef" [camera]="camera()">
+			<ng-content />
+		</ngt-bloom-effect>
+	`, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "ng-template[args]", inputs: ["args"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: NgtpBloom, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-bloom',
+                    standalone: true,
+                    template: `
+		<ngt-bloom-effect ngtCompound *args="args()" [ref]="effectRef" [camera]="camera()">
+			<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.0", ngImport: i0, type: NgtpBrightnessContrast, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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.0", ngImport: i0, type: NgtpColorDepth, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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.0", ngImport: i0, type: NgtpDepth, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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.0", ngImport: i0, type: NgtpDotScreen, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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.0", ngImport: i0, type: NgtpHueSaturation, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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.0", ngImport: i0, type: NgtpLUT, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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
-            }], camera: [{
+            }], _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.0", ngImport: i0, type: NgtpNoise, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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.0", ngImport: i0, type: NgtpPixelation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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
-            }], scene: [{
+            }], _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.0", ngImport: i0, type: NgtpScanline, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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.0", ngImport: i0, type: NgtpSepia, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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.0", ngImport: i0, type: NgtpShockWave, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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.0", ngImport: i0, type: NgtpSMAA, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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.0", ngImport: i0, type: NgtpSSAO, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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.0", ngImport: i0, type: NgtpTiltShift, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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.0", ngImport: i0, type: NgtpToneMapping, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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.0", ngImport: i0, type: NgtpVignette, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", 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.0", 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],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NGTP_EFFECT_COMPOSER_API, NgtpEffect, NgtpEffectComposer, componentInputsToCombinedStream, simpleChangesToStateObject };
+export { NgtpBloom, NgtpBrightnessContrast, NgtpColorDepth, NgtpDepth, NgtpDotScreen, NgtpEffect, NgtpEffectComposer, NgtpHueSaturation, NgtpLUT, NgtpNoise, NgtpPixelation, NgtpSMAA, NgtpSSAO, NgtpScanline, NgtpSepia, NgtpShockWave, NgtpTiltShift, NgtpToneMapping, NgtpVignette, injectNgtpEffectComposerApi, provideNgtpEffectComposerApi };
 //# sourceMappingURL=angular-three-postprocessing.mjs.map