@react-three/postprocessing 2.11.1 → 2.11.3

package/dist/effects/Autofocus.d.ts

@@ -1,12 +1,17 @@
 import * as THREE from 'three';
 import React, { RefObject } from 'react';
+import { Vector3 } from '@react-three/fiber';
 import { DepthOfFieldEffect } from 'postprocessing';
-import { DepthOfField } from '..';
-export type AutofocusProps = typeof DepthOfField & {
-    target?: [number, number, number];
+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 = {
@@ -14,30 +19,4 @@ export type AutofocusApi = {
     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>>;
+export declare const Autofocus: React.ForwardRefExoticComponent<Omit<AutofocusProps, "ref"> & React.RefAttributes<AutofocusApi>>;

package/dist/index.cjs

@@ -28,7 +28,108 @@ 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 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();
+    const scene = _scene || defaultScene;
+    const camera = _camera || defaultCamera;
+    const [composer, normalPass, downSamplingPass] = React.useMemo(() => {
+        const webGL2Available = threeStdlib.isWebGL2Available();
+        // Initialize composer
+        const effectComposer = new postprocessing.EffectComposer(gl, {
+            depthBuffer,
+            stencilBuffer,
+            multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
+            frameBufferType,
+        });
+        // Add render pass
+        effectComposer.addPass(new postprocessing.RenderPass(scene, camera));
+        // Create normal pass
+        let downSamplingPass = null;
+        let normalPass = null;
+        if (!disableNormalPass) {
+            normalPass = new postprocessing.NormalPass(scene, camera);
+            normalPass.enabled = false;
+            effectComposer.addPass(normalPass);
+            if (resolutionScale !== undefined && webGL2Available) {
+                downSamplingPass = new postprocessing.DepthDownsamplingPass({ normalBuffer: normalPass.texture, resolutionScale });
+                downSamplingPass.enabled = false;
+                effectComposer.addPass(downSamplingPass);
+            }
+        }
+        return [effectComposer, normalPass, downSamplingPass];
+    }, [
+        camera,
+        gl,
+        depthBuffer,
+        stencilBuffer,
+        multisampling,
+        frameBufferType,
+        scene,
+        disableNormalPass,
+        resolutionScale,
+    ]);
+    React.useEffect(() => composer === null || composer === void 0 ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
+    fiber.useFrame((_, delta) => {
+        if (enabled) {
+            gl.autoClear = autoClear;
+            composer.render(delta);
+        }
+    }, enabled ? renderPriority : 0);
+    const group = React.useRef(null);
+    const instance = fiber.useInstanceHandle(group);
+    React.useLayoutEffect(() => {
+        let effectPass;
+        if (group.current && instance.current && composer) {
+            effectPass = new postprocessing.EffectPass(camera, ...instance.current.objects);
+            effectPass.renderToScreen = true;
+            composer.addPass(effectPass);
+            if (normalPass)
+                normalPass.enabled = true;
+            if (downSamplingPass)
+                downSamplingPass.enabled = true;
+        }
+        return () => {
+            if (effectPass)
+                composer === null || composer === void 0 ? void 0 : composer.removePass(effectPass);
+            if (normalPass)
+                normalPass.enabled = false;
+            if (downSamplingPass)
+                downSamplingPass.enabled = false;
+        };
+    }, [composer, children, camera, normalPass, downSamplingPass, instance]);
+    // Memoize state, otherwise it would trigger all consumers on every render
+    const state = React.useMemo(() => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }), [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]);
+    // Expose the composer
+    React.useImperativeHandle(ref, () => composer, [composer]);
+    return (jsxRuntime.jsx(EffectComposerContext.Provider, { value: state, children: jsxRuntime.jsx("group", { ref: group, children: children }) }));
+}));
+
+const DepthOfField = React.forwardRef(function DepthOfField({ target, depthTexture, ...props }, ref) {
+    const invalidate = fiber.useThree((state) => state.invalidate);
+    const { camera } = React.useContext(EffectComposerContext);
+    const effect = React.useMemo(() => {
+        const effect = new postprocessing.DepthOfFieldEffect(camera, props);
+        // Temporary fix that restores DOF 6.21.3 behavior, everything since then lets shapes leak through the blur
+        const maskMaterial = effect.maskPass.getFullscreenMaterial();
+        maskMaterial.maskFunction = postprocessing.MaskFunction.MULTIPLY_RGB_SET_ALPHA;
+        return effect;
+    }, [camera, props]);
+    React.useLayoutEffect(() => {
+        if (target && typeof target !== 'number') {
+            const vec = target instanceof THREE.Vector3
+                ? new THREE.Vector3().set(target.x, target.y, target.z)
+                : new THREE.Vector3().set(target[0], target[1], target[2]);
+            effect.target = vec;
+        }
+        if (depthTexture)
+            effect.setDepthTexture(depthTexture.texture, depthTexture.packing);
+        invalidate();
+    }, [target, depthTexture, effect]);
+    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);
@@ -159,107 +260,6 @@ 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();
-    const scene = _scene || defaultScene;
-    const camera = _camera || defaultCamera;
-    const [composer, normalPass, downSamplingPass] = React.useMemo(() => {
-        const webGL2Available = threeStdlib.isWebGL2Available();
-        // Initialize composer
-        const effectComposer = new postprocessing.EffectComposer(gl, {
-            depthBuffer,
-            stencilBuffer,
-            multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
-            frameBufferType,
-        });
-        // Add render pass
-        effectComposer.addPass(new postprocessing.RenderPass(scene, camera));
-        // Create normal pass
-        let downSamplingPass = null;
-        let normalPass = null;
-        if (!disableNormalPass) {
-            normalPass = new postprocessing.NormalPass(scene, camera);
-            normalPass.enabled = false;
-            effectComposer.addPass(normalPass);
-            if (resolutionScale !== undefined && webGL2Available) {
-                downSamplingPass = new postprocessing.DepthDownsamplingPass({ normalBuffer: normalPass.texture, resolutionScale });
-                downSamplingPass.enabled = false;
-                effectComposer.addPass(downSamplingPass);
-            }
-        }
-        return [effectComposer, normalPass, downSamplingPass];
-    }, [
-        camera,
-        gl,
-        depthBuffer,
-        stencilBuffer,
-        multisampling,
-        frameBufferType,
-        scene,
-        disableNormalPass,
-        resolutionScale,
-    ]);
-    React.useEffect(() => composer === null || composer === void 0 ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
-    fiber.useFrame((_, delta) => {
-        if (enabled) {
-            gl.autoClear = autoClear;
-            composer.render(delta);
-        }
-    }, enabled ? renderPriority : 0);
-    const group = React.useRef(null);
-    const instance = fiber.useInstanceHandle(group);
-    React.useLayoutEffect(() => {
-        let effectPass;
-        if (group.current && instance.current && composer) {
-            effectPass = new postprocessing.EffectPass(camera, ...instance.current.objects);
-            effectPass.renderToScreen = true;
-            composer.addPass(effectPass);
-            if (normalPass)
-                normalPass.enabled = true;
-            if (downSamplingPass)
-                downSamplingPass.enabled = true;
-        }
-        return () => {
-            if (effectPass)
-                composer === null || composer === void 0 ? void 0 : composer.removePass(effectPass);
-            if (normalPass)
-                normalPass.enabled = false;
-            if (downSamplingPass)
-                downSamplingPass.enabled = false;
-        };
-    }, [composer, children, camera, normalPass, downSamplingPass, instance]);
-    // Memoize state, otherwise it would trigger all consumers on every render
-    const state = React.useMemo(() => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }), [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]);
-    // Expose the composer
-    React.useImperativeHandle(ref, () => composer, [composer]);
-    return (jsxRuntime.jsx(EffectComposerContext.Provider, { value: state, children: jsxRuntime.jsx("group", { ref: group, children: children }) }));
-}));
-
-const DepthOfField = React.forwardRef(function DepthOfField({ target, depthTexture, ...props }, ref) {
-    const invalidate = fiber.useThree((state) => state.invalidate);
-    const { camera } = React.useContext(EffectComposerContext);
-    const effect = React.useMemo(() => {
-        const effect = new postprocessing.DepthOfFieldEffect(camera, props);
-        // Temporary fix that restores DOF 6.21.3 behavior, everything since then lets shapes leak through the blur
-        const maskMaterial = effect.maskPass.getFullscreenMaterial();
-        maskMaterial.maskFunction = postprocessing.MaskFunction.MULTIPLY_RGB_SET_ALPHA;
-        return effect;
-    }, [camera, props]);
-    React.useLayoutEffect(() => {
-        if (target && typeof target !== 'number') {
-            const vec = target instanceof THREE.Vector3
-                ? new THREE.Vector3().set(target.x, target.y, target.z)
-                : new THREE.Vector3().set(target[0], target[1], target[2]);
-            effect.target = vec;
-        }
-        if (depthTexture)
-            effect.setDepthTexture(depthTexture.texture, depthTexture.packing);
-        invalidate();
-    }, [target, depthTexture, effect]);
-    return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
-});
-
 const DotScreen = wrapEffect(postprocessing.DotScreenEffect);
 
 const Glitch = React.forwardRef(function Glitch({ active = true, ...props }, ref) {

package/dist/index.js

@@ -1,14 +1,115 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as THREE from 'three';
 import { HalfFloatType, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping, Uniform } from 'three';
-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 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';
 
-const Autofocus = forwardRef(({ target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0, ...props }, fref) => {
+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) => {
+    const { gl, scene: defaultScene, camera: defaultCamera, size } = useThree();
+    const scene = _scene || defaultScene;
+    const camera = _camera || defaultCamera;
+    const [composer, normalPass, downSamplingPass] = useMemo(() => {
+        const webGL2Available = isWebGL2Available();
+        // Initialize composer
+        const effectComposer = new EffectComposer$1(gl, {
+            depthBuffer,
+            stencilBuffer,
+            multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
+            frameBufferType,
+        });
+        // Add render pass
+        effectComposer.addPass(new RenderPass(scene, camera));
+        // Create normal pass
+        let downSamplingPass = null;
+        let normalPass = null;
+        if (!disableNormalPass) {
+            normalPass = new NormalPass(scene, camera);
+            normalPass.enabled = false;
+            effectComposer.addPass(normalPass);
+            if (resolutionScale !== undefined && webGL2Available) {
+                downSamplingPass = new DepthDownsamplingPass({ normalBuffer: normalPass.texture, resolutionScale });
+                downSamplingPass.enabled = false;
+                effectComposer.addPass(downSamplingPass);
+            }
+        }
+        return [effectComposer, normalPass, downSamplingPass];
+    }, [
+        camera,
+        gl,
+        depthBuffer,
+        stencilBuffer,
+        multisampling,
+        frameBufferType,
+        scene,
+        disableNormalPass,
+        resolutionScale,
+    ]);
+    useEffect(() => composer === null || composer === void 0 ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
+    useFrame((_, delta) => {
+        if (enabled) {
+            gl.autoClear = autoClear;
+            composer.render(delta);
+        }
+    }, enabled ? renderPriority : 0);
+    const group = useRef(null);
+    const instance = useInstanceHandle(group);
+    useLayoutEffect(() => {
+        let effectPass;
+        if (group.current && instance.current && composer) {
+            effectPass = new EffectPass(camera, ...instance.current.objects);
+            effectPass.renderToScreen = true;
+            composer.addPass(effectPass);
+            if (normalPass)
+                normalPass.enabled = true;
+            if (downSamplingPass)
+                downSamplingPass.enabled = true;
+        }
+        return () => {
+            if (effectPass)
+                composer === null || composer === void 0 ? void 0 : composer.removePass(effectPass);
+            if (normalPass)
+                normalPass.enabled = false;
+            if (downSamplingPass)
+                downSamplingPass.enabled = false;
+        };
+    }, [composer, children, camera, normalPass, downSamplingPass, instance]);
+    // Memoize state, otherwise it would trigger all consumers on every render
+    const state = useMemo(() => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }), [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]);
+    // Expose the composer
+    useImperativeHandle(ref, () => composer, [composer]);
+    return (jsx(EffectComposerContext.Provider, { value: state, children: jsx("group", { ref: group, children: children }) }));
+}));
+
+const DepthOfField = forwardRef(function DepthOfField({ target, depthTexture, ...props }, ref) {
+    const invalidate = useThree((state) => state.invalidate);
+    const { camera } = useContext(EffectComposerContext);
+    const effect = useMemo(() => {
+        const effect = new DepthOfFieldEffect(camera, props);
+        // Temporary fix that restores DOF 6.21.3 behavior, everything since then lets shapes leak through the blur
+        const maskMaterial = effect.maskPass.getFullscreenMaterial();
+        maskMaterial.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA;
+        return effect;
+    }, [camera, props]);
+    useLayoutEffect(() => {
+        if (target && typeof target !== 'number') {
+            const vec = target instanceof Vector3
+                ? new Vector3().set(target.x, target.y, target.z)
+                : new Vector3().set(target[0], target[1], target[2]);
+            effect.target = vec;
+        }
+        if (depthTexture)
+            effect.setDepthTexture(depthTexture.texture, depthTexture.packing);
+        invalidate();
+    }, [target, depthTexture, effect]);
+    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);
@@ -139,107 +240,6 @@ 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) => {
-    const { gl, scene: defaultScene, camera: defaultCamera, size } = useThree();
-    const scene = _scene || defaultScene;
-    const camera = _camera || defaultCamera;
-    const [composer, normalPass, downSamplingPass] = useMemo(() => {
-        const webGL2Available = isWebGL2Available();
-        // Initialize composer
-        const effectComposer = new EffectComposer$1(gl, {
-            depthBuffer,
-            stencilBuffer,
-            multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
-            frameBufferType,
-        });
-        // Add render pass
-        effectComposer.addPass(new RenderPass(scene, camera));
-        // Create normal pass
-        let downSamplingPass = null;
-        let normalPass = null;
-        if (!disableNormalPass) {
-            normalPass = new NormalPass(scene, camera);
-            normalPass.enabled = false;
-            effectComposer.addPass(normalPass);
-            if (resolutionScale !== undefined && webGL2Available) {
-                downSamplingPass = new DepthDownsamplingPass({ normalBuffer: normalPass.texture, resolutionScale });
-                downSamplingPass.enabled = false;
-                effectComposer.addPass(downSamplingPass);
-            }
-        }
-        return [effectComposer, normalPass, downSamplingPass];
-    }, [
-        camera,
-        gl,
-        depthBuffer,
-        stencilBuffer,
-        multisampling,
-        frameBufferType,
-        scene,
-        disableNormalPass,
-        resolutionScale,
-    ]);
-    useEffect(() => composer === null || composer === void 0 ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
-    useFrame((_, delta) => {
-        if (enabled) {
-            gl.autoClear = autoClear;
-            composer.render(delta);
-        }
-    }, enabled ? renderPriority : 0);
-    const group = useRef(null);
-    const instance = useInstanceHandle(group);
-    useLayoutEffect(() => {
-        let effectPass;
-        if (group.current && instance.current && composer) {
-            effectPass = new EffectPass(camera, ...instance.current.objects);
-            effectPass.renderToScreen = true;
-            composer.addPass(effectPass);
-            if (normalPass)
-                normalPass.enabled = true;
-            if (downSamplingPass)
-                downSamplingPass.enabled = true;
-        }
-        return () => {
-            if (effectPass)
-                composer === null || composer === void 0 ? void 0 : composer.removePass(effectPass);
-            if (normalPass)
-                normalPass.enabled = false;
-            if (downSamplingPass)
-                downSamplingPass.enabled = false;
-        };
-    }, [composer, children, camera, normalPass, downSamplingPass, instance]);
-    // Memoize state, otherwise it would trigger all consumers on every render
-    const state = useMemo(() => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }), [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]);
-    // Expose the composer
-    useImperativeHandle(ref, () => composer, [composer]);
-    return (jsx(EffectComposerContext.Provider, { value: state, children: jsx("group", { ref: group, children: children }) }));
-}));
-
-const DepthOfField = forwardRef(function DepthOfField({ target, depthTexture, ...props }, ref) {
-    const invalidate = useThree((state) => state.invalidate);
-    const { camera } = useContext(EffectComposerContext);
-    const effect = useMemo(() => {
-        const effect = new DepthOfFieldEffect(camera, props);
-        // Temporary fix that restores DOF 6.21.3 behavior, everything since then lets shapes leak through the blur
-        const maskMaterial = effect.maskPass.getFullscreenMaterial();
-        maskMaterial.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA;
-        return effect;
-    }, [camera, props]);
-    useLayoutEffect(() => {
-        if (target && typeof target !== 'number') {
-            const vec = target instanceof Vector3
-                ? new Vector3().set(target.x, target.y, target.z)
-                : new Vector3().set(target[0], target[1], target[2]);
-            effect.target = vec;
-        }
-        if (depthTexture)
-            effect.setDepthTexture(depthTexture.texture, depthTexture.packing);
-        invalidate();
-    }, [target, depthTexture, effect]);
-    return jsx("primitive", { ref: ref, object: effect, dispose: null });
-});
-
 const DotScreen = wrapEffect(DotScreenEffect);
 
 const Glitch = forwardRef(function Glitch({ active = true, ...props }, ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.11.1",
+  "version": "2.11.3",
   "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",