@react-three/postprocessing 2.2.1 → 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/effects/Outline.d.ts

@@ -1,14 +1,13 @@
 import { OutlineEffect } from 'postprocessing';
 import React, { MutableRefObject } from 'react';
 import { Object3D } from 'three';
-import { BlendFunction } from 'postprocessing';
 declare type ObjectRef = MutableRefObject<Object3D>;
 export declare type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] & Partial<{
     selection: Object3D | Object3D[] | ObjectRef | ObjectRef[];
     selectionLayer: number;
 }>;
 export declare const Outline: React.ForwardRefExoticComponent<Partial<{
-    blendFunction: BlendFunction;
+    blendFunction: import("postprocessing").BlendFunction;
     patternTexture: number;
     edgeStrength: number;
     pulseSpeed: number;

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,
@@ -375,30 +392,23 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
       selection = _ref$selection === void 0 ? [] : _ref$selection,
       _ref$selectionLayer = _ref.selectionLayer,
       selectionLayer = _ref$selectionLayer === void 0 ? 10 : _ref$selectionLayer,
-      _ref$blendFunction = _ref.blendFunction,
-      blendFunction = _ref$blendFunction === void 0 ? postprocessing.BlendFunction.SCREEN : _ref$blendFunction,
-      _ref$patternTexture = _ref.patternTexture,
-      patternTexture = _ref$patternTexture === void 0 ? null : _ref$patternTexture,
-      _ref$edgeStrength = _ref.edgeStrength,
-      edgeStrength = _ref$edgeStrength === void 0 ? 1 : _ref$edgeStrength,
-      _ref$pulseSpeed = _ref.pulseSpeed,
-      pulseSpeed = _ref$pulseSpeed === void 0 ? 0 : _ref$pulseSpeed,
-      _ref$visibleEdgeColor = _ref.visibleEdgeColor,
-      visibleEdgeColor = _ref$visibleEdgeColor === void 0 ? 0xffffff : _ref$visibleEdgeColor,
-      _ref$hiddenEdgeColor = _ref.hiddenEdgeColor,
-      hiddenEdgeColor = _ref$hiddenEdgeColor === void 0 ? 0xffffff : _ref$hiddenEdgeColor,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? postprocessing.Resizer.AUTO_SIZE : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? postprocessing.Resizer.AUTO_SIZE : _ref$height,
-      _ref$kernelSize = _ref.kernelSize,
-      kernelSize = _ref$kernelSize === void 0 ? postprocessing.KernelSize.VERY_SMALL : _ref$kernelSize,
-      _ref$blur = _ref.blur,
-      blur = _ref$blur === void 0 ? false : _ref$blur,
-      _ref$xRay = _ref.xRay,
-      xRay = _ref$xRay === void 0 ? true : _ref$xRay;
+      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;
       _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;
@@ -421,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();
@@ -440,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();
         };
       }
     }
@@ -495,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;
@@ -513,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]);
@@ -544,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();
         };
       }
     }
@@ -644,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

@@ -1,4 +1,4 @@
-import { BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$1, RenderPass, NormalPass, EffectPass, DepthOfFieldEffect, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, Resizer, KernelSize, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAPreset, EdgeDetectionMode, SMAAImageLoader, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUTEffect } from 'postprocessing';
+import { BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$1, RenderPass, NormalPass, EffectPass, DepthOfFieldEffect, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAPreset, EdgeDetectionMode, SMAAImageLoader, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUTEffect } from 'postprocessing';
 import React, { forwardRef, useMemo, useLayoutEffect, createContext, useRef, useImperativeHandle, useContext, useState, useEffect } from 'react';
 import * as THREE from 'three';
 import { Vector2, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping } from 'three';
@@ -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,
@@ -294,19 +302,20 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
   let {
     selection = [],
     selectionLayer = 10,
-    blendFunction = BlendFunction.SCREEN,
-    patternTexture = null,
-    edgeStrength = 1,
-    pulseSpeed = 0,
-    visibleEdgeColor = 0xffffff,
-    hiddenEdgeColor = 0xffffff,
-    width = Resizer.AUTO_SIZE,
-    height = Resizer.AUTO_SIZE,
-    kernelSize = KernelSize.VERY_SMALL,
-    blur = false,
-    xRay = true,
+    blendFunction,
+    patternTexture,
+    edgeStrength,
+    pulseSpeed,
+    visibleEdgeColor,
+    hiddenEdgeColor,
+    width,
+    height,
+    kernelSize,
+    blur,
+    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.1",
+  "version": "2.2.4",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.21",
-    "postprocessing": "^6.24.1",
+    "postprocessing": "6.24.1",
     "react-merge-refs": "^1.1.0",
     "three-stdlib": "^2.8.6"
   },