@react-three/postprocessing 2.2.3 → 2.2.6

package/README.md

@@ -60,7 +60,7 @@ function App() {
 
 #### EffectComposer
 
-The EffectComposer is must wrap all your effects. It will manage them for you.
+The EffectComposer must wrap all your effects. It will manage them for you.
 
 ```jsx
 <EffectComposer
@@ -80,7 +80,7 @@ The EffectComposer is must wrap all your effects. It will manage them for you.
 
 #### Selection/Select
 
-Some effects, like Outline or SelectiveBloom can select specific objects. To manage this in a declarative scene with just references can be messy, so we have two components that help you.
+Some effects, like Outline or SelectiveBloom can select specific objects. To manage this in a declarative scene with just references can be messy, especially when things have to be grouped. These two components take care of it:
 
 ```jsx
 <Selection
@@ -94,7 +94,7 @@ Some effects, like Outline or SelectiveBloom can select specific objects. To man
 >
 ```
 
-You wrap everything into a selection, and then select object or groups. Effects working with selections will acknowledge the selections.
+You wrap everything into a selection, this one holds all the selections. Now you can individually select objects or groups. Effects that support selections (for instance `Outline`) will acknowledge it.
 
 ```jsx
 <Selection>

package/dist/index.cjs.js

@@ -6,12 +6,11 @@ var postprocessing = require('postprocessing');
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var React = require('react');
 var THREE = require('three');
+var fiber = require('@react-three/fiber');
 var _extends = require('@babel/runtime/helpers/extends');
 var _construct = require('@babel/runtime/helpers/construct');
-var fiber = require('@react-three/fiber');
 var threeStdlib = require('three-stdlib');
 var mergeRefs = require('react-merge-refs');
-var without = require('lodash-es/without');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,7 +38,6 @@ var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _construct__default = /*#__PURE__*/_interopDefaultLegacy(_construct);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
-var without__default = /*#__PURE__*/_interopDefaultLegacy(without);
 
 var _excluded$7 = ["blendFunction", "opacity"];
 
@@ -60,12 +58,16 @@ var wrapEffect = function wrapEffect(effectImpl, defaultBlendMode) {
         opacity = _ref.opacity,
         props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$7);
 
+    var invalidate = fiber.useThree(function (state) {
+      return state.invalidate;
+    });
     var effect = React.useMemo(function () {
       return new effectImpl(props);
     }, [props]);
     React.useLayoutEffect(function () {
       effect.blendMode.blendFunction = blendFunction || defaultBlendMode;
       if (opacity !== undefined) effect.blendMode.opacity.value = opacity;
+      invalidate();
     }, [blendFunction, effect.blendMode, opacity]);
     return /*#__PURE__*/React__default["default"].createElement("primitive", {
       ref: ref,
@@ -228,6 +230,10 @@ var DepthOfField = /*#__PURE__*/React.forwardRef(function DepthOfField(_ref, ref
       depthTexture = _ref.depthTexture,
       props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$6);
 
+  var invalidate = fiber.useThree(function (state) {
+    return state.invalidate;
+  });
+
   var _useContext = React.useContext(EffectComposerContext),
       camera = _useContext.camera;
 
@@ -241,6 +247,7 @@ var DepthOfField = /*#__PURE__*/React.forwardRef(function DepthOfField(_ref, ref
     }
 
     if (depthTexture) effect.setDepthTexture(depthTexture.texture, depthTexture.packing);
+    invalidate();
   }, [target, depthTexture, effect]);
   return /*#__PURE__*/React__default["default"].createElement("primitive", {
     ref: ref,
@@ -257,6 +264,9 @@ var Glitch = /*#__PURE__*/React.forwardRef(function Glitch(_ref, ref) {
       active = _ref$active === void 0 ? true : _ref$active,
       props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$5);
 
+  var invalidate = fiber.useThree(function (state) {
+    return state.invalidate;
+  });
   var delay = useVector2(props, 'delay');
   var duration = useVector2(props, 'duration');
   var strength = useVector2(props, 'strength');
@@ -269,6 +279,7 @@ var Glitch = /*#__PURE__*/React.forwardRef(function Glitch(_ref, ref) {
   }, [delay, duration, props, strength]);
   React.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", {
     ref: ref,
@@ -296,11 +307,15 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(_ref, ref) {
   var size = _ref.size,
       props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$4);
 
+  var invalidate = fiber.useThree(function (state) {
+    return state.invalidate;
+  });
   var effect = React.useMemo(function () {
     return new postprocessing.GridEffect(props);
   }, [props]);
   React.useLayoutEffect(function () {
     if (size) effect.setSize(size.width, size.height);
+    invalidate();
   }, [effect, size]);
   return /*#__PURE__*/React__default["default"].createElement("primitive", {
     ref: ref,
@@ -358,7 +373,9 @@ function Select(_ref2) {
         });
         return function () {
           api.select(function (state) {
-            return without__default["default"].apply(void 0, [state].concat(current));
+            return state.filter(function (selected) {
+              return !current.includes(selected);
+            });
           });
         };
       }
@@ -388,6 +405,10 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
       xRay = _ref.xRay;
       _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
 
+  var invalidate = fiber.useThree(function (state) {
+    return state.invalidate;
+  });
+
   var _useContext = React.useContext(EffectComposerContext),
       scene = _useContext.scene,
       camera = _useContext.camera;
@@ -407,18 +428,23 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
       xRay: xRay
     });
   }, [blendFunction, blur, camera, edgeStrength, height, hiddenEdgeColor, kernelSize, patternTexture, pulseSpeed, scene, visibleEdgeColor, width, xRay]);
+  var api = React.useContext(selectionContext);
   React.useEffect(function () {
-    if (selection) {
+    // Do not allow array selection if declarative selection is active
+    // TODO: array selection should probably be deprecated altogether
+    if (!api && selection) {
       effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
+      invalidate();
       return function () {
-        return void effect.selection.clear();
+        effect.selection.clear();
+        invalidate();
       };
     }
-  }, [effect, selection]);
+  }, [effect, selection, api]);
   React.useEffect(function () {
     effect.selectionLayer = selectionLayer;
+    invalidate();
   }, [effect, selectionLayer]);
-  var api = React.useContext(selectionContext);
   var ref = React.useRef();
   React.useEffect(function () {
     if (api && api.enabled) {
@@ -429,8 +455,11 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
       if ((_api$selected = api.selected) != null && _api$selected.length) {
         _effect.selection.set(api.selected);
 
+        invalidate();
         return function () {
-          return void _effect.selection.clear();
+          _effect.selection.clear();
+
+          invalidate();
         };
       }
     }
@@ -484,6 +513,10 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
     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;
@@ -499,30 +532,37 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
       kernelSize: kernelSize
     });
   }, [camera, height, intensity, kernelSize, luminanceSmoothing, luminanceThreshold, scene, width]);
+  var api = React.useContext(selectionContext);
   React.useEffect(function () {
-    if (selection) {
+    // Do not allow array selection if declarative selection is active
+    // TODO: array selection should probably be deprecated altogether
+    if (!api && selection) {
       effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
+      invalidate();
       return function () {
-        return void effect.selection.clear();
+        effect.selection.clear();
+        invalidate();
       };
     }
-  }, [effect, selection]);
+  }, [effect, selection, api]);
   React.useEffect(function () {
     effect.selection.layer = selectionLayer;
+    invalidate();
   }, [effect, selectionLayer]);
   React.useEffect(function () {
     if (lights && lights.length > 0) {
       lights.forEach(function (light) {
         return addLight(resolveRef(light), effect);
       });
+      invalidate();
       return function () {
-        return lights.forEach(function (light) {
+        lights.forEach(function (light) {
           return removeLight(resolveRef(light), effect);
         });
+        invalidate();
       };
     }
   }, [effect, lights, selectionLayer]);
-  var api = React.useContext(selectionContext);
   var ref = React.useRef();
   React.useEffect(function () {
     if (api && api.enabled) {
@@ -533,8 +573,11 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
       if ((_api$selected = api.selected) != null && _api$selected.length) {
         _effect.selection.set(api.selected);
 
+        invalidate();
         return function () {
-          return void _effect.selection.clear();
+          _effect.selection.clear();
+
+          invalidate();
         };
       }
     }
@@ -633,12 +676,16 @@ var LUT = /*#__PURE__*/React.forwardRef(function LUT(_ref, ref) {
       tetrahedralInterpolation = _ref.tetrahedralInterpolation,
       props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded);
 
+  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);
+    invalidate();
   }, [effect, lut, tetrahedralInterpolation]);
   return /*#__PURE__*/React__default["default"].createElement("primitive", {
     ref: ref,

package/dist/index.js

@@ -6,7 +6,6 @@ import { useThree, useFrame, useLoader } from '@react-three/fiber';
 import { isWebGL2Available } from 'three-stdlib';
 import mergeRefs from 'react-merge-refs';
 import _extends from '@babel/runtime/helpers/esm/extends';
-import without from 'lodash-es/without';
 
 const isRef = ref => !!ref.current;
 
@@ -22,10 +21,12 @@ const wrapEffect = function (effectImpl, defaultBlendMode) {
       opacity,
       ...props
     } = _ref;
+    const invalidate = useThree(state => state.invalidate);
     const effect = useMemo(() => new effectImpl(props), [props]);
     useLayoutEffect(() => {
       effect.blendMode.blendFunction = blendFunction || defaultBlendMode;
       if (opacity !== undefined) effect.blendMode.opacity.value = opacity;
+      invalidate();
     }, [blendFunction, effect.blendMode, opacity]);
     return /*#__PURE__*/React.createElement("primitive", {
       ref: ref,
@@ -168,6 +169,7 @@ const DepthOfField = /*#__PURE__*/forwardRef(function DepthOfField(_ref, ref) {
     depthTexture,
     ...props
   } = _ref;
+  const invalidate = useThree(state => state.invalidate);
   const {
     camera
   } = useContext(EffectComposerContext);
@@ -179,6 +181,7 @@ const DepthOfField = /*#__PURE__*/forwardRef(function DepthOfField(_ref, ref) {
     }
 
     if (depthTexture) effect.setDepthTexture(depthTexture.texture, depthTexture.packing);
+    invalidate();
   }, [target, depthTexture, effect]);
   return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,
@@ -194,6 +197,7 @@ const Glitch = /*#__PURE__*/forwardRef(function Glitch(_ref, ref) {
     active = true,
     ...props
   } = _ref;
+  const invalidate = useThree(state => state.invalidate);
   const delay = useVector2(props, 'delay');
   const duration = useVector2(props, 'duration');
   const strength = useVector2(props, 'strength');
@@ -204,6 +208,7 @@ const Glitch = /*#__PURE__*/forwardRef(function Glitch(_ref, ref) {
   }), [delay, duration, props, strength]);
   useLayoutEffect(() => {
     effect.mode = active ? props.mode || GlitchMode.SPORADIC : GlitchMode.DISABLED;
+    invalidate();
   }, [active, effect, props.mode]);
   return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,
@@ -229,9 +234,11 @@ const Grid = /*#__PURE__*/forwardRef(function Grid(_ref, ref) {
     size,
     ...props
   } = _ref;
+  const invalidate = useThree(state => state.invalidate);
   const effect = useMemo(() => new GridEffect(props), [props]);
   useLayoutEffect(() => {
     if (size) effect.setSize(size.width, size.height);
+    invalidate();
   }, [effect, size]);
   return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,
@@ -280,7 +287,7 @@ function Select(_ref2) {
       if (changed) {
         api.select(state => [...state, ...current]);
         return () => {
-          api.select(state => without(state, ...current));
+          api.select(state => state.filter(selected => !current.includes(selected)));
         };
       }
     }
@@ -307,6 +314,7 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
     xRay,
     ...props
   } = _ref;
+  const invalidate = useThree(state => state.invalidate);
   const {
     scene,
     camera
@@ -324,16 +332,23 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
     blur,
     xRay
   }), [blendFunction, blur, camera, edgeStrength, height, hiddenEdgeColor, kernelSize, patternTexture, pulseSpeed, scene, visibleEdgeColor, width, xRay]);
+  const api = useContext(selectionContext);
   useEffect(() => {
-    if (selection) {
+    // Do not allow array selection if declarative selection is active
+    // TODO: array selection should probably be deprecated altogether
+    if (!api && selection) {
       effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
-      return () => void effect.selection.clear();
+      invalidate();
+      return () => {
+        effect.selection.clear();
+        invalidate();
+      };
     }
-  }, [effect, selection]);
+  }, [effect, selection, api]);
   useEffect(() => {
     effect.selectionLayer = selectionLayer;
+    invalidate();
   }, [effect, selectionLayer]);
-  const api = useContext(selectionContext);
   const ref = useRef();
   useEffect(() => {
     if (api && api.enabled) {
@@ -343,7 +358,11 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
 
       if ((_api$selected = api.selected) != null && _api$selected.length) {
         effect.selection.set(api.selected);
-        return () => void effect.selection.clear();
+        invalidate();
+        return () => {
+          effect.selection.clear();
+          invalidate();
+        };
       }
     }
   }, [api]);
@@ -390,6 +409,7 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
     console.warn('SelectiveBloom requires lights to work.');
   }
 
+  const invalidate = useThree(state => state.invalidate);
   const {
     scene,
     camera
@@ -403,22 +423,33 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
     height,
     kernelSize
   }), [camera, height, intensity, kernelSize, luminanceSmoothing, luminanceThreshold, scene, width]);
