angular-three-postprocessing 1.6.0 → 2.0.0-beta.3

package/fesm2022/angular-three-postprocessing-effects.mjs

@@ -1,21 +1,20 @@
 import * as i0 from '@angular/core';
-import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, Input } from '@angular/core';
-import { NgtArgs, NgtRxStore, NgtStore, injectNgtRef, startWithUndefined } from 'angular-three';
-import { NgtpEffect, simpleChangesToStateObject, componentInputsToCombinedStream, NGTP_EFFECT_COMPOSER_API } from 'angular-three-postprocessing';
-import { BlendFunction, BloomEffect, BrightnessContrastEffect, ColorDepthEffect, DepthEffect, DotScreenEffect, HueSaturationEffect, LUT3DEffect, NoiseEffect, ScanlineEffect, SepiaEffect, SSAOEffect, TiltShiftEffect, ToneMappingEffect, VignetteEffect } from 'postprocessing';
-import { combineLatest, map } from 'rxjs';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject, computed, effect, Input } from '@angular/core';
+import { extend, NgtArgs, NgtSignalStore, injectNgtRef, NgtStore, requestAnimationInInjectionContext } from 'angular-three';
+import { NgtpEffect, NGTP_EFFECT_COMPOSER_API } from 'angular-three-postprocessing';
+import { BloomEffect, BlendFunction, BrightnessContrastEffect, ColorDepthEffect, DepthEffect, DotScreenEffect, HueSaturationEffect, LUT3DEffect, NoiseEffect, ScanlineEffect, SepiaEffect, ShockWaveEffect, SMAAEffect, SSAOEffect, TiltShiftEffect, ToneMappingEffect, VignetteEffect } from 'postprocessing';
 
+extend({ BloomEffect });
 class NgtpBloom extends NgtpEffect {
     constructor() {
         super(...arguments);
-        this.defaultBlendMode = BlendFunction.ADD;
-    }
-    get effectConstructor() {
-        return BloomEffect;
+        this.defaultBlendFunction = BlendFunction.ADD;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpBloom, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpBloom, isStandalone: true, selector: "ngtp-bloom", inputs: { mipmapBlur: "mipmapBlur", luminanceThreshold: "luminanceThreshold", luminanceSmoothing: "luminanceSmoothing", intensity: "intensity", resolutionScale: "resolutionScale", resolutionX: "resolutionX", resolutionY: "resolutionY", width: "width", height: "height", kernelSize: "kernelSize" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpBloom, decorators: [{
@@ -24,32 +23,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngtp-bloom',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+        <ngt-bloom-effect ngtCompound *args="args()" [ref]="effectRef" [camera]="camera()">
+            <ng-content />
+        </ngt-bloom-effect>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: [
-                        'mipmapBlur',
-                        'luminanceThreshold',
-                        'luminanceSmoothing',
-                        'intensity',
-                        'resolutionScale',
-                        'resolutionX',
-                        'resolutionY',
-                        'width',
-                        'height',
-                        'kernelSize',
-                    ],
                 }]
         }] });
 
+extend({ BrightnessContrastEffect });
 class NgtpBrightnessContrast extends NgtpEffect {
-    get effectConstructor() {
-        return BrightnessContrastEffect;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpBrightnessContrast, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpBrightnessContrast, isStandalone: true, selector: "ngtp-brightness-contrast", inputs: { brightness: "brightness", contrast: "contrast" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpBrightnessContrast, decorators: [{
@@ -58,21 +47,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngtp-brightness-contrast',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+        <ngt-brightness-contrast-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-brightness-contrast-effect>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: ['brightness', 'contrast'],
                 }]
         }] });
 
+extend({ ColorDepthEffect });
 class NgtpColorDepth extends NgtpEffect {
-    get effectConstructor() {
-        return ColorDepthEffect;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpColorDepth, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpColorDepth, isStandalone: true, selector: "ngtp-color-depth", inputs: { bits: "bits" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpColorDepth, decorators: [{
@@ -81,21 +71,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngtp-color-depth',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+        <ngt-color-depth-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-color-depth-effect>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: ['bits'],
                 }]
         }] });
 
