@react-three/postprocessing 2.18.0 → 3.0.0-rc.0

package/{dist/effects/TiltShift2.js → src/effects/TiltShift2.tsx}

@@ -1,98 +1,90 @@
-import { Uniform } from "three";
-import { Effect, EffectAttribute, BlendFunction } from "postprocessing";
-import { wrapEffect } from "../util.js";
-const TiltShiftShader = {
-  fragmentShader: `
-
-    // original shader by Evan Wallace
-
-    #define MAX_ITERATIONS 100
-
-    uniform float blur;
-    uniform float taper;
-    uniform vec2 start;
-    uniform vec2 end;
-    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);
-    }
-
-    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;
-    }
-    `
-};
-class TiltShiftEffect extends Effect {
-  constructor({
-    blendFunction = 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,1] percentage x,y of screenspace
-    end = [0.5, 1],
-    // [0,1] percentage x,y of screenspace
-    samples = 10,
-    // number of blur samples
-    direction = [1, 1]
-    // direction of blur
-  } = {}) {
-    super("TiltShiftEffect", TiltShiftShader.fragmentShader, {
-      blendFunction,
-      attributes: EffectAttribute.CONVOLUTION,
-      uniforms: /* @__PURE__ */ 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: BlendFunction.NORMAL });
-export {
-  TiltShift2,
-  TiltShiftEffect
-};
-//# sourceMappingURL=TiltShift2.js.map
+import { Uniform } from 'three'
+import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import { wrapEffect } from '../util.tsx'
+
+const TiltShiftShader = {
+  fragmentShader: `
+
+    // original shader by Evan Wallace
+
+    #define MAX_ITERATIONS 100
+
+    uniform float blur;
+    uniform float taper;
+    uniform vec2 start;
+    uniform vec2 end;
+    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);
+    }
+
+    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;
+    }
+    `,
+}
+
+export class TiltShiftEffect extends Effect {
+  constructor({
+    blendFunction = 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: EffectAttribute.CONVOLUTION,
+      uniforms: new Map<string, Uniform<number | number[]>>([
+        ['blur', new Uniform(blur)],
+        ['taper', new Uniform(taper)],
+        ['start', new Uniform(start)],
+        ['end', new Uniform(end)],
+        ['samples', new Uniform(samples)],
+        ['direction', new Uniform(direction)],
+      ]),
+    })
+  }
+}
+
+export const TiltShift2 = /* @__PURE__ */ wrapEffect(TiltShiftEffect, { blendFunction: BlendFunction.NORMAL })

package/src/effects/ToneMapping.tsx

@@ -0,0 +1,6 @@
+import { ToneMappingEffect } from 'postprocessing'
+import { type EffectProps, wrapEffect } from '../util.tsx'
+
+export type ToneMappingProps = EffectProps<typeof ToneMappingEffect>
+
+export const ToneMapping = /* @__PURE__ */ wrapEffect(ToneMappingEffect)

package/src/effects/Vignette.tsx

@@ -0,0 +1,4 @@
+import { VignetteEffect } from 'postprocessing'
+import { wrapEffect } from '../util.tsx'
+
+export const Vignette = /* @__PURE__ */ wrapEffect(VignetteEffect)

package/{dist/effects/Water.js → src/effects/Water.tsx}

@@ -1,38 +1,35 @@
-import { Uniform } from "three";
-import { Effect, EffectAttribute, BlendFunction } from "postprocessing";
-import { wrapEffect } from "../util.js";
-const WaterShader = {
-  fragmentShader: (
-    /* glsl */
-    `
-    uniform float factor;
-
-    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
-      vec2 vUv = uv;
-      float frequency = 6.0 * factor;
-      float amplitude = 0.015 * factor;
-      float x = vUv.y * frequency + time * 0.7; 
-      float y = vUv.x * frequency + time * 0.3;
-      vUv.x += cos(x + y) * amplitude * cos(y);
-      vUv.y += sin(x - y) * amplitude * cos(y);
-      vec4 rgba = texture(inputBuffer, vUv);
-      outputColor = rgba;
-    }
-  `
-  )
-};
-class WaterEffectImpl extends Effect {
-  constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {
-    super("WaterEffect", WaterShader.fragmentShader, {
-      blendFunction,
-      attributes: EffectAttribute.CONVOLUTION,
-      uniforms: /* @__PURE__ */ new Map([["factor", new Uniform(factor)]])
-    });
-  }
-}
-const WaterEffect = wrapEffect(WaterEffectImpl, { blendFunction: BlendFunction.NORMAL });
-export {
-  WaterEffect,
-  WaterEffectImpl
-};
-//# sourceMappingURL=Water.js.map
+import { Uniform } from 'three'
+import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import { wrapEffect } from '../util.tsx'
+
+const WaterShader = {
+  fragmentShader: /* glsl */ `
+    uniform float factor;
+
+    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+      vec2 vUv = uv;
+      float frequency = 6.0 * factor;
+      float amplitude = 0.015 * factor;
+      float x = vUv.y * frequency + time * 0.7; 
+      float y = vUv.x * frequency + time * 0.3;
+      vUv.x += cos(x + y) * amplitude * cos(y);
+      vUv.y += sin(x - y) * amplitude * cos(y);
+      vec4 rgba = texture(inputBuffer, vUv);
+      outputColor = rgba;
+    }
+  `,
+}
+
+export class WaterEffectImpl extends Effect {
+  constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {
+    super('WaterEffect', WaterShader.fragmentShader, {
+      blendFunction,
+      attributes: EffectAttribute.CONVOLUTION,
+      uniforms: new Map<string, Uniform<number | number[]>>([['factor', new Uniform(factor)]]),
+    })
+  }
+}
+
+export const WaterEffect = /* @__PURE__ */ wrapEffect(WaterEffectImpl, {
+  blendFunction: BlendFunction.NORMAL,
+})

package/src/index.ts

@@ -0,0 +1,40 @@
+export * from './Selection.tsx'
+export * from './EffectComposer.tsx'
+export * from './util.tsx'
+
+export * from './effects/Autofocus.tsx'
+export * from './effects/LensFlare.tsx'
+export * from './effects/Bloom.tsx'
+export * from './effects/BrightnessContrast.tsx'
+export * from './effects/ChromaticAberration.tsx'
+export * from './effects/ColorAverage.tsx'
+export * from './effects/ColorDepth.tsx'
+export * from './effects/Depth.tsx'
+export * from './effects/DepthOfField.tsx'
+export * from './effects/DotScreen.tsx'
+export * from './effects/Glitch.tsx'
+export * from './effects/GodRays.tsx'
+export * from './effects/Grid.tsx'
+export * from './effects/HueSaturation.tsx'
+export * from './effects/Noise.tsx'
+export * from './effects/Outline.tsx'
+export * from './effects/Pixelation.tsx'
+export * from './effects/ScanlineEffect.tsx'
+export * from './effects/SelectiveBloom.tsx'
+export * from './effects/Sepia.tsx'
+export * from './effects/SSAO.tsx'
+export * from './effects/SMAA.tsx'
+export * from './effects/FXAA.tsx'
+export * from './effects/Ramp.tsx'
+export * from './effects/Texture.tsx'
+export * from './effects/ToneMapping.tsx'
+export * from './effects/Vignette.tsx'
+export * from './effects/ShockWave.tsx'
+export * from './effects/LUT.tsx'
+export * from './effects/TiltShift.tsx'
+export * from './effects/TiltShift2.tsx'
+export * from './effects/ASCII.tsx'
+export * from './effects/Water.tsx'
+
+// These are not effect passes
+export * from './effects/N8AO.tsx'

package/src/util.tsx

@@ -0,0 +1,55 @@
+import React, { RefObject } from 'react'
+import { Vector2 } from 'three'
+import * as THREE from 'three'
+import { type ReactThreeFiber, type ThreeElement, extend, useThree } from '@react-three/fiber'
+import type { Effect, Pass, BlendFunction } from 'postprocessing'
+
+export const resolveRef = <T,>(ref: T | React.RefObject<T>) =>
+  typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref
+
+export type EffectConstructor = new (...args: any[]) => Effect | Pass
+
+export type EffectProps<T extends EffectConstructor> = ThreeElement<T> &
+  ConstructorParameters<T>[0] & {
+    blendFunction?: BlendFunction
+    opacity?: number
+  }
+
+let i = 0
+const components = new WeakMap<EffectConstructor, React.ExoticComponent<any> | string>()
+
+export const wrapEffect = <T extends EffectConstructor>(effect: T, defaults?: EffectProps<T>) =>
+  /* @__PURE__ */ function Effect({ blendFunction = defaults?.blendFunction, opacity = defaults?.opacity, ...props }) {
+    let Component = components.get(effect)
+    if (!Component) {
+      const key = `@react-three/postprocessing/${effect.name}-${i++}`
+      extend({ [key]: effect })
+      components.set(effect, (Component = key))
+    }
+
+    const camera = useThree((state) => state.camera)
+    const args = React.useMemo(
+      () => [...(defaults?.args ?? []), ...(props.args ?? [{ ...defaults, ...props }])],
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [JSON.stringify(props)]
+    )
+
+    return (
+      <Component
+        camera={camera}
+        blendMode-blendFunction={blendFunction}
+        blendMode-opacity-value={opacity}
+        {...props}
+        args={args}
+      />
+    )
+  }
+
+export const useVector2 = (props: Record<string, unknown>, key: string): THREE.Vector2 => {
+  const value = props[key] as ReactThreeFiber.Vector2 | undefined
+  return React.useMemo(() => {
+    if (typeof value === 'number') return new THREE.Vector2(value, value)
+    else if (value) return new THREE.Vector2(...(value as THREE.Vector2Tuple))
+    else return new THREE.Vector2()
+  }, [value])
+}

package/dist/EffectComposer.cjs

@@ -1,137 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const THREE = require("three");
-const React = require("react");
-const fiber = require("@react-three/fiber");
-const postprocessing = require("postprocessing");
-const threeStdlib = require("three-stdlib");
-const EffectComposerContext = React.createContext(null);
-const isConvolution = (effect) => (effect.getAttributes() & postprocessing.EffectAttribute.CONVOLUTION) === postprocessing.EffectAttribute.CONVOLUTION;
-const EffectComposer = React.memo(
-  React.forwardRef(
-    ({
-      children,
-      camera: _camera,
-      scene: _scene,
-      resolutionScale,
-      enabled = true,
-      renderPriority = 1,
-      autoClear = true,
-      depthBuffer,
-      enableNormalPass,
-      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();
-        const effectComposer = new postprocessing.EffectComposer(gl, {
-          depthBuffer,
-          stencilBuffer,
-          multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
-          frameBufferType
-        });
-        effectComposer.addPass(new postprocessing.RenderPass(scene, camera));
-        let downSamplingPass2 = null;
-        let normalPass2 = null;
-        if (enableNormalPass) {
-          normalPass2 = new postprocessing.NormalPass(scene, camera);
-          normalPass2.enabled = false;
-          effectComposer.addPass(normalPass2);
-          if (resolutionScale !== void 0 && webGL2Available) {
-            downSamplingPass2 = new postprocessing.DepthDownsamplingPass({ normalBuffer: normalPass2.texture, resolutionScale });
-            downSamplingPass2.enabled = false;
-            effectComposer.addPass(downSamplingPass2);
-          }
-        }
-        return [effectComposer, normalPass2, downSamplingPass2];
-      }, [
-        camera,
-        gl,
-        depthBuffer,
-        stencilBuffer,
-        multisampling,
-        frameBufferType,
-        scene,
-        enableNormalPass,
-        resolutionScale
-      ]);
-      React.useEffect(() => composer == null ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
-      fiber.useFrame(
-        (_, delta) => {
-          if (enabled) {
-            const currentAutoClear = gl.autoClear;
-            gl.autoClear = autoClear;
-            if (stencilBuffer && !autoClear)
-              gl.clearStencil();
-            composer.render(delta);
-            gl.autoClear = currentAutoClear;
-          }
-        },
-        enabled ? renderPriority : 0
-      );
-      const group = React.useRef(null);
-      React.useLayoutEffect(() => {
-        var _a;
-        const passes = [];
-        const groupInstance = (_a = group.current) == null ? void 0 : _a.__r3f;
-        if (groupInstance && composer) {
-          const children2 = groupInstance.objects;
-          for (let i = 0; i < children2.length; i++) {
-            const child = children2[i];
-            if (child instanceof postprocessing.Effect) {
-              const effects = [child];
-              if (!isConvolution(child)) {
-                let next = null;
-                while ((next = children2[i + 1]) instanceof postprocessing.Effect) {
-                  if (isConvolution(next))
-                    break;
-                  effects.push(next);
-                  i++;
-                }
-              }
-              const pass = new postprocessing.EffectPass(camera, ...effects);
-              passes.push(pass);
-            } else if (child instanceof postprocessing.Pass) {
-              passes.push(child);
-            }
-          }
-          for (const pass of passes)
-            composer == null ? void 0 : composer.addPass(pass);
-          if (normalPass)
-            normalPass.enabled = true;
-          if (downSamplingPass)
-            downSamplingPass.enabled = true;
-        }
-        return () => {
-          for (const pass of passes)
-            composer == null ? void 0 : composer.removePass(pass);
-          if (normalPass)
-            normalPass.enabled = false;
-          if (downSamplingPass)
-            downSamplingPass.enabled = false;
-        };
-      }, [composer, children, camera, normalPass, downSamplingPass]);
-      React.useEffect(() => {
-        const currentTonemapping = gl.toneMapping;
-        gl.toneMapping = THREE.NoToneMapping;
-        return () => {
-          gl.toneMapping = currentTonemapping;
-        };
-      }, [gl]);
-      const state = React.useMemo(
-        () => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }),
-        [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]
-      );
-      React.useImperativeHandle(ref, () => composer, [composer]);
-      return /* @__PURE__ */ jsxRuntime.jsx(EffectComposerContext.Provider, { value: state, children: /* @__PURE__ */ jsxRuntime.jsx("group", { ref: group, children }) });
-    }
-  )
-);
-exports.EffectComposer = EffectComposer;
-exports.EffectComposerContext = EffectComposerContext;
-//# sourceMappingURL=EffectComposer.cjs.map

package/dist/EffectComposer.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"EffectComposer.cjs","sources":["../src/EffectComposer.tsx"],"sourcesContent":["import type { TextureDataType } from 'three'\nimport { HalfFloatType, NoToneMapping } from 'three'\nimport React, {\n  forwardRef,\n  useMemo,\n  useEffect,\n  useLayoutEffect,\n  createContext,\n  useRef,\n  useImperativeHandle,\n} from 'react'\nimport { useThree, useFrame } from '@react-three/fiber'\nimport {\n  EffectComposer as EffectComposerImpl,\n  RenderPass,\n  EffectPass,\n  NormalPass,\n  // @ts-ignore\n  DepthDownsamplingPass,\n  Effect,\n  Pass,\n  EffectAttribute,\n} from 'postprocessing'\nimport { isWebGL2Available } from 'three-stdlib'\n\nexport const EffectComposerContext = createContext<{\n  composer: EffectComposerImpl\n  normalPass: NormalPass | null\n  downSamplingPass: DepthDownsamplingPass | null\n  camera: THREE.Camera\n  scene: THREE.Scene\n  resolutionScale?: number\n}>(null!)\n\nexport type EffectComposerProps = {\n  enabled?: boolean\n  children: JSX.Element | JSX.Element[]\n  depthBuffer?: boolean\n  /** Only used for SSGI currently, leave it disabled for everything else unless it's needed */\n  enableNormalPass?: boolean\n  stencilBuffer?: boolean\n  autoClear?: boolean\n  resolutionScale?: number\n  multisampling?: number\n  frameBufferType?: TextureDataType\n  renderPriority?: number\n  camera?: THREE.Camera\n  scene?: THREE.Scene\n}\n\nconst isConvolution = (effect: Effect): boolean =>\n  (effect.getAttributes() & EffectAttribute.CONVOLUTION) === EffectAttribute.CONVOLUTION\n\nexport const EffectComposer = React.memo(\n  forwardRef<EffectComposerImpl, EffectComposerProps>(\n    (\n      {\n        children,\n        camera: _camera,\n        scene: _scene,\n        resolutionScale,\n        enabled = true,\n        renderPriority = 1,\n        autoClear = true,\n        depthBuffer,\n        enableNormalPass,\n        stencilBuffer,\n        multisampling = 8,\n        frameBufferType = HalfFloatType,\n      },\n      ref\n    ) => {\n      const { gl, scene: defaultScene, camera: defaultCamera, size } = useThree()\n      const scene = _scene || defaultScene\n      const camera = _camera || defaultCamera\n\n      const [composer, normalPass, downSamplingPass] = useMemo(() => {\n        const webGL2Available = isWebGL2Available()\n        // Initialize composer\n        const effectComposer = new EffectComposerImpl(gl, {\n          depthBuffer,\n          stencilBuffer,\n          multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,\n          frameBufferType,\n        })\n\n        // Add render pass\n        effectComposer.addPass(new RenderPass(scene, camera))\n\n        // Create normal pass\n        let downSamplingPass = null\n        let normalPass = null\n        if (enableNormalPass) {\n          normalPass = new NormalPass(scene, camera)\n          normalPass.enabled = false\n          effectComposer.addPass(normalPass)\n          if (resolutionScale !== undefined && webGL2Available) {\n            downSamplingPass = new DepthDownsamplingPass({ normalBuffer: normalPass.texture, resolutionScale })\n            downSamplingPass.enabled = false\n            effectComposer.addPass(downSamplingPass)\n          }\n        }\n\n        return [effectComposer, normalPass, downSamplingPass]\n      }, [\n        camera,\n        gl,\n        depthBuffer,\n        stencilBuffer,\n        multisampling,\n        frameBufferType,\n        scene,\n        enableNormalPass,\n        resolutionScale,\n      ])\n\n      useEffect(() => composer?.setSize(size.width, size.height), [composer, size])\n      useFrame(\n        (_, delta) => {\n          if (enabled) {\n            const currentAutoClear = gl.autoClear\n            gl.autoClear = autoClear\n            if (stencilBuffer && !autoClear) gl.clearStencil()\n            composer.render(delta)\n            gl.autoClear = currentAutoClear\n          }\n        },\n        enabled ? renderPriority : 0\n      )\n\n      const group = useRef(null)\n      useLayoutEffect(() => {\n        const passes: Pass[] = []\n\n        // TODO: rewrite all of this with R3F v9\n        const groupInstance = (group.current as any)?.__r3f as { objects: unknown[] }\n\n        if (groupInstance && composer) {\n          const children = groupInstance.objects\n\n          for (let i = 0; i < children.length; i++) {\n            const child = children[i]\n\n            if (child instanceof Effect) {\n              const effects: Effect[] = [child]\n\n              if (!isConvolution(child)) {\n                let next: unknown = null\n                while ((next = children[i + 1]) instanceof Effect) {\n                  if (isConvolution(next)) break\n                  effects.push(next)\n                  i++\n                }\n              }\n\n              const pass = new EffectPass(camera, ...effects)\n              passes.push(pass)\n            } else if (child instanceof Pass) {\n              passes.push(child)\n            }\n          }\n\n          for (const pass of passes) composer?.addPass(pass)\n\n          if (normalPass) normalPass.enabled = true\n          if (downSamplingPass) downSamplingPass.enabled = true\n        }\n\n        return () => {\n          for (const pass of passes) composer?.removePass(pass)\n          if (normalPass) normalPass.enabled = false\n          if (downSamplingPass) downSamplingPass.enabled = false\n        }\n      }, [composer, children, camera, normalPass, downSamplingPass])\n\n      // Disable tone mapping because threejs disallows tonemapping on render targets\n      useEffect(() => {\n        const currentTonemapping = gl.toneMapping\n        gl.toneMapping = NoToneMapping\n        return () => {\n          gl.toneMapping = currentTonemapping\n        }\n      }, [gl])\n\n      // Memoize state, otherwise it would trigger all consumers on every render\n      const state = useMemo(\n        () => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }),\n        [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]\n      )\n\n      // Expose the composer\n      useImperativeHandle(ref, () => composer, [composer])\n\n      return (\n        <EffectComposerContext.Provider value={state}>\n          <group ref={group}>{children}</group>\n        </EffectComposerContext.Provider>\n      )\n    }\n  )\n)\n"],"names":["createContext","EffectAttribute","forwardRef","HalfFloatType","useThree","useMemo","isWebGL2Available","EffectComposerImpl","RenderPass","downSamplingPass","normalPass","NormalPass","DepthDownsamplingPass","useEffect","useFrame","useRef","useLayoutEffect","children","Effect","EffectPass","Pass","NoToneMapping","useImperativeHandle","jsx"],"mappings":";;;;;;;;AAyBa,MAAA,wBAAwBA,oBAOlC,IAAK;AAkBR,MAAM,gBAAgB,CAAC,YACpB,OAAO,cAAkB,IAAAC,+BAAgB,iBAAiBA,eAAgB,gBAAA;AAEtE,MAAM,iBAAiB,MAAM;AAAA,EAClCC,MAAA;AAAA,IACE,CACE;AAAA,MACE;AAAA,MACA,QAAQ;AAAA,MACR,OAAO;AAAA,MACP;AAAA,MACA,UAAU;AAAA,MACV,iBAAiB;AAAA,MACjB,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAChB,kBAAkBC,MAAA;AAAA,OAEpB,QACG;AACG,YAAA,EAAE,IAAI,OAAO,cAAc,QAAQ,eAAe,SAASC,MAAAA;AACjE,YAAM,QAAQ,UAAU;AACxB,YAAM,SAAS,WAAW;AAE1B,YAAM,CAAC,UAAU,YAAY,gBAAgB,IAAIC,cAAQ,MAAM;AAC7D,cAAM,kBAAkBC,YAAAA;AAElB,cAAA,iBAAiB,IAAIC,eAAA,eAAmB,IAAI;AAAA,UAChD;AAAA,UACA;AAAA,UACA,eAAe,gBAAgB,KAAK,kBAAkB,gBAAgB;AAAA,UACtE;AAAA,QAAA,CACD;AAGD,uBAAe,QAAQ,IAAIC,eAAAA,WAAW,OAAO,MAAM,CAAC;AAGpD,YAAIC,oBAAmB;AACvB,YAAIC,cAAa;AACjB,YAAI,kBAAkB;AACpBA,wBAAa,IAAIC,eAAAA,WAAW,OAAO,MAAM;AACzCD,sBAAW,UAAU;AACrB,yBAAe,QAAQA,WAAU;AAC7B,cAAA,oBAAoB,UAAa,iBAAiB;AACpDD,gCAAmB,IAAIG,eAAAA,sBAAsB,EAAE,cAAcF,YAAW,SAAS,iBAAiB;AAClGD,8BAAiB,UAAU;AAC3B,2BAAe,QAAQA,iBAAgB;AAAA,UACzC;AAAA,QACF;AAEO,eAAA,CAAC,gBAAgBC,aAAYD,iBAAgB;AAAA,MAAA,GACnD;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAESI,YAAAA,UAAA,MAAM,qCAAU,QAAQ,KAAK,OAAO,KAAK,SAAS,CAAC,UAAU,IAAI,CAAC;AAC5EC,YAAA;AAAA,QACE,CAAC,GAAG,UAAU;AACZ,cAAI,SAAS;AACX,kBAAM,mBAAmB,GAAG;AAC5B,eAAG,YAAY;AACf,gBAAI,iBAAiB,CAAC;AAAW,iBAAG,aAAa;AACjD,qBAAS,OAAO,KAAK;AACrB,eAAG,YAAY;AAAA,UACjB;AAAA,QACF;AAAA,QACA,UAAU,iBAAiB;AAAA,MAAA;AAGvB,YAAA,QAAQC,aAAO,IAAI;AACzBC,YAAAA,gBAAgB,MAAM;;AACpB,cAAM,SAAiB,CAAA;AAGjB,cAAA,iBAAiB,WAAM,YAAN,mBAAuB;AAE9C,YAAI,iBAAiB,UAAU;AAC7B,gBAAMC,YAAW,cAAc;AAE/B,mBAAS,IAAI,GAAG,IAAIA,UAAS,QAAQ,KAAK;AAClC,kBAAA,QAAQA,UAAS,CAAC;AAExB,gBAAI,iBAAiBC,eAAAA,QAAQ;AACrB,oBAAA,UAAoB,CAAC,KAAK;AAE5B,kBAAA,CAAC,cAAc,KAAK,GAAG;AACzB,oBAAI,OAAgB;AACpB,wBAAQ,OAAOD,UAAS,IAAI,CAAC,cAAcC,eAAAA,QAAQ;AACjD,sBAAI,cAAc,IAAI;AAAG;AACzB,0BAAQ,KAAK,IAAI;AACjB;AAAA,gBACF;AAAA,cACF;AAEA,oBAAM,OAAO,IAAIC,eAAAA,WAAW,QAAQ,GAAG,OAAO;AAC9C,qBAAO,KAAK,IAAI;AAAA,YAAA,WACP,iBAAiBC,qBAAM;AAChC,qBAAO,KAAK,KAAK;AAAA,YACnB;AAAA,UACF;AAEA,qBAAW,QAAQ;AAAQ,iDAAU,QAAQ;AAEzC,cAAA;AAAY,uBAAW,UAAU;AACjC,cAAA;AAAkB,6BAAiB,UAAU;AAAA,QACnD;AAEA,eAAO,MAAM;AACX,qBAAW,QAAQ;AAAQ,iDAAU,WAAW;AAC5C,cAAA;AAAY,uBAAW,UAAU;AACjC,cAAA;AAAkB,6BAAiB,UAAU;AAAA,QAAA;AAAA,MACnD,GACC,CAAC,UAAU,UAAU,QAAQ,YAAY,gBAAgB,CAAC;AAG7DP,YAAAA,UAAU,MAAM;AACd,cAAM,qBAAqB,GAAG;AAC9B,WAAG,cAAcQ;AACjB,eAAO,MAAM;AACX,aAAG,cAAc;AAAA,QAAA;AAAA,MACnB,GACC,CAAC,EAAE,CAAC;AAGP,YAAM,QAAQhB,MAAA;AAAA,QACZ,OAAO,EAAE,UAAU,YAAY,kBAAkB,iBAAiB,QAAQ;QAC1E,CAAC,UAAU,YAAY,kBAAkB,iBAAiB,QAAQ,KAAK;AAAA,MAAA;AAIzEiB,YAAAA,oBAAoB,KAAK,MAAM,UAAU,CAAC,QAAQ,CAAC;AAGjD,aAAAC,2BAAAA,IAAC,sBAAsB,UAAtB,EAA+B,OAAO,OACrC,UAAAA,2BAAA,IAAC,SAAM,EAAA,KAAK,OAAQ,SAAS,CAAA,EAC/B,CAAA;AAAA,IAEJ;AAAA,EACF;AACF;;;"}

