@react-three/postprocessing 3.0.2 → 3.0.3

package/src/effects/N8AO.tsx

@@ -1,81 +1,81 @@
-// From https://github.com/N8python/n8ao
-// https://twitter.com/N8Programs/status/1660996748485984261
-
-import { Ref, forwardRef, useLayoutEffect, useMemo } from 'react'
-/* @ts-ignore */
-import { N8AOPostPass } from 'n8ao'
-import { useThree, ReactThreeFiber, applyProps } from '@react-three/fiber'
-
-export type N8AOProps = {
-  aoRadius?: number
-  distanceFalloff?: number
-  intensity?: number
-  quality?: 'performance' | 'low' | 'medium' | 'high' | 'ultra'
-  aoSamples?: number
-  denoiseSamples?: number
-  denoiseRadius?: number
-  color?: ReactThreeFiber.Color
-  halfRes?: boolean
-  depthAwareUpsampling?: boolean
-  screenSpaceRadius?: boolean
-  renderMode?: 0 | 1 | 2 | 3 | 4
-}
-
-export const N8AO = /* @__PURE__ */ forwardRef<N8AOPostPass, N8AOProps>(
-  (
-    {
-      halfRes,
-      screenSpaceRadius,
-      quality,
-      depthAwareUpsampling = true,
-      aoRadius = 5,
-      aoSamples = 16,
-      denoiseSamples = 4,
-      denoiseRadius = 12,
-      distanceFalloff = 1,
-      intensity = 1,
-      color,
-      renderMode = 0,
-    },
-    ref: Ref<N8AOPostPass>
-  ) => {
-    const { camera, scene } = useThree()
-    const effect = useMemo(() => new N8AOPostPass(scene, camera), [camera, scene])
-
-    // TODO: implement dispose upstream; this effect has memory leaks without
-    useLayoutEffect(() => {
-      applyProps(effect.configuration, {
-        color,
-        aoRadius,
-        distanceFalloff,
-        intensity,
-        aoSamples,
-        denoiseSamples,
-        denoiseRadius,
-        screenSpaceRadius,
-        renderMode,
-        halfRes,
-        depthAwareUpsampling,
-      })
-    }, [
-      screenSpaceRadius,
-      color,
-      aoRadius,
-      distanceFalloff,
-      intensity,
-      aoSamples,
-      denoiseSamples,
-      denoiseRadius,
-      renderMode,
-      halfRes,
-      depthAwareUpsampling,
-      effect,
-    ])
-
-    useLayoutEffect(() => {
-      if (quality) effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1))
-    }, [effect, quality])
-
-    return <primitive ref={ref} object={effect} />
-  }
-)
+// From https://github.com/N8python/n8ao
+// https://twitter.com/N8Programs/status/1660996748485984261
+
+import { Ref, forwardRef, useLayoutEffect, useMemo } from 'react'
+/* @ts-ignore */
+import { N8AOPostPass } from 'n8ao'
+import { useThree, ReactThreeFiber, applyProps } from '@react-three/fiber'
+
+export type N8AOProps = {
+  aoRadius?: number
+  distanceFalloff?: number
+  intensity?: number
+  quality?: 'performance' | 'low' | 'medium' | 'high' | 'ultra'
+  aoSamples?: number
+  denoiseSamples?: number
+  denoiseRadius?: number
+  color?: ReactThreeFiber.Color
+  halfRes?: boolean
+  depthAwareUpsampling?: boolean
+  screenSpaceRadius?: boolean
+  renderMode?: 0 | 1 | 2 | 3 | 4
+}
+
+export const N8AO = /* @__PURE__ */ forwardRef<N8AOPostPass, N8AOProps>(
+  (
+    {
+      halfRes,
+      screenSpaceRadius,
+      quality,
+      depthAwareUpsampling = true,
+      aoRadius = 5,
+      aoSamples = 16,
+      denoiseSamples = 4,
+      denoiseRadius = 12,
+      distanceFalloff = 1,
+      intensity = 1,
+      color,
+      renderMode = 0,
+    },
+    ref: Ref<N8AOPostPass>
+  ) => {
+    const { camera, scene } = useThree()
+    const effect = useMemo(() => new N8AOPostPass(scene, camera), [camera, scene])
+
+    // TODO: implement dispose upstream; this effect has memory leaks without
+    useLayoutEffect(() => {
+      applyProps(effect.configuration, {
+        color,
+        aoRadius,
+        distanceFalloff,
+        intensity,
+        aoSamples,
+        denoiseSamples,
+        denoiseRadius,
+        screenSpaceRadius,
+        renderMode,
+        halfRes,
+        depthAwareUpsampling,
+      })
+    }, [
+      screenSpaceRadius,
+      color,
+      aoRadius,
+      distanceFalloff,
+      intensity,
+      aoSamples,
+      denoiseSamples,
+      denoiseRadius,
+      renderMode,
+      halfRes,
+      depthAwareUpsampling,
+      effect,
+    ])
+
+    useLayoutEffect(() => {
+      if (quality) effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1))
+    }, [effect, quality])
+
+    return <primitive ref={ref} object={effect} />
+  }
+)

