@react-three/postprocessing 2.8.0 → 2.8.2

package/dist/effects/Bloom.d.ts

@@ -1,17 +1,5 @@
 /// <reference types="react" />
 import { BloomEffect, BlendFunction } from 'postprocessing';
 export declare const Bloom: import("react").ForwardRefExoticComponent<{
-    mipmapBlur?: boolean;
-    radius?: number;
-    levels?: number;
-    blendFunction?: BlendFunction;
-    luminanceThreshold?: number;
-    luminanceSmoothing?: number;
-    intensity?: number;
-    width?: number;
-    height?: number;
-    kernelSize?: KernelSize;
-} & Partial<{
     blendFunction: BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof BloomEffect>>;
+} & import("react").RefAttributes<typeof BloomEffect>>;

package/dist/effects/BrightnessContrast.d.ts

@@ -1,10 +1,3 @@
 /// <reference types="react" />
 import { BrightnessContrastEffect } from 'postprocessing';
-export declare const BrightnessContrast: import("react").ForwardRefExoticComponent<{
-    blendFunction?: import("postprocessing").BlendFunction;
-    brightness?: number;
-    contrast?: number;
-} & Partial<{
-    blendFunction: import("postprocessing").BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof BrightnessContrastEffect>>;
+export declare const BrightnessContrast: import("react").ForwardRefExoticComponent<Pick<import("../util").EffectProps<typeof BrightnessContrastEffect>, "children" | "attach" | "attachArray" | "attachObject" | "attachFns" | "args" | "key" | "onUpdate" | "blendFunction" | "opacity" | keyof BrightnessContrastEffect | "brightness" | "contrast"> & import("react").RefAttributes<typeof BrightnessContrastEffect>>;

package/dist/effects/ColorDepth.d.ts

@@ -1,9 +1,3 @@
 /// <reference types="react" />
 import { ColorDepthEffect } from 'postprocessing';
-export declare const ColorDepth: import("react").ForwardRefExoticComponent<{
-    blendFunction?: import("postprocessing").BlendFunction;
-    bits?: number;
-} & Partial<{
-    blendFunction: import("postprocessing").BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof ColorDepthEffect>>;
+export declare const ColorDepth: import("react").ForwardRefExoticComponent<Pick<import("../util").EffectProps<typeof ColorDepthEffect>, "children" | "attach" | "attachArray" | "attachObject" | "attachFns" | "args" | "key" | "onUpdate" | "blendFunction" | "opacity" | keyof ColorDepthEffect | "bits"> & import("react").RefAttributes<typeof ColorDepthEffect>>;

package/dist/effects/Depth.d.ts

@@ -1,9 +1,3 @@
 /// <reference types="react" />
 import { DepthEffect } from 'postprocessing';
-export declare const Depth: import("react").ForwardRefExoticComponent<{
-    blendFunction?: import("postprocessing").BlendFunction;
-    inverted?: boolean;
-} & Partial<{
-    blendFunction: import("postprocessing").BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof DepthEffect>>;
+export declare const Depth: import("react").ForwardRefExoticComponent<Pick<import("../util").EffectProps<typeof DepthEffect>, "children" | "attach" | "attachArray" | "attachObject" | "attachFns" | "args" | "key" | "onUpdate" | "blendFunction" | "opacity" | keyof DepthEffect> & import("react").RefAttributes<typeof DepthEffect>>;

package/dist/effects/DepthOfField.d.ts

@@ -6,6 +6,7 @@ export declare const DepthOfField: React.ForwardRefExoticComponent<{
     blendFunction?: import("postprocessing").BlendFunction;
     focusDistance?: number;
     focalLength?: number;
+    focusRange?: number;
     bokehScale?: number;
     width?: number;
     height?: number;

package/dist/effects/DotScreen.d.ts

@@ -1,10 +1,3 @@
 /// <reference types="react" />
 import { DotScreenEffect } from 'postprocessing';
-export declare const DotScreen: import("react").ForwardRefExoticComponent<{
-    blendFunction?: import("postprocessing").BlendFunction;
-    angle?: number;
-    scale?: number;
-} & Partial<{
-    blendFunction: import("postprocessing").BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof DotScreenEffect>>;
+export declare const DotScreen: import("react").ForwardRefExoticComponent<Pick<import("../util").EffectProps<typeof DotScreenEffect>, "children" | "attach" | "attachArray" | "attachObject" | "attachFns" | "args" | "key" | "onUpdate" | "scale" | "blendFunction" | "opacity" | "angle" | keyof DotScreenEffect> & import("react").RefAttributes<typeof DotScreenEffect>>;

package/dist/effects/HueSaturation.d.ts

@@ -1,10 +1,3 @@
 /// <reference types="react" />
 import { HueSaturationEffect } from 'postprocessing';
-export declare const HueSaturation: import("react").ForwardRefExoticComponent<{
-    blendFunction?: import("postprocessing").BlendFunction;
-    hue?: number;
-    saturation?: number;
-} & Partial<{
-    blendFunction: import("postprocessing").BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof HueSaturationEffect>>;
+export declare const HueSaturation: import("react").ForwardRefExoticComponent<Pick<import("../util").EffectProps<typeof HueSaturationEffect>, "children" | "attach" | "attachArray" | "attachObject" | "attachFns" | "args" | "key" | "onUpdate" | "blendFunction" | "opacity" | keyof HueSaturationEffect | "hue" | "saturation"> & import("react").RefAttributes<typeof HueSaturationEffect>>;

package/dist/effects/Noise.d.ts

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 import { NoiseEffect, BlendFunction } from 'postprocessing';
 export declare const Noise: import("react").ForwardRefExoticComponent<{
-    blendFunction?: BlendFunction;
-    premultiply?: boolean;
-} & Partial<{
     blendFunction: BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof NoiseEffect>>;
+} & import("react").RefAttributes<typeof NoiseEffect>>;

package/dist/effects/ScanlineEffect.d.ts

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 import { ScanlineEffect, BlendFunction } from 'postprocessing';
 export declare const Scanline: import("react").ForwardRefExoticComponent<{
-    blendFunction?: BlendFunction;
-    density?: number;
-} & Partial<{
     blendFunction: BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof ScanlineEffect>>;
+} & import("react").RefAttributes<typeof ScanlineEffect>>;

package/dist/effects/Sepia.d.ts

@@ -1,9 +1,3 @@
 /// <reference types="react" />
 import { SepiaEffect } from 'postprocessing';
-export declare const Sepia: import("react").ForwardRefExoticComponent<{
-    blendFunction?: import("postprocessing").BlendFunction;
-    intensity?: number;
-} & Partial<{
-    blendFunction: import("postprocessing").BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof SepiaEffect>>;
+export declare const Sepia: import("react").ForwardRefExoticComponent<Pick<import("../util").EffectProps<typeof SepiaEffect>, "children" | "attach" | "attachArray" | "attachObject" | "attachFns" | "args" | "key" | "onUpdate" | "blendFunction" | "opacity" | "intensity" | keyof SepiaEffect> & import("react").RefAttributes<typeof SepiaEffect>>;

package/dist/effects/ShockWave.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="react" />
 import { ShockWaveEffect } from 'postprocessing';
-export declare const ShockWave: import("react").ForwardRefExoticComponent<import("three").Camera & Partial<{
-    blendFunction: import("postprocessing").BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof ShockWaveEffect>>;
+export declare const ShockWave: import("react").ForwardRefExoticComponent<Pick<import("../util").EffectProps<typeof ShockWaveEffect>, "children" | "camera" | "quaternion" | "attach" | "attachArray" | "attachObject" | "attachFns" | "args" | "key" | "onUpdate" | "position" | "up" | "scale" | "rotation" | "matrix" | "layers" | "dispose" | "type" | "id" | "uuid" | "name" | "parent" | "modelViewMatrix" | "normalMatrix" | "matrixWorld" | "matrixAutoUpdate" | "matrixWorldNeedsUpdate" | "visible" | "castShadow" | "receiveShadow" | "frustumCulled" | "renderOrder" | "animations" | "userData" | "customDepthMaterial" | "customDistanceMaterial" | "isObject3D" | "onBeforeRender" | "onAfterRender" | "applyMatrix4" | "applyQuaternion" | "setRotationFromAxisAngle" | "setRotationFromEuler" | "setRotationFromMatrix" | "setRotationFromQuaternion" | "rotateOnAxis" | "rotateOnWorldAxis" | "rotateX" | "rotateY" | "rotateZ" | "translateOnAxis" | "translateX" | "translateY" | "translateZ" | "localToWorld" | "worldToLocal" | "lookAt" | "add" | "remove" | "removeFromParent" | "clear" | "getObjectById" | "getObjectByName" | "getObjectByProperty" | "getWorldPosition" | "getWorldQuaternion" | "getWorldScale" | "getWorldDirection" | "raycast" | "traverse" | "traverseVisible" | "traverseAncestors" | "updateMatrix" | "updateMatrixWorld" | "updateWorldMatrix" | "toJSON" | "clone" | "copy" | "addEventListener" | "hasEventListener" | "removeEventListener" | "dispatchEvent" | "blendFunction" | "opacity" | "update" | "setSize" | "initialize" | "attributes" | "fragmentShader" | "vertexShader" | "defines" | "uniforms" | "extensions" | "blendMode" | "setDepthTexture" | "matrixWorldInverse" | "projectionMatrix" | "projectionMatrixInverse" | "isCamera" | "epicenter" | "speed" | "explode"> & import("react").RefAttributes<typeof ShockWaveEffect>>;

package/dist/effects/TiltShift.d.ts

@@ -1,17 +1,5 @@
 /// <reference types="react" />
 import { TiltShiftEffect, BlendFunction } from 'postprocessing';
 export declare const TiltShift: import("react").ForwardRefExoticComponent<{
-    blendFunction?: BlendFunction;
-    offset?: number;
-    rotation?: number;
-    focusArea?: number;
-    feather?: number;
-    bias?: number;
-    kernelSize?: KernelSize;
-    resolutionScale?: number;
-    resolutionX?: Resolution;
-    resolutionY?: Resolutio;
-} & Partial<{
     blendFunction: BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof TiltShiftEffect>>;
+} & import("react").RefAttributes<typeof TiltShiftEffect>>;

package/dist/effects/TiltShift2.d.ts

@@ -1,23 +1,19 @@
 /// <reference types="react" />
 import { BlendFunction, Effect } from 'postprocessing';
 export declare class TiltShiftEffect extends Effect {
-    constructor({ blendFunction, blur, gradient, start, end, delta, }?: {
+    constructor({ blendFunction, blur, // [0, 1], can go beyond 1 for extra
+    taper, // [0, 1], can go beyond 1 for extra
+    start, // [0,1] percentage x,y of screenspace
+    end, // [0,1] percentage x,y of screenspace
+    samples, // number of blur samples
+    direction }?: {
         blendFunction?: BlendFunction;
         blur?: number;
-        gradient?: number;
+        taper?: number;
         start?: number[];
         end?: number[];
-        delta?: number[];
+        samples?: number;
+        direction?: number[];
     });
 }
-export declare const TiltShift2: import("react").ForwardRefExoticComponent<{
-    blendFunction?: BlendFunction;
-    blur?: number;
-    gradient?: number;
-    start?: number[];
-    end?: number[];
-    delta?: number[];
-} & Partial<{
-    blendFunction: BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof TiltShiftEffect>>;
+export declare const TiltShift2: import("react").ForwardRefExoticComponent<Pick<import("../util").EffectProps<typeof TiltShiftEffect>, "children" | "attach" | "attachArray" | "attachObject" | "attachFns" | "args" | "key" | "onUpdate" | "blendFunction" | "opacity" | "blur" | "samples" | "taper" | "start" | "end" | "direction" | keyof TiltShiftEffect> & import("react").RefAttributes<typeof TiltShiftEffect>>;

package/dist/effects/ToneMapping.d.ts

@@ -1,14 +1,3 @@
 /// <reference types="react" />
 import { ToneMappingEffect } from 'postprocessing';
-export declare const ToneMapping: import("react").ForwardRefExoticComponent<{
-    blendFunction?: import("postprocessing").BlendFunction;
-    adaptive?: boolean;
-    resolution?: number;
-    middleGrey?: number;
-    maxLuminance?: number;
-    averageLuminance?: number;
-    adaptationRate?: number;
-} & Partial<{
-    blendFunction: import("postprocessing").BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof ToneMappingEffect>>;
+export declare const ToneMapping: import("react").ForwardRefExoticComponent<Pick<import("../util").EffectProps<typeof ToneMappingEffect>, "children" | "attach" | "attachArray" | "attachObject" | "attachFns" | "args" | "key" | "onUpdate" | "blendFunction" | "opacity" | keyof ToneMappingEffect | "middleGrey" | "maxLuminance" | "averageLuminance"> & import("react").RefAttributes<typeof ToneMappingEffect>>;

package/dist/effects/Vignette.d.ts

@@ -1,11 +1,3 @@
 /// <reference types="react" />
 import { VignetteEffect } from 'postprocessing';
-export declare const Vignette: import("react").ForwardRefExoticComponent<{
-    blendFunction?: import("postprocessing").BlendFunction;
-    eskil?: boolean;
-    offset?: number;
-    darkness?: number;
-} & Partial<{
-    blendFunction: import("postprocessing").BlendFunction;
-    opacity: number;
-}> & import("react").RefAttributes<typeof VignetteEffect>>;
+export declare const Vignette: import("react").ForwardRefExoticComponent<Pick<import("../util").EffectProps<typeof VignetteEffect>, "children" | "attach" | "attachArray" | "attachObject" | "attachFns" | "args" | "key" | "onUpdate" | "blendFunction" | "opacity" | "offset" | keyof VignetteEffect | "darkness"> & import("react").RefAttributes<typeof VignetteEffect>>;

package/dist/index.cjs

@@ -3,75 +3,97 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var postprocessing = require('postprocessing');
+var _construct = require('@babel/runtime/helpers/construct');
+var _extends = require('@babel/runtime/helpers/extends');
 var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var React = require('react');
-var three = require('three');
+var THREE = require('three');
 var fiber = require('@react-three/fiber');
-var _extends = require('@babel/runtime/helpers/extends');
-var _construct = require('@babel/runtime/helpers/construct');
 var threeStdlib = require('three-stdlib');
 var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
 var screenSpaceReflections = require('screen-space-reflections');
 
 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 _construct__default = /*#__PURE__*/_interopDefaultLegacy(_construct);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _construct__default = /*#__PURE__*/_interopDefaultLegacy(_construct);
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
 
 var _excluded$9 = ["blendFunction", "opacity"];
-
-var isRef = function isRef(ref) {
-  return !!ref.current;
-};
-
 var resolveRef = function resolveRef(ref) {
-  return isRef(ref) ? ref.current : ref;
+  return typeof ref === 'object' && 'current' in 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,
+var i = 0;
+var components = new WeakMap();
+var wrapEffect = function wrapEffect(effect, defaults) {
+  return /* @__PURE__ */React__namespace.forwardRef(function Effect(_ref, ref) {
+    var _ref$blendFunction = _ref.blendFunction,
+        blendFunction = _ref$blendFunction === void 0 ? defaults == null ? void 0 : defaults.blendFunction : _ref$blendFunction,
+        _ref$opacity = _ref.opacity,
+        opacity = _ref$opacity === void 0 ? defaults == null ? void 0 : defaults.opacity : _ref$opacity,
         props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$9);
 
-    var invalidate = fiber.useThree(function (state) {
-      return state.invalidate;
+    var Component = components.get(effect);
+
+    if (!Component) {
+      var _extend;
+
+      var key = "@react-three/postprocessing/" + effect.name + "-" + i++;
+      fiber.extend((_extend = {}, _extend[key] = effect, _extend));
+      components.set(effect, Component = key);
+    }
+
+    var camera = fiber.useThree(function (state) {
+      return state.camera;
     });
-    var effect = React.useMemo(function () {
-      return new effectImpl(props);
-    }, [props]);
-    React.useLayoutEffect(function () {
-      effect.blendMode.blendFunction = !blendFunction && blendFunction !== 0 ? defaultBlendMode : blendFunction;
-      if (opacity !== undefined) effect.blendMode.opacity.value = opacity;
-      invalidate();
-    }, [blendFunction, effect.blendMode, opacity]);
-    return /*#__PURE__*/React__default["default"].createElement("primitive", {
+    var args = React__namespace.useMemo(function () {
+      var _defaults$args, _props$args;
+
+      return [].concat((_defaults$args = defaults == null ? void 0 : defaults.args) != null ? _defaults$args : [], (_props$args = props.args) != null ? _props$args : [_extends__default["default"]({}, defaults, props)]);
+    }, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(props)]);
+    return /*#__PURE__*/React__namespace.createElement(Component, _extends__default["default"]({
+      camera: camera,
+      "blendMode-blendFunction": blendFunction,
+      "blendMode-opacity": opacity
+    }, props, {
       ref: ref,
-      object: effect,
-      dispose: null
-    });
+      args: args
+    }));
   });
 };
 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 value = props[key];
+  return React__namespace.useMemo(function () {
+    if (typeof value === 'number') return new THREE__namespace.Vector2(value, value);else if (value) return _construct__default["default"](THREE__namespace.Vector2, value);else return new THREE__namespace.Vector2();
+  }, [value]);
 };
 
-var Bloom = wrapEffect(postprocessing.BloomEffect, postprocessing.BlendFunction.ADD);
+var Bloom = wrapEffect(postprocessing.BloomEffect, {
+  blendFunction: postprocessing.BlendFunction.ADD
+});
 
 var BrightnessContrast = wrapEffect(postprocessing.BrightnessContrastEffect);
 
@@ -126,7 +148,7 @@ var EffectComposer = /*#__PURE__*/React__default["default"].memo( /*#__PURE__*/R
       _ref$multisampling = _ref.multisampling,
       multisampling = _ref$multisampling === void 0 ? 8 : _ref$multisampling,
       _ref$frameBufferType = _ref.frameBufferType,
-      frameBufferType = _ref$frameBufferType === void 0 ? three.HalfFloatType : _ref$frameBufferType;
+      frameBufferType = _ref$frameBufferType === void 0 ? THREE.HalfFloatType : _ref$frameBufferType;
 
   var _useThree = fiber.useThree(),
       gl = _useThree.gl,
@@ -243,7 +265,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;
     }
 
@@ -327,7 +349,9 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(_ref, ref) {
 
 var HueSaturation = wrapEffect(postprocessing.HueSaturationEffect);
 
-var Noise = wrapEffect(postprocessing.NoiseEffect, postprocessing.BlendFunction.COLOR_DODGE);
+var Noise = wrapEffect(postprocessing.NoiseEffect, {
+  blendFunction: postprocessing.BlendFunction.COLOR_DODGE
+});
 
 var _excluded$5 = ["enabled", "children"];
 var selectionContext = /*#__PURE__*/React.createContext(null);
@@ -482,7 +506,9 @@ var Pixelation = /*#__PURE__*/React.forwardRef(function Pixelation(_ref, ref) {
   });
 });
 
-var Scanline = wrapEffect(postprocessing.ScanlineEffect, postprocessing.BlendFunction.OVERLAY);
+var Scanline = wrapEffect(postprocessing.ScanlineEffect, {
+  blendFunction: postprocessing.BlendFunction.OVERLAY
+});
 
 var _excluded$3 = ["selection", "selectionLayer", "lights", "luminanceThreshold", "luminanceSmoothing", "intensity", "width", "height", "kernelSize", "mipmapBlur", "radius", "levels"];
 
@@ -655,10 +681,10 @@ var Texture = /*#__PURE__*/React.forwardRef(function Texture(_ref, ref) {
       texture = _ref.texture,
       props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
 
-  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, {
@@ -702,10 +728,12 @@ var LUT = /*#__PURE__*/React.forwardRef(function LUT(_ref, ref) {
   });
 });
 
-var TiltShift = wrapEffect(postprocessing.TiltShiftEffect, postprocessing.BlendFunction.ADD);
+var TiltShift = wrapEffect(postprocessing.TiltShiftEffect, {
+  blendFunction: postprocessing.BlendFunction.ADD
+});
 
 var TiltShiftShader = {
-  fragmentShader: "\n    // original shader by Evan Wallace\n    uniform float blur;\n    uniform float gradient;\n    uniform vec2 start;\n    uniform vec2 end;\n    uniform vec2 delta;\n\n    float random(vec3 scale, float seed) {\n      /* use the fragment position for a different seed per-pixel */\n      return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);\n    }\n\n    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n\n        vec4 color = vec4(0.0);\n        float total = 0.0;\n        vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);\n        vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);\n\n        /* randomize the lookup values to hide the fixed number of samples */\n        float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);\n        vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));\n        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradient) * blur;\n\n        #pragma unroll_loop_start\n        for (float i = -3.0; i <= 3.0; i++) {\n            float percent = (i + offset - 0.5) / 3.0;\n            float weight = 1.0 - abs(percent);\n            vec4 sample_t = texture2D(inputBuffer, uv + delta / resolution * percent * radius);\n            /* switch to pre-multiplied alpha to correctly blur transparent images */\n            sample_t.rgb *= sample_t.a;\n            color += sample_t * weight;\n            total += weight;\n        }\n        #pragma unroll_loop_end\n\n        outputColor = color / total;\n        /* switch back from pre-multiplied alpha */\n        outputColor.rgb /= outputColor.a + 0.00001;\n    }\n    "
+  fragmentShader: "\n\n    // original shader by Evan Wallace\n\n    #define MAX_ITERATIONS 100\n\n    uniform float blur;\n    uniform float taper;\n    uniform vec2 start;\n    uniform vec2 end;\n    uniform vec2 direction;\n    uniform int samples;\n\n    float random(vec3 scale, float seed) {\n        /* use the fragment position for a different seed per-pixel */\n        return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);\n    }\n\n    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n        vec4 color = vec4(0.0);\n        float total = 0.0;\n        vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);\n        vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);\n        float f_samples = float(samples);\n        float half_samples = f_samples / 2.0;\n\n        // use screen diagonal to normalize blur radii\n        float maxScreenDistance = distance(vec2(0.0), resolution); // diagonal distance\n        float gradientRadius = taper * (maxScreenDistance);\n        float blurRadius = blur * (maxScreenDistance / 16.0);\n\n        /* randomize the lookup values to hide the fixed number of samples */\n        float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);\n        vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));\n        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradientRadius) * blurRadius;\n\n        #pragma unroll_loop_start\n        for (int i = 0; i <= MAX_ITERATIONS; i++) {\n            if (i >= samples) { break; } // return early if over sample count\n            float f_i = float(i);\n            float s_i = -half_samples + f_i;\n            float percent = (s_i + offset - 0.5) / half_samples;\n            float weight = 1.0 - abs(percent);\n            vec4 sample_i = texture2D(inputBuffer, uv + normalize(direction) / resolution * percent * radius);\n            /* switch to pre-multiplied alpha to correctly blur transparent images */\n            sample_i.rgb *= sample_i.a;\n            color += sample_i * weight;\n            total += weight;\n        }\n        #pragma unroll_loop_end\n\n        outputColor = color / total;\n\n        /* switch back from pre-multiplied alpha */\n        outputColor.rgb /= outputColor.a + 0.00001;\n    }\n    "
 };
 var TiltShiftEffect = /*#__PURE__*/function (_Effect) {
   _inheritsLoose__default["default"](TiltShiftEffect, _Effect);
@@ -713,28 +741,30 @@ var TiltShiftEffect = /*#__PURE__*/function (_Effect) {
   function TiltShiftEffect(_temp) {
     var _ref = _temp === void 0 ? {} : _temp,
         _ref$blendFunction = _ref.blendFunction,
-        blendFunction = _ref$blendFunction === void 0 ? postprocessing.BlendFunction.ADD : _ref$blendFunction,
+        blendFunction = _ref$blendFunction === void 0 ? postprocessing.BlendFunction.NORMAL : _ref$blendFunction,
         _ref$blur = _ref.blur,
-        blur = _ref$blur === void 0 ? 20.0 : _ref$blur,
-        _ref$gradient = _ref.gradient,
-        gradient = _ref$gradient === void 0 ? 1100.0 : _ref$gradient,
+        blur = _ref$blur === void 0 ? 1.0 : _ref$blur,
+        _ref$taper = _ref.taper,
+        taper = _ref$taper === void 0 ? 0.5 : _ref$taper,
         _ref$start = _ref.start,
         start = _ref$start === void 0 ? [0.5, 0.0] : _ref$start,
         _ref$end = _ref.end,
         end = _ref$end === void 0 ? [0.5, 1.0] : _ref$end,
-        _ref$delta = _ref.delta,
-        delta = _ref$delta === void 0 ? [1, 1] : _ref$delta;
+        _ref$samples = _ref.samples,
+        samples = _ref$samples === void 0 ? 10.0 : _ref$samples,
+        _ref$direction = _ref.direction,
+        direction = _ref$direction === void 0 ? [1, 1] : _ref$direction;
 
     return _Effect.call(this, 'TiltShiftEffect', TiltShiftShader.fragmentShader, {
       blendFunction: blendFunction,
       attributes: postprocessing.EffectAttribute.CONVOLUTION,
-      uniforms: new Map([['blur', new three.Uniform(blur)], ['gradient', new three.Uniform(gradient)], ['start', new three.Uniform(start)], ['end', new three.Uniform(end)], ['delta', new three.Uniform(delta)]])
+      uniforms: new Map([['blur', new THREE.Uniform(blur)], ['taper', new THREE.Uniform(taper)], ['start', new THREE.Uniform(start)], ['end', new THREE.Uniform(end)], ['samples', new THREE.Uniform(samples)], ['direction', new THREE.Uniform(direction)]])
     }) || this;
   }
 
   return TiltShiftEffect;
 }(postprocessing.Effect);
-var TiltShift2 = wrapEffect(TiltShiftEffect, postprocessing.BlendFunction.NORMAL);
+var TiltShift2 = wrapEffect(TiltShiftEffect);
 
 var _excluded = ["ENABLE_BLUR", "USE_MRT"];
 
@@ -818,4 +848,7 @@ exports.TiltShift2 = TiltShift2;
 exports.TiltShiftEffect = TiltShiftEffect;
 exports.ToneMapping = ToneMapping;
 exports.Vignette = Vignette;
+exports.resolveRef = resolveRef;
 exports.selectionContext = selectionContext;
+exports.useVector2 = useVector2;
+exports.wrapEffect = wrapEffect;

package/dist/index.d.ts

@@ -28,3 +28,4 @@ export * from './effects/TiltShift2';
 export * from './effects/SSR';
 export * from './Selection';
 export * from './EffectComposer';
+export * from './util';

package/dist/index.js

@@ -1,52 +1,60 @@
-import { BlendFunction, BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, EffectPass, DepthOfFieldEffect, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAPreset, EdgeDetectionMode, SMAAImageLoader, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUTEffect, TiltShiftEffect as TiltShiftEffect$1, Effect, EffectAttribute } from 'postprocessing';
-import React, { forwardRef, useMemo, useLayoutEffect, createContext, useEffect, useRef, useImperativeHandle, useContext, useState } from 'react';
-import { Vector2, HalfFloatType, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping, Uniform } from 'three';
-import { useThree, useFrame, useLoader } from '@react-three/fiber';
-import { isWebGL2Available } from 'three-stdlib';
+import { BloomEffect, BlendFunction, BrightnessContrastEffect, ChromaticAberrationEffect, ColorAverageEffect, ColorDepthEffect, DepthEffect, EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, EffectPass, DepthOfFieldEffect, DotScreenEffect, GlitchEffect, GlitchMode, GodRaysEffect, GridEffect, HueSaturationEffect, NoiseEffect, OutlineEffect, PixelationEffect, ScanlineEffect, SelectiveBloomEffect, SepiaEffect, SSAOEffect, SMAAPreset, EdgeDetectionMode, SMAAImageLoader, SMAAEffect, TextureEffect, ToneMappingEffect, VignetteEffect, ShockWaveEffect, LUTEffect, TiltShiftEffect as TiltShiftEffect$1, Effect, EffectAttribute } from 'postprocessing';
 import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import React__default, { forwardRef, useMemo, createContext, useEffect, useRef, useLayoutEffect, useImperativeHandle, useContext, useState } from 'react';
+import * as THREE from 'three';
+import { HalfFloatType, Vector3, TextureLoader, sRGBEncoding, RepeatWrapping, Uniform } from 'three';
+import { extend, useThree, useFrame, useLoader } from '@react-three/fiber';
+import { isWebGL2Available } from 'three-stdlib';
 import { SSREffect } from 'screen-space-reflections';
 
-const isRef = ref => !!ref.current;
+const resolveRef = ref => typeof ref === 'object' && 'current' in ref ? ref.current : ref;
+let i = 0;
+const components = new WeakMap();
+const wrapEffect = (effect, defaults) => /* @__PURE__ */React.forwardRef(function Effect(_ref, ref) {
+  let {
+    blendFunction = defaults == null ? void 0 : defaults.blendFunction,
+    opacity = defaults == null ? void 0 : defaults.opacity,
+    ...props
+  } = _ref;
+  let Component = components.get(effect);
 
-const resolveRef = ref => isRef(ref) ? ref.current : ref;
-const wrapEffect = function (effectImpl, defaultBlendMode) {
-  if (defaultBlendMode === void 0) {
-    defaultBlendMode = BlendFunction.NORMAL;
+  if (!Component) {
+    const key = `@react-three/postprocessing/${effect.name}-${i++}`;
+    extend({
+      [key]: effect
+    });
+    components.set(effect, Component = key);
   }
 
-  return /*#__PURE__*/forwardRef(function Wrap(_ref, ref) {
-    let {
-      blendFunction,
-      opacity,
+  const camera = useThree(state => state.camera);
+  const args = React.useMemo(() => {
+    var _defaults$args, _props$args;
+
+    return [...((_defaults$args = defaults == null ? void 0 : defaults.args) != null ? _defaults$args : []), ...((_props$args = props.args) != null ? _props$args : [{ ...defaults,
       ...props
-    } = _ref;
-    const invalidate = useThree(state => state.invalidate);
-    const effect = useMemo(() => new effectImpl(props), [props]);
-    useLayoutEffect(() => {
-      effect.blendMode.blendFunction = !blendFunction && blendFunction !== 0 ? defaultBlendMode : blendFunction;
-      if (opacity !== undefined) effect.blendMode.opacity.value = opacity;
-      invalidate();
-    }, [blendFunction, effect.blendMode, opacity]);
-    return /*#__PURE__*/React.createElement("primitive", {
-      ref: ref,
-      object: effect,
-      dispose: null
-    });
-  });
-};
+    }])];
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [JSON.stringify(props)]);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    camera: camera,
+    "blendMode-blendFunction": blendFunction,
+    "blendMode-opacity": opacity
+  }, props, {
+    ref: ref,
+    args: args
+  }));
+});
 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 value = props[key];
+  return React.useMemo(() => {
+    if (typeof value === 'number') return new THREE.Vector2(value, value);else if (value) return new THREE.Vector2(...value);else return new THREE.Vector2();
+  }, [value]);
 };
 
-const Bloom = wrapEffect(BloomEffect, BlendFunction.ADD);
+const Bloom = wrapEffect(BloomEffect, {
+  blendFunction: BlendFunction.ADD
+});
 
 const BrightnessContrast = wrapEffect(BrightnessContrastEffect);
 
@@ -55,7 +63,7 @@ const ChromaticAberration = /*#__PURE__*/forwardRef(function ChromaticAberration
   const effect = useMemo(() => new ChromaticAberrationEffect({ ...props,
     offset
   }), [offset, props]);
-  return /*#__PURE__*/React.createElement("primitive", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -69,7 +77,7 @@ const ColorAverage = /*#__PURE__*/forwardRef(function ColorAverage(_ref, 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", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -81,7 +89,7 @@ const ColorDepth = wrapEffect(ColorDepthEffect);
 const Depth = wrapEffect(DepthEffect);
 
 const EffectComposerContext = /*#__PURE__*/createContext(null);
-const EffectComposer = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef((_ref, ref) => {
+const EffectComposer = /*#__PURE__*/React__default.memo( /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
     camera,
@@ -172,9 +180,9 @@ const EffectComposer = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef((_ref, r
   }), [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]); // Expose the composer
 
   useImperativeHandle(ref, () => composer, [composer]);
-  return /*#__PURE__*/React.createElement(EffectComposerContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(EffectComposerContext.Provider, {
     value: state
-  }, /*#__PURE__*/React.createElement("group", {
+  }, /*#__PURE__*/React__default.createElement("group", {
     ref: group
   }, children));
 }));
@@ -199,7 +207,7 @@ const DepthOfField = /*#__PURE__*/forwardRef(function DepthOfField(_ref, ref) {
     if (depthTexture) effect.setDepthTexture(depthTexture.texture, depthTexture.packing);
     invalidate();
   }, [target, depthTexture, effect]);
-  return /*#__PURE__*/React.createElement("primitive", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -226,7 +234,7 @@ const Glitch = /*#__PURE__*/forwardRef(function Glitch(_ref, ref) {
     effect.mode = active ? props.mode || GlitchMode.SPORADIC : GlitchMode.DISABLED;
     invalidate();
   }, [active, effect, props.mode]);
-  return /*#__PURE__*/React.createElement("primitive", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -238,7 +246,7 @@ const GodRays = /*#__PURE__*/forwardRef(function GodRays(props, ref) {
     camera
   } = useContext(EffectComposerContext);
   const effect = useMemo(() => new GodRaysEffect(camera, props.sun, props), [camera, props]);
-  return /*#__PURE__*/React.createElement("primitive", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -256,7 +264,7 @@ const Grid = /*#__PURE__*/forwardRef(function Grid(_ref, ref) {
     if (size) effect.setSize(size.width, size.height);
     invalidate();
   }, [effect, size]);
-  return /*#__PURE__*/React.createElement("primitive", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -265,7 +273,9 @@ const Grid = /*#__PURE__*/forwardRef(function Grid(_ref, ref) {
 
 const HueSaturation = wrapEffect(HueSaturationEffect);
 
-const Noise = wrapEffect(NoiseEffect, BlendFunction.COLOR_DODGE);
+const Noise = wrapEffect(NoiseEffect, {
+  blendFunction: BlendFunction.COLOR_DODGE
+});
 
 const selectionContext = /*#__PURE__*/createContext(null);
 function Selection(_ref) {
@@ -279,7 +289,7 @@ function Selection(_ref) {
     select,
     enabled
   }), [selected, select, enabled]);
-  return /*#__PURE__*/React.createElement(selectionContext.Provider, {
+  return /*#__PURE__*/React__default.createElement(selectionContext.Provider, {
     value: value
   }, children);
 }
@@ -308,7 +318,7 @@ function Select(_ref2) {
       }
     }
   }, [enabled, children]);
-  return /*#__PURE__*/React.createElement("group", _extends({
+  return /*#__PURE__*/React__default.createElement("group", _extends({
     ref: group
   }, props), children);
 }
@@ -381,7 +391,7 @@ const Outline = /*#__PURE__*/forwardRef(function Outline(_ref, forwardRef) {
       }
     }
   }, [api]);
-  return /*#__PURE__*/React.createElement("primitive", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: forwardRef,
     object: effect
   });
@@ -394,14 +404,16 @@ const Pixelation = /*#__PURE__*/forwardRef(function Pixelation(_ref, 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", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
   });
 });
 
-const Scanline = wrapEffect(ScanlineEffect, BlendFunction.OVERLAY);
+const Scanline = wrapEffect(ScanlineEffect, {
+  blendFunction: BlendFunction.OVERLAY
+});
 
 const addLight = (light, effect) => light.layers.enable(effect.selection.layer);
 
@@ -488,7 +500,7 @@ const SelectiveBloom = /*#__PURE__*/forwardRef(function SelectiveBloom(_ref, for
       }
     }
   }, [api]);
-  return /*#__PURE__*/React.createElement("primitive", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: forwardRef,
     object: effect,
     dispose: null
@@ -531,7 +543,7 @@ const SSAO = /*#__PURE__*/forwardRef(function SSAO(props, ref) {
       ...props
     });
   }, [camera, normalPass, props]);
-  return /*#__PURE__*/React.createElement("primitive", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -545,7 +557,7 @@ const SMAA = /*#__PURE__*/forwardRef(function SMAA(_ref, ref) {
   } = _ref;
   const smaaProps = useLoader(SMAAImageLoader, '');
   const effect = useMemo(() => new SMAAEffect(...smaaProps, preset, edgeDetectionMode), [smaaProps, preset, edgeDetectionMode]);
-  return /*#__PURE__*/React.createElement("primitive", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -566,7 +578,7 @@ const Texture = /*#__PURE__*/forwardRef(function Texture(_ref, ref) {
   const effect = useMemo(() => new TextureEffect({ ...props,
     texture: t || texture
   }), [props, t, texture]);
-  return /*#__PURE__*/React.createElement("primitive", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
@@ -592,54 +604,71 @@ const LUT = /*#__PURE__*/forwardRef(function LUT(_ref, ref) {
     if (tetrahedralInterpolation) effect.setTetrahedralInterpolationEnabled(tetrahedralInterpolation);
     invalidate();
   }, [effect, lut, tetrahedralInterpolation]);
-  return /*#__PURE__*/React.createElement("primitive", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: ref,
     object: effect,
     dispose: null
   });
 });
 
-const TiltShift = wrapEffect(TiltShiftEffect$1, BlendFunction.ADD);
+const TiltShift = wrapEffect(TiltShiftEffect$1, {
+  blendFunction: BlendFunction.ADD
+});
 
 const TiltShiftShader = {
   fragmentShader: `
+
     // original shader by Evan Wallace
+
+    #define MAX_ITERATIONS 100
+
     uniform float blur;
-    uniform float gradient;
+    uniform float taper;
     uniform vec2 start;
     uniform vec2 end;
-    uniform vec2 delta;
+    uniform vec2 direction;
+    uniform int samples;
 
     float random(vec3 scale, float seed) {
-      /* use the fragment position for a different seed per-pixel */
-      return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
+        /* use the fragment position for a different seed per-pixel */
+        return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
     }
 
     void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
-
         vec4 color = vec4(0.0);
         float total = 0.0;
         vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);
         vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);
+        float f_samples = float(samples);
+        float half_samples = f_samples / 2.0;
+
+        // use screen diagonal to normalize blur radii
+        float maxScreenDistance = distance(vec2(0.0), resolution); // diagonal distance
+        float gradientRadius = taper * (maxScreenDistance);
+        float blurRadius = blur * (maxScreenDistance / 16.0);
 
         /* randomize the lookup values to hide the fixed number of samples */
         float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
         vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));
-        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradient) * blur;
+        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradientRadius) * blurRadius;
 
         #pragma unroll_loop_start
-        for (float i = -3.0; i <= 3.0; i++) {
-            float percent = (i + offset - 0.5) / 3.0;
+        for (int i = 0; i <= MAX_ITERATIONS; i++) {
+            if (i >= samples) { break; } // return early if over sample count
+            float f_i = float(i);
+            float s_i = -half_samples + f_i;
+            float percent = (s_i + offset - 0.5) / half_samples;
             float weight = 1.0 - abs(percent);
-            vec4 sample_t = texture2D(inputBuffer, uv + delta / resolution * percent * radius);
+            vec4 sample_i = texture2D(inputBuffer, uv + normalize(direction) / resolution * percent * radius);
             /* switch to pre-multiplied alpha to correctly blur transparent images */
-            sample_t.rgb *= sample_t.a;
-            color += sample_t * weight;
+            sample_i.rgb *= sample_i.a;
+            color += sample_i * weight;
             total += weight;
         }
         #pragma unroll_loop_end
 
         outputColor = color / total;
+
         /* switch back from pre-multiplied alpha */
         outputColor.rgb /= outputColor.a + 0.00001;
     }
@@ -648,22 +677,29 @@ const TiltShiftShader = {
 class TiltShiftEffect extends Effect {
   constructor(_temp) {
     let {
-      blendFunction = BlendFunction.ADD,
-      blur = 20.0,
-      gradient = 1100.0,
+      blendFunction = BlendFunction.NORMAL,
+      blur = 1.0,
+      // [0, 1], can go beyond 1 for extra
+      taper = 0.5,
+      // [0, 1], can go beyond 1 for extra
       start = [0.5, 0.0],
+      // [0,1] percentage x,y of screenspace
       end = [0.5, 1.0],
-      delta = [1, 1]
+      // [0,1] percentage x,y of screenspace
+      samples = 10.0,
+      // number of blur samples
+      direction = [1, 1] // direction of blur
+
     } = _temp === void 0 ? {} : _temp;
     super('TiltShiftEffect', TiltShiftShader.fragmentShader, {
       blendFunction,
       attributes: EffectAttribute.CONVOLUTION,
-      uniforms: new Map([['blur', new Uniform(blur)], ['gradient', new Uniform(gradient)], ['start', new Uniform(start)], ['end', new Uniform(end)], ['delta', new Uniform(delta)]])
+      uniforms: new Map([['blur', new Uniform(blur)], ['taper', new Uniform(taper)], ['start', new Uniform(start)], ['end', new Uniform(end)], ['samples', new Uniform(samples)], ['direction', new Uniform(direction)]])
     });
   }
 
 }
-const TiltShift2 = wrapEffect(TiltShiftEffect, BlendFunction.NORMAL);
+const TiltShift2 = wrapEffect(TiltShiftEffect);
 
 const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
   let {
@@ -702,10 +738,10 @@ const SSR = /*#__PURE__*/forwardRef(function SSR(_ref, ref) {
       }
     }
   }, [api]);
-  return /*#__PURE__*/React.createElement("primitive", {
+  return /*#__PURE__*/React__default.createElement("primitive", {
     ref: ref,
     object: effect
   });
 });
 
-export { Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DotScreen, EffectComposer, EffectComposerContext, Glitch, GodRays, Grid, HueSaturation, LUT, Noise, Outline, Pixelation, SMAA, SSAO, SSR, Scanline, Select, Selection, SelectiveBloom, Sepia, ShockWave, Texture, TiltShift, TiltShift2, TiltShiftEffect, ToneMapping, Vignette, selectionContext };
+export { Bloom, BrightnessContrast, ChromaticAberration, ColorAverage, ColorDepth, Depth, DepthOfField, DotScreen, EffectComposer, EffectComposerContext, Glitch, GodRays, Grid, HueSaturation, LUT, Noise, Outline, Pixelation, SMAA, SSAO, SSR, Scanline, Select, Selection, SelectiveBloom, Sepia, ShockWave, Texture, TiltShift, TiltShift2, TiltShiftEffect, ToneMapping, Vignette, resolveRef, selectionContext, useVector2, wrapEffect };

package/dist/util.d.ts

@@ -1,11 +1,12 @@
-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 {};
+import * as React from 'react';
+import * as THREE from 'three';
+import { type ReactThreeFiber } from '@react-three/fiber';
+import { type Effect, type BlendFunction } from 'postprocessing';
+export declare const resolveRef: <T>(ref: T | React.MutableRefObject<T>) => T;
+export declare type EffectConstructor = new (...args: any[]) => Effect;
+export declare type EffectProps<T extends EffectConstructor> = ReactThreeFiber.Node<T extends Function ? T['prototype'] : InstanceType<T>, T> & ConstructorParameters<T>[0] & {
+    blendFunction?: BlendFunction;
+    opacity?: number;
+};
+export declare const wrapEffect: <T extends EffectConstructor, P extends EffectProps<T>>(effect: T, defaults?: P) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+export declare const useVector2: (props: object, key: string) => THREE.Vector2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",