@react-three/postprocessing 2.1.6 → 2.2.0

package/README.md

@@ -30,7 +30,7 @@ Postprocessing also supports srgb-encoding out of the box, as well as WebGL2 MSA
 
 #### What does it look like?
 
-Well, you can do pretty much anything, but here's an example combining a couple of effects ([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)).
+Here's an example combining a couple of effects ([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)).
 
 <a href="https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?" target="_blank" rel="noopener">
 <img src="bubbles.jpg" alt="Bubbles Demo" />
@@ -56,7 +56,70 @@ function App() {
 }
 ```
 
-#### Documentation
+## Documentation
+
+#### EffectComposer
+
+The EffectComposer is must wrap all your effects. It will manage them for you.
+
+```jsx
+<EffectComposer
+  enabled?: boolean
+  children: JSX.Element | JSX.Element[]
+  depthBuffer?: boolean
+  disableNormalPass?: boolean
+  stencilBuffer?: boolean
+  autoClear?: boolean
+  multisampling?: number
+  frameBufferType?: TextureDataType
+  renderPriority?: number
+  camera?: THREE.Camera
+  scene?: THREE.Scene
+>
+```
+
+#### 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.
+
+```jsx
+<Selection
+  children: JSX.Element | JSX.Element[]
+  enabled?: boolean
+>
+
+<Select
+  children: JSX.Element | JSX.Element[]
+  enabled?: boolean
+>
+```
+
+You wrap everything into a selection, and then select object or groups. Effects working with selections will acknowledge the selections.
+
+```jsx
+<Selection>
+  <EffectComposer>
+    <Outline xRay blur edgeStrength={100} width={1000} />
+  </EffectComposer>
+  <Select enabled>
+    <mesh />
+  </Select>
+</Selection>
+```
+
+Selection can be nested and group multiple object, higher up selection take precence over lower ones. The following for instance will select everything. Remove the outmost `enabled` and only the two mesh group is selected. You can flip the selections or bind them to interactions and state.
+
+```jsx
+<Select enabled>
+  <Select enabled>
+    <mesh />
+    <mesh />
+  </Select>
+  <Select>
+    <mesh />
+  </Select>
+</Select>
+```
 
 - [react-postprocessing exports](https://github.com/pmndrs/react-postprocessing/blob/master/api.md)
 - [postprocessing docs](https://vanruesc.github.io/postprocessing/public/docs/)

package/dist/EffectComposer.d.ts

@@ -21,5 +21,4 @@ export declare type EffectComposerProps = {
     camera?: THREE.Camera;
     scene?: THREE.Scene;
 };
-declare const EffectComposer: React.MemoExoticComponent<React.ForwardRefExoticComponent<EffectComposerProps & React.RefAttributes<unknown>>>;
-export default EffectComposer;
+export declare const EffectComposer: React.MemoExoticComponent<React.ForwardRefExoticComponent<EffectComposerProps & React.RefAttributes<unknown>>>;

package/dist/Selection.d.ts

@@ -0,0 +1,16 @@
+import * as THREE from 'three';
+import React from 'react';
+export declare type Api = {
+    selected: THREE.Object3D[];
+    select: React.Dispatch<React.SetStateAction<THREE.Object3D[]>>;
+    enabled: boolean;
+};
+export declare type SelectApi = JSX.IntrinsicElements['group'] & {
+    enabled?: boolean;
+};
+export declare const selectionContext: React.Context<Api>;
+export declare function Selection({ children, enabled }: {
+    enabled?: boolean;
+    children: React.ReactNode;
+}): JSX.Element;
+export declare function Select({ enabled, children, ...props }: SelectApi): JSX.Element;

package/dist/effects/Outline.d.ts

@@ -1,13 +1,14 @@
 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: import("postprocessing").BlendFunction;
+    blendFunction: BlendFunction;
     patternTexture: number;
     edgeStrength: number;
     pulseSpeed: number;

package/dist/index.cjs.js

@@ -10,6 +10,8 @@ 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 }; }
 
@@ -36,8 +38,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 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$6 = ["blendFunction", "opacity"];
+var _excluded$7 = ["blendFunction", "opacity"];
 
 var isRef = function isRef(ref) {
   return !!ref.current;
@@ -54,7 +58,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$6);
+        props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$7);
 
     var effect = React.useMemo(function () {
       return new effectImpl(props);
@@ -217,13 +221,12 @@ var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/R
     ref: group
   }, children));
 }));
-var EffectComposer$1 = EffectComposer;
 
-var _excluded$5 = ["target", "depthTexture"];
+var _excluded$6 = ["target", "depthTexture"];
 var DepthOfField = /*#__PURE__*/React.forwardRef(function DepthOfField(_ref, ref) {
   var target = _ref.target,
       depthTexture = _ref.depthTexture,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$6);
 
   var _useContext = React.useContext(EffectComposerContext),
       camera = _useContext.camera;
@@ -248,11 +251,11 @@ var DepthOfField = /*#__PURE__*/React.forwardRef(function DepthOfField(_ref, ref
 
 var DotScreen = wrapEffect(postprocessing.DotScreenEffect);
 
-var _excluded$4 = ["active"];
+var _excluded$5 = ["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$4);
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$5);
 
   var delay = useVector2(props, 'delay');
   var duration = useVector2(props, 'duration');
@@ -288,10 +291,10 @@ var GodRays = /*#__PURE__*/React.forwardRef(function GodRays(props, ref) {
   });
 });
 
-var _excluded$3 = ["size"];
+var _excluded$4 = ["size"];
 var Grid = /*#__PURE__*/React.forwardRef(function Grid(_ref, ref) {
   var size = _ref.size,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$3);
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$4);
 
   var effect = React.useMemo(function () {
     return new postprocessing.GridEffect(props);
@@ -310,18 +313,77 @@ var HueSaturation = wrapEffect(postprocessing.HueSaturationEffect);
 
 var Noise = wrapEffect(postprocessing.NoiseEffect, postprocessing.BlendFunction.COLOR_DODGE);
 
+var _excluded$3 = ["enabled", "children"];
+var selectionContext = /*#__PURE__*/React.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 () {
+    return {
+      selected: selected,
+      select: select,
+      enabled: enabled
+    };
+  }, [selected, select, enabled]);
+  return /*#__PURE__*/React__default["default"].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$3);
+
+  var group = React.useRef(null);
+  var api = React.useContext(selectionContext);
+  React.useEffect(function () {
+    if (api && enabled) {
+      var changed = false;
+      var current = [];
+      group.current.traverse(function (o) {
+        o.type === 'Mesh' && current.push(o);
+        if (api.selected.indexOf(o) === -1) changed = true;
+      });
+
+      if (changed) {
+        api.select(function (state) {
+          return [].concat(state, current);
+        });
+        return function () {
+          api.select(function (state) {
+            return without__default["default"].apply(void 0, [state].concat(current));
+          });
+        };
+      }
+    }
+  }, [enabled, children]);
+  return /*#__PURE__*/React__default["default"].createElement("group", _extends__default["default"]({
+    ref: group
+  }, props), children);
+}
+
 var _excluded$2 = ["selection", "selectionLayer", "blendFunction", "patternTexture", "edgeStrength", "pulseSpeed", "visibleEdgeColor", "hiddenEdgeColor", "width", "height", "kernelSize", "blur", "xRay"];
-var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, ref) {
+var Outline = /*#__PURE__*/React.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,
+      _ref$blendFunction = _ref.blendFunction,
+      blendFunction = _ref$blendFunction === void 0 ? postprocessing.BlendFunction.ADD : _ref$blendFunction,
       patternTexture = _ref.patternTexture,
       edgeStrength = _ref.edgeStrength,
       pulseSpeed = _ref.pulseSpeed,
-      visibleEdgeColor = _ref.visibleEdgeColor,
-      hiddenEdgeColor = _ref.hiddenEdgeColor,
+      _ref$visibleEdgeColor = _ref.visibleEdgeColor,
+      visibleEdgeColor = _ref$visibleEdgeColor === void 0 ? 0xffffff : _ref$visibleEdgeColor,
+      _ref$hiddenEdgeColor = _ref.hiddenEdgeColor,
+      hiddenEdgeColor = _ref$hiddenEdgeColor === void 0 ? 0xffffff : _ref$hiddenEdgeColor,
       width = _ref.width,
       height = _ref.height,
       kernelSize = _ref.kernelSize,
@@ -359,10 +421,26 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, ref) {
   React.useEffect(function () {
     effect.selectionLayer = selectionLayer;
   }, [effect, selectionLayer]);
+  var api = React.useContext(selectionContext);
+  var ref = 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);
+
+        return function () {
+          return void _effect.selection.clear();
+        };
+      }
+    }
+  }, [api]);
   return /*#__PURE__*/React__default["default"].createElement("primitive", {
-    ref: ref,
-    object: effect,
-    dispose: null
+    ref: mergeRefs__default["default"]([ref, forwardRef]),
+    object: effect
   });
 });
 
@@ -391,7 +469,7 @@ var removeLight = function removeLight(light, effect) {
   return light.layers.disable(effect.selection.layer);
 };
 
-var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref, ref) {
+var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref, forwardRef) {
   var _ref$selection = _ref.selection,
       selection = _ref$selection === void 0 ? [] : _ref$selection,
       _ref$selectionLayer = _ref.selectionLayer,
@@ -447,8 +525,25 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
       };
     }
   }, [effect, lights, selectionLayer]);
+  var api = React.useContext(selectionContext);
+  var ref = 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);
+
+        return function () {
+          return void _effect.selection.clear();
+        };
+      }
+    }
+  }, [api]);
   return /*#__PURE__*/React__default["default"].createElement("primitive", {
-    ref: ref,
+    ref: mergeRefs__default["default"]([ref, forwardRef]),
     object: effect,
     dispose: null
   });
@@ -563,7 +658,7 @@ exports.ColorDepth = ColorDepth;
 exports.Depth = Depth;
 exports.DepthOfField = DepthOfField;
 exports.DotScreen = DotScreen;
-exports.EffectComposer = EffectComposer$1;
+exports.EffectComposer = EffectComposer;
 exports.EffectComposerContext = EffectComposerContext;
 exports.Glitch = Glitch;
 exports.GodRays = GodRays;
@@ -576,9 +671,12 @@ exports.Pixelation = Pixelation;
 exports.SMAA = SMAA;
 exports.SSAO = SSAO;
 exports.Scanline = Scanline;
+exports.Select = Select;
+exports.Selection = Selection;
 exports.SelectiveBloom = SelectiveBloom;
 exports.Sepia = Sepia;
 exports.ShockWave = ShockWave;
 exports.Texture = Texture;
 exports.ToneMapping = ToneMapping;
 exports.Vignette = Vignette;
+exports.selectionContext = selectionContext;

package/dist/index.d.ts

@@ -23,4 +23,5 @@ export * from './effects/ToneMapping';
 export * from './effects/Vignette';
 export * from './effects/ShockWave';
 export * from './effects/LUT';
-export { default as EffectComposer, EffectComposerContext } from './EffectComposer';
+export * from './Selection';
+export * from './EffectComposer';

package/dist/index.js

@@ -1,9 +1,12 @@
-import { BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$2, 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, useEffect } from 'react';
+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';
 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;
 
@@ -102,7 +105,7 @@ const EffectComposer = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef((_ref, r
   camera = camera || defaultCamera;
   const [composer, normalPass] = useMemo(() => {
     // Initialize composer
-    const effectComposer = new EffectComposer$2(gl, {
+    const effectComposer = new EffectComposer$1(gl, {
       depthBuffer,
       stencilBuffer,
       multisampling: multisampling > 0 && isWebGL2Available() ? multisampling : 0,
@@ -158,7 +161,6 @@ const EffectComposer = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef((_ref, r
     ref: group
   }, children));
 }));
-var EffectComposer$1 = EffectComposer;
 
 const DepthOfField = /*#__PURE__*/forwardRef(function DepthOfField(_ref, ref) {
   let {
@@ -242,16 +244,62 @@ const HueSaturation = wrapEffect(HueSaturationEffect);
 
 const Noise = wrapEffect(NoiseEffect, BlendFunction.COLOR_DODGE);
 
-const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, ref) {
+const selectionContext = /*#__PURE__*/createContext(null);
+function Selection(_ref) {
+  let {
+    children,
+    enabled = true
+  } = _ref;
+  const [selected, select] = useState([]);
+  const value = useMemo(() => ({
+    selected,
+    select,
+    enabled
+  }), [selected, select, enabled]);
+  return /*#__PURE__*/React.createElement(selectionContext.Provider, {
+    value: value
+  }, children);
+}
+function Select(_ref2) {
+  let {
+    enabled = false,
+    children,
+    ...props
+  } = _ref2;
+  const group = useRef(null);
+  const api = useContext(selectionContext);
+  useEffect(() => {
+    if (api && enabled) {
+      let changed = false;
+      const current = [];
+      group.current.traverse(o => {
+        o.type === 'Mesh' && current.push(o);
+        if (api.selected.indexOf(o) === -1) changed = true;
+      });
+
+      if (changed) {
+        api.select(state => [...state, ...current]);
+        return () => {
+          api.select(state => without(state, ...current));
+        };
+      }
+    }
+  }, [enabled, children]);
+  return /*#__PURE__*/React.createElement("group", _extends({
+    ref: group
+  }, props), children);
+}
+
+const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
   let {
     selection = [],
     selectionLayer = 10,
-    blendFunction,
+    blendFunction = BlendFunction.ADD,
     patternTexture,
     edgeStrength,
     pulseSpeed,
-    visibleEdgeColor,
-    hiddenEdgeColor,
+    visibleEdgeColor = 0xffffff,
+    hiddenEdgeColor = 0xffffff,
     width,
     height,
     kernelSize,
@@ -285,10 +333,23 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, ref) {
   useEffect(() => {
     effect.selectionLayer = selectionLayer;
   }, [effect, selectionLayer]);
+  const api = useContext(selectionContext);
+  const ref = 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);
+        return () => void effect.selection.clear();
+      }
+    }
+  }, [api]);
   return /*#__PURE__*/React.createElement("primitive", {
-    ref: ref,
-    object: effect,
-    dispose: null
+    ref: mergeRefs([ref, forwardRef]),
+    object: effect
   });
 });
 
@@ -312,7 +373,7 @@ const addLight = (light, effect) => light.layers.enable(effect.selection.layer);
 
 const removeLight = (light, effect) => light.layers.disable(effect.selection.layer);
 
-const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, ref) {
+const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, forwardRef) {
   let {
     selection = [],
     selectionLayer = 10,
@@ -357,8 +418,22 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, ref
       return () => lights.forEach(light => removeLight(resolveRef(light), effect));
     }
   }, [effect, lights, selectionLayer]);
+  const api = useContext(selectionContext);
+  const ref = 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);
+        return () => void effect.selection.clear();
+      }
+    }
+  }, [api]);
   return /*#__PURE__*/React.createElement("primitive", {
-    ref: ref,
+    ref: mergeRefs([ref, forwardRef]),
     object: effect,
     dispose: null
   });
@@ -460,4 +535,4 @@ const LUT = /*#__PURE__*/forwardRef(function LUT(_ref, ref) {
   });
 });
 
-export { Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DotScreen, EffectComposer$1 as EffectComposer, EffectComposerContext, Glitch, GodRays, Grid, HueSaturation, LUT, Noise, Outline, Pixelation, SMAA, SSAO, Scanline, SelectiveBloom, Sepia, ShockWave, Texture, ToneMapping, Vignette };
+export { Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DotScreen, EffectComposer, EffectComposerContext, Glitch, GodRays, Grid, HueSaturation, LUT, Noise, Outline, Pixelation, SMAA, SSAO, Scanline, Select, Selection, SelectiveBloom, Sepia, ShockWave, Texture, ToneMapping, Vignette, selectionContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.1.6",
+  "version": "2.2.0",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -38,6 +38,7 @@
     "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"