@react-three/postprocessing 3.0.4 → 3.1.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2020 react-spring
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2020 react-spring
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,81 +1,80 @@
-# 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)
-[![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)
-
-`react-postprocessing` is a
-[postprocessing](https://github.com/pmndrs/postprocessing) wrapper for
-[@react-three/fiber](https://github.com/pmndrs/react-three-fiber). This is not
-(yet) meant for complex orchestration of effects, but can save you
-[hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a
-straight forward effects-chain.
-
-```bash
-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>
-</p>
-<p align="middle">
-  <i>These demos are real, you can click them! They contain the full code, too. 📦</i>
-</p>
-
-#### Why postprocessing and not three/examples/jsm/postprocessing?
-
-From
-[https://github.com/pmndrs/postprocessing](https://github.com/pmndrs/postprocessing#performance)
-
-> This library provides an EffectPass which automatically organizes and merges
-> any given combination of effects. This minimizes the amount of render
-> operations and makes it possible to combine many effects without the
-> performance penalties of traditional pass chaining. Additionally, every effect
-> can choose its own blend function.
->
-> All fullscreen render operations also use a single triangle that fills the
-> screen. Compared to using a quad, this approach harmonizes with modern GPU
-> rasterization patterns and eliminates unnecessary fragment calculations along
-> the screen diagonal. This is especially beneficial for GPGPU passes and
-> effects that use complex fragment shaders.
-
-Postprocessing also supports gamma correction out of the box, as well as WebGL2
-MSAA (multi sample anti aliasing), which is react-postprocessing's default, you
-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?)).
-
-<a href="https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?" target="_blank" rel="noopener">
-<img src="bubbles.jpg" 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'
-
-function App() {
-  return (
-    <Canvas>
-      {/* Your regular scene contents go here, like always ... */}
-      <EffectComposer>
-        <DepthOfField focusDistance={0} focalLength={0.02} bokehScale={2} height={480} />
-        <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />
-        <Noise opacity={0.02} />
-        <Vignette eskil={false} offset={0.1} darkness={1.1} />
-      </EffectComposer>
-    </Canvas>
-  )
-}
-```
-
-## Documentation
-
-- [react-postprocessing docs](https://docs.pmnd.rs/react-postprocessing)
-- [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/)
+# 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)
+[![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)
+
+`react-postprocessing` is a
+[postprocessing](https://github.com/pmndrs/postprocessing) wrapper for
+[@react-three/fiber](https://github.com/pmndrs/react-three-fiber). This is not
+(yet) meant for complex orchestration of effects, but can save you
+[hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a
+straight forward effects-chain.
+
+```bash
+npm install @react-three/postprocessing
+```
+
+<p align="center">
+  <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>
+</p>
+
+#### Why postprocessing and not three/examples/jsm/postprocessing?
+
+From
+[https://github.com/pmndrs/postprocessing](https://github.com/pmndrs/postprocessing#performance)
+
+> This library provides an EffectPass which automatically organizes and merges
+> any given combination of effects. This minimizes the amount of render
+> operations and makes it possible to combine many effects without the
+> performance penalties of traditional pass chaining. Additionally, every effect
+> can choose its own blend function.
+>
+> All fullscreen render operations also use a single triangle that fills the
+> screen. Compared to using a quad, this approach harmonizes with modern GPU
+> rasterization patterns and eliminates unnecessary fragment calculations along
+> the screen diagonal. This is especially beneficial for GPGPU passes and
+> effects that use complex fragment shaders.
+
+Postprocessing also supports gamma correction out of the box, as well as WebGL2
+MSAA (multi sample anti aliasing), which is react-postprocessing's default, you
+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://pmndrs.github.io/examples/bubbles)).
+
+<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 { Bloom, DepthOfField, EffectComposer, Noise, Vignette } from '@react-three/postprocessing'
+import { Canvas } from '@react-three/fiber'
+
+function App() {
+  return (
+    <Canvas>
+      {/* Your regular scene contents go here, like always ... */}
+      <EffectComposer>
+        <DepthOfField focusDistance={0} focalLength={0.02} bokehScale={2} height={480} />
+        <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />
+        <Noise opacity={0.02} />
+        <Vignette eskil={false} offset={0.1} darkness={1.1} />
+      </EffectComposer>
+    </Canvas>
+  )
+}
+```
+
+## Documentation
+
+- [react-postprocessing docs](https://docs.pmnd.rs/react-postprocessing)
+- [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/)

package/dist/EffectComposer.d.ts

@@ -1,27 +1,35 @@
-import type { TextureDataType, Camera, Scene } from 'three';
-import { type JSX } from 'react';
-import { EffectComposer as EffectComposerImpl, NormalPass, DepthDownsamplingPass } 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<{
     composer: EffectComposerImpl;
     normalPass: NormalPass | null;
     downSamplingPass: DepthDownsamplingPass | null;
     camera: Camera;
     scene: Scene;
-    resolutionScale?: number | undefined;
+    resolutionScale?: number;
+    requestRebuild: () => void;
+    autoClear: boolean;
 }>;
 export type EffectComposerProps = {
     enabled?: boolean;
-    children: JSX.Element | JSX.Element[];
+    children: ReactNode;
     depthBuffer?: boolean;
     /** Only used for SSGI currently, leave it disabled for everything else unless it's needed */
     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").NamedExoticComponent<EffectComposerProps & import("react").RefAttributes<EffectComposerImpl>>;
+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/Selection.d.ts

@@ -1,17 +1,17 @@
-import * as THREE from 'three';
-import React from 'react';
 import { type ThreeElements } from '@react-three/fiber';
+import { type Dispatch, type ReactNode, type SetStateAction } from 'react';
+import { type Object3D } from 'three';
 export type Api = {
-    selected: THREE.Object3D[];
-    select: React.Dispatch<React.SetStateAction<THREE.Object3D[]>>;
+    selected: Object3D[];
+    select: Dispatch<SetStateAction<Object3D[]>>;
     enabled: boolean;
 };
 export type SelectApi = Omit<ThreeElements['group'], 'ref'> & {
     enabled?: boolean;
 };
-export declare const selectionContext: React.Context<Api | null>;
+export declare const selectionContext: import("react").Context<Api | null>;
 export declare function Selection({ children, enabled }: {
     enabled?: boolean;
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function Select({ enabled, children, ...props }: SelectApi): import("react/jsx-runtime").JSX.Element;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function Select({ enabled, children, ...props }: SelectApi): 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,18 +1,40 @@
-/// <reference types="react" />
-import { Texture } from 'three';
 import { Effect } from 'postprocessing';
-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, }?: IASCIIEffectProps);
+    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 const ASCII: import("react").ForwardRefExoticComponent<IASCIIEffectProps & import("react").RefAttributes<ASCIIEffect>>;
+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

@@ -1,10 +1,10 @@
-import * as THREE from 'three';
-import React, { RefObject } from 'react';
-import { type Vector3 } from '@react-three/fiber';
+import { type Vector3 as R3FVector3 } from '@react-three/fiber';
 import { DepthOfFieldEffect } from 'postprocessing';
+import { Ref, type ComponentProps, type RefObject } from 'react';
+import { Vector3 } from 'three';
 import { DepthOfField } from './DepthOfField';
-export type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {
-    target?: Vector3;
+export type AutofocusProps = Omit<ComponentProps<typeof DepthOfField>, 'ref'> & {
+    target?: R3FVector3;
     /** should the target follow the pointer */
     mouse?: boolean;
     /** size of the debug green point  */
@@ -13,10 +13,11 @@ export type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {
     manual?: boolean;
     /** approximate time to reach the target */
     smoothTime?: number;
+    ref?: Ref<AutofocusApi>;
 };
 export type AutofocusApi = {
     dofRef: RefObject<DepthOfFieldEffect | null>;
-    hitpoint: THREE.Vector3;
+    hitpoint: Vector3;
     update: (delta: number, updateTarget: boolean) => void;
 };
-export declare const Autofocus: React.ForwardRefExoticComponent<Omit<AutofocusProps, "ref"> & React.RefAttributes<AutofocusApi>>;
+export declare function Autofocus({ target, mouse: followMouse, debug, manual, smoothTime, ref, ...props }: AutofocusProps): import("react").JSX.Element;

package/dist/effects/Bloom.d.ts

@@ -1,5 +1,10 @@
-export declare const Bloom: ({ blendFunction, opacity, ...props }: {
-    [x: string]: any;
-    blendFunction?: any;
-    opacity?: any;
-}) => import("react/jsx-runtime").JSX.Element;
+import { BloomEffect } from 'postprocessing';
+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,5 +1,15 @@
-export declare const BrightnessContrast: ({ blendFunction, opacity, ...props }: {
-    [x: string]: any;
-    blendFunction?: any;
-    opacity?: any;
-}) => import("react/jsx-runtime").JSX.Element;
+import { BrightnessContrastEffect } from 'postprocessing';
+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 EffectProps } from '../util';
-export type ChromaticAberrationProps = EffectProps<typeof ChromaticAberrationEffect>;
-export declare const ChromaticAberration: ({ blendFunction, opacity, ...props }: {
-    [x: string]: any;
-    blendFunction?: any;
-    opacity?: any;
-}) => import("react/jsx-runtime").JSX.Element;
+import type { Ref } from 'react';
+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 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,8 +1,7 @@
-import { ColorAverageEffect, BlendFunction } from 'postprocessing';
-import React from 'react';
-export type ColorAverageProps = Partial<{
-    blendFunction: BlendFunction;
-}>;
-export declare const ColorAverage: React.ForwardRefExoticComponent<Partial<{
-    blendFunction: BlendFunction;
-}> & React.RefAttributes<ColorAverageEffect>>;
+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,5 +1,8 @@
-export declare const ColorDepth: ({ blendFunction, opacity, ...props }: {
-    [x: string]: any;
-    blendFunction?: any;
-    opacity?: any;
-}) => import("react/jsx-runtime").JSX.Element;
+import { ColorDepthEffect } from 'postprocessing';
+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,5 +1,13 @@
-export declare const Depth: ({ blendFunction, opacity, ...props }: {
-    [x: string]: any;
-    blendFunction?: any;
-    opacity?: any;
-}) => import("react/jsx-runtime").JSX.Element;
+import { DepthEffect } from 'postprocessing';
+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/DepthOfField.d.ts

@@ -1,25 +1,14 @@
-/// <reference types="react" />
+import type { ReactThreeFiber } from '@react-three/fiber';
 import { DepthOfFieldEffect } from 'postprocessing';
-import { ReactThreeFiber } from '@react-three/fiber';
-import { type Texture, Vector3 } from 'three';
-export declare const DepthOfField: import("react").ForwardRefExoticComponent<{
-    blendFunction?: import("postprocessing").BlendFunction | undefined;
-    worldFocusDistance?: number | undefined;
-    worldFocusRange?: number | undefined;
-    focusDistance?: number | undefined;
-    focalLength?: number | undefined;
-    focusRange?: number | undefined;
-    bokehScale?: number | undefined;
-    resolutionScale?: number | undefined;
-    resolutionX?: number | undefined;
-    resolutionY?: number | undefined;
-    width?: number | undefined;
-    height?: number | undefined;
-} & Partial<{
+import type { Ref } from 'react';
+import { type Texture } from 'three';
+export type DepthOfFieldProps = ConstructorParameters<typeof DepthOfFieldEffect>[1] & Partial<{
+    ref: Ref<DepthOfFieldEffect>;
     target: ReactThreeFiber.Vector3;
     depthTexture: {
         texture: Texture;
         packing: number;
     };
     blur: number;
-}> & import("react").RefAttributes<DepthOfFieldEffect>>;
+}>;
+export declare function DepthOfField({ ref, blendFunction, worldFocusDistance, worldFocusRange, focusDistance, focusRange, focalLength, bokehScale, resolutionScale, resolutionX, resolutionY, width, height, target, depthTexture, ...props }: DepthOfFieldProps): import("react").JSX.Element;

package/dist/effects/DotScreen.d.ts

@@ -1,5 +1,15 @@
-export declare const DotScreen: ({ blendFunction, opacity, ...props }: {
-    [x: string]: any;
-    blendFunction?: any;
-    opacity?: any;
-}) => import("react/jsx-runtime").JSX.Element;
+import { DotScreenEffect } from 'postprocessing';
+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,5 +1,11 @@
-export declare const FXAA: ({ blendFunction, opacity, ...props }: {
-    [x: string]: any;
-    blendFunction?: any;
-    opacity?: any;
-}) => import("react/jsx-runtime").JSX.Element;
+import { FXAAEffect } from 'postprocessing';
+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;