@react-three/postprocessing 2.16.3 → 2.16.4

package/dist/EffectComposer.cjs

@@ -75,11 +75,12 @@ const EffectComposer = React.memo(
         enabled ? renderPriority : 0
       );
       const group = React.useRef(null);
-      const instance = fiber.useInstanceHandle(group);
       React.useLayoutEffect(() => {
+        var _a;
         const passes = [];
-        if (group.current && instance.current && composer) {
-          const children2 = instance.current.objects;
+        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) {
@@ -114,14 +115,14 @@ const EffectComposer = React.memo(
           if (downSamplingPass)
             downSamplingPass.enabled = false;
         };
-      }, [composer, children, camera, normalPass, downSamplingPass, instance]);
+      }, [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]

package/dist/EffectComposer.cjs.map

@@ -1 +1 @@
-{"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, useInstanceHandle } 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(\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      }: EffectComposerProps,\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      const instance = useInstanceHandle(group)\n      useLayoutEffect(() => {\n        const passes: Pass[] = []\n\n        if (group.current && instance.current && composer) {\n          const children = instance.current.objects as unknown[]\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, instance])\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      }, [])\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","useInstanceHandle","useLayoutEffect","children","Effect","EffectPass","Pass","NoToneMapping","useImperativeHandle","jsx"],"mappings":"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"}
+{"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":"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"}

package/dist/EffectComposer.d.ts

@@ -24,4 +24,4 @@ export type EffectComposerProps = {
     camera?: THREE.Camera;
     scene?: THREE.Scene;
 };
-export declare const EffectComposer: React.MemoExoticComponent<React.ForwardRefExoticComponent<EffectComposerProps & React.RefAttributes<unknown>>>;
+export declare const EffectComposer: React.MemoExoticComponent<React.ForwardRefExoticComponent<EffectComposerProps & React.RefAttributes<EffectComposerImpl>>>;

package/dist/EffectComposer.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { NoToneMapping, HalfFloatType } from "three";
 import React, { createContext, forwardRef, useMemo, useEffect, useRef, useLayoutEffect, useImperativeHandle } from "react";
-import { useThree, useFrame, useInstanceHandle } from "@react-three/fiber";
+import { useThree, useFrame } from "@react-three/fiber";
 import { EffectComposer as EffectComposer$1, RenderPass, NormalPass, DepthDownsamplingPass, Effect, EffectPass, EffectAttribute, Pass } from "postprocessing";
 import { isWebGL2Available } from "three-stdlib";
 const EffectComposerContext = createContext(null);
@@ -73,11 +73,12 @@ const EffectComposer = React.memo(
         enabled ? renderPriority : 0
       );
       const group = useRef(null);
-      const instance = useInstanceHandle(group);
       useLayoutEffect(() => {
+        var _a;
         const passes = [];
-        if (group.current && instance.current && composer) {
-          const children2 = instance.current.objects;
+        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 Effect) {
@@ -112,14 +113,14 @@ const EffectComposer = React.memo(
           if (downSamplingPass)
             downSamplingPass.enabled = false;
         };
-      }, [composer, children, camera, normalPass, downSamplingPass, instance]);
+      }, [composer, children, camera, normalPass, downSamplingPass]);
       useEffect(() => {
         const currentTonemapping = gl.toneMapping;
         gl.toneMapping = NoToneMapping;
         return () => {
           gl.toneMapping = currentTonemapping;
         };
-      }, []);
+      }, [gl]);
       const state = useMemo(
         () => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }),
         [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]

package/dist/EffectComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"EffectComposer.js","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, useInstanceHandle } 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(\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      }: EffectComposerProps,\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      const instance = useInstanceHandle(group)\n      useLayoutEffect(() => {\n        const passes: Pass[] = []\n\n        if (group.current && instance.current && composer) {\n          const children = instance.current.objects as unknown[]\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, instance])\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      }, [])\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":["EffectComposerImpl","downSamplingPass","normalPass","children"],"mappings":"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"}
+{"version":3,"file":"EffectComposer.js","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":["EffectComposerImpl","downSamplingPass","normalPass","children"],"mappings":"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"}

package/dist/EffectComposer.test.d.ts

@@ -0,0 +1,4 @@
+declare global {
+    var IS_REACT_ACT_ENVIRONMENT: boolean;
+}
+export {};

package/dist/effects/Autofocus.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Autofocus.cjs","sources":["../../src/effects/Autofocus.tsx"],"sourcesContent":["import * as THREE from 'three'\nimport React, {\n  useRef,\n  useContext,\n  useState,\n  useEffect,\n  useCallback,\n  forwardRef,\n  useImperativeHandle,\n  RefObject,\n  useMemo,\n} from 'react'\nimport { useThree, useFrame, createPortal, Vector3 } from '@react-three/fiber'\nimport { CopyPass, DepthPickingPass, DepthOfFieldEffect } from 'postprocessing'\nimport { easing } from 'maath'\n\nimport { DepthOfField } from './DepthOfField'\nimport { EffectComposerContext } from '../EffectComposer'\n\nexport type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {\n  target?: Vector3\n  /** should the target follow the pointer */\n  mouse?: boolean\n  /** size of the debug green point  */\n  debug?: number\n  /** manual update */\n  manual?: boolean\n  /** approximate time to reach the target */\n  smoothTime?: number\n}\n\nexport type AutofocusApi = {\n  dofRef: RefObject<DepthOfFieldEffect>\n  hitpoint: THREE.Vector3\n  update: (delta: number, updateTarget: boolean) => void\n}\n\nexport const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(\n  (\n    { target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0.25, ...props },\n    fref\n  ) => {\n    const dofRef = useRef<DepthOfFieldEffect>(null)\n    const hitpointRef = useRef<THREE.Mesh>(null)\n    const targetRef = useRef<THREE.Mesh>(null)\n\n    const scene = useThree(({ scene }) => scene)\n    const pointer = useThree(({ pointer }) => pointer)\n    const { composer, camera } = useContext(EffectComposerContext)\n\n    // see: https://codesandbox.io/s/depthpickingpass-x130hg\n    const [depthPickingPass] = useState(() => new DepthPickingPass())\n    const [copyPass] = useState(() => new CopyPass())\n    useEffect(() => {\n      composer.addPass(depthPickingPass)\n      composer.addPass(copyPass)\n      return () => {\n        composer.removePass(depthPickingPass)\n        composer.removePass(copyPass)\n      }\n    }, [composer, depthPickingPass, copyPass])\n\n    useEffect(() => {\n      return () => {\n        depthPickingPass.dispose()\n        copyPass.dispose()\n      }\n    }, [depthPickingPass, copyPass])\n\n    const [hitpoint] = useState(() => new THREE.Vector3(0, 0, 0))\n\n    const [ndc] = useState(() => new THREE.Vector3(0, 0, 0))\n    const getHit = useCallback(\n      async (x: number, y: number) => {\n        ndc.x = x\n        ndc.y = y\n        ndc.z = await depthPickingPass.readDepth(ndc)\n        ndc.z = ndc.z * 2.0 - 1.0\n        const hit = 1 - ndc.z > 0.0000001 // it is missed if ndc.z is close to 1\n        return hit ? ndc.unproject(camera) : false\n      },\n      [ndc, depthPickingPass, camera]\n    )\n\n    const update = useCallback(\n      async (delta: number, updateTarget = true) => {\n        // Update hitpoint\n        if (target) {\n          hitpoint.set(...(target as [number, number, number]))\n        } else {\n          const { x, y } = followMouse ? pointer : { x: 0, y: 0 }\n          const hit = await getHit(x, y)\n          if (hit) hitpoint.copy(hit)\n        }\n\n        // Update target\n        if (updateTarget && dofRef.current?.target) {\n          if (smoothTime > 0 && delta > 0) {\n            easing.damp3(dofRef.current.target, hitpoint, smoothTime, delta)\n          } else {\n            dofRef.current.target.copy(hitpoint)\n          }\n        }\n      },\n      [target, hitpoint, followMouse, getHit, smoothTime, pointer]\n    )\n\n    useFrame(async (_, delta) => {\n      if (!manual) {\n        update(delta)\n      }\n      if (hitpointRef.current) {\n        hitpointRef.current.position.copy(hitpoint)\n      }\n      if (targetRef.current && dofRef.current?.target) {\n        targetRef.current.position.copy(dofRef.current.target)\n      }\n    })\n\n    // Ref API\n    const api = useMemo<AutofocusApi>(\n      () => ({\n        dofRef,\n        hitpoint,\n        update,\n      }),\n      [hitpoint, update]\n    )\n    useImperativeHandle(fref, () => api, [api])\n\n    return (\n      <>\n        {debug\n          ? createPortal(\n              <>\n                <mesh ref={hitpointRef}>\n                  <sphereGeometry args={[debug, 16, 16]} />\n                  <meshBasicMaterial color=\"#00ff00\" opacity={1} transparent depthWrite={false} />\n                </mesh>\n                <mesh ref={targetRef}>\n                  <sphereGeometry args={[debug / 2, 16, 16]} />\n                  <meshBasicMaterial color=\"#00ff00\" opacity={0.5} transparent depthWrite={false} />\n                </mesh>\n              </>,\n              scene\n            )\n          : null}\n\n        <DepthOfField ref={dofRef} {...props} target={hitpoint} />\n      </>\n    )\n  }\n)\n"],"names":["forwardRef","useRef","useThree","scene","pointer","useContext","EffectComposerContext","useState","DepthPickingPass","CopyPass","useEffect","THREE","useCallback","easing","useFrame","useMemo","useImperativeHandle","jsxs","Fragment","createPortal","jsx","DepthOfField"],"mappings":"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"}
+{"version":3,"file":"Autofocus.cjs","sources":["../../src/effects/Autofocus.tsx"],"sourcesContent":["import * as THREE from 'three'\nimport React, {\n  useRef,\n  useContext,\n  useState,\n  useEffect,\n  useCallback,\n  forwardRef,\n  useImperativeHandle,\n  RefObject,\n  useMemo,\n} from 'react'\nimport { useThree, useFrame, createPortal, type Vector3 } from '@react-three/fiber'\nimport { CopyPass, DepthPickingPass, DepthOfFieldEffect } from 'postprocessing'\nimport { easing } from 'maath'\n\nimport { DepthOfField } from './DepthOfField'\nimport { EffectComposerContext } from '../EffectComposer'\n\nexport type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {\n  target?: Vector3\n  /** should the target follow the pointer */\n  mouse?: boolean\n  /** size of the debug green point  */\n  debug?: number\n  /** manual update */\n  manual?: boolean\n  /** approximate time to reach the target */\n  smoothTime?: number\n}\n\nexport type AutofocusApi = {\n  dofRef: RefObject<DepthOfFieldEffect>\n  hitpoint: THREE.Vector3\n  update: (delta: number, updateTarget: boolean) => void\n}\n\nexport const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(\n  (\n    { target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0.25, ...props },\n    fref\n  ) => {\n    const dofRef = useRef<DepthOfFieldEffect>(null)\n    const hitpointRef = useRef<THREE.Mesh>(null)\n    const targetRef = useRef<THREE.Mesh>(null)\n\n    const scene = useThree(({ scene }) => scene)\n    const pointer = useThree(({ pointer }) => pointer)\n    const { composer, camera } = useContext(EffectComposerContext)\n\n    // see: https://codesandbox.io/s/depthpickingpass-x130hg\n    const [depthPickingPass] = useState(() => new DepthPickingPass())\n    const [copyPass] = useState(() => new CopyPass())\n    useEffect(() => {\n      composer.addPass(depthPickingPass)\n      composer.addPass(copyPass)\n      return () => {\n        composer.removePass(depthPickingPass)\n        composer.removePass(copyPass)\n      }\n    }, [composer, depthPickingPass, copyPass])\n\n    useEffect(() => {\n      return () => {\n        depthPickingPass.dispose()\n        copyPass.dispose()\n      }\n    }, [depthPickingPass, copyPass])\n\n    const [hitpoint] = useState(() => new THREE.Vector3(0, 0, 0))\n\n    const [ndc] = useState(() => new THREE.Vector3(0, 0, 0))\n    const getHit = useCallback(\n      async (x: number, y: number) => {\n        ndc.x = x\n        ndc.y = y\n        ndc.z = await depthPickingPass.readDepth(ndc)\n        ndc.z = ndc.z * 2.0 - 1.0\n        const hit = 1 - ndc.z > 0.0000001 // it is missed if ndc.z is close to 1\n        return hit ? ndc.unproject(camera) : false\n      },\n      [ndc, depthPickingPass, camera]\n    )\n\n    const update = useCallback(\n      async (delta: number, updateTarget = true) => {\n        // Update hitpoint\n        if (target) {\n          hitpoint.set(...(target as [number, number, number]))\n        } else {\n          const { x, y } = followMouse ? pointer : { x: 0, y: 0 }\n          const hit = await getHit(x, y)\n          if (hit) hitpoint.copy(hit)\n        }\n\n        // Update target\n        if (updateTarget && dofRef.current?.target) {\n          if (smoothTime > 0 && delta > 0) {\n            easing.damp3(dofRef.current.target, hitpoint, smoothTime, delta)\n          } else {\n            dofRef.current.target.copy(hitpoint)\n          }\n        }\n      },\n      [target, hitpoint, followMouse, getHit, smoothTime, pointer]\n    )\n\n    useFrame(async (_, delta) => {\n      if (!manual) {\n        update(delta)\n      }\n      if (hitpointRef.current) {\n        hitpointRef.current.position.copy(hitpoint)\n      }\n      if (targetRef.current && dofRef.current?.target) {\n        targetRef.current.position.copy(dofRef.current.target)\n      }\n    })\n\n    // Ref API\n    const api = useMemo<AutofocusApi>(\n      () => ({\n        dofRef,\n        hitpoint,\n        update,\n      }),\n      [hitpoint, update]\n    )\n    useImperativeHandle(fref, () => api, [api])\n\n    return (\n      <>\n        {debug\n          ? createPortal(\n              <>\n                <mesh ref={hitpointRef}>\n                  <sphereGeometry args={[debug, 16, 16]} />\n                  <meshBasicMaterial color=\"#00ff00\" opacity={1} transparent depthWrite={false} />\n                </mesh>\n                <mesh ref={targetRef}>\n                  <sphereGeometry args={[debug / 2, 16, 16]} />\n                  <meshBasicMaterial color=\"#00ff00\" opacity={0.5} transparent depthWrite={false} />\n                </mesh>\n              </>,\n              scene\n            )\n          : null}\n\n        <DepthOfField ref={dofRef} {...props} target={hitpoint} />\n      </>\n    )\n  }\n)\n"],"names":["forwardRef","useRef","useThree","scene","pointer","useContext","EffectComposerContext","useState","DepthPickingPass","CopyPass","useEffect","THREE","useCallback","easing","useFrame","useMemo","useImperativeHandle","jsxs","Fragment","createPortal","jsx","DepthOfField"],"mappings":"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"}

package/dist/effects/Autofocus.d.ts

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import React, { RefObject } from 'react';
-import { Vector3 } from '@react-three/fiber';
+import { type Vector3 } from '@react-three/fiber';
 import { DepthOfFieldEffect } from 'postprocessing';
 import { DepthOfField } from './DepthOfField';
 export type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {

package/dist/effects/Autofocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autofocus.js","sources":["../../src/effects/Autofocus.tsx"],"sourcesContent":["import * as THREE from 'three'\nimport React, {\n  useRef,\n  useContext,\n  useState,\n  useEffect,\n  useCallback,\n  forwardRef,\n  useImperativeHandle,\n  RefObject,\n  useMemo,\n} from 'react'\nimport { useThree, useFrame, createPortal, Vector3 } from '@react-three/fiber'\nimport { CopyPass, DepthPickingPass, DepthOfFieldEffect } from 'postprocessing'\nimport { easing } from 'maath'\n\nimport { DepthOfField } from './DepthOfField'\nimport { EffectComposerContext } from '../EffectComposer'\n\nexport type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {\n  target?: Vector3\n  /** should the target follow the pointer */\n  mouse?: boolean\n  /** size of the debug green point  */\n  debug?: number\n  /** manual update */\n  manual?: boolean\n  /** approximate time to reach the target */\n  smoothTime?: number\n}\n\nexport type AutofocusApi = {\n  dofRef: RefObject<DepthOfFieldEffect>\n  hitpoint: THREE.Vector3\n  update: (delta: number, updateTarget: boolean) => void\n}\n\nexport const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(\n  (\n    { target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0.25, ...props },\n    fref\n  ) => {\n    const dofRef = useRef<DepthOfFieldEffect>(null)\n    const hitpointRef = useRef<THREE.Mesh>(null)\n    const targetRef = useRef<THREE.Mesh>(null)\n\n    const scene = useThree(({ scene }) => scene)\n    const pointer = useThree(({ pointer }) => pointer)\n    const { composer, camera } = useContext(EffectComposerContext)\n\n    // see: https://codesandbox.io/s/depthpickingpass-x130hg\n    const [depthPickingPass] = useState(() => new DepthPickingPass())\n    const [copyPass] = useState(() => new CopyPass())\n    useEffect(() => {\n      composer.addPass(depthPickingPass)\n      composer.addPass(copyPass)\n      return () => {\n        composer.removePass(depthPickingPass)\n        composer.removePass(copyPass)\n      }\n    }, [composer, depthPickingPass, copyPass])\n\n    useEffect(() => {\n      return () => {\n        depthPickingPass.dispose()\n        copyPass.dispose()\n      }\n    }, [depthPickingPass, copyPass])\n\n    const [hitpoint] = useState(() => new THREE.Vector3(0, 0, 0))\n\n    const [ndc] = useState(() => new THREE.Vector3(0, 0, 0))\n    const getHit = useCallback(\n      async (x: number, y: number) => {\n        ndc.x = x\n        ndc.y = y\n        ndc.z = await depthPickingPass.readDepth(ndc)\n        ndc.z = ndc.z * 2.0 - 1.0\n        const hit = 1 - ndc.z > 0.0000001 // it is missed if ndc.z is close to 1\n        return hit ? ndc.unproject(camera) : false\n      },\n      [ndc, depthPickingPass, camera]\n    )\n\n    const update = useCallback(\n      async (delta: number, updateTarget = true) => {\n        // Update hitpoint\n        if (target) {\n          hitpoint.set(...(target as [number, number, number]))\n        } else {\n          const { x, y } = followMouse ? pointer : { x: 0, y: 0 }\n          const hit = await getHit(x, y)\n          if (hit) hitpoint.copy(hit)\n        }\n\n        // Update target\n        if (updateTarget && dofRef.current?.target) {\n          if (smoothTime > 0 && delta > 0) {\n            easing.damp3(dofRef.current.target, hitpoint, smoothTime, delta)\n          } else {\n            dofRef.current.target.copy(hitpoint)\n          }\n        }\n      },\n      [target, hitpoint, followMouse, getHit, smoothTime, pointer]\n    )\n\n    useFrame(async (_, delta) => {\n      if (!manual) {\n        update(delta)\n      }\n      if (hitpointRef.current) {\n        hitpointRef.current.position.copy(hitpoint)\n      }\n      if (targetRef.current && dofRef.current?.target) {\n        targetRef.current.position.copy(dofRef.current.target)\n      }\n    })\n\n    // Ref API\n    const api = useMemo<AutofocusApi>(\n      () => ({\n        dofRef,\n        hitpoint,\n        update,\n      }),\n      [hitpoint, update]\n    )\n    useImperativeHandle(fref, () => api, [api])\n\n    return (\n      <>\n        {debug\n          ? createPortal(\n              <>\n                <mesh ref={hitpointRef}>\n                  <sphereGeometry args={[debug, 16, 16]} />\n                  <meshBasicMaterial color=\"#00ff00\" opacity={1} transparent depthWrite={false} />\n                </mesh>\n                <mesh ref={targetRef}>\n                  <sphereGeometry args={[debug / 2, 16, 16]} />\n                  <meshBasicMaterial color=\"#00ff00\" opacity={0.5} transparent depthWrite={false} />\n                </mesh>\n              </>,\n              scene\n            )\n          : null}\n\n        <DepthOfField ref={dofRef} {...props} target={hitpoint} />\n      </>\n    )\n  }\n)\n"],"names":["scene","pointer"],"mappings":"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"}
+{"version":3,"file":"Autofocus.js","sources":["../../src/effects/Autofocus.tsx"],"sourcesContent":["import * as THREE from 'three'\nimport React, {\n  useRef,\n  useContext,\n  useState,\n  useEffect,\n  useCallback,\n  forwardRef,\n  useImperativeHandle,\n  RefObject,\n  useMemo,\n} from 'react'\nimport { useThree, useFrame, createPortal, type Vector3 } from '@react-three/fiber'\nimport { CopyPass, DepthPickingPass, DepthOfFieldEffect } from 'postprocessing'\nimport { easing } from 'maath'\n\nimport { DepthOfField } from './DepthOfField'\nimport { EffectComposerContext } from '../EffectComposer'\n\nexport type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {\n  target?: Vector3\n  /** should the target follow the pointer */\n  mouse?: boolean\n  /** size of the debug green point  */\n  debug?: number\n  /** manual update */\n  manual?: boolean\n  /** approximate time to reach the target */\n  smoothTime?: number\n}\n\nexport type AutofocusApi = {\n  dofRef: RefObject<DepthOfFieldEffect>\n  hitpoint: THREE.Vector3\n  update: (delta: number, updateTarget: boolean) => void\n}\n\nexport const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(\n  (\n    { target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0.25, ...props },\n    fref\n  ) => {\n    const dofRef = useRef<DepthOfFieldEffect>(null)\n    const hitpointRef = useRef<THREE.Mesh>(null)\n    const targetRef = useRef<THREE.Mesh>(null)\n\n    const scene = useThree(({ scene }) => scene)\n    const pointer = useThree(({ pointer }) => pointer)\n    const { composer, camera } = useContext(EffectComposerContext)\n\n    // see: https://codesandbox.io/s/depthpickingpass-x130hg\n    const [depthPickingPass] = useState(() => new DepthPickingPass())\n    const [copyPass] = useState(() => new CopyPass())\n    useEffect(() => {\n      composer.addPass(depthPickingPass)\n      composer.addPass(copyPass)\n      return () => {\n        composer.removePass(depthPickingPass)\n        composer.removePass(copyPass)\n      }\n    }, [composer, depthPickingPass, copyPass])\n\n    useEffect(() => {\n      return () => {\n        depthPickingPass.dispose()\n        copyPass.dispose()\n      }\n    }, [depthPickingPass, copyPass])\n\n    const [hitpoint] = useState(() => new THREE.Vector3(0, 0, 0))\n\n    const [ndc] = useState(() => new THREE.Vector3(0, 0, 0))\n    const getHit = useCallback(\n      async (x: number, y: number) => {\n        ndc.x = x\n        ndc.y = y\n        ndc.z = await depthPickingPass.readDepth(ndc)\n        ndc.z = ndc.z * 2.0 - 1.0\n        const hit = 1 - ndc.z > 0.0000001 // it is missed if ndc.z is close to 1\n        return hit ? ndc.unproject(camera) : false\n      },\n      [ndc, depthPickingPass, camera]\n    )\n\n    const update = useCallback(\n      async (delta: number, updateTarget = true) => {\n        // Update hitpoint\n        if (target) {\n          hitpoint.set(...(target as [number, number, number]))\n        } else {\n          const { x, y } = followMouse ? pointer : { x: 0, y: 0 }\n          const hit = await getHit(x, y)\n          if (hit) hitpoint.copy(hit)\n        }\n\n        // Update target\n        if (updateTarget && dofRef.current?.target) {\n          if (smoothTime > 0 && delta > 0) {\n            easing.damp3(dofRef.current.target, hitpoint, smoothTime, delta)\n          } else {\n            dofRef.current.target.copy(hitpoint)\n          }\n        }\n      },\n      [target, hitpoint, followMouse, getHit, smoothTime, pointer]\n    )\n\n    useFrame(async (_, delta) => {\n      if (!manual) {\n        update(delta)\n      }\n      if (hitpointRef.current) {\n        hitpointRef.current.position.copy(hitpoint)\n      }\n      if (targetRef.current && dofRef.current?.target) {\n        targetRef.current.position.copy(dofRef.current.target)\n      }\n    })\n\n    // Ref API\n    const api = useMemo<AutofocusApi>(\n      () => ({\n        dofRef,\n        hitpoint,\n        update,\n      }),\n      [hitpoint, update]\n    )\n    useImperativeHandle(fref, () => api, [api])\n\n    return (\n      <>\n        {debug\n          ? createPortal(\n              <>\n                <mesh ref={hitpointRef}>\n                  <sphereGeometry args={[debug, 16, 16]} />\n                  <meshBasicMaterial color=\"#00ff00\" opacity={1} transparent depthWrite={false} />\n                </mesh>\n                <mesh ref={targetRef}>\n                  <sphereGeometry args={[debug / 2, 16, 16]} />\n                  <meshBasicMaterial color=\"#00ff00\" opacity={0.5} transparent depthWrite={false} />\n                </mesh>\n              </>,\n              scene\n            )\n          : null}\n\n        <DepthOfField ref={dofRef} {...props} target={hitpoint} />\n      </>\n    )\n  }\n)\n"],"names":["scene","pointer"],"mappings":"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"}

package/dist/effects/Grid.cjs

@@ -11,7 +11,7 @@ const Grid = React.forwardRef(function Grid2({ size, ...props }, ref) {
     if (size)
       effect.setSize(size.width, size.height);
     invalidate();
-  }, [effect, size]);
+  }, [effect, size, invalidate]);
   return /* @__PURE__ */ jsxRuntime.jsx("primitive", { ref, object: effect, dispose: null });
 });
 exports.Grid = Grid;

package/dist/effects/Grid.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.cjs","sources":["../../src/effects/Grid.tsx"],"sourcesContent":["import React, { Ref, forwardRef, useMemo, useLayoutEffect } from 'react'\nimport { GridEffect } from 'postprocessing'\nimport { useThree } from '@react-three/fiber'\n\ntype GridProps = ConstructorParameters<typeof GridEffect>[0] &\n  Partial<{\n    size: {\n      width: number\n      height: number\n    }\n  }>\n\nexport const Grid = forwardRef(function Grid({ size, ...props }: GridProps, ref: Ref<GridEffect>) {\n  const invalidate = useThree((state) => state.invalidate)\n  const effect = useMemo(() => new GridEffect(props), [props])\n  useLayoutEffect(() => {\n    if (size) effect.setSize(size.width, size.height)\n    invalidate()\n  }, [effect, size])\n  return <primitive ref={ref} object={effect} dispose={null} />\n})\n"],"names":["forwardRef","Grid","useThree","useMemo","GridEffect","useLayoutEffect"],"mappings":";;;;;;AAYa,MAAA,OAAOA,iBAAW,SAASC,MAAK,EAAE,MAAM,GAAG,MAAM,GAAc,KAAsB;AAChG,QAAM,aAAaC,MAAAA,SAAS,CAAC,UAAU,MAAM,UAAU;AACjD,QAAA,SAASC,cAAQ,MAAM,IAAIC,eAAAA,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC;AAC3DC,QAAAA,gBAAgB,MAAM;AAChB,QAAA;AAAM,aAAO,QAAQ,KAAK,OAAO,KAAK,MAAM;AACrC;EAAA,GACV,CAAC,QAAQ,IAAI,CAAC;AACjB,wCAAQ,aAAU,EAAA,KAAU,QAAQ,QAAQ,SAAS,KAAM,CAAA;AAC7D,CAAC;;"}
+{"version":3,"file":"Grid.cjs","sources":["../../src/effects/Grid.tsx"],"sourcesContent":["import React, { Ref, forwardRef, useMemo, useLayoutEffect } from 'react'\nimport { GridEffect } from 'postprocessing'\nimport { useThree } from '@react-three/fiber'\n\ntype GridProps = ConstructorParameters<typeof GridEffect>[0] &\n  Partial<{\n    size: {\n      width: number\n      height: number\n    }\n  }>\n\nexport const Grid = forwardRef(function Grid({ size, ...props }: GridProps, ref: Ref<GridEffect>) {\n  const invalidate = useThree((state) => state.invalidate)\n  const effect = useMemo(() => new GridEffect(props), [props])\n  useLayoutEffect(() => {\n    if (size) effect.setSize(size.width, size.height)\n    invalidate()\n  }, [effect, size, invalidate])\n  return <primitive ref={ref} object={effect} dispose={null} />\n})\n"],"names":["forwardRef","Grid","useThree","useMemo","GridEffect","useLayoutEffect"],"mappings":";;;;;;AAYa,MAAA,OAAOA,iBAAW,SAASC,MAAK,EAAE,MAAM,GAAG,MAAM,GAAc,KAAsB;AAChG,QAAM,aAAaC,MAAAA,SAAS,CAAC,UAAU,MAAM,UAAU;AACjD,QAAA,SAASC,cAAQ,MAAM,IAAIC,eAAAA,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC;AAC3DC,QAAAA,gBAAgB,MAAM;AAChB,QAAA;AAAM,aAAO,QAAQ,KAAK,OAAO,KAAK,MAAM;AACrC;EACV,GAAA,CAAC,QAAQ,MAAM,UAAU,CAAC;AAC7B,wCAAQ,aAAU,EAAA,KAAU,QAAQ,QAAQ,SAAS,KAAM,CAAA;AAC7D,CAAC;;"}

package/dist/effects/Grid.js

@@ -9,7 +9,7 @@ const Grid = forwardRef(function Grid2({ size, ...props }, ref) {
     if (size)
       effect.setSize(size.width, size.height);
     invalidate();
-  }, [effect, size]);
+  }, [effect, size, invalidate]);
   return /* @__PURE__ */ jsx("primitive", { ref, object: effect, dispose: null });
 });
 export {

package/dist/effects/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../src/effects/Grid.tsx"],"sourcesContent":["import React, { Ref, forwardRef, useMemo, useLayoutEffect } from 'react'\nimport { GridEffect } from 'postprocessing'\nimport { useThree } from '@react-three/fiber'\n\ntype GridProps = ConstructorParameters<typeof GridEffect>[0] &\n  Partial<{\n    size: {\n      width: number\n      height: number\n    }\n  }>\n\nexport const Grid = forwardRef(function Grid({ size, ...props }: GridProps, ref: Ref<GridEffect>) {\n  const invalidate = useThree((state) => state.invalidate)\n  const effect = useMemo(() => new GridEffect(props), [props])\n  useLayoutEffect(() => {\n    if (size) effect.setSize(size.width, size.height)\n    invalidate()\n  }, [effect, size])\n  return <primitive ref={ref} object={effect} dispose={null} />\n})\n"],"names":["Grid"],"mappings":";;;;AAYa,MAAA,OAAO,WAAW,SAASA,MAAK,EAAE,MAAM,GAAG,MAAM,GAAc,KAAsB;AAChG,QAAM,aAAa,SAAS,CAAC,UAAU,MAAM,UAAU;AACjD,QAAA,SAAS,QAAQ,MAAM,IAAI,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC;AAC3D,kBAAgB,MAAM;AAChB,QAAA;AAAM,aAAO,QAAQ,KAAK,OAAO,KAAK,MAAM;AACrC;EAAA,GACV,CAAC,QAAQ,IAAI,CAAC;AACjB,6BAAQ,aAAU,EAAA,KAAU,QAAQ,QAAQ,SAAS,KAAM,CAAA;AAC7D,CAAC;"}
+{"version":3,"file":"Grid.js","sources":["../../src/effects/Grid.tsx"],"sourcesContent":["import React, { Ref, forwardRef, useMemo, useLayoutEffect } from 'react'\nimport { GridEffect } from 'postprocessing'\nimport { useThree } from '@react-three/fiber'\n\ntype GridProps = ConstructorParameters<typeof GridEffect>[0] &\n  Partial<{\n    size: {\n      width: number\n      height: number\n    }\n  }>\n\nexport const Grid = forwardRef(function Grid({ size, ...props }: GridProps, ref: Ref<GridEffect>) {\n  const invalidate = useThree((state) => state.invalidate)\n  const effect = useMemo(() => new GridEffect(props), [props])\n  useLayoutEffect(() => {\n    if (size) effect.setSize(size.width, size.height)\n    invalidate()\n  }, [effect, size, invalidate])\n  return <primitive ref={ref} object={effect} dispose={null} />\n})\n"],"names":["Grid"],"mappings":";;;;AAYa,MAAA,OAAO,WAAW,SAASA,MAAK,EAAE,MAAM,GAAG,MAAM,GAAc,KAAsB;AAChG,QAAM,aAAa,SAAS,CAAC,UAAU,MAAM,UAAU;AACjD,QAAA,SAAS,QAAQ,MAAM,IAAI,WAAW,KAAK,GAAG,CAAC,KAAK,CAAC;AAC3D,kBAAgB,MAAM;AAChB,QAAA;AAAM,aAAO,QAAQ,KAAK,OAAO,KAAK,MAAM;AACrC;EACV,GAAA,CAAC,QAAQ,MAAM,UAAU,CAAC;AAC7B,6BAAQ,aAAU,EAAA,KAAU,QAAQ,QAAQ,SAAS,KAAM,CAAA;AAC7D,CAAC;"}

package/dist/effects/N8AO/index.cjs

@@ -20,7 +20,7 @@ const N8AO = React.forwardRef(
     renderMode = 0
   }, ref) => {
     const { camera, scene } = fiber.useThree();
-    const effect = React.useMemo(() => new N8AOPostPass.N8AOPostPass(scene, camera), []);
+    const effect = React.useMemo(() => new N8AOPostPass.N8AOPostPass(scene, camera), [camera, scene]);
     React.useLayoutEffect(() => {
       fiber.applyProps(effect.configuration, {
         color,
@@ -46,12 +46,13 @@ const N8AO = React.forwardRef(
       denoiseRadius,
       renderMode,
       halfRes,
-      depthAwareUpsampling
+      depthAwareUpsampling,
+      effect
     ]);
     React.useLayoutEffect(() => {
       if (quality)
         effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1));
-    }, [quality]);
+    }, [effect, quality]);
     return /* @__PURE__ */ jsxRuntime.jsx("primitive", { ref, object: effect });
   }
 );

package/dist/effects/N8AO/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/effects/N8AO/index.tsx"],"sourcesContent":["// From https://github.com/N8python/n8ao\n// https://twitter.com/N8Programs/status/1660996748485984261\n\nimport { Ref, forwardRef, useLayoutEffect, useMemo } from 'react'\n/* @ts-ignore */\nimport { N8AOPostPass } from './N8AOPostPass'\nimport { useThree, ReactThreeFiber, applyProps } from '@react-three/fiber'\n\ntype N8AOProps = {\n  aoRadius?: number\n  distanceFalloff?: number\n  intensity?: number\n  quality?: 'performance' | 'low' | 'medium' | 'high' | 'ultra'\n  aoSamples?: number\n  denoiseSamples?: number\n  denoiseRadius?: number\n  color?: ReactThreeFiber.Color\n  halfRes?: boolean\n  depthAwareUpsampling?: boolean\n  screenSpaceRadius?: boolean\n  renderMode?: 0 | 1 | 2 | 3 | 4\n}\n\nexport const N8AO = forwardRef<N8AOPostPass, N8AOProps>(\n  (\n    {\n      halfRes,\n      screenSpaceRadius,\n      quality,\n      depthAwareUpsampling = true,\n      aoRadius = 5,\n      aoSamples = 16,\n      denoiseSamples = 4,\n      denoiseRadius = 12,\n      distanceFalloff = 1,\n      intensity = 1,\n      color,\n      renderMode = 0,\n    },\n    ref: Ref<N8AOPostPass>\n  ) => {\n    const { camera, scene } = useThree()\n    const effect = useMemo(() => new N8AOPostPass(scene, camera), [])\n    useLayoutEffect(() => {\n      applyProps(effect.configuration, {\n        color,\n        aoRadius,\n        distanceFalloff,\n        intensity,\n        aoSamples,\n        denoiseSamples,\n        denoiseRadius,\n        screenSpaceRadius,\n        renderMode,\n        halfRes,\n        depthAwareUpsampling,\n      })\n    }, [\n      screenSpaceRadius,\n      color,\n      aoRadius,\n      distanceFalloff,\n      intensity,\n      aoSamples,\n      denoiseSamples,\n      denoiseRadius,\n      renderMode,\n      halfRes,\n      depthAwareUpsampling,\n    ])\n    useLayoutEffect(() => {\n      if (quality) effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1))\n    }, [quality])\n    return <primitive ref={ref} object={effect} />\n  }\n)\n"],"names":["forwardRef","useThree","useMemo","N8AOPostPass","useLayoutEffect","applyProps","jsx"],"mappings":";;;;;;AAuBO,MAAM,OAAOA,MAAA;AAAA,EAClB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB;AAAA,IACvB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ;AAAA,IACA,aAAa;AAAA,KAEf,QACG;AACH,UAAM,EAAE,QAAQ,MAAM,IAAIC,MAAS,SAAA;AAC7B,UAAA,SAASC,cAAQ,MAAM,IAAIC,aAAAA,aAAa,OAAO,MAAM,GAAG,CAAA,CAAE;AAChEC,UAAAA,gBAAgB,MAAM;AACpBC,YAAA,WAAW,OAAO,eAAe;AAAA,QAC/B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,GACA;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AACDD,UAAAA,gBAAgB,MAAM;AAChB,UAAA;AAAgB,eAAA,eAAe,QAAQ,OAAO,CAAC,EAAE,gBAAgB,QAAQ,MAAM,CAAC,CAAC;AAAA,IAAA,GACpF,CAAC,OAAO,CAAC;AACZ,WAAQE,2BAAAA,IAAA,aAAA,EAAU,KAAU,QAAQ,OAAQ,CAAA;AAAA,EAC9C;AACF;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/effects/N8AO/index.tsx"],"sourcesContent":["// From https://github.com/N8python/n8ao\n// https://twitter.com/N8Programs/status/1660996748485984261\n\nimport { Ref, forwardRef, useLayoutEffect, useMemo } from 'react'\n/* @ts-ignore */\nimport { N8AOPostPass } from './N8AOPostPass'\nimport { useThree, ReactThreeFiber, applyProps } from '@react-three/fiber'\n\ntype N8AOProps = {\n  aoRadius?: number\n  distanceFalloff?: number\n  intensity?: number\n  quality?: 'performance' | 'low' | 'medium' | 'high' | 'ultra'\n  aoSamples?: number\n  denoiseSamples?: number\n  denoiseRadius?: number\n  color?: ReactThreeFiber.Color\n  halfRes?: boolean\n  depthAwareUpsampling?: boolean\n  screenSpaceRadius?: boolean\n  renderMode?: 0 | 1 | 2 | 3 | 4\n}\n\nexport const N8AO = forwardRef<N8AOPostPass, N8AOProps>(\n  (\n    {\n      halfRes,\n      screenSpaceRadius,\n      quality,\n      depthAwareUpsampling = true,\n      aoRadius = 5,\n      aoSamples = 16,\n      denoiseSamples = 4,\n      denoiseRadius = 12,\n      distanceFalloff = 1,\n      intensity = 1,\n      color,\n      renderMode = 0,\n    },\n    ref: Ref<N8AOPostPass>\n  ) => {\n    const { camera, scene } = useThree()\n    const effect = useMemo(() => new N8AOPostPass(scene, camera), [camera, scene])\n\n    // TODO: implement dispose upstream; this effect has memory leaks without\n    useLayoutEffect(() => {\n      applyProps(effect.configuration, {\n        color,\n        aoRadius,\n        distanceFalloff,\n        intensity,\n        aoSamples,\n        denoiseSamples,\n        denoiseRadius,\n        screenSpaceRadius,\n        renderMode,\n        halfRes,\n        depthAwareUpsampling,\n      })\n    }, [\n      screenSpaceRadius,\n      color,\n      aoRadius,\n      distanceFalloff,\n      intensity,\n      aoSamples,\n      denoiseSamples,\n      denoiseRadius,\n      renderMode,\n      halfRes,\n      depthAwareUpsampling,\n      effect,\n    ])\n\n    useLayoutEffect(() => {\n      if (quality) effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1))\n    }, [effect, quality])\n\n    return <primitive ref={ref} object={effect} />\n  }\n)\n"],"names":["forwardRef","useThree","useMemo","N8AOPostPass","useLayoutEffect","applyProps","jsx"],"mappings":";;;;;;AAuBO,MAAM,OAAOA,MAAA;AAAA,EAClB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB;AAAA,IACvB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ;AAAA,IACA,aAAa;AAAA,KAEf,QACG;AACH,UAAM,EAAE,QAAQ,MAAM,IAAIC,MAAS,SAAA;AAC7B,UAAA,SAASC,MAAAA,QAAQ,MAAM,IAAIC,0BAAa,OAAO,MAAM,GAAG,CAAC,QAAQ,KAAK,CAAC;AAG7EC,UAAAA,gBAAgB,MAAM;AACpBC,YAAA,WAAW,OAAO,eAAe;AAAA,QAC/B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,GACA;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAEDD,UAAAA,gBAAgB,MAAM;AAChB,UAAA;AAAgB,eAAA,eAAe,QAAQ,OAAO,CAAC,EAAE,gBAAgB,QAAQ,MAAM,CAAC,CAAC;AAAA,IAAA,GACpF,CAAC,QAAQ,OAAO,CAAC;AAEpB,WAAQE,2BAAAA,IAAA,aAAA,EAAU,KAAU,QAAQ,OAAQ,CAAA;AAAA,EAC9C;AACF;;"}

package/dist/effects/N8AO/index.js

@@ -18,7 +18,7 @@ const N8AO = forwardRef(
     renderMode = 0
   }, ref) => {
     const { camera, scene } = useThree();
-    const effect = useMemo(() => new N8AOPostPass(scene, camera), []);
+    const effect = useMemo(() => new N8AOPostPass(scene, camera), [camera, scene]);
     useLayoutEffect(() => {
       applyProps(effect.configuration, {
         color,
@@ -44,12 +44,13 @@ const N8AO = forwardRef(
       denoiseRadius,
       renderMode,
       halfRes,
-      depthAwareUpsampling
+      depthAwareUpsampling,
+      effect
     ]);
     useLayoutEffect(() => {
       if (quality)
         effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1));
-    }, [quality]);
+    }, [effect, quality]);
     return /* @__PURE__ */ jsx("primitive", { ref, object: effect });
   }
 );

package/dist/effects/N8AO/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/effects/N8AO/index.tsx"],"sourcesContent":["// From https://github.com/N8python/n8ao\n// https://twitter.com/N8Programs/status/1660996748485984261\n\nimport { Ref, forwardRef, useLayoutEffect, useMemo } from 'react'\n/* @ts-ignore */\nimport { N8AOPostPass } from './N8AOPostPass'\nimport { useThree, ReactThreeFiber, applyProps } from '@react-three/fiber'\n\ntype N8AOProps = {\n  aoRadius?: number\n  distanceFalloff?: number\n  intensity?: number\n  quality?: 'performance' | 'low' | 'medium' | 'high' | 'ultra'\n  aoSamples?: number\n  denoiseSamples?: number\n  denoiseRadius?: number\n  color?: ReactThreeFiber.Color\n  halfRes?: boolean\n  depthAwareUpsampling?: boolean\n  screenSpaceRadius?: boolean\n  renderMode?: 0 | 1 | 2 | 3 | 4\n}\n\nexport const N8AO = forwardRef<N8AOPostPass, N8AOProps>(\n  (\n    {\n      halfRes,\n      screenSpaceRadius,\n      quality,\n      depthAwareUpsampling = true,\n      aoRadius = 5,\n      aoSamples = 16,\n      denoiseSamples = 4,\n      denoiseRadius = 12,\n      distanceFalloff = 1,\n      intensity = 1,\n      color,\n      renderMode = 0,\n    },\n    ref: Ref<N8AOPostPass>\n  ) => {\n    const { camera, scene } = useThree()\n    const effect = useMemo(() => new N8AOPostPass(scene, camera), [])\n    useLayoutEffect(() => {\n      applyProps(effect.configuration, {\n        color,\n        aoRadius,\n        distanceFalloff,\n        intensity,\n        aoSamples,\n        denoiseSamples,\n        denoiseRadius,\n        screenSpaceRadius,\n        renderMode,\n        halfRes,\n        depthAwareUpsampling,\n      })\n    }, [\n      screenSpaceRadius,\n      color,\n      aoRadius,\n      distanceFalloff,\n      intensity,\n      aoSamples,\n      denoiseSamples,\n      denoiseRadius,\n      renderMode,\n      halfRes,\n      depthAwareUpsampling,\n    ])\n    useLayoutEffect(() => {\n      if (quality) effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1))\n    }, [quality])\n    return <primitive ref={ref} object={effect} />\n  }\n)\n"],"names":[],"mappings":";;;;AAuBO,MAAM,OAAO;AAAA,EAClB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB;AAAA,IACvB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ;AAAA,IACA,aAAa;AAAA,KAEf,QACG;AACH,UAAM,EAAE,QAAQ,MAAM,IAAI,SAAS;AAC7B,UAAA,SAAS,QAAQ,MAAM,IAAI,aAAa,OAAO,MAAM,GAAG,CAAA,CAAE;AAChE,oBAAgB,MAAM;AACpB,iBAAW,OAAO,eAAe;AAAA,QAC/B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,GACA;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AACD,oBAAgB,MAAM;AAChB,UAAA;AAAgB,eAAA,eAAe,QAAQ,OAAO,CAAC,EAAE,gBAAgB,QAAQ,MAAM,CAAC,CAAC;AAAA,IAAA,GACpF,CAAC,OAAO,CAAC;AACZ,WAAQ,oBAAA,aAAA,EAAU,KAAU,QAAQ,OAAQ,CAAA;AAAA,EAC9C;AACF;"}
+{"version":3,"file":"index.js","sources":["../../../src/effects/N8AO/index.tsx"],"sourcesContent":["// From https://github.com/N8python/n8ao\n// https://twitter.com/N8Programs/status/1660996748485984261\n\nimport { Ref, forwardRef, useLayoutEffect, useMemo } from 'react'\n/* @ts-ignore */\nimport { N8AOPostPass } from './N8AOPostPass'\nimport { useThree, ReactThreeFiber, applyProps } from '@react-three/fiber'\n\ntype N8AOProps = {\n  aoRadius?: number\n  distanceFalloff?: number\n  intensity?: number\n  quality?: 'performance' | 'low' | 'medium' | 'high' | 'ultra'\n  aoSamples?: number\n  denoiseSamples?: number\n  denoiseRadius?: number\n  color?: ReactThreeFiber.Color\n  halfRes?: boolean\n  depthAwareUpsampling?: boolean\n  screenSpaceRadius?: boolean\n  renderMode?: 0 | 1 | 2 | 3 | 4\n}\n\nexport const N8AO = forwardRef<N8AOPostPass, N8AOProps>(\n  (\n    {\n      halfRes,\n      screenSpaceRadius,\n      quality,\n      depthAwareUpsampling = true,\n      aoRadius = 5,\n      aoSamples = 16,\n      denoiseSamples = 4,\n      denoiseRadius = 12,\n      distanceFalloff = 1,\n      intensity = 1,\n      color,\n      renderMode = 0,\n    },\n    ref: Ref<N8AOPostPass>\n  ) => {\n    const { camera, scene } = useThree()\n    const effect = useMemo(() => new N8AOPostPass(scene, camera), [camera, scene])\n\n    // TODO: implement dispose upstream; this effect has memory leaks without\n    useLayoutEffect(() => {\n      applyProps(effect.configuration, {\n        color,\n        aoRadius,\n        distanceFalloff,\n        intensity,\n        aoSamples,\n        denoiseSamples,\n        denoiseRadius,\n        screenSpaceRadius,\n        renderMode,\n        halfRes,\n        depthAwareUpsampling,\n      })\n    }, [\n      screenSpaceRadius,\n      color,\n      aoRadius,\n      distanceFalloff,\n      intensity,\n      aoSamples,\n      denoiseSamples,\n      denoiseRadius,\n      renderMode,\n      halfRes,\n      depthAwareUpsampling,\n      effect,\n    ])\n\n    useLayoutEffect(() => {\n      if (quality) effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1))\n    }, [effect, quality])\n\n    return <primitive ref={ref} object={effect} />\n  }\n)\n"],"names":[],"mappings":";;;;AAuBO,MAAM,OAAO;AAAA,EAClB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,uBAAuB;AAAA,IACvB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ;AAAA,IACA,aAAa;AAAA,KAEf,QACG;AACH,UAAM,EAAE,QAAQ,MAAM,IAAI,SAAS;AAC7B,UAAA,SAAS,QAAQ,MAAM,IAAI,aAAa,OAAO,MAAM,GAAG,CAAC,QAAQ,KAAK,CAAC;AAG7E,oBAAgB,MAAM;AACpB,iBAAW,OAAO,eAAe;AAAA,QAC/B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA,GACA;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAED,oBAAgB,MAAM;AAChB,UAAA;AAAgB,eAAA,eAAe,QAAQ,OAAO,CAAC,EAAE,gBAAgB,QAAQ,MAAM,CAAC,CAAC;AAAA,IAAA,GACpF,CAAC,QAAQ,OAAO,CAAC;AAEpB,WAAQ,oBAAA,aAAA,EAAU,KAAU,QAAQ,OAAQ,CAAA;AAAA,EAC9C;AACF;"}

package/dist/effects/Outline.cjs

