@react-three/postprocessing 2.8.3 → 2.9.0

package/dist/index.js

@@ -1,24 +1,22 @@
-import { BloomEffect, BlendFunction, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, EffectPass, DepthOfFieldEffect, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAPreset, EdgeDetectionMode, SMAAImageLoader, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUTEffect, TiltShiftEffect as TiltShiftEffect$1, Effect, EffectAttribute } from 'postprocessing';
+import { BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, EffectPass, DepthOfFieldEffect, 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 _extends from '@babel/runtime/helpers/esm/extends';
-import * as React from 'react';
-import React__default, { forwardRef, useMemo, createContext, useEffect, useRef, useLayoutEffect, useImperativeHandle, useContext, useState } from 'react';
+import React$1, { forwardRef, useMemo, createContext, useEffect, useRef, useLayoutEffect, useImperativeHandle, useContext, useState } from 'react';
 import * as THREE from 'three';
 import { HalfFloatType, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping, Uniform } from 'three';
-import { extend, useThree, useFrame, useLoader } from '@react-three/fiber';
+import { extend, useThree, useFrame, useInstanceHandle, useLoader } from '@react-three/fiber';
 import { isWebGL2Available } from 'three-stdlib';
 import { SSREffect } from 'screen-space-reflections';
 
-const resolveRef = ref => typeof ref === 'object' && 'current' in ref ? ref.current : ref;
+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(_ref, ref) {
+const wrapEffect = (effect, defaults) => /* @__PURE__ */React$1.forwardRef(function Effect(_ref, ref) {
   let {
     blendFunction = defaults == null ? void 0 : defaults.blendFunction,
     opacity = defaults == null ? void 0 : defaults.opacity,
     ...props
   } = _ref;
   let Component = components.get(effect);
-
   if (!Component) {
     const key = `@react-three/postprocessing/${effect.name}-${i++}`;
     extend({
@@ -26,17 +24,17 @@ const wrapEffect = (effect, defaults) => /* @__PURE__ */React.forwardRef(functio
     });
     components.set(effect, Component = key);
   }
-
   const camera = useThree(state => state.camera);
-  const args = React.useMemo(() => {
+  const args = React$1.useMemo(() => {
     var _defaults$args, _props$args;
-
-    return [...((_defaults$args = defaults == null ? void 0 : defaults.args) != null ? _defaults$args : []), ...((_props$args = props.args) != null ? _props$args : [{ ...defaults,
+    return [...((_defaults$args = defaults == null ? void 0 : defaults.args) != null ? _defaults$args : []), ...((_props$args = props.args) != null ? _props$args : [{
+      ...defaults,
       ...props
     }])];
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   [JSON.stringify(props)]);
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/React$1.createElement(Component, _extends({
     camera: camera,
     "blendMode-blendFunction": blendFunction,
     "blendMode-opacity": opacity
@@ -47,7 +45,7 @@ const wrapEffect = (effect, defaults) => /* @__PURE__ */React.forwardRef(functio
 });
 const useVector2 = (props, key) => {
   const value = props[key];
-  return React.useMemo(() => {
+  return React$1.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]);
 };
@@ -58,12 +56,15 @@ const Bloom = wrapEffect(BloomEffect, {
 
 const BrightnessContrast = wrapEffect(BrightnessContrastEffect);
 
+// type for function args should use constructor args
+
 const ChromaticAberration = /*#__PURE__*/forwardRef(function ChromaticAberration(props, ref) {
   const offset = useVector2(props, 'offset');
-  const effect = useMemo(() => new ChromaticAberrationEffect({ ...props,
+  const effect = useMemo(() => new ChromaticAberrationEffect({
+    ...props,
     offset
   }), [offset, props]);
-  return /*#__PURE__*/React__default.createElement("primitive", {
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -74,10 +75,9 @@ const ColorAverage = /*#__PURE__*/forwardRef(function ColorAverage(_ref, ref) {
   let {
     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 /*#__PURE__*/React__default.createElement("primitive", {
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -89,11 +89,11 @@ const ColorDepth = wrapEffect(ColorDepthEffect);
 const Depth = wrapEffect(DepthEffect);
 
 const EffectComposerContext = /*#__PURE__*/createContext(null);
-const EffectComposer = /*#__PURE__*/React__default.memo( /*#__PURE__*/forwardRef((_ref, ref) => {
+const EffectComposer = /*#__PURE__*/React$1.memo( /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
-    camera,
-    scene,
+    camera: _camera,
+    scene: _scene,
     resolutionScale,
     enabled = true,
     renderPriority = 1,
@@ -110,28 +110,28 @@ const EffectComposer = /*#__PURE__*/React__default.memo( /*#__PURE__*/forwardRef
     camera: defaultCamera,
     size
   } = useThree();
-  scene = scene || defaultScene;
-  camera = camera || defaultCamera;
+  const scene = _scene || defaultScene;
+  const camera = _camera || defaultCamera;
   const [composer, normalPass, downSamplingPass] = useMemo(() => {
-    const webGL2Available = isWebGL2Available(); // Initialize composer
-
+    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
+    // 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,
@@ -141,7 +141,6 @@ const EffectComposer = /*#__PURE__*/React__default.memo( /*#__PURE__*/forwardRef
         effectComposer.addPass(downSamplingPass);
       }
     }
-
     return [effectComposer, normalPass, downSamplingPass];
   }, [camera, gl, depthBuffer, stencilBuffer, multisampling, frameBufferType, scene, disableNormalPass, resolutionScale]);
   useEffect(() => composer == null ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
@@ -152,24 +151,24 @@ const EffectComposer = /*#__PURE__*/React__default.memo( /*#__PURE__*/forwardRef
     }
   }, enabled ? renderPriority : 0);
   const group = useRef(null);
+  const instance = useInstanceHandle(group);
   useLayoutEffect(() => {
     let effectPass;
-
-    if (group.current && group.current.__r3f && composer) {
-      effectPass = new EffectPass(camera, ...group.current.__r3f.objects);
+    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 ? void 0 : composer.removePass(effectPass);
       if (normalPass) normalPass.enabled = false;
       if (downSamplingPass) downSamplingPass.enabled = false;
     };
-  }, [composer, children, camera, normalPass, downSamplingPass]); // Memoize state, otherwise it would trigger all consumers on every render
+  }, [composer, children, camera, normalPass, downSamplingPass, instance]);
 
+  // Memoize state, otherwise it would trigger all consumers on every render
   const state = useMemo(() => ({
     composer,
     normalPass,
@@ -177,12 +176,13 @@ const EffectComposer = /*#__PURE__*/React__default.memo( /*#__PURE__*/forwardRef
     resolutionScale,
     camera,
     scene
-  }), [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]); // Expose the composer
+  }), [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]);
 
+  // Expose the composer
   useImperativeHandle(ref, () => composer, [composer]);
-  return /*#__PURE__*/React__default.createElement(EffectComposerContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(EffectComposerContext.Provider, {
     value: state
-  }, /*#__PURE__*/React__default.createElement("group", {
+  }, /*#__PURE__*/React$1.createElement("group", {
     ref: group
   }, children));
 }));
@@ -199,15 +199,14 @@ const DepthOfField = /*#__PURE__*/forwardRef(function DepthOfField(_ref, ref) {
   } = useContext(EffectComposerContext);
   const effect = useMemo(() => new DepthOfFieldEffect(camera, props), [camera, props]);
   useLayoutEffect(() => {
-    if (target) {
+    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 /*#__PURE__*/React__default.createElement("primitive", {
+  return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -225,7 +224,8 @@ const Glitch = /*#__PURE__*/forwardRef(function Glitch(_ref, ref) {
   const delay = useVector2(props, 'delay');
   const duration = useVector2(props, 'duration');
   const strength = useVector2(props, 'strength');
-  const effect = useMemo(() => new GlitchEffect({ ...props,
+  const effect = useMemo(() => new GlitchEffect({
+    ...props,
     delay,
     duration,
     strength
@@ -233,8 +233,8 @@ const Glitch = /*#__PURE__*/forwardRef(function Glitch(_ref, ref) {
   useLayoutEffect(() => {
     effect.mode = active ? props.mode || GlitchMode.SPORADIC : GlitchMode.DISABLED;
     invalidate();
-  }, [active, effect, props.mode]);
-  return /*#__PURE__*/React__default.createElement("primitive", {
+  }, [active, effect, invalidate, props.mode]);
+  return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -246,7 +246,7 @@ const GodRays = /*#__PURE__*/forwardRef(function GodRays(props, ref) {
     camera
   } = useContext(EffectComposerContext);
   const effect = useMemo(() => new GodRaysEffect(camera, props.sun, props), [camera, props]);
-  return /*#__PURE__*/React__default.createElement("primitive", {
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -264,7 +264,7 @@ const Grid = /*#__PURE__*/forwardRef(function Grid(_ref, ref) {
     if (size) effect.setSize(size.width, size.height);
     invalidate();
   }, [effect, size]);
-  return /*#__PURE__*/React__default.createElement("primitive", {
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -289,7 +289,7 @@ function Selection(_ref) {
     select,
     enabled
   }), [selected, select, enabled]);
-  return /*#__PURE__*/React__default.createElement(selectionContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(selectionContext.Provider, {
     value: value
   }, children);
 }
@@ -309,7 +309,6 @@ function Select(_ref2) {
         o.type === 'Mesh' && current.push(o);
         if (api.selected.indexOf(o) === -1) changed = true;
       });
-
       if (changed) {
         api.select(state => [...state, ...current]);
         return () => {
@@ -318,7 +317,7 @@ function Select(_ref2) {
       }
     }
   }, [enabled, children]);
-  return /*#__PURE__*/React__default.createElement("group", _extends({
+  return /*#__PURE__*/React$1.createElement("group", _extends({
     ref: group
   }, props), children);
 }
@@ -358,7 +357,7 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
     blur,
     xRay,
     ...props
-  }), [blendFunction, blur, camera, edgeStrength, height, hiddenEdgeColor, kernelSize, patternTexture, pulseSpeed, scene, visibleEdgeColor, width, xRay]);
+  }), [blendFunction, blur, camera, edgeStrength, height, hiddenEdgeColor, kernelSize, patternTexture, props, pulseSpeed, scene, visibleEdgeColor, width, xRay]);
   const api = useContext(selectionContext);
   useEffect(() => {
     // Do not allow array selection if declarative selection is active
@@ -371,16 +370,15 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
         invalidate();
       };
     }
-  }, [effect, selection, api]);
+  }, [effect, selection, api, invalidate]);
   useEffect(() => {
     effect.selectionLayer = selectionLayer;
     invalidate();
-  }, [effect, selectionLayer]);
+  }, [effect, invalidate, selectionLayer]);
   useRef();
   useEffect(() => {
     if (api && api.enabled) {
       var _api$selected;
-
       if ((_api$selected = api.selected) != null && _api$selected.length) {
         effect.selection.set(api.selected);
         invalidate();
@@ -390,8 +388,8 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
         };
       }
     }
-  }, [api]);
-  return /*#__PURE__*/React__default.createElement("primitive", {
+  }, [api, effect.selection, invalidate]);
+  return /*#__PURE__*/React.createElement("primitive", {
     ref: forwardRef,
     object: effect
   });
@@ -401,10 +399,9 @@ const Pixelation = /*#__PURE__*/forwardRef(function Pixelation(_ref, ref) {
   let {
     granularity = 5
   } = _ref;
-
   /** Because GlitchEffect granularity is not an object but a number, we have to define a custom prop "granularity" */
   const effect = useMemo(() => new PixelationEffect(granularity), [granularity]);
-  return /*#__PURE__*/React__default.createElement("primitive", {
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -416,9 +413,7 @@ const Scanline = wrapEffect(ScanlineEffect, {
 });
 
 const addLight = (light, effect) => light.layers.enable(effect.selection.layer);
-
 const removeLight = (light, effect) => light.layers.disable(effect.selection.layer);
-
 const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, forwardRef) {
   let {
     selection = [],
@@ -431,15 +426,11 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
     height,
     kernelSize,
     mipmapBlur,
-    radius,
-    levels,
     ...props
   } = _ref;
-
   if (lights.length === 0) {
     console.warn('SelectiveBloom requires lights to work.');
   }
-
   const invalidate = useThree(state => state.invalidate);
   const {
     scene,
@@ -454,10 +445,8 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
     height,
     kernelSize,
     mipmapBlur,
-    radius,
-    levels,
     ...props
-  }), [camera, height, intensity, kernelSize, luminanceSmoothing, luminanceThreshold, scene, width, height, mipmapBlur, radius, levels]);
+  }), [scene, camera, luminanceThreshold, luminanceSmoothing, intensity, width, height, kernelSize, mipmapBlur, props]);
   const api = useContext(selectionContext);
   useEffect(() => {
     // Do not allow array selection if declarative selection is active
@@ -470,11 +459,11 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
         invalidate();
       };
     }
-  }, [effect, selection, api]);
+  }, [effect, selection, api, invalidate]);
   useEffect(() => {
     effect.selection.layer = selectionLayer;
     invalidate();
-  }, [effect, selectionLayer]);
+  }, [effect, invalidate, selectionLayer]);
   useEffect(() => {
     if (lights && lights.length > 0) {
       lights.forEach(light => addLight(resolveRef(light), effect));
@@ -484,12 +473,11 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
         invalidate();
       };
     }
-  }, [effect, lights, selectionLayer]);
+  }, [effect, invalidate, lights, selectionLayer]);
   useRef();
   useEffect(() => {
     if (api && api.enabled) {
       var _api$selected;
-
       if ((_api$selected = api.selected) != null && _api$selected.length) {
         effect.selection.set(api.selected);
         invalidate();
@@ -499,8 +487,8 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
         };
       }
     }
-  }, [api]);
-  return /*#__PURE__*/React__default.createElement("primitive", {
+  }, [api, effect.selection, invalidate]);
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: forwardRef,
     object: effect,
     dispose: null
@@ -509,6 +497,8 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
 
 const Sepia = wrapEffect(SepiaEffect);
 
+// first two args are camera and texture
+
 const SSAO = /*#__PURE__*/forwardRef(function SSAO(props, ref) {
   const {
     camera,
@@ -519,9 +509,8 @@ const SSAO = /*#__PURE__*/forwardRef(function SSAO(props, ref) {
   const effect = useMemo(() => {
     if (normalPass === null && downSamplingPass === null) {
       console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.');
-      return null;
+      return {};
     }
-
     return new SSAOEffect(camera, normalPass && !downSamplingPass ? normalPass.texture : null, {
       blendFunction: BlendFunction.MULTIPLY,
       samples: 30,
@@ -532,10 +521,9 @@ const SSAO = /*#__PURE__*/forwardRef(function SSAO(props, ref) {
       rangeFalloff: 0.1,
       luminanceInfluence: 0.9,
       radius: 20,
-      scale: 0.5,
       bias: 0.5,
       intensity: 1.0,
-      color: null,
+      color: undefined,
       // @ts-ignore
       normalDepthBuffer: downSamplingPass ? downSamplingPass.texture : null,
       resolutionScale: resolutionScale != null ? resolutionScale : 1,
@@ -543,26 +531,14 @@ const SSAO = /*#__PURE__*/forwardRef(function SSAO(props, ref) {
       ...props
     });
   }, [camera, normalPass, props]);
-  return /*#__PURE__*/React__default.createElement("primitive", {
+  return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
   });
 });
 
-const SMAA = /*#__PURE__*/forwardRef(function SMAA(_ref, ref) {
-  let {
-    preset = SMAAPreset.HIGH,
-    edgeDetectionMode = EdgeDetectionMode.COLOR
-  } = _ref;
-  const smaaProps = useLoader(SMAAImageLoader, '');
-  const effect = useMemo(() => new SMAAEffect(...smaaProps, preset, edgeDetectionMode), [smaaProps, preset, edgeDetectionMode]);
-  return /*#__PURE__*/React__default.createElement("primitive", {
-    ref: ref,
-    object: effect,
-    dispose: null
-  });
-});
+const SMAA = wrapEffect(SMAAEffect);
 
 const Texture = /*#__PURE__*/forwardRef(function Texture(_ref, ref) {
   let {
@@ -575,10 +551,11 @@ const Texture = /*#__PURE__*/forwardRef(function Texture(_ref, ref) {
     t.encoding = sRGBEncoding;
     t.wrapS = t.wrapT = RepeatWrapping;
   }, [t]);
-  const effect = useMemo(() => new TextureEffect({ ...props,
+  const effect = useMemo(() => new TextureEffect({
+    ...props,
     texture: t || texture
   }), [props, t, texture]);
-  return /*#__PURE__*/React__default.createElement("primitive", {
+  return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -597,14 +574,14 @@ const LUT = /*#__PURE__*/forwardRef(function LUT(_ref, ref) {
     tetrahedralInterpolation,
     ...props
   } = _ref;
+  const effect = useMemo(() => new LUT3DEffect(lut, props), [lut, props]);
   const invalidate = useThree(state => state.invalidate);
-  const effect = useMemo(() => new LUTEffect(lut, props), [lut, props]);
   useLayoutEffect(() => {
-    if (lut) effect.setLUT(lut);
-    if (tetrahedralInterpolation) effect.setTetrahedralInterpolationEnabled(tetrahedralInterpolation);
+    if (tetrahedralInterpolation) effect.tetrahedralInterpolation = tetrahedralInterpolation;
+    if (lut) effect.lut = lut;
     invalidate();
-  }, [effect, lut, tetrahedralInterpolation]);
-  return /*#__PURE__*/React__default.createElement("primitive", {
+  }, [effect, invalidate, lut, tetrahedralInterpolation]);
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -689,7 +666,6 @@ class TiltShiftEffect extends Effect {
       samples = 10.0,
       // number of blur samples
       direction = [1, 1] // direction of blur
-
     } = _temp === void 0 ? {} : _temp;
     super('TiltShiftEffect', TiltShiftShader.fragmentShader, {
       blendFunction,
@@ -697,9 +673,12 @@ class TiltShiftEffect extends Effect {
       uniforms: new Map([['blur', new Uniform(blur)], ['taper', new Uniform(taper)], ['start', new Uniform(start)], ['end', new Uniform(end)], ['samples', new Uniform(samples)], ['direction', new Uniform(direction)]])
     });
   }
-
 }
-const TiltShift2 = wrapEffect(TiltShiftEffect);
+const TiltShift2 = wrapEffect(TiltShiftEffect, {
+  blendFunction: BlendFunction.NORMAL
+});
+
+// first two args are camera and texture
 
 const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
   let {
@@ -718,16 +697,11 @@ const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
     ENABLE_BLUR,
     USE_MRT,
     ...props
-  }), [SSREffect, scene, camera, ENABLE_BLUR, USE_MRT]);
-  useLayoutEffect(() => {
-    Object.keys(props).forEach(key => effect[key] = props[key]);
-    invalidate();
-  }, [props]);
+  }), [scene, camera, ENABLE_BLUR, USE_MRT, props]);
   const api = useContext(selectionContext);
   useEffect(() => {
     if (api && api.enabled) {
       var _api$selected;
-
       if ((_api$selected = api.selected) != null && _api$selected.length) {
         effect.selection.set(api.selected);
         invalidate();
@@ -738,10 +712,10 @@ const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
       }
     }
   }, [api]);
-  return /*#__PURE__*/React__default.createElement("primitive", {
+  return /*#__PURE__*/React$1.createElement("primitive", _extends({
     ref: ref,
     object: effect
-  });
+  }, props));
 });
 
 export { 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

@@ -1,12 +1,13 @@
-import * as React from 'react';
+import React, { MutableRefObject } from 'react';
+import { Vector2 } from 'three';
 import * as THREE from 'three';
 import { type ReactThreeFiber } from '@react-three/fiber';
-import { type Effect, type BlendFunction } from 'postprocessing';
+import type { Effect, BlendFunction } from 'postprocessing';
 export declare const resolveRef: <T>(ref: T | React.MutableRefObject<T>) => T;
-export declare type EffectConstructor = new (...args: any[]) => Effect;
-export declare type EffectProps<T extends EffectConstructor> = ReactThreeFiber.Node<T extends Function ? T['prototype'] : InstanceType<T>, T> & ConstructorParameters<T>[0] & {
+export type EffectConstructor = new (...args: any[]) => Effect;
+export type EffectProps<T extends EffectConstructor> = ReactThreeFiber.Node<T extends Function ? T['prototype'] : InstanceType<T>, T> & ConstructorParameters<T>[0] & {
     blendFunction?: BlendFunction;
     opacity?: number;
 };
-export declare const wrapEffect: <T extends EffectConstructor, P extends EffectProps<T>>(effect: T, defaults?: P) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
-export declare const useVector2: (props: object, key: string) => THREE.Vector2;
+export declare const wrapEffect: <T extends EffectConstructor, P extends EffectProps<T>>(effect: T, defaults?: P | undefined) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+export declare const useVector2: (props: Record<string, unknown>, key: string) => THREE.Vector2;