@react-three/postprocessing 3.0.0-rc.1 → 3.0.0

package/src/effects/DepthOfField.tsx

@@ -1,89 +1,89 @@
-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.tsx'
-
-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 { 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} />
+})

package/src/effects/DotScreen.tsx

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

package/src/effects/FXAA.tsx

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

package/src/effects/Glitch.tsx

@@ -1,40 +1,40 @@
-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.tsx'
-
-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 { 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} />
+})

package/src/effects/GodRays.tsx

@@ -1,16 +1,16 @@
-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.tsx'
-
-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 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} />
+})

package/src/effects/Grid.tsx

@@ -1,21 +1,21 @@
-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 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} />
+})

package/src/effects/HueSaturation.tsx

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

package/src/effects/LUT.tsx

@@ -1,26 +1,26 @@
-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 { 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} />
+})