@react-three/postprocessing 2.8.3 → 2.9.1

package/dist/index.cjs

@@ -1,818 +1,545 @@
 'use strict';
 
-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 jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var THREE = require('three');
 var fiber = require('@react-three/fiber');
 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]; }
+function _interopNamespaceDefault(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);
+    }
+    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 THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var _inheritsLoose__default = /*#__PURE__*/_interopDefaultLegacy(_inheritsLoose);
-
-var _excluded$9 = ["blendFunction", "opacity"];
-var resolveRef = function resolveRef(ref) {
-  return typeof ref === 'object' && 'current' in ref ? ref.current : ref;
-};
-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 Component = components.get(effect);
+var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
 
+const resolveRef = (ref) => typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref;
+let i = 0;
+const components = new WeakMap();
+const wrapEffect = (effect, defaults) => 
+/* @__PURE__ */ React.forwardRef(function Effect({ blendFunction = defaults === null || defaults === void 0 ? void 0 : defaults.blendFunction, opacity = defaults === null || defaults === void 0 ? void 0 : defaults.opacity, ...props }, ref) {
+    let 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);
+        const key = `@react-three/postprocessing/${effect.name}-${i++}`;
+        fiber.extend({ [key]: effect });
+        components.set(effect, (Component = key));
     }
-
-    var camera = fiber.useThree(function (state) {
-      return state.camera;
-    });
-    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
+    const camera = fiber.useThree((state) => state.camera);
+    const args = React.useMemo(() => { var _a, _b; return [...((_a = defaults === null || defaults === void 0 ? void 0 : defaults.args) !== null && _a !== void 0 ? _a : []), ...((_b = props.args) !== null && _b !== void 0 ? _b : [{ ...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,
-      args: args
-    }));
-  });
-};
-var useVector2 = function useVector2(props, key) {
-  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]);
+    return (jsxRuntime.jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity": opacity, ...props, ref: ref, args: args }));
+});
+const useVector2 = (props, key) => {
+    const value = props[key];
+    return React.useMemo(() => {
+        if (typeof value === 'number')
+            return new THREE__namespace.Vector2(value, value);
+        else if (value)
+            return new THREE__namespace.Vector2(...value);
+        else
+            return new THREE__namespace.Vector2();
+    }, [value]);
 };
 
-var Bloom = wrapEffect(postprocessing.BloomEffect, {
-  blendFunction: postprocessing.BlendFunction.ADD
-});
+const Bloom = wrapEffect(postprocessing.BloomEffect, { blendFunction: postprocessing.BlendFunction.ADD });
+
+const BrightnessContrast = wrapEffect(postprocessing.BrightnessContrastEffect);
 
-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
-  });
+const ChromaticAberration = React.forwardRef(function ChromaticAberration(props, ref) {
+    const offset = useVector2(props, 'offset');
+    const effect = React.useMemo(() => new postprocessing.ChromaticAberrationEffect({ ...props, offset }), [offset, props]);
+    return jsxRuntime.jsx("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
-  });
+const ColorAverage = React.forwardRef(function ColorAverage({ blendFunction = postprocessing.BlendFunction.NORMAL }, ref) {
+    /** Because ColorAverage blendFunction is not an object but a number, we have to define a custom prop "blendFunction" */
+    const effect = React.useMemo(() => new postprocessing.ColorAverageEffect(blendFunction), [blendFunction]);
+    return jsxRuntime.jsx("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,
-      resolutionScale = _ref.resolutionScale,
-      _ref$enabled = _ref.enabled,
-      enabled = _ref$enabled === void 0 ? true : _ref$enabled,
-      _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.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 () {
-    var webGL2Available = threeStdlib.isWebGL2Available(); // Initialize composer
-
-    // Initialize composer
-    var effectComposer = new postprocessing.EffectComposer(gl, {
-      depthBuffer: depthBuffer,
-      stencilBuffer: stencilBuffer,
-      multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
-      frameBufferType: frameBufferType
-    }); // Add render pass
-
-    // Add render pass
-    effectComposer.addPass(new postprocessing.RenderPass(scene, camera)); // Create normal pass
-
-    // Create normal pass
-    var downSamplingPass = null;
-    var normalPass = null;
-
-    if (!disableNormalPass) {
-      normalPass = new postprocessing.NormalPass(scene, camera);
-      normalPass.enabled = false;
-      effectComposer.addPass(normalPass);
-
-      if (resolutionScale !== undefined && webGL2Available) {
-        downSamplingPass = new postprocessing.DepthDownsamplingPass({
-          normalBuffer: normalPass.texture,
-          resolutionScale: resolutionScale
+const ColorDepth = wrapEffect(postprocessing.ColorDepthEffect);
+
+const Depth = wrapEffect(postprocessing.DepthEffect);
+
+const EffectComposerContext = React.createContext(null);
+const EffectComposer = React.memo(React.forwardRef(({ children, camera: _camera, scene: _scene, resolutionScale, enabled = true, renderPriority = 1, autoClear = true, depthBuffer, disableNormalPass, stencilBuffer, multisampling = 8, frameBufferType = THREE.HalfFloatType, }, ref) => {
+    const { gl, scene: defaultScene, camera: defaultCamera, size } = fiber.useThree();
+    const scene = _scene || defaultScene;
+    const camera = _camera || defaultCamera;
+    const [composer, normalPass, downSamplingPass] = React.useMemo(() => {
+        const webGL2Available = threeStdlib.isWebGL2Available();
+        // Initialize composer
+        const effectComposer = new postprocessing.EffectComposer(gl, {
+            depthBuffer,
+            stencilBuffer,
+            multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
+            frameBufferType,
         });
-        downSamplingPass.enabled = false;
-        effectComposer.addPass(downSamplingPass);
-      }
-    }
-
-    return [effectComposer, normalPass, downSamplingPass];
-  }, [camera, gl, depthBuffer, stencilBuffer, multisampling, frameBufferType, scene, disableNormalPass, resolutionScale]),
-      composer = _useMemo[0],
-      normalPass = _useMemo[1],
-      downSamplingPass = _useMemo[2];
-
-  React.useEffect(function () {
-    return composer == null ? void 0 : composer.setSize(size.width, size.height);
-  }, [composer, size]);
-  fiber.useFrame(function (_, delta) {
-    if (enabled) {
-      gl.autoClear = autoClear;
-      composer.render(delta);
-    }
-  }, enabled ? renderPriority : 0);
-  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));
-      effectPass.renderToScreen = true;
-      composer.addPass(effectPass);
-      if (normalPass) normalPass.enabled = true;
-      if (downSamplingPass) downSamplingPass.enabled = true;
-    }
-
-    return function () {
-      if (effectPass) composer == null ? void 0 : composer.removePass(effectPass);
-      if (normalPass) normalPass.enabled = false;
-      if (downSamplingPass) downSamplingPass.enabled = false;
-    };
-  }, [composer, children, camera, normalPass, downSamplingPass]); // Memoize state, otherwise it would trigger all consumers on every render
-
-  var state = React.useMemo(function () {
-    return {
-      composer: composer,
-      normalPass: normalPass,
-      downSamplingPass: downSamplingPass,
-      resolutionScale: resolutionScale,
-      camera: camera,
-      scene: scene
-    };
-  }, [composer, normalPass, downSamplingPass, resolutionScale, 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));
+        // Add render pass
+        effectComposer.addPass(new postprocessing.RenderPass(scene, camera));
+        // Create normal pass
+        let downSamplingPass = null;
+        let normalPass = null;
+        if (!disableNormalPass) {
+            normalPass = new postprocessing.NormalPass(scene, camera);
+            normalPass.enabled = false;
+            effectComposer.addPass(normalPass);
+            if (resolutionScale !== undefined && webGL2Available) {
+                downSamplingPass = new postprocessing.DepthDownsamplingPass({ normalBuffer: normalPass.texture, resolutionScale });
+                downSamplingPass.enabled = false;
+                effectComposer.addPass(downSamplingPass);
+            }
+        }
+        return [effectComposer, normalPass, downSamplingPass];
+    }, [
+        camera,
+        gl,
+        depthBuffer,
+        stencilBuffer,
+        multisampling,
+        frameBufferType,
+        scene,
+        disableNormalPass,
+        resolutionScale,
+    ]);
+    React.useEffect(() => composer === null || composer === void 0 ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
+    fiber.useFrame((_, delta) => {
+        if (enabled) {
+            gl.autoClear = autoClear;
+            composer.render(delta);
+        }
+    }, enabled ? renderPriority : 0);
+    const group = React.useRef(null);
+    const instance = fiber.useInstanceHandle(group);
+    React.useLayoutEffect(() => {
+        let effectPass;
+        if (group.current && instance.current && composer) {
+            effectPass = new postprocessing.EffectPass(camera, ...instance.current.objects);
+            effectPass.renderToScreen = true;
+            composer.addPass(effectPass);
+            if (normalPass)
+                normalPass.enabled = true;
+            if (downSamplingPass)
+                downSamplingPass.enabled = true;
+        }
+        return () => {
+            if (effectPass)
+                composer === null || composer === void 0 ? void 0 : composer.removePass(effectPass);
+            if (normalPass)
+                normalPass.enabled = false;
+            if (downSamplingPass)
+                downSamplingPass.enabled = false;
+        };
+    }, [composer, children, camera, normalPass, downSamplingPass, instance]);
+    // Memoize state, otherwise it would trigger all consumers on every render
+    const state = React.useMemo(() => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }), [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]);
+    // Expose the composer
+    React.useImperativeHandle(ref, () => composer, [composer]);
+    return (jsxRuntime.jsx(EffectComposerContext.Provider, { value: state, children: jsxRuntime.jsx("group", { ref: group, children: children }) }));
 }));
 
-var _excluded$8 = ["target", "depthTexture"];
-var DepthOfField = /*#__PURE__*/React.forwardRef(function DepthOfField(_ref, ref) {
-  var target = _ref.target,
-      depthTexture = _ref.depthTexture,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$8);
-
-  var invalidate = fiber.useThree(function (state) {
-    return state.invalidate;
-  });
-
-  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);
-    invalidate();
-  }, [target, depthTexture, effect]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
-    ref: ref,
-    object: effect,
-    dispose: null
-  });
+const DepthOfField = React.forwardRef(function DepthOfField({ target, depthTexture, ...props }, ref) {
+    const invalidate = fiber.useThree((state) => state.invalidate);
+    const { camera } = React.useContext(EffectComposerContext);
+    const effect = React.useMemo(() => new postprocessing.DepthOfFieldEffect(camera, props), [camera, props]);
+    React.useLayoutEffect(() => {
+        if (target && typeof target !== 'number') {
+            const 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);
+        invalidate();
+    }, [target, depthTexture, effect]);
+    return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
-var DotScreen = wrapEffect(postprocessing.DotScreenEffect);
-
-var _excluded$7 = ["active"];
-var Glitch = /*#__PURE__*/React.forwardRef(function Glitch(_ref, ref) {
-  var _ref$active = _ref.active,
-      active = _ref$active === void 0 ? true : _ref$active,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$7);
-
-  var invalidate = fiber.useThree(function (state) {
-    return state.invalidate;
-  });
-  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;
-    invalidate();
-  }, [active, effect, props.mode]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
-    ref: ref,
-    object: effect,
-    dispose: null
-  });
+const DotScreen = wrapEffect(postprocessing.DotScreenEffect);
+
+const Glitch = React.forwardRef(function Glitch({ active = true, ...props }, ref) {
+    const invalidate = fiber.useThree((state) => state.invalidate);
+    const delay = useVector2(props, 'delay');
+    const duration = useVector2(props, 'duration');
+    const strength = useVector2(props, 'strength');
+    const effect = React.useMemo(() => new postprocessing.GlitchEffect({ ...props, delay, duration, strength }), [delay, duration, props, strength]);
+    React.useLayoutEffect(() => {
+        effect.mode = active ? props.mode || postprocessing.GlitchMode.SPORADIC : postprocessing.GlitchMode.DISABLED;
+        invalidate();
+    }, [active, effect, invalidate, props.mode]);
+    return jsxRuntime.jsx("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
-  });
+const GodRays = React.forwardRef(function GodRays(props, ref) {
+    const { camera } = React.useContext(EffectComposerContext);
+    const effect = React.useMemo(() => new postprocessing.GodRaysEffect(camera, props.sun, props), [camera, props]);
+    return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
-var _excluded$6 = ["size"];
-var Grid = /*#__PURE__*/React.forwardRef(function Grid(_ref, ref) {
-  var size = _ref.size,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$6);
-
-  var invalidate = fiber.useThree(function (state) {
-    return state.invalidate;
-  });
-  var effect = React.useMemo(function () {
-    return new postprocessing.GridEffect(props);
-  }, [props]);
-  React.useLayoutEffect(function () {
-    if (size) effect.setSize(size.width, size.height);
-    invalidate();
-  }, [effect, size]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
-    ref: ref,
-    object: effect,
-    dispose: null
-  });
+const Grid = React.forwardRef(function Grid({ size, ...props }, ref) {
+    const invalidate = fiber.useThree((state) => state.invalidate);
+    const effect = React.useMemo(() => new postprocessing.GridEffect(props), [props]);
+    React.useLayoutEffect(() => {
+        if (size)
+            effect.setSize(size.width, size.height);
+        invalidate();
+    }, [effect, size]);
+    return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
-var HueSaturation = wrapEffect(postprocessing.HueSaturationEffect);
+const HueSaturation = wrapEffect(postprocessing.HueSaturationEffect);
 
-var Noise = wrapEffect(postprocessing.NoiseEffect, {
-  blendFunction: postprocessing.BlendFunction.COLOR_DODGE
-});
+const Noise = wrapEffect(postprocessing.NoiseEffect, { blendFunction: postprocessing.BlendFunction.COLOR_DODGE });
 
-var _excluded$5 = ["enabled", "children"];
-var selectionContext = /*#__PURE__*/React.createContext(null);
-function Selection(_ref) {
-  var children = _ref.children,
-      _ref$enabled = _ref.enabled,
-      enabled = _ref$enabled === void 0 ? true : _ref$enabled;
-
-  var _useState = React.useState([]),
-      selected = _useState[0],
-      select = _useState[1];
-
-  var value = React.useMemo(function () {
-    return {
-      selected: selected,
-      select: select,
-      enabled: enabled
-    };
-  }, [selected, select, enabled]);
-  return /*#__PURE__*/React__default["default"].createElement(selectionContext.Provider, {
-    value: value
-  }, children);
+const selectionContext = React.createContext(null);
+function Selection({ children, enabled = true }) {
+    const [selected, select] = React.useState([]);
+    const value = React.useMemo(() => ({ selected, select, enabled }), [selected, select, enabled]);
+    return jsxRuntime.jsx(selectionContext.Provider, { value: value, children: children });
 }
-function Select(_ref2) {
-  var _ref2$enabled = _ref2.enabled,
-      enabled = _ref2$enabled === void 0 ? false : _ref2$enabled,
-      children = _ref2.children,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref2, _excluded$5);
-
-  var group = React.useRef(null);
-  var api = React.useContext(selectionContext);
-  React.useEffect(function () {
-    if (api && enabled) {
-      var changed = false;
-      var current = [];
-      group.current.traverse(function (o) {
-        o.type === 'Mesh' && current.push(o);
-        if (api.selected.indexOf(o) === -1) changed = true;
-      });
-
-      if (changed) {
-        api.select(function (state) {
-          return [].concat(state, current);
-        });
-        return function () {
-          api.select(function (state) {
-            return state.filter(function (selected) {
-              return !current.includes(selected);
+function Select({ enabled = false, children, ...props }) {
+    const group = React.useRef(null);
+    const api = React.useContext(selectionContext);
+    React.useEffect(() => {
+        if (api && enabled) {
+            let changed = false;
+            const current = [];
+            group.current.traverse((o) => {
+                o.type === 'Mesh' && current.push(o);
+                if (api.selected.indexOf(o) === -1)
+                    changed = true;
             });
-          });
-        };
-      }
-    }
-  }, [enabled, children]);
-  return /*#__PURE__*/React__default["default"].createElement("group", _extends__default["default"]({
-    ref: group
-  }, props), children);
+            if (changed) {
+                api.select((state) => [...state, ...current]);
+                return () => {
+                    api.select((state) => state.filter((selected) => !current.includes(selected)));
+                };
+            }
+        }
+    }, [enabled, children, api]);
+    return (jsxRuntime.jsx("group", { ref: group, ...props, children: children }));
 }
 
-var _excluded$4 = ["selection", "selectionLayer", "blendFunction", "patternTexture", "edgeStrength", "pulseSpeed", "visibleEdgeColor", "hiddenEdgeColor", "width", "height", "kernelSize", "blur", "xRay"];
-var Outline = /*#__PURE__*/React.forwardRef(function Outline(_ref, forwardRef) {
-  var _ref$selection = _ref.selection,
-      selection = _ref$selection === void 0 ? [] : _ref$selection,
-      _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,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$4);
-
-  var invalidate = fiber.useThree(function (state) {
-    return state.invalidate;
-  });
-
-  var _useContext = React.useContext(EffectComposerContext),
-      scene = _useContext.scene,
-      camera = _useContext.camera;
-
-  var effect = React.useMemo(function () {
-    return new postprocessing.OutlineEffect(scene, camera, _extends__default["default"]({
-      blendFunction: blendFunction,
-      patternTexture: patternTexture,
-      edgeStrength: edgeStrength,
-      pulseSpeed: pulseSpeed,
-      visibleEdgeColor: visibleEdgeColor,
-      hiddenEdgeColor: hiddenEdgeColor,
-      width: width,
-      height: height,
-      kernelSize: kernelSize,
-      blur: blur,
-      xRay: xRay
-    }, props));
-  }, [blendFunction, blur, camera, edgeStrength, height, hiddenEdgeColor, kernelSize, patternTexture, pulseSpeed, scene, visibleEdgeColor, width, xRay]);
-  var api = React.useContext(selectionContext);
-  React.useEffect(function () {
-    // Do not allow array selection if declarative selection is active
-    // TODO: array selection should probably be deprecated altogether
-    if (!api && selection) {
-      effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
-      invalidate();
-      return function () {
-        effect.selection.clear();
+const Outline = React.forwardRef(function Outline({ selection = [], selectionLayer = 10, blendFunction, patternTexture, edgeStrength, pulseSpeed, visibleEdgeColor, hiddenEdgeColor, width, height, kernelSize, blur, xRay, ...props }, forwardRef) {
+    const invalidate = fiber.useThree((state) => state.invalidate);
+    const { scene, camera } = React.useContext(EffectComposerContext);
+    const effect = React.useMemo(() => new postprocessing.OutlineEffect(scene, camera, {
+        blendFunction,
+        patternTexture,
+        edgeStrength,
+        pulseSpeed,
+        visibleEdgeColor,
+        hiddenEdgeColor,
+        width,
+        height,
+        kernelSize,
+        blur,
+        xRay,
+        ...props,
+    }), [
+        blendFunction,
+        blur,
+        camera,
+        edgeStrength,
+        height,
+        hiddenEdgeColor,
+        kernelSize,
+        patternTexture,
+        props,
+        pulseSpeed,
+        scene,
+        visibleEdgeColor,
+        width,
+        xRay,
+    ]);
+    const api = React.useContext(selectionContext);
+    React.useEffect(() => {
+        // Do not allow array selection if declarative selection is active
+        // TODO: array selection should probably be deprecated altogether
+        if (!api && selection) {
+            effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
+            invalidate();
+            return () => {
+                effect.selection.clear();
+                invalidate();
+            };
+        }
+    }, [effect, selection, api, invalidate]);
+    React.useEffect(() => {
+        effect.selectionLayer = selectionLayer;
         invalidate();
-      };
+    }, [effect, invalidate, selectionLayer]);
+    React.useRef();
+    React.useEffect(() => {
+        var _a;
+        if (api && api.enabled) {
+            if ((_a = api.selected) === null || _a === void 0 ? void 0 : _a.length) {
+                effect.selection.set(api.selected);
+                invalidate();
+                return () => {
+                    effect.selection.clear();
+                    invalidate();
+                };
+            }
+        }
+    }, [api, effect.selection, invalidate]);
+    return jsxRuntime.jsx("primitive", { ref: forwardRef, object: effect });
+});
+
+const Pixelation = React.forwardRef(function Pixelation({ granularity = 5 }, ref) {
+    /** Because GlitchEffect granularity is not an object but a number, we have to define a custom prop "granularity" */
+    const effect = React.useMemo(() => new postprocessing.PixelationEffect(granularity), [granularity]);
+    return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
+});
+
+const Scanline = wrapEffect(postprocessing.ScanlineEffect, { blendFunction: postprocessing.BlendFunction.OVERLAY });
+
+const addLight = (light, effect) => light.layers.enable(effect.selection.layer);
+const removeLight = (light, effect) => light.layers.disable(effect.selection.layer);
+const SelectiveBloom = React.forwardRef(function SelectiveBloom({ selection = [], selectionLayer = 10, lights = [], luminanceThreshold, luminanceSmoothing, intensity, width, height, kernelSize, mipmapBlur, ...props }, forwardRef) {
+    if (lights.length === 0) {
+        console.warn('SelectiveBloom requires lights to work.');
     }
-  }, [effect, selection, api]);
-  React.useEffect(function () {
-    effect.selectionLayer = selectionLayer;
-    invalidate();
-  }, [effect, selectionLayer]);
-  React.useRef();
-  React.useEffect(function () {
-    if (api && api.enabled) {
-      var _api$selected;
-
-      if ((_api$selected = api.selected) != null && _api$selected.length) {
-        effect.selection.set(api.selected);
+    const invalidate = fiber.useThree((state) => state.invalidate);
+    const { scene, camera } = React.useContext(EffectComposerContext);
+    const effect = React.useMemo(() => new postprocessing.SelectiveBloomEffect(scene, camera, {
+        blendFunction: postprocessing.BlendFunction.ADD,
+        luminanceThreshold,
+        luminanceSmoothing,
+        intensity,
+        width,
+        height,
+        kernelSize,
+        mipmapBlur,
+        ...props,
+    }), [scene, camera, luminanceThreshold, luminanceSmoothing, intensity, width, height, kernelSize, mipmapBlur, props]);
+    const api = React.useContext(selectionContext);
+    React.useEffect(() => {
+        // Do not allow array selection if declarative selection is active
+        // TODO: array selection should probably be deprecated altogether
+        if (!api && selection) {
+            effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
+            invalidate();
+            return () => {
+                effect.selection.clear();
+                invalidate();
+            };
+        }
+    }, [effect, selection, api, invalidate]);
+    React.useEffect(() => {
+        effect.selection.layer = selectionLayer;
         invalidate();
-        return function () {
-          effect.selection.clear();
-          invalidate();
-        };
-      }
-    }
-  }, [api]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
-    ref: forwardRef,
-    object: effect
-  });
+    }, [effect, invalidate, selectionLayer]);
+    React.useEffect(() => {
+        if (lights && lights.length > 0) {
+            lights.forEach((light) => addLight(resolveRef(light), effect));
+            invalidate();
+            return () => {
+                lights.forEach((light) => removeLight(resolveRef(light), effect));
+                invalidate();
+            };
+        }
+    }, [effect, invalidate, lights, selectionLayer]);
+    React.useRef();
+    React.useEffect(() => {
+        var _a;
+        if (api && api.enabled) {
+            if ((_a = api.selected) === null || _a === void 0 ? void 0 : _a.length) {
+                effect.selection.set(api.selected);
+                invalidate();
+                return () => {
+                    effect.selection.clear();
+                    invalidate();
+                };
+            }
+        }
+    }, [api, effect.selection, invalidate]);
+    return jsxRuntime.jsx("primitive", { ref: forwardRef, 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
-  });
+const Sepia = wrapEffect(postprocessing.SepiaEffect);
+
+const SSAO = React.forwardRef(function SSAO(props, ref) {
+    const { camera, normalPass, downSamplingPass, resolutionScale } = React.useContext(EffectComposerContext);
+    const effect = React.useMemo(() => {
+        if (normalPass === null && downSamplingPass === null) {
+            console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.');
+            return {};
+        }
+        return new postprocessing.SSAOEffect(camera, normalPass && !downSamplingPass ? normalPass.texture : null, {
+            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,
+            bias: 0.5,
+            intensity: 1.0,
+            color: undefined,
+            // @ts-ignore
+            normalDepthBuffer: downSamplingPass ? downSamplingPass.texture : null,
+            resolutionScale: resolutionScale !== null && resolutionScale !== void 0 ? resolutionScale : 1,
+            depthAwareUpsampling: true,
+            ...props,
+        });
+    }, [camera, normalPass, props]);
+    return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
-var Scanline = wrapEffect(postprocessing.ScanlineEffect, {
-  blendFunction: postprocessing.BlendFunction.OVERLAY
+const SMAA = wrapEffect(postprocessing.SMAAEffect);
+
+const Texture = React.forwardRef(function Texture({ textureSrc, texture, ...props }, ref) {
+    const t = fiber.useLoader(THREE.TextureLoader, textureSrc);
+    React.useLayoutEffect(() => {
+        t.encoding = THREE.sRGBEncoding;
+        t.wrapS = t.wrapT = THREE.RepeatWrapping;
+    }, [t]);
+    const effect = React.useMemo(() => new postprocessing.TextureEffect({ ...props, texture: t || texture }), [props, t, texture]);
+    return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
-var _excluded$3 = ["selection", "selectionLayer", "lights", "luminanceThreshold", "luminanceSmoothing", "intensity", "width", "height", "kernelSize", "mipmapBlur", "radius", "levels"];
+const ToneMapping = wrapEffect(postprocessing.ToneMappingEffect);
 
-var addLight = function addLight(light, effect) {
-  return light.layers.enable(effect.selection.layer);
-};
+const Vignette = wrapEffect(postprocessing.VignetteEffect);
 
-var removeLight = function removeLight(light, effect) {
-  return light.layers.disable(effect.selection.layer);
-};
+const ShockWave = wrapEffect(postprocessing.ShockWaveEffect);
 
-var SelectiveBloom = /*#__PURE__*/React.forwardRef(function SelectiveBloom(_ref, forwardRef) {
-  var _ref$selection = _ref.selection,
-      selection = _ref$selection === void 0 ? [] : _ref$selection,
-      _ref$selectionLayer = _ref.selectionLayer,
-      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,
-      mipmapBlur = _ref.mipmapBlur,
-      radius = _ref.radius,
-      levels = _ref.levels,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$3);
-
-  if (lights.length === 0) {
-    console.warn('SelectiveBloom requires lights to work.');
-  }
-
-  var invalidate = fiber.useThree(function (state) {
-    return state.invalidate;
-  });
-
-  var _useContext = React.useContext(EffectComposerContext),
-      scene = _useContext.scene,
-      camera = _useContext.camera;
-
-  var effect = React.useMemo(function () {
-    return new postprocessing.SelectiveBloomEffect(scene, camera, _extends__default["default"]({
-      blendFunction: postprocessing.BlendFunction.ADD,
-      luminanceThreshold: luminanceThreshold,
-      luminanceSmoothing: luminanceSmoothing,
-      intensity: intensity,
-      width: width,
-      height: height,
-      kernelSize: kernelSize,
-      mipmapBlur: mipmapBlur,
-      radius: radius,
-      levels: levels
-    }, props));
-  }, [camera, height, intensity, kernelSize, luminanceSmoothing, luminanceThreshold, scene, width, height, mipmapBlur, radius, levels]);
-  var api = React.useContext(selectionContext);
-  React.useEffect(function () {
-    // Do not allow array selection if declarative selection is active
-    // TODO: array selection should probably be deprecated altogether
-    if (!api && selection) {
-      effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
-      invalidate();
-      return function () {
-        effect.selection.clear();
+const LUT = React.forwardRef(function LUT({ lut, tetrahedralInterpolation, ...props }, ref) {
+    const effect = React.useMemo(() => new postprocessing.LUT3DEffect(lut, props), [lut, props]);
+    const invalidate = fiber.useThree((state) => state.invalidate);
+    React.useLayoutEffect(() => {
+        if (tetrahedralInterpolation)
+            effect.tetrahedralInterpolation = tetrahedralInterpolation;
+        if (lut)
+            effect.lut = lut;
         invalidate();
-      };
-    }
-  }, [effect, selection, api]);
-  React.useEffect(function () {
-    effect.selection.layer = selectionLayer;
-    invalidate();
-  }, [effect, selectionLayer]);
-  React.useEffect(function () {
-    if (lights && lights.length > 0) {
-      lights.forEach(function (light) {
-        return addLight(resolveRef(light), effect);
-      });
-      invalidate();
-      return function () {
-        lights.forEach(function (light) {
-          return removeLight(resolveRef(light), effect);
-        });
-        invalidate();
-      };
-    }
-  }, [effect, lights, selectionLayer]);
-  React.useRef();
-  React.useEffect(function () {
-    if (api && api.enabled) {
-      var _api$selected;
-
-      if ((_api$selected = api.selected) != null && _api$selected.length) {
-        effect.selection.set(api.selected);
-        invalidate();
-        return function () {
-          effect.selection.clear();
-          invalidate();
-        };
-      }
-    }
-  }, [api]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
-    ref: forwardRef,
-    object: effect,
-    dispose: null
-  });
+    }, [effect, invalidate, lut, tetrahedralInterpolation]);
+    return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
 });
 
-var Sepia = wrapEffect(postprocessing.SepiaEffect);
+const TiltShift = wrapEffect(postprocessing.TiltShiftEffect, { blendFunction: postprocessing.BlendFunction.ADD });
 
-var SSAO = /*#__PURE__*/React.forwardRef(function SSAO(props, ref) {
-  var _useContext = React.useContext(EffectComposerContext),
-      camera = _useContext.camera,
-      normalPass = _useContext.normalPass,
-      downSamplingPass = _useContext.downSamplingPass,
-      resolutionScale = _useContext.resolutionScale;
+const TiltShiftShader = {
+    fragmentShader: `
 
-  var effect = React.useMemo(function () {
-    if (normalPass === null && downSamplingPass === null) {
-      console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.');
-      return null;
-    }
-
-    return new postprocessing.SSAOEffect(camera, normalPass && !downSamplingPass ? normalPass.texture : null, _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,
-      // @ts-ignore
-      normalDepthBuffer: downSamplingPass ? downSamplingPass.texture : null,
-      resolutionScale: resolutionScale != null ? resolutionScale : 1,
-      depthAwareUpsampling: true
-    }, props));
-  }, [camera, normalPass, props]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
-    ref: ref,
-    object: effect,
-    dispose: null
-  });
-});
+    // original shader by Evan Wallace
 
-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
-  });
-});
+    #define MAX_ITERATIONS 100
 
-var _excluded$2 = ["textureSrc", "texture"];
-var Texture = /*#__PURE__*/React.forwardRef(function Texture(_ref, ref) {
-  var textureSrc = _ref.textureSrc,
-      texture = _ref.texture,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$2);
-
-  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$1 = ["lut", "tetrahedralInterpolation"];
-var LUT = /*#__PURE__*/React.forwardRef(function LUT(_ref, ref) {
-  var lut = _ref.lut,
-      tetrahedralInterpolation = _ref.tetrahedralInterpolation,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded$1);
-
-  var invalidate = fiber.useThree(function (state) {
-    return state.invalidate;
-  });
-  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);
-    invalidate();
-  }, [effect, lut, tetrahedralInterpolation]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
-    ref: ref,
-    object: effect,
-    dispose: null
-  });
-});
+    uniform float blur;
+    uniform float taper;
+    uniform vec2 start;
+    uniform vec2 end;
+    uniform vec2 direction;
+    uniform int samples;
 
-var TiltShift = wrapEffect(postprocessing.TiltShiftEffect, {
-  blendFunction: postprocessing.BlendFunction.ADD
-});
+    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);
+    }
 
-var TiltShiftShader = {
-  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    "
+    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)) / gradientRadius) * blurRadius;
+
+        #pragma unroll_loop_start
+        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_i = texture2D(inputBuffer, uv + normalize(direction) / resolution * percent * radius);
+            /* switch to pre-multiplied alpha to correctly blur transparent images */
+            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;
+    }
+    `,
 };
-var TiltShiftEffect = /*#__PURE__*/function (_Effect) {
-  _inheritsLoose__default["default"](TiltShiftEffect, _Effect);
-
-  function TiltShiftEffect(_temp) {
-    var _ref = _temp === void 0 ? {} : _temp,
-        _ref$blendFunction = _ref.blendFunction,
-        blendFunction = _ref$blendFunction === void 0 ? postprocessing.BlendFunction.NORMAL : _ref$blendFunction,
-        _ref$blur = _ref.blur,
-        blur = _ref$blur === void 0 ? 0.15 : _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$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)], ['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);
-
-var _excluded = ["ENABLE_BLUR", "USE_MRT"];
-
-var SSR = /*#__PURE__*/React.forwardRef(function SSR(_ref, ref) {
-  var _ref$ENABLE_BLUR = _ref.ENABLE_BLUR,
-      ENABLE_BLUR = _ref$ENABLE_BLUR === void 0 ? true : _ref$ENABLE_BLUR,
-      _ref$USE_MRT = _ref.USE_MRT,
-      USE_MRT = _ref$USE_MRT === void 0 ? true : _ref$USE_MRT,
-      props = _objectWithoutPropertiesLoose__default["default"](_ref, _excluded);
-
-  var _useThree = fiber.useThree(),
-      invalidate = _useThree.invalidate;
-
-  var _useContext = React.useContext(EffectComposerContext),
-      scene = _useContext.scene,
-      camera = _useContext.camera;
-
-  var effect = React.useMemo(function () {
-    return new screenSpaceReflections.SSREffect(scene, camera, _extends__default["default"]({
-      ENABLE_BLUR: ENABLE_BLUR,
-      USE_MRT: USE_MRT
-    }, props));
-  }, [screenSpaceReflections.SSREffect, scene, camera, ENABLE_BLUR, USE_MRT]);
-  React.useLayoutEffect(function () {
-    Object.keys(props).forEach(function (key) {
-      return effect[key] = props[key];
-    });
-    invalidate();
-  }, [props]);
-  var api = React.useContext(selectionContext);
-  React.useEffect(function () {
-    if (api && api.enabled) {
-      var _api$selected;
-
-      if ((_api$selected = api.selected) != null && _api$selected.length) {
-        effect.selection.set(api.selected);
-        invalidate();
-        return function () {
-          effect.selection.clear();
-          invalidate();
-        };
-      }
+class TiltShiftEffect extends postprocessing.Effect {
+    constructor({ blendFunction = postprocessing.BlendFunction.NORMAL, blur = 0.15, // [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], // [0,1] percentage x,y of screenspace
+    samples = 10.0, // number of blur samples
+    direction = [1, 1], // direction of blur
+     } = {}) {
+        super('TiltShiftEffect', TiltShiftShader.fragmentShader, {
+            blendFunction,
+            attributes: postprocessing.EffectAttribute.CONVOLUTION,
+            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)],
+            ]),
+        });
     }
-  }, [api]);
-  return /*#__PURE__*/React__default["default"].createElement("primitive", {
-    ref: ref,
-    object: effect
-  });
+}
+const TiltShift2 = wrapEffect(TiltShiftEffect, { blendFunction: postprocessing.BlendFunction.NORMAL });
+
+const SSR = React.forwardRef(function SSR({ ENABLE_BLUR = true, USE_MRT = true, ...props }, ref) {
+    const { invalidate } = fiber.useThree();
+    const { scene, camera } = React.useContext(EffectComposerContext);
+    const effect = React.useMemo(() => new screenSpaceReflections.SSREffect(scene, camera, { ENABLE_BLUR, USE_MRT, ...props }), [scene, camera, ENABLE_BLUR, USE_MRT, props]);
+    const api = React.useContext(selectionContext);
+    React.useEffect(() => {
+        var _a;
+        if (api && api.enabled) {
+            if ((_a = api.selected) === null || _a === void 0 ? void 0 : _a.length) {
+                effect.selection.set(api.selected);
+                invalidate();
+                return () => {
+                    effect.selection.clear();
+                    invalidate();
+                };
+            }
+        }
+    }, [api]);
+    return jsxRuntime.jsx("primitive", { ref: ref, object: effect, ...props });
 });
 
 exports.Bloom = Bloom;