@react-three/postprocessing 3.0.3 → 3.0.5

package/src/effects/ChromaticAberration.tsx

@@ -1,5 +1,30 @@
-import { ChromaticAberrationEffect } from 'postprocessing'
-import { type EffectProps, wrapEffect } from '../util'
-
-export type ChromaticAberrationProps = EffectProps<typeof ChromaticAberrationEffect>
-export const ChromaticAberration = /* @__PURE__ */ wrapEffect(ChromaticAberrationEffect)
+import type { ReactThreeFiber } from '@react-three/fiber'
+import { ChromaticAberrationEffect } from 'postprocessing'
+import type { Ref } from 'react'
+import { useMemo } from 'react'
+import { useDispose, useVector2 } from '../util'
+
+export type ChromaticAberrationProps = Omit<
+  Partial<ConstructorParameters<typeof ChromaticAberrationEffect>[0]>,
+  'offset'
+> & {
+  ref?: Ref<ChromaticAberrationEffect>
+  offset?: ReactThreeFiber.Vector2
+}
+
+export function ChromaticAberration({ ref, ...props }: ChromaticAberrationProps) {
+  const offset = useVector2(props, 'offset')
+
+  const effect = useMemo(
+    () =>
+      new ChromaticAberrationEffect({
+        ...props,
+        offset,
+      } as ConstructorParameters<typeof ChromaticAberrationEffect>[0]),
+    [offset, props]
+  )
+
+  useDispose(effect)
+
+  return <primitive object={effect} ref={ref} />
+}

package/src/effects/ColorAverage.tsx

@@ -1,15 +1,17 @@
-import { ColorAverageEffect, BlendFunction } from 'postprocessing'
-import React, { Ref, forwardRef, useMemo } from 'react'
-
-export type ColorAverageProps = Partial<{
-  blendFunction: BlendFunction
-}>
-
-export const ColorAverage = /* @__PURE__ */ forwardRef<ColorAverageEffect, ColorAverageProps>(function ColorAverage(
-  { blendFunction = BlendFunction.NORMAL }: ColorAverageProps,
-  ref: Ref<ColorAverageEffect>
-) {
-  /** Because ColorAverage blendFunction is not an object but a number, we have to define a custom prop "blendFunction" */
-  const effect = useMemo(() => new ColorAverageEffect(blendFunction), [blendFunction])
-  return <primitive ref={ref} object={effect} dispose={null} />
-})
+import { BlendFunction, ColorAverageEffect } from 'postprocessing'
+import type { Ref } from 'react'
+import { useMemo } from 'react'
+import { useDispose } from '../util'
+
+export type ColorAverageProps = {
+  blendFunction?: BlendFunction
+  ref?: Ref<ColorAverageEffect>
+}
+
+export function ColorAverage({ blendFunction = BlendFunction.NORMAL, ref }: ColorAverageProps) {
+  const effect = useMemo(() => new ColorAverageEffect(blendFunction), [blendFunction])
+
+  useDispose(effect)
+
+  return <primitive object={effect} ref={ref} />
+}

package/src/effects/ColorDepth.tsx

@@ -1,4 +1,4 @@
-import { ColorDepthEffect } from 'postprocessing'
-import { wrapEffect } from '../util'
-
-export const ColorDepth = /* @__PURE__ */ wrapEffect(ColorDepthEffect)
+import { ColorDepthEffect } from 'postprocessing'
+import { wrapEffect } from '../wrapEffect'
+
+export const ColorDepth = /* @__PURE__ */ wrapEffect(ColorDepthEffect)

package/src/effects/Depth.tsx

@@ -1,4 +1,4 @@
-import { DepthEffect } from 'postprocessing'
-import { wrapEffect } from '../util'
-
-export const Depth = /* @__PURE__ */ wrapEffect(DepthEffect)
+import { DepthEffect } from 'postprocessing'
+import { wrapEffect } from '../wrapEffect'
+
+export const Depth = /* @__PURE__ */ wrapEffect(DepthEffect)

package/src/effects/DepthOfField.tsx

