@react-three/postprocessing 2.10.0 → 2.11.1

package/dist/{Autofocus.d.ts → effects/Autofocus.d.ts}

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import React, { RefObject } from 'react';
 import { DepthOfFieldEffect } from 'postprocessing';
-import { DepthOfField } from './index';
+import { DepthOfField } from '..';
 export type AutofocusProps = typeof DepthOfField & {
     target?: [number, number, number];
     mouse?: boolean;

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/GodRays.d.ts

@@ -17,5 +17,5 @@ export declare const GodRays: React.ForwardRefExoticComponent<{
     kernelSize?: import("postprocessing").KernelSize | undefined;
     blur?: boolean | undefined;
 } & {
-    sun: Mesh | Points;
+    sun: Mesh | Points | React.MutableRefObject<Mesh | Points>;
 } & React.RefAttributes<GodRaysEffect>>;

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,6 +28,86 @@ function _interopNamespaceDefault(e) {
 
 var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 
+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]);
+    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();
@@ -197,7 +277,9 @@ const Glitch = React.forwardRef(function Glitch({ active = true, ...props }, ref
 
 const GodRays = React.forwardRef(function GodRays(props, ref) {
     const { camera } = React.useContext(EffectComposerContext);
-    const effect = React.useMemo(() => new postprocessing.GodRaysEffect(camera, props.sun, props), [camera, props]);
+    const effect = React.useMemo(() => new postprocessing.GodRaysEffect(camera, resolveRef(props.sun), props), [camera, props]);
+    // @ts-ignore v6.30.2 https://github.com/pmndrs/postprocessing/pull/470/commits/091ef6f9516ca02efa7576305afbecf1ce8323ae
+    React.useLayoutEffect(() => void (effect.lightSource = resolveRef(props.sun)), [effect, props.sun]);
     return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
@@ -550,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,12 +1,92 @@
-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 { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 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, { forwardRef, useRef, useContext, useState, useEffect, useCallback, useMemo, useImperativeHandle, createContext, useLayoutEffect } from 'react';
+import { useThree, useFrame, createPortal, extend, useInstanceHandle, useLoader } from '@react-three/fiber';
+import { DepthPickingPass, CopyPass, 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 } from 'postprocessing';
+import { easing } from 'maath';
 import { isWebGL2Available } from 'three-stdlib';
 import { SSREffect } from 'screen-space-reflections';
-import { easing } from 'maath';
+
+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]);
+    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;
@@ -177,7 +257,9 @@ const Glitch = forwardRef(function Glitch({ active = true, ...props }, ref) {
 
 const GodRays = forwardRef(function GodRays(props, ref) {
     const { camera } = useContext(EffectComposerContext);
-    const effect = useMemo(() => new GodRaysEffect(camera, props.sun, props), [camera, props]);
+    const effect = useMemo(() => new GodRaysEffect(camera, resolveRef(props.sun), props), [camera, props]);
+    // @ts-ignore v6.30.2 https://github.com/pmndrs/postprocessing/pull/470/commits/091ef6f9516ca02efa7576305afbecf1ce8323ae
+    useLayoutEffect(() => void (effect.lightSource = resolveRef(props.sun)), [effect, props.sun]);
     return jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
@@ -530,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.10.0",
+  "version": "2.11.1",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",