@react-three/postprocessing 2.0.5 → 2.1.3

package/dist/effects/Bloom.d.ts

@@ -7,7 +7,7 @@ export declare const Bloom: import("react").ForwardRefExoticComponent<{
     intensity?: number;
     width?: number;
     height?: number;
-    kernelSize?: any;
+    kernelSize?: KernelSize;
 } & Partial<{
     blendFunction: BlendFunction;
     opacity: number;

package/dist/effects/GodRays.d.ts

@@ -11,7 +11,7 @@ export declare const GodRays: React.ForwardRefExoticComponent<{
     clampMax?: number;
     width?: number;
     height?: number;
-    kernelSize?: any;
+    kernelSize?: KernelSize;
     blur?: number;
 } & {
     sun: Mesh | Points;

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<{
@@ -15,11 +15,11 @@ export declare const Outline: React.ForwardRefExoticComponent<Partial<{
     hiddenEdgeColor: number;
     width: number;
     height: number;
-    kernelSize: any;
+    kernelSize: KernelSize;
     blur: boolean;
     xRay: boolean;
 }> & Partial<{
-    selection: ObjectRef | ObjectRef[];
+    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[];
     selectionLayer: number;
 }> & React.RefAttributes<OutlineEffect>>;
 export {};

package/dist/effects/SSAO.d.ts

@@ -12,4 +12,6 @@ export declare const SSAO: React.ForwardRefExoticComponent<{
     radius?: number;
     scale?: number;
     bias?: number;
+    intensity?: number;
+    color?: string;
 } & React.RefAttributes<SSAOEffect>>;

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

@@ -1 +1,579 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("postprocessing"),t=require("@babel/runtime/helpers/objectWithoutPropertiesLoose"),r=require("react"),n=require("three"),o=require("@babel/runtime/helpers/extends"),i=require("@babel/runtime/helpers/construct"),u=require("@react-three/fiber");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=a(t),c=a(r),l=a(o),s=a(i),d=["blendFunction","opacity"],p=function(t,n){return void 0===n&&(n=e.BlendFunction.NORMAL),r.forwardRef((function(e,o){var i=e.blendFunction,u=e.opacity,a=f.default(e,d),l=r.useMemo((function(){return new t(a)}),[a]);return r.useLayoutEffect((function(){l.blendMode.blendFunction=i||n,void 0!==u&&(l.blendMode.opacity.value=u)}),[i,l.blendMode,u]),c.default.createElement("primitive",{ref:o,object:l,dispose:null})}))},m=function(e,t){var o=e[t];return r.useMemo((function(){if(o instanceof n.Vector2)return(new n.Vector2).set(o.x,o.y);if(Array.isArray(o)){var e=o[0],t=o[1];return(new n.Vector2).set(e,t)}}),[o])},v=function(){try{var e=document.createElement("canvas");return!(!window.WebGL2RenderingContext||!e.getContext("webgl2"))}catch(e){return!1}},h=p(e.BloomEffect,e.BlendFunction.SCREEN),E=p(e.BrightnessContrastEffect),x=r.forwardRef((function(t,n){var o=m(t,"offset"),i=r.useMemo((function(){return new e.ChromaticAberrationEffect(l.default({},t,{offset:o}))}),[o,t]);return c.default.createElement("primitive",{ref:n,object:i,dispose:null})})),g=r.forwardRef((function(t,n){var o=t.blendFunction,i=void 0===o?e.BlendFunction.NORMAL:o,u=r.useMemo((function(){return new e.ColorAverageEffect(i)}),[i]);return c.default.createElement("primitive",{ref:n,object:u,dispose:null})})),b=p(e.ColorDepthEffect),w=p(e.DepthEffect),S=r.createContext(null),y=c.default.memo(r.forwardRef((function(t,n){var o=t.children,i=t.camera,a=t.scene,f=t.renderPriority,l=void 0===f?1:f,d=t.autoClear,p=void 0===d||d,m=t.depthBuffer,h=t.disableNormalPass,E=t.stencilBuffer,x=t.multisampling,g=void 0===x?8:x,b=t.frameBufferType,w=u.useThree(),y=w.gl,C=w.scene,M=w.camera,R=w.size;a=a||C,i=i||M;var L=r.useMemo((function(){var t=new e.EffectComposer(y,{depthBuffer:m,stencilBuffer:E,multisampling:v()?g:0,frameBufferType:b});t.addPass(new e.RenderPass(a,i));var r=h?null:new e.NormalPass(a,i);return r&&t.addPass(r),[t,r]}),[i,y,m,E,g,b,a,h]),A=L[0],T=L[1];r.useEffect((function(){return null==A?void 0:A.setSize(R.width,R.height)}),[A,R]),u.useFrame((function(e,t){return y.autoClear=p,void A.render(t)}),l);var B=r.useRef(null);r.useEffect((function(){var t;return B.current&&B.current.__r3f&&A&&(t=s.default(e.EffectPass,[i].concat(B.current.__r3f.objects)),A.addPass(t),t.renderToScreen=!0),function(){t&&(null==A||A.removePass(t))}}),[A,o,i]);var F=r.useMemo((function(){return{composer:A,normalPass:T,camera:i,scene:a}}),[A,T,i,a]);return r.useImperativeHandle(n,(function(){return A}),[A]),c.default.createElement(S.Provider,{value:F},c.default.createElement("group",{ref:B},o))}))),C=["target","depthTexture"],M=r.forwardRef((function(t,o){var i=t.target,u=t.depthTexture,a=f.default(t,C),l=r.useContext(S).camera,s=r.useMemo((function(){return new e.DepthOfFieldEffect(l,a)}),[l,a]);return r.useLayoutEffect((function(){if(i){var e=i instanceof n.Vector3?(new n.Vector3).set(i.x,i.y,i.z):(new n.Vector3).set(i[0],i[1],i[2]);s.target=e}u&&s.setDepthTexture(u.texture,u.packing)}),[i,u,s]),c.default.createElement("primitive",{ref:o,object:s,dispose:null})})),R=p(e.DotScreenEffect),L=["active"],A=r.forwardRef((function(t,n){var o=t.active,i=void 0===o||o,u=f.default(t,L),a=m(u,"delay"),s=m(u,"duration"),d=m(u,"strength"),p=r.useMemo((function(){return new e.GlitchEffect(l.default({},u,{delay:a,duration:s,strength:d}))}),[a,s,u,d]);return r.useLayoutEffect((function(){p.mode=i?u.mode||e.GlitchMode.SPORADIC:e.GlitchMode.DISABLED}),[i,p,u.mode]),c.default.createElement("primitive",{ref:n,object:p,dispose:null})})),T=r.forwardRef((function(t,n){var o=r.useContext(S).camera,i=r.useMemo((function(){return new e.GodRaysEffect(o,t.sun,t)}),[o,t]);return c.default.createElement("primitive",{ref:n,object:i,dispose:null})})),B=["size"],F=r.forwardRef((function(t,n){var o=t.size,i=f.default(t,B),u=r.useMemo((function(){return new e.GridEffect(i)}),[i]);return r.useLayoutEffect((function(){o&&u.setSize(o.width,o.height)}),[u,o]),c.default.createElement("primitive",{ref:n,object:u,dispose:null})})),P=p(e.HueSaturationEffect),j=p(e.NoiseEffect,e.BlendFunction.COLOR_DODGE),O=["selection","selectionLayer","blendFunction","patternTexture","edgeStrength","pulseSpeed","visibleEdgeColor","hiddenEdgeColor","width","height","kernelSize","blur","xRay"],D=r.forwardRef((function(t,n){var o=t.selection,i=void 0===o?[]:o,u=t.selectionLayer,a=void 0===u?10:u,l=t.blendFunction,s=t.patternTexture,d=t.edgeStrength,p=t.pulseSpeed,m=t.visibleEdgeColor,v=t.hiddenEdgeColor,h=t.width,E=t.height,x=t.kernelSize,g=t.blur,b=t.xRay;f.default(t,O);var w=r.useContext(S),y=w.scene,C=w.camera,M=r.useMemo((function(){return new e.OutlineEffect(y,C,{blendFunction:l,patternTexture:s,edgeStrength:d,pulseSpeed:p,visibleEdgeColor:m,hiddenEdgeColor:v,width:h,height:E,kernelSize:x,blur:g,xRay:b})}),[l,g,C,d,E,v,x,s,p,y,m,h,b]);return r.useEffect((function(){M.clearSelection(),M.setSelection(Array.isArray(i)?i.map((function(e){return e.current})):[i.current])}),[M,i]),r.useEffect((function(){M.selectionLayer=a}),[M,a]),c.default.createElement("primitive",{ref:n,object:M,dispose:null})})),G=r.forwardRef((function(t,n){var o=t.granularity,i=void 0===o?5:o,u=r.useMemo((function(){return new e.PixelationEffect(i)}),[i]);return c.default.createElement("primitive",{ref:n,object:u,dispose:null})})),z=p(e.ScanlineEffect,e.BlendFunction.OVERLAY),I=r.forwardRef((function(t,n){var o=t.selection,i=void 0===o?[]:o,u=t.selectionLayer,a=void 0===u?10:u,f=t.lights,l=void 0===f?[]:f,s=t.luminanceThreshold,d=t.luminanceSmoothing,p=t.intensity,m=t.width,v=t.height,h=t.kernelSize;0===l.length&&console.warn("SelectiveBloom requires lights to work.");var E=r.useContext(S),x=E.scene,g=E.camera,b=r.useMemo((function(){return new e.SelectiveBloomEffect(x,g,{blendFunction:e.BlendFunction.SCREEN,luminanceThreshold:s,luminanceSmoothing:d,intensity:p,width:m,height:v,kernelSize:h})}),[g,v,p,h,d,s,x,m]);return r.useEffect((function(){b.selection.set(Array.isArray(i)?i.map((function(e){return e.current})):[i.current])}),[b,i]),r.useEffect((function(){b.selection.layer=a}),[b,a]),r.useEffect((function(){return l.forEach((function(e){return function(e,t){e.current&&e.current.layers.enable(t.selection.layer)}(e,b)})),function(){return l.forEach((function(e){return function(e,t){e.current&&e.current.layers.disable(t.selection.layer)}(e,b)}))}}),[b,l,a]),c.default.createElement("primitive",{ref:n,object:b,dispose:null})})),k=p(e.SepiaEffect),N=r.forwardRef((function(t,n){var o=r.useContext(S),i=o.camera,u=o.normalPass,a=r.useMemo((function(){return null===u?(console.error("Please enable the NormalPass in the EffectComposer in order to use SSAO."),null):new e.SSAOEffect(i,u.renderTarget.texture,l.default({blendFunction:e.BlendFunction.MULTIPLY,samples:30,rings:4,distanceThreshold:1,distanceFalloff:0,rangeThreshold:.5,rangeFalloff:.1,luminanceInfluence:.9,radius:20,scale:.5,bias:.5},t))}),[i,u,t]);return c.default.createElement("primitive",{ref:n,object:a,dispose:null})})),V=r.forwardRef((function(t,n){var o=t.preset,i=void 0===o?e.SMAAPreset.HIGH:o,a=t.edgeDetectionMode,f=void 0===a?e.EdgeDetectionMode.COLOR:a,l=u.useLoader(e.SMAAImageLoader,""),d=r.useMemo((function(){return s.default(e.SMAAEffect,l.concat([i,f]))}),[l,i,f]);return c.default.createElement("primitive",{ref:n,object:d,dispose:null})})),q=["textureSrc","texture"],_=r.forwardRef((function(t,o){var i=t.textureSrc,a=t.texture,s=f.default(t,q),d=u.useLoader(n.TextureLoader,i);r.useLayoutEffect((function(){d.encoding=n.sRGBEncoding,d.wrapS=d.wrapT=n.RepeatWrapping}),[d]);var p=r.useMemo((function(){return new e.TextureEffect(l.default({},s,{texture:d||a}))}),[s,d,a]);return c.default.createElement("primitive",{ref:o,object:p,dispose:null})})),H=p(e.ToneMappingEffect),W=p(e.VignetteEffect),U=p(e.ShockWaveEffect),Y=["lut","tetrahedralInterpolation"],J=r.forwardRef((function(t,n){var o=t.lut,i=t.tetrahedralInterpolation,u=f.default(t,Y),a=r.useMemo((function(){return new e.LUTEffect(o,u)}),[o,u]);return r.useLayoutEffect((function(){o&&a.setLUT(o),i&&a.setTetrahedralInterpolationEnabled(i)}),[a,o,i]),c.default.createElement("primitive",{ref:n,object:a,dispose:null})}));exports.Bloom=h,exports.BrightnessContrast=E,exports.ChromaticAberration=x,exports.ColorAverage=g,exports.ColorDepth=b,exports.Depth=w,exports.DepthOfField=M,exports.DotScreen=R,exports.EffectComposer=y,exports.EffectComposerContext=S,exports.Glitch=A,exports.GodRays=T,exports.Grid=F,exports.HueSaturation=P,exports.LUT=J,exports.Noise=j,exports.Outline=D,exports.Pixelation=G,exports.SMAA=V,exports.SSAO=N,exports.Scanline=z,exports.SelectiveBloom=I,exports.Sepia=k,exports.ShockWave=U,exports.Texture=_,exports.ToneMapping=H,exports.Vignette=W;
+'use strict';
+
+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 _extends = require('@babel/runtime/helpers/extends');
+var _construct = require('@babel/runtime/helpers/construct');
+var fiber = require('@react-three/fiber');
+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;
+  }
+
+  return /*#__PURE__*/React.forwardRef(function Wrap(_ref, ref) {
+    var blendFunction = _ref.blendFunction,
+        opacity = _ref.opacity,
+        props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$6);
+
+    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;
+    }, [blendFunction, effect.blendMode, opacity]);
+    return /*#__PURE__*/React__default["default"].createElement("primitive", {
+      ref: ref,
+      object: effect,
+      dispose: null
+    });
+  });
+};
+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);
+    } else if (Array.isArray(vec)) {
+      var x = vec[0],
+          y = vec[1];
+      return new THREE.Vector2().set(x, y);
+    }
+  }, [vec]);
+};
+
+var Bloom = wrapEffect(postprocessing.BloomEffect, postprocessing.BlendFunction.SCREEN);
+
+var BrightnessContrast = wrapEffect(postprocessing.BrightnessContrastEffect);
+
+var ChromaticAberration = /*#__PURE__*/React.forwardRef(function ChromaticAberration(props, ref) {
+  var offset = useVector2(props, 'offset');
+  var effect = React.useMemo(function () {
+    return new postprocessing.ChromaticAberrationEffect(_extends__default["default"]({}, props, {
+      offset: offset
+    }));
+  }, [offset, props]);
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+var ColorAverage = /*#__PURE__*/React.forwardRef(function ColorAverage(_ref, ref) {
+  var _ref$blendFunction = _ref.blendFunction,
+      blendFunction = _ref$blendFunction === void 0 ? postprocessing.BlendFunction.NORMAL : _ref$blendFunction;
+
+  /** Because ColorAverage blendFunction is not an object but a number, we have to define a custom prop "blendFunction" */
+  var effect = React.useMemo(function () {
+    return new postprocessing.ColorAverageEffect(blendFunction);
+  }, [blendFunction]);
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+var ColorDepth = wrapEffect(postprocessing.ColorDepthEffect);
+
+var Depth = wrapEffect(postprocessing.DepthEffect);
+
+var EffectComposerContext = /*#__PURE__*/React.createContext(null);
+var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      camera = _ref.camera,
+      scene = _ref.scene,
+      _ref$renderPriority = _ref.renderPriority,
+      renderPriority = _ref$renderPriority === void 0 ? 1 : _ref$renderPriority,
+      _ref$autoClear = _ref.autoClear,
+      autoClear = _ref$autoClear === void 0 ? true : _ref$autoClear,
+      depthBuffer = _ref.depthBuffer,
+      disableNormalPass = _ref.disableNormalPass,
+      stencilBuffer = _ref.stencilBuffer,
+      _ref$multisampling = _ref.multisampling,
+      multisampling = _ref$multisampling === void 0 ? 8 : _ref$multisampling,
+      _ref$frameBufferType = _ref.frameBufferType,
+      frameBufferType = _ref$frameBufferType === void 0 ? THREE__namespace.HalfFloatType : _ref$frameBufferType;
+
+  var _useThree = fiber.useThree(),
+      gl = _useThree.gl,
+      defaultScene = _useThree.scene,
+      defaultCamera = _useThree.camera,
+      size = _useThree.size;
+
+  scene = scene || defaultScene;
+  camera = camera || defaultCamera;
+
+  var _useMemo = React.useMemo(function () {
+    // Initialize composer
+    var effectComposer = new postprocessing.EffectComposer(gl, {
+      depthBuffer: depthBuffer,
+      stencilBuffer: stencilBuffer,
+      multisampling: threeStdlib.isWebGL2Available() ? multisampling : 0,
+      frameBufferType: frameBufferType
+    }); // Add render pass
+
+    // Add render pass
+    effectComposer.addPass(new postprocessing.RenderPass(scene, camera)); // Create normal pass
+
+    // Create normal pass
+    var pass = disableNormalPass ? null : new postprocessing.NormalPass(scene, camera);
+    if (pass) pass.enabled = false;
+
+    if (pass) {
+      effectComposer.addPass(pass);
+    }
+
+    return [effectComposer, pass];
+  }, [camera, gl, depthBuffer, stencilBuffer, multisampling, frameBufferType, scene, disableNormalPass]),
+      composer = _useMemo[0],
+      normalPass = _useMemo[1];
+
+  React.useLayoutEffect(function () {
+    return composer == null ? void 0 : composer.setSize(size.width, size.height);
+  }, [composer, size]);
+  fiber.useFrame(function (_, delta) {
+    return void (gl.autoClear = autoClear, composer.render(delta));
+  }, renderPriority);
+  var group = React.useRef(null);
+  React.useLayoutEffect(function () {
+    var effectPass;
+
+    if (group.current && group.current.__r3f && composer) {
+      effectPass = _construct__default["default"](postprocessing.EffectPass, [camera].concat(group.current.__r3f.objects));
+      composer.addPass(effectPass);
+      effectPass.renderToScreen = true;
+      if (normalPass) normalPass.enabled = false;
+    }
+
+    return function () {
+      if (effectPass) composer == null ? void 0 : composer.removePass(effectPass);
+      if (normalPass) normalPass.enabled = false;
+    };
+  }, [composer, children, camera]); // Memoize state, otherwise it would trigger all consumers on every render
+
+  var state = React.useMemo(function () {
+    return {
+      composer: composer,
+      normalPass: normalPass,
+      camera: camera,
+      scene: scene
+    };
+  }, [composer, normalPass, camera, scene]); // Expose the composer
+
+  React.useImperativeHandle(ref, function () {
+    return composer;
+  }, [composer]);
+  return /*#__PURE__*/React__default["default"].createElement(EffectComposerContext.Provider, {
+    value: state
+  }, /*#__PURE__*/React__default["default"].createElement("group", {
+    ref: group
+  }, children));
+}));
+var EffectComposer$1 = EffectComposer;
+
+var _excluded$5 = ["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);
+
+  var _useContext = React.useContext(EffectComposerContext),
+      camera = _useContext.camera;
+
+  var effect = React.useMemo(function () {
+    return new postprocessing.DepthOfFieldEffect(camera, props);
+  }, [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]);
+      effect.target = vec;
+    }
+
+    if (depthTexture) effect.setDepthTexture(depthTexture.texture, depthTexture.packing);
+  }, [target, depthTexture, effect]);
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+var DotScreen = wrapEffect(postprocessing.DotScreenEffect);
+
+var _excluded$4 = ["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);
+
+  var delay = useVector2(props, 'delay');
+  var duration = useVector2(props, 'duration');
+  var strength = useVector2(props, 'strength');
+  var effect = React.useMemo(function () {
+    return new postprocessing.GlitchEffect(_extends__default["default"]({}, props, {
+      delay: delay,
+      duration: duration,
+      strength: strength
+    }));
+  }, [delay, duration, props, strength]);
+  React.useLayoutEffect(function () {
+    effect.mode = active ? props.mode || postprocessing.GlitchMode.SPORADIC : postprocessing.GlitchMode.DISABLED;
+  }, [active, effect, props.mode]);
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+var GodRays = /*#__PURE__*/React.forwardRef(function GodRays(props, ref) {
+  var _useContext = React.useContext(EffectComposerContext),
+      camera = _useContext.camera;
+
+  var effect = React.useMemo(function () {
+    return new postprocessing.GodRaysEffect(camera, props.sun, props);
+  }, [camera, props]);
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+var _excluded$3 = ["size"];
+var Grid = /*#__PURE__*/React.forwardRef(function Grid(_ref, ref) {
+  var size = _ref.size,
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$3);
+
+  var effect = React.useMemo(function () {
+    return new postprocessing.GridEffect(props);
+  }, [props]);
+  React.useLayoutEffect(function () {
+    if (size) effect.setSize(size.width, size.height);
+  }, [effect, size]);
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+var HueSaturation = wrapEffect(postprocessing.HueSaturationEffect);
+
+var Noise = wrapEffect(postprocessing.NoiseEffect, postprocessing.BlendFunction.COLOR_DODGE);
+
+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 _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,
+      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 _useContext = React.useContext(EffectComposerContext),
+      scene = _useContext.scene,
+      camera = _useContext.camera;
+
+  var effect = React.useMemo(function () {
+    return new postprocessing.OutlineEffect(scene, camera, {
+      blendFunction: blendFunction,
+      patternTexture: patternTexture,
+      edgeStrength: edgeStrength,
+      pulseSpeed: pulseSpeed,
+      visibleEdgeColor: visibleEdgeColor,
+      hiddenEdgeColor: hiddenEdgeColor,
+      width: width,
+      height: height,
+      kernelSize: kernelSize,
+      blur: blur,
+      xRay: xRay
+    });
+  }, [blendFunction, blur, camera, edgeStrength, height, hiddenEdgeColor, kernelSize, patternTexture, pulseSpeed, scene, visibleEdgeColor, width, xRay]);
+  React.useEffect(function () {
+    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;
+  }, [effect, selectionLayer]);
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+var Pixelation = /*#__PURE__*/React.forwardRef(function Pixelation(_ref, ref) {
+  var _ref$granularity = _ref.granularity,
+      granularity = _ref$granularity === void 0 ? 5 : _ref$granularity;
+
+  /** Because GlitchEffect granularity is not an object but a number, we have to define a custom prop "granularity" */
+  var effect = React.useMemo(function () {
+    return new postprocessing.PixelationEffect(granularity);
+  }, [granularity]);
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+var Scanline = wrapEffect(postprocessing.ScanlineEffect, postprocessing.BlendFunction.OVERLAY);
+
+var addLight = function addLight(light, effect) {
+  return light.layers.enable(effect.selection.layer);
+};
+
+var removeLight = function removeLight(light, effect) {
+  return light.layers.disable(effect.selection.layer);
+};
+
+var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref, ref) {
+  var _ref$selection = _ref.selection,
+      selection = _ref$selection === void 0 ? [] : _ref$selection,
+      _ref$selectionLayer = _ref.selectionLayer,
+      selectionLayer = _ref$selectionLayer === void 0 ? 10 : _ref$selectionLayer,
+      _ref$lights = _ref.lights,
+      lights = _ref$lights === void 0 ? [] : _ref$lights,
+      luminanceThreshold = _ref.luminanceThreshold,
+      luminanceSmoothing = _ref.luminanceSmoothing,
+      intensity = _ref.intensity,
+      width = _ref.width,
+      height = _ref.height,
+      kernelSize = _ref.kernelSize;
+
+  if (lights.length === 0) {
+    console.warn('SelectiveBloom requires lights to work.');
+  }
+
+  var _useContext = React.useContext(EffectComposerContext),
+      scene = _useContext.scene,
+      camera = _useContext.camera;
+
+  var effect = React.useMemo(function () {
+    return new postprocessing.SelectiveBloomEffect(scene, camera, {
+      blendFunction: postprocessing.BlendFunction.SCREEN,
+      luminanceThreshold: luminanceThreshold,
+      luminanceSmoothing: luminanceSmoothing,
+      intensity: intensity,
+      width: width,
+      height: height,
+      kernelSize: kernelSize
+    });
+  }, [camera, height, intensity, kernelSize, luminanceSmoothing, luminanceThreshold, scene, width]);
+  React.useEffect(function () {
+    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 () {
+    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,
+    object: effect,
+    dispose: null
+  });
+});
+
+var Sepia = wrapEffect(postprocessing.SepiaEffect);
+
+var SSAO = /*#__PURE__*/React.forwardRef(function SSAO(props, ref) {
+  var _useContext = React.useContext(EffectComposerContext),
+      camera = _useContext.camera,
+      normalPass = _useContext.normalPass;
+
+  var effect = React.useMemo(function () {
+    if (normalPass === null) {
+      console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.');
+      return null;
+    }
+
+    return new postprocessing.SSAOEffect(camera, normalPass.renderTarget.texture, _extends__default["default"]({
+      blendFunction: postprocessing.BlendFunction.MULTIPLY,
+      samples: 30,
+      rings: 4,
+      distanceThreshold: 1.0,
+      distanceFalloff: 0.0,
+      rangeThreshold: 0.5,
+      rangeFalloff: 0.1,
+      luminanceInfluence: 0.9,
+      radius: 20,
+      scale: 0.5,
+      bias: 0.5,
+      intensity: 1.0,
+      color: null
+    }, props));
+  }, [camera, normalPass, props]);
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+var SMAA = /*#__PURE__*/React.forwardRef(function SMAA(_ref, ref) {
+  var _ref$preset = _ref.preset,
+      preset = _ref$preset === void 0 ? postprocessing.SMAAPreset.HIGH : _ref$preset,
+      _ref$edgeDetectionMod = _ref.edgeDetectionMode,
+      edgeDetectionMode = _ref$edgeDetectionMod === void 0 ? postprocessing.EdgeDetectionMode.COLOR : _ref$edgeDetectionMod;
+  var smaaProps = fiber.useLoader(postprocessing.SMAAImageLoader, '');
+  var effect = React.useMemo(function () {
+    return _construct__default["default"](postprocessing.SMAAEffect, smaaProps.concat([preset, edgeDetectionMode]));
+  }, [smaaProps, preset, edgeDetectionMode]);
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+var _excluded$1 = ["textureSrc", "texture"];
+var Texture = /*#__PURE__*/React.forwardRef(function Texture(_ref, ref) {
+  var textureSrc = _ref.textureSrc,
+      texture = _ref.texture,
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
+
+  var t = fiber.useLoader(THREE.TextureLoader, textureSrc);
+  React.useLayoutEffect(function () {
+    t.encoding = THREE.sRGBEncoding;
+    t.wrapS = t.wrapT = THREE.RepeatWrapping;
+  }, [t]);
+  var effect = React.useMemo(function () {
+    return new postprocessing.TextureEffect(_extends__default["default"]({}, props, {
+      texture: t || texture
+    }));
+  }, [props, t, texture]);
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+var ToneMapping = wrapEffect(postprocessing.ToneMappingEffect);
+
+var Vignette = wrapEffect(postprocessing.VignetteEffect);
+
+var ShockWave = wrapEffect(postprocessing.ShockWaveEffect);
+
+var _excluded = ["lut", "tetrahedralInterpolation"];
+var LUT = /*#__PURE__*/React.forwardRef(function LUT(_ref, ref) {
+  var lut = _ref.lut,
+      tetrahedralInterpolation = _ref.tetrahedralInterpolation,
+      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded);
+
+  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);
+  }, [effect, lut, tetrahedralInterpolation]);
+  return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+exports.Bloom = Bloom;
+exports.BrightnessContrast = BrightnessContrast;
+exports.ChromaticAberration = ChromaticAberration;
+exports.ColorAverage = ColorAverage;
+exports.ColorDepth = ColorDepth;
+exports.Depth = Depth;
+exports.DepthOfField = DepthOfField;
+exports.DotScreen = DotScreen;
+exports.EffectComposer = EffectComposer$1;
+exports.EffectComposerContext = EffectComposerContext;
+exports.Glitch = Glitch;
+exports.GodRays = GodRays;
+exports.Grid = Grid;
+exports.HueSaturation = HueSaturation;
+exports.LUT = LUT;
+exports.Noise = Noise;
+exports.Outline = Outline;
+exports.Pixelation = Pixelation;
+exports.SMAA = SMAA;
+exports.SSAO = SSAO;
+exports.Scanline = Scanline;
+exports.SelectiveBloom = SelectiveBloom;
+exports.Sepia = Sepia;
+exports.ShockWave = ShockWave;
+exports.Texture = Texture;
+exports.ToneMapping = ToneMapping;
+exports.Vignette = Vignette;

package/dist/index.js

@@ -1 +1,457 @@
-import{BlendFunction as e,BloomEffect as t,BrightnessContrastEffect as n,ChromaticAberrationEffect as r,ColorAverageEffect as i,ColorDepthEffect as o,DepthEffect as l,EffectComposer as c,RenderPass as s,NormalPass as a,EffectPass as u,DepthOfFieldEffect as d,DotScreenEffect as m,GlitchEffect as f,GlitchMode as p,GodRaysEffect as h,GridEffect as g,HueSaturationEffect as b,NoiseEffect as w,OutlineEffect as E,PixelationEffect as y,ScanlineEffect as v,SelectiveBloomEffect as S,SepiaEffect as x,SSAOEffect as T,SMAAPreset as j,EdgeDetectionMode as C,SMAAImageLoader as L,SMAAEffect as P,TextureEffect as A,ToneMappingEffect as R,VignetteEffect as O,ShockWaveEffect as z,LUTEffect as F}from"postprocessing";import B,{forwardRef as D,useMemo as I,useLayoutEffect as M,createContext as k,useEffect as N,useRef as _,useImperativeHandle as G,useContext as H}from"react";import{Vector2 as U,Vector3 as Y,TextureLoader as q,sRGBEncoding as V,RepeatWrapping as W}from"three";import{useThree as J,useFrame as K,useLoader as Q}from"@react-three/fiber";const X=(t,n=e.NORMAL)=>D((function({blendFunction:e,opacity:r,...i},o){const l=I((()=>new t(i)),[i]);return M((()=>{l.blendMode.blendFunction=e||n,void 0!==r&&(l.blendMode.opacity.value=r)}),[e,l.blendMode,r]),B.createElement("primitive",{ref:o,object:l,dispose:null})})),Z=(e,t)=>{const n=e[t];return I((()=>{if(n instanceof U)return(new U).set(n.x,n.y);if(Array.isArray(n)){const[e,t]=n;return(new U).set(e,t)}}),[n])},$=()=>{try{const e=document.createElement("canvas");return!(!window.WebGL2RenderingContext||!e.getContext("webgl2"))}catch(e){return!1}},ee=X(t,e.SCREEN),te=X(n),ne=D((function(e,t){const n=Z(e,"offset"),i=I((()=>new r({...e,offset:n})),[n,e]);return B.createElement("primitive",{ref:t,object:i,dispose:null})})),re=D((function({blendFunction:t=e.NORMAL},n){const r=I((()=>new i(t)),[t]);return B.createElement("primitive",{ref:n,object:r,dispose:null})})),ie=X(o),oe=X(l),le=k(null),ce=B.memo(D((({children:e,camera:t,scene:n,renderPriority:r=1,autoClear:i=!0,depthBuffer:o,disableNormalPass:l,stencilBuffer:d,multisampling:m=8,frameBufferType:f},p)=>{const{gl:h,scene:g,camera:b,size:w}=J();n=n||g,t=t||b;const[E,y]=I((()=>{const e=new c(h,{depthBuffer:o,stencilBuffer:d,multisampling:$()?m:0,frameBufferType:f});e.addPass(new s(n,t));const r=l?null:new a(n,t);return r&&e.addPass(r),[e,r]}),[t,h,o,d,m,f,n,l]);N((()=>null==E?void 0:E.setSize(w.width,w.height)),[E,w]),K(((e,t)=>(h.autoClear=i,void E.render(t))),r);const v=_(null);N((()=>{let e;return v.current&&v.current.__r3f&&E&&(e=new u(t,...v.current.__r3f.objects),E.addPass(e),e.renderToScreen=!0),()=>{e&&(null==E||E.removePass(e))}}),[E,e,t]);const S=I((()=>({composer:E,normalPass:y,camera:t,scene:n})),[E,y,t,n]);return G(p,(()=>E),[E]),B.createElement(le.Provider,{value:S},B.createElement("group",{ref:v},e))}))),se=D((function({target:e,depthTexture:t,...n},r){const{camera:i}=H(le),o=I((()=>new d(i,n)),[i,n]);return M((()=>{if(e){const t=e instanceof Y?(new Y).set(e.x,e.y,e.z):(new Y).set(e[0],e[1],e[2]);o.target=t}t&&o.setDepthTexture(t.texture,t.packing)}),[e,t,o]),B.createElement("primitive",{ref:r,object:o,dispose:null})})),ae=X(m),ue=D((function({active:e=!0,...t},n){const r=Z(t,"delay"),i=Z(t,"duration"),o=Z(t,"strength"),l=I((()=>new f({...t,delay:r,duration:i,strength:o})),[r,i,t,o]);return M((()=>{l.mode=e?t.mode||p.SPORADIC:p.DISABLED}),[e,l,t.mode]),B.createElement("primitive",{ref:n,object:l,dispose:null})})),de=D((function(e,t){const{camera:n}=H(le),r=I((()=>new h(n,e.sun,e)),[n,e]);return B.createElement("primitive",{ref:t,object:r,dispose:null})})),me=D((function({size:e,...t},n){const r=I((()=>new g(t)),[t]);return M((()=>{e&&r.setSize(e.width,e.height)}),[r,e]),B.createElement("primitive",{ref:n,object:r,dispose:null})})),fe=X(b),pe=X(w,e.COLOR_DODGE),he=D((function({selection:e=[],selectionLayer:t=10,blendFunction:n,patternTexture:r,edgeStrength:i,pulseSpeed:o,visibleEdgeColor:l,hiddenEdgeColor:c,width:s,height:a,kernelSize:u,blur:d,xRay:m,...f},p){const{scene:h,camera:g}=H(le),b=I((()=>new E(h,g,{blendFunction:n,patternTexture:r,edgeStrength:i,pulseSpeed:o,visibleEdgeColor:l,hiddenEdgeColor:c,width:s,height:a,kernelSize:u,blur:d,xRay:m})),[n,d,g,i,a,c,u,r,o,h,l,s,m]);return N((()=>{b.clearSelection(),b.setSelection(Array.isArray(e)?e.map((e=>e.current)):[e.current])}),[b,e]),N((()=>{b.selectionLayer=t}),[b,t]),B.createElement("primitive",{ref:p,object:b,dispose:null})})),ge=D((function({granularity:e=5},t){const n=I((()=>new y(e)),[e]);return B.createElement("primitive",{ref:t,object:n,dispose:null})})),be=X(v,e.OVERLAY),we=D((function({selection:t=[],selectionLayer:n=10,lights:r=[],luminanceThreshold:i,luminanceSmoothing:o,intensity:l,width:c,height:s,kernelSize:a},u){0===r.length&&console.warn("SelectiveBloom requires lights to work.");const{scene:d,camera:m}=H(le),f=I((()=>new S(d,m,{blendFunction:e.SCREEN,luminanceThreshold:i,luminanceSmoothing:o,intensity:l,width:c,height:s,kernelSize:a})),[m,s,l,a,o,i,d,c]);return N((()=>{f.selection.set(Array.isArray(t)?t.map((e=>e.current)):[t.current])}),[f,t]),N((()=>{f.selection.layer=n}),[f,n]),N((()=>(r.forEach((e=>((e,t)=>{e.current&&e.current.layers.enable(t.selection.layer)})(e,f))),()=>r.forEach((e=>((e,t)=>{e.current&&e.current.layers.disable(t.selection.layer)})(e,f))))),[f,r,n]),B.createElement("primitive",{ref:u,object:f,dispose:null})})),Ee=X(x),ye=D((function(t,n){const{camera:r,normalPass:i}=H(le),o=I((()=>null===i?(console.error("Please enable the NormalPass in the EffectComposer in order to use SSAO."),null):new T(r,i.renderTarget.texture,{blendFunction:e.MULTIPLY,samples:30,rings:4,distanceThreshold:1,distanceFalloff:0,rangeThreshold:.5,rangeFalloff:.1,luminanceInfluence:.9,radius:20,scale:.5,bias:.5,...t})),[r,i,t]);return B.createElement("primitive",{ref:n,object:o,dispose:null})})),ve=D((function({preset:e=j.HIGH,edgeDetectionMode:t=C.COLOR},n){const r=Q(L,""),i=I((()=>new P(...r,e,t)),[r,e,t]);return B.createElement("primitive",{ref:n,object:i,dispose:null})})),Se=D((function({textureSrc:e,texture:t,...n},r){const i=Q(q,e);M((()=>{i.encoding=V,i.wrapS=i.wrapT=W}),[i]);const o=I((()=>new A({...n,texture:i||t})),[n,i,t]);return B.createElement("primitive",{ref:r,object:o,dispose:null})})),xe=X(R),Te=X(O),je=X(z),Ce=D((function({lut:e,tetrahedralInterpolation:t,...n},r){const i=I((()=>new F(e,n)),[e,n]);return M((()=>{e&&i.setLUT(e),t&&i.setTetrahedralInterpolationEnabled(t)}),[i,e,t]),B.createElement("primitive",{ref:r,object:i,dispose:null})}));export{ee as Bloom,te as BrightnessContrast,ne as ChromaticAberration,re as ColorAverage,ie as ColorDepth,oe as Depth,se as DepthOfField,ae as DotScreen,ce as EffectComposer,le as EffectComposerContext,ue as Glitch,de as GodRays,me as Grid,fe as HueSaturation,Ce as LUT,pe as Noise,he as Outline,ge as Pixelation,ve as SMAA,ye as SSAO,be as Scanline,we as SelectiveBloom,Ee as Sepia,je as ShockWave,Se as Texture,xe as ToneMapping,Te as Vignette};
+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;
+  }
+
+  return /*#__PURE__*/forwardRef(function Wrap(_ref, ref) {
+    let {
+      blendFunction,
+      opacity,
+      ...props
+    } = _ref;
+    const effect = useMemo(() => new effectImpl(props), [props]);
+    useLayoutEffect(() => {
+      effect.blendMode.blendFunction = blendFunction || defaultBlendMode;
+      if (opacity !== undefined) effect.blendMode.opacity.value = opacity;
+    }, [blendFunction, effect.blendMode, opacity]);
+    return /*#__PURE__*/React.createElement("primitive", {
+      ref: ref,
+      object: effect,
+      dispose: null
+    });
+  });
+};
+const useVector2 = (props, key) => {
+  const vec = props[key];
+  return useMemo(() => {
+    if (vec instanceof Vector2) {
+      return new Vector2().set(vec.x, vec.y);
+    } else if (Array.isArray(vec)) {
+      const [x, y] = vec;
+      return new Vector2().set(x, y);
+    }
+  }, [vec]);
+};
+
+const Bloom = wrapEffect(BloomEffect, BlendFunction.SCREEN);
+
+const BrightnessContrast = wrapEffect(BrightnessContrastEffect);
+
+const ChromaticAberration = /*#__PURE__*/forwardRef(function ChromaticAberration(props, ref) {
+  const offset = useVector2(props, 'offset');
+  const effect = useMemo(() => new ChromaticAberrationEffect({ ...props,
+    offset
+  }), [offset, props]);
+  return /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+const ColorAverage = /*#__PURE__*/forwardRef(function ColorAverage(_ref, ref) {
+  let {
+    blendFunction = BlendFunction.NORMAL
+  } = _ref;
+
+  /** Because ColorAverage blendFunction is not an object but a number, we have to define a custom prop "blendFunction" */
+  const effect = useMemo(() => new ColorAverageEffect(blendFunction), [blendFunction]);
+  return /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+const ColorDepth = wrapEffect(ColorDepthEffect);
+
+const Depth = wrapEffect(DepthEffect);
+
+const EffectComposerContext = /*#__PURE__*/createContext(null);
+const EffectComposer = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    camera,
+    scene,
+    renderPriority = 1,
+    autoClear = true,
+    depthBuffer,
+    disableNormalPass,
+    stencilBuffer,
+    multisampling = 8,
+    frameBufferType = THREE.HalfFloatType
+  } = _ref;
+  const {
+    gl,
+    scene: defaultScene,
+    camera: defaultCamera,
+    size
+  } = useThree();
+  scene = scene || defaultScene;
+  camera = camera || defaultCamera;
+  const [composer, normalPass] = useMemo(() => {
+    // Initialize composer
+    const effectComposer = new EffectComposer$2(gl, {
+      depthBuffer,
+      stencilBuffer,
+      multisampling: isWebGL2Available() ? multisampling : 0,
+      frameBufferType
+    }); // Add render pass
+
+    effectComposer.addPass(new RenderPass(scene, camera)); // Create normal pass
+
+    const pass = disableNormalPass ? null : new NormalPass(scene, camera);
+    if (pass) pass.enabled = false;
+
+    if (pass) {
+      effectComposer.addPass(pass);
+    }
+
+    return [effectComposer, pass];
+  }, [camera, gl, depthBuffer, stencilBuffer, multisampling, frameBufferType, scene, disableNormalPass]);
+  useLayoutEffect(() => composer == null ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
+  useFrame((_, delta) => void (gl.autoClear = autoClear, composer.render(delta)), renderPriority);
+  const group = useRef(null);
+  useLayoutEffect(() => {
+    let effectPass;
+
+    if (group.current && group.current.__r3f && composer) {
+      effectPass = new EffectPass(camera, ...group.current.__r3f.objects);
+      composer.addPass(effectPass);
+      effectPass.renderToScreen = true;
+      if (normalPass) normalPass.enabled = false;
+    }
+
+    return () => {
+      if (effectPass) composer == null ? void 0 : composer.removePass(effectPass);
+      if (normalPass) normalPass.enabled = false;
+    };
+  }, [composer, children, camera]); // Memoize state, otherwise it would trigger all consumers on every render
+
+  const state = useMemo(() => ({
+    composer,
+    normalPass,
+    camera,
+    scene
+  }), [composer, normalPass, camera, scene]); // Expose the composer
+
+  useImperativeHandle(ref, () => composer, [composer]);
+  return /*#__PURE__*/React.createElement(EffectComposerContext.Provider, {
+    value: state
+  }, /*#__PURE__*/React.createElement("group", {
+    ref: group
+  }, children));
+}));
+var EffectComposer$1 = EffectComposer;
+
+const DepthOfField = /*#__PURE__*/forwardRef(function DepthOfField(_ref, ref) {
+  let {
+    target,
+    depthTexture,
+    ...props
+  } = _ref;
+  const {
+    camera
+  } = useContext(EffectComposerContext);
+  const effect = useMemo(() => new DepthOfFieldEffect(camera, props), [camera, props]);
+  useLayoutEffect(() => {
+    if (target) {
+      const vec = target instanceof Vector3 ? new Vector3().set(target.x, target.y, target.z) : new Vector3().set(target[0], target[1], target[2]);
+      effect.target = vec;
+    }
+
+    if (depthTexture) effect.setDepthTexture(depthTexture.texture, depthTexture.packing);
+  }, [target, depthTexture, effect]);
+  return /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+const DotScreen = wrapEffect(DotScreenEffect);
+
+const Glitch = /*#__PURE__*/forwardRef(function Glitch(_ref, ref) {
+  let {
+    active = true,
+    ...props
+  } = _ref;
+  const delay = useVector2(props, 'delay');
+  const duration = useVector2(props, 'duration');
+  const strength = useVector2(props, 'strength');
+  const effect = useMemo(() => new GlitchEffect({ ...props,
+    delay,
+    duration,
+    strength
+  }), [delay, duration, props, strength]);
+  useLayoutEffect(() => {
+    effect.mode = active ? props.mode || GlitchMode.SPORADIC : GlitchMode.DISABLED;
+  }, [active, effect, props.mode]);
+  return /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+const GodRays = /*#__PURE__*/forwardRef(function GodRays(props, ref) {
+  const {
+    camera
+  } = useContext(EffectComposerContext);
+  const effect = useMemo(() => new GodRaysEffect(camera, props.sun, props), [camera, props]);
+  return /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+const Grid = /*#__PURE__*/forwardRef(function Grid(_ref, ref) {
+  let {
+    size,
+    ...props
+  } = _ref;
+  const effect = useMemo(() => new GridEffect(props), [props]);
+  useLayoutEffect(() => {
+    if (size) effect.setSize(size.width, size.height);
+  }, [effect, size]);
+  return /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+const HueSaturation = wrapEffect(HueSaturationEffect);
+
+const Noise = wrapEffect(NoiseEffect, BlendFunction.COLOR_DODGE);
+
+const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, ref) {
+  let {
+    selection = [],
+    selectionLayer = 10,
+    blendFunction,
+    patternTexture,
+    edgeStrength,
+    pulseSpeed,
+    visibleEdgeColor,
+    hiddenEdgeColor,
+    width,
+    height,
+    kernelSize,
+    blur,
+    xRay,
+    ...props
+  } = _ref;
+  const {
+    scene,
+    camera
+  } = useContext(EffectComposerContext);
+  const effect = useMemo(() => new OutlineEffect(scene, camera, {
+    blendFunction,
+    patternTexture,
+    edgeStrength,
+    pulseSpeed,
+    visibleEdgeColor,
+    hiddenEdgeColor,
+    width,
+    height,
+    kernelSize,
+    blur,
+    xRay
+  }), [blendFunction, blur, camera, edgeStrength, height, hiddenEdgeColor, kernelSize, patternTexture, pulseSpeed, scene, visibleEdgeColor, width, xRay]);
+  useEffect(() => {
+    if (selection) {
+      effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
+      return () => void effect.selection.clear();
+    }
+  }, [effect, selection]);
+  useEffect(() => {
+    effect.selectionLayer = selectionLayer;
+  }, [effect, selectionLayer]);
+  return /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+const Pixelation = /*#__PURE__*/forwardRef(function Pixelation(_ref, ref) {
+  let {
+    granularity = 5
+  } = _ref;
+
+  /** Because GlitchEffect granularity is not an object but a number, we have to define a custom prop "granularity" */
+  const effect = useMemo(() => new PixelationEffect(granularity), [granularity]);
+  return /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+const Scanline = wrapEffect(ScanlineEffect, BlendFunction.OVERLAY);
+
+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) {
+  let {
+    selection = [],
+    selectionLayer = 10,
+    lights = [],
+    luminanceThreshold,
+    luminanceSmoothing,
+    intensity,
+    width,
+    height,
+    kernelSize
+  } = _ref;
+
+  if (lights.length === 0) {
+    console.warn('SelectiveBloom requires lights to work.');
+  }
+
+  const {
+    scene,
+    camera
+  } = useContext(EffectComposerContext);
+  const effect = useMemo(() => new SelectiveBloomEffect(scene, camera, {
+    blendFunction: BlendFunction.SCREEN,
+    luminanceThreshold,
+    luminanceSmoothing,
+    intensity,
+    width,
+    height,
+    kernelSize
+  }), [camera, height, intensity, kernelSize, luminanceSmoothing, luminanceThreshold, scene, width]);
+  useEffect(() => {
+    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(() => {
+    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,
+    object: effect,
+    dispose: null
+  });
+});
+
+const Sepia = wrapEffect(SepiaEffect);
+
+const SSAO = /*#__PURE__*/forwardRef(function SSAO(props, ref) {
+  const {
+    camera,
+    normalPass
+  } = useContext(EffectComposerContext);
+  const effect = useMemo(() => {
+    if (normalPass === null) {
+      console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.');
+      return null;
+    }
+
+    return new SSAOEffect(camera, normalPass.renderTarget.texture, {
+      blendFunction: BlendFunction.MULTIPLY,
+      samples: 30,
+      rings: 4,
+      distanceThreshold: 1.0,
+      distanceFalloff: 0.0,
+      rangeThreshold: 0.5,
+      rangeFalloff: 0.1,
+      luminanceInfluence: 0.9,
+      radius: 20,
+      scale: 0.5,
+      bias: 0.5,
+      intensity: 1.0,
+      color: null,
+      ...props
+    });
+  }, [camera, normalPass, props]);
+  return /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+const SMAA = /*#__PURE__*/forwardRef(function SMAA(_ref, ref) {
+  let {
+    preset = SMAAPreset.HIGH,
+    edgeDetectionMode = EdgeDetectionMode.COLOR
+  } = _ref;
+  const smaaProps = useLoader(SMAAImageLoader, '');
+  const effect = useMemo(() => new SMAAEffect(...smaaProps, preset, edgeDetectionMode), [smaaProps, preset, edgeDetectionMode]);
+  return /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+const Texture = /*#__PURE__*/forwardRef(function Texture(_ref, ref) {
+  let {
+    textureSrc,
+    texture,
+    ...props
+  } = _ref;
+  const t = useLoader(TextureLoader, textureSrc);
+  useLayoutEffect(() => {
+    t.encoding = sRGBEncoding;
+    t.wrapS = t.wrapT = RepeatWrapping;
+  }, [t]);
+  const effect = useMemo(() => new TextureEffect({ ...props,
+    texture: t || texture
+  }), [props, t, texture]);
+  return /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+const ToneMapping = wrapEffect(ToneMappingEffect);
+
+const Vignette = wrapEffect(VignetteEffect);
+
+const ShockWave = wrapEffect(ShockWaveEffect);
+
+const LUT = /*#__PURE__*/forwardRef(function LUT(_ref, ref) {
+  let {
+    lut,
+    tetrahedralInterpolation,
+    ...props
+  } = _ref;
+  const effect = useMemo(() => new LUTEffect(lut, props), [lut, props]);
+  useLayoutEffect(() => {
+    if (lut) effect.setLUT(lut);
+    if (tetrahedralInterpolation) effect.setTetrahedralInterpolationEnabled(tetrahedralInterpolation);
+  }, [effect, lut, tetrahedralInterpolation]);
+  return /*#__PURE__*/React.createElement("primitive", {
+    ref: ref,
+    object: effect,
+    dispose: null
+  });
+});
+
+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 };

package/dist/util.d.ts

@@ -1,9 +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 declare const isWebGL2Available: () => boolean;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.0.5",
+  "version": "2.1.3",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -38,53 +38,54 @@
     "typegen": "tsc --emitDeclarationOnly || true"
   },
   "dependencies": {
-    "postprocessing": "^6.22.2",
-    "react-merge-refs": "^1.1.0"
+    "postprocessing": "^6.24.0",
+    "react-merge-refs": "^1.1.0",
+    "three-stdlib": "^2.8.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/plugin-transform-modules-commonjs": "7.14.5",
-    "@babel/plugin-transform-parameters": "7.14.5",
-    "@babel/plugin-transform-runtime": "7.14.5",
-    "@babel/plugin-transform-template-literals": "7.14.5",
-    "@babel/preset-env": "^7.14.7",
-    "@babel/preset-react": "7.14.5",
-    "@babel/preset-typescript": "^7.14.5",
-    "@react-three/fiber": "^6.0.1",
+    "@babel/core": "^7.16.5",
+    "@babel/plugin-transform-modules-commonjs": "7.16.5",
+    "@babel/plugin-transform-parameters": "7.16.5",
+    "@babel/plugin-transform-runtime": "7.16.5",
+    "@babel/plugin-transform-template-literals": "7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-react": "7.16.5",
+    "@babel/preset-typescript": "^7.16.5",
+    "@react-three/fiber": "^7.0.24",
     "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.1",
+    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.2",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
+    "@rollup/plugin-node-resolve": "^13.1.1",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
     "@types/react-test-renderer": "^17.0.1",
-    "@types/three": "^0.130.0",
-    "@typescript-eslint/eslint-plugin": "^4.28.4",
-    "@typescript-eslint/parser": "^4.28.4",
-    "eslint": "^7.31.0",
+    "@types/three": "^0.135.0",
+    "@typescript-eslint/eslint-plugin": "^5.8.0",
+    "@typescript-eslint/parser": "^5.8.0",
+    "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.23.4",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^7.0.1",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "husky": "^7.0.4",
     "husky-run": "^0.0.0",
-    "lint-staged": "^11.0.1",
-    "prettier": "^2.3.2",
+    "lint-staged": "^12.1.3",
+    "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "rollup": "^2.53.2",
+    "rollup": "^2.61.1",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.3.5"
+    "typescript": "^4.5.4"
   },
   "peerDependencies": {
     "@react-three/fiber": ">=7.0",
     "react": ">=17.0",
     "react-dom": ">=17.0",
-    "three": ">=0.130.1"
+    "three": ">=0.136.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {