@react-three/postprocessing 2.11.0 → 2.11.2

package/dist/effects/Autofocus.d.ts

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

package/dist/effects/Bloom.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { BloomEffect, BlendFunction } from 'postprocessing';
-export declare const Bloom: import("react").ForwardRefExoticComponent<{
-    blendFunction: BlendFunction;
-} & import("react").RefAttributes<typeof BloomEffect>>;
+export declare const Bloom: import("react").ForwardRefExoticComponent<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<BloomEffect>, import("@react-three/fiber").NodeProps<BloomEffect, typeof BloomEffect>>> & import("postprocessing").BloomEffectOptions & {
+    blendFunction?: BlendFunction | undefined;
+    opacity?: number | undefined;
+}, "ref"> & import("react").RefAttributes<typeof BloomEffect>>;

package/dist/effects/Noise.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import { NoiseEffect, BlendFunction } from 'postprocessing';
-export declare const Noise: import("react").ForwardRefExoticComponent<{
-    blendFunction: BlendFunction;
-} & import("react").RefAttributes<typeof NoiseEffect>>;
+export declare const Noise: import("react").ForwardRefExoticComponent<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<NoiseEffect>, import("@react-three/fiber").NodeProps<NoiseEffect, typeof NoiseEffect>>> & {
+    blendFunction?: BlendFunction | undefined;
+    premultiply?: boolean | undefined;
+} & {
+    blendFunction?: BlendFunction | undefined;
+    opacity?: number | undefined;
+}, "ref"> & import("react").RefAttributes<typeof NoiseEffect>>;

package/dist/effects/ScanlineEffect.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
 import { ScanlineEffect, BlendFunction } from 'postprocessing';
-export declare const Scanline: import("react").ForwardRefExoticComponent<{
-    blendFunction: BlendFunction;
-    density: number;
-} & import("react").RefAttributes<typeof ScanlineEffect>>;
+export declare const Scanline: import("react").ForwardRefExoticComponent<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<ScanlineEffect>, import("@react-three/fiber").NodeProps<ScanlineEffect, typeof ScanlineEffect>>> & {
+    blendFunction?: BlendFunction | undefined;
+    density?: number | undefined;
+} & {
+    blendFunction?: BlendFunction | undefined;
+    opacity?: number | undefined;
+}, "ref"> & import("react").RefAttributes<typeof ScanlineEffect>>;

package/dist/effects/TiltShift.d.ts

@@ -1,5 +1,17 @@
 /// <reference types="react" />
 import { TiltShiftEffect, BlendFunction } from 'postprocessing';
-export declare const TiltShift: import("react").ForwardRefExoticComponent<{
-    blendFunction: BlendFunction;
-} & import("react").RefAttributes<typeof TiltShiftEffect>>;
+export declare const TiltShift: import("react").ForwardRefExoticComponent<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<TiltShiftEffect>, import("@react-three/fiber").NodeProps<TiltShiftEffect, typeof TiltShiftEffect>>> & {
+    blendFunction?: BlendFunction | undefined;
+    offset?: number | undefined;
+    rotation?: number | undefined;
+    focusArea?: number | undefined;
+    feather?: number | undefined;
+    bias?: number | undefined;
+    kernelSize?: import("postprocessing").KernelSize | undefined;
+    resolutionScale?: number | undefined;
+    resolutionX?: number | undefined;
+    resolutionY?: number | undefined;
+} & {
+    blendFunction?: BlendFunction | undefined;
+    opacity?: number | undefined;
+}, "ref"> & import("react").RefAttributes<typeof TiltShiftEffect>>;

package/dist/effects/TiltShift2.d.ts

@@ -16,6 +16,15 @@ export declare class TiltShiftEffect extends Effect {
         direction?: number[] | undefined;
     });
 }
-export declare const TiltShift2: import("react").ForwardRefExoticComponent<{
-    blendFunction: BlendFunction;
-} & import("react").RefAttributes<typeof TiltShiftEffect>>;
+export declare const TiltShift2: import("react").ForwardRefExoticComponent<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<TiltShiftEffect>, import("@react-three/fiber").NodeProps<TiltShiftEffect, typeof TiltShiftEffect>>> & {
+    blendFunction?: BlendFunction | undefined;
+    blur?: number | undefined;
+    taper?: number | undefined;
+    start?: number[] | undefined;
+    end?: number[] | undefined;
+    samples?: number | undefined;
+    direction?: number[] | undefined;
+} & {
+    blendFunction?: BlendFunction | undefined;
+    opacity?: number | undefined;
+}, "ref"> & import("react").RefAttributes<typeof TiltShiftEffect>>;

package/dist/index.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-var postprocessing = require('postprocessing');
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var THREE = require('three');
+var React = require('react');
 var fiber = require('@react-three/fiber');