@@ -40,6 +40,8 @@ const Outline = React.forwardRef(function Outline2({
       xRay,
       ...props
     }),
+    // NOTE: `props` is an unstable reference, so we can't memoize it
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       blendFunction,
       blur,

package/dist/effects/Outline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Outline.cjs","sources":["../../src/effects/Outline.tsx"],"sourcesContent":["import { OutlineEffect } from 'postprocessing'\nimport { Ref, MutableRefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'\nimport { Object3D } from 'three'\nimport { useThree } from '@react-three/fiber'\nimport { EffectComposerContext } from '../EffectComposer'\nimport { selectionContext } from '../Selection'\nimport { resolveRef } from '../util'\n\ntype ObjectRef = MutableRefObject<Object3D>\n\nexport type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &\n  Partial<{\n    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]\n    selectionLayer: number\n  }>\n\nexport const Outline = forwardRef(function Outline(\n  {\n    selection = [],\n    selectionLayer = 10,\n    blendFunction,\n    patternTexture,\n    edgeStrength,\n    pulseSpeed,\n    visibleEdgeColor,\n    hiddenEdgeColor,\n    width,\n    height,\n    kernelSize,\n    blur,\n    xRay,\n    ...props\n  }: OutlineProps,\n  forwardRef: Ref<OutlineEffect>\n) {\n  const invalidate = useThree((state) => state.invalidate)\n  const { scene, camera } = useContext(EffectComposerContext)\n\n  const effect = useMemo(\n    () =>\n      new OutlineEffect(scene, camera, {\n        blendFunction,\n        patternTexture,\n        edgeStrength,\n        pulseSpeed,\n        visibleEdgeColor,\n        hiddenEdgeColor,\n        width,\n        height,\n        kernelSize,\n        blur,\n        xRay,\n        ...props,\n      }),\n    [\n      blendFunction,\n      blur,\n      camera,\n      edgeStrength,\n      height,\n      hiddenEdgeColor,\n      kernelSize,\n      patternTexture,\n      pulseSpeed,\n      scene,\n      visibleEdgeColor,\n      width,\n      xRay,\n    ]\n  )\n\n  const api = useContext(selectionContext)\n\n  useEffect(() => {\n    // Do not allow array selection if declarative selection is active\n    // TODO: array selection should probably be deprecated altogether\n    if (!api && selection) {\n      effect.selection.set(\n        Array.isArray(selection) ? (selection as Object3D[]).map(resolveRef) : [resolveRef(selection) as Object3D]\n      )\n      invalidate()\n      return () => {\n        effect.selection.clear()\n        invalidate()\n      }\n    }\n  }, [effect, selection, api, invalidate])\n\n  useEffect(() => {\n    effect.selectionLayer = selectionLayer\n    invalidate()\n  }, [effect, invalidate, selectionLayer])\n\n  const ref = useRef<OutlineEffect>()\n  useEffect(() => {\n    if (api && api.enabled) {\n      if (api.selected?.length) {\n        effect.selection.set(api.selected)\n        invalidate()\n        return () => {\n          effect.selection.clear()\n          invalidate()\n        }\n      }\n    }\n  }, [api, effect.selection, invalidate])\n\n  useEffect(() => {\n    return () => {\n      effect.dispose()\n    }\n  }, [effect])\n\n  return <primitive ref={forwardRef} object={effect} />\n})\n"],"names":["forwardRef","Outline","useThree","useContext","EffectComposerContext","useMemo","OutlineEffect","selectionContext","useEffect","resolveRef","useRef","jsx"],"mappings":";;;;;;;;;AAgBa,MAAA,UAAUA,MAAAA,WAAW,SAASC,SACzC;AAAA,EACE,YAAY,CAAC;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACAD,aACA;AACA,QAAM,aAAaE,MAAAA,SAAS,CAAC,UAAU,MAAM,UAAU;AACvD,QAAM,EAAE,OAAO,OAAO,IAAIC,iBAAWC,eAAqB,qBAAA;AAE1D,QAAM,SAASC,MAAA;AAAA,IACb,MACE,IAAIC,eAAAA,cAAc,OAAO,QAAQ;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,MAAMH,iBAAWI,UAAAA,gBAAgB;AAEvCC,QAAAA,UAAU,MAAM;AAGV,QAAA,CAAC,OAAO,WAAW;AACrB,aAAO,UAAU;AAAA,QACf,MAAM,QAAQ,SAAS,IAAK,UAAyB,IAAIC,KAAAA,UAAU,IAAI,CAACA,gBAAW,SAAS,CAAa;AAAA,MAAA;AAEhG;AACX,aAAO,MAAM;AACX,eAAO,UAAU;AACN;MAAA;AAAA,IAEf;AAAA,KACC,CAAC,QAAQ,WAAW,KAAK,UAAU,CAAC;AAEvCD,QAAAA,UAAU,MAAM;AACd,WAAO,iBAAiB;AACb;EACV,GAAA,CAAC,QAAQ,YAAY,cAAc,CAAC;AAE3BE,eAAsB;AAClCF,QAAAA,UAAU,MAAM;;AACV,QAAA,OAAO,IAAI,SAAS;AAClB,WAAA,SAAI,aAAJ,mBAAc,QAAQ;AACjB,eAAA,UAAU,IAAI,IAAI,QAAQ;AACtB;AACX,eAAO,MAAM;AACX,iBAAO,UAAU;AACN;QAAA;AAAA,MAEf;AAAA,IACF;AAAA,KACC,CAAC,KAAK,OAAO,WAAW,UAAU,CAAC;AAEtCA,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACX,aAAO,QAAQ;AAAA,IAAA;AAAA,EACjB,GACC,CAAC,MAAM,CAAC;AAEX,SAAQG,2BAAAA,IAAA,aAAA,EAAU,KAAKX,aAAY,QAAQ,OAAQ,CAAA;AACrD,CAAC;;"}
+{"version":3,"file":"Outline.cjs","sources":["../../src/effects/Outline.tsx"],"sourcesContent":["import { OutlineEffect } from 'postprocessing'\nimport { Ref, MutableRefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'\nimport { Object3D } from 'three'\nimport { useThree } from '@react-three/fiber'\nimport { EffectComposerContext } from '../EffectComposer'\nimport { selectionContext } from '../Selection'\nimport { resolveRef } from '../util'\n\ntype ObjectRef = MutableRefObject<Object3D>\n\nexport type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &\n  Partial<{\n    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]\n    selectionLayer: number\n  }>\n\nexport const Outline = forwardRef(function Outline(\n  {\n    selection = [],\n    selectionLayer = 10,\n    blendFunction,\n    patternTexture,\n    edgeStrength,\n    pulseSpeed,\n    visibleEdgeColor,\n    hiddenEdgeColor,\n    width,\n    height,\n    kernelSize,\n    blur,\n    xRay,\n    ...props\n  }: OutlineProps,\n  forwardRef: Ref<OutlineEffect>\n) {\n  const invalidate = useThree((state) => state.invalidate)\n  const { scene, camera } = useContext(EffectComposerContext)\n\n  const effect = useMemo(\n    () =>\n      new OutlineEffect(scene, camera, {\n        blendFunction,\n        patternTexture,\n        edgeStrength,\n        pulseSpeed,\n        visibleEdgeColor,\n        hiddenEdgeColor,\n        width,\n        height,\n        kernelSize,\n        blur,\n        xRay,\n        ...props,\n      }),\n    // NOTE: `props` is an unstable reference, so we can't memoize it\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      blendFunction,\n      blur,\n      camera,\n      edgeStrength,\n      height,\n      hiddenEdgeColor,\n      kernelSize,\n      patternTexture,\n      pulseSpeed,\n      scene,\n      visibleEdgeColor,\n      width,\n      xRay,\n    ]\n  )\n\n  const api = useContext(selectionContext)\n\n  useEffect(() => {\n    // Do not allow array selection if declarative selection is active\n    // TODO: array selection should probably be deprecated altogether\n    if (!api && selection) {\n      effect.selection.set(\n        Array.isArray(selection) ? (selection as Object3D[]).map(resolveRef) : [resolveRef(selection) as Object3D]\n      )\n      invalidate()\n      return () => {\n        effect.selection.clear()\n        invalidate()\n      }\n    }\n  }, [effect, selection, api, invalidate])\n\n  useEffect(() => {\n    effect.selectionLayer = selectionLayer\n    invalidate()\n  }, [effect, invalidate, selectionLayer])\n\n  const ref = useRef<OutlineEffect>()\n  useEffect(() => {\n    if (api && api.enabled) {\n      if (api.selected?.length) {\n        effect.selection.set(api.selected)\n        invalidate()\n        return () => {\n          effect.selection.clear()\n          invalidate()\n        }\n      }\n    }\n  }, [api, effect.selection, invalidate])\n\n  useEffect(() => {\n    return () => {\n      effect.dispose()\n    }\n  }, [effect])\n\n  return <primitive ref={forwardRef} object={effect} />\n})\n"],"names":["forwardRef","Outline","useThree","useContext","EffectComposerContext","useMemo","OutlineEffect","selectionContext","useEffect","resolveRef","useRef","jsx"],"mappings":";;;;;;;;;AAgBa,MAAA,UAAUA,MAAAA,WAAW,SAASC,SACzC;AAAA,EACE,YAAY,CAAC;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACAD,aACA;AACA,QAAM,aAAaE,MAAAA,SAAS,CAAC,UAAU,MAAM,UAAU;AACvD,QAAM,EAAE,OAAO,OAAO,IAAIC,iBAAWC,eAAqB,qBAAA;AAE1D,QAAM,SAASC,MAAA;AAAA,IACb,MACE,IAAIC,eAAAA,cAAc,OAAO,QAAQ;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAAA;AAAA;AAAA,IAGH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,MAAMH,iBAAWI,UAAAA,gBAAgB;AAEvCC,QAAAA,UAAU,MAAM;AAGV,QAAA,CAAC,OAAO,WAAW;AACrB,aAAO,UAAU;AAAA,QACf,MAAM,QAAQ,SAAS,IAAK,UAAyB,IAAIC,KAAAA,UAAU,IAAI,CAACA,gBAAW,SAAS,CAAa;AAAA,MAAA;AAEhG;AACX,aAAO,MAAM;AACX,eAAO,UAAU;AACN;MAAA;AAAA,IAEf;AAAA,KACC,CAAC,QAAQ,WAAW,KAAK,UAAU,CAAC;AAEvCD,QAAAA,UAAU,MAAM;AACd,WAAO,iBAAiB;AACb;EACV,GAAA,CAAC,QAAQ,YAAY,cAAc,CAAC;AAE3BE,eAAsB;AAClCF,QAAAA,UAAU,MAAM;;AACV,QAAA,OAAO,IAAI,SAAS;AAClB,WAAA,SAAI,aAAJ,mBAAc,QAAQ;AACjB,eAAA,UAAU,IAAI,IAAI,QAAQ;AACtB;AACX,eAAO,MAAM;AACX,iBAAO,UAAU;AACN;QAAA;AAAA,MAEf;AAAA,IACF;AAAA,KACC,CAAC,KAAK,OAAO,WAAW,UAAU,CAAC;AAEtCA,QAAAA,UAAU,MAAM;AACd,WAAO,MAAM;AACX,aAAO,QAAQ;AAAA,IAAA;AAAA,EACjB,GACC,CAAC,MAAM,CAAC;AAEX,SAAQG,2BAAAA,IAAA,aAAA,EAAU,KAAKX,aAAY,QAAQ,OAAQ,CAAA;AACrD,CAAC;;"}

package/dist/effects/Outline.js

@@ -38,6 +38,8 @@ const Outline = forwardRef(function Outline2({
       xRay,
       ...props
     }),
+    // NOTE: `props` is an unstable reference, so we can't memoize it
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       blendFunction,
       blur,

package/dist/effects/Outline.js.map

@@ -1 +1 @@
-{"version":3,"file":"Outline.js","sources":["../../src/effects/Outline.tsx"],"sourcesContent":["import { OutlineEffect } from 'postprocessing'\nimport { Ref, MutableRefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'\nimport { Object3D } from 'three'\nimport { useThree } from '@react-three/fiber'\nimport { EffectComposerContext } from '../EffectComposer'\nimport { selectionContext } from '../Selection'\nimport { resolveRef } from '../util'\n\ntype ObjectRef = MutableRefObject<Object3D>\n\nexport type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &\n  Partial<{\n    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]\n    selectionLayer: number\n  }>\n\nexport const Outline = forwardRef(function Outline(\n  {\n    selection = [],\n    selectionLayer = 10,\n    blendFunction,\n    patternTexture,\n    edgeStrength,\n    pulseSpeed,\n    visibleEdgeColor,\n    hiddenEdgeColor,\n    width,\n    height,\n    kernelSize,\n    blur,\n    xRay,\n    ...props\n  }: OutlineProps,\n  forwardRef: Ref<OutlineEffect>\n) {\n  const invalidate = useThree((state) => state.invalidate)\n  const { scene, camera } = useContext(EffectComposerContext)\n\n  const effect = useMemo(\n    () =>\n      new OutlineEffect(scene, camera, {\n        blendFunction,\n        patternTexture,\n        edgeStrength,\n        pulseSpeed,\n        visibleEdgeColor,\n        hiddenEdgeColor,\n        width,\n        height,\n        kernelSize,\n        blur,\n        xRay,\n        ...props,\n      }),\n    [\n      blendFunction,\n      blur,\n      camera,\n      edgeStrength,\n      height,\n      hiddenEdgeColor,\n      kernelSize,\n      patternTexture,\n      pulseSpeed,\n      scene,\n      visibleEdgeColor,\n      width,\n      xRay,\n    ]\n  )\n\n  const api = useContext(selectionContext)\n\n  useEffect(() => {\n    // Do not allow array selection if declarative selection is active\n    // TODO: array selection should probably be deprecated altogether\n    if (!api && selection) {\n      effect.selection.set(\n        Array.isArray(selection) ? (selection as Object3D[]).map(resolveRef) : [resolveRef(selection) as Object3D]\n      )\n      invalidate()\n      return () => {\n        effect.selection.clear()\n        invalidate()\n      }\n    }\n  }, [effect, selection, api, invalidate])\n\n  useEffect(() => {\n    effect.selectionLayer = selectionLayer\n    invalidate()\n  }, [effect, invalidate, selectionLayer])\n\n  const ref = useRef<OutlineEffect>()\n  useEffect(() => {\n    if (api && api.enabled) {\n      if (api.selected?.length) {\n        effect.selection.set(api.selected)\n        invalidate()\n        return () => {\n          effect.selection.clear()\n          invalidate()\n        }\n      }\n    }\n  }, [api, effect.selection, invalidate])\n\n  useEffect(() => {\n    return () => {\n      effect.dispose()\n    }\n  }, [effect])\n\n  return <primitive ref={forwardRef} object={effect} />\n})\n"],"names":["Outline","forwardRef"],"mappings":";;;;;;;AAgBa,MAAA,UAAU,WAAW,SAASA,SACzC;AAAA,EACE,YAAY,CAAC;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACAC,aACA;AACA,QAAM,aAAa,SAAS,CAAC,UAAU,MAAM,UAAU;AACvD,QAAM,EAAE,OAAO,OAAO,IAAI,WAAW,qBAAqB;AAE1D,QAAM,SAAS;AAAA,IACb,MACE,IAAI,cAAc,OAAO,QAAQ;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,MAAM,WAAW,gBAAgB;AAEvC,YAAU,MAAM;AAGV,QAAA,CAAC,OAAO,WAAW;AACrB,aAAO,UAAU;AAAA,QACf,MAAM,QAAQ,SAAS,IAAK,UAAyB,IAAI,UAAU,IAAI,CAAC,WAAW,SAAS,CAAa;AAAA,MAAA;AAEhG;AACX,aAAO,MAAM;AACX,eAAO,UAAU;AACN;MAAA;AAAA,IAEf;AAAA,KACC,CAAC,QAAQ,WAAW,KAAK,UAAU,CAAC;AAEvC,YAAU,MAAM;AACd,WAAO,iBAAiB;AACb;EACV,GAAA,CAAC,QAAQ,YAAY,cAAc,CAAC;AAE3B,SAAsB;AAClC,YAAU,MAAM;;AACV,QAAA,OAAO,IAAI,SAAS;AAClB,WAAA,SAAI,aAAJ,mBAAc,QAAQ;AACjB,eAAA,UAAU,IAAI,IAAI,QAAQ;AACtB;AACX,eAAO,MAAM;AACX,iBAAO,UAAU;AACN;QAAA;AAAA,MAEf;AAAA,IACF;AAAA,KACC,CAAC,KAAK,OAAO,WAAW,UAAU,CAAC;AAEtC,YAAU,MAAM;AACd,WAAO,MAAM;AACX,aAAO,QAAQ;AAAA,IAAA;AAAA,EACjB,GACC,CAAC,MAAM,CAAC;AAEX,SAAQ,oBAAA,aAAA,EAAU,KAAKA,aAAY,QAAQ,OAAQ,CAAA;AACrD,CAAC;"}
+{"version":3,"file":"Outline.js","sources":["../../src/effects/Outline.tsx"],"sourcesContent":["import { OutlineEffect } from 'postprocessing'\nimport { Ref, MutableRefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'\nimport { Object3D } from 'three'\nimport { useThree } from '@react-three/fiber'\nimport { EffectComposerContext } from '../EffectComposer'\nimport { selectionContext } from '../Selection'\nimport { resolveRef } from '../util'\n\ntype ObjectRef = MutableRefObject<Object3D>\n\nexport type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &\n  Partial<{\n    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]\n    selectionLayer: number\n  }>\n\nexport const Outline = forwardRef(function Outline(\n  {\n    selection = [],\n    selectionLayer = 10,\n    blendFunction,\n    patternTexture,\n    edgeStrength,\n    pulseSpeed,\n    visibleEdgeColor,\n    hiddenEdgeColor,\n    width,\n    height,\n    kernelSize,\n    blur,\n    xRay,\n    ...props\n  }: OutlineProps,\n  forwardRef: Ref<OutlineEffect>\n) {\n  const invalidate = useThree((state) => state.invalidate)\n  const { scene, camera } = useContext(EffectComposerContext)\n\n  const effect = useMemo(\n    () =>\n      new OutlineEffect(scene, camera, {\n        blendFunction,\n        patternTexture,\n        edgeStrength,\n        pulseSpeed,\n        visibleEdgeColor,\n        hiddenEdgeColor,\n        width,\n        height,\n        kernelSize,\n        blur,\n        xRay,\n        ...props,\n      }),\n    // NOTE: `props` is an unstable reference, so we can't memoize it\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      blendFunction,\n      blur,\n      camera,\n      edgeStrength,\n      height,\n      hiddenEdgeColor,\n      kernelSize,\n      patternTexture,\n      pulseSpeed,\n      scene,\n      visibleEdgeColor,\n      width,\n      xRay,\n    ]\n  )\n\n  const api = useContext(selectionContext)\n\n  useEffect(() => {\n    // Do not allow array selection if declarative selection is active\n    // TODO: array selection should probably be deprecated altogether\n    if (!api && selection) {\n      effect.selection.set(\n        Array.isArray(selection) ? (selection as Object3D[]).map(resolveRef) : [resolveRef(selection) as Object3D]\n      )\n      invalidate()\n      return () => {\n        effect.selection.clear()\n        invalidate()\n      }\n    }\n  }, [effect, selection, api, invalidate])\n\n  useEffect(() => {\n    effect.selectionLayer = selectionLayer\n    invalidate()\n  }, [effect, invalidate, selectionLayer])\n\n  const ref = useRef<OutlineEffect>()\n  useEffect(() => {\n    if (api && api.enabled) {\n      if (api.selected?.length) {\n        effect.selection.set(api.selected)\n        invalidate()\n        return () => {\n          effect.selection.clear()\n          invalidate()\n        }\n      }\n    }\n  }, [api, effect.selection, invalidate])\n\n  useEffect(() => {\n    return () => {\n      effect.dispose()\n    }\n  }, [effect])\n\n  return <primitive ref={forwardRef} object={effect} />\n})\n"],"names":["Outline","forwardRef"],"mappings":";;;;;;;AAgBa,MAAA,UAAU,WAAW,SAASA,SACzC;AAAA,EACE,YAAY,CAAC;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACAC,aACA;AACA,QAAM,aAAa,SAAS,CAAC,UAAU,MAAM,UAAU;AACvD,QAAM,EAAE,OAAO,OAAO,IAAI,WAAW,qBAAqB;AAE1D,QAAM,SAAS;AAAA,IACb,MACE,IAAI,cAAc,OAAO,QAAQ;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,CACJ;AAAA;AAAA;AAAA,IAGH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGI,QAAA,MAAM,WAAW,gBAAgB;AAEvC,YAAU,MAAM;AAGV,QAAA,CAAC,OAAO,WAAW;AACrB,aAAO,UAAU;AAAA,QACf,MAAM,QAAQ,SAAS,IAAK,UAAyB,IAAI,UAAU,IAAI,CAAC,WAAW,SAAS,CAAa;AAAA,MAAA;AAEhG;AACX,aAAO,MAAM;AACX,eAAO,UAAU;AACN;MAAA;AAAA,IAEf;AAAA,KACC,CAAC,QAAQ,WAAW,KAAK,UAAU,CAAC;AAEvC,YAAU,MAAM;AACd,WAAO,iBAAiB;AACb;EACV,GAAA,CAAC,QAAQ,YAAY,cAAc,CAAC;AAE3B,SAAsB;AAClC,YAAU,MAAM;;AACV,QAAA,OAAO,IAAI,SAAS;AAClB,WAAA,SAAI,aAAJ,mBAAc,QAAQ;AACjB,eAAA,UAAU,IAAI,IAAI,QAAQ;AACtB;AACX,eAAO,MAAM;AACX,iBAAO,UAAU;AACN;QAAA;AAAA,MAEf;AAAA,IACF;AAAA,KACC,CAAC,KAAK,OAAO,WAAW,UAAU,CAAC;AAEtC,YAAU,MAAM;AACd,WAAO,MAAM;AACX,aAAO,QAAQ;AAAA,IAAA;AAAA,EACjB,GACC,CAAC,MAAM,CAAC;AAEX,SAAQ,oBAAA,aAAA,EAAU,KAAKA,aAAY,QAAQ,OAAQ,CAAA;AACrD,CAAC;"}

package/dist/effects/SSAO.cjs

@@ -30,7 +30,7 @@ const SSAO = React.forwardRef(function SSAO2(props, ref) {
       depthAwareUpsampling: true,
       ...props
     });
-  }, [camera, normalPass, props]);
+  }, [camera, downSamplingPass, normalPass, resolutionScale]);
   return /* @__PURE__ */ jsxRuntime.jsx("primitive", { ref, object: effect, dispose: null });
 });
 exports.SSAO = SSAO;