@@ -1,89 +1,87 @@
-import { DepthOfFieldEffect, MaskFunction } from 'postprocessing'
-import { Ref, forwardRef, useMemo, useEffect, useContext } from 'react'
-import { ReactThreeFiber } from '@react-three/fiber'
-import { type DepthPackingStrategies, type Texture, Vector3 } from 'three'
-import { EffectComposerContext } from '../EffectComposer'
-
-type DOFProps = ConstructorParameters<typeof DepthOfFieldEffect>[1] &
-  Partial<{
-    target: ReactThreeFiber.Vector3
-    depthTexture: {
-      texture: Texture
-      // TODO: narrow to DepthPackingStrategies
-      packing: number
-    }
-    // TODO: not used
-    blur: number
-  }>
-
-export const DepthOfField = /* @__PURE__ */ forwardRef(function DepthOfField(
-  {
-    blendFunction,
-    worldFocusDistance,
-    worldFocusRange,
-    focusDistance,
-    focusRange,
-    focalLength,
-    bokehScale,
-    resolutionScale,
-    resolutionX,
-    resolutionY,
-    width,
-    height,
-    target,
-    depthTexture,
-    ...props
-  }: DOFProps,
-  ref: Ref<DepthOfFieldEffect>
-) {
-  const { camera } = useContext(EffectComposerContext)
-  const autoFocus = target != null
-  const effect = useMemo(() => {
-    const effect = new DepthOfFieldEffect(camera, {
-      blendFunction,
-      worldFocusDistance,
-      worldFocusRange,
-      focusDistance,
-      focusRange,
-      focalLength,
-      bokehScale,
-      resolutionScale,
-      resolutionX,
-      resolutionY,
-      width,
-      height,
-    })
-    // Creating a target enables autofocus, R3F will set via props
-    if (autoFocus) effect.target = new Vector3()
-    // Depth texture for depth picking with optional packing strategy
-    if (depthTexture) effect.setDepthTexture(depthTexture.texture, depthTexture.packing as DepthPackingStrategies)
-    // Temporary fix that restores DOF 6.21.3 behavior, everything since then lets shapes leak through the blur
-    const maskPass = (effect as any).maskPass
-    maskPass.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA
-    return effect
-  }, [
-    camera,
-    blendFunction,
-    worldFocusDistance,
-    worldFocusRange,
-    focusDistance,
-    focusRange,
-    focalLength,
-    bokehScale,
-    resolutionScale,
-    resolutionX,
-    resolutionY,
-    width,
-    height,
-    autoFocus,
-    depthTexture,
-  ])
-
-  useEffect(() => {
-    return () => {
-      effect.dispose()
-    }
-  }, [effect])
-
-  return <primitive {...props} ref={ref} object={effect} target={target} />
-})
+import type { ReactThreeFiber } from '@react-three/fiber'
+import { DepthOfFieldEffect, MaskFunction } from 'postprocessing'
+import type { Ref } from 'react'
+import { use, useMemo } from 'react'
+import { type DepthPackingStrategies, type Texture, Vector3 } from 'three'
+import { EffectComposerContext } from '../EffectComposer'
+import { useDispose } from '../util'
+
+export type DepthOfFieldProps = ConstructorParameters<typeof DepthOfFieldEffect>[1] &
+  Partial<{
+    ref: Ref<DepthOfFieldEffect>
+    target: ReactThreeFiber.Vector3
+    depthTexture: {
+      texture: Texture
+      // TODO: narrow to DepthPackingStrategies
+      packing: number
+    }
+    // TODO: not used
+    blur: number
+  }>
+
+export function DepthOfField({
+  ref,
+  blendFunction,
+  worldFocusDistance,
+  worldFocusRange,
+  focusDistance,
+  focusRange,
+  focalLength,
+  bokehScale,
+  resolutionScale,
+  resolutionX,
+  resolutionY,
+  width,
+  height,
+  target,
+  depthTexture,
+  ...props
+}: DepthOfFieldProps) {
+  const { camera } = use(EffectComposerContext)
+  const autoFocus = target != null
+
+  const effect = useMemo(() => {
+    const effect = new DepthOfFieldEffect(camera, {
+      blendFunction,
+      worldFocusDistance,
+      worldFocusRange,
+      focusDistance,
+      focusRange,
+      focalLength,
+      bokehScale,
+      resolutionScale,
+      resolutionX,
+      resolutionY,
+      width,
+      height,
+    })
+    // Creating a target enables autofocus, R3F will set via props
+    if (autoFocus) effect.target = new Vector3()
+    // Depth texture for depth picking with optional packing strategy
+    if (depthTexture) effect.setDepthTexture(depthTexture.texture, depthTexture.packing as DepthPackingStrategies)
+    // Temporary fix that restores DOF 6.21.3 behavior, everything since then lets shapes leak through the blur
+    const maskPass = (effect as any).maskPass
+    maskPass.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA
+    return effect
+  }, [
+    camera,
+    blendFunction,
+    worldFocusDistance,
+    worldFocusRange,
+    focusDistance,
+    focusRange,
+    focalLength,
+    bokehScale,
+    resolutionScale,
+    resolutionX,
+    resolutionY,
+    width,
+    height,
+    autoFocus,
+    depthTexture,
+  ])
+
+  useDispose(effect)
+
+  return <primitive {...props} object={effect} ref={ref} target={target} />
+}