+var postprocessing = require('postprocessing');
+var maath = require('maath');
 var threeStdlib = require('three-stdlib');
 var screenSpaceReflections = require('screen-space-reflections');
-var maath = require('maath');
 
 function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -28,57 +28,6 @@ function _interopNamespaceDefault(e) {
 
 var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 
-const resolveRef = (ref) => typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref;
-let i = 0;
-const components = new WeakMap();
-const wrapEffect = (effect, defaults) => 
-/* @__PURE__ */ React.forwardRef(function Effect({ blendFunction = defaults === null || defaults === void 0 ? void 0 : defaults.blendFunction, opacity = defaults === null || defaults === void 0 ? void 0 : defaults.opacity, ...props }, ref) {
-    let Component = components.get(effect);
-    if (!Component) {
-        const key = `@react-three/postprocessing/${effect.name}-${i++}`;
-        fiber.extend({ [key]: effect });
-        components.set(effect, (Component = key));
-    }
-    const camera = fiber.useThree((state) => state.camera);
-    const args = React.useMemo(() => { var _a, _b; return [...((_a = defaults === null || defaults === void 0 ? void 0 : defaults.args) !== null && _a !== void 0 ? _a : []), ...((_b = props.args) !== null && _b !== void 0 ? _b : [{ ...defaults, ...props }])]; }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(props)]);
-    return (jsxRuntime.jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity": opacity, ...props, ref: ref, args: args }));
-});
-const useVector2 = (props, key) => {
-    const value = props[key];
-    return React.useMemo(() => {
-        if (typeof value === 'number')
-            return new THREE__namespace.Vector2(value, value);
-        else if (value)
-            return new THREE__namespace.Vector2(...value);
-        else
-            return new THREE__namespace.Vector2();
-    }, [value]);
-};
-
-const Bloom = wrapEffect(postprocessing.BloomEffect, {
-    blendFunction: postprocessing.BlendFunction.ADD,
-});
-
-const BrightnessContrast = wrapEffect(postprocessing.BrightnessContrastEffect);
-
-const ChromaticAberration = React.forwardRef(function ChromaticAberration(props, ref) {
-    const offset = useVector2(props, 'offset');
-    const effect = React.useMemo(() => new postprocessing.ChromaticAberrationEffect({ ...props, offset }), [offset, props]);
-    return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
-});
-
-const ColorAverage = React.forwardRef(function ColorAverage({ blendFunction = postprocessing.BlendFunction.NORMAL }, ref) {
-    /** Because ColorAverage blendFunction is not an object but a number, we have to define a custom prop "blendFunction" */
-    const effect = React.useMemo(() => new postprocessing.ColorAverageEffect(blendFunction), [blendFunction]);
-    return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
-});
-
-const ColorDepth = wrapEffect(postprocessing.ColorDepthEffect);
-
-const Depth = wrapEffect(postprocessing.DepthEffect);
-
 const EffectComposerContext = React.createContext(null);
 const EffectComposer = React.memo(React.forwardRef(({ children, camera: _camera, scene: _scene, resolutionScale, enabled = true, renderPriority = 1, autoClear = true, depthBuffer, disableNormalPass, stencilBuffer, multisampling = 8, frameBufferType = THREE.HalfFloatType, }, ref) => {
     const { gl, scene: defaultScene, camera: defaultCamera, size } = fiber.useThree();
@@ -180,6 +129,137 @@ const DepthOfField = React.forwardRef(function DepthOfField({ target, depthTextu
     return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
+const Autofocus = React.forwardRef(({ target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0.25, ...props }, fref) => {
+    const dofRef = React.useRef(null);
+    const hitpointRef = React.useRef(null);
+    const targetRef = React.useRef(null);
+    const scene = fiber.useThree(({ scene }) => scene);
+    const pointer = fiber.useThree(({ pointer }) => pointer);
+    const { composer, camera } = React.useContext(EffectComposerContext);
+    // see: https://codesandbox.io/s/depthpickingpass-x130hg
+    const [depthPickingPass] = React.useState(() => new postprocessing.DepthPickingPass());
+    const [copyPass] = React.useState(() => new postprocessing.CopyPass());
+    React.useEffect(() => {
+        composer.addPass(depthPickingPass);
+        composer.addPass(copyPass);
+        return () => {
+            composer.removePass(depthPickingPass);
+            composer.removePass(copyPass);
+        };
+    }, [composer, depthPickingPass, copyPass]);
+    React.useEffect(() => {
+        return () => {
+            depthPickingPass.dispose();
+            copyPass.dispose();
+        };
+    }, [depthPickingPass, copyPass]);
+    const [hitpoint] = React.useState(() => new THREE__namespace.Vector3(0, 0, 0));
+    const [ndc] = React.useState(() => new THREE__namespace.Vector3(0, 0, 0));
+    const getHit = React.useCallback(async (x, y) => {
+        ndc.x = x;
+        ndc.y = y;
+        ndc.z = await depthPickingPass.readDepth(ndc);
+        ndc.z = ndc.z * 2.0 - 1.0;
+        const hit = 1 - ndc.z > 0.0000001; // it is missed if ndc.z is close to 1
+        return hit ? ndc.unproject(camera) : false;
+    }, [ndc, depthPickingPass, camera]);
+    const update = React.useCallback(async (delta, updateTarget = true) => {
+        var _a;
+        // Update hitpoint
+        if (target) {
+            hitpoint.set(...target);
+        }
+        else {
+            const { x, y } = followMouse ? pointer : { x: 0, y: 0 };
+            const hit = await getHit(x, y);
+            if (hit)
+                hitpoint.copy(hit);
+        }
+        // Update target
+        if (updateTarget && ((_a = dofRef.current) === null || _a === void 0 ? void 0 : _a.target)) {
+            if (smoothTime > 0 && delta > 0) {
+                maath.easing.damp3(dofRef.current.target, hitpoint, smoothTime, delta);
+            }
+            else {
+                dofRef.current.target.copy(hitpoint);
+            }
+        }
+    }, [target, hitpoint, followMouse, getHit, smoothTime, pointer]);
+    fiber.useFrame(async (_, delta) => {
+        var _a;
+        if (!manual) {
+            update(delta);
+        }
+        if (hitpointRef.current) {
+            hitpointRef.current.position.copy(hitpoint);
+        }
+        if (targetRef.current && ((_a = dofRef.current) === null || _a === void 0 ? void 0 : _a.target)) {
+            targetRef.current.position.copy(dofRef.current.target);
+        }
+    });
+    // Ref API
+    const api = React.useMemo(() => ({
+        dofRef,
+        hitpoint,
+        update,
+    }), [hitpoint, update]);
+    React.useImperativeHandle(fref, () => api, [api]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [debug
+                ? fiber.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("mesh", { ref: hitpointRef, children: [jsxRuntime.jsx("sphereGeometry", { args: [debug, 16, 16] }), jsxRuntime.jsx("meshBasicMaterial", { color: "#00ff00", opacity: 1, transparent: true, depthWrite: false })] }), jsxRuntime.jsxs("mesh", { ref: targetRef, children: [jsxRuntime.jsx("sphereGeometry", { args: [debug / 2, 16, 16] }), jsxRuntime.jsx("meshBasicMaterial", { color: "#00ff00", opacity: 0.5, transparent: true, depthWrite: false })] })] }), scene)
+                : null, jsxRuntime.jsx(DepthOfField, { ref: dofRef, ...props, target: hitpoint })] }));
+});
+
+const resolveRef = (ref) => typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref;
+let i = 0;
+const components = new WeakMap();
+const wrapEffect = (effect, defaults) => 
+/* @__PURE__ */ React.forwardRef(function Effect({ blendFunction = defaults === null || defaults === void 0 ? void 0 : defaults.blendFunction, opacity = defaults === null || defaults === void 0 ? void 0 : defaults.opacity, ...props }, ref) {
+    let Component = components.get(effect);
+    if (!Component) {
+        const key = `@react-three/postprocessing/${effect.name}-${i++}`;
+        fiber.extend({ [key]: effect });
+        components.set(effect, (Component = key));
+    }
+    const camera = fiber.useThree((state) => state.camera);
+    const args = React.useMemo(() => { var _a, _b; return [...((_a = defaults === null || defaults === void 0 ? void 0 : defaults.args) !== null && _a !== void 0 ? _a : []), ...((_b = props.args) !== null && _b !== void 0 ? _b : [{ ...defaults, ...props }])]; }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(props)]);
+    return (jsxRuntime.jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity": opacity, ...props, ref: ref, args: args }));
+});
+const useVector2 = (props, key) => {
+    const value = props[key];
+    return React.useMemo(() => {
+        if (typeof value === 'number')
+            return new THREE__namespace.Vector2(value, value);
+        else if (value)
+            return new THREE__namespace.Vector2(...value);
+        else
+            return new THREE__namespace.Vector2();
+    }, [value]);
+};
+
+const Bloom = wrapEffect(postprocessing.BloomEffect, {
+    blendFunction: postprocessing.BlendFunction.ADD,
+});
+
+const BrightnessContrast = wrapEffect(postprocessing.BrightnessContrastEffect);
+
+const ChromaticAberration = React.forwardRef(function ChromaticAberration(props, ref) {
+    const offset = useVector2(props, 'offset');
+    const effect = React.useMemo(() => new postprocessing.ChromaticAberrationEffect({ ...props, offset }), [offset, props]);
+    return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
+});
+
+const ColorAverage = React.forwardRef(function ColorAverage({ blendFunction = postprocessing.BlendFunction.NORMAL }, ref) {
+    /** Because ColorAverage blendFunction is not an object but a number, we have to define a custom prop "blendFunction" */
+    const effect = React.useMemo(() => new postprocessing.ColorAverageEffect(blendFunction), [blendFunction]);
+    return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
+});
+
+const ColorDepth = wrapEffect(postprocessing.ColorDepthEffect);
+
+const Depth = wrapEffect(postprocessing.DepthEffect);
+
 const DotScreen = wrapEffect(postprocessing.DotScreenEffect);
 
 const Glitch = React.forwardRef(function Glitch({ active = true, ...props }, ref) {
@@ -552,79 +632,6 @@ const SSR = React.forwardRef(function SSR({ ENABLE_BLUR = true, USE_MRT = true,
     return jsxRuntime.jsx("primitive", { ref: ref, object: effect, ...props });
 });
 
-const Autofocus = React.forwardRef(({ target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0, ...props }, fref) => {
-    const dofRef = React.useRef(null);
-    const hitpointRef = React.useRef(null);
-    const targetRef = React.useRef(null);
-    const scene = fiber.useThree(({ scene }) => scene);
-    const pointer = fiber.useThree(({ pointer }) => pointer);
-    const { composer, camera } = React.useContext(EffectComposerContext);
-    // see: https://codesandbox.io/s/depthpickingpass-x130hg
-    const [depthPickingPass] = React.useState(new postprocessing.DepthPickingPass());
-    const [copyPass] = React.useState(new postprocessing.CopyPass());
-    React.useEffect(() => {
-        composer.addPass(depthPickingPass);
-        composer.addPass(copyPass);
-        return () => {
-            composer.removePass(depthPickingPass);
-            composer.removePass(copyPass);
-        };
-    }, [composer, depthPickingPass, copyPass]);
-    const [hitpoint] = React.useState(new THREE__namespace.Vector3(0, 0, 0));
-    const [ndc] = React.useState(new THREE__namespace.Vector3(0, 0, 0));
-    const getHit = React.useCallback(async (x, y) => {
-        ndc.x = x;
-        ndc.y = y;
-        ndc.z = await depthPickingPass.readDepth(ndc);
-        ndc.z = ndc.z * 2.0 - 1.0;
-        const hit = 1 - ndc.z > 0.0000001; // it is missed if ndc.z is close to 1
-        return hit ? ndc.unproject(camera) : false;
-    }, [ndc, depthPickingPass, camera]);
-    const update = React.useCallback(async (delta, updateTarget = true) => {
-        var _a;
-        // Update hitpoint
-        if (target) {
-            hitpoint.set(...target);
-        }
-        else {
-            const { x, y } = followMouse ? pointer : { x: 0, y: 0 };
-            const hit = await getHit(x, y);
-            if (hit)
-                hitpoint.copy(hit);
-        }
-        // Update target
-        if (updateTarget && ((_a = dofRef.current) === null || _a === void 0 ? void 0 : _a.target)) {
-            if (smoothTime > 0 && delta > 0) {
-                maath.easing.damp3(dofRef.current.target, hitpoint, smoothTime, delta);
-            }
-            else {
-                dofRef.current.target.copy(hitpoint);
-            }
-        }
-    }, [target, hitpoint, followMouse, getHit, smoothTime, pointer]);
-    fiber.useFrame(async (_, delta) => {
-        var _a;
-        if (!manual) {
-            update(delta);
-        }
-        if (hitpointRef.current) {
-            hitpointRef.current.position.copy(hitpoint);
-        }
-        if (targetRef.current && ((_a = dofRef.current) === null || _a === void 0 ? void 0 : _a.target)) {
-            targetRef.current.position.copy(dofRef.current.target);
-        }
-    });
-    // Ref API
-    React.useImperativeHandle(fref, () => ({
-        dofRef,
-        hitpoint,
-        update,
-    }), [hitpoint, update]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [debug
-                ? fiber.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("mesh", { ref: hitpointRef, children: [jsxRuntime.jsx("sphereGeometry", { args: [debug, 16, 16] }), jsxRuntime.jsx("meshBasicMaterial", { color: "#00ff00", opacity: 1, transparent: true, depthWrite: false })] }), jsxRuntime.jsxs("mesh", { ref: targetRef, children: [jsxRuntime.jsx("sphereGeometry", { args: [debug / 2, 16, 16] }), jsxRuntime.jsx("meshBasicMaterial", { color: "#00ff00", opacity: 0.5, transparent: true, depthWrite: false })] })] }), scene)
-                : null, jsxRuntime.jsx(DepthOfField, { ref: dofRef, ...props, target: hitpoint })] }));
-});
-
 exports.Autofocus = Autofocus;
 exports.Bloom = Bloom;
 exports.BrightnessContrast = BrightnessContrast;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './effects/Autofocus';
 export * from './effects/Bloom';
 export * from './effects/BrightnessContrast';
 export * from './effects/ChromaticAberration';