package/dist/effects/SSAO.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SSAO.cjs","sources":["../../src/effects/SSAO.tsx"],"sourcesContent":["import { Ref, forwardRef, useContext, useMemo } from 'react'\nimport { SSAOEffect, BlendFunction } from 'postprocessing'\nimport { EffectComposerContext } from '../EffectComposer'\n\n// first two args are camera and texture\ntype SSAOProps = ConstructorParameters<typeof SSAOEffect>[2]\n\nexport const SSAO = forwardRef<SSAOEffect, SSAOProps>(function SSAO(props: SSAOProps, ref: Ref<SSAOEffect>) {\n  const { camera, normalPass, downSamplingPass, resolutionScale } = useContext(EffectComposerContext)\n  const effect = useMemo<SSAOEffect | {}>(() => {\n    if (normalPass === null && downSamplingPass === null) {\n      console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.')\n      return {}\n    }\n    return new SSAOEffect(camera, normalPass && !downSamplingPass ? (normalPass as any).texture : null, {\n      blendFunction: BlendFunction.MULTIPLY,\n      samples: 30,\n      rings: 4,\n      distanceThreshold: 1.0,\n      distanceFalloff: 0.0,\n      rangeThreshold: 0.5,\n      rangeFalloff: 0.1,\n      luminanceInfluence: 0.9,\n      radius: 20,\n      bias: 0.5,\n      intensity: 1.0,\n      color: undefined,\n      // @ts-ignore\n      normalDepthBuffer: downSamplingPass ? downSamplingPass.texture : null,\n      resolutionScale: resolutionScale ?? 1,\n      depthAwareUpsampling: true,\n      ...props,\n    })\n  }, [camera, normalPass, props])\n  return <primitive ref={ref} object={effect} dispose={null} />\n})\n"],"names":["forwardRef","SSAO","useContext","EffectComposerContext","useMemo","SSAOEffect","BlendFunction"],"mappings":";;;;;;AAOO,MAAM,OAAOA,MAAAA,WAAkC,SAASC,MAAK,OAAkB,KAAsB;AAC1G,QAAM,EAAE,QAAQ,YAAY,kBAAkB,oBAAoBC,MAAAA,WAAWC,eAAAA,qBAAqB;AAC5F,QAAA,SAASC,MAAAA,QAAyB,MAAM;AACxC,QAAA,eAAe,QAAQ,qBAAqB,MAAM;AACpD,cAAQ,MAAM,0EAA0E;AACxF,aAAO;IACT;AACO,WAAA,IAAIC,eAAAA,WAAW,QAAQ,cAAc,CAAC,mBAAoB,WAAmB,UAAU,MAAM;AAAA,MAClG,eAAeC,eAAc,cAAA;AAAA,MAC7B,SAAS;AAAA,MACT,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd,oBAAoB;AAAA,MACpB,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA;AAAA,MAEP,mBAAmB,mBAAmB,iBAAiB,UAAU;AAAA,MACjE,iBAAiB,4CAAmB;AAAA,MACpC,sBAAsB;AAAA,MACtB,GAAG;AAAA,IAAA,CACJ;AAAA,EACA,GAAA,CAAC,QAAQ,YAAY,KAAK,CAAC;AAC9B,wCAAQ,aAAU,EAAA,KAAU,QAAQ,QAAQ,SAAS,KAAM,CAAA;AAC7D,CAAC;;"}
+{"version":3,"file":"SSAO.cjs","sources":["../../src/effects/SSAO.tsx"],"sourcesContent":["import { Ref, forwardRef, useContext, useMemo } from 'react'\nimport { SSAOEffect, BlendFunction } from 'postprocessing'\nimport { EffectComposerContext } from '../EffectComposer'\n\n// first two args are camera and texture\ntype SSAOProps = ConstructorParameters<typeof SSAOEffect>[2]\n\nexport const SSAO = forwardRef<SSAOEffect, SSAOProps>(function SSAO(props: SSAOProps, ref: Ref<SSAOEffect>) {\n  const { camera, normalPass, downSamplingPass, resolutionScale } = useContext(EffectComposerContext)\n  const effect = useMemo<SSAOEffect | {}>(() => {\n    if (normalPass === null && downSamplingPass === null) {\n      console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.')\n      return {}\n    }\n    return new SSAOEffect(camera, normalPass && !downSamplingPass ? (normalPass as any).texture : null, {\n      blendFunction: BlendFunction.MULTIPLY,\n      samples: 30,\n      rings: 4,\n      distanceThreshold: 1.0,\n      distanceFalloff: 0.0,\n      rangeThreshold: 0.5,\n      rangeFalloff: 0.1,\n      luminanceInfluence: 0.9,\n      radius: 20,\n      bias: 0.5,\n      intensity: 1.0,\n      color: undefined,\n      // @ts-ignore\n      normalDepthBuffer: downSamplingPass ? downSamplingPass.texture : null,\n      resolutionScale: resolutionScale ?? 1,\n      depthAwareUpsampling: true,\n      ...props,\n    })\n    // NOTE: `props` is an unstable reference, so we can't memoize it\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [camera, downSamplingPass, normalPass, resolutionScale])\n  return <primitive ref={ref} object={effect} dispose={null} />\n})\n"],"names":["forwardRef","SSAO","useContext","EffectComposerContext","useMemo","SSAOEffect","BlendFunction"],"mappings":";;;;;;AAOO,MAAM,OAAOA,MAAAA,WAAkC,SAASC,MAAK,OAAkB,KAAsB;AAC1G,QAAM,EAAE,QAAQ,YAAY,kBAAkB,oBAAoBC,MAAAA,WAAWC,eAAAA,qBAAqB;AAC5F,QAAA,SAASC,MAAAA,QAAyB,MAAM;AACxC,QAAA,eAAe,QAAQ,qBAAqB,MAAM;AACpD,cAAQ,MAAM,0EAA0E;AACxF,aAAO;IACT;AACO,WAAA,IAAIC,eAAAA,WAAW,QAAQ,cAAc,CAAC,mBAAoB,WAAmB,UAAU,MAAM;AAAA,MAClG,eAAeC,eAAc,cAAA;AAAA,MAC7B,SAAS;AAAA,MACT,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd,oBAAoB;AAAA,MACpB,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA;AAAA,MAEP,mBAAmB,mBAAmB,iBAAiB,UAAU;AAAA,MACjE,iBAAiB,4CAAmB;AAAA,MACpC,sBAAsB;AAAA,MACtB,GAAG;AAAA,IAAA,CACJ;AAAA,KAGA,CAAC,QAAQ,kBAAkB,YAAY,eAAe,CAAC;AAC1D,wCAAQ,aAAU,EAAA,KAAU,QAAQ,QAAQ,SAAS,KAAM,CAAA;AAC7D,CAAC;;"}

package/dist/effects/SSAO.js

@@ -28,7 +28,7 @@ const SSAO = forwardRef(function SSAO2(props, ref) {
       depthAwareUpsampling: true,
       ...props
     });
-  }, [camera, normalPass, props]);
+  }, [camera, downSamplingPass, normalPass, resolutionScale]);
   return /* @__PURE__ */ jsx("primitive", { ref, object: effect, dispose: null });
 });
 export {

package/dist/effects/SSAO.js.map

@@ -1 +1 @@
-{"version":3,"file":"SSAO.js","sources":["../../src/effects/SSAO.tsx"],"sourcesContent":["import { Ref, forwardRef, useContext, useMemo } from 'react'\nimport { SSAOEffect, BlendFunction } from 'postprocessing'\nimport { EffectComposerContext } from '../EffectComposer'\n\n// first two args are camera and texture\ntype SSAOProps = ConstructorParameters<typeof SSAOEffect>[2]\n\nexport const SSAO = forwardRef<SSAOEffect, SSAOProps>(function SSAO(props: SSAOProps, ref: Ref<SSAOEffect>) {\n  const { camera, normalPass, downSamplingPass, resolutionScale } = useContext(EffectComposerContext)\n  const effect = useMemo<SSAOEffect | {}>(() => {\n    if (normalPass === null && downSamplingPass === null) {\n      console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.')\n      return {}\n    }\n    return new SSAOEffect(camera, normalPass && !downSamplingPass ? (normalPass as any).texture : null, {\n      blendFunction: BlendFunction.MULTIPLY,\n      samples: 30,\n      rings: 4,\n      distanceThreshold: 1.0,\n      distanceFalloff: 0.0,\n      rangeThreshold: 0.5,\n      rangeFalloff: 0.1,\n      luminanceInfluence: 0.9,\n      radius: 20,\n      bias: 0.5,\n      intensity: 1.0,\n      color: undefined,\n      // @ts-ignore\n      normalDepthBuffer: downSamplingPass ? downSamplingPass.texture : null,\n      resolutionScale: resolutionScale ?? 1,\n      depthAwareUpsampling: true,\n      ...props,\n    })\n  }, [camera, normalPass, props])\n  return <primitive ref={ref} object={effect} dispose={null} />\n})\n"],"names":["SSAO"],"mappings":";;;;AAOO,MAAM,OAAO,WAAkC,SAASA,MAAK,OAAkB,KAAsB;AAC1G,QAAM,EAAE,QAAQ,YAAY,kBAAkB,oBAAoB,WAAW,qBAAqB;AAC5F,QAAA,SAAS,QAAyB,MAAM;AACxC,QAAA,eAAe,QAAQ,qBAAqB,MAAM;AACpD,cAAQ,MAAM,0EAA0E;AACxF,aAAO;IACT;AACO,WAAA,IAAI,WAAW,QAAQ,cAAc,CAAC,mBAAoB,WAAmB,UAAU,MAAM;AAAA,MAClG,eAAe,cAAc;AAAA,MAC7B,SAAS;AAAA,MACT,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd,oBAAoB;AAAA,MACpB,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA;AAAA,MAEP,mBAAmB,mBAAmB,iBAAiB,UAAU;AAAA,MACjE,iBAAiB,4CAAmB;AAAA,MACpC,sBAAsB;AAAA,MACtB,GAAG;AAAA,IAAA,CACJ;AAAA,EACA,GAAA,CAAC,QAAQ,YAAY,KAAK,CAAC;AAC9B,6BAAQ,aAAU,EAAA,KAAU,QAAQ,QAAQ,SAAS,KAAM,CAAA;AAC7D,CAAC;"}
+{"version":3,"file":"SSAO.js","sources":["../../src/effects/SSAO.tsx"],"sourcesContent":["import { Ref, forwardRef, useContext, useMemo } from 'react'\nimport { SSAOEffect, BlendFunction } from 'postprocessing'\nimport { EffectComposerContext } from '../EffectComposer'\n\n// first two args are camera and texture\ntype SSAOProps = ConstructorParameters<typeof SSAOEffect>[2]\n\nexport const SSAO = forwardRef<SSAOEffect, SSAOProps>(function SSAO(props: SSAOProps, ref: Ref<SSAOEffect>) {\n  const { camera, normalPass, downSamplingPass, resolutionScale } = useContext(EffectComposerContext)\n  const effect = useMemo<SSAOEffect | {}>(() => {\n    if (normalPass === null && downSamplingPass === null) {\n      console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.')\n      return {}\n    }\n    return new SSAOEffect(camera, normalPass && !downSamplingPass ? (normalPass as any).texture : null, {\n      blendFunction: BlendFunction.MULTIPLY,\n      samples: 30,\n      rings: 4,\n      distanceThreshold: 1.0,\n      distanceFalloff: 0.0,\n      rangeThreshold: 0.5,\n      rangeFalloff: 0.1,\n      luminanceInfluence: 0.9,\n      radius: 20,\n      bias: 0.5,\n      intensity: 1.0,\n      color: undefined,\n      // @ts-ignore\n      normalDepthBuffer: downSamplingPass ? downSamplingPass.texture : null,\n      resolutionScale: resolutionScale ?? 1,\n      depthAwareUpsampling: true,\n      ...props,\n    })\n    // NOTE: `props` is an unstable reference, so we can't memoize it\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [camera, downSamplingPass, normalPass, resolutionScale])\n  return <primitive ref={ref} object={effect} dispose={null} />\n})\n"],"names":["SSAO"],"mappings":";;;;AAOO,MAAM,OAAO,WAAkC,SAASA,MAAK,OAAkB,KAAsB;AAC1G,QAAM,EAAE,QAAQ,YAAY,kBAAkB,oBAAoB,WAAW,qBAAqB;AAC5F,QAAA,SAAS,QAAyB,MAAM;AACxC,QAAA,eAAe,QAAQ,qBAAqB,MAAM;AACpD,cAAQ,MAAM,0EAA0E;AACxF,aAAO;IACT;AACO,WAAA,IAAI,WAAW,QAAQ,cAAc,CAAC,mBAAoB,WAAmB,UAAU,MAAM;AAAA,MAClG,eAAe,cAAc;AAAA,MAC7B,SAAS;AAAA,MACT,OAAO;AAAA,MACP,mBAAmB;AAAA,MACnB,iBAAiB;AAAA,MACjB,gBAAgB;AAAA,MAChB,cAAc;AAAA,MACd,oBAAoB;AAAA,MACpB,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,MACX,OAAO;AAAA;AAAA,MAEP,mBAAmB,mBAAmB,iBAAiB,UAAU;AAAA,MACjE,iBAAiB,4CAAmB;AAAA,MACpC,sBAAsB;AAAA,MACtB,GAAG;AAAA,IAAA,CACJ;AAAA,KAGA,CAAC,QAAQ,kBAAkB,YAAY,eAAe,CAAC;AAC1D,6BAAQ,aAAU,EAAA,KAAU,QAAQ,QAAQ,SAAS,KAAM,CAAA;AAC7D,CAAC;"}

package/dist/effects/SSR/index.cjs

@@ -7,7 +7,7 @@ const EffectComposer = require("../../EffectComposer.cjs");
 const Selection = require("../../Selection.cjs");
 const fiber = require("@react-three/fiber");
 const SSR = React.forwardRef(function SSR2({ ENABLE_BLUR = true, USE_MRT = true, ...props }, ref) {
-  const { invalidate } = fiber.useThree();
+  const invalidate = fiber.useThree((s) => s.invalidate);
   const { scene, camera } = React.useContext(EffectComposer.EffectComposerContext);
   const effect = React.useMemo(
     () => new screenSpaceReflections.SSREffect(scene, camera, { ENABLE_BLUR, USE_MRT, ...props }),
@@ -26,7 +26,7 @@ const SSR = React.forwardRef(function SSR2({ ENABLE_BLUR = true, USE_MRT = true,
         };
       }
     }
-  }, [api]);
+  }, [api, effect, invalidate]);
   return /* @__PURE__ */ jsxRuntime.jsx("primitive", { ref, object: effect, ...props });
 });
 exports.SSR = SSR;

package/dist/effects/SSR/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/effects/SSR/index.tsx"],"sourcesContent":["import React, { Ref, forwardRef, useLayoutEffect, useEffect, useContext, useMemo } from 'react'\n/* @ts-ignore */\nimport { SSREffect } from './screen-space-reflections'\nimport { EffectComposerContext } from '../../EffectComposer'\nimport { selectionContext } from '../../Selection'\nimport { useThree } from '@react-three/fiber'\n\n// first two args are camera and texture\ntype SSRProps = {\n  /** whether you want to use Temporal Resolving to re-use reflections from the last frames; this will reduce noise tremendously but may result in \"smearing\" */\n  temporalResolve?: boolean\n  /** a value between 0 and 1 to set how much the last frame's reflections should be blended in; higher values will result in less noisy reflections when moving the camera but a more smeary look */\n  temporalResolveMix?: number\n  /** a value between 0 and 1 to set how much the reprojected reflection should be corrected; higher values will reduce smearing but will result in less flickering at reflection edges */\n  temporalResolveCorrectionMix?: number\n  /** the maximum number of samples for reflections; settings it to 0 means unlimited samples; setting it to a value like 6 can help make camera movements less disruptive when calculating reflections */\n  maxSamples?: number\n  /** whether to blur the reflections and blend these blurred reflections with the raw ones depending on the blurMix value */\n  ENABLE_BLUR?: boolean\n  /** how much the blurred reflections should be mixed with the raw reflections */\n  blurMix?: number\n  /** the sharpness of the Bilateral Filter used to blur reflections */\n  blurSharpness?: number\n  /** the kernel size of the Bilateral Blur Filter; higher kernel sizes will result in blurrier reflections with more artifacts */\n  blurKernelSize?: number\n  /** how much the reflection ray should travel in each of its iteration; higher values will give deeper reflections but with more artifacts */\n  rayStep?: number\n  /** the intensity of the reflections */\n  intensity?: number\n  /** the maximum roughness a texel can have to have reflections calculated for it */\n  maxRoughness?: number\n  /** whether jittering is enabled; jittering will randomly jitter the reflections resulting in a more noisy but overall more realistic look, enabling jittering can be expensive depending on the view angle */\n  ENABLE_JITTERING?: boolean\n  /** how intense jittering should be */\n  jitter?: number\n  /** how much the jittered rays should be spread; higher values will give a rougher look regarding the reflections but are more expensive to compute with */\n  jitterSpread?: number\n  /** how intense jittering should be in relation to a material's roughness */\n  jitterRough?: number\n  /** the number of steps a reflection ray can maximally do to find an object it intersected (and thus reflects) */\n  MAX_STEPS?: number\n  /** once we had our ray intersect something, we need to find the exact point in space it intersected and thus it reflects; this can be done through binary search with the given number of maximum steps */\n  NUM_BINARY_SEARCH_STEPS?: number\n  /** the maximum depth difference between a ray and the particular depth at its screen position after refining with binary search; lower values will result in better performance */\n  maxDepthDifference?: number\n  /** the maximum depth for which reflections will be calculated */\n  maxDepth?: number\n  /** the maximum depth difference between a ray and the particular depth at its screen position before refining with binary search; lower values will result in better performance */\n  thickness?: number\n  /** Index of Refraction, used for calculating fresnel; reflections tend to be more intense the steeper the angle between them and the viewer is, the ior parameter set how much the intensity varies */\n  ior?: number\n  /** if there should still be reflections for rays for which a reflecting point couldn't be found; enabling this will result in stretched looking reflections which can look good or bad depending on the angle */\n  STRETCH_MISSED_RAYS?: boolean\n  /** WebGL2 only - whether to use multiple render targets when rendering the G-buffers (normals, depth and roughness); using them can improve performance as they will render all information to multiple buffers for each fragment in one run; this setting can't be changed during run-time */\n  USE_MRT?: boolean\n  /** if roughness maps should be taken account of when calculating reflections */\n  USE_ROUGHNESSMAP?: boolean\n  /** if normal maps should be taken account of when calculating reflections */\n  USE_NORMALMAP?: boolean\n}\n\nexport const SSR = forwardRef<SSREffect, SSRProps>(function SSR(\n  { ENABLE_BLUR = true, USE_MRT = true, ...props }: SSRProps,\n\n  ref: Ref<SSREffect>\n) {\n  const { invalidate } = useThree()\n  const { scene, camera } = useContext(EffectComposerContext)\n  const effect = useMemo(\n    () => new SSREffect(scene, camera, { ENABLE_BLUR, USE_MRT, ...props }),\n    [scene, camera, ENABLE_BLUR, USE_MRT, props]\n  )\n\n  const api = useContext(selectionContext)\n  useEffect(() => {\n    if (api && api.enabled) {\n      if (api.selected?.length) {\n        effect.selection.set(api.selected)\n        invalidate()\n        return () => {\n          effect.selection.clear()\n          invalidate()\n        }\n      }\n    }\n  }, [api])\n\n  return <primitive ref={ref} object={effect} {...props} />\n})\n"],"names":["forwardRef","SSR","useThree","useContext","EffectComposerContext","useMemo","SSREffect","selectionContext","useEffect"],"mappings":";;;;;;;;AA6DO,MAAM,MAAMA,MAAA,WAAgC,SAASC,KAC1D,EAAE,cAAc,MAAM,UAAU,MAAM,GAAG,MAAM,GAE/C,KACA;AACM,QAAA,EAAE,eAAeC,MAAAA;AACvB,QAAM,EAAE,OAAO,OAAO,IAAIC,iBAAWC,eAAqB,qBAAA;AAC1D,QAAM,SAASC,MAAA;AAAA,IACb,MAAM,IAAIC,uBAAAA,UAAU,OAAO,QAAQ,EAAE,aAAa,SAAS,GAAG,OAAO;AAAA,IACrE,CAAC,OAAO,QAAQ,aAAa,SAAS,KAAK;AAAA,EAAA;AAGvC,QAAA,MAAMH,iBAAWI,UAAAA,gBAAgB;AACvCC,QAAAA,UAAU,MAAM;;AACV,QAAA,OAAO,IAAI,SAAS;AAClB,WAAA,SAAI,aAAJ,mBAAc,QAAQ;AACjB,eAAA,UAAU,IAAI,IAAI,QAAQ;AACtB;AACX,eAAO,MAAM;AACX,iBAAO,UAAU;AACN;QAAA;AAAA,MAEf;AAAA,IACF;AAAA,EAAA,GACC,CAAC,GAAG,CAAC;AAER,wCAAQ,aAAU,EAAA,KAAU,QAAQ,QAAS,GAAG,MAAO,CAAA;AACzD,CAAC;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/effects/SSR/index.tsx"],"sourcesContent":["import React, { Ref, forwardRef, useLayoutEffect, useEffect, useContext, useMemo } from 'react'\n/* @ts-ignore */\nimport { SSREffect } from './screen-space-reflections'\nimport { EffectComposerContext } from '../../EffectComposer'\nimport { selectionContext } from '../../Selection'\nimport { useThree } from '@react-three/fiber'\n\n// first two args are camera and texture\ntype SSRProps = {\n  /** whether you want to use Temporal Resolving to re-use reflections from the last frames; this will reduce noise tremendously but may result in \"smearing\" */\n  temporalResolve?: boolean\n  /** a value between 0 and 1 to set how much the last frame's reflections should be blended in; higher values will result in less noisy reflections when moving the camera but a more smeary look */\n  temporalResolveMix?: number\n  /** a value between 0 and 1 to set how much the reprojected reflection should be corrected; higher values will reduce smearing but will result in less flickering at reflection edges */\n  temporalResolveCorrectionMix?: number\n  /** the maximum number of samples for reflections; settings it to 0 means unlimited samples; setting it to a value like 6 can help make camera movements less disruptive when calculating reflections */\n  maxSamples?: number\n  /** whether to blur the reflections and blend these blurred reflections with the raw ones depending on the blurMix value */\n  ENABLE_BLUR?: boolean\n  /** how much the blurred reflections should be mixed with the raw reflections */\n  blurMix?: number\n  /** the sharpness of the Bilateral Filter used to blur reflections */\n  blurSharpness?: number\n  /** the kernel size of the Bilateral Blur Filter; higher kernel sizes will result in blurrier reflections with more artifacts */\n  blurKernelSize?: number\n  /** how much the reflection ray should travel in each of its iteration; higher values will give deeper reflections but with more artifacts */\n  rayStep?: number\n  /** the intensity of the reflections */\n  intensity?: number\n  /** the maximum roughness a texel can have to have reflections calculated for it */\n  maxRoughness?: number\n  /** whether jittering is enabled; jittering will randomly jitter the reflections resulting in a more noisy but overall more realistic look, enabling jittering can be expensive depending on the view angle */\n  ENABLE_JITTERING?: boolean\n  /** how intense jittering should be */\n  jitter?: number\n  /** how much the jittered rays should be spread; higher values will give a rougher look regarding the reflections but are more expensive to compute with */\n  jitterSpread?: number\n  /** how intense jittering should be in relation to a material's roughness */\n  jitterRough?: number\n  /** the number of steps a reflection ray can maximally do to find an object it intersected (and thus reflects) */\n  MAX_STEPS?: number\n  /** once we had our ray intersect something, we need to find the exact point in space it intersected and thus it reflects; this can be done through binary search with the given number of maximum steps */\n  NUM_BINARY_SEARCH_STEPS?: number\n  /** the maximum depth difference between a ray and the particular depth at its screen position after refining with binary search; lower values will result in better performance */\n  maxDepthDifference?: number\n  /** the maximum depth for which reflections will be calculated */\n  maxDepth?: number\n  /** the maximum depth difference between a ray and the particular depth at its screen position before refining with binary search; lower values will result in better performance */\n  thickness?: number\n  /** Index of Refraction, used for calculating fresnel; reflections tend to be more intense the steeper the angle between them and the viewer is, the ior parameter set how much the intensity varies */\n  ior?: number\n  /** if there should still be reflections for rays for which a reflecting point couldn't be found; enabling this will result in stretched looking reflections which can look good or bad depending on the angle */\n  STRETCH_MISSED_RAYS?: boolean\n  /** WebGL2 only - whether to use multiple render targets when rendering the G-buffers (normals, depth and roughness); using them can improve performance as they will render all information to multiple buffers for each fragment in one run; this setting can't be changed during run-time */\n  USE_MRT?: boolean\n  /** if roughness maps should be taken account of when calculating reflections */\n  USE_ROUGHNESSMAP?: boolean\n  /** if normal maps should be taken account of when calculating reflections */\n  USE_NORMALMAP?: boolean\n}\n\nexport const SSR = forwardRef<SSREffect, SSRProps>(function SSR(\n  { ENABLE_BLUR = true, USE_MRT = true, ...props }: SSRProps,\n\n  ref: Ref<SSREffect>\n) {\n  const invalidate = useThree((s) => s.invalidate)\n  const { scene, camera } = useContext(EffectComposerContext)\n  const effect = useMemo(\n    () => new SSREffect(scene, camera, { ENABLE_BLUR, USE_MRT, ...props }),\n    [scene, camera, ENABLE_BLUR, USE_MRT, props]\n  )\n\n  const api = useContext(selectionContext)\n  useEffect(() => {\n    if (api && api.enabled) {\n      if (api.selected?.length) {\n        effect.selection.set(api.selected)\n        invalidate()\n        return () => {\n          effect.selection.clear()\n          invalidate()\n        }\n      }\n    }\n  }, [api, effect, invalidate])\n\n  return <primitive ref={ref} object={effect} {...props} />\n})\n"],"names":["forwardRef","SSR","useThree","useContext","EffectComposerContext","useMemo","SSREffect","selectionContext","useEffect"],"mappings":";;;;;;;;AA6DO,MAAM,MAAMA,MAAA,WAAgC,SAASC,KAC1D,EAAE,cAAc,MAAM,UAAU,MAAM,GAAG,MAAM,GAE/C,KACA;AACA,QAAM,aAAaC,MAAAA,SAAS,CAAC,MAAM,EAAE,UAAU;AAC/C,QAAM,EAAE,OAAO,OAAO,IAAIC,iBAAWC,eAAqB,qBAAA;AAC1D,QAAM,SAASC,MAAA;AAAA,IACb,MAAM,IAAIC,uBAAAA,UAAU,OAAO,QAAQ,EAAE,aAAa,SAAS,GAAG,OAAO;AAAA,IACrE,CAAC,OAAO,QAAQ,aAAa,SAAS,KAAK;AAAA,EAAA;AAGvC,QAAA,MAAMH,iBAAWI,UAAAA,gBAAgB;AACvCC,QAAAA,UAAU,MAAM;;AACV,QAAA,OAAO,IAAI,SAAS;AAClB,WAAA,SAAI,aAAJ,mBAAc,QAAQ;AACjB,eAAA,UAAU,IAAI,IAAI,QAAQ;AACtB;AACX,eAAO,MAAM;AACX,iBAAO,UAAU;AACN;QAAA;AAAA,MAEf;AAAA,IACF;AAAA,EACC,GAAA,CAAC,KAAK,QAAQ,UAAU,CAAC;AAE5B,wCAAQ,aAAU,EAAA,KAAU,QAAQ,QAAS,GAAG,MAAO,CAAA;AACzD,CAAC;;"}

package/dist/effects/SSR/index.js

@@ -5,7 +5,7 @@ import { EffectComposerContext } from "../../EffectComposer.js";
 import { selectionContext } from "../../Selection.js";
 import { useThree } from "@react-three/fiber";
 const SSR = forwardRef(function SSR2({ ENABLE_BLUR = true, USE_MRT = true, ...props }, ref) {
-  const { invalidate } = useThree();
+  const invalidate = useThree((s) => s.invalidate);
   const { scene, camera } = useContext(EffectComposerContext);
   const effect = useMemo(
     () => new SSREffect(scene, camera, { ENABLE_BLUR, USE_MRT, ...props }),
@@ -24,7 +24,7 @@ const SSR = forwardRef(function SSR2({ ENABLE_BLUR = true, USE_MRT = true, ...pr
         };
       }
     }
-  }, [api]);
+  }, [api, effect, invalidate]);
   return /* @__PURE__ */ jsx("primitive", { ref, object: effect, ...props });
 });
 export {

package/dist/effects/SSR/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/effects/SSR/index.tsx"],"sourcesContent":["import React, { Ref, forwardRef, useLayoutEffect, useEffect, useContext, useMemo } from 'react'\n/* @ts-ignore */\nimport { SSREffect } from './screen-space-reflections'\nimport { EffectComposerContext } from '../../EffectComposer'\nimport { selectionContext } from '../../Selection'\nimport { useThree } from '@react-three/fiber'\n\n// first two args are camera and texture\ntype SSRProps = {\n  /** whether you want to use Temporal Resolving to re-use reflections from the last frames; this will reduce noise tremendously but may result in \"smearing\" */\n  temporalResolve?: boolean\n  /** a value between 0 and 1 to set how much the last frame's reflections should be blended in; higher values will result in less noisy reflections when moving the camera but a more smeary look */\n  temporalResolveMix?: number\n  /** a value between 0 and 1 to set how much the reprojected reflection should be corrected; higher values will reduce smearing but will result in less flickering at reflection edges */\n  temporalResolveCorrectionMix?: number\n  /** the maximum number of samples for reflections; settings it to 0 means unlimited samples; setting it to a value like 6 can help make camera movements less disruptive when calculating reflections */\n  maxSamples?: number\n  /** whether to blur the reflections and blend these blurred reflections with the raw ones depending on the blurMix value */\n  ENABLE_BLUR?: boolean\n  /** how much the blurred reflections should be mixed with the raw reflections */\n  blurMix?: number\n  /** the sharpness of the Bilateral Filter used to blur reflections */\n  blurSharpness?: number\n  /** the kernel size of the Bilateral Blur Filter; higher kernel sizes will result in blurrier reflections with more artifacts */\n  blurKernelSize?: number\n  /** how much the reflection ray should travel in each of its iteration; higher values will give deeper reflections but with more artifacts */\n  rayStep?: number\n  /** the intensity of the reflections */\n  intensity?: number\n  /** the maximum roughness a texel can have to have reflections calculated for it */\n  maxRoughness?: number\n  /** whether jittering is enabled; jittering will randomly jitter the reflections resulting in a more noisy but overall more realistic look, enabling jittering can be expensive depending on the view angle */\n  ENABLE_JITTERING?: boolean\n  /** how intense jittering should be */\n  jitter?: number\n  /** how much the jittered rays should be spread; higher values will give a rougher look regarding the reflections but are more expensive to compute with */\n  jitterSpread?: number\n  /** how intense jittering should be in relation to a material's roughness */\n  jitterRough?: number\n  /** the number of steps a reflection ray can maximally do to find an object it intersected (and thus reflects) */\n  MAX_STEPS?: number\n  /** once we had our ray intersect something, we need to find the exact point in space it intersected and thus it reflects; this can be done through binary search with the given number of maximum steps */\n  NUM_BINARY_SEARCH_STEPS?: number\n  /** the maximum depth difference between a ray and the particular depth at its screen position after refining with binary search; lower values will result in better performance */\n  maxDepthDifference?: number\n  /** the maximum depth for which reflections will be calculated */\n  maxDepth?: number\n  /** the maximum depth difference between a ray and the particular depth at its screen position before refining with binary search; lower values will result in better performance */\n  thickness?: number\n  /** Index of Refraction, used for calculating fresnel; reflections tend to be more intense the steeper the angle between them and the viewer is, the ior parameter set how much the intensity varies */\n  ior?: number\n  /** if there should still be reflections for rays for which a reflecting point couldn't be found; enabling this will result in stretched looking reflections which can look good or bad depending on the angle */\n  STRETCH_MISSED_RAYS?: boolean\n  /** WebGL2 only - whether to use multiple render targets when rendering the G-buffers (normals, depth and roughness); using them can improve performance as they will render all information to multiple buffers for each fragment in one run; this setting can't be changed during run-time */\n  USE_MRT?: boolean\n  /** if roughness maps should be taken account of when calculating reflections */\n  USE_ROUGHNESSMAP?: boolean\n  /** if normal maps should be taken account of when calculating reflections */\n  USE_NORMALMAP?: boolean\n}\n\nexport const SSR = forwardRef<SSREffect, SSRProps>(function SSR(\n  { ENABLE_BLUR = true, USE_MRT = true, ...props }: SSRProps,\n\n  ref: Ref<SSREffect>\n) {\n  const { invalidate } = useThree()\n  const { scene, camera } = useContext(EffectComposerContext)\n  const effect = useMemo(\n    () => new SSREffect(scene, camera, { ENABLE_BLUR, USE_MRT, ...props }),\n    [scene, camera, ENABLE_BLUR, USE_MRT, props]\n  )\n\n  const api = useContext(selectionContext)\n  useEffect(() => {\n    if (api && api.enabled) {\n      if (api.selected?.length) {\n        effect.selection.set(api.selected)\n        invalidate()\n        return () => {\n          effect.selection.clear()\n          invalidate()\n        }\n      }\n    }\n  }, [api])\n\n  return <primitive ref={ref} object={effect} {...props} />\n})\n"],"names":["SSR"],"mappings":";;;;;;AA6DO,MAAM,MAAM,WAAgC,SAASA,KAC1D,EAAE,cAAc,MAAM,UAAU,MAAM,GAAG,MAAM,GAE/C,KACA;AACM,QAAA,EAAE,eAAe;AACvB,QAAM,EAAE,OAAO,OAAO,IAAI,WAAW,qBAAqB;AAC1D,QAAM,SAAS;AAAA,IACb,MAAM,IAAI,UAAU,OAAO,QAAQ,EAAE,aAAa,SAAS,GAAG,OAAO;AAAA,IACrE,CAAC,OAAO,QAAQ,aAAa,SAAS,KAAK;AAAA,EAAA;AAGvC,QAAA,MAAM,WAAW,gBAAgB;AACvC,YAAU,MAAM;;AACV,QAAA,OAAO,IAAI,SAAS;AAClB,WAAA,SAAI,aAAJ,mBAAc,QAAQ;AACjB,eAAA,UAAU,IAAI,IAAI,QAAQ;AACtB;AACX,eAAO,MAAM;AACX,iBAAO,UAAU;AACN;QAAA;AAAA,MAEf;AAAA,IACF;AAAA,EAAA,GACC,CAAC,GAAG,CAAC;AAER,6BAAQ,aAAU,EAAA,KAAU,QAAQ,QAAS,GAAG,MAAO,CAAA;AACzD,CAAC;"}
+{"version":3,"file":"index.js","sources":["../../../src/effects/SSR/index.tsx"],"sourcesContent":["import React, { Ref, forwardRef, useLayoutEffect, useEffect, useContext, useMemo } from 'react'\n/* @ts-ignore */\nimport { SSREffect } from './screen-space-reflections'\nimport { EffectComposerContext } from '../../EffectComposer'\nimport { selectionContext } from '../../Selection'\nimport { useThree } from '@react-three/fiber'\n\n// first two args are camera and texture\ntype SSRProps = {\n  /** whether you want to use Temporal Resolving to re-use reflections from the last frames; this will reduce noise tremendously but may result in \"smearing\" */\n  temporalResolve?: boolean\n  /** a value between 0 and 1 to set how much the last frame's reflections should be blended in; higher values will result in less noisy reflections when moving the camera but a more smeary look */\n  temporalResolveMix?: number\n  /** a value between 0 and 1 to set how much the reprojected reflection should be corrected; higher values will reduce smearing but will result in less flickering at reflection edges */\n  temporalResolveCorrectionMix?: number\n  /** the maximum number of samples for reflections; settings it to 0 means unlimited samples; setting it to a value like 6 can help make camera movements less disruptive when calculating reflections */\n  maxSamples?: number\n  /** whether to blur the reflections and blend these blurred reflections with the raw ones depending on the blurMix value */\n  ENABLE_BLUR?: boolean\n  /** how much the blurred reflections should be mixed with the raw reflections */\n  blurMix?: number\n  /** the sharpness of the Bilateral Filter used to blur reflections */\n  blurSharpness?: number\n  /** the kernel size of the Bilateral Blur Filter; higher kernel sizes will result in blurrier reflections with more artifacts */\n  blurKernelSize?: number\n  /** how much the reflection ray should travel in each of its iteration; higher values will give deeper reflections but with more artifacts */\n  rayStep?: number\n  /** the intensity of the reflections */\n  intensity?: number\n  /** the maximum roughness a texel can have to have reflections calculated for it */\n  maxRoughness?: number\n  /** whether jittering is enabled; jittering will randomly jitter the reflections resulting in a more noisy but overall more realistic look, enabling jittering can be expensive depending on the view angle */\n  ENABLE_JITTERING?: boolean\n  /** how intense jittering should be */\n  jitter?: number\n  /** how much the jittered rays should be spread; higher values will give a rougher look regarding the reflections but are more expensive to compute with */\n  jitterSpread?: number\n  /** how intense jittering should be in relation to a material's roughness */\n  jitterRough?: number\n  /** the number of steps a reflection ray can maximally do to find an object it intersected (and thus reflects) */\n  MAX_STEPS?: number\n  /** once we had our ray intersect something, we need to find the exact point in space it intersected and thus it reflects; this can be done through binary search with the given number of maximum steps */\n  NUM_BINARY_SEARCH_STEPS?: number\n  /** the maximum depth difference between a ray and the particular depth at its screen position after refining with binary search; lower values will result in better performance */\n  maxDepthDifference?: number\n  /** the maximum depth for which reflections will be calculated */\n  maxDepth?: number\n  /** the maximum depth difference between a ray and the particular depth at its screen position before refining with binary search; lower values will result in better performance */\n  thickness?: number\n  /** Index of Refraction, used for calculating fresnel; reflections tend to be more intense the steeper the angle between them and the viewer is, the ior parameter set how much the intensity varies */\n  ior?: number\n  /** if there should still be reflections for rays for which a reflecting point couldn't be found; enabling this will result in stretched looking reflections which can look good or bad depending on the angle */\n  STRETCH_MISSED_RAYS?: boolean\n  /** WebGL2 only - whether to use multiple render targets when rendering the G-buffers (normals, depth and roughness); using them can improve performance as they will render all information to multiple buffers for each fragment in one run; this setting can't be changed during run-time */\n  USE_MRT?: boolean\n  /** if roughness maps should be taken account of when calculating reflections */\n  USE_ROUGHNESSMAP?: boolean\n  /** if normal maps should be taken account of when calculating reflections */\n  USE_NORMALMAP?: boolean\n}\n\nexport const SSR = forwardRef<SSREffect, SSRProps>(function SSR(\n  { ENABLE_BLUR = true, USE_MRT = true, ...props }: SSRProps,\n\n  ref: Ref<SSREffect>\n) {\n  const invalidate = useThree((s) => s.invalidate)\n  const { scene, camera } = useContext(EffectComposerContext)\n  const effect = useMemo(\n    () => new SSREffect(scene, camera, { ENABLE_BLUR, USE_MRT, ...props }),\n    [scene, camera, ENABLE_BLUR, USE_MRT, props]\n  )\n\n  const api = useContext(selectionContext)\n  useEffect(() => {\n    if (api && api.enabled) {\n      if (api.selected?.length) {\n        effect.selection.set(api.selected)\n        invalidate()\n        return () => {\n          effect.selection.clear()\n          invalidate()\n        }\n      }\n    }\n  }, [api, effect, invalidate])\n\n  return <primitive ref={ref} object={effect} {...props} />\n})\n"],"names":["SSR"],"mappings":";;;;;;AA6DO,MAAM,MAAM,WAAgC,SAASA,KAC1D,EAAE,cAAc,MAAM,UAAU,MAAM,GAAG,MAAM,GAE/C,KACA;AACA,QAAM,aAAa,SAAS,CAAC,MAAM,EAAE,UAAU;AAC/C,QAAM,EAAE,OAAO,OAAO,IAAI,WAAW,qBAAqB;AAC1D,QAAM,SAAS;AAAA,IACb,MAAM,IAAI,UAAU,OAAO,QAAQ,EAAE,aAAa,SAAS,GAAG,OAAO;AAAA,IACrE,CAAC,OAAO,QAAQ,aAAa,SAAS,KAAK;AAAA,EAAA;AAGvC,QAAA,MAAM,WAAW,gBAAgB;AACvC,YAAU,MAAM;;AACV,QAAA,OAAO,IAAI,SAAS;AAClB,WAAA,SAAI,aAAJ,mBAAc,QAAQ;AACjB,eAAA,UAAU,IAAI,IAAI,QAAQ;AACtB;AACX,eAAO,MAAM;AACX,iBAAO,UAAU;AACN;QAAA;AAAA,MAEf;AAAA,IACF;AAAA,EACC,GAAA,CAAC,KAAK,QAAQ,UAAU,CAAC;AAE5B,6BAAQ,aAAU,EAAA,KAAU,QAAQ,QAAS,GAAG,MAAO,CAAA;AACzD,CAAC;"}

package/dist/effects/ToneMapping.cjs

@@ -1,51 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
 const postprocessing = require("postprocessing");
-const React = require("react");
-const ToneMapping = React.forwardRef(function ToneMapping2({
-  blendFunction,
-  adaptive,
-  mode,
-  resolution,
-  maxLuminance,
-  whitePoint,
-  middleGrey,
-  minLuminance,
-  averageLuminance,
-  adaptationRate,
-  ...props
-}, ref) {
-  const effect = React.useMemo(
-    () => new postprocessing.ToneMappingEffect({
-      blendFunction,
-      adaptive,
-      mode,
-      resolution,
-      maxLuminance,
-      whitePoint,
-      middleGrey,
-      minLuminance,
-      averageLuminance,
-      adaptationRate
-    }),
-    [
-      blendFunction,
-      adaptive,
-      mode,
-      resolution,
-      maxLuminance,
-      whitePoint,
-      middleGrey,
-      minLuminance,
-      averageLuminance,
-      adaptationRate
-    ]
-  );
-  React.useEffect(() => {
-    effect.dispose();
-  }, [effect]);
-  return /* @__PURE__ */ jsxRuntime.jsx("primitive", { ...props, ref, object: effect, attributes: postprocessing.EffectAttribute.CONVOLUTION });
-});
+const util = require("../util.cjs");
+const ToneMapping = util.wrapEffect(postprocessing.ToneMappingEffect);
 exports.ToneMapping = ToneMapping;
 //# sourceMappingURL=ToneMapping.cjs.map

package/dist/effects/ToneMapping.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToneMapping.cjs","sources":["../../src/effects/ToneMapping.tsx"],"sourcesContent":["import { ToneMappingEffect, EffectAttribute } from 'postprocessing'\nimport { EffectProps } from '../util'\nimport { forwardRef, useEffect, useMemo } from 'react'\n\nexport type ToneMappingProps = EffectProps<typeof ToneMappingEffect>\n\nexport const ToneMapping = forwardRef<ToneMappingEffect, ToneMappingProps>(function ToneMapping(\n  {\n    blendFunction,\n    adaptive,\n    mode,\n    resolution,\n    maxLuminance,\n    whitePoint,\n    middleGrey,\n    minLuminance,\n    averageLuminance,\n    adaptationRate,\n    ...props\n  },\n  ref\n) {\n  const effect = useMemo(\n    () =>\n      new ToneMappingEffect({\n        blendFunction,\n        adaptive,\n        mode,\n        resolution,\n        maxLuminance,\n        whitePoint,\n        middleGrey,\n        minLuminance,\n        averageLuminance,\n        adaptationRate,\n      }),\n    [\n      blendFunction,\n      adaptive,\n      mode,\n      resolution,\n      maxLuminance,\n      whitePoint,\n      middleGrey,\n      minLuminance,\n      averageLuminance,\n      adaptationRate,\n    ]\n  )\n\n  useEffect(() => {\n    effect.dispose()\n  }, [effect])\n\n  return <primitive {...props} ref={ref} object={effect} attributes={EffectAttribute.CONVOLUTION} />\n})\n"],"names":["forwardRef","ToneMapping","useMemo","ToneMappingEffect","useEffect","jsx","EffectAttribute"],"mappings":";;;;;AAMa,MAAA,cAAcA,MAAAA,WAAgD,SAASC,aAClF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,SAASC,MAAA;AAAA,IACb,MACE,IAAIC,eAAAA,kBAAkB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGFC,QAAAA,UAAU,MAAM;AACd,WAAO,QAAQ;AAAA,EAAA,GACd,CAAC,MAAM,CAAC;AAEJ,SAAAC,+BAAC,eAAW,GAAG,OAAO,KAAU,QAAQ,QAAQ,YAAYC,+BAAgB,YAAa,CAAA;AAClG,CAAC;;"}
+{"version":3,"file":"ToneMapping.cjs","sources":["../../src/effects/ToneMapping.tsx"],"sourcesContent":["import { ToneMappingEffect } from 'postprocessing'\nimport { type EffectProps, wrapEffect } from '../util'\n\nexport type ToneMappingProps = EffectProps<typeof ToneMappingEffect>\n\nexport const ToneMapping = wrapEffect(ToneMappingEffect)\n"],"names":["wrapEffect","ToneMappingEffect"],"mappings":";;;;AAKa,MAAA,cAAcA,gBAAWC,eAAiB,iBAAA;;"}

package/dist/effects/ToneMapping.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ToneMappingEffect } from 'postprocessing';
-import { EffectProps } from '../util';
+import { type EffectProps } from '../util';
 export type ToneMappingProps = EffectProps<typeof ToneMappingEffect>;
 export declare const ToneMapping: import("react").ForwardRefExoticComponent<Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<ToneMappingEffect>, import("@react-three/fiber").NodeProps<ToneMappingEffect, typeof ToneMappingEffect>>> & {
     blendFunction?: import("postprocessing").BlendFunction | undefined;
@@ -16,4 +16,4 @@ export declare const ToneMapping: import("react").ForwardRefExoticComponent<Omit
 } & {
     blendFunction?: import("postprocessing").BlendFunction | undefined;
     opacity?: number | undefined;
-}, "ref"> & import("react").RefAttributes<ToneMappingEffect>>;
+}, "ref"> & import("react").RefAttributes<typeof ToneMappingEffect>>;