package/src/effects/DotScreen.tsx

@@ -1,4 +1,4 @@
-import { DotScreenEffect } from 'postprocessing'
-import { wrapEffect } from '../util'
-
-export const DotScreen = /* @__PURE__ */ wrapEffect(DotScreenEffect)
+import { DotScreenEffect } from 'postprocessing'
+import { wrapEffect } from '../wrapEffect'
+
+export const DotScreen = /* @__PURE__ */ wrapEffect(DotScreenEffect)

package/src/effects/FXAA.tsx

@@ -1,4 +1,4 @@
-import { FXAAEffect } from 'postprocessing'
-import { wrapEffect } from '../util'
-
-export const FXAA = /* @__PURE__ */ wrapEffect(FXAAEffect)
+import { FXAAEffect } from 'postprocessing'
+import { wrapEffect } from '../wrapEffect'
+
+export const FXAA = /* @__PURE__ */ wrapEffect(FXAAEffect)

package/src/effects/Glitch.tsx

@@ -1,40 +1,37 @@
-import { Vector2 } from 'three'
-import { GlitchEffect, GlitchMode } from 'postprocessing'
-import { Ref, forwardRef, useMemo, useLayoutEffect, useEffect } from 'react'
-import { ReactThreeFiber, useThree } from '@react-three/fiber'
-import { useVector2 } from '../util'
-
-export type GlitchProps = ConstructorParameters<typeof GlitchEffect>[0] &
-  Partial<{
-    mode: GlitchMode
-    active: boolean
-    delay: ReactThreeFiber.Vector2
-    duration: ReactThreeFiber.Vector2
-    chromaticAberrationOffset: ReactThreeFiber.Vector2
-    strength: ReactThreeFiber.Vector2
-  }>
-
-export const Glitch = /* @__PURE__ */ forwardRef<GlitchEffect, GlitchProps>(function Glitch(
-  { active = true, ...props }: GlitchProps,
-  ref: Ref<GlitchEffect>
-) {
-  const invalidate = useThree((state) => state.invalidate)
-  const delay = useVector2(props, 'delay')
-  const duration = useVector2(props, 'duration')
-  const strength = useVector2(props, 'strength')
-  const chromaticAberrationOffset = useVector2(props, 'chromaticAberrationOffset')
-  const effect = useMemo(
-    () => new GlitchEffect({ ...props, delay, duration, strength, chromaticAberrationOffset }),
-    [delay, duration, props, strength, chromaticAberrationOffset]
-  )
-  useLayoutEffect(() => {
-    effect.mode = active ? props.mode || GlitchMode.SPORADIC : GlitchMode.DISABLED
-    invalidate()
-  }, [active, effect, invalidate, props.mode])
-  useEffect(() => {
-    return () => {
-      effect.dispose?.()
-    }
-  }, [effect])
-  return <primitive ref={ref} object={effect} dispose={null} />
-})
+import { ReactThreeFiber, useThree } from '@react-three/fiber'
+import { GlitchEffect, GlitchMode } from 'postprocessing'
+import { Ref, useLayoutEffect, useMemo } from 'react'
+import { useDispose, useVector2 } from '../util'
+
+export type GlitchProps = ConstructorParameters<typeof GlitchEffect>[0] &
+  Partial<{
+    mode: GlitchMode
+    active: boolean
+    delay: ReactThreeFiber.Vector2
+    duration: ReactThreeFiber.Vector2
+    chromaticAberrationOffset: ReactThreeFiber.Vector2
+    strength: ReactThreeFiber.Vector2
+    ref?: Ref<GlitchEffect>
+  }>
+
+export function Glitch({ active = true, ref, ...props }: GlitchProps) {
+  const invalidate = useThree((state) => state.invalidate)
+  const delay = useVector2(props, 'delay')
+  const duration = useVector2(props, 'duration')
+  const strength = useVector2(props, 'strength')
+  const chromaticAberrationOffset = useVector2(props, 'chromaticAberrationOffset')
+
+  const effect = useMemo(
+    () => new GlitchEffect({ ...props, delay, duration, strength, chromaticAberrationOffset }),
+    [delay, duration, props, strength, chromaticAberrationOffset]
+  )
+
+  useLayoutEffect(() => {
+    effect.mode = active ? props.mode || GlitchMode.SPORADIC : GlitchMode.DISABLED
+    invalidate()
+  }, [active, effect, invalidate, props.mode])
+
+  useDispose(effect)
+
+  return <primitive ref={ref} object={effect} />
+}

package/src/effects/GodRays.tsx

@@ -1,16 +1,20 @@
-import { GodRaysEffect } from 'postprocessing'
-import React, { Ref, forwardRef, useMemo, useContext, useLayoutEffect } from 'react'
-import { Mesh, Points } from 'three'
-import { EffectComposerContext } from '../EffectComposer'
-import { resolveRef } from '../util'
-
-type GodRaysProps = ConstructorParameters<typeof GodRaysEffect>[2] & {
-  sun: Mesh | Points | React.RefObject<Mesh | Points>
-}
-
-export const GodRays = /* @__PURE__ */ forwardRef(function GodRays(props: GodRaysProps, ref: Ref<GodRaysEffect>) {
-  const { camera } = useContext(EffectComposerContext)
-  const effect = useMemo(() => new GodRaysEffect(camera, resolveRef(props.sun), props), [camera, props])
-  useLayoutEffect(() => void (effect.lightSource = resolveRef(props.sun)), [effect, props.sun])
-  return <primitive ref={ref} object={effect} dispose={null} />
-})
+import { GodRaysEffect } from 'postprocessing'
+import { Ref, RefObject, useContext, useLayoutEffect, useMemo } from 'react'
+import { Mesh, Points } from 'three'
+import { EffectComposerContext } from '../EffectComposer'
+import { resolveRef, useDispose } from '../util'
+
+type GodRaysProps = ConstructorParameters<typeof GodRaysEffect>[2] & {
+  sun: Mesh | Points | RefObject<Mesh | Points>
+  ref?: Ref<GodRaysEffect>
+}
+
+export function GodRays({ ref, ...props }: GodRaysProps) {
+  const { camera } = useContext(EffectComposerContext)
+  const effect = useMemo(() => new GodRaysEffect(camera, resolveRef(props.sun), props), [camera, props])
+  useLayoutEffect(() => void (effect.lightSource = resolveRef(props.sun)), [effect, props.sun])
+
+  useDispose(effect)
+
+  return <primitive ref={ref} object={effect} />
+}

package/src/effects/Grid.tsx