package/src/effects/Noise.tsx

@@ -1,4 +1,4 @@
-import { NoiseEffect, BlendFunction } from 'postprocessing'
-import { wrapEffect } from '../util'
-
-export const Noise = /* @__PURE__ */ wrapEffect(NoiseEffect, { blendFunction: BlendFunction.COLOR_DODGE })
+import { NoiseEffect, BlendFunction } from 'postprocessing'
+import { wrapEffect } from '../util'
+
+export const Noise = /* @__PURE__ */ wrapEffect(NoiseEffect, { blendFunction: BlendFunction.COLOR_DODGE })

package/src/effects/Outline.tsx

@@ -1,117 +1,117 @@
-import { OutlineEffect } from 'postprocessing'
-import { Ref, RefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'
-import { Object3D } from 'three'
-import { useThree } from '@react-three/fiber'
-import { EffectComposerContext } from '../EffectComposer'
-import { selectionContext } from '../Selection'
-import { resolveRef } from '../util'
-
-type ObjectRef = RefObject<Object3D>
-
-export type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &
-  Partial<{
-    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]
-    selectionLayer: number
-  }>
-
-export const Outline = /* @__PURE__ */ forwardRef(function Outline(
-  {
-    selection = [],
-    selectionLayer = 10,
-    blendFunction,
-    patternTexture,
-    edgeStrength,
-    pulseSpeed,
-    visibleEdgeColor,
-    hiddenEdgeColor,
-    width,
-    height,
-    kernelSize,
-    blur,
-    xRay,
-    ...props
-  }: OutlineProps,
-  forwardRef: Ref<OutlineEffect>
-) {
-  const invalidate = useThree((state) => state.invalidate)
-  const { scene, camera } = useContext(EffectComposerContext)
-
-  const effect = useMemo(
-    () =>
-      new OutlineEffect(scene, camera, {
-        blendFunction,
-        patternTexture,
-        edgeStrength,
-        pulseSpeed,
-        visibleEdgeColor,
-        hiddenEdgeColor,
-        width,
-        height,
-        kernelSize,
-        blur,
-        xRay,
-        ...props,
-      }),
-    // NOTE: `props` is an unstable reference, so we can't memoize it
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      blendFunction,
-      blur,
-      camera,
-      edgeStrength,
-      height,
-      hiddenEdgeColor,
-      kernelSize,
-      patternTexture,
-      pulseSpeed,
-      scene,
-      visibleEdgeColor,
-      width,
-      xRay,
-    ]
-  )
-
-  const api = useContext(selectionContext)
-
-  useEffect(() => {
-    // Do not allow array selection if declarative selection is active
-    // TODO: array selection should probably be deprecated altogether
-    if (!api && selection) {
-      effect.selection.set(
-        Array.isArray(selection) ? (selection as Object3D[]).map(resolveRef) : [resolveRef(selection) as Object3D]
-      )
-      invalidate()
-      return () => {
-        effect.selection.clear()
-        invalidate()
-      }
-    }
-  }, [effect, selection, api, invalidate])
-
-  useEffect(() => {
-    effect.selectionLayer = selectionLayer
-    invalidate()
-  }, [effect, invalidate, selectionLayer])
-
-  const ref = useRef<OutlineEffect>(undefined)
-  useEffect(() => {
-    if (api && api.enabled) {
-      if (api.selected?.length) {
-        effect.selection.set(api.selected)
-        invalidate()
-        return () => {
-          effect.selection.clear()
-          invalidate()
-        }
-      }
-    }
-  }, [api, effect.selection, invalidate])
-
-  useEffect(() => {
-    return () => {
-      effect.dispose()
-    }
-  }, [effect])
-
-  return <primitive ref={forwardRef} object={effect} />
-})
+import { OutlineEffect } from 'postprocessing'
+import { Ref, RefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'
+import { Object3D } from 'three'
+import { useThree } from '@react-three/fiber'
+import { EffectComposerContext } from '../EffectComposer'
+import { selectionContext } from '../Selection'
+import { resolveRef } from '../util'
+
+type ObjectRef = RefObject<Object3D>
+
+export type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &
+  Partial<{
+    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]
+    selectionLayer: number
+  }>
+
+export const Outline = /* @__PURE__ */ forwardRef(function Outline(
+  {
+    selection = [],
+    selectionLayer = 10,
+    blendFunction,
+    patternTexture,
+    edgeStrength,
+    pulseSpeed,
+    visibleEdgeColor,
+    hiddenEdgeColor,
+    width,
+    height,
+    kernelSize,
+    blur,
+    xRay,
+    ...props
+  }: OutlineProps,
+  forwardRef: Ref<OutlineEffect>
+) {
+  const invalidate = useThree((state) => state.invalidate)
+  const { scene, camera } = useContext(EffectComposerContext)
+
+  const effect = useMemo(
+    () =>
+      new OutlineEffect(scene, camera, {
+        blendFunction,
+        patternTexture,
+        edgeStrength,
+        pulseSpeed,
+        visibleEdgeColor,
+        hiddenEdgeColor,
+        width,
+        height,
+        kernelSize,
+        blur,
+        xRay,
+        ...props,
+      }),
+    // NOTE: `props` is an unstable reference, so we can't memoize it
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      blendFunction,
+      blur,
+      camera,
+      edgeStrength,
+      height,
+      hiddenEdgeColor,
+      kernelSize,
+      patternTexture,
+      pulseSpeed,
+      scene,
+      visibleEdgeColor,
+      width,
+      xRay,
+    ]
+  )
+
+  const api = useContext(selectionContext)
+
+  useEffect(() => {
+    // Do not allow array selection if declarative selection is active
+    // TODO: array selection should probably be deprecated altogether
+    if (!api && selection) {
+      effect.selection.set(
+        Array.isArray(selection) ? (selection as Object3D[]).map(resolveRef) : [resolveRef(selection) as Object3D]
+      )
+      invalidate()
+      return () => {
+        effect.selection.clear()
+        invalidate()
+      }
+    }
+  }, [effect, selection, api, invalidate])
+
+  useEffect(() => {
+    effect.selectionLayer = selectionLayer
+    invalidate()
+  }, [effect, invalidate, selectionLayer])
+
+  const ref = useRef<OutlineEffect>(undefined)
+  useEffect(() => {
+    if (api && api.enabled) {
+      if (api.selected?.length) {
+        effect.selection.set(api.selected)
+        invalidate()
+        return () => {
+          effect.selection.clear()
+          invalidate()
+        }
+      }
+    }
+  }, [api, effect.selection, invalidate])
+
+  useEffect(() => {
+    return () => {
+      effect.dispose()
+    }
+  }, [effect])
+
+  return <primitive ref={forwardRef} object={effect} />
+})