package/dist/effects/ToneMapping.js

@@ -1,50 +1,6 @@
-import { jsx } from "react/jsx-runtime";
-import { ToneMappingEffect, EffectAttribute } from "postprocessing";
-import { forwardRef, useMemo, useEffect } from "react";
-const ToneMapping = forwardRef(function ToneMapping2({
-  blendFunction,
-  adaptive,
-  mode,
-  resolution,
-  maxLuminance,
-  whitePoint,
-  middleGrey,
-  minLuminance,
-  averageLuminance,
-  adaptationRate,
-  ...props
-}, ref) {
-  const effect = useMemo(
-    () => new ToneMappingEffect({
-      blendFunction,
-      adaptive,
-      mode,
-      resolution,
-      maxLuminance,
-      whitePoint,
-      middleGrey,
-      minLuminance,
-      averageLuminance,
-      adaptationRate
-    }),
-    [
-      blendFunction,
-      adaptive,
-      mode,
-      resolution,
-      maxLuminance,
-      whitePoint,
-      middleGrey,
-      minLuminance,
-      averageLuminance,
-      adaptationRate
-    ]
-  );
-  useEffect(() => {
-    effect.dispose();
-  }, [effect]);
-  return /* @__PURE__ */ jsx("primitive", { ...props, ref, object: effect, attributes: EffectAttribute.CONVOLUTION });
-});
+import { ToneMappingEffect } from "postprocessing";
+import { wrapEffect } from "../util.js";
+const ToneMapping = wrapEffect(ToneMappingEffect);
 export {
   ToneMapping
 };

package/dist/effects/ToneMapping.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToneMapping.js","sources":["../../src/effects/ToneMapping.tsx"],"sourcesContent":["import { ToneMappingEffect, EffectAttribute } from 'postprocessing'\nimport { EffectProps } from '../util'\nimport { forwardRef, useEffect, useMemo } from 'react'\n\nexport type ToneMappingProps = EffectProps<typeof ToneMappingEffect>\n\nexport const ToneMapping = forwardRef<ToneMappingEffect, ToneMappingProps>(function ToneMapping(\n  {\n    blendFunction,\n    adaptive,\n    mode,\n    resolution,\n    maxLuminance,\n    whitePoint,\n    middleGrey,\n    minLuminance,\n    averageLuminance,\n    adaptationRate,\n    ...props\n  },\n  ref\n) {\n  const effect = useMemo(\n    () =>\n      new ToneMappingEffect({\n        blendFunction,\n        adaptive,\n        mode,\n        resolution,\n        maxLuminance,\n        whitePoint,\n        middleGrey,\n        minLuminance,\n        averageLuminance,\n        adaptationRate,\n      }),\n    [\n      blendFunction,\n      adaptive,\n      mode,\n      resolution,\n      maxLuminance,\n      whitePoint,\n      middleGrey,\n      minLuminance,\n      averageLuminance,\n      adaptationRate,\n    ]\n  )\n\n  useEffect(() => {\n    effect.dispose()\n  }, [effect])\n\n  return <primitive {...props} ref={ref} object={effect} attributes={EffectAttribute.CONVOLUTION} />\n})\n"],"names":["ToneMapping"],"mappings":";;;AAMa,MAAA,cAAc,WAAgD,SAASA,aAClF;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,SAAS;AAAA,IACb,MACE,IAAI,kBAAkB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,CACD;AAAA,IACH;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAGF,YAAU,MAAM;AACd,WAAO,QAAQ;AAAA,EAAA,GACd,CAAC,MAAM,CAAC;AAEJ,SAAA,oBAAC,eAAW,GAAG,OAAO,KAAU,QAAQ,QAAQ,YAAY,gBAAgB,YAAa,CAAA;AAClG,CAAC;"}
+{"version":3,"file":"ToneMapping.js","sources":["../../src/effects/ToneMapping.tsx"],"sourcesContent":["import { ToneMappingEffect } from 'postprocessing'\nimport { type EffectProps, wrapEffect } from '../util'\n\nexport type ToneMappingProps = EffectProps<typeof ToneMappingEffect>\n\nexport const ToneMapping = wrapEffect(ToneMappingEffect)\n"],"names":[],"mappings":";;AAKa,MAAA,cAAc,WAAW,iBAAiB;"}

package/dist/effects/Water.cjs

@@ -4,19 +4,24 @@ const THREE = require("three");
 const postprocessing = require("postprocessing");
 const util = require("../util.cjs");
 const WaterShader = {
-  fragmentShader: `
-  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 * .7; 
-    float y = vUv.x * frequency + time * .3;
-    vUv.x += cos(x+y) * amplitude * cos(y);
-    vUv.y += sin(x-y) * amplitude * cos(y);
-    vec4 rgba = texture2D(inputBuffer, vUv);
-    outputColor = rgba;
-  }`
+  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 postprocessing.Effect {
   constructor({ blendFunction = postprocessing.BlendFunction.NORMAL, factor = 0 } = {}) {

package/dist/effects/Water.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Water.cjs","sources":["../../src/effects/Water.tsx"],"sourcesContent":["import { Uniform } from 'three'\nimport { BlendFunction, Effect, EffectAttribute } from 'postprocessing'\nimport { wrapEffect } from '../util'\n\nconst WaterShader = {\n  fragmentShader: `\n  uniform float factor;\n  void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n    vec2 vUv = uv;\n    float frequency = 6.0 * factor;\n    float amplitude = 0.015 * factor;\n    float x = vUv.y * frequency + time * .7; \n    float y = vUv.x * frequency + time * .3;\n    vUv.x += cos(x+y) * amplitude * cos(y);\n    vUv.y += sin(x-y) * amplitude * cos(y);\n    vec4 rgba = texture2D(inputBuffer, vUv);\n    outputColor = rgba;\n  }`\n}\n\nexport class WaterEffectImpl extends Effect {\n  constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {\n    super('WaterEffect', WaterShader.fragmentShader, {\n      blendFunction,\n      attributes: EffectAttribute.CONVOLUTION,\n      uniforms: new Map<string, Uniform<number | number[]>>([['factor', new Uniform(factor)]])\n    })\n  }\n}\n\nexport const WaterEffect = wrapEffect(WaterEffectImpl, { blendFunction: BlendFunction.NORMAL })\n"],"names":["Effect","BlendFunction","EffectAttribute","Uniform","wrapEffect"],"mappings":";;;;;AAIA,MAAM,cAAc;AAAA,EAClB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAalB;AAEO,MAAM,wBAAwBA,eAAAA,OAAO;AAAA,EAC1C,YAAY,EAAE,gBAAgBC,eAAA,cAAc,QAAQ,SAAS,EAAM,IAAA,IAAI;AAC/D,UAAA,eAAe,YAAY,gBAAgB;AAAA,MAC/C;AAAA,MACA,YAAYC,eAAgB,gBAAA;AAAA,MAC5B,UAAc,oBAAA,IAAwC,CAAC,CAAC,UAAU,IAAIC,cAAQ,MAAM,CAAC,CAAC,CAAC;AAAA,IAAA,CACxF;AAAA,EACH;AACF;AAEO,MAAM,cAAcC,KAAW,WAAA,iBAAiB,EAAE,eAAeH,eAAAA,cAAc,OAAQ,CAAA;;;"}
+{"version":3,"file":"Water.cjs","sources":["../../src/effects/Water.tsx"],"sourcesContent":["import { Uniform } from 'three'\nimport { BlendFunction, Effect, EffectAttribute } from 'postprocessing'\nimport { wrapEffect } from '../util'\n\nconst WaterShader = {\n  fragmentShader: /* glsl */ `\n    uniform float factor;\n\n    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n      vec2 vUv = uv;\n      float frequency = 6.0 * factor;\n      float amplitude = 0.015 * factor;\n      float x = vUv.y * frequency + time * 0.7; \n      float y = vUv.x * frequency + time * 0.3;\n      vUv.x += cos(x + y) * amplitude * cos(y);\n      vUv.y += sin(x - y) * amplitude * cos(y);\n      vec4 rgba = texture(inputBuffer, vUv);\n      outputColor = rgba;\n    }\n  `,\n}\n\nexport class WaterEffectImpl extends Effect {\n  constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {\n    super('WaterEffect', WaterShader.fragmentShader, {\n      blendFunction,\n      attributes: EffectAttribute.CONVOLUTION,\n      uniforms: new Map<string, Uniform<number | number[]>>([['factor', new Uniform(factor)]]),\n    })\n  }\n}\n\nexport const WaterEffect = wrapEffect(WaterEffectImpl, { blendFunction: BlendFunction.NORMAL })\n"],"names":["Effect","BlendFunction","EffectAttribute","Uniform","wrapEffect"],"mappings":";;;;;AAIA,MAAM,cAAc;AAAA,EAClB;AAAA;AAAA,IAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe7B;AAEO,MAAM,wBAAwBA,eAAAA,OAAO;AAAA,EAC1C,YAAY,EAAE,gBAAgBC,eAAA,cAAc,QAAQ,SAAS,EAAM,IAAA,IAAI;AAC/D,UAAA,eAAe,YAAY,gBAAgB;AAAA,MAC/C;AAAA,MACA,YAAYC,eAAgB,gBAAA;AAAA,MAC5B,UAAc,oBAAA,IAAwC,CAAC,CAAC,UAAU,IAAIC,cAAQ,MAAM,CAAC,CAAC,CAAC;AAAA,IAAA,CACxF;AAAA,EACH;AACF;AAEO,MAAM,cAAcC,KAAW,WAAA,iBAAiB,EAAE,eAAeH,eAAAA,cAAc,OAAQ,CAAA;;;"}

package/dist/effects/Water.js

@@ -2,19 +2,24 @@ import { Uniform } from "three";
 import { Effect, EffectAttribute, BlendFunction } from "postprocessing";
 import { wrapEffect } from "../util.js";
 const WaterShader = {
-  fragmentShader: `
-  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 * .7; 
-    float y = vUv.x * frequency + time * .3;
-    vUv.x += cos(x+y) * amplitude * cos(y);
-    vUv.y += sin(x-y) * amplitude * cos(y);
-    vec4 rgba = texture2D(inputBuffer, vUv);
-    outputColor = rgba;
-  }`
+  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 } = {}) {

package/dist/effects/Water.js.map

@@ -1 +1 @@
-{"version":3,"file":"Water.js","sources":["../../src/effects/Water.tsx"],"sourcesContent":["import { Uniform } from 'three'\nimport { BlendFunction, Effect, EffectAttribute } from 'postprocessing'\nimport { wrapEffect } from '../util'\n\nconst WaterShader = {\n  fragmentShader: `\n  uniform float factor;\n  void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n    vec2 vUv = uv;\n    float frequency = 6.0 * factor;\n    float amplitude = 0.015 * factor;\n    float x = vUv.y * frequency + time * .7; \n    float y = vUv.x * frequency + time * .3;\n    vUv.x += cos(x+y) * amplitude * cos(y);\n    vUv.y += sin(x-y) * amplitude * cos(y);\n    vec4 rgba = texture2D(inputBuffer, vUv);\n    outputColor = rgba;\n  }`\n}\n\nexport class WaterEffectImpl extends Effect {\n  constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {\n    super('WaterEffect', WaterShader.fragmentShader, {\n      blendFunction,\n      attributes: EffectAttribute.CONVOLUTION,\n      uniforms: new Map<string, Uniform<number | number[]>>([['factor', new Uniform(factor)]])\n    })\n  }\n}\n\nexport const WaterEffect = wrapEffect(WaterEffectImpl, { blendFunction: BlendFunction.NORMAL })\n"],"names":[],"mappings":";;;AAIA,MAAM,cAAc;AAAA,EAClB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAalB;AAEO,MAAM,wBAAwB,OAAO;AAAA,EAC1C,YAAY,EAAE,gBAAgB,cAAc,QAAQ,SAAS,EAAM,IAAA,IAAI;AAC/D,UAAA,eAAe,YAAY,gBAAgB;AAAA,MAC/C;AAAA,MACA,YAAY,gBAAgB;AAAA,MAC5B,UAAc,oBAAA,IAAwC,CAAC,CAAC,UAAU,IAAI,QAAQ,MAAM,CAAC,CAAC,CAAC;AAAA,IAAA,CACxF;AAAA,EACH;AACF;AAEO,MAAM,cAAc,WAAW,iBAAiB,EAAE,eAAe,cAAc,OAAQ,CAAA;"}
+{"version":3,"file":"Water.js","sources":["../../src/effects/Water.tsx"],"sourcesContent":["import { Uniform } from 'three'\nimport { BlendFunction, Effect, EffectAttribute } from 'postprocessing'\nimport { wrapEffect } from '../util'\n\nconst WaterShader = {\n  fragmentShader: /* glsl */ `\n    uniform float factor;\n\n    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n      vec2 vUv = uv;\n      float frequency = 6.0 * factor;\n      float amplitude = 0.015 * factor;\n      float x = vUv.y * frequency + time * 0.7; \n      float y = vUv.x * frequency + time * 0.3;\n      vUv.x += cos(x + y) * amplitude * cos(y);\n      vUv.y += sin(x - y) * amplitude * cos(y);\n      vec4 rgba = texture(inputBuffer, vUv);\n      outputColor = rgba;\n    }\n  `,\n}\n\nexport class WaterEffectImpl extends Effect {\n  constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {\n    super('WaterEffect', WaterShader.fragmentShader, {\n      blendFunction,\n      attributes: EffectAttribute.CONVOLUTION,\n      uniforms: new Map<string, Uniform<number | number[]>>([['factor', new Uniform(factor)]]),\n    })\n  }\n}\n\nexport const WaterEffect = wrapEffect(WaterEffectImpl, { blendFunction: BlendFunction.NORMAL })\n"],"names":[],"mappings":";;;AAIA,MAAM,cAAc;AAAA,EAClB;AAAA;AAAA,IAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe7B;AAEO,MAAM,wBAAwB,OAAO;AAAA,EAC1C,YAAY,EAAE,gBAAgB,cAAc,QAAQ,SAAS,EAAM,IAAA,IAAI;AAC/D,UAAA,eAAe,YAAY,gBAAgB;AAAA,MAC/C;AAAA,MACA,YAAY,gBAAgB;AAAA,MAC5B,UAAc,oBAAA,IAAwC,CAAC,CAAC,UAAU,IAAI,QAAQ,MAAM,CAAC,CAAC,CAAC;AAAA,IAAA,CACxF;AAAA,EACH;AACF;AAEO,MAAM,cAAc,WAAW,iBAAiB,EAAE,eAAe,cAAc,OAAQ,CAAA;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/postprocessing",
-  "version": "2.16.3",
+  "version": "2.16.4",
   "description": "postprocessing wrapper for React and @react-three/fiber",
   "keywords": [
     "postprocessing",
@@ -39,7 +39,7 @@
     "prepare": "yarn build",
     "eslint": "eslint . --fix --ext=js,ts,jsx,tsx",
     "eslint:ci": "eslint . --ext=js,ts,jsx,tsx",
-    "test": "echo no tests yet",
+    "test": "vitest run",
     "typecheck": "tsc --noEmit false --strict --jsx react",
     "release": "semantic-release",
     "storybook": "storybook dev -p 6006",
@@ -85,7 +85,8 @@
     "storybook": "^7.0.10",
     "three": "^0.151.3",
     "typescript": "^5.0.4",
-    "vite": "^4.3.5"
+    "vite": "^4.3.5",
+    "vitest": "^2.1.8"
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.0",