@react-three/postprocessing 3.0.5 → 3.1.0

package/README.md

@@ -1,7 +1,7 @@
 # react-postprocessing
 
 [![Version](https://img.shields.io/npm/v/@react-three/postprocessing?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/postprocessing)
-[![Storybook](https://img.shields.io/static/v1?message=Storybook&style=flat&colorA=000000&colorB=000000&label=&logo=storybook&logoColor=ffffff)](https://pmndrs.github.io/react-postprocessing)
+[![Docs](https://img.shields.io/static/v1?message=Docs&style=flat&colorA=000000&colorB=000000&label=&logo=googledocs&logoColor=ffffff)](https://pmndrs.github.io/react-postprocessing)
 [![Downloads](https://img.shields.io/npm/dt/@react-three/postprocessing.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/postprocessing)
 [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/ZZjjNvJ)
 [![Open in GitHub Codespaces](https://img.shields.io/static/v1?&message=Open%20in%20%20Codespaces&style=flat&colorA=000000&colorB=000000&label=GitHub&logo=github&logoColor=ffffff)](https://github.com/codespaces/new?template_repository=pmndrs%2Freact-postprocessing)
@@ -18,8 +18,8 @@ npm install @react-three/postprocessing
 ```
 
 <p align="center">
-  <a href="https://pqrpl.csb.app" target="_blank"><img width="274" src="bubbles.jpg" alt="Bubbles" /></a>
-  <a href="https://5jgjz.csb.app" target="_blank"><img width="274" src="control.jpg" alt="Take Control" /></a>
+  <a href="https://pmndrs.github.io/examples/bubbles" target="_blank"><img width="274" src="https://pmndrs.github.io/examples/bubbles/thumbnail.webp" alt="Bubbles" /></a>
+  <a href="https://pmndrs.github.io/examples/take-control" target="_blank"><img width="274" src="https://pmndrs.github.io/examples/take-control/thumbnail.webp" alt="Take Control" /></a>
 </p>
 <p align="middle">
   <i>These demos are real, you can click them! They contain the full code, too. 📦</i>
@@ -49,14 +49,13 @@ get high performance crisp results w/o jagged edges.
 #### What does it look like?
 
 Here's an example combining a couple of effects
-([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)).
+([live demo](https://pmndrs.github.io/examples/bubbles)).
 
-<a href="https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?" target="_blank" rel="noopener">
-<img src="bubbles.jpg" alt="Bubbles Demo" />
+<a href="https://pmndrs.github.io/examples/bubbles" target="_blank" rel="noopener">
+<img src="https://pmndrs.github.io/examples/bubbles/thumbnail.webp" alt="Bubbles Demo" />
 </a>
 
 ```jsx
-import React from 'react'
 import { Bloom, DepthOfField, EffectComposer, Noise, Vignette } from '@react-three/postprocessing'
 import { Canvas } from '@react-three/fiber'
 

package/dist/EffectComposer.d.ts

@@ -1,4 +1,4 @@
-import { DepthDownsamplingPass, EffectComposer as EffectComposerImpl, NormalPass } from 'postprocessing';
+import { DepthDownsamplingPass, EffectComposer as EffectComposerImpl, NormalPass, Pass } from 'postprocessing';
 import { type ReactNode, type Ref } from 'react';
 import type { Camera, Scene, TextureDataType } from 'three';
 export declare const EffectComposerContext: import("react").Context<{
@@ -8,6 +8,8 @@ export declare const EffectComposerContext: import("react").Context<{
     camera: Camera;
     scene: Scene;
     resolutionScale?: number;
+    requestRebuild: () => void;
+    autoClear: boolean;
 }>;
 export type EffectComposerProps = {
     enabled?: boolean;
@@ -17,12 +19,17 @@ export type EffectComposerProps = {
     enableNormalPass?: boolean;
     stencilBuffer?: boolean;
     autoClear?: boolean;
+    autoRenderToScreen?: boolean;
     resolutionScale?: number;
     multisampling?: number;
     frameBufferType?: TextureDataType;
     renderPriority?: number;
     camera?: Camera;
     scene?: Scene;
+    renderPass?: (scene: Scene, camera: Camera) => Pass;
+    mergeMode?: 'auto' | 'all' | 'none';
     ref?: Ref<EffectComposerImpl>;
 };
-export declare const EffectComposer: import("react").MemoExoticComponent<({ children, camera: _camera, scene: _scene, resolutionScale, enabled, renderPriority, autoClear, depthBuffer, enableNormalPass, stencilBuffer, multisampling, frameBufferType, ref, }: EffectComposerProps) => import("react").JSX.Element | null>;
+export declare const groupPasses: WeakSet<Pass>;
+export declare function disposePassWithoutEffects(pass: Pass): void;
+export declare const EffectComposer: import("react").MemoExoticComponent<({ children, camera: _camera, scene: _scene, resolutionScale, enabled, renderPriority, autoClear, autoRenderToScreen, depthBuffer, enableNormalPass, stencilBuffer, multisampling, frameBufferType, renderPass, mergeMode, ref, }: EffectComposerProps) => import("react").JSX.Element | null>;

package/dist/EffectGroup.d.ts

@@ -0,0 +1,9 @@
+import { EffectPass } from 'postprocessing';
+import { type ReactNode, type Ref } from 'react';
+export type EffectGroupProps = {
+    /** Toggles the whole pass, like Pass.enabled in vanilla postprocessing - cheap, no reconstruction. */
+    enabled?: boolean;
+    children: ReactNode;
+    ref?: Ref<EffectPass>;
+};
+export declare function EffectGroup({ enabled, children, ref }: EffectGroupProps): import("react").JSX.Element;

package/dist/createEffectComponent.d.ts

@@ -0,0 +1,30 @@
+import type { BlendFunction, Effect, Pass } from 'postprocessing';
+import type { JSX, Ref } from 'react';
+export type EffectConstructor = new (...args: any[]) => Effect | Pass;
+export type EffectOptions<T extends EffectConstructor> = NonNullable<ConstructorParameters<T>[0]>;
+/**
+ * Registers `effect` as a JSX intrinsic once per class and returns a
+ * component that renders it. Everything else - construction from `args`,
+ * live prop application (with the same Color/Vector coercion and reset-
+ * to-default on removal any r3f element gets), disposal - is r3f's own
+ * reconciler, same rules as `<mesh>`/`<meshStandardMaterial>`. Only fits
+ * effects whose constructor works with zero arguments (`new Effect()`) -
+ * r3f's own reset-on-removal falls back to `0` otherwise, which is wrong
+ * for anything non-numeric. Effects that require e.g. scene/camera stay
+ * hand-rolled (see Outline.tsx, SelectiveBloom.tsx, ShockWave.tsx).
+ *
+ * `blendFunction`/`opacity` are pierced through to `blendMode-*` - every
+ * `Effect` has them on a nested `blendMode`, not on the effect itself, so a
+ * plain top-level prop would silently land on a stray, unread property.
+ * Applied via useLiveDefaults, not as plain JSX props: BlendMode's own
+ * constructor requires `blendFunction` (no default), so its constructor
+ * length isn't 0 either, and r3f's native reset-on-removal falls back to
+ * `changedProps[prop] = 0` - which is BlendFunction.SKIP, not a merely
+ * "wrong" blend function but one that hides the effect entirely.
+ */
+export declare function createEffectComponent<T extends EffectConstructor, P extends object>(effect: T): (props: P & {
+    blendFunction?: BlendFunction;
+    opacity?: number;
+    args?: ConstructorParameters<T>;
+    ref?: Ref<InstanceType<T>>;
+}) => JSX.Element;

package/dist/effects/ASCII.d.ts

@@ -1,19 +1,40 @@
 import { Effect } from 'postprocessing';
-import { Ref } from 'react';
-import { Texture } from 'three';
-interface IASCIIEffectProps {
+import type { Ref } from 'react';
+import { Color, type ColorRepresentation, Texture } from 'three';
+export type ASCIIProps = {
     font?: string;
     characters?: string;
     fontSize?: number;
     cellSize?: number;
-    color?: string;
+    color?: ColorRepresentation;
     invert?: boolean;
     ref?: Ref<ASCIIEffect>;
-}
+};
 declare class ASCIIEffect extends Effect {
-    constructor({ font, characters, fontSize, cellSize, color, invert, }?: Omit<IASCIIEffectProps, 'ref'>);
+    private _font;
+    private _characters;
+    private _fontSize;
+    constructor({ font, characters, fontSize, cellSize, color, invert, }?: Omit<ASCIIProps, 'ref'>);
+    get cellSize(): number;
+    set cellSize(value: number);
+    get invert(): boolean;
+    set invert(value: boolean);
+    get color(): Color;
+    set color(value: ColorRepresentation);
+    get font(): string;
+    set font(value: string);
+    get characters(): string;
+    set characters(value: string);
+    get fontSize(): number;
+    set fontSize(value: number);
+    private updateCharactersTexture;
     /** Draws the characters on a Canvas and returns a texture */
     createCharactersTexture(characters: string, font: string, fontSize: number): Texture;
 }
-export declare function ASCII({ font, characters, fontSize, cellSize, color, invert, ref, }: IASCIIEffectProps): import("react").JSX.Element;
+export declare const ASCII: (props: ASCIIProps & {
+    blendFunction?: import("postprocessing").BlendFunction;
+    opacity?: number;
+    args?: [(Omit<ASCIIProps, "ref"> | undefined)?] | undefined;
+    ref?: Ref<ASCIIEffect> | undefined;
+}) => import("react").JSX.Element;
 export {};

package/dist/effects/Autofocus.d.ts

@@ -3,7 +3,7 @@ import { DepthOfFieldEffect } from 'postprocessing';
 import { Ref, type ComponentProps, type RefObject } from 'react';
 import { Vector3 } from 'three';
 import { DepthOfField } from './DepthOfField';
-export type AutofocusProps = ComponentProps<typeof DepthOfField> & {
+export type AutofocusProps = Omit<ComponentProps<typeof DepthOfField>, 'ref'> & {
     target?: R3FVector3;
     /** should the target follow the pointer */
     mouse?: boolean;

package/dist/effects/Bloom.d.ts

@@ -1,2 +1,10 @@
 import { BloomEffect } from 'postprocessing';
-export declare const Bloom: (props: import("..").EffectProps<typeof BloomEffect>) => import("react").JSX.Element;
+import type { Ref } from 'react';
+import { type EffectOptions } from '../createEffectComponent';
+type BloomOptions = EffectOptions<typeof BloomEffect>;
+export type BloomProps = BloomOptions & {
+    opacity?: number;
+    ref?: Ref<BloomEffect>;
+};
+export declare function Bloom({ blendFunction, luminanceThreshold, luminanceSmoothing, mipmapBlur, radius, levels, resolutionScale, resolutionX, resolutionY, ...liveProps }: BloomProps): import("react").JSX.Element;
+export {};

package/dist/effects/BrightnessContrast.d.ts

@@ -1,2 +1,15 @@
 import { BrightnessContrastEffect } from 'postprocessing';
-export declare const BrightnessContrast: (props: import("..").EffectProps<typeof BrightnessContrastEffect>) => import("react").JSX.Element;
+export declare const BrightnessContrast: (props: {
+    blendFunction?: import("postprocessing").BlendFunction;
+    brightness?: number;
+    contrast?: number;
+} & {
+    blendFunction?: import("postprocessing").BlendFunction;
+    opacity?: number;
+    args?: [({
+        blendFunction?: import("postprocessing").BlendFunction;
+        brightness?: number;
+        contrast?: number;
+    } | undefined)?] | undefined;
+    ref?: import("react").Ref<BrightnessContrastEffect> | undefined;
+}) => import("react").JSX.Element;

package/dist/effects/ChromaticAberration.d.ts

@@ -1,8 +1,31 @@
 import type { ReactThreeFiber } from '@react-three/fiber';
 import { ChromaticAberrationEffect } from 'postprocessing';
 import type { Ref } from 'react';
-export type ChromaticAberrationProps = Omit<Partial<ConstructorParameters<typeof ChromaticAberrationEffect>[0]>, 'offset'> & {
-    ref?: Ref<ChromaticAberrationEffect>;
+import { type EffectOptions } from '../createEffectComponent';
+export type ChromaticAberrationProps = Omit<EffectOptions<typeof ChromaticAberrationEffect>, 'offset' | 'radialModulation' | 'modulationOffset'> & {
     offset?: ReactThreeFiber.Vector2;
+    radialModulation?: boolean;
+    modulationOffset?: number;
+    ref?: Ref<ChromaticAberrationEffect>;
 };
-export declare function ChromaticAberration({ ref, ...props }: ChromaticAberrationProps): import("react").JSX.Element;
+export declare const ChromaticAberration: (props: Omit<{
+    blendFunction?: import("postprocessing").BlendFunction;
+    offset?: import("three").Vector2;
+    radialModulation: boolean;
+    modulationOffset: number;
+}, "offset" | "radialModulation" | "modulationOffset"> & {
+    offset?: ReactThreeFiber.Vector2;
+    radialModulation?: boolean;
+    modulationOffset?: number;
+    ref?: Ref<ChromaticAberrationEffect>;
+} & {
+    blendFunction?: import("postprocessing").BlendFunction;
+    opacity?: number;
+    args?: [({
+        blendFunction?: import("postprocessing").BlendFunction;
+        offset?: import("three").Vector2;
+        radialModulation: boolean;
+        modulationOffset: number;
+    } | undefined)?] | undefined;
+    ref?: Ref<ChromaticAberrationEffect> | undefined;
+}) => import("react").JSX.Element;

package/dist/effects/ColorAverage.d.ts

@@ -1,7 +1,7 @@
-import { BlendFunction, ColorAverageEffect } from 'postprocessing';
-import type { Ref } from 'react';
-export type ColorAverageProps = {
-    blendFunction?: BlendFunction;
-    ref?: Ref<ColorAverageEffect>;
-};
-export declare function ColorAverage({ blendFunction, ref }: ColorAverageProps): import("react").JSX.Element;
+import { ColorAverageEffect } from 'postprocessing';
+export declare const ColorAverage: (props: object & {
+    blendFunction?: import("postprocessing").BlendFunction;
+    opacity?: number;
+    args?: [blendFunction?: import("postprocessing").BlendFunction | undefined] | undefined;
+    ref?: import("react").Ref<ColorAverageEffect> | undefined;
+}) => import("react").JSX.Element;

package/dist/effects/ColorDepth.d.ts

@@ -1,2 +1,8 @@
 import { ColorDepthEffect } from 'postprocessing';
-export declare const ColorDepth: (props: import("..").EffectProps<typeof ColorDepthEffect>) => import("react").JSX.Element;
+import type { Ref } from 'react';
+import { type EffectOptions } from '../createEffectComponent';
+export type ColorDepthProps = EffectOptions<typeof ColorDepthEffect> & {
+    opacity?: number;
+    ref?: Ref<ColorDepthEffect>;
+};
+export declare function ColorDepth({ bits, ...props }: ColorDepthProps): import("react").JSX.Element;

package/dist/effects/Depth.d.ts

@@ -1,2 +1,13 @@
 import { DepthEffect } from 'postprocessing';
-export declare const Depth: (props: import("..").EffectProps<typeof DepthEffect>) => import("react").JSX.Element;
+export declare const Depth: (props: {
+    blendFunction?: import("postprocessing").BlendFunction;
+    inverted?: boolean;
+} & {
+    blendFunction?: import("postprocessing").BlendFunction;
+    opacity?: number;
+    args?: [({
+        blendFunction?: import("postprocessing").BlendFunction;
+        inverted?: boolean;
+    } | undefined)?] | undefined;
+    ref?: import("react").Ref<DepthEffect> | undefined;
+}) => import("react").JSX.Element;

package/dist/effects/DotScreen.d.ts

@@ -1,2 +1,15 @@
 import { DotScreenEffect } from 'postprocessing';
-export declare const DotScreen: (props: import("..").EffectProps<typeof DotScreenEffect>) => import("react").JSX.Element;
+export declare const DotScreen: (props: {
+    blendFunction?: import("postprocessing").BlendFunction;
+    angle?: number;
+    scale?: number;
+} & {
+    blendFunction?: import("postprocessing").BlendFunction;
+    opacity?: number;
+    args?: [({
+        blendFunction?: import("postprocessing").BlendFunction;
+        angle?: number;
+        scale?: number;
+    } | undefined)?] | undefined;
+    ref?: import("react").Ref<DotScreenEffect> | undefined;
+}) => import("react").JSX.Element;

package/dist/effects/FXAA.d.ts

@@ -1,2 +1,11 @@
 import { FXAAEffect } from 'postprocessing';
-export declare const FXAA: (props: import("..").EffectProps<typeof FXAAEffect>) => import("react").JSX.Element;
+export declare const FXAA: (props: {
+    blendFunction?: import("postprocessing").BlendFunction;
+} & {
+    blendFunction?: import("postprocessing").BlendFunction;
+    opacity?: number;
+    args?: [({
+        blendFunction?: import("postprocessing").BlendFunction;
+    } | undefined)?] | undefined;
+    ref?: import("react").Ref<FXAAEffect> | undefined;
+}) => import("react").JSX.Element;

package/dist/effects/Glitch.d.ts

@@ -1,13 +1,18 @@
-import { ReactThreeFiber } from '@react-three/fiber';
+import type { ReactThreeFiber } from '@react-three/fiber';
 import { GlitchEffect, GlitchMode } from 'postprocessing';
-import { Ref } from 'react';
-export type GlitchProps = ConstructorParameters<typeof GlitchEffect>[0] & Partial<{
-    mode: GlitchMode;
-    active: boolean;
-    delay: ReactThreeFiber.Vector2;
-    duration: ReactThreeFiber.Vector2;
-    chromaticAberrationOffset: ReactThreeFiber.Vector2;
-    strength: ReactThreeFiber.Vector2;
+import type { Ref } from 'react';
+import { type EffectOptions } from '../createEffectComponent';
+type GlitchOptions = Omit<EffectOptions<typeof GlitchEffect>, 'delay' | 'duration' | 'strength' | 'chromaticAberrationOffset'> & {
+    delay?: ReactThreeFiber.Vector2;
+    duration?: ReactThreeFiber.Vector2;
+    strength?: ReactThreeFiber.Vector2;
+    chromaticAberrationOffset?: ReactThreeFiber.Vector2;
+    mode?: GlitchMode;
+};
+export type GlitchProps = GlitchOptions & {
+    active?: boolean;
+    opacity?: number;
     ref?: Ref<GlitchEffect>;
-}>;
-export declare function Glitch({ active, ref, ...props }: GlitchProps): import("react").JSX.Element;
+};
+export declare function Glitch({ active, mode, dtSize, ...props }: GlitchProps): import("react").JSX.Element;
+export {};

package/dist/effects/GodRays.d.ts

@@ -5,5 +5,5 @@ type GodRaysProps = ConstructorParameters<typeof GodRaysEffect>[2] & {
     sun: Mesh | Points | RefObject<Mesh | Points>;
     ref?: Ref<GodRaysEffect>;
 };
-export declare function GodRays({ ref, ...props }: GodRaysProps): import("react").JSX.Element;
+export declare function GodRays({ sun, blendFunction, density, decay, weight, exposure, clampMax, blur, kernelSize, samples, width, height, resolutionScale, resolutionX, resolutionY, ref, }: GodRaysProps): import("react").JSX.Element;
 export {};

package/dist/effects/Grid.d.ts

@@ -1,11 +1,12 @@
 import { GridEffect } from 'postprocessing';
-import { Ref } from 'react';
-type GridProps = ConstructorParameters<typeof GridEffect>[0] & Partial<{
-    size: {
+import { type Ref } from 'react';
+import { type EffectOptions } from '../createEffectComponent';
+export type GridProps = EffectOptions<typeof GridEffect> & {
+    size?: {
         width: number;
         height: number;
     };
-    ref: Ref<GridEffect>;
-}>;
+    opacity?: number;
+    ref?: Ref<GridEffect>;
+};
 export declare function Grid({ size, ref, ...props }: GridProps): import("react").JSX.Element;
-export {};

package/dist/effects/HueSaturation.d.ts

@@ -1,2 +1,15 @@
 import { HueSaturationEffect } from 'postprocessing';
-export declare const HueSaturation: (props: import("..").EffectProps<typeof HueSaturationEffect>) => import("react").JSX.Element;
+export declare const HueSaturation: (props: {
+    blendFunction?: import("postprocessing").BlendFunction;
+    hue?: number;
+    saturation?: number;
+} & {
+    blendFunction?: import("postprocessing").BlendFunction;
+    opacity?: number;
+    args?: [({
+        blendFunction?: import("postprocessing").BlendFunction;
+        hue?: number;
+        saturation?: number;
+    } | undefined)?] | undefined;
+    ref?: import("react").Ref<HueSaturationEffect> | undefined;
+}) => import("react").JSX.Element;

package/dist/effects/LUT.d.ts

@@ -7,4 +7,4 @@ export type LUTProps = {
     tetrahedralInterpolation?: boolean;
     ref?: Ref<LUT3DEffect>;
 };
-export declare function LUT({ lut, tetrahedralInterpolation, ref, ...props }: LUTProps): import("react").JSX.Element;
+export declare function LUT({ lut, blendFunction, tetrahedralInterpolation, ref }: LUTProps): import("react").JSX.Element;

package/dist/effects/LensFlare.d.ts

@@ -1,4 +1,6 @@
+import { type ReactThreeFiber } from '@react-three/fiber';
 import { BlendFunction, Effect } from 'postprocessing';
+import { type Ref } from 'react';
 import { Color, Texture, Vector2, Vector3 } from 'three';
 type LensFlareEffectOptions = {
     /** The blend function of this effect */
@@ -41,14 +43,53 @@ type LensFlareEffectOptions = {
     starBurst: boolean;
 };
 export declare class LensFlareEffect extends Effect {
-    constructor({ blendFunction, enabled, glareSize, lensPosition, screenRes, starPoints, flareSize, flareSpeed, flareShape, animated, anamorphic, colorGain, lensDirtTexture, haloScale, secondaryGhosts, aditionalStreaks, ghostScale, opacity, starBurst, }: LensFlareEffectOptions);
+    constructor({ blendFunction, enabled, glareSize, lensPosition, screenRes, starPoints, flareSize, flareSpeed, flareShape, animated, anamorphic, colorGain, lensDirtTexture, haloScale, secondaryGhosts, aditionalStreaks, ghostScale, opacity, starBurst, }?: Partial<LensFlareEffectOptions>);
     update(_renderer: any, _inputBuffer: any, deltaTime: number): void;
+    private u;
+    private setU;
+    get enabled(): boolean;
+    set enabled(value: boolean);
+    get glareSize(): number;
+    set glareSize(value: number);
+    get lensPosition(): Vector3;
+    set lensPosition(value: Vector3);
+    get screenRes(): Vector2;
+    set screenRes(value: Vector2);
+    get starPoints(): number;
+    set starPoints(value: number);
+    get flareSize(): number;
+    set flareSize(value: number);
+    get flareSpeed(): number;
+    set flareSpeed(value: number);
+    get flareShape(): number;
+    set flareShape(value: number);
+    get animated(): boolean;
+    set animated(value: boolean);
+    get anamorphic(): boolean;
+    set anamorphic(value: boolean);
+    get colorGain(): Color;
+    set colorGain(value: Color);
+    get lensDirtTexture(): Texture | null;
+    set lensDirtTexture(value: Texture | null);
+    get haloScale(): number;
+    set haloScale(value: number);
+    get secondaryGhosts(): boolean;
+    set secondaryGhosts(value: boolean);
+    get aditionalStreaks(): boolean;
+    set aditionalStreaks(value: boolean);
+    get ghostScale(): number;
+    set ghostScale(value: number);
+    get starBurst(): boolean;
+    set starBurst(value: boolean);
+    get opacity(): number;
+    set opacity(value: number);
 }
-type LensFlareProps = {
+type LensFlareProps = Omit<Partial<LensFlareEffectOptions>, 'lensPosition'> & {
     /** Position of the effect */
-    lensPosition?: Vector3;
+    lensPosition?: ReactThreeFiber.Vector3;
     /** The time that it takes to fade the occlusion */
     smoothTime?: number;
-} & Partial<LensFlareEffectOptions>;
-export declare const LensFlare: ({ smoothTime, blendFunction, enabled, glareSize, lensPosition, screenRes, starPoints, flareSize, flareSpeed, flareShape, animated, anamorphic, colorGain, lensDirtTexture, haloScale, secondaryGhosts, aditionalStreaks, ghostScale, opacity, starBurst, }: LensFlareProps) => import("react").JSX.Element;
+    ref?: Ref<LensFlareEffect>;
+};
+export declare const LensFlare: (props: LensFlareProps) => import("react").JSX.Element;
 export {};

package/dist/effects/Noise.d.ts

@@ -1,2 +1,8 @@
 import { NoiseEffect } from 'postprocessing';
-export declare const Noise: (props: import("..").EffectProps<typeof NoiseEffect>) => import("react").JSX.Element;
+import type { Ref } from 'react';
+import { type EffectOptions } from '../createEffectComponent';
+export type NoiseProps = EffectOptions<typeof NoiseEffect> & {
+    opacity?: number;
+    ref?: Ref<NoiseEffect>;
+};
+export declare function Noise({ blendFunction, ...props }: NoiseProps): import("react").JSX.Element;

package/dist/effects/Outline.d.ts

@@ -1,11 +1,14 @@
 import { OutlineEffect } from 'postprocessing';
 import { Ref, RefObject } from 'react';
-import { Object3D } from 'three';
+import { Object3D, type ColorRepresentation } from 'three';
 type ObjectRef = RefObject<Object3D | null>;
-export type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] & Partial<{
+type OutlineEffectOptions = NonNullable<ConstructorParameters<typeof OutlineEffect>[2]>;
+export type OutlineProps = Omit<OutlineEffectOptions, 'visibleEdgeColor' | 'hiddenEdgeColor'> & Partial<{
     selection: Object3D | Object3D[] | ObjectRef | ObjectRef[];
     selectionLayer: number;
+    visibleEdgeColor: ColorRepresentation;
+    hiddenEdgeColor: ColorRepresentation;
     ref?: Ref<OutlineEffect>;
 }>;
-export declare function Outline({ selection, selectionLayer, blendFunction, patternTexture, patternScale, edgeStrength, pulseSpeed, visibleEdgeColor, hiddenEdgeColor, multisampling, resolutionScale, resolutionX, resolutionY, width, height, kernelSize, blur, xRay, ref, }: OutlineProps): import("react").JSX.Element;
+export declare function Outline({ selection, selectionLayer, blendFunction, resolutionScale, resolutionX, resolutionY, ref, ...liveProps }: OutlineProps): import("react").JSX.Element;
 export {};

package/dist/effects/Pixelation.d.ts

@@ -1,5 +1,5 @@
 import { PixelationEffect } from 'postprocessing';
-import { Ref } from 'react';
+import type { Ref } from 'react';
 export type PixelationProps = {
     granularity?: number;
     ref?: Ref<PixelationEffect>;

package/dist/effects/Ramp.d.ts

@@ -1,9 +1,12 @@
-import { Effect } from 'postprocessing';
+import { BlendFunction, Effect } from 'postprocessing';
+import type { Ref } from 'react';
 export declare enum RampType {
     Linear = 0,
     Radial = 1,
     MirroredLinear = 2
 }
+type RampTuple2 = [number, number];
+type RampTuple4 = [number, number, number, number];
 export declare class RampEffect extends Effect {
     constructor({ 
     /**
@@ -61,14 +64,63 @@ export declare class RampEffect extends Effect {
      */
     rampInvert, ...params }?: {
         rampType?: RampType | undefined;
-        rampStart?: number[] | undefined;
-        rampEnd?: number[] | undefined;
-        startColor?: number[] | undefined;
-        endColor?: number[] | undefined;
+        rampStart?: RampTuple2 | undefined;
+        rampEnd?: RampTuple2 | undefined;
+        startColor?: RampTuple4 | undefined;
+        endColor?: RampTuple4 | undefined;
         rampBias?: number | undefined;
         rampGain?: number | undefined;
         rampMask?: boolean | undefined;
         rampInvert?: boolean | undefined;
     });
+    private u;
+    private setU;
+    get rampType(): RampType;
+    set rampType(value: RampType);
+    get rampStart(): RampTuple2;
+    set rampStart(value: RampTuple2);
+    get rampEnd(): RampTuple2;
+    set rampEnd(value: RampTuple2);
+    get startColor(): RampTuple4;
+    set startColor(value: RampTuple4);
+    get endColor(): RampTuple4;
+    set endColor(value: RampTuple4);
+    get rampBias(): number;
+    set rampBias(value: number);
+    get rampGain(): number;
+    set rampGain(value: number);
+    get rampMask(): boolean;
+    set rampMask(value: boolean);
+    get rampInvert(): boolean;
+    set rampInvert(value: boolean);
 }
-export declare const Ramp: (props: import("..").EffectProps<typeof RampEffect>) => import("react").JSX.Element;
+export type RampProps = {
+    blendFunction?: BlendFunction;
+    rampType?: RampType;
+    rampStart?: RampTuple2;
+    rampEnd?: RampTuple2;
+    startColor?: RampTuple4;
+    endColor?: RampTuple4;
+    rampBias?: number;
+    rampGain?: number;
+    rampMask?: boolean;
+    rampInvert?: boolean;
+    ref?: Ref<RampEffect>;
+};
+export declare const Ramp: (props: RampProps & {
+    blendFunction?: BlendFunction;
+    opacity?: number;
+    args?: [({
+        rampType?: RampType | undefined;
+        rampStart?: RampTuple2 | undefined;
+        rampEnd?: RampTuple2 | undefined;
+        startColor?: RampTuple4 | undefined;
+        endColor?: RampTuple4 | undefined;
+        rampBias?: number | undefined;
+        rampGain?: number | undefined;
+        rampMask?: boolean | undefined;
+        rampInvert?: boolean | undefined;
+    } | undefined)?] | undefined;
+    ref?: Ref<RampEffect> | undefined;
+}) => import("react").JSX.Element;
+export {};

package/dist/effects/SMAA.d.ts

@@ -1,2 +1,10 @@
 import { SMAAEffect } from 'postprocessing';
-export declare const SMAA: (props: import("..").EffectProps<typeof SMAAEffect>) => import("react").JSX.Element;
+import type { Ref } from 'react';
+import { type EffectOptions } from '../createEffectComponent';
+type SMAAOptions = EffectOptions<typeof SMAAEffect>;
+export type SMAAProps = SMAAOptions & {
+    opacity?: number;
+    ref?: Ref<SMAAEffect>;
+};
+export declare function SMAA({ preset, edgeDetectionMode, predicationMode, ...liveProps }: SMAAProps): import("react").JSX.Element;
+export {};

package/dist/effects/SSAO.d.ts

@@ -3,5 +3,5 @@ import { Ref } from 'react';
 type SSAOProps = ConstructorParameters<typeof SSAOEffect>[2] & {
     ref?: Ref<SSAOEffect>;
 };
-export declare function SSAO({ ref, ...props }: SSAOProps): import("react").JSX.Element;
+export declare function SSAO({ blendFunction, samples, rings, distanceThreshold, distanceFalloff, rangeThreshold, rangeFalloff, luminanceInfluence, radius, bias, intensity, color, worldDistanceThreshold, worldDistanceFalloff, worldProximityThreshold, worldProximityFalloff, minRadiusScale, fade, depthAwareUpsampling, resolutionScale, resolutionX, resolutionY, width, height, ref, }: SSAOProps): import("react").JSX.Element;
 export {};

package/dist/effects/ScanlineEffect.d.ts

@@ -1,2 +1,13 @@
 import { ScanlineEffect } from 'postprocessing';
-export declare const Scanline: (props: import("..").EffectProps<typeof ScanlineEffect>) => import("react").JSX.Element;
+export declare const Scanline: (props: {
+    blendFunction?: import("postprocessing").BlendFunction;
+    density?: number;
+} & {
+    blendFunction?: import("postprocessing").BlendFunction;
+    opacity?: number;
+    args?: [({
+        blendFunction?: import("postprocessing").BlendFunction;
+        density?: number;
+    } | undefined)?] | undefined;
+    ref?: import("react").Ref<ScanlineEffect> | undefined;
+}) => import("react").JSX.Element;

package/dist/effects/SelectiveBloom.d.ts

@@ -11,5 +11,5 @@ export type SelectiveBloomProps = BloomEffectOptions & Partial<{
     ignoreBackground: boolean;
     ref?: Ref<SelectiveBloomEffect>;
 }>;
-export declare function SelectiveBloom({ selection, selectionLayer, lights, inverted, ignoreBackground, luminanceThreshold, luminanceSmoothing, mipmapBlur, intensity, radius, levels, kernelSize, resolutionScale, width, height, resolutionX, resolutionY, ref, }: SelectiveBloomProps): import("react").JSX.Element;
+export declare function SelectiveBloom({ selection, selectionLayer, lights, luminanceThreshold, luminanceSmoothing, mipmapBlur, radius, levels, resolutionScale, resolutionX, resolutionY, ref, ...liveProps }: SelectiveBloomProps): import("react").JSX.Element;
 export {};