@react-three/postprocessing 2.5.0 → 2.5.3

package/README.md

@@ -4,7 +4,7 @@
 [![Downloads](https://img.shields.io/npm/dt/@react-three/postprocessing.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/postprocessing)
 [![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.gg/ZZjjNvJ)
 
-`react-postprocessing` is a [postprocessing](https://github.com/vanruesc/postprocessing) wrapper for [@react-three/fiber](https://github.com/pmndrs/@react-three/fiber). This is not (yet) meant for complex orchestration of effects, but can save you [hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a straight forward effects-chain.
+`react-postprocessing` is a [postprocessing](https://github.com/pmndrs/postprocessing) wrapper for [@react-three/fiber](https://github.com/pmndrs/@react-three/fiber). This is not (yet) meant for complex orchestration of effects, but can save you [hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a straight forward effects-chain.
 
 ```bash
 npm install @react-three/postprocessing
@@ -20,7 +20,7 @@ npm install @react-three/postprocessing
 
 #### Why postprocessing and not three/examples/jsm/postprocessing?
 
-From [https://github.com/vanruesc/postprocessing](https://github.com/vanruesc/postprocessing#performance)
+From [https://github.com/pmndrs/postprocessing](https://github.com/pmndrs/postprocessing#performance)
 
 > This library provides an EffectPass which automatically organizes and merges any given combination of effects. This minimizes the amount of render operations and makes it possible to combine many effects without the performance penalties of traditional pass chaining. Additionally, every effect can choose its own blend function.
 >

package/dist/index.cjs

@@ -10,7 +10,6 @@ var fiber = require('@react-three/fiber');
 var _extends = require('@babel/runtime/helpers/extends');
 var _construct = require('@babel/runtime/helpers/construct');
 var threeStdlib = require('three-stdlib');
-var mergeRefs = require('react-merge-refs');
 var screenSpaceReflections = require('screen-space-reflections');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -19,9 +18,8 @@ var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _construct__default = /*#__PURE__*/_interopDefaultLegacy(_construct);
-var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
 
-var _excluded$8 = ["blendFunction", "opacity"];
+var _excluded$9 = ["blendFunction", "opacity"];
 
 var isRef = function isRef(ref) {
   return !!ref.current;
@@ -38,7 +36,7 @@ var wrapEffect = function wrapEffect(effectImpl, defaultBlendMode) {
   return /*#__PURE__*/React.forwardRef(function Wrap(_ref, ref) {
     var blendFunction = _ref.blendFunction,
         opacity = _ref.opacity,
-        props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$8);
+        props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$9);
 
     var invalidate = fiber.useThree(function (state) {
       return state.invalidate;
@@ -225,11 +223,11 @@ var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/R
   }, children));
 }));
 
-var _excluded$7 = ["target", "depthTexture"];
+var _excluded$8 = ["target", "depthTexture"];
 var DepthOfField = /*#__PURE__*/React.forwardRef(function DepthOfField(_ref, ref) {
   var target = _ref.target,
       depthTexture = _ref.depthTexture,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$7);
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$8);
 
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
@@ -259,11 +257,11 @@ var DepthOfField = /*#__PURE__*/React.forwardRef(function DepthOfField(_ref, ref
 
 var DotScreen = wrapEffect(postprocessing.DotScreenEffect);
 
-var _excluded$6 = ["active"];
+var _excluded$7 = ["active"];
 var Glitch = /*#__PURE__*/React.forwardRef(function Glitch(_ref, ref) {
   var _ref$active = _ref.active,
       active = _ref$active === void 0 ? true : _ref$active,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$6);
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$7);
 
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
@@ -303,10 +301,10 @@ var GodRays = /*#__PURE__*/React.forwardRef(function GodRays(props, ref) {
   });
 });
 
-var _excluded$5 = ["size"];
+var _excluded$6 = ["size"];
 var Grid = /*#__PURE__*/React.forwardRef(function Grid(_ref, ref) {
   var size = _ref.size,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$6);
 
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
@@ -329,7 +327,7 @@ var HueSaturation = wrapEffect(postprocessing.HueSaturationEffect);
 
 var Noise = wrapEffect(postprocessing.NoiseEffect, postprocessing.BlendFunction.COLOR_DODGE);
 
-var _excluded$4 = ["enabled", "children"];
+var _excluded$5 = ["enabled", "children"];
 var selectionContext = /*#__PURE__*/React.createContext(null);
 function Selection(_ref) {
   var children = _ref.children,
@@ -355,7 +353,7 @@ 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$4);
+      props = _objectWithoutPropertiesLoose__default["default"](_ref2, _excluded$5);
 
   var group = React.useRef(null);
   var api = React.useContext(selectionContext);
@@ -387,7 +385,7 @@ function Select(_ref2) {
   }, props), children);
 }
 
-var _excluded$3 = ["selection", "selectionLayer", "blendFunction", "patternTexture", "edgeStrength", "pulseSpeed", "visibleEdgeColor", "hiddenEdgeColor", "width", "height", "kernelSize", "blur", "xRay"];
+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 _ref$selection = _ref.selection,
       selection = _ref$selection === void 0 ? [] : _ref$selection,
@@ -403,8 +401,8 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
       height = _ref.height,
       kernelSize = _ref.kernelSize,
       blur = _ref.blur,
-      xRay = _ref.xRay;
-      _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$3);
+      xRay = _ref.xRay,
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$4);
 
   var invalidate = fiber.useThree(function (state) {
     return state.invalidate;
@@ -415,7 +413,7 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
       camera = _useContext.camera;
 
   var effect = React.useMemo(function () {
-    return new postprocessing.OutlineEffect(scene, camera, {
+    return new postprocessing.OutlineEffect(scene, camera, _extends__default["default"]({
       blendFunction: blendFunction,
       patternTexture: patternTexture,
       edgeStrength: edgeStrength,
@@ -427,7 +425,7 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
       kernelSize: kernelSize,
       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 () {
@@ -446,27 +444,23 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
     effect.selectionLayer = selectionLayer;
     invalidate();
   }, [effect, selectionLayer]);
-  var ref = React.useRef();
+  React.useRef();
   React.useEffect(function () {
     if (api && api.enabled) {
       var _api$selected;
 
-      var _effect = ref.current;
-
       if ((_api$selected = api.selected) != null && _api$selected.length) {
-        _effect.selection.set(api.selected);
-
+        effect.selection.set(api.selected);
         invalidate();
         return function () {
-          _effect.selection.clear();
-
+          effect.selection.clear();
           invalidate();
         };
       }
     }
   }, [api]);
   return /*#__PURE__*/React__default["default"].createElement("primitive", {
-    ref: mergeRefs__default["default"]([ref, forwardRef]),
+    ref: forwardRef,
     object: effect
   });
 });
@@ -488,6 +482,8 @@ var Pixelation = /*#__PURE__*/React.forwardRef(function Pixelation(_ref, ref) {
 
 var Scanline = wrapEffect(postprocessing.ScanlineEffect, postprocessing.BlendFunction.OVERLAY);
 
+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);
 };
@@ -508,7 +504,9 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
       intensity = _ref.intensity,
       width = _ref.width,
       height = _ref.height,
-      kernelSize = _ref.kernelSize;
+      kernelSize = _ref.kernelSize,
+      mipmapBlur = _ref.mipmapBlur,
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$3);
 
   if (lights.length === 0) {
     console.warn('SelectiveBloom requires lights to work.');
@@ -523,16 +521,17 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
       camera = _useContext.camera;
 
   var effect = React.useMemo(function () {
-    return new postprocessing.SelectiveBloomEffect(scene, camera, {
+    return new postprocessing.SelectiveBloomEffect(scene, camera, _extends__default["default"]({
       blendFunction: postprocessing.BlendFunction.SCREEN,
       luminanceThreshold: luminanceThreshold,
       luminanceSmoothing: luminanceSmoothing,
       intensity: intensity,
       width: width,
       height: height,
-      kernelSize: kernelSize
-    });
-  }, [camera, height, intensity, kernelSize, luminanceSmoothing, luminanceThreshold, scene, width]);
+      kernelSize: kernelSize,
+      mipmapBlur: mipmapBlur
+    }, props));
+  }, [camera, height, intensity, kernelSize, luminanceSmoothing, luminanceThreshold, scene, width, height, mipmapBlur]);
   var api = React.useContext(selectionContext);
   React.useEffect(function () {
     // Do not allow array selection if declarative selection is active
@@ -564,27 +563,23 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
       };
     }
   }, [effect, lights, selectionLayer]);
-  var ref = React.useRef();
+  React.useRef();
   React.useEffect(function () {
     if (api && api.enabled) {
       var _api$selected;
 
-      var _effect = ref.current;
-
       if ((_api$selected = api.selected) != null && _api$selected.length) {
-        _effect.selection.set(api.selected);
-
+        effect.selection.set(api.selected);
         invalidate();
         return function () {
-          _effect.selection.clear();
-
+          effect.selection.clear();
           invalidate();
         };
       }
     }
   }, [api]);
   return /*#__PURE__*/React__default["default"].createElement("primitive", {
-    ref: mergeRefs__default["default"]([ref, forwardRef]),
+    ref: forwardRef,
     object: effect,
     dispose: null
   });
@@ -729,6 +724,21 @@ var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
     });
     invalidate();
   }, [props]);
+  var api = React.useContext(selectionContext);
+  React.useEffect(function () {
+    if (api && api.enabled) {
+      var _api$selected;
+
+      if ((_api$selected = api.selected) != null && _api$selected.length) {
+        effect.selection.set(api.selected);
+        invalidate();
+        return function () {
+          effect.selection.clear();
+          invalidate();
+        };
+      }
+    }
+  }, [api]);
   return /*#__PURE__*/React__default["default"].createElement("primitive", {
     ref: ref,
     object: effect

package/dist/index.js

@@ -3,7 +3,6 @@ import React, { forwardRef, useMemo, useLayoutEffect, createContext, useEffect,
 import { Vector2, HalfFloatType, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping } from 'three';
 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 { SSREffect } from 'screen-space-reflections';
 
@@ -347,7 +346,8 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
     height,
     kernelSize,
     blur,
-    xRay
+    xRay,
+    ...props
   }), [blendFunction, blur, camera, edgeStrength, height, hiddenEdgeColor, kernelSize, patternTexture, pulseSpeed, scene, visibleEdgeColor, width, xRay]);
   const api = useContext(selectionContext);
   useEffect(() => {
@@ -366,13 +366,11 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
     effect.selectionLayer = selectionLayer;
     invalidate();
   }, [effect, selectionLayer]);
-  const ref = useRef();
+  useRef();
   useEffect(() => {
     if (api && api.enabled) {
       var _api$selected;
 
-      const effect = ref.current;
-
       if ((_api$selected = api.selected) != null && _api$selected.length) {
         effect.selection.set(api.selected);
         invalidate();
@@ -384,7 +382,7 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
     }
   }, [api]);
   return /*#__PURE__*/React.createElement("primitive", {
-    ref: mergeRefs([ref, forwardRef]),
+    ref: forwardRef,
     object: effect
   });
 });
@@ -419,7 +417,9 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
     intensity,
     width,
     height,
-    kernelSize
+    kernelSize,
+    mipmapBlur,
+    ...props
   } = _ref;
 
   if (lights.length === 0) {
@@ -438,8 +438,10 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
     intensity,
     width,
     height,
-    kernelSize
-  }), [camera, height, intensity, kernelSize, luminanceSmoothing, luminanceThreshold, scene, width]);
+    kernelSize,
+    mipmapBlur,
+    ...props
+  }), [camera, height, intensity, kernelSize, luminanceSmoothing, luminanceThreshold, scene, width, height, mipmapBlur]);
   const api = useContext(selectionContext);
   useEffect(() => {
     // Do not allow array selection if declarative selection is active
@@ -467,13 +469,11 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
       };
     }
   }, [effect, lights, selectionLayer]);
-  const ref = useRef();
+  useRef();
   useEffect(() => {
     if (api && api.enabled) {
       var _api$selected;
 
-      const effect = ref.current;
-
       if ((_api$selected = api.selected) != null && _api$selected.length) {
         effect.selection.set(api.selected);
         invalidate();
@@ -485,7 +485,7 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
     }
   }, [api]);
   return /*#__PURE__*/React.createElement("primitive", {
-    ref: mergeRefs([ref, forwardRef]),
+    ref: forwardRef,
     object: effect,
     dispose: null
   });
@@ -617,6 +617,21 @@ const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
     Object.keys(props).forEach(key => effect[key] = props[key]);
     invalidate();
   }, [props]);
+  const api = useContext(selectionContext);
+  useEffect(() => {
+    if (api && api.enabled) {
+      var _api$selected;
+
+      if ((_api$selected = api.selected) != null && _api$selected.length) {
+        effect.selection.set(api.selected);
+        invalidate();
+        return () => {
+          effect.selection.clear();
+          invalidate();
+        };
+      }
+    }
+  }, [api]);
   return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,
     object: effect

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.5.0",
+  "version": "2.5.3",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -41,7 +41,7 @@
   "dependencies": {
     "postprocessing": "^6.28.4",
     "react-merge-refs": "^1.1.0",
-    "screen-space-reflections": "^2.0.4",
+    "screen-space-reflections": "^2.0.6",
     "three-stdlib": "^2.8.11"
   },
   "devDependencies": {