package/src/effects/Pixelation.tsx

@@ -1,15 +1,15 @@
-import { forwardRef, useMemo, Ref } from 'react'
-import { PixelationEffect } from 'postprocessing'
-
-export type PixelationProps = {
-  granularity?: number
-}
-
-export const Pixelation = /* @__PURE__ */ forwardRef<PixelationEffect, PixelationProps>(function Pixelation(
-  { granularity = 5 }: PixelationProps,
-  ref: Ref<PixelationEffect>
-) {
-  /** Because GlitchEffect granularity is not an object but a number, we have to define a custom prop "granularity" */
-  const effect = useMemo(() => new PixelationEffect(granularity), [granularity])
-  return <primitive ref={ref} object={effect} dispose={null} />
-})
+import { forwardRef, useMemo, Ref } from 'react'
+import { PixelationEffect } from 'postprocessing'
+
+export type PixelationProps = {
+  granularity?: number
+}
+
+export const Pixelation = /* @__PURE__ */ forwardRef<PixelationEffect, PixelationProps>(function Pixelation(
+  { granularity = 5 }: PixelationProps,
+  ref: Ref<PixelationEffect>
+) {
+  /** Because GlitchEffect granularity is not an object but a number, we have to define a custom prop "granularity" */
+  const effect = useMemo(() => new PixelationEffect(granularity), [granularity])
+  return <primitive ref={ref} object={effect} dispose={null} />
+})