@react-three/postprocessing 2.1.2 → 2.1.3

package/dist/effects/Outline.d.ts

@@ -3,7 +3,7 @@ import React, { MutableRefObject } from 'react';
 import { Object3D } from 'three';
 declare type ObjectRef = MutableRefObject<Object3D>;
 export declare type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] & Partial<{
-    selection: ObjectRef | ObjectRef[];
+    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[];
     selectionLayer: number;
 }>;
 export declare const Outline: React.ForwardRefExoticComponent<Partial<{
@@ -19,7 +19,7 @@ export declare const Outline: React.ForwardRefExoticComponent<Partial<{
     blur: boolean;
     xRay: boolean;
 }> & Partial<{
-    selection: ObjectRef | ObjectRef[];
+    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[];
     selectionLayer: number;
 }> & React.RefAttributes<OutlineEffect>>;
 export {};

package/dist/effects/SelectiveBloom.d.ts

@@ -3,8 +3,8 @@ import React, { MutableRefObject } from 'react';
 import { Object3D } from 'three';
 declare type ObjectRef = MutableRefObject<Object3D>;
 export declare type SelectiveBloomProps = ConstructorParameters<typeof SelectiveBloomEffect>[2] & Partial<{
-    lights: ObjectRef[];
-    selection: ObjectRef | ObjectRef[];
+    lights: Object3D[] | ObjectRef[];
+    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[];
     selectionLayer: number;
 }>;
 export declare const SelectiveBloom: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<SelectiveBloomEffect>>;

package/dist/index.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var postprocessing = require('postprocessing');
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var React = require('react');
-var three = require('three');
+var THREE = require('three');
 var _extends = require('@babel/runtime/helpers/extends');
 var _construct = require('@babel/runtime/helpers/construct');
 var fiber = require('@react-three/fiber');
@@ -13,12 +13,39 @@ var threeStdlib = require('three-stdlib');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 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 _excluded$6 = ["blendFunction", "opacity"];
+
+var isRef = function isRef(ref) {
+  return !!ref.current;
+};
+
+var resolveRef = function resolveRef(ref) {
+  return isRef(ref) ? ref.current : ref;
+};
 var wrapEffect = function wrapEffect(effectImpl, defaultBlendMode) {
   if (defaultBlendMode === void 0) {
     defaultBlendMode = postprocessing.BlendFunction.NORMAL;
@@ -46,12 +73,12 @@ var wrapEffect = function wrapEffect(effectImpl, defaultBlendMode) {
 var useVector2 = function useVector2(props, key) {
   var vec = props[key];
   return React.useMemo(function () {
-    if (vec instanceof three.Vector2) {
-      return new three.Vector2().set(vec.x, vec.y);
+    if (vec instanceof THREE.Vector2) {
+      return new THREE.Vector2().set(vec.x, vec.y);
     } else if (Array.isArray(vec)) {
       var x = vec[0],
           y = vec[1];
-      return new three.Vector2().set(x, y);
+      return new THREE.Vector2().set(x, y);
     }
   }, [vec]);
 };
@@ -107,7 +134,8 @@ var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/R
       stencilBuffer = _ref.stencilBuffer,
       _ref$multisampling = _ref.multisampling,
       multisampling = _ref$multisampling === void 0 ? 8 : _ref$multisampling,
-      frameBufferType = _ref.frameBufferType;
+      _ref$frameBufferType = _ref.frameBufferType,
+      frameBufferType = _ref$frameBufferType === void 0 ? THREE__namespace.HalfFloatType : _ref$frameBufferType;
 
   var _useThree = fiber.useThree(),
       gl = _useThree.gl,
@@ -200,7 +228,7 @@ var DepthOfField = /*#__PURE__*/React.forwardRef(function DepthOfField(_ref, ref
   }, [camera, props]);
   React.useLayoutEffect(function () {
     if (target) {
-      var vec = target instanceof three.Vector3 ? new three.Vector3().set(target.x, target.y, target.z) : new three.Vector3().set(target[0], target[1], target[2]);
+      var vec = target instanceof THREE.Vector3 ? new THREE.Vector3().set(target.x, target.y, target.z) : new THREE.Vector3().set(target[0], target[1], target[2]);
       effect.target = vec;
     }
 
@@ -316,10 +344,12 @@ var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, ref) {
     });
   }, [blendFunction, blur, camera, edgeStrength, height, hiddenEdgeColor, kernelSize, patternTexture, pulseSpeed, scene, visibleEdgeColor, width, xRay]);
   React.useEffect(function () {
-    effect.clearSelection();
-    effect.setSelection(Array.isArray(selection) ? selection.map(function (ref) {
-      return ref.current;
-    }) : [selection.current]);
+    if (selection) {
+      effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
+      return function () {
+        return void effect.selection.clear();
+      };
+    }
   }, [effect, selection]);
   React.useEffect(function () {
     effect.selectionLayer = selectionLayer;
@@ -349,15 +379,11 @@ var Pixelation = /*#__PURE__*/React.forwardRef(function Pixelation(_ref, ref) {
 var Scanline = wrapEffect(postprocessing.ScanlineEffect, postprocessing.BlendFunction.OVERLAY);
 
 var addLight = function addLight(light, effect) {
-  if (light.current) {
-    light.current.layers.enable(effect.selection.layer);
-  }
+  return light.layers.enable(effect.selection.layer);
 };
 
 var removeLight = function removeLight(light, effect) {
-  if (light.current) {
-    light.current.layers.disable(effect.selection.layer);
-  }
+  return light.layers.disable(effect.selection.layer);
 };
 
 var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref, ref) {
@@ -394,22 +420,27 @@ var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref,
     });
   }, [camera, height, intensity, kernelSize, luminanceSmoothing, luminanceThreshold, scene, width]);
   React.useEffect(function () {
-    effect.selection.set(Array.isArray(selection) ? selection.map(function (ref) {
-      return ref.current;
-    }) : [selection.current]);
+    if (selection) {
+      effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
+      return function () {
+        return void effect.selection.clear();
+      };
+    }
   }, [effect, selection]);
   React.useEffect(function () {
     effect.selection.layer = selectionLayer;
   }, [effect, selectionLayer]);
   React.useEffect(function () {
-    lights.forEach(function (light) {
-      return addLight(light, effect);
-    });
-    return function () {
-      return lights.forEach(function (light) {
-        return removeLight(light, effect);
+    if (lights && lights.length > 0) {
+      lights.forEach(function (light) {
+        return addLight(resolveRef(light), effect);
       });
-    };
+      return function () {
+        return lights.forEach(function (light) {
+          return removeLight(resolveRef(light), effect);
+        });
+      };
+    }
   }, [effect, lights, selectionLayer]);
   return /*#__PURE__*/React__default["default"].createElement("primitive", {
     ref: ref,
@@ -476,10 +507,10 @@ var Texture = /*#__PURE__*/React.forwardRef(function Texture(_ref, ref) {
       texture = _ref.texture,
       props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
 
-  var t = fiber.useLoader(three.TextureLoader, textureSrc);
+  var t = fiber.useLoader(THREE.TextureLoader, textureSrc);
   React.useLayoutEffect(function () {
-    t.encoding = three.sRGBEncoding;
-    t.wrapS = t.wrapT = three.RepeatWrapping;
+    t.encoding = THREE.sRGBEncoding;
+    t.wrapS = t.wrapT = THREE.RepeatWrapping;
   }, [t]);
   var effect = React.useMemo(function () {
     return new postprocessing.TextureEffect(_extends__default["default"]({}, props, {

package/dist/index.js

@@ -1,9 +1,13 @@
 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 * 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';
 
+const isRef = ref => !!ref.current;
+
+const resolveRef = ref => isRef(ref) ? ref.current : ref;
 const wrapEffect = function (effectImpl, defaultBlendMode) {
   if (defaultBlendMode === void 0) {
     defaultBlendMode = BlendFunction.NORMAL;
@@ -85,7 +89,7 @@ const EffectComposer = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef((_ref, r
     disableNormalPass,
     stencilBuffer,
     multisampling = 8,
-    frameBufferType
+    frameBufferType = THREE.HalfFloatType
   } = _ref;
   const {
     gl,
@@ -267,8 +271,10 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, ref) {
     xRay
   }), [blendFunction, blur, camera, edgeStrength, height, hiddenEdgeColor, kernelSize, patternTexture, pulseSpeed, scene, visibleEdgeColor, width, xRay]);
   useEffect(() => {
-    effect.clearSelection();
-    effect.setSelection(Array.isArray(selection) ? selection.map(ref => ref.current) : [selection.current]);
+    if (selection) {
+      effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
+      return () => void effect.selection.clear();
+    }
   }, [effect, selection]);
   useEffect(() => {
     effect.selectionLayer = selectionLayer;
@@ -296,17 +302,9 @@ const Pixelation = /*#__PURE__*/forwardRef(function Pixelation(_ref, ref) {
 
 const Scanline = wrapEffect(ScanlineEffect, BlendFunction.OVERLAY);
 
-const addLight = (light, effect) => {
-  if (light.current) {
-    light.current.layers.enable(effect.selection.layer);
-  }
-};
+const addLight = (light, effect) => light.layers.enable(effect.selection.layer);
 
-const removeLight = (light, effect) => {
-  if (light.current) {
-    light.current.layers.disable(effect.selection.layer);
-  }
-};
+const removeLight = (light, effect) => light.layers.disable(effect.selection.layer);
 
 const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, ref) {
   let {
@@ -339,14 +337,19 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, ref
     kernelSize
   }), [camera, height, intensity, kernelSize, luminanceSmoothing, luminanceThreshold, scene, width]);
   useEffect(() => {
-    effect.selection.set(Array.isArray(selection) ? selection.map(ref => ref.current) : [selection.current]);
+    if (selection) {
+      effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
+      return () => void effect.selection.clear();
+    }
   }, [effect, selection]);
   useEffect(() => {
     effect.selection.layer = selectionLayer;
   }, [effect, selectionLayer]);
   useEffect(() => {
-    lights.forEach(light => addLight(light, effect));
-    return () => lights.forEach(light => removeLight(light, effect));
+    if (lights && lights.length > 0) {
+      lights.forEach(light => addLight(resolveRef(light), effect));
+      return () => lights.forEach(light => removeLight(resolveRef(light), effect));
+    }
   }, [effect, lights, selectionLayer]);
   return /*#__PURE__*/React.createElement("primitive", {
     ref: ref,

package/dist/util.d.ts

@@ -1,8 +1,11 @@
-import React from 'react';
-import { Vector2 } from 'three';
+import React, { MutableRefObject } from 'react';
+import { Vector2, Object3D } from 'three';
 import { Effect, BlendFunction } from 'postprocessing';
+declare type ObjectRef = MutableRefObject<Object3D>;
+export declare const resolveRef: (ref: Object3D | ObjectRef) => Object3D<import("three").Event>;
 export declare const wrapEffect: <T extends new (...args: any[]) => Effect>(effectImpl: T, defaultBlendMode?: BlendFunction) => React.ForwardRefExoticComponent<React.PropsWithoutRef<ConstructorParameters<T>[0] & Partial<{
     blendFunction: BlendFunction;
     opacity: number;
 }>> & React.RefAttributes<T>>;
 export declare const useVector2: (props: any, key: string) => Vector2;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -38,9 +38,9 @@
     "typegen": "tsc --emitDeclarationOnly || true"
   },
   "dependencies": {
-    "postprocessing": "^6.23.3",
+    "postprocessing": "^6.24.0",
     "react-merge-refs": "^1.1.0",
-    "three-stdlib": "^2.6.2"
+    "three-stdlib": "^2.8.6"
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
@@ -85,7 +85,7 @@
     "@react-three/fiber": ">=7.0",
     "react": ">=17.0",
     "react-dom": ">=17.0",
-    "three": ">=0.130.1"
+    "three": ">=0.136.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {