@react-three/postprocessing 3.0.4 → 3.0.5

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 { ReactThreeFiber, applyProps, useThree } from '@react-three/fiber'
+import { Ref, useLayoutEffect, useMemo } from 'react'
+/* @ts-ignore */
+import { N8AOPostPass } from 'n8ao'
+import { useDispose } from '../util'
+
+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
+  ref?: Ref<N8AOPostPass>
+}
+
+export function N8AO({
+  halfRes,
+  screenSpaceRadius,
+  quality,
+  depthAwareUpsampling = true,
+  aoRadius = 5,
+  aoSamples = 16,
+  denoiseSamples = 4,
+  denoiseRadius = 12,
+  distanceFalloff = 1,
+  intensity = 1,
+  color,
+  renderMode = 0,
+  ref,
+}: N8AOProps) {
+  const { camera, scene } = useThree()
+  const effect = useMemo(() => new N8AOPostPass(scene, camera), [camera, scene])
+
+  // TODO: implement dispose upstream; this effect has memory leaks without
+  useDispose(effect)
+
+  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 { BlendFunction, NoiseEffect } from 'postprocessing'
+import { wrapEffect } from '../wrapEffect'
+
+export const Noise = /* @__PURE__ */ wrapEffect(NoiseEffect, { blendFunction: BlendFunction.COLOR_DODGE })

package/src/effects/Outline.tsx

@@ -1,117 +1,85 @@
-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, use, useMemo } from 'react'
+import { Object3D } from 'three'
+import { EffectComposerContext } from '../EffectComposer'
+import { EMPTY_ARRAY, useDispose, useSelectionSync } from '../util'
+
+type ObjectRef = RefObject<Object3D | null>
+
+export type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &
+  Partial<{
+    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]
+    selectionLayer: number
+    ref?: Ref<OutlineEffect>
+  }>
+
+export function Outline({
+  selection = EMPTY_ARRAY,
+  selectionLayer = 10,
+  blendFunction,
+  patternTexture,
+  patternScale,
+  edgeStrength,
+  pulseSpeed,
+  visibleEdgeColor,
+  hiddenEdgeColor,
+  multisampling,
+  resolutionScale,
+  resolutionX,
+  resolutionY,
+  width,
+  height,
+  kernelSize,
+  blur,
+  xRay,
+  ref,
+}: OutlineProps) {
+  const { scene, camera } = use(EffectComposerContext)
+
+  const effect = useMemo(
+    () =>
+      new OutlineEffect(scene, camera, {
+        blendFunction,
+        patternTexture,
+        patternScale,
+        edgeStrength,
+        pulseSpeed,
+        visibleEdgeColor,
+        hiddenEdgeColor,
+        multisampling,
+        resolutionScale,
+        resolutionX,
+        resolutionY,
+        width,
+        height,
+        kernelSize,
+        blur,
+        xRay,
+      }),
+    [
+      blendFunction,
+      patternTexture,
+      patternScale,
+      edgeStrength,
+      pulseSpeed,
+      visibleEdgeColor,
+      hiddenEdgeColor,
+      multisampling,
+      resolutionScale,
+      resolutionX,
+      resolutionY,
+      width,
+      height,
+      kernelSize,
+      blur,
+      xRay,
+      camera,
+      scene,
+    ]
+  )
+
+  useSelectionSync(effect, selection, selectionLayer)
+  useDispose(effect)
+
+  return <primitive ref={ref} object={effect} />
+}

package/src/effects/Pixelation.tsx

@@ -1,15 +1,17 @@
-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 { PixelationEffect } from 'postprocessing'
+import { Ref, useMemo } from 'react'
+import { useDispose } from '../util'
+
+export type PixelationProps = {
+  granularity?: number
+  ref?: Ref<PixelationEffect>
+}
+
+export function Pixelation({ granularity = 5, ref }: PixelationProps) {
+  /** 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])
+
+  useDispose(effect)
+
+  return <primitive ref={ref} object={effect} />
+}