package/dist/EffectComposer.d.ts

@@ -1,27 +0,0 @@
-import type { TextureDataType } from 'three';
-import React from 'react';
-import { EffectComposer as EffectComposerImpl, NormalPass, DepthDownsamplingPass } from 'postprocessing';
-export declare const EffectComposerContext: React.Context<{
-    composer: EffectComposerImpl;
-    normalPass: NormalPass | null;
-    downSamplingPass: DepthDownsamplingPass | null;
-    camera: THREE.Camera;
-    scene: THREE.Scene;
-    resolutionScale?: number | undefined;
-}>;
-export type EffectComposerProps = {
-    enabled?: boolean;
-    children: JSX.Element | JSX.Element[];
-    depthBuffer?: boolean;
-    /** Only used for SSGI currently, leave it disabled for everything else unless it's needed */
-    enableNormalPass?: boolean;
-    stencilBuffer?: boolean;
-    autoClear?: boolean;
-    resolutionScale?: number;
-    multisampling?: number;
-    frameBufferType?: TextureDataType;
-    renderPriority?: number;
-    camera?: THREE.Camera;
-    scene?: THREE.Scene;
-};
-export declare const EffectComposer: React.MemoExoticComponent<React.ForwardRefExoticComponent<EffectComposerProps & React.RefAttributes<EffectComposerImpl>>>;