@react-three/postprocessing 2.2.3 → 2.2.4

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,9 +6,9 @@ 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');
@@ -60,12 +60,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 +232,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 +249,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 +266,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 +281,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 +309,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,
@@ -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;
@@ -410,13 +431,16 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
   React.useEffect(function () {
     if (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]);
   React.useEffect(function () {
     effect.selectionLayer = selectionLayer;
+    invalidate();
   }, [effect, selectionLayer]);
   var api = React.useContext(selectionContext);
   var ref = React.useRef();
@@ -429,8 +453,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 +511,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;
@@ -502,23 +533,28 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
   React.useEffect(function () {
     if (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]);
   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]);
@@ -533,8 +569,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 +672,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

@@ -22,10 +22,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 +170,7 @@ const DepthOfField = /*#__PURE__*/forwardRef(function DepthOfField(_ref, ref) {
     depthTexture,
     ...props
   } = _ref;
+  const invalidate = useThree(state => state.invalidate);
   const {
     camera
   } = useContext(EffectComposerContext);
@@ -179,6 +182,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 +198,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 +209,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 +235,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,
@@ -307,6 +315,7 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
     xRay,
     ...props
   } = _ref;
+  const invalidate = useThree(state => state.invalidate);
   const {
     scene,
     camera
@@ -327,11 +336,16 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
   useEffect(() => {
     if (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]);
   useEffect(() => {
     effect.selectionLayer = selectionLayer;
+    invalidate();
   }, [effect, selectionLayer]);
   const api = useContext(selectionContext);
   const ref = useRef();
@@ -343,7 +357,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 +408,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
@@ -406,16 +425,25 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
   useEffect(() => {
     if (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]);
   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);
@@ -428,7 +456,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 +555,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.4",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",