+extend({ DepthEffect });
 class NgtpDepth extends NgtpEffect {
-    get effectConstructor() {
-        return DepthEffect;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpDepth, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpDepth, isStandalone: true, selector: "ngtp-depth", inputs: { inverted: "inverted" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpDepth, decorators: [{
@@ -104,21 +95,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngtp-depth',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+        <ngt-depth-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-depth-effect>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: ['inverted'],
                 }]
         }] });
 
+extend({ DotScreenEffect });
 class NgtpDotScreen extends NgtpEffect {
-    get effectConstructor() {
-        return DotScreenEffect;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpDotScreen, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpDotScreen, isStandalone: true, selector: "ngtp-dot-screen", inputs: { angle: "angle", scale: "scale" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpDotScreen, decorators: [{
@@ -127,21 +119,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngtp-dot-screen',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+        <ngt-dot-screen-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-dot-screen-effect>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: ['angle', 'scale'],
                 }]
         }] });
 
+extend({ HueSaturationEffect });
 class NgtpHueSaturation extends NgtpEffect {
-    get effectConstructor() {
-        return HueSaturationEffect;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpHueSaturation, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpHueSaturation, isStandalone: true, selector: "ngtp-hue-saturation", inputs: { hue: "hue", saturation: "saturation" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpHueSaturation, decorators: [{
@@ -150,78 +143,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngtp-hue-saturation',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+        <ngt-hue-saturation-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-hue-saturation-effect>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: ['hue', 'saturation'],
                 }]
         }] });
 
-class NgtpLUT extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.store = inject(NgtStore);
-        this.lutRef = injectNgtRef();
-    }
+class NgtpLUT extends NgtSignalStore {
     set lut(lut) {
         this.set({ lut });
     }
-    ngOnChanges(changes) {
-        this.set((s) => ({ ...s, ...simpleChangesToStateObject(changes, ['lutRef', 'lut']) }));
-    }
-    ngOnInit() {
-        this.connect('effect', combineLatest([
-            this.select('lut'),
-            componentInputsToCombinedStream(this, (input) => input.propName !== 'lutRef' && input.propName !== 'lut'),
-        ]).pipe(map(([lut, props]) => new LUT3DEffect(lut, props))));
-        this.hold(combineLatest([
-            this.select('lut'),
-            this.select('effect'),
-            this.select('tetrahedralInterpolation').pipe(startWithUndefined()),
-        ]), ([lut, effect, tetrahedralInterpolation]) => {
-            const invalidate = this.store.get('invalidate');
-            if (lut)
-                effect.lut = lut;
+    set blendFunction(blendFunction) {
+        this.set({ blendFunction });
+    }
+    set tetrahedralInterpolation(tetrahedralInterpolation) {
+        this.set({ tetrahedralInterpolation });
+    }
+    #lut;
+    #tetrahedralInterpolation;
+    #blendFunction;
+    #store;
+    #invalidate;
+    constructor() {
+        super();
+        this.effectRef = injectNgtRef();
+        this.#lut = this.select('lut');
+        this.#tetrahedralInterpolation = this.select('tetrahedralInterpolation');
+        this.#blendFunction = this.select('blendFunction');
+        this.#store = inject(NgtStore);
+        this.#invalidate = this.#store.select('invalidate');
+        this.effect = computed(() => new LUT3DEffect(this.#lut(), {
+            blendFunction: this.#blendFunction(),
+            tetrahedralInterpolation: this.#tetrahedralInterpolation(),
+        }));
+        requestAnimationInInjectionContext(() => {
+            this.#setProps();
+        });
+    }
+    #setProps() {
+        const trigger = computed(() => ({
+            effect: this.effect(),
+            invalidate: this.#invalidate(),
+            lut: this.#lut(),
+            tetrahedralInterpolation: this.#tetrahedralInterpolation(),
+        }));
+        effect(() => {
+            const { effect, lut, invalidate, tetrahedralInterpolation } = trigger();
+            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.0.0", ngImport: i0, type: NgtpLUT, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpLUT, isStandalone: true, selector: "ngtp-lut", inputs: { blendFunction: "blendFunction", tetrahedralInterpolation: "tetrahedralInterpolation", lutRef: "lutRef", lut: "lut" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" [ref]="lutRef" />
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpLUT, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpLUT, isStandalone: true, selector: "ngtp-lut", inputs: { effectRef: "effectRef", lut: "lut", blendFunction: "blendFunction", tetrahedralInterpolation: "tetrahedralInterpolation" }, usesInheritance: true, ngImport: i0, template: ` <ngt-primitive *args="[effect()]" [ref]="effectRef" /> `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpLUT, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngtp-lut',
                     standalone: true,
-                    template: `
-        <ngt-primitive *args="[get('effect')]" [ref]="lutRef" />
-    `,
+                    template: ` <ngt-primitive *args="[effect()]" [ref]="effectRef" /> `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: ['blendFunction', 'tetrahedralInterpolation'],
                 }]
-        }], propDecorators: { lutRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { effectRef: [{
                 type: Input
             }], lut: [{
+                type: Input,
+                args: [{ required: true }]
+            }], blendFunction: [{
+                type: Input
+            }], tetrahedralInterpolation: [{
                 type: Input
             }] } });
 
