@react-three/postprocessing 2.8.3 → 2.9.0

package/dist/index.cjs

@@ -1,22 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var postprocessing = require('postprocessing');
 var _construct = require('@babel/runtime/helpers/construct');
 var _extends = require('@babel/runtime/helpers/extends');
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
-var React = require('react');
+var React$1 = require('react');
 var THREE = require('three');
 var fiber = require('@react-three/fiber');
 var threeStdlib = require('three-stdlib');
 var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
 var screenSpaceReflections = require('screen-space-reflections');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   var n = Object.create(null);
   if (e) {
     Object.keys(e).forEach(function (k) {
@@ -29,52 +24,42 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var _construct__default = /*#__PURE__*/_interopDefaultLegacy(_construct);
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
+var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 
 var _excluded$9 = ["blendFunction", "opacity"];
 var resolveRef = function resolveRef(ref) {
-  return typeof ref === 'object' && 'current' in ref ? ref.current : ref;
+  return typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref;
 };
 var i = 0;
 var components = new WeakMap();
 var wrapEffect = function wrapEffect(effect, defaults) {
-  return /* @__PURE__ */React__namespace.forwardRef(function Effect(_ref, ref) {
+  return /* @__PURE__ */React$1.forwardRef(function Effect(_ref, ref) {
     var _ref$blendFunction = _ref.blendFunction,
-        blendFunction = _ref$blendFunction === void 0 ? defaults == null ? void 0 : defaults.blendFunction : _ref$blendFunction,
-        _ref$opacity = _ref.opacity,
-        opacity = _ref$opacity === void 0 ? defaults == null ? void 0 : defaults.opacity : _ref$opacity,
-        props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$9);
-
+      blendFunction = _ref$blendFunction === void 0 ? defaults == null ? void 0 : defaults.blendFunction : _ref$blendFunction,
+      _ref$opacity = _ref.opacity,
+      opacity = _ref$opacity === void 0 ? defaults == null ? void 0 : defaults.opacity : _ref$opacity,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
     var Component = components.get(effect);
-
     if (!Component) {
       var _extend;
-
       var key = "@react-three/postprocessing/" + effect.name + "-" + i++;
       fiber.extend((_extend = {}, _extend[key] = effect, _extend));
       components.set(effect, Component = key);
     }
-
     var camera = fiber.useThree(function (state) {
       return state.camera;
     });
-    var args = React__namespace.useMemo(function () {
+    var args = React$1.useMemo(function () {
       var _defaults$args, _props$args;
-
-      return [].concat((_defaults$args = defaults == null ? void 0 : defaults.args) != null ? _defaults$args : [], (_props$args = props.args) != null ? _props$args : [_extends__default["default"]({}, defaults, props)]);
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+      return [].concat((_defaults$args = defaults == null ? void 0 : defaults.args) != null ? _defaults$args : [], (_props$args = props.args) != null ? _props$args : [_extends({}, defaults, props)]);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [JSON.stringify(props)]);
-    return /*#__PURE__*/React__namespace.createElement(Component, _extends__default["default"]({
+    return /*#__PURE__*/React$1.createElement(Component, _extends({
       camera: camera,
       "blendMode-blendFunction": blendFunction,
       "blendMode-opacity": opacity
@@ -86,8 +71,8 @@ var wrapEffect = function wrapEffect(effect, defaults) {
 };
 var useVector2 = function useVector2(props, key) {
   var value = props[key];
-  return React__namespace.useMemo(function () {
-    if (typeof value === 'number') return new THREE__namespace.Vector2(value, value);else if (value) return _construct__default["default"](THREE__namespace.Vector2, value);else return new THREE__namespace.Vector2();
+  return React$1.useMemo(function () {
+    if (typeof value === 'number') return new THREE__namespace.Vector2(value, value);else if (value) return _construct(THREE__namespace.Vector2, value);else return new THREE__namespace.Vector2();
   }, [value]);
 };
 
@@ -97,29 +82,30 @@ var Bloom = wrapEffect(postprocessing.BloomEffect, {
 
 var BrightnessContrast = wrapEffect(postprocessing.BrightnessContrastEffect);
 
-var ChromaticAberration = /*#__PURE__*/React.forwardRef(function ChromaticAberration(props, ref) {
+// type for function args should use constructor args
+
+var ChromaticAberration = /*#__PURE__*/React$1.forwardRef(function ChromaticAberration(props, ref) {
   var offset = useVector2(props, 'offset');
-  var effect = React.useMemo(function () {
-    return new postprocessing.ChromaticAberrationEffect(_extends__default["default"]({}, props, {
+  var effect = React$1.useMemo(function () {
+    return new postprocessing.ChromaticAberrationEffect(_extends({}, props, {
       offset: offset
     }));
   }, [offset, props]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
   });
 });
 
-var ColorAverage = /*#__PURE__*/React.forwardRef(function ColorAverage(_ref, ref) {
+var ColorAverage = /*#__PURE__*/React$1.forwardRef(function ColorAverage(_ref, ref) {
   var _ref$blendFunction = _ref.blendFunction,
-      blendFunction = _ref$blendFunction === void 0 ? postprocessing.BlendFunction.NORMAL : _ref$blendFunction;
-
+    blendFunction = _ref$blendFunction === void 0 ? postprocessing.BlendFunction.NORMAL : _ref$blendFunction;
   /** Because ColorAverage blendFunction is not an object but a number, we have to define a custom prop "blendFunction" */
-  var effect = React.useMemo(function () {
+  var effect = React$1.useMemo(function () {
     return new postprocessing.ColorAverageEffect(blendFunction);
   }, [blendFunction]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -130,75 +116,67 @@ var ColorDepth = wrapEffect(postprocessing.ColorDepthEffect);
 
 var Depth = wrapEffect(postprocessing.DepthEffect);
 
-var EffectComposerContext = /*#__PURE__*/React.createContext(null);
-var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var EffectComposerContext = /*#__PURE__*/React$1.createContext(null);
+var EffectComposer = /*#__PURE__*/React$1.memo( /*#__PURE__*/React$1.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      camera = _ref.camera,
-      scene = _ref.scene,
-      resolutionScale = _ref.resolutionScale,
-      _ref$enabled = _ref.enabled,
-      enabled = _ref$enabled === void 0 ? true : _ref$enabled,
-      _ref$renderPriority = _ref.renderPriority,
-      renderPriority = _ref$renderPriority === void 0 ? 1 : _ref$renderPriority,
-      _ref$autoClear = _ref.autoClear,
-      autoClear = _ref$autoClear === void 0 ? true : _ref$autoClear,
-      depthBuffer = _ref.depthBuffer,
-      disableNormalPass = _ref.disableNormalPass,
-      stencilBuffer = _ref.stencilBuffer,
-      _ref$multisampling = _ref.multisampling,
-      multisampling = _ref$multisampling === void 0 ? 8 : _ref$multisampling,
-      _ref$frameBufferType = _ref.frameBufferType,
-      frameBufferType = _ref$frameBufferType === void 0 ? THREE.HalfFloatType : _ref$frameBufferType;
-
+    _camera = _ref.camera,
+    _scene = _ref.scene,
+    resolutionScale = _ref.resolutionScale,
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled,
+    _ref$renderPriority = _ref.renderPriority,
+    renderPriority = _ref$renderPriority === void 0 ? 1 : _ref$renderPriority,
+    _ref$autoClear = _ref.autoClear,
+    autoClear = _ref$autoClear === void 0 ? true : _ref$autoClear,
+    depthBuffer = _ref.depthBuffer,
+    disableNormalPass = _ref.disableNormalPass,
+    stencilBuffer = _ref.stencilBuffer,
+    _ref$multisampling = _ref.multisampling,
+    multisampling = _ref$multisampling === void 0 ? 8 : _ref$multisampling,
+    _ref$frameBufferType = _ref.frameBufferType,
+    frameBufferType = _ref$frameBufferType === void 0 ? THREE.HalfFloatType : _ref$frameBufferType;
   var _useThree = fiber.useThree(),
-      gl = _useThree.gl,
-      defaultScene = _useThree.scene,
-      defaultCamera = _useThree.camera,
-      size = _useThree.size;
-
-  scene = scene || defaultScene;
-  camera = camera || defaultCamera;
-
-  var _useMemo = React.useMemo(function () {
-    var webGL2Available = threeStdlib.isWebGL2Available(); // Initialize composer
-
-    // Initialize composer
-    var effectComposer = new postprocessing.EffectComposer(gl, {
-      depthBuffer: depthBuffer,
-      stencilBuffer: stencilBuffer,
-      multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
-      frameBufferType: frameBufferType
-    }); // Add render pass
-
-    // Add render pass
-    effectComposer.addPass(new postprocessing.RenderPass(scene, camera)); // Create normal pass
-
-    // Create normal pass
-    var downSamplingPass = null;
-    var 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: resolutionScale
-        });
-        downSamplingPass.enabled = false;
-        effectComposer.addPass(downSamplingPass);
-      }
-    }
-
-    return [effectComposer, normalPass, downSamplingPass];
-  }, [camera, gl, depthBuffer, stencilBuffer, multisampling, frameBufferType, scene, disableNormalPass, resolutionScale]),
-      composer = _useMemo[0],
-      normalPass = _useMemo[1],
-      downSamplingPass = _useMemo[2];
+    gl = _useThree.gl,
+    defaultScene = _useThree.scene,
+    defaultCamera = _useThree.camera,
+    size = _useThree.size;
+  var scene = _scene || defaultScene;
+  var camera = _camera || defaultCamera;
+  var _useMemo = React$1.useMemo(function () {
+      var webGL2Available = threeStdlib.isWebGL2Available();
+      // Initialize composer
+      var effectComposer = new postprocessing.EffectComposer(gl, {
+        depthBuffer: depthBuffer,
+        stencilBuffer: stencilBuffer,
+        multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
+        frameBufferType: frameBufferType
+      });
 
-  React.useEffect(function () {
+      // Add render pass
+      effectComposer.addPass(new postprocessing.RenderPass(scene, camera));
+
+      // Create normal pass
+      var downSamplingPass = null;
+      var 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: resolutionScale
+          });
+          downSamplingPass.enabled = false;
+          effectComposer.addPass(downSamplingPass);
+        }
+      }
+      return [effectComposer, normalPass, downSamplingPass];
+    }, [camera, gl, depthBuffer, stencilBuffer, multisampling, frameBufferType, scene, disableNormalPass, resolutionScale]),
+    composer = _useMemo[0],
+    normalPass = _useMemo[1],
+    downSamplingPass = _useMemo[2];
+  React$1.useEffect(function () {
     return composer == null ? void 0 : composer.setSize(size.width, size.height);
   }, [composer, size]);
   fiber.useFrame(function (_, delta) {
@@ -207,26 +185,26 @@ var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/R
       composer.render(delta);
     }
   }, enabled ? renderPriority : 0);
-  var group = React.useRef(null);
-  React.useLayoutEffect(function () {
+  var group = React$1.useRef(null);
+  var instance = fiber.useInstanceHandle(group);
+  React$1.useLayoutEffect(function () {
     var effectPass;
-
-    if (group.current && group.current.__r3f && composer) {
-      effectPass = _construct__default["default"](postprocessing.EffectPass, [camera].concat(group.current.__r3f.objects));
+    if (group.current && instance.current && composer) {
+      effectPass = _construct(postprocessing.EffectPass, [camera].concat(instance.current.objects));
       effectPass.renderToScreen = true;
       composer.addPass(effectPass);
       if (normalPass) normalPass.enabled = true;
       if (downSamplingPass) downSamplingPass.enabled = true;
     }
-
     return function () {
       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]);
 
-  var state = React.useMemo(function () {
+  // Memoize state, otherwise it would trigger all consumers on every render
+  var state = React$1.useMemo(function () {
     return {
       composer: composer,
       normalPass: normalPass,
@@ -235,44 +213,41 @@ var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/R
       camera: camera,
       scene: scene
     };
-  }, [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]); // Expose the composer
+  }, [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]);
 
-  React.useImperativeHandle(ref, function () {
+  // Expose the composer
+  React$1.useImperativeHandle(ref, function () {
     return composer;
   }, [composer]);
-  return /*#__PURE__*/React__default["default"].createElement(EffectComposerContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(EffectComposerContext.Provider, {
     value: state
-  }, /*#__PURE__*/React__default["default"].createElement("group", {
+  }, /*#__PURE__*/React$1.createElement("group", {
     ref: group
   }, children));
 }));
 
 var _excluded$8 = ["target", "depthTexture"];
-var DepthOfField = /*#__PURE__*/React.forwardRef(function DepthOfField(_ref, ref) {
+var DepthOfField = /*#__PURE__*/React$1.forwardRef(function DepthOfField(_ref, ref) {
   var target = _ref.target,
-      depthTexture = _ref.depthTexture,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$8);
-
+    depthTexture = _ref.depthTexture,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
   });
-
-  var _useContext = React.useContext(EffectComposerContext),
-      camera = _useContext.camera;
-
-  var effect = React.useMemo(function () {
+  var _useContext = React$1.useContext(EffectComposerContext),
+    camera = _useContext.camera;
+  var effect = React$1.useMemo(function () {
     return new postprocessing.DepthOfFieldEffect(camera, props);
   }, [camera, props]);
-  React.useLayoutEffect(function () {
-    if (target) {
+  React$1.useLayoutEffect(function () {
+    if (target && typeof target !== 'number') {
       var 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 /*#__PURE__*/React__default["default"].createElement("primitive", {
+  return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -282,43 +257,41 @@ var DepthOfField = /*#__PURE__*/React.forwardRef(function DepthOfField(_ref, ref
 var DotScreen = wrapEffect(postprocessing.DotScreenEffect);
 
 var _excluded$7 = ["active"];
-var Glitch = /*#__PURE__*/React.forwardRef(function Glitch(_ref, ref) {
+var Glitch = /*#__PURE__*/React$1.forwardRef(function Glitch(_ref, ref) {
   var _ref$active = _ref.active,
-      active = _ref$active === void 0 ? true : _ref$active,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$7);
-
+    active = _ref$active === void 0 ? true : _ref$active,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
   });
   var delay = useVector2(props, 'delay');
   var duration = useVector2(props, 'duration');
   var strength = useVector2(props, 'strength');
-  var effect = React.useMemo(function () {
-    return new postprocessing.GlitchEffect(_extends__default["default"]({}, props, {
+  var effect = React$1.useMemo(function () {
+    return new postprocessing.GlitchEffect(_extends({}, props, {
       delay: delay,
       duration: duration,
       strength: strength
     }));
   }, [delay, duration, props, strength]);
-  React.useLayoutEffect(function () {
+  React$1.useLayoutEffect(function () {
     effect.mode = active ? props.mode || postprocessing.GlitchMode.SPORADIC : postprocessing.GlitchMode.DISABLED;
     invalidate();
-  }, [active, effect, props.mode]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+  }, [active, effect, invalidate, props.mode]);
+  return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
   });
 });
 
-var GodRays = /*#__PURE__*/React.forwardRef(function GodRays(props, ref) {
-  var _useContext = React.useContext(EffectComposerContext),
-      camera = _useContext.camera;
-
-  var effect = React.useMemo(function () {
+var GodRays = /*#__PURE__*/React$1.forwardRef(function GodRays(props, ref) {
+  var _useContext = React$1.useContext(EffectComposerContext),
+    camera = _useContext.camera;
+  var effect = React$1.useMemo(function () {
     return new postprocessing.GodRaysEffect(camera, props.sun, props);
   }, [camera, props]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -326,21 +299,20 @@ var GodRays = /*#__PURE__*/React.forwardRef(function GodRays(props, ref) {
 });
 
 var _excluded$6 = ["size"];
-var Grid = /*#__PURE__*/React.forwardRef(function Grid(_ref, ref) {
+var Grid = /*#__PURE__*/React$1.forwardRef(function Grid(_ref, ref) {
   var size = _ref.size,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$6);
-
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
   });
-  var effect = React.useMemo(function () {
+  var effect = React$1.useMemo(function () {
     return new postprocessing.GridEffect(props);
   }, [props]);
-  React.useLayoutEffect(function () {
+  React$1.useLayoutEffect(function () {
     if (size) effect.setSize(size.width, size.height);
     invalidate();
   }, [effect, size]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -354,36 +326,33 @@ var Noise = wrapEffect(postprocessing.NoiseEffect, {
 });
 
 var _excluded$5 = ["enabled", "children"];
-var selectionContext = /*#__PURE__*/React.createContext(null);
+var selectionContext = /*#__PURE__*/React$1.createContext(null);
 function Selection(_ref) {
   var children = _ref.children,
-      _ref$enabled = _ref.enabled,
-      enabled = _ref$enabled === void 0 ? true : _ref$enabled;
-
-  var _useState = React.useState([]),
-      selected = _useState[0],
-      select = _useState[1];
-
-  var value = React.useMemo(function () {
+    _ref$enabled = _ref.enabled,
+    enabled = _ref$enabled === void 0 ? true : _ref$enabled;
+  var _useState = React$1.useState([]),
+    selected = _useState[0],
+    select = _useState[1];
+  var value = React$1.useMemo(function () {
     return {
       selected: selected,
       select: select,
       enabled: enabled
     };
   }, [selected, select, enabled]);
-  return /*#__PURE__*/React__default["default"].createElement(selectionContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(selectionContext.Provider, {
     value: value
   }, children);
 }
 function Select(_ref2) {
   var _ref2$enabled = _ref2.enabled,
-      enabled = _ref2$enabled === void 0 ? false : _ref2$enabled,
-      children = _ref2.children,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref2, _excluded$5);
-
-  var group = React.useRef(null);
-  var api = React.useContext(selectionContext);
-  React.useEffect(function () {
+    enabled = _ref2$enabled === void 0 ? false : _ref2$enabled,
+    children = _ref2.children,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded$5);
+  var group = React$1.useRef(null);
+  var api = React$1.useContext(selectionContext);
+  React$1.useEffect(function () {
     if (api && enabled) {
       var changed = false;
       var current = [];
@@ -391,7 +360,6 @@ function Select(_ref2) {
         o.type === 'Mesh' && current.push(o);
         if (api.selected.indexOf(o) === -1) changed = true;
       });
-
       if (changed) {
         api.select(function (state) {
           return [].concat(state, current);
@@ -406,40 +374,37 @@ function Select(_ref2) {
       }
     }
   }, [enabled, children]);
-  return /*#__PURE__*/React__default["default"].createElement("group", _extends__default["default"]({
+  return /*#__PURE__*/React$1.createElement("group", _extends({
     ref: group
   }, props), children);
 }
 
 var _excluded$4 = ["selection", "selectionLayer", "blendFunction", "patternTexture", "edgeStrength", "pulseSpeed", "visibleEdgeColor", "hiddenEdgeColor", "width", "height", "kernelSize", "blur", "xRay"];
-var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
+var Outline = /*#__PURE__*/React$1.forwardRef(function Outline(_ref, forwardRef) {
   var _ref$selection = _ref.selection,
-      selection = _ref$selection === void 0 ? [] : _ref$selection,
-      _ref$selectionLayer = _ref.selectionLayer,
-      selectionLayer = _ref$selectionLayer === void 0 ? 10 : _ref$selectionLayer,
-      blendFunction = _ref.blendFunction,
-      patternTexture = _ref.patternTexture,
-      edgeStrength = _ref.edgeStrength,
-      pulseSpeed = _ref.pulseSpeed,
-      visibleEdgeColor = _ref.visibleEdgeColor,
-      hiddenEdgeColor = _ref.hiddenEdgeColor,
-      width = _ref.width,
-      height = _ref.height,
-      kernelSize = _ref.kernelSize,
-      blur = _ref.blur,
-      xRay = _ref.xRay,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$4);
-
+    selection = _ref$selection === void 0 ? [] : _ref$selection,
+    _ref$selectionLayer = _ref.selectionLayer,
+    selectionLayer = _ref$selectionLayer === void 0 ? 10 : _ref$selectionLayer,
+    blendFunction = _ref.blendFunction,
+    patternTexture = _ref.patternTexture,
+    edgeStrength = _ref.edgeStrength,
+    pulseSpeed = _ref.pulseSpeed,
+    visibleEdgeColor = _ref.visibleEdgeColor,
+    hiddenEdgeColor = _ref.hiddenEdgeColor,
+    width = _ref.width,
+    height = _ref.height,
+    kernelSize = _ref.kernelSize,
+    blur = _ref.blur,
+    xRay = _ref.xRay,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
   });
-
-  var _useContext = React.useContext(EffectComposerContext),
-      scene = _useContext.scene,
-      camera = _useContext.camera;
-
-  var effect = React.useMemo(function () {
-    return new postprocessing.OutlineEffect(scene, camera, _extends__default["default"]({
+  var _useContext = React$1.useContext(EffectComposerContext),
+    scene = _useContext.scene,
+    camera = _useContext.camera;
+  var effect = React$1.useMemo(function () {
+    return new postprocessing.OutlineEffect(scene, camera, _extends({
       blendFunction: blendFunction,
       patternTexture: patternTexture,
       edgeStrength: edgeStrength,
@@ -452,9 +417,9 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
       blur: blur,
       xRay: xRay
     }, props));
-  }, [blendFunction, blur, camera, edgeStrength, height, hiddenEdgeColor, kernelSize, patternTexture, pulseSpeed, scene, visibleEdgeColor, width, xRay]);
-  var api = React.useContext(selectionContext);
-  React.useEffect(function () {
+  }, [blendFunction, blur, camera, edgeStrength, height, hiddenEdgeColor, kernelSize, patternTexture, props, pulseSpeed, scene, visibleEdgeColor, width, xRay]);
+  var api = React$1.useContext(selectionContext);
+  React$1.useEffect(function () {
     // Do not allow array selection if declarative selection is active
     // TODO: array selection should probably be deprecated altogether
     if (!api && selection) {
@@ -465,16 +430,15 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
         invalidate();
       };
     }
-  }, [effect, selection, api]);
-  React.useEffect(function () {
+  }, [effect, selection, api, invalidate]);
+  React$1.useEffect(function () {
     effect.selectionLayer = selectionLayer;
     invalidate();
-  }, [effect, selectionLayer]);
-  React.useRef();
-  React.useEffect(function () {
+  }, [effect, invalidate, selectionLayer]);
+  React$1.useRef();
+  React$1.useEffect(function () {
     if (api && api.enabled) {
       var _api$selected;
-
       if ((_api$selected = api.selected) != null && _api$selected.length) {
         effect.selection.set(api.selected);
         invalidate();
@@ -484,22 +448,21 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
         };
       }
     }
-  }, [api]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+  }, [api, effect.selection, invalidate]);
+  return /*#__PURE__*/React.createElement("primitive", {
     ref: forwardRef,
     object: effect
   });
 });
 
-var Pixelation = /*#__PURE__*/React.forwardRef(function Pixelation(_ref, ref) {
+var Pixelation = /*#__PURE__*/React$1.forwardRef(function Pixelation(_ref, ref) {
   var _ref$granularity = _ref.granularity,
-      granularity = _ref$granularity === void 0 ? 5 : _ref$granularity;
-
+    granularity = _ref$granularity === void 0 ? 5 : _ref$granularity;
   /** Because GlitchEffect granularity is not an object but a number, we have to define a custom prop "granularity" */
-  var effect = React.useMemo(function () {
+  var effect = React$1.useMemo(function () {
     return new postprocessing.PixelationEffect(granularity);
   }, [granularity]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -510,48 +473,39 @@ var Scanline = wrapEffect(postprocessing.ScanlineEffect, {
   blendFunction: postprocessing.BlendFunction.OVERLAY
 });
 
-var _excluded$3 = ["selection", "selectionLayer", "lights", "luminanceThreshold", "luminanceSmoothing", "intensity", "width", "height", "kernelSize", "mipmapBlur", "radius", "levels"];
-
+var _excluded$3 = ["selection", "selectionLayer", "lights", "luminanceThreshold", "luminanceSmoothing", "intensity", "width", "height", "kernelSize", "mipmapBlur"];
 var addLight = function addLight(light, effect) {
   return light.layers.enable(effect.selection.layer);
 };
-
 var removeLight = function removeLight(light, effect) {
   return light.layers.disable(effect.selection.layer);
 };
-
-var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref, forwardRef) {
+var SelectiveBloom = /*#__PURE__*/React$1.forwardRef(function SelectiveBloom(_ref, forwardRef) {
   var _ref$selection = _ref.selection,
-      selection = _ref$selection === void 0 ? [] : _ref$selection,
-      _ref$selectionLayer = _ref.selectionLayer,
-      selectionLayer = _ref$selectionLayer === void 0 ? 10 : _ref$selectionLayer,
-      _ref$lights = _ref.lights,
-      lights = _ref$lights === void 0 ? [] : _ref$lights,
-      luminanceThreshold = _ref.luminanceThreshold,
-      luminanceSmoothing = _ref.luminanceSmoothing,
-      intensity = _ref.intensity,
-      width = _ref.width,
-      height = _ref.height,
-      kernelSize = _ref.kernelSize,
-      mipmapBlur = _ref.mipmapBlur,
-      radius = _ref.radius,
-      levels = _ref.levels,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$3);
-
+    selection = _ref$selection === void 0 ? [] : _ref$selection,
+    _ref$selectionLayer = _ref.selectionLayer,
+    selectionLayer = _ref$selectionLayer === void 0 ? 10 : _ref$selectionLayer,
+    _ref$lights = _ref.lights,
+    lights = _ref$lights === void 0 ? [] : _ref$lights,
+    luminanceThreshold = _ref.luminanceThreshold,
+    luminanceSmoothing = _ref.luminanceSmoothing,
+    intensity = _ref.intensity,
+    width = _ref.width,
+    height = _ref.height,
+    kernelSize = _ref.kernelSize,
+    mipmapBlur = _ref.mipmapBlur,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   if (lights.length === 0) {
     console.warn('SelectiveBloom requires lights to work.');
   }
-
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
   });
-
-  var _useContext = React.useContext(EffectComposerContext),
-      scene = _useContext.scene,
-      camera = _useContext.camera;
-
-  var effect = React.useMemo(function () {
-    return new postprocessing.SelectiveBloomEffect(scene, camera, _extends__default["default"]({
+  var _useContext = React$1.useContext(EffectComposerContext),
+    scene = _useContext.scene,
+    camera = _useContext.camera;
+  var effect = React$1.useMemo(function () {
+    return new postprocessing.SelectiveBloomEffect(scene, camera, _extends({
       blendFunction: postprocessing.BlendFunction.ADD,
       luminanceThreshold: luminanceThreshold,
       luminanceSmoothing: luminanceSmoothing,
@@ -559,13 +513,11 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
       width: width,
       height: height,
       kernelSize: kernelSize,
-      mipmapBlur: mipmapBlur,
-      radius: radius,
-      levels: levels
+      mipmapBlur: mipmapBlur
     }, props));
-  }, [camera, height, intensity, kernelSize, luminanceSmoothing, luminanceThreshold, scene, width, height, mipmapBlur, radius, levels]);
-  var api = React.useContext(selectionContext);
-  React.useEffect(function () {
+  }, [scene, camera, luminanceThreshold, luminanceSmoothing, intensity, width, height, kernelSize, mipmapBlur, props]);
+  var api = React$1.useContext(selectionContext);
+  React$1.useEffect(function () {
     // Do not allow array selection if declarative selection is active
     // TODO: array selection should probably be deprecated altogether
     if (!api && selection) {
@@ -576,12 +528,12 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
         invalidate();
       };
     }
-  }, [effect, selection, api]);
-  React.useEffect(function () {
+  }, [effect, selection, api, invalidate]);
+  React$1.useEffect(function () {
     effect.selection.layer = selectionLayer;
     invalidate();
-  }, [effect, selectionLayer]);
-  React.useEffect(function () {
+  }, [effect, invalidate, selectionLayer]);
+  React$1.useEffect(function () {
     if (lights && lights.length > 0) {
       lights.forEach(function (light) {
         return addLight(resolveRef(light), effect);
@@ -594,12 +546,11 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
         invalidate();
       };
     }
-  }, [effect, lights, selectionLayer]);
-  React.useRef();
-  React.useEffect(function () {
+  }, [effect, invalidate, lights, selectionLayer]);
+  React$1.useRef();
+  React$1.useEffect(function () {
     if (api && api.enabled) {
       var _api$selected;
-
       if ((_api$selected = api.selected) != null && _api$selected.length) {
         effect.selection.set(api.selected);
         invalidate();
@@ -609,8 +560,8 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
         };
       }
     }
-  }, [api]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+  }, [api, effect.selection, invalidate]);
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: forwardRef,
     object: effect,
     dispose: null
@@ -619,20 +570,20 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
 
 var Sepia = wrapEffect(postprocessing.SepiaEffect);
 
-var SSAO = /*#__PURE__*/React.forwardRef(function SSAO(props, ref) {
-  var _useContext = React.useContext(EffectComposerContext),
-      camera = _useContext.camera,
-      normalPass = _useContext.normalPass,
-      downSamplingPass = _useContext.downSamplingPass,
-      resolutionScale = _useContext.resolutionScale;
+// first two args are camera and texture
 
-  var effect = React.useMemo(function () {
+var SSAO = /*#__PURE__*/React$1.forwardRef(function SSAO(props, ref) {
+  var _useContext = React$1.useContext(EffectComposerContext),
+    camera = _useContext.camera,
+    normalPass = _useContext.normalPass,
+    downSamplingPass = _useContext.downSamplingPass,
+    resolutionScale = _useContext.resolutionScale;
+  var effect = React$1.useMemo(function () {
     if (normalPass === null && downSamplingPass === null) {
       console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.');
-      return null;
+      return {};
     }
-
-    return new postprocessing.SSAOEffect(camera, normalPass && !downSamplingPass ? normalPass.texture : null, _extends__default["default"]({
+    return new postprocessing.SSAOEffect(camera, normalPass && !downSamplingPass ? normalPass.texture : null, _extends({
       blendFunction: postprocessing.BlendFunction.MULTIPLY,
       samples: 30,
       rings: 4,
@@ -642,56 +593,40 @@ var SSAO = /*#__PURE__*/React.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,
       depthAwareUpsampling: true
     }, props));
   }, [camera, normalPass, props]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+  return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
   });
 });
 
-var SMAA = /*#__PURE__*/React.forwardRef(function SMAA(_ref, ref) {
-  var _ref$preset = _ref.preset,
-      preset = _ref$preset === void 0 ? postprocessing.SMAAPreset.HIGH : _ref$preset,
-      _ref$edgeDetectionMod = _ref.edgeDetectionMode,
-      edgeDetectionMode = _ref$edgeDetectionMod === void 0 ? postprocessing.EdgeDetectionMode.COLOR : _ref$edgeDetectionMod;
-  var smaaProps = fiber.useLoader(postprocessing.SMAAImageLoader, '');
-  var effect = React.useMemo(function () {
-    return _construct__default["default"](postprocessing.SMAAEffect, smaaProps.concat([preset, edgeDetectionMode]));
-  }, [smaaProps, preset, edgeDetectionMode]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
-    ref: ref,
-    object: effect,
-    dispose: null
-  });
-});
+var SMAA = wrapEffect(postprocessing.SMAAEffect);
 
 var _excluded$2 = ["textureSrc", "texture"];
-var Texture = /*#__PURE__*/React.forwardRef(function Texture(_ref, ref) {
+var Texture = /*#__PURE__*/React$1.forwardRef(function Texture(_ref, ref) {
   var textureSrc = _ref.textureSrc,
-      texture = _ref.texture,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
-
+    texture = _ref.texture,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var t = fiber.useLoader(THREE.TextureLoader, textureSrc);
-  React.useLayoutEffect(function () {
+  React$1.useLayoutEffect(function () {
     t.encoding = THREE.sRGBEncoding;
     t.wrapS = t.wrapT = THREE.RepeatWrapping;
   }, [t]);
-  var effect = React.useMemo(function () {
-    return new postprocessing.TextureEffect(_extends__default["default"]({}, props, {
+  var effect = React$1.useMemo(function () {
+    return new postprocessing.TextureEffect(_extends({}, props, {
       texture: t || texture
     }));
   }, [props, t, texture]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+  return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -705,23 +640,22 @@ var Vignette = wrapEffect(postprocessing.VignetteEffect);
 var ShockWave = wrapEffect(postprocessing.ShockWaveEffect);
 
 var _excluded$1 = ["lut", "tetrahedralInterpolation"];
-var LUT = /*#__PURE__*/React.forwardRef(function LUT(_ref, ref) {
+var LUT = /*#__PURE__*/React$1.forwardRef(function LUT(_ref, ref) {
   var lut = _ref.lut,
-      tetrahedralInterpolation = _ref.tetrahedralInterpolation,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
-
+    tetrahedralInterpolation = _ref.tetrahedralInterpolation,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var effect = React$1.useMemo(function () {
+    return new postprocessing.LUT3DEffect(lut, props);
+  }, [lut, props]);
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
   });
-  var effect = React.useMemo(function () {
-    return new postprocessing.LUTEffect(lut, props);
-  }, [lut, props]);
-  React.useLayoutEffect(function () {
-    if (lut) effect.setLUT(lut);
-    if (tetrahedralInterpolation) effect.setTetrahedralInterpolationEnabled(tetrahedralInterpolation);
+  React$1.useLayoutEffect(function () {
+    if (tetrahedralInterpolation) effect.tetrahedralInterpolation = tetrahedralInterpolation;
+    if (lut) effect.lut = lut;
     invalidate();
-  }, [effect, lut, tetrahedralInterpolation]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+  }, [effect, invalidate, lut, tetrahedralInterpolation]);
+  return /*#__PURE__*/React$1.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -736,69 +670,60 @@ var TiltShiftShader = {
   fragmentShader: "\n\n    // original shader by Evan Wallace\n\n    #define MAX_ITERATIONS 100\n\n    uniform float blur;\n    uniform float taper;\n    uniform vec2 start;\n    uniform vec2 end;\n    uniform vec2 direction;\n    uniform int samples;\n\n    float random(vec3 scale, float seed) {\n        /* use the fragment position for a different seed per-pixel */\n        return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);\n    }\n\n    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n        vec4 color = vec4(0.0);\n        float total = 0.0;\n        vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);\n        vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);\n        float f_samples = float(samples);\n        float half_samples = f_samples / 2.0;\n\n        // use screen diagonal to normalize blur radii\n        float maxScreenDistance = distance(vec2(0.0), resolution); // diagonal distance\n        float gradientRadius = taper * (maxScreenDistance);\n        float blurRadius = blur * (maxScreenDistance / 16.0);\n\n        /* randomize the lookup values to hide the fixed number of samples */\n        float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);\n        vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));\n        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradientRadius) * blurRadius;\n\n        #pragma unroll_loop_start\n        for (int i = 0; i <= MAX_ITERATIONS; i++) {\n            if (i >= samples) { break; } // return early if over sample count\n            float f_i = float(i);\n            float s_i = -half_samples + f_i;\n            float percent = (s_i + offset - 0.5) / half_samples;\n            float weight = 1.0 - abs(percent);\n            vec4 sample_i = texture2D(inputBuffer, uv + normalize(direction) / resolution * percent * radius);\n            /* switch to pre-multiplied alpha to correctly blur transparent images */\n            sample_i.rgb *= sample_i.a;\n            color += sample_i * weight;\n            total += weight;\n        }\n        #pragma unroll_loop_end\n\n        outputColor = color / total;\n\n        /* switch back from pre-multiplied alpha */\n        outputColor.rgb /= outputColor.a + 0.00001;\n    }\n    "
 };
 var TiltShiftEffect = /*#__PURE__*/function (_Effect) {
-  _inheritsLoose__default["default"](TiltShiftEffect, _Effect);
-
+  _inheritsLoose(TiltShiftEffect, _Effect);
   function TiltShiftEffect(_temp) {
     var _ref = _temp === void 0 ? {} : _temp,
-        _ref$blendFunction = _ref.blendFunction,
-        blendFunction = _ref$blendFunction === void 0 ? postprocessing.BlendFunction.NORMAL : _ref$blendFunction,
-        _ref$blur = _ref.blur,
-        blur = _ref$blur === void 0 ? 0.15 : _ref$blur,
-        _ref$taper = _ref.taper,
-        taper = _ref$taper === void 0 ? 0.5 : _ref$taper,
-        _ref$start = _ref.start,
-        start = _ref$start === void 0 ? [0.5, 0.0] : _ref$start,
-        _ref$end = _ref.end,
-        end = _ref$end === void 0 ? [0.5, 1.0] : _ref$end,
-        _ref$samples = _ref.samples,
-        samples = _ref$samples === void 0 ? 10.0 : _ref$samples,
-        _ref$direction = _ref.direction,
-        direction = _ref$direction === void 0 ? [1, 1] : _ref$direction;
-
+      _ref$blendFunction = _ref.blendFunction,
+      blendFunction = _ref$blendFunction === void 0 ? postprocessing.BlendFunction.NORMAL : _ref$blendFunction,
+      _ref$blur = _ref.blur,
+      blur = _ref$blur === void 0 ? 0.15 : _ref$blur,
+      _ref$taper = _ref.taper,
+      taper = _ref$taper === void 0 ? 0.5 : _ref$taper,
+      _ref$start = _ref.start,
+      start = _ref$start === void 0 ? [0.5, 0.0] : _ref$start,
+      _ref$end = _ref.end,
+      end = _ref$end === void 0 ? [0.5, 1.0] : _ref$end,
+      _ref$samples = _ref.samples,
+      samples = _ref$samples === void 0 ? 10.0 : _ref$samples,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? [1, 1] : _ref$direction;
     return _Effect.call(this, 'TiltShiftEffect', TiltShiftShader.fragmentShader, {
       blendFunction: blendFunction,
       attributes: postprocessing.EffectAttribute.CONVOLUTION,
       uniforms: new Map([['blur', new THREE.Uniform(blur)], ['taper', new THREE.Uniform(taper)], ['start', new THREE.Uniform(start)], ['end', new THREE.Uniform(end)], ['samples', new THREE.Uniform(samples)], ['direction', new THREE.Uniform(direction)]])
     }) || this;
   }
-
   return TiltShiftEffect;
 }(postprocessing.Effect);
-var TiltShift2 = wrapEffect(TiltShiftEffect);
+var TiltShift2 = wrapEffect(TiltShiftEffect, {
+  blendFunction: postprocessing.BlendFunction.NORMAL
+});
 
 var _excluded = ["ENABLE_BLUR", "USE_MRT"];
 
-var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
-  var _ref$ENABLE_BLUR = _ref.ENABLE_BLUR,
-      ENABLE_BLUR = _ref$ENABLE_BLUR === void 0 ? true : _ref$ENABLE_BLUR,
-      _ref$USE_MRT = _ref.USE_MRT,
-      USE_MRT = _ref$USE_MRT === void 0 ? true : _ref$USE_MRT,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded);
+// first two args are camera and texture
 
+var SSR = /*#__PURE__*/React$1.forwardRef(function SSR(_ref, ref) {
+  var _ref$ENABLE_BLUR = _ref.ENABLE_BLUR,
+    ENABLE_BLUR = _ref$ENABLE_BLUR === void 0 ? true : _ref$ENABLE_BLUR,
+    _ref$USE_MRT = _ref.USE_MRT,
+    USE_MRT = _ref$USE_MRT === void 0 ? true : _ref$USE_MRT,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var _useThree = fiber.useThree(),
-      invalidate = _useThree.invalidate;
-
-  var _useContext = React.useContext(EffectComposerContext),
-      scene = _useContext.scene,
-      camera = _useContext.camera;
-
-  var effect = React.useMemo(function () {
-    return new screenSpaceReflections.SSREffect(scene, camera, _extends__default["default"]({
+    invalidate = _useThree.invalidate;
+  var _useContext = React$1.useContext(EffectComposerContext),
+    scene = _useContext.scene,
+    camera = _useContext.camera;
+  var effect = React$1.useMemo(function () {
+    return new screenSpaceReflections.SSREffect(scene, camera, _extends({
       ENABLE_BLUR: ENABLE_BLUR,
       USE_MRT: USE_MRT
     }, props));
-  }, [screenSpaceReflections.SSREffect, scene, camera, ENABLE_BLUR, USE_MRT]);
-  React.useLayoutEffect(function () {
-    Object.keys(props).forEach(function (key) {
-      return effect[key] = props[key];
-    });
-    invalidate();
-  }, [props]);
-  var api = React.useContext(selectionContext);
-  React.useEffect(function () {
+  }, [scene, camera, ENABLE_BLUR, USE_MRT, props]);
+  var api = React$1.useContext(selectionContext);
+  React$1.useEffect(function () {
     if (api && api.enabled) {
       var _api$selected;
-
       if ((_api$selected = api.selected) != null && _api$selected.length) {
         effect.selection.set(api.selected);
         invalidate();
@@ -809,10 +734,10 @@ var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
       }
     }
   }, [api]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+  return /*#__PURE__*/React$1.createElement("primitive", _extends({
     ref: ref,
     object: effect
-  });
+  }, props));
 });
 
 exports.Bloom = Bloom;