angular-three-postprocessing 4.0.0-next.116 → 4.0.0-next.119

package/fesm2022/angular-three-postprocessing.mjs

@@ -9,9 +9,37 @@ import { Group } from 'three';
 import { isWebGL2Available } from 'three-stdlib';
 import { easing } from 'maath';
 
+/**
+ * Injection token for providing default effect options.
+ *
+ * Use `injectDefaultEffectOptions` to inject default options in effect components.
+ * Use `provideDefaultEffectOptions` to provide default options for effects.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   providers: [provideDefaultEffectOptions({ blendFunction: BlendFunction.ADD, opacity: 0.5 })]
+ * })
+ * export class MyEffect {}
+ * ```
+ */
 const [injectDefaultEffectOptions, provideDefaultEffectOptions] = createNoopInjectionToken('Default Effect options');
+/**
+ * Component that applies blend mode settings to a postprocessing effect.
+ *
+ * This component is used internally by effect components to apply `blendFunction`
+ * and `opacity` values to the effect's blend mode.
+ *
+ * @example
+ * ```html
+ * <ngt-bloom-effect *args="[options()]">
+ *   <ngtp-effect-blend-mode />
+ * </ngt-bloom-effect>
+ * ```
+ */
 class NgtpEffectBlendMode {
     constructor() {
+        /** Reference to the parent NgtpEffect directive, if available */
         this.effect = inject(NgtpEffect, { optional: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpEffectBlendMode, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -36,13 +64,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
+/**
+ * Base directive for postprocessing effects that provides common functionality.
+ *
+ * This directive is used as a host directive by effect components to provide:
+ * - `blendFunction`: Controls how the effect blends with the scene
+ * - `opacity`: Controls the effect's opacity
+ * - Access to the camera and invalidate function from the store
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   hostDirectives: [{ directive: NgtpEffect, inputs: ['blendFunction', 'opacity'] }]
+ * })
+ * export class NgtpBloom {}
+ * ```
+ */
 class NgtpEffect {
     constructor() {
+        /** Default effect options injected from parent providers */
         this.defaultEffectOptions = injectDefaultEffectOptions({ optional: true });
+        /**
+         * The blend function used to combine this effect with the scene.
+         * @see BlendFunction from postprocessing library
+         */
         this.blendFunction = input(this.defaultEffectOptions?.blendFunction, ...(ngDevMode ? [{ debugName: "blendFunction" }] : []));
+        /**
+         * The opacity of the effect.
+         * @default undefined (uses effect's default)
+         */
         this.opacity = input(this.defaultEffectOptions?.opacity, ...(ngDevMode ? [{ debugName: "opacity" }] : []));
         this.store = injectStore();
+        /** The current camera from the store */
         this.camera = this.store.camera;
+        /** Function to invalidate the render loop, triggering a re-render */
         this.invalidate = this.store.invalidate;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpEffect, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -59,11 +114,45 @@ const defaultOptions$5 = {
     multisampling: 8,
     frameBufferType: THREE.HalfFloatType,
 };
+/**
+ * Checks if an effect has the convolution attribute.
+ *
+ * @param effect - The effect to check
+ * @returns True if the effect has the convolution attribute
+ */
 function isConvolution(effect) {
     return (effect.getAttributes() & EffectAttribute.CONVOLUTION) === EffectAttribute.CONVOLUTION;
 }
+/**
+ * Angular component that manages postprocessing effects for a Three.js scene.
+ *
+ * The effect composer wraps the postprocessing library's EffectComposer and provides
+ * a declarative way to add effects to your scene. Effects are added as children of
+ * this component and are automatically composed into an effect pass.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-bloom [options]="{ intensity: 1, luminanceThreshold: 0.9 }" />
+ *   <ngtp-vignette [options]="{ darkness: 0.5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With custom options -->
+ * <ngtp-effect-composer [options]="{ multisampling: 4, autoClear: false }">
+ *   <ngtp-smaa />
+ *   <ngtp-tone-mapping />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpEffectComposer {
     constructor() {
+        /**
+         * Configuration options for the effect composer.
+         * @see NgtpEffectComposerOptions
+         */
         this.options = input(defaultOptions$5, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions$5) });
         this.store = injectStore();
         this.depthBuffer = pick(this.options, 'depthBuffer');
@@ -74,15 +163,31 @@ class NgtpEffectComposer {
         this.resolutionScale = pick(this.options, 'resolutionScale');
         this.enabled = pick(this.options, 'enabled');
         this.renderPriority = pick(this.options, 'renderPriority');
+        /**
+         * The scene used for rendering effects.
+         * Uses custom scene from options if provided, otherwise uses the store's scene.
+         */
         this.scene = computed(() => this.options().scene ?? this.store.scene(), ...(ngDevMode ? [{ debugName: "scene" }] : []));
+        /**
+         * The camera used for rendering effects.
+         * Uses custom camera from options if provided, otherwise uses the store's camera.
+         */
         this.camera = computed(() => this.options().camera ?? this.store.camera(), ...(ngDevMode ? [{ debugName: "camera" }] : []));
         this.groupRef = viewChild.required('group');
+        /**
+         * Computed render priority based on whether the composer is enabled.
+         * Returns 0 when disabled, otherwise returns the configured renderPriority.
+         */
         this.priority = computed(() => {
             const enabled = this.enabled();
             if (!enabled)
                 return 0;
             return this.renderPriority();
         }, ...(ngDevMode ? [{ debugName: "priority" }] : []));
+        /**
+         * Creates and configures the effect composer with render pass, normal pass,
+         * and depth downsampling pass based on options.
+         */
         this.composerData = computed(() => {
             const webGL2Available = isWebGL2Available();
             const [gl, scene, camera, depthBuffer, stencilBuffer, multisampling, frameBufferType, enableNormalPass, resolutionScale,] = [
@@ -120,6 +225,10 @@ class NgtpEffectComposer {
             }
             return { composer, normalPass, downSamplingPass };
         }, ...(ngDevMode ? [{ debugName: "composerData" }] : []));
+        /**
+         * The underlying postprocessing EffectComposer instance.
+         * Can be used to access the composer directly for advanced use cases.
+         */
         this.effectComposer = pick(this.composerData, 'composer');
         extend({ Group });
         // NOTE: Disable tone mapping because threejs disallows tonemapping on render targets
@@ -227,6 +336,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], groupRef: [{ type: i0.ViewChild, args: ['group', { isSignal: true }] }] } });
 
+/**
+ * Fragment shader for the ASCII effect.
+ * Converts the scene into ASCII character representation based on pixel brightness.
+ */
 const fragment = /* language=glsl glsl */ `
 uniform sampler2D uCharacters;
 uniform float uCharactersCount;
@@ -267,6 +380,21 @@ void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor)
     outputColor = asciiCharacter;
 }
 `;
+/**
+ * A postprocessing effect that renders the scene as ASCII art.
+ *
+ * This effect converts the rendered scene into a grid of ASCII characters,
+ * where the character used depends on the brightness of the underlying pixels.
+ *
+ * @example
+ * ```typescript
+ * const effect = new ASCIIEffect({
+ *   cellSize: 12,
+ *   color: '#00ff00',
+ *   characters: ' .:-=+*#%@'
+ * });
+ * ```
+ */
 class ASCIIEffect extends Effect {
     constructor({ font = 'arial', characters = ` .:,'-^=*+?!|0#X%WM@`, fontSize = 54, cellSize = 16, color = '#ffffff', invert = false, } = {}) {
         const uniforms = new Map([
@@ -282,7 +410,17 @@ class ASCIIEffect extends Effect {
             charactersTextureUniform.value = this.createCharactersTexture(characters, font, fontSize);
         }
     }
-    /** Draws the characters on a Canvas and returns a texture */
+    /**
+     * Creates a texture containing all the ASCII characters.
+     *
+     * Draws each character in the character set onto a canvas and creates
+     * a texture that can be sampled in the shader.
+     *
+     * @param characters - The character set to render
+     * @param font - The font family to use
+     * @param fontSize - The font size in pixels
+     * @returns A Three.js texture containing the rendered characters
+     */
     createCharactersTexture(characters, font, fontSize) {
         const canvas = document.createElement('canvas');
         const SIZE = 1024;
@@ -317,9 +455,27 @@ const defaultOptions$4 = {
     color: '#ffffff',
     invert: false,
 };
+/**
+ * Angular component that applies an ASCII art postprocessing effect to the scene.
+ *
+ * Renders the scene as ASCII characters, where character selection is based on
+ * the brightness of the underlying pixels.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-ascii [options]="{ cellSize: 12, color: '#00ff00' }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpASCII {
     constructor() {
+        /**
+         * Configuration options for the ASCII effect.
+         * @see ASCIIEffectOptions
+         */
         this.options = input(defaultOptions$4, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions$4) });
+        /** The underlying ASCIIEffect instance */
         this.effect = computed(() => new ASCIIEffect(this.options()), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect((onCleanup) => {
             const effect = this.effect();
@@ -344,9 +500,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a bloom postprocessing effect to the scene.
+ *
+ * The bloom effect creates a glow around bright areas of the scene, simulating
+ * the way bright light bleeds in cameras and the human eye.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-bloom [options]="{ intensity: 1, luminanceThreshold: 0.9 }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With custom blend function -->
+ * <ngtp-effect-composer>
+ *   <ngtp-bloom
+ *     [blendFunction]="BlendFunction.SCREEN"
+ *     [options]="{ intensity: 0.5, luminanceSmoothing: 0.9 }"
+ *   />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpBloom {
     constructor() {
+        /**
+         * Configuration options for the bloom effect.
+         * Accepts all BloomEffectOptions except blendFunction (use the blendFunction input instead).
+         * @see BloomEffectOptions from postprocessing library
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ BloomEffect });
     }
@@ -376,9 +562,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies brightness and contrast adjustments to the scene.
+ *
+ * This effect allows you to modify the overall brightness and contrast of the
+ * rendered scene as a postprocessing step.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-brightness-contrast [options]="{ brightness: 0.1, contrast: 0.2 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpBrightnessContrast {
     constructor() {
+        /**
+         * Configuration options for the brightness/contrast effect.
+         * @see BrightnessEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ BrightnessContrastEffect });
     }
@@ -407,9 +611,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a chromatic aberration effect to the scene.
+ *
+ * Chromatic aberration simulates the color fringing that occurs in real camera lenses
+ * when different wavelengths of light are focused at different distances.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-chromatic-aberration [options]="{ offset: [0.002, 0.002] }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpChromaticAberration {
     constructor() {
+        /**
+         * Configuration options for the chromatic aberration effect.
+         * @see ChromaticAberrationEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ ChromaticAberrationEffect });
     }
@@ -438,8 +660,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a color averaging effect to the scene.
+ *
+ * This effect converts the scene to grayscale by averaging the color channels,
+ * which can create a desaturated or monochrome look.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-color-average />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With custom blend function -->
+ * <ngtp-effect-composer>
+ *   <ngtp-color-average [options]="{ blendFunction: BlendFunction.MULTIPLY }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpColorAverage {
     constructor() {
+        /**
+         * Configuration options for the color average effect.
+         * @default { blendFunction: BlendFunction.NORMAL }
+         */
         this.options = input({ blendFunction: BlendFunction.NORMAL }, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs({ blendFunction: BlendFunction.NORMAL }) });
         extend({ ColorAverageEffect });
     }
@@ -465,9 +712,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a color depth reduction effect to the scene.
+ *
+ * This effect reduces the number of colors in the scene, creating a posterized
+ * or retro look similar to older display hardware with limited color palettes.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-color-depth [options]="{ bits: 4 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpColorDepth {
     constructor() {
+        /**
+         * Configuration options for the color depth effect.
+         * @see ColorDepthEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ ColorDepthEffect });
     }
@@ -496,9 +761,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that visualizes the scene's depth buffer.
+ *
+ * This effect renders the depth information of the scene, which can be useful
+ * for debugging or creating stylized depth-based visualizations.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-depth [options]="{ inverted: true }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpDepth {
     constructor() {
+        /**
+         * Configuration options for the depth effect.
+         * @see DepthEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ DepthEffect });
     }
@@ -527,10 +810,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a depth of field effect to the scene.
+ *
+ * This effect simulates the focus behavior of real camera lenses, blurring
+ * objects that are outside the focal range. Can be configured for autofocus
+ * by providing a target position.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-depth-of-field [options]="{ focusDistance: 0, focalLength: 0.02, bokehScale: 2 }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With autofocus target -->
+ * <ngtp-effect-composer>
+ *   <ngtp-depth-of-field [options]="{ target: [0, 0, 5], bokehScale: 3 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpDepthOfField {
     constructor() {
+        /**
+         * Configuration options for the depth of field effect.
+         * @see DOFOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effectComposer = inject(NgtpEffectComposer);
+        /**
+         * Creates the DepthOfFieldEffect instance with the configured options.
+         * Enables autofocus if a target is provided and applies depth texture settings.
+         */
         this.effect = computed(() => {
             const [camera, options] = [this.effectComposer.camera(), this.options()];
             const autoFocus = options.target != null;
@@ -570,9 +883,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a dot screen effect to the scene.
+ *
+ * This effect overlays a pattern of dots on the scene, creating a halftone
+ * or comic book style appearance.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-dot-screen [options]="{ scale: 1.5, angle: Math.PI * 0.25 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpDotScreen {
     constructor() {
+        /**
+         * Configuration options for the dot screen effect.
+         * @see DotScreenEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ DotScreenEffect });
     }
@@ -601,9 +932,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies Fast Approximate Anti-Aliasing (FXAA) to the scene.
+ *
+ * FXAA is a fast, single-pass anti-aliasing technique that smooths jagged edges
+ * in the rendered image. It's less demanding than multisampling but may blur
+ * some fine details.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer [options]="{ multisampling: 0 }">
+ *   <ngtp-fxaa />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpFXAA {
     constructor() {
+        /**
+         * Configuration options for the FXAA effect.
+         * @see FXAAEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ FXAAEffect });
     }
@@ -632,8 +982,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a glitch effect to the scene.
+ *
+ * This effect simulates digital glitches with customizable timing, strength,
+ * and chromatic aberration. Can be toggled on/off and configured for different
+ * glitch modes.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-glitch [options]="{ delay: [1.5, 3.5], duration: [0.6, 1.0] }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Constant glitch mode -->
+ * <ngtp-effect-composer>
+ *   <ngtp-glitch [options]="{ mode: GlitchMode.CONSTANT_MILD, active: true }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpGlitch {
     constructor() {
+        /**
+         * Configuration options for the glitch effect.
+         * @default { active: true }
+         * @see GlitchOptions
+         */
         this.options = input({ active: true }, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs({ active: true }) });
         this.active = pick(this.options, 'active');
         this.mode = pick(this.options, 'mode');
@@ -647,6 +1024,10 @@ class NgtpGlitch {
         this.chromaticAberrationOffset = vector2(this.options, 'chromaticAberrationOffset');
         this.strength = vector2(this.options, 'strength');
         this.store = injectStore();
+        /**
+         * The underlying GlitchEffect instance.
+         * Created with the configured options and vector2 parameters.
+         */
         this.effect = computed(() => new GlitchEffect({
             ratio: this.ratio(),
             dtSize: this.dtSize(),
@@ -691,18 +1072,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a god rays (volumetric lighting) effect to the scene.
+ *
+ * This effect creates light shafts emanating from a light source, simulating
+ * the way light scatters through atmospheric particles. Requires a sun/light
+ * source mesh to generate the rays from.
+ *
+ * @example
+ * ```html
+ * <ngt-mesh #sun [position]="[0, 5, -10]">
+ *   <ngt-sphere-geometry />
+ *   <ngt-mesh-basic-material color="yellow" />
+ * </ngt-mesh>
+ *
+ * <ngtp-effect-composer>
+ *   <ngtp-god-rays [options]="{ sun: sunRef, density: 0.96 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpGodRays {
     constructor() {
+        /**
+         * Configuration options for the god rays effect.
+         * Must include a `sun` property with the light source reference.
+         * @see GodRaysOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effectComposer = inject(NgtpEffectComposer);
         this.effectOptions = omit(this.options, ['sun']);
         this.sun = pick(this.options, 'sun');
+        /**
+         * Resolves the sun reference to the actual Three.js object.
+         * Handles both direct references and function references.
+         */
         this.sunElement = computed(() => {
             const sun = this.sun();
             if (typeof sun === 'function')
                 return resolveRef(sun());
             return resolveRef(sun);
         }, ...(ngDevMode ? [{ debugName: "sunElement" }] : []));
+        /**
+         * The underlying GodRaysEffect instance.
+         * Created with the camera, sun element, and configured options.
+         */
         this.effect = computed(() => {
             const [camera, sunElement, options] = [this.effectComposer.camera(), this.sunElement(), this.effectOptions()];
             return new GodRaysEffect(camera, sunElement, options);
@@ -737,11 +1150,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a grid overlay effect to the scene.
+ *
+ * This effect overlays a grid pattern on the rendered scene, which can be
+ * useful for technical visualization or stylized effects.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-grid [options]="{ scale: 1.5, lineWidth: 0.5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpGrid {
     constructor() {
+        /**
+         * Configuration options for the grid effect.
+         * @see GridOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.effectOptions = omit(this.options, ['size']);
         this.size = pick(this.options, 'size');
+        /** The underlying GridEffect instance */
         this.effect = computed(() => new GridEffect(this.effectOptions()), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect(() => {
             const [size, effect] = [this.size(), this.effect()];
@@ -772,9 +1203,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies hue and saturation adjustments to the scene.
+ *
+ * This effect allows you to shift the hue and adjust the saturation of the
+ * rendered scene as a postprocessing step.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-hue-saturation [options]="{ hue: 0.5, saturation: 0.2 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpHueSaturation {
     constructor() {
+        /**
+         * Configuration options for the hue/saturation effect.
+         * @see HueSaturationEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ HueSaturationEffect });
     }
@@ -803,8 +1252,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
-// Created by Anderson Mancini 2023
-// React Three Fiber Ultimate LensFlare
+/**
+ * Lens Flare Effect
+ * Created by Anderson Mancini 2023
+ * React Three Fiber Ultimate LensFlare - Ported to Angular Three
+ */
+/**
+ * Shader configuration for the lens flare effect.
+ * Contains the GLSL fragment shader code.
+ */
 const LensFlareShader = {
     fragmentShader: /* language=glsl glsl */ `
 
@@ -852,7 +1308,46 @@ const LensFlareShader = {
   void mainImage(vec4 v,vec2 r,out vec4 i){vec2 g=r-.5;g.y*=iResolution.y/iResolution.x;vec2 l=lensPosition*.5;l.y*=iResolution.y/iResolution.x;vec3 f=mLs(g,l)*20.*colorGain/256.;if(aditionalStreaks){vec3 o=vec3(.9,.2,.1),p=vec3(.3,.1,.9);for(float n=0.;n<10.;n++)f+=drC(g,pow(rnd(n*2e3)*2.8,.1)+1.41,0.,o+n,p+n,rnd(n*20.)*3.+.2-.5,lensPosition);}if(secondaryGhosts){vec3 n=vec3(0);n+=rHx(g,-lensPosition*.25,ghostScale*1.4,vec3(.25,.35,0));n+=rHx(g,lensPosition*.25,ghostScale*.5,vec3(1,.5,.5));n+=rHx(g,lensPosition*.1,ghostScale*1.6,vec3(1));n+=rHx(g,lensPosition*1.8,ghostScale*2.,vec3(0,.5,.75));n+=rHx(g,lensPosition*1.25,ghostScale*.8,vec3(1,1,.5));n+=rHx(g,-lensPosition*1.25,ghostScale*5.,vec3(.5,.5,.25));n+=fpow(1.-abs(distance(lensPosition*.8,g)-.7),.985)*colorGain/2100.;f+=n;}if(starBurst){vxtC=g+.5;vec4 n=geLD(g);float o=1.-clamp(0.5,0.,.5)*2.;n+=mix(n,pow(n*2.,vec4(2))*.5,o);float s=(g.x+g.y)*(1./6.);vec2 d=mat2(cos(s),-sin(s),sin(s),cos(s))*vxtC;n+=geLS(d)*2.;f+=clamp(n.xyz*strB().xyz,.01,1.);}i=enabled?vec4(mix(f,vec3(0),opacity)+v.xyz,v.w):vec4(v);}
 `,
 };
+/**
+ * A postprocessing effect that simulates camera lens flares.
+ *
+ * Creates realistic lens flare effects including glare, ghosts, star bursts,
+ * and anamorphic flares. Can be animated and positioned dynamically.
+ *
+ * @example
+ * ```typescript
+ * const effect = new LensFlareEffect({
+ *   glareSize: 0.3,
+ *   starPoints: 8,
+ *   animated: true
+ * });
+ * ```
+ */
 class LensFlareEffect extends Effect {
+    /**
+     * Creates a new LensFlareEffect instance.
+     *
+     * @param options - Configuration options for the lens flare
+     * @param options.blendFunction - How to blend with the scene
+     * @param options.enabled - Whether the effect is enabled
+     * @param options.glareSize - Size of the glare
+     * @param options.lensPosition - Position of the lens on screen
+     * @param options.iResolution - Resolution of the effect
+     * @param options.starPoints - Number of points in the star pattern
+     * @param options.flareSize - Size of individual flares
+     * @param options.flareSpeed - Animation speed of flares
+     * @param options.flareShape - Shape parameter for flares
+     * @param options.animated - Whether to animate the effect
+     * @param options.anamorphic - Enable anamorphic lens simulation
+     * @param options.colorGain - Color tint for the effect
+     * @param options.lensDirtTexture - Texture for lens dirt overlay
+     * @param options.haloScale - Scale of the halo effect
+     * @param options.secondaryGhosts - Enable secondary ghost images
+     * @param options.aditionalStreaks - Enable additional streak effects
+     * @param options.ghostScale - Scale of ghost images
+     * @param options.opacity - Opacity of the effect
+     * @param options.starBurst - Enable star burst effect
+     */
     constructor({ blendFunction = BlendFunction.NORMAL, enabled = true, glareSize = 0.2, lensPosition = [0.01, 0.01], iResolution = [0, 0], starPoints = 6, flareSize = 0.01, flareSpeed = 0.01, flareShape = 0.01, animated = true, anamorphic = false, colorGain = new THREE.Color(20, 20, 20), lensDirtTexture = null, haloScale = 0.5, secondaryGhosts = true, aditionalStreaks = true, ghostScale = 0.0, opacity = 1.0, starBurst = false, } = {}) {
         super('LensFlareEffect', LensFlareShader.fragmentShader, {
             blendFunction,
@@ -879,6 +1374,13 @@ class LensFlareEffect extends Effect {
             ]),
         });
     }
+    /**
+     * Updates the effect's time uniform for animation.
+     *
+     * @param _renderer - The WebGL renderer (unused)
+     * @param _inputBuffer - The input render target (unused)
+     * @param deltaTime - Time elapsed since last frame
+     */
     update(_renderer, _inputBuffer, deltaTime) {
         const iTime = this.uniforms.get('iTime');
         if (iTime) {
@@ -891,15 +1393,44 @@ const defaultOptions$3 = {
     followMouse: false,
     smoothTime: 0.7,
 };
+/**
+ * Angular component that applies a lens flare effect to the scene.
+ *
+ * This effect simulates realistic camera lens flares with support for
+ * dynamic positioning, mouse following, and occlusion detection.
+ * The flare automatically fades when occluded by scene objects.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-lens-flare [options]="{ position: [10, 5, -20], glareSize: 0.3 }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Mouse-following flare -->
+ * <ngtp-effect-composer>
+ *   <ngtp-lens-flare [options]="{ followMouse: true, smoothTime: 0.5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpLensFlare {
     constructor() {
+        /**
+         * Configuration options for the lens flare effect.
+         * @see LensFlareOptions
+         */
         this.options = input(defaultOptions$3, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions$3) });
         this.store = injectStore();
         this.effectComposer = inject(NgtpEffectComposer);
         this.effectOptions = omit(this.options, ['position', 'followMouse', 'smoothTime']);
         this.position = vector3(this.options, 'position');
+        /** Cached vector for projecting 3D position to screen space */
         this.projectedPosition = new THREE.Vector3();
+        /** Cached vector for 2D mouse/raycaster coordinates */
         this.mouse2d = new THREE.Vector2();
+        /** The underlying LensFlareEffect instance */
         this.effect = computed(() => new LensFlareEffect(this.effectOptions()), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect(() => {
             const [lensFlareEffect, width, height] = [
@@ -992,12 +1523,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a LUT (Look-Up Table) color grading effect.
+ *
+ * LUTs are used for color grading in film and photography. This effect applies
+ * a 3D LUT texture to transform the colors of the rendered scene.
+ *
+ * @example
+ * ```typescript
+ * // In component
+ * lutTexture = injectLoader(() => LUTCubeLoader, () => 'path/to/lut.cube');
+ * ```
+ *
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-lut [options]="{ lut: lutTexture() }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpLUT {
     constructor() {
+        /**
+         * Configuration options for the LUT effect.
+         * Must include a `lut` texture.
+         * @see LUTOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.lut = pick(this.options, 'lut');
         this.tetrahedralInterpolation = pick(this.options, 'tetrahedralInterpolation');
         this.store = injectStore();
+        /** The underlying LUT3DEffect instance */
         this.effect = computed(() => {
             const { lut, ...options } = this.options();
             return new LUT3DEffect(lut, options);
@@ -1038,9 +1593,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a noise/grain effect to the scene.
+ *
+ * This effect adds film grain or noise to the rendered image, which can
+ * add a cinematic quality or help hide banding in gradients.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-noise [options]="{ premultiply: true }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpNoise {
     constructor() {
+        /**
+         * Configuration options for the noise effect.
+         * @see NoiseEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ NoiseEffect });
     }
@@ -1073,8 +1646,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 const defaultOptions$2 = {
     selectionLayer: 10,
 };
+/**
+ * Angular component that applies an outline effect to selected objects.
+ *
+ * This effect draws an outline around specified objects in the scene.
+ * Can be used with NgtSelectionApi for declarative selection or with
+ * manual selection via the options input.
+ *
+ * @example
+ * ```html
+ * <!-- With NgtSelectionApi (recommended) -->
+ * <ngt-group [select]="hovered()" (pointerenter)="hovered.set(true)">
+ *   <ngt-mesh>...</ngt-mesh>
+ * </ngt-group>
+ *
+ * <ngtp-effect-composer>
+ *   <ngtp-outline [options]="{ edgeStrength: 2.5, blur: true }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With manual selection -->
+ * <ngtp-effect-composer>
+ *   <ngtp-outline [options]="{ selection: [meshRef.nativeElement], edgeStrength: 5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpOutline {
     constructor() {
+        /**
+         * Configuration options for the outline effect.
+         * @see NgtpOutlineOptions
+         */
         this.options = input(defaultOptions$2, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions$2) });
         this.selectionApi = inject(NgtSelectionApi, { optional: true });
         this.effectComposer = inject(NgtpEffectComposer);
@@ -1105,6 +1709,10 @@ class NgtpOutline {
             'blur',
             'xRay',
         ]);
+        /**
+         * The underlying OutlineEffect instance.
+         * Created with the scene, camera, and configured options.
+         */
         this.effect = computed(() => {
             const [scene, camera, blendFunction, patternTexture, edgeStrength, pulseSpeed, visibleEdgeColor, hiddenEdgeColor, width, height, kernelSize, blur, xRay, restOptions,] = [
                 this.effectComposer.scene(),
@@ -1173,6 +1781,14 @@ class NgtpOutline {
             });
         });
     }
+    /**
+     * Handles changes to the selection and updates the outline effect.
+     *
+     * @param selected - Function returning the currently selected objects
+     * @param _effect - Function returning the OutlineEffect instance
+     * @param _invalidate - Function returning the invalidate callback
+     * @returns Cleanup function to clear the selection
+     */
     handleSelectionChangeEffect(selected, _effect, _invalidate) {
         const selection = selected();
         if (!selection || selection.length === 0)
@@ -1212,10 +1828,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a pixelation effect to the scene.
+ *
+ * This effect reduces the resolution of the rendered image to create
+ * a retro, 8-bit style appearance.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-pixelation [options]="{ granularity: 10 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpPixelation {
     constructor() {
+        /**
+         * Configuration options for the pixelation effect.
+         * @default { granularity: 5 }
+         * @see PixelationOptions
+         */
         this.options = input({ granularity: 5 }, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs({ granularity: 5 }) });
         this.granularity = pick(this.options, 'granularity');
+        /** The underlying PixelationEffect instance */
         this.effect = computed(() => new PixelationEffect(this.granularity()), ...(ngDevMode ? [{ debugName: "effect" }] : []));
         effect((onCleanup) => {
             const effect = this.effect();
@@ -1243,9 +1878,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 const defaultOptions$1 = {
     density: 1.25,
 };
+/**
+ * Angular component that applies a scanline effect to the scene.
+ *
+ * This effect overlays horizontal scanlines on the image, simulating
+ * the appearance of old CRT monitors or television screens.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-scanline [options]="{ density: 2.0 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpScanline {
     constructor() {
+        /**
+         * Configuration options for the scanline effect.
+         * @default { density: 1.25 }
+         * @see ScanlineEffectOptions
+         */
         this.options = input(defaultOptions$1, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions$1) });
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ ScanlineEffect });
     }
@@ -1275,17 +1929,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
-// const addLight = (light: Object3D, effect: SelectiveBloomEffect) => light.layers.enable(effect.selection.layer)
-// const removeLight = (light: Object3D, effect: SelectiveBloomEffect) => light.layers.disable(effect.selection.layer)
 const defaultOptions = {
     selectionLayer: 10,
     inverted: false,
     ignoreBackground: false,
 };
+/**
+ * Angular component that applies bloom only to selected objects.
+ *
+ * Unlike the standard bloom effect, selective bloom allows you to specify
+ * which objects should glow. Requires light sources to be provided for
+ * proper rendering.
+ *
+ * Can be used with NgtSelectionApi for declarative selection or with
+ * manual selection via the selection input.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-selective-bloom
+ *     [lights]="[ambientLightRef, pointLightRef]"
+ *     [selection]="[glowingMeshRef]"
+ *     [options]="{ intensity: 2, luminanceThreshold: 0 }"
+ *   />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpSelectiveBloom {
     constructor() {
+        /**
+         * Light sources that should be included in the bloom calculation.
+         * Required for proper selective bloom rendering.
+         */
         this.lights = input.required(...(ngDevMode ? [{ debugName: "lights" }] : []));
+        /**
+         * Objects to apply bloom to.
+         * Can be a single object, array of objects, or ElementRefs.
+         * Not needed if using NgtSelectionApi.
+         * @default []
+         */
         this.selection = input([], ...(ngDevMode ? [{ debugName: "selection" }] : []));
+        /**
+         * Configuration options for the selective bloom effect.
+         * @see SelectiveBloomOptions
+         */
         this.options = input(defaultOptions, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions) });
         this.blendFunction = pick(this.options, 'blendFunction');
         this.luminanceThreshold = pick(this.options, 'luminanceThreshold');
@@ -1319,6 +2006,10 @@ class NgtpSelectiveBloom {
                 return [];
             return this.selectionApi.selected().map((selected) => resolveRef(selected));
         }, ...(ngDevMode ? [{ debugName: "resolvedNgtSelected" }] : []));
+        /**
+         * The underlying SelectiveBloomEffect instance.
+         * Created with the scene, camera, and configured options.
+         */
         this.effect = computed(() => {
             const effect = new SelectiveBloomEffect(this.effectComposer.scene(), this.effectComposer.camera(), {
                 blendFunction: this.blendFunction() || BlendFunction.ADD,
@@ -1388,9 +2079,21 @@ class NgtpSelectiveBloom {
             });
         });
     }
+    /**
+     * Enables the selection layer on a light source.
+     *
+     * @param effect - The SelectiveBloomEffect instance
+     * @param light - The light to enable on the selection layer
+     */
     addLight(effect, light) {
         light.layers.enable(effect.selection.layer);
     }
+    /**
+     * Disables the selection layer on a light source.
+     *
+     * @param effect - The SelectiveBloomEffect instance
+     * @param light - The light to disable from the selection layer
+     */
     removeLight(effect, light) {
         light.layers.disable(effect.selection.layer);
     }
@@ -1412,9 +2115,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { lights: [{ type: i0.Input, args: [{ isSignal: true, alias: "lights", required: true }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a sepia tone effect to the scene.
+ *
+ * This effect gives the rendered image a warm, brownish tint similar to
+ * old photographs, creating a vintage or nostalgic appearance.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-sepia [options]="{ intensity: 0.5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpSepia {
     constructor() {
+        /**
+         * Configuration options for the sepia effect.
+         * @see SepiaEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ SepiaEffect });
     }
@@ -1443,9 +2164,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a shock wave distortion effect.
+ *
+ * This effect creates an expanding ring distortion that simulates a
+ * shock wave or explosion ripple emanating from a point in the scene.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-shock-wave
+ *     [options]="{ speed: 2, maxRadius: 1, waveSize: 0.2, amplitude: 0.05 }"
+ *   />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpShockWave {
     constructor() {
+        /**
+         * Configuration options for the shock wave effect.
+         * @see ShockWaveEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ ShockWaveEffect });
     }
@@ -1474,9 +2215,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies Subpixel Morphological Anti-Aliasing (SMAA).
+ *
+ * SMAA is a high-quality, efficient anti-aliasing technique that provides
+ * better results than FXAA while being less demanding than multisampling.
+ * It's particularly effective at smoothing edges while preserving sharpness.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer [options]="{ multisampling: 0 }">
+ *   <ngtp-smaa />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With preset -->
+ * <ngtp-effect-composer>
+ *   <ngtp-smaa [options]="{ preset: SMAAPreset.ULTRA }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpSMAA {
     constructor() {
+        /**
+         * Configuration options for the SMAA effect.
+         * @see SMAAEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ SMAAEffect });
     }
@@ -1505,9 +2273,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a tilt-shift blur effect.
+ *
+ * This effect simulates the shallow depth of field look from tilt-shift
+ * photography, creating a "miniature" or "diorama" appearance where only
+ * a horizontal band of the image is in focus.
+ *
+ * Uses the postprocessing library's built-in TiltShiftEffect.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-tilt-shift [options]="{ blur: 0.5, offset: 0.5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @see NgtpTiltShift2 for an alternative implementation with different parameters
+ */
 class NgtpTiltShift {
     constructor() {
+        /**
+         * Configuration options for the tilt-shift effect.
+         * @see TiltShiftEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ TiltShiftEffect });
     }
@@ -1537,6 +2328,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Custom tilt-shift shader based on Evan Wallace's implementation.
+ * Provides line-based focus control with customizable blur parameters.
+ */
 const TiltShiftShader = {
     fragmentShader: /* language=glsl glsl */ `
 
@@ -1596,7 +2391,35 @@ const TiltShiftShader = {
     }
     `,
 };
+/**
+ * A custom tilt-shift effect with line-based focus control.
+ *
+ * This effect provides a different approach to tilt-shift compared to
+ * the standard TiltShiftEffect, allowing you to define a focus line
+ * between two screen-space points.
+ *
+ * @example
+ * ```typescript
+ * const effect = new TiltShift2Effect({
+ *   blur: 0.2,
+ *   start: [0.5, 0.3],
+ *   end: [0.5, 0.7]
+ * });
+ * ```
+ */
 class TiltShift2Effect extends Effect {
+    /**
+     * Creates a new TiltShift2Effect instance.
+     *
+     * @param options - Configuration options
+     * @param options.blendFunction - How to blend with the scene
+     * @param options.blur - Blur intensity [0, 1], can exceed 1 for more blur
+     * @param options.taper - Taper of the focus area [0, 1]
+     * @param options.start - Start point of focus line in screen space [x, y]
+     * @param options.end - End point of focus line in screen space [x, y]
+     * @param options.samples - Number of blur samples
+     * @param options.direction - Direction of the blur
+     */
     constructor({ blendFunction = BlendFunction.NORMAL, blur = 0.15, // [0, 1], can go beyond 1 for extra
     taper = 0.5, // [0, 1], can go beyond 1 for extra
     start = [0.5, 0.0], // [0,1] percentage x,y of screenspace
@@ -1619,9 +2442,30 @@ class TiltShift2Effect extends Effect {
     }
 }
 extend({ TiltShift2Effect });
+/**
+ * Angular component that applies an alternative tilt-shift effect.
+ *
+ * This effect uses a line-based focus system where you define start and
+ * end points in screen space. The area between these points stays in focus
+ * while the rest of the image is blurred.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-tilt-shift2 [options]="{ blur: 0.2, start: [0.5, 0.3], end: [0.5, 0.7] }" />
+ * </ngtp-effect-composer>
+ * ```
+ *
+ * @see NgtpTiltShift for the standard tilt-shift implementation
+ */
 class NgtpTiltShift2 {
     constructor() {
+        /**
+         * Configuration options for the tilt-shift effect.
+         * @see TiltShift2EffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: NgtpTiltShift2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -1650,9 +2494,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies tone mapping to the scene.
+ *
+ * Tone mapping converts HDR (High Dynamic Range) values to LDR (Low Dynamic
+ * Range) for display. Various tone mapping modes are available including
+ * Reinhard, ACES Filmic, and custom linear options.
+ *
+ * Note: The effect composer disables Three.js's built-in tone mapping,
+ * so this effect should be used if tone mapping is desired.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-tone-mapping [options]="{ mode: ToneMappingMode.ACES_FILMIC }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpToneMapping {
     constructor() {
+        /**
+         * Configuration options for the tone mapping effect.
+         * @see ToneMappingEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ ToneMappingEffect });
     }
@@ -1681,9 +2547,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Angular component that applies a vignette effect to the scene.
+ *
+ * This effect darkens the corners and edges of the image, drawing the
+ * viewer's attention to the center. It's a common cinematic technique
+ * for creating focus and atmosphere.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-vignette [options]="{ darkness: 0.5, offset: 0.3 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpVignette {
     constructor() {
+        /**
+         * Configuration options for the vignette effect.
+         * @see VignetteEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ VignetteEffect });
     }
@@ -1712,6 +2597,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * Shader configuration for the water distortion effect.
+ * Creates a rippling, underwater-like distortion.
+ */
 const WaterShader = {
     fragmentShader: /* language=glsl glsl */ `
   uniform float factor;
@@ -1727,7 +2616,25 @@ const WaterShader = {
     outputColor = rgba;
   }`,
 };
+/**
+ * A postprocessing effect that simulates an underwater/water distortion.
+ *
+ * Creates animated rippling distortion that makes the scene appear as if
+ * viewed through water or a heat haze.
+ *
+ * @example
+ * ```typescript
+ * const effect = new WaterEffect({ factor: 0.5 });
+ * ```
+ */
 class WaterEffect extends Effect {
+    /**
+     * Creates a new WaterEffect instance.
+     *
+     * @param options - Configuration options
+     * @param options.blendFunction - How to blend with the scene
+     * @param options.factor - Intensity of the water effect (0 = no effect)
+     */
     constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {
         super('WaterEffect', WaterShader.fragmentShader, {
             blendFunction,
@@ -1736,9 +2643,27 @@ class WaterEffect extends Effect {
         });
     }
 }
+/**
+ * Angular component that applies a water/ripple distortion effect.
+ *
+ * This effect creates an animated underwater-like distortion that can
+ * simulate viewing through water, heat haze, or a dream-like state.
+ *
+ * @example
+ * ```html
+ * <ngtp-effect-composer>
+ *   <ngtp-water [options]="{ factor: 0.5 }" />
+ * </ngtp-effect-composer>
+ * ```
+ */
 class NgtpWater {
     constructor() {
+        /**
+         * Configuration options for the water effect.
+         * @see WaterEffectOptions
+         */
         this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
+        /** Reference to the host NgtpEffect directive */
         this.effect = inject(NgtpEffect, { host: true });
         extend({ WaterEffect });
     }