+extend({ NoiseEffect });
 class NgtpNoise extends NgtpEffect {
     constructor() {
         super(...arguments);
-        this.defaultBlendMode = BlendFunction.COLOR_DODGE;
-    }
-    get effectConstructor() {
-        return NoiseEffect;
+        this.defaultBlendFunction = BlendFunction.COLOR_DODGE;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpNoise, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpNoise, isStandalone: true, selector: "ngtp-noise", inputs: { premultiply: "premultiply" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpNoise, decorators: [{
@@ -230,25 +243,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngtp-noise',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+        <ngt-noise-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-noise-effect>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: ['premultiply'],
                 }]
         }] });
 
+extend({ ScanlineEffect });
 class NgtpScanline extends NgtpEffect {
     constructor() {
         super(...arguments);
-        this.defaultBlendMode = BlendFunction.OVERLAY;
-    }
-    get effectConstructor() {
-        return ScanlineEffect;
+        this.defaultBlendFunction = BlendFunction.OVERLAY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpScanline, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpScanline, isStandalone: true, selector: "ngtp-scanline", inputs: { density: "density" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpScanline, decorators: [{
@@ -257,21 +271,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngtp-scanline',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+        <ngt-scanline-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-scanline-effect>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: ['density'],
                 }]
         }] });
 
+extend({ SepiaEffect });
 class NgtpSepia extends NgtpEffect {
-    get effectConstructor() {
-        return SepiaEffect;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpSepia, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpSepia, isStandalone: true, selector: "ngtp-sepia", inputs: { intensity: "intensity" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpSepia, decorators: [{
@@ -280,23 +295,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngtp-sepia',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+        <ngt-sepia-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-sepia-effect>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: ['intensity'],
                 }]
         }] });
 