@@ -1,21 +1,28 @@
-import React, { Ref, forwardRef, useMemo, useLayoutEffect } from 'react'
-import { GridEffect } from 'postprocessing'
-import { useThree } from '@react-three/fiber'
-
-type GridProps = ConstructorParameters<typeof GridEffect>[0] &
-  Partial<{
-    size: {
-      width: number
-      height: number
-    }
-  }>
-
-export const Grid = /* @__PURE__ */ forwardRef(function Grid({ size, ...props }: GridProps, ref: Ref<GridEffect>) {
-  const invalidate = useThree((state) => state.invalidate)
-  const effect = useMemo(() => new GridEffect(props), [props])
-  useLayoutEffect(() => {
-    if (size) effect.setSize(size.width, size.height)
-    invalidate()
-  }, [effect, size, invalidate])
-  return <primitive ref={ref} object={effect} dispose={null} />
-})
+import { useThree } from '@react-three/fiber'
+import { GridEffect } from 'postprocessing'
+import { Ref, useLayoutEffect, useMemo } from 'react'
+import { useDispose } from '../util'
+
+type GridProps = ConstructorParameters<typeof GridEffect>[0] &
+  Partial<{
+    size: {
+      width: number
+      height: number
+    }
+    ref: Ref<GridEffect>
+  }>
+
+export function Grid({ size, ref, ...props }: GridProps) {
+  const invalidate = useThree((state) => state.invalidate)
+
+  const effect = useMemo(() => new GridEffect(props), [props])
+
+  useLayoutEffect(() => {
+    if (size) effect.setSize(size.width, size.height)
+    invalidate()
+  }, [effect, size, invalidate])
+
+  useDispose(effect)
+
+  return <primitive ref={ref} object={effect} />
+}

package/src/effects/HueSaturation.tsx

@@ -1,4 +1,4 @@
-import { HueSaturationEffect } from 'postprocessing'
-import { wrapEffect } from '../util'
-
-export const HueSaturation = /* @__PURE__ */ wrapEffect(HueSaturationEffect)
+import { HueSaturationEffect } from 'postprocessing'
+import { wrapEffect } from '../wrapEffect'
+
+export const HueSaturation = /* @__PURE__ */ wrapEffect(HueSaturationEffect)

package/src/effects/LUT.tsx

@@ -1,26 +1,27 @@
-import { useThree } from '@react-three/fiber'
-import { LUT3DEffect, BlendFunction } from 'postprocessing'
-import React, { forwardRef, Ref, useLayoutEffect, useMemo } from 'react'
-import type { Texture } from 'three'
-
-export type LUTProps = {
-  lut: Texture
-  blendFunction?: BlendFunction
-  tetrahedralInterpolation?: boolean
-}
-
-export const LUT = /* @__PURE__ */ forwardRef(function LUT(
-  { lut, tetrahedralInterpolation, ...props }: LUTProps,
-  ref: Ref<LUT3DEffect>
-) {
-  const effect = useMemo(() => new LUT3DEffect(lut, props), [lut, props])
-  const invalidate = useThree((state) => state.invalidate)
-
-  useLayoutEffect(() => {
-    if (tetrahedralInterpolation) effect.tetrahedralInterpolation = tetrahedralInterpolation
-    if (lut) effect.lut = lut
-    invalidate()
-  }, [effect, invalidate, lut, tetrahedralInterpolation])
-
-  return <primitive ref={ref} object={effect} dispose={null} />
-})
+import { useThree } from '@react-three/fiber'
+import { BlendFunction, LUT3DEffect } from 'postprocessing'
+import { Ref, useLayoutEffect, useMemo } from 'react'
+import type { Texture } from 'three'
+import { useDispose } from '../util'
+
+export type LUTProps = {
+  lut: Texture
+  blendFunction?: BlendFunction
+  tetrahedralInterpolation?: boolean
+  ref?: Ref<LUT3DEffect>
+}
+
+export function LUT({ lut, tetrahedralInterpolation, ref, ...props }: LUTProps) {
+  const effect = useMemo(() => new LUT3DEffect(lut, props), [lut, props])
+  const invalidate = useThree((state) => state.invalidate)
+
+  useLayoutEffect(() => {
+    if (tetrahedralInterpolation) effect.tetrahedralInterpolation = tetrahedralInterpolation
+    if (lut) effect.lut = lut
+    invalidate()
+  }, [effect, invalidate, lut, tetrahedralInterpolation])
+
+  useDispose(effect)
+
+  return <primitive ref={ref} object={effect} />
+}