+  const api = useContext(selectionContext);
   useEffect(() => {
-    if (selection) {
+    // Do not allow array selection if declarative selection is active
+    // TODO: array selection should probably be deprecated altogether
+    if (!api && selection) {
       effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
-      return () => void effect.selection.clear();
+      invalidate();
+      return () => {
+        effect.selection.clear();
+        invalidate();
+      };
     }
-  }, [effect, selection]);
+  }, [effect, selection, api]);
   useEffect(() => {
     effect.selection.layer = selectionLayer;
+    invalidate();
   }, [effect, selectionLayer]);
   useEffect(() => {
     if (lights && lights.length > 0) {
       lights.forEach(light => addLight(resolveRef(light), effect));
-      return () => lights.forEach(light => removeLight(resolveRef(light), effect));
+      invalidate();
+      return () => {
+        lights.forEach(light => removeLight(resolveRef(light), effect));
+        invalidate();
+      };
     }
   }, [effect, lights, selectionLayer]);
-  const api = useContext(selectionContext);
   const ref = useRef();
   useEffect(() => {
     if (api && api.enabled) {
@@ -428,7 +459,11 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
 
       if ((_api$selected = api.selected) != null && _api$selected.length) {
         effect.selection.set(api.selected);
-        return () => void effect.selection.clear();
+        invalidate();
+        return () => {
+          effect.selection.clear();
+          invalidate();
+        };
       }
     }
   }, [api]);
@@ -523,10 +558,12 @@ const LUT = /*#__PURE__*/forwardRef(function LUT(_ref, ref) {
     tetrahedralInterpolation,
     ...props
   } = _ref;
+  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);
+    invalidate();
   }, [effect, lut, tetrahedralInterpolation]);
   return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.2.3",
+  "version": "2.2.6",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -38,7 +38,6 @@
     "typegen": "tsc --emitDeclarationOnly || true"
   },
   "dependencies": {
-    "lodash-es": "^4.17.21",
     "postprocessing": "6.24.1",
     "react-merge-refs": "^1.1.0",
     "three-stdlib": "^2.8.6"