-class NgtpSSAO extends NgtRxStore {
-    constructor() {
-        super(...arguments);
-        this.effectComposerApi = inject(NGTP_EFFECT_COMPOSER_API);
-        this.ssaoRef = injectNgtRef();
+extend({ ShockWaveEffect });
+class NgtpShockWave extends NgtpEffect {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpShockWave, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpShockWave, isStandalone: true, selector: "ngtp-noise", 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: "[args]", inputs: ["args"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpShockWave, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngtp-noise',
+                    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.0.0", ngImport: i0, type: NgtpSMAA, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "[args]", inputs: ["args"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.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 extends NgtSignalStore {
+    set blendFunction(blendFunction) {
+        this.set({ blendFunction });
+    }
+    set distanceScaling(distanceScaling) {
+        this.set({ distanceScaling });
+    }
+    set depthAwareUpsampling(depthAwareUpsampling) {
+        this.set({ depthAwareUpsampling });
+    }
+    set normalDepthBuffer(normalDepthBuffer) {
+        this.set({ normalDepthBuffer });
+    }
+    set samples(samples) {
+        this.set({ samples });
+    }
+    set rings(rings) {
+        this.set({ rings });
     }
-    initialize() {
-        super.initialize();
-        this.set({
+    set worldDistanceThreshold(worldDistanceThreshold) {
+        this.set({ worldDistanceThreshold });
+    }
+    set worldDistanceFalloff(worldDistanceFalloff) {
+        this.set({ worldDistanceFalloff });
+    }
+    set worldProximityThreshold(worldProximityThreshold) {
+        this.set({ worldProximityThreshold });
+    }
+    set worldProximityFalloff(worldProximityFalloff) {
+        this.set({ worldProximityFalloff });
+    }
+    set distanceThreshold(distanceThreshold) {
+        this.set({ distanceThreshold });
+    }
+    set distanceFalloff(distanceFalloff) {
+        this.set({ distanceFalloff });
+    }
+    set rangeThreshold(rangeThreshold) {
+        this.set({ rangeThreshold });
+    }
+    set rangeFalloff(rangeFalloff) {
+        this.set({ rangeFalloff });
+    }
+    set minRadiusScale(minRadiusScale) {
+        this.set({ minRadiusScale });
+    }
+    set luminanceInfluence(luminanceInfluence) {
+        this.set({ luminanceInfluence });
+    }
+    set radius(radius) {
+        this.set({ radius });
+    }
+    set intensity(intensity) {
+        this.set({ intensity });
+    }
+    set bias(bias) {
+        this.set({ bias });
+    }
+    set fade(fade) {
+        this.set({ fade });
+    }
+    set color(color) {
+        this.set({ color });
+    }
+    set resolutionScale(resolutionScale) {
+        this.set({ resolutionScale });
+    }
+    set resolutionX(resolutionX) {
+        this.set({ resolutionX });
+    }
+    set resolutionY(resolutionY) {
+        this.set({ resolutionY });
+    }
+    set width(width) {
+        this.set({ width });
+    }
+    set height(height) {
+        this.set({ height });
+    }
+    #effectComposerApi;
+    #state;
+    constructor() {
+        super({
             blendFunction: BlendFunction.MULTIPLY,
             samples: 30,
             rings: 4,
@@ -306,94 +444,108 @@ class NgtpSSAO extends NgtRxStore {
             rangeFalloff: 0.1,
             luminanceInfluence: 0.9,
             radius: 20,
-            scale: 0.5,
             bias: 0.5,
             intensity: 1.0,
-            color: null,
             depthAwareUpsampling: true,
         });
-    }
-    ngOnChanges(changes) {
-        this.set((s) => ({
-            ...s,
-            ...simpleChangesToStateObject(changes, ['ssaoRef']),
-        }));
-    }
-    ngOnInit() {
-        this.connect('effect', combineLatest([
-            this.effectComposerApi.select('entities'),
-            this.effectComposerApi.select('activeCamera'),
-            componentInputsToCombinedStream(this, (input) => input.propName !== 'ssaoRef'),
-        ]).pipe(map(([[, normalPass, downSamplingPass], camera, props]) => {
-            const { resolutionScale } = this.effectComposerApi;
-            if (props['normalDepthBuffer'] === undefined) {
-                props['normalDepthBuffer'] = downSamplingPass ? downSamplingPass.texture : null;
+        this.effectRef = injectNgtRef();
+        this.#effectComposerApi = inject(NGTP_EFFECT_COMPOSER_API);
+        this.#state = this.select();
+        this.effect = computed(() => {
+            const state = this.#state();
+            const { camera, normalPass, downSamplingPass, resolutionScale } = this.#effectComposerApi();
+            if (normalPass === null && downSamplingPass === null) {
+                console.error('Please enable the NormalPass in the NgtpEffectComposer in order to use NgtpSSAO.');
+                return {};
             }
-            if (props['resolutionScale'] === undefined) {
-                props['resolutionScale'] = resolutionScale ?? 1;
-            }
-            return new SSAOEffect(camera, normalPass && !downSamplingPass ? normalPass.texture : null, props);
-        })));
+            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,
+            });
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpSSAO, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpSSAO, isStandalone: true, selector: "ngtp-ssao", inputs: { blendFunction: "blendFunction", distanceScaling: "distanceScaling", depthAwareUpsampling: "depthAwareUpsampling", normalDepthBuffer: "normalDepthBuffer", samples: "samples", rings: "rings", worldDistanceThreshold: "worldDistanceThreshold", worldDistanceFalloff: "worldDistanceFalloff", worldProximityThreshold: "worldProximityThreshold", worldProximityFalloff: "worldProximityFalloff", distanceThreshold: "distanceThreshold", distanceFalloff: "distanceFalloff", rangeThreshold: "rangeThreshold", rangeFalloff: "rangeFalloff", minRadiusScale: "minRadiusScale", luminanceInfluence: "luminanceInfluence", radius: "radius", intensity: "intensity", bias: "bias", fade: "fade", color: "color", resolutionScale: "resolutionScale", resolutionX: "resolutionX", resolutionY: "resolutionY", width: "width", height: "height", ssaoRef: "ssaoRef" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" [ref]="ssaoRef" />
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpSSAO, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpSSAO, isStandalone: true, selector: "ngtp-SSAO", inputs: { effectRef: "effectRef", blendFunction: "blendFunction", distanceScaling: "distanceScaling", depthAwareUpsampling: "depthAwareUpsampling", normalDepthBuffer: "normalDepthBuffer", samples: "samples", rings: "rings", worldDistanceThreshold: "worldDistanceThreshold", worldDistanceFalloff: "worldDistanceFalloff", worldProximityThreshold: "worldProximityThreshold", worldProximityFalloff: "worldProximityFalloff", distanceThreshold: "distanceThreshold", distanceFalloff: "distanceFalloff", rangeThreshold: "rangeThreshold", rangeFalloff: "rangeFalloff", minRadiusScale: "minRadiusScale", luminanceInfluence: "luminanceInfluence", radius: "radius", intensity: "intensity", bias: "bias", fade: "fade", color: "color", resolutionScale: "resolutionScale", resolutionX: "resolutionX", resolutionY: "resolutionY", width: "width", height: "height" }, usesInheritance: true, ngImport: i0, template: ` <ngt-primitive *args="[effect()]" [ref]="effectRef" /> `, isInline: true, dependencies: [{ kind: "directive", type: NgtArgs, selector: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpSSAO, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ngtp-ssao',
+                    selector: 'ngtp-SSAO',
                     standalone: true,
-                    template: `
-        <ngt-primitive *args="[get('effect')]" [ref]="ssaoRef" />
-    `,
+                    template: ` <ngt-primitive *args="[effect()]" [ref]="effectRef" /> `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: [
-                        'blendFunction',
-                        'distanceScaling',
-                        'depthAwareUpsampling',
-                        'normalDepthBuffer',
-                        'samples',
-                        'rings',
-                        'worldDistanceThreshold',
-                        'worldDistanceFalloff',
-                        'worldProximityThreshold',
-                        'worldProximityFalloff',
-                        'distanceThreshold',
-                        'distanceFalloff',
-                        'rangeThreshold',
-                        'rangeFalloff',
-                        'minRadiusScale',
-                        'luminanceInfluence',
-                        'radius',
-                        'intensity',
-                        'bias',
-                        'fade',
-                        'color',
-                        'resolutionScale',
-                        'resolutionX',
-                        'resolutionY',
-                        'width',
-                        'height',
-                    ],
                 }]
-        }], propDecorators: { ssaoRef: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { effectRef: [{
+                type: Input
+            }], blendFunction: [{
+                type: Input
+            }], distanceScaling: [{
+                type: Input
+            }], depthAwareUpsampling: [{
+                type: Input
+            }], normalDepthBuffer: [{
+                type: Input
+            }], samples: [{
+                type: Input
+            }], rings: [{
+                type: Input
+            }], worldDistanceThreshold: [{
+                type: Input
+            }], worldDistanceFalloff: [{
+                type: Input
+            }], worldProximityThreshold: [{
+                type: Input
+            }], worldProximityFalloff: [{
+                type: Input
+            }], distanceThreshold: [{
+                type: Input
+            }], distanceFalloff: [{
+                type: Input
+            }], rangeThreshold: [{
+                type: Input
+            }], rangeFalloff: [{
+                type: Input
+            }], minRadiusScale: [{
+                type: Input
+            }], luminanceInfluence: [{
+                type: Input
+            }], radius: [{
+                type: Input
+            }], intensity: [{
+                type: Input
+            }], bias: [{
+                type: Input
+            }], fade: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], resolutionScale: [{
+                type: Input
+            }], resolutionX: [{
+                type: Input
+            }], resolutionY: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
                 type: Input
             }] } });
 
+extend({ TiltShiftEffect });
 class NgtpTiltShift extends NgtpEffect {
     constructor() {
         super(...arguments);
-        this.defaultBlendMode = BlendFunction.ADD;
-    }
-    get effectConstructor() {
-        return TiltShiftEffect;
+        this.defaultBlendFunction = BlendFunction.ADD;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpTiltShift, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpTiltShift, isStandalone: true, selector: "ngtp-tilt-shift", inputs: { offset: "offset", rotation: "rotation", focusArea: "focusArea", feather: "feather", bias: "bias", kernelSize: "kernelSize", resolutionScale: "resolutionScale", resolutionX: "resolutionX", resolutionY: "resolutionY" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpTiltShift, decorators: [{
@@ -402,31 +554,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngtp-tilt-shift',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+        <ngt-tilt-shift-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-tilt-shift-effect>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: [
-                        'offset',
-                        'rotation',
-                        'focusArea',
-                        'feather',
-                        'bias',
-                        'kernelSize',
-                        'resolutionScale',
-                        'resolutionX',
-                        'resolutionY',
-                    ],
                 }]
         }] });
 
+extend({ ToneMappingEffect });
 class NgtpToneMapping extends NgtpEffect {
-    get effectConstructor() {
-        return ToneMappingEffect;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpToneMapping, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpToneMapping, isStandalone: true, selector: "ngtp-tone-mapping", inputs: { adaptive: "adaptive", mode: "mode", resolution: "resolution", maxLuminance: "maxLuminance", whitePoint: "whitePoint", middleGrey: "middleGrey", minLuminance: "minLuminance", averageLuminance: "averageLuminance", adaptationRate: "adaptationRate" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpToneMapping, decorators: [{
@@ -435,31 +578,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngtp-tone-mapping',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+        <ngt-tone-mapping-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-tone-mapping-effect>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: [
-                        'adaptive',
-                        'mode',
-                        'resolution',
-                        'maxLuminance',
-                        'whitePoint',
-                        'middleGrey',
-                        'minLuminance',
-                        'averageLuminance',
-                        'adaptationRate',
-                    ],
                 }]
         }] });
 
+extend({ VignetteEffect });
 class NgtpVignette extends NgtpEffect {
-    get effectConstructor() {
-        return VignetteEffect;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpVignette, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: NgtpVignette, isStandalone: true, selector: "ngtp-vignette", inputs: { technique: "technique", eskil: "eskil", offset: "offset", darkness: "darkness" }, usesInheritance: true, ngImport: i0, template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: "[args]", inputs: ["args"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: NgtpVignette, decorators: [{
@@ -468,11 +602,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                     selector: 'ngtp-vignette',
                     standalone: true,
                     template: `
-        <ngt-primitive *args="[get('effect')]" ngtCompound />
+        <ngt-vignette-effect ngtCompound *args="args()" [camera]="camera()" [ref]="effectRef">
+            <ng-content />
+        </ngt-vignette-effect>
     `,
                     imports: [NgtArgs],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    inputs: ['technique', 'eskil', 'offset', 'darkness'],
                 }]
         }] });
 
@@ -480,5 +615,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NgtpBloom, NgtpBrightnessContrast, NgtpColorDepth, NgtpDepth, NgtpDotScreen, NgtpHueSaturation, NgtpLUT, NgtpNoise, NgtpSSAO, NgtpScanline, NgtpSepia, NgtpTiltShift, NgtpToneMapping, NgtpVignette };
+export { NgtpBloom, NgtpBrightnessContrast, NgtpColorDepth, NgtpDepth, NgtpDotScreen, NgtpHueSaturation, NgtpLUT, NgtpNoise, NgtpSMAA, NgtpSSAO, NgtpScanline, NgtpSepia, NgtpShockWave, NgtpTiltShift, NgtpToneMapping, NgtpVignette };
 //# sourceMappingURL=angular-three-postprocessing-effects.mjs.map