@@ -27,6 +28,5 @@ export * from './effects/TiltShift';
 export * from './effects/TiltShift2';
 export * from './effects/SSR';
 export * from './Selection';
-export * from './Autofocus';
 export * from './EffectComposer';
 export * from './util';

package/dist/index.js

@@ -1,63 +1,12 @@
-import { BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, EffectPass, DepthOfFieldEffect, MaskFunction, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUT3DEffect, TiltShiftEffect as TiltShiftEffect$1, Effect, EffectAttribute, DepthPickingPass, CopyPass } from 'postprocessing';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { forwardRef, useMemo, createContext, useEffect, useRef, useLayoutEffect, useImperativeHandle, useContext, useState, useCallback } from 'react';
 import * as THREE from 'three';
 import { HalfFloatType, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping, Uniform } from 'three';
-import { extend, useThree, useFrame, useInstanceHandle, useLoader, createPortal } from '@react-three/fiber';
+import React, { createContext, forwardRef, useMemo, useEffect, useRef, useLayoutEffect, useImperativeHandle, useContext, useState, useCallback } from 'react';
+import { useThree, useFrame, useInstanceHandle, createPortal, extend, useLoader } from '@react-three/fiber';
+import { EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, EffectPass, DepthOfFieldEffect, MaskFunction, DepthPickingPass, CopyPass, BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUT3DEffect, TiltShiftEffect as TiltShiftEffect$1, Effect, EffectAttribute } from 'postprocessing';
+import { easing } from 'maath';
 import { isWebGL2Available } from 'three-stdlib';
 import { SSREffect } from 'screen-space-reflections';
-import { easing } from 'maath';
-
-const resolveRef = (ref) => typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref;
-let i = 0;
-const components = new WeakMap();
-const wrapEffect = (effect, defaults) => 
-/* @__PURE__ */ React.forwardRef(function Effect({ blendFunction = defaults === null || defaults === void 0 ? void 0 : defaults.blendFunction, opacity = defaults === null || defaults === void 0 ? void 0 : defaults.opacity, ...props }, ref) {
-    let Component = components.get(effect);
-    if (!Component) {
-        const key = `@react-three/postprocessing/${effect.name}-${i++}`;
-        extend({ [key]: effect });
-        components.set(effect, (Component = key));
-    }
-    const camera = useThree((state) => state.camera);
-    const args = React.useMemo(() => { var _a, _b; return [...((_a = defaults === null || defaults === void 0 ? void 0 : defaults.args) !== null && _a !== void 0 ? _a : []), ...((_b = props.args) !== null && _b !== void 0 ? _b : [{ ...defaults, ...props }])]; }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(props)]);
-    return (jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity": opacity, ...props, ref: ref, args: args }));
-});
-const useVector2 = (props, key) => {
-    const value = props[key];
-    return React.useMemo(() => {
-        if (typeof value === 'number')
-            return new THREE.Vector2(value, value);
-        else if (value)
-            return new THREE.Vector2(...value);
-        else
-            return new THREE.Vector2();
-    }, [value]);
-};
-
-const Bloom = wrapEffect(BloomEffect, {
-    blendFunction: BlendFunction.ADD,
-});
-
-const BrightnessContrast = wrapEffect(BrightnessContrastEffect);
-
-const ChromaticAberration = forwardRef(function ChromaticAberration(props, ref) {
-    const offset = useVector2(props, 'offset');
-    const effect = useMemo(() => new ChromaticAberrationEffect({ ...props, offset }), [offset, props]);
-    return jsx("primitive", { ref: ref, object: effect, dispose: null });
-});
-
-const ColorAverage = forwardRef(function ColorAverage({ blendFunction = BlendFunction.NORMAL }, ref) {
-    /** Because ColorAverage blendFunction is not an object but a number, we have to define a custom prop "blendFunction" */
-    const effect = useMemo(() => new ColorAverageEffect(blendFunction), [blendFunction]);
-    return jsx("primitive", { ref: ref, object: effect, dispose: null });
-});
-
-const ColorDepth = wrapEffect(ColorDepthEffect);
-
-const Depth = wrapEffect(DepthEffect);
 
 const EffectComposerContext = createContext(null);
 const EffectComposer = React.memo(forwardRef(({ children, camera: _camera, scene: _scene, resolutionScale, enabled = true, renderPriority = 1, autoClear = true, depthBuffer, disableNormalPass, stencilBuffer, multisampling = 8, frameBufferType = HalfFloatType, }, ref) => {
@@ -160,6 +109,137 @@ const DepthOfField = forwardRef(function DepthOfField({ target, depthTexture, ..
     return jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
+const Autofocus = forwardRef(({ target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0.25, ...props }, fref) => {
+    const dofRef = useRef(null);
+    const hitpointRef = useRef(null);
+    const targetRef = useRef(null);
+    const scene = useThree(({ scene }) => scene);
+    const pointer = useThree(({ pointer }) => pointer);
+    const { composer, camera } = useContext(EffectComposerContext);
+    // see: https://codesandbox.io/s/depthpickingpass-x130hg
+    const [depthPickingPass] = useState(() => new DepthPickingPass());
+    const [copyPass] = useState(() => new CopyPass());
+    useEffect(() => {
+        composer.addPass(depthPickingPass);
+        composer.addPass(copyPass);
+        return () => {
+            composer.removePass(depthPickingPass);
+            composer.removePass(copyPass);
+        };
+    }, [composer, depthPickingPass, copyPass]);
+    useEffect(() => {
+        return () => {
+            depthPickingPass.dispose();
+            copyPass.dispose();
+        };
+    }, [depthPickingPass, copyPass]);
+    const [hitpoint] = useState(() => new THREE.Vector3(0, 0, 0));
+    const [ndc] = useState(() => new THREE.Vector3(0, 0, 0));
+    const getHit = useCallback(async (x, y) => {
+        ndc.x = x;
+        ndc.y = y;
+        ndc.z = await depthPickingPass.readDepth(ndc);
+        ndc.z = ndc.z * 2.0 - 1.0;
+        const hit = 1 - ndc.z > 0.0000001; // it is missed if ndc.z is close to 1
+        return hit ? ndc.unproject(camera) : false;
+    }, [ndc, depthPickingPass, camera]);
+    const update = useCallback(async (delta, updateTarget = true) => {
+        var _a;
+        // Update hitpoint
+        if (target) {
+            hitpoint.set(...target);
+        }
+        else {
+            const { x, y } = followMouse ? pointer : { x: 0, y: 0 };
+            const hit = await getHit(x, y);
+            if (hit)
+                hitpoint.copy(hit);
+        }
+        // Update target
+        if (updateTarget && ((_a = dofRef.current) === null || _a === void 0 ? void 0 : _a.target)) {
+            if (smoothTime > 0 && delta > 0) {
+                easing.damp3(dofRef.current.target, hitpoint, smoothTime, delta);
+            }
+            else {
+                dofRef.current.target.copy(hitpoint);
+            }
+        }
+    }, [target, hitpoint, followMouse, getHit, smoothTime, pointer]);
+    useFrame(async (_, delta) => {
+        var _a;
+        if (!manual) {
+            update(delta);
+        }
+        if (hitpointRef.current) {
+            hitpointRef.current.position.copy(hitpoint);
+        }
+        if (targetRef.current && ((_a = dofRef.current) === null || _a === void 0 ? void 0 : _a.target)) {
+            targetRef.current.position.copy(dofRef.current.target);
+        }
+    });
+    // Ref API
+    const api = useMemo(() => ({
+        dofRef,
+        hitpoint,
+        update,
+    }), [hitpoint, update]);
+    useImperativeHandle(fref, () => api, [api]);
+    return (jsxs(Fragment, { children: [debug
+                ? createPortal(jsxs(Fragment, { children: [jsxs("mesh", { ref: hitpointRef, children: [jsx("sphereGeometry", { args: [debug, 16, 16] }), jsx("meshBasicMaterial", { color: "#00ff00", opacity: 1, transparent: true, depthWrite: false })] }), jsxs("mesh", { ref: targetRef, children: [jsx("sphereGeometry", { args: [debug / 2, 16, 16] }), jsx("meshBasicMaterial", { color: "#00ff00", opacity: 0.5, transparent: true, depthWrite: false })] })] }), scene)
+                : null, jsx(DepthOfField, { ref: dofRef, ...props, target: hitpoint })] }));
+});
+
+const resolveRef = (ref) => typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref;
+let i = 0;
+const components = new WeakMap();
+const wrapEffect = (effect, defaults) => 
+/* @__PURE__ */ React.forwardRef(function Effect({ blendFunction = defaults === null || defaults === void 0 ? void 0 : defaults.blendFunction, opacity = defaults === null || defaults === void 0 ? void 0 : defaults.opacity, ...props }, ref) {
+    let Component = components.get(effect);
+    if (!Component) {
+        const key = `@react-three/postprocessing/${effect.name}-${i++}`;
+        extend({ [key]: effect });
+        components.set(effect, (Component = key));
+    }
+    const camera = useThree((state) => state.camera);
+    const args = React.useMemo(() => { var _a, _b; return [...((_a = defaults === null || defaults === void 0 ? void 0 : defaults.args) !== null && _a !== void 0 ? _a : []), ...((_b = props.args) !== null && _b !== void 0 ? _b : [{ ...defaults, ...props }])]; }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(props)]);
+    return (jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity": opacity, ...props, ref: ref, args: args }));
+});
+const useVector2 = (props, key) => {
+    const value = props[key];
+    return React.useMemo(() => {
+        if (typeof value === 'number')
+            return new THREE.Vector2(value, value);
+        else if (value)
+            return new THREE.Vector2(...value);
+        else
+            return new THREE.Vector2();
+    }, [value]);
+};
+
+const Bloom = wrapEffect(BloomEffect, {
+    blendFunction: BlendFunction.ADD,
+});
+
+const BrightnessContrast = wrapEffect(BrightnessContrastEffect);
+
+const ChromaticAberration = forwardRef(function ChromaticAberration(props, ref) {
+    const offset = useVector2(props, 'offset');
+    const effect = useMemo(() => new ChromaticAberrationEffect({ ...props, offset }), [offset, props]);
+    return jsx("primitive", { ref: ref, object: effect, dispose: null });
+});
+
+const ColorAverage = forwardRef(function ColorAverage({ blendFunction = BlendFunction.NORMAL }, ref) {
+    /** Because ColorAverage blendFunction is not an object but a number, we have to define a custom prop "blendFunction" */
+    const effect = useMemo(() => new ColorAverageEffect(blendFunction), [blendFunction]);
+    return jsx("primitive", { ref: ref, object: effect, dispose: null });
+});
+
+const ColorDepth = wrapEffect(ColorDepthEffect);
+
+const Depth = wrapEffect(DepthEffect);
+
 const DotScreen = wrapEffect(DotScreenEffect);
 
 const Glitch = forwardRef(function Glitch({ active = true, ...props }, ref) {
@@ -532,77 +612,4 @@ const SSR = forwardRef(function SSR({ ENABLE_BLUR = true, USE_MRT = true, ...pro
     return jsx("primitive", { ref: ref, object: effect, ...props });
 });
 
-const Autofocus = forwardRef(({ target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0, ...props }, fref) => {
-    const dofRef = useRef(null);
-    const hitpointRef = useRef(null);
-    const targetRef = useRef(null);
-    const scene = useThree(({ scene }) => scene);
-    const pointer = useThree(({ pointer }) => pointer);
-    const { composer, camera } = useContext(EffectComposerContext);
-    // see: https://codesandbox.io/s/depthpickingpass-x130hg
-    const [depthPickingPass] = useState(new DepthPickingPass());
-    const [copyPass] = useState(new CopyPass());
-    useEffect(() => {
-        composer.addPass(depthPickingPass);
-        composer.addPass(copyPass);
-        return () => {
-            composer.removePass(depthPickingPass);
-            composer.removePass(copyPass);
-        };
-    }, [composer, depthPickingPass, copyPass]);
-    const [hitpoint] = useState(new THREE.Vector3(0, 0, 0));
-    const [ndc] = useState(new THREE.Vector3(0, 0, 0));
-    const getHit = useCallback(async (x, y) => {
-        ndc.x = x;
-        ndc.y = y;
-        ndc.z = await depthPickingPass.readDepth(ndc);
-        ndc.z = ndc.z * 2.0 - 1.0;
-        const hit = 1 - ndc.z > 0.0000001; // it is missed if ndc.z is close to 1
-        return hit ? ndc.unproject(camera) : false;
-    }, [ndc, depthPickingPass, camera]);
-    const update = useCallback(async (delta, updateTarget = true) => {
-        var _a;
-        // Update hitpoint
-        if (target) {
-            hitpoint.set(...target);
-        }
-        else {
-            const { x, y } = followMouse ? pointer : { x: 0, y: 0 };
-            const hit = await getHit(x, y);
-            if (hit)
-                hitpoint.copy(hit);
-        }
-        // Update target
-        if (updateTarget && ((_a = dofRef.current) === null || _a === void 0 ? void 0 : _a.target)) {
-            if (smoothTime > 0 && delta > 0) {
-                easing.damp3(dofRef.current.target, hitpoint, smoothTime, delta);
-            }
-            else {
-                dofRef.current.target.copy(hitpoint);
-            }
-        }
-    }, [target, hitpoint, followMouse, getHit, smoothTime, pointer]);
-    useFrame(async (_, delta) => {
-        var _a;
-        if (!manual) {
-            update(delta);
-        }
-        if (hitpointRef.current) {
-            hitpointRef.current.position.copy(hitpoint);
-        }
-        if (targetRef.current && ((_a = dofRef.current) === null || _a === void 0 ? void 0 : _a.target)) {
-            targetRef.current.position.copy(dofRef.current.target);
-        }
-    });
-    // Ref API
-    useImperativeHandle(fref, () => ({
-        dofRef,
-        hitpoint,
-        update,
-    }), [hitpoint, update]);
-    return (jsxs(Fragment, { children: [debug
-                ? createPortal(jsxs(Fragment, { children: [jsxs("mesh", { ref: hitpointRef, children: [jsx("sphereGeometry", { args: [debug, 16, 16] }), jsx("meshBasicMaterial", { color: "#00ff00", opacity: 1, transparent: true, depthWrite: false })] }), jsxs("mesh", { ref: targetRef, children: [jsx("sphereGeometry", { args: [debug / 2, 16, 16] }), jsx("meshBasicMaterial", { color: "#00ff00", opacity: 0.5, transparent: true, depthWrite: false })] })] }), scene)
-                : null, jsx(DepthOfField, { ref: dofRef, ...props, target: hitpoint })] }));
-});
-
 export { Autofocus, Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DotScreen, EffectComposer, EffectComposerContext, Glitch, GodRays, Grid, HueSaturation, LUT, Noise, Outline, Pixelation, SMAA, SSAO, SSR, Scanline, Select, Selection, SelectiveBloom, Sepia, ShockWave, Texture, TiltShift, TiltShift2, TiltShiftEffect, ToneMapping, Vignette, resolveRef, selectionContext, useVector2, wrapEffect };

package/dist/util.d.ts

@@ -9,5 +9,5 @@ export type EffectProps<T extends EffectConstructor> = ReactThreeFiber.Node<T ex
     blendFunction?: BlendFunction;
     opacity?: number;
 };
-export declare const wrapEffect: <T extends EffectConstructor, P extends EffectProps<T> = EffectProps<T>>(effect: T, defaults?: P | undefined) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+export declare const wrapEffect: <T extends EffectConstructor>(effect: T, defaults?: EffectProps<T> | undefined) => React.ForwardRefExoticComponent<React.PropsWithoutRef<EffectProps<T>> & React.RefAttributes<T>>;
 export declare const useVector2: (props: Record<string, unknown>, key: string) => THREE.Vector2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.11.0",
+  "version": "2.11.2",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -42,7 +42,9 @@
     "test": "echo no tests yet",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
     "typegen": "tsc --emitDeclarationOnly || true",
-    "release": "semantic-release"
+    "release": "semantic-release",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "maath": "^0.5.3",
@@ -51,10 +53,19 @@
     "three-stdlib": "^2.21.10"
   },
   "devDependencies": {
+    "@react-three/drei": "^9.68.2",
     "@react-three/fiber": "^8.13.0",
+    "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-typescript": "^11.1.0",
+    "@storybook/addon-essentials": "^7.0.10",
+    "@storybook/addon-interactions": "^7.0.10",
+    "@storybook/addon-links": "^7.0.10",
+    "@storybook/blocks": "^7.0.10",
+    "@storybook/react": "^7.0.10",
+    "@storybook/react-vite": "^7.0.11",
+    "@storybook/testing-library": "^0.0.14-next.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",
     "@types/three": "^0.150.2",
@@ -67,6 +78,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "prettier": "^2.8.8",
@@ -76,8 +88,10 @@
     "rollup": "^3.21.0",
     "rollup-plugin-filesize": "^10.0.0",
     "semantic-release": "^21.0.2",
+    "storybook": "^7.0.10",
     "three": "^0.151.3",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5"
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.0",

package/dist/Autofocus.d.ts

@@ -1,43 +0,0 @@
-import * as THREE from 'three';
-import React, { RefObject } from 'react';
-import { DepthOfFieldEffect } from 'postprocessing';
-import { DepthOfField } from './index';
-export type AutofocusProps = typeof DepthOfField & {
-    target?: [number, number, number];
-    mouse?: boolean;
-    debug?: number;
-    manual?: boolean;
-    smoothTime?: number;
-};
-export type AutofocusApi = {
-    dofRef: RefObject<DepthOfFieldEffect>;
-    hitpoint: THREE.Vector3;
-    update: (delta: number, updateTarget: boolean) => void;
-};
-export declare const Autofocus: React.ForwardRefExoticComponent<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<{
-    target: import("@react-three/fiber").Vector3;
-    depthTexture: {
-        texture: THREE.Texture;
-        packing: number;
-    };
-    blur: number;
-}> & React.RefAttributes<DepthOfFieldEffect>> & {
-    target?: [number, number, number] | undefined;
-    mouse?: boolean | undefined;
-    debug?: number | undefined;
-    manual?: boolean | undefined;
-    smoothTime?: number | undefined;
-} & React.RefAttributes<AutofocusApi>>;