@react-three/postprocessing 3.0.5 → 3.1.1

package/src/effects/DepthOfField.tsx

@@ -4,7 +4,7 @@ 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'
+import { applyPierced, readPierced, useDispose, useLiveDefaults } from '../util'
 
 export type DepthOfFieldProps = ConstructorParameters<typeof DepthOfFieldEffect>[1] &
   Partial<{
@@ -19,6 +19,37 @@ export type DepthOfFieldProps = ConstructorParameters<typeof DepthOfFieldEffect>
     blur: number
   }>
 
+// Only bokehScale, focusDistance/focusRange (via the nested cocMaterial),
+// depthTexture (via setDepthTexture) and blendFunction have real setters in
+// postprocessing - every resolution option is construction-only. camera
+// being a required constructor arg also rules out createEffectComponent
+// (needs `new Effect()` to work with zero args).
+const LIVE_KEYS = [
+  'blendMode-blendFunction',
+  'bokehScale',
+  'cocMaterial-focusDistance',
+  'cocMaterial-focusRange',
+  'depthTexture',
+]
+
+// cocMaterial.depthBuffer/depthPacking are write-only in postprocessing
+// (setters with no matching getters) - depthPacking can't be read back at
+// all, so a reverted default always re-applies BasicDepthPacking (the same
+// value setDepthTexture itself defaults to when packing is omitted).
+function get(effect: DepthOfFieldEffect, key: string): unknown {
+  if (key !== 'depthTexture') return readPierced(effect, key)
+  const texture = (effect.cocMaterial as unknown as { uniforms: { depthBuffer: { value: unknown } } }).uniforms
+    .depthBuffer.value
+  return texture ? { texture } : undefined
+}
+
+function set(effect: DepthOfFieldEffect, key: string, value: unknown): void {
+  if (key === 'depthTexture') {
+    const dt = value as { texture?: Texture; packing?: DepthPackingStrategies } | undefined
+    effect.setDepthTexture(dt?.texture as never, dt?.packing)
+  } else applyPierced(effect, key, value)
+}
+
 export function DepthOfField({
   ref,
   blendFunction,
@@ -42,13 +73,9 @@ export function DepthOfField({
 
   const effect = useMemo(() => {
     const effect = new DepthOfFieldEffect(camera, {
-      blendFunction,
       worldFocusDistance,
       worldFocusRange,
-      focusDistance,
-      focusRange,
       focalLength,
-      bokehScale,
       resolutionScale,
       resolutionX,
       resolutionY,
@@ -57,29 +84,24 @@ export function DepthOfField({
     })
     // 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
+    effect.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA
     return effect
-  }, [
-    camera,
-    blendFunction,
-    worldFocusDistance,
-    worldFocusRange,
-    focusDistance,
-    focusRange,
-    focalLength,
-    bokehScale,
-    resolutionScale,
-    resolutionX,
-    resolutionY,
-    width,
-    height,
-    autoFocus,
-    depthTexture,
-  ])
+  }, [camera, worldFocusDistance, worldFocusRange, focalLength, resolutionScale, resolutionX, resolutionY, width, height, autoFocus])
+
+  useLiveDefaults(
+    effect,
+    {
+      'blendMode-blendFunction': blendFunction,
+      bokehScale,
+      'cocMaterial-focusDistance': focusDistance,
+      'cocMaterial-focusRange': focusRange,
+      depthTexture,
+    },
+    LIVE_KEYS,
+    get,
+    set
+  )
 
   useDispose(effect)
 

package/src/effects/DotScreen.tsx

@@ -1,4 +1,7 @@
 import { DotScreenEffect } from 'postprocessing'
-import { wrapEffect } from '../wrapEffect'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
 
-export const DotScreen = /* @__PURE__ */ wrapEffect(DotScreenEffect)
+export const DotScreen = /* @__PURE__ */ createEffectComponent<
+  typeof DotScreenEffect,
+  EffectOptions<typeof DotScreenEffect>
+>(DotScreenEffect)

package/src/effects/FXAA.tsx

@@ -1,4 +1,6 @@
 import { FXAAEffect } from 'postprocessing'
-import { wrapEffect } from '../wrapEffect'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
 
-export const FXAA = /* @__PURE__ */ wrapEffect(FXAAEffect)
+export const FXAA = /* @__PURE__ */ createEffectComponent<typeof FXAAEffect, EffectOptions<typeof FXAAEffect>>(
+  FXAAEffect
+)

package/src/effects/Glitch.tsx

@@ -1,37 +1,32 @@
-import { ReactThreeFiber, useThree } from '@react-three/fiber'
+import type { ReactThreeFiber } from '@react-three/fiber'
 import { GlitchEffect, GlitchMode } from 'postprocessing'
-import { Ref, useLayoutEffect, useMemo } from 'react'
-import { useDispose, useVector2 } from '../util'
+import type { Ref } from 'react'
+import { useMemo } from 'react'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
 
-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]
-  )
+type GlitchOptions = Omit<
+  EffectOptions<typeof GlitchEffect>,
+  'delay' | 'duration' | 'strength' | 'chromaticAberrationOffset'
+> & {
+  delay?: ReactThreeFiber.Vector2
+  duration?: ReactThreeFiber.Vector2
+  strength?: ReactThreeFiber.Vector2
+  chromaticAberrationOffset?: ReactThreeFiber.Vector2
+  mode?: GlitchMode
+}
 
-  useLayoutEffect(() => {
-    effect.mode = active ? props.mode || GlitchMode.SPORADIC : GlitchMode.DISABLED
-    invalidate()
-  }, [active, effect, invalidate, props.mode])
+const GlitchImpl = /* @__PURE__ */ createEffectComponent<typeof GlitchEffect, GlitchOptions>(GlitchEffect)
 
-  useDispose(effect)
+export type GlitchProps = GlitchOptions & {
+  active?: boolean
+  opacity?: number
+  ref?: Ref<GlitchEffect>
+}
 
-  return <primitive ref={ref} object={effect} />
+// dtSize only seeds the auto-generated perturbation map at construction time
+// (skipped entirely once a perturbationMap is provided) - routed through
+// args so it still works as a plain prop.
+export function Glitch({ active = true, mode = GlitchMode.SPORADIC, dtSize, ...props }: GlitchProps) {
+  const args = useMemo<[EffectOptions<typeof GlitchEffect>]>(() => [{ dtSize }], [dtSize])
+  return <GlitchImpl args={args} mode={active ? mode : GlitchMode.DISABLED} {...props} />
 }

package/src/effects/GodRays.tsx

@@ -1,18 +1,102 @@
+import { useThree } from '@react-three/fiber'
 import { GodRaysEffect } from 'postprocessing'
-import { Ref, RefObject, useContext, useLayoutEffect, useMemo } from 'react'
+import { Ref, RefObject, use, useEffect, useLayoutEffect, useMemo } from 'react'
 import { Mesh, Points } from 'three'
 import { EffectComposerContext } from '../EffectComposer'
-import { resolveRef, useDispose } from '../util'
+import { applyPierced, readPierced, resolveRef, useDispose, useLiveDefaults } 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])
+// GodRaysMaterial (godRaysMaterial) is where density/decay/weight/exposure
+// actually live - clampMax maps to its differently-named maxIntensity.
+// resolutionScale/resolutionX/resolutionY have no setter at all in
+// postprocessing - construction-only. camera+sun being required constructor
+// args also rule out createEffectComponent (needs `new Effect()` to work
+// with zero args).
+const LIVE_KEYS = [
+  'blendMode-blendFunction',
+  'godRaysMaterial-density',
+  'godRaysMaterial-decay',
+  'godRaysMaterial-weight',
+  'godRaysMaterial-exposure',
+  'clampMax',
+  'blur',
+  'kernelSize',
+  'samples',
+  'width',
+  'height',
+]
+
+function get(effect: GodRaysEffect, key: string): unknown {
+  return key === 'clampMax' ? effect.godRaysMaterial.maxIntensity : readPierced(effect, key)
+}
+
+function set(effect: GodRaysEffect, key: string, value: unknown): void {
+  if (key === 'clampMax') effect.godRaysMaterial.maxIntensity = value as number
+  else applyPierced(effect, key, value)
+}
+
+export function GodRays({
+  sun,
+  blendFunction,
+  density,
+  decay,
+  weight,
+  exposure,
+  clampMax,
+  blur,
+  kernelSize,
+  samples,
+  width,
+  height,
+  resolutionScale,
+  resolutionX,
+  resolutionY,
+  ref,
+}: GodRaysProps) {
+  const { camera, autoClear } = use(EffectComposerContext)
+  const invalidate = useThree((state) => state.invalidate)
+
+  const effect = useMemo(
+    () => new GodRaysEffect(camera, resolveRef(sun), { resolutionScale, resolutionX, resolutionY }),
+    [camera, resolutionScale, resolutionX, resolutionY]
+  )
+
+  useEffect(() => {
+    if (autoClear !== false) {
+      console.warn(
+        'GodRays renders an internal extra pass that needs <EffectComposer autoClear={false}> - without it, occlusion by other objects will look wrong.'
+      )
+    }
+  }, [autoClear])
+
+  useLayoutEffect(() => {
+    effect.lightSource = resolveRef(sun)
+    invalidate()
+  }, [effect, sun, invalidate])
+
+  useLiveDefaults(
+    effect,
+    {
+      'blendMode-blendFunction': blendFunction,
+      'godRaysMaterial-density': density,
+      'godRaysMaterial-decay': decay,
+      'godRaysMaterial-weight': weight,
+      'godRaysMaterial-exposure': exposure,
+      clampMax,
+      blur,
+      kernelSize,
+      samples,
+      width,
+      height,
+    },
+    LIVE_KEYS,
+    get,
+    set
+  )
 
   useDispose(effect)
 

package/src/effects/Grid.tsx

@@ -1,28 +1,27 @@
 import { useThree } from '@react-three/fiber'
 import { GridEffect } from 'postprocessing'
-import { Ref, useLayoutEffect, useMemo } from 'react'
-import { useDispose } from '../util'
+import { type Ref, useImperativeHandle, useLayoutEffect, useRef } from 'react'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
 
-type GridProps = ConstructorParameters<typeof GridEffect>[0] &
-  Partial<{
-    size: {
-      width: number
-      height: number
-    }
-    ref: Ref<GridEffect>
-  }>
+const GridImpl = /* @__PURE__ */ createEffectComponent<typeof GridEffect, EffectOptions<typeof GridEffect>>(GridEffect)
+
+export type GridProps = EffectOptions<typeof GridEffect> & {
+  size?: { width: number; height: number }
+  opacity?: number
+  ref?: Ref<GridEffect>
+}
 
 export function Grid({ size, ref, ...props }: GridProps) {
   const invalidate = useThree((state) => state.invalidate)
-
-  const effect = useMemo(() => new GridEffect(props), [props])
+  const localRef = useRef<GridEffect>(null)
+  useImperativeHandle(ref, () => localRef.current!, [])
 
   useLayoutEffect(() => {
-    if (size) effect.setSize(size.width, size.height)
-    invalidate()
-  }, [effect, size, invalidate])
-
-  useDispose(effect)
+    if (size) {
+      localRef.current?.setSize(size.width, size.height)
+      invalidate()
+    }
+  }, [size, invalidate])
 
-  return <primitive ref={ref} object={effect} />
+  return <GridImpl ref={localRef} {...props} />
 }

package/src/effects/HueSaturation.tsx

@@ -1,4 +1,7 @@
 import { HueSaturationEffect } from 'postprocessing'
-import { wrapEffect } from '../wrapEffect'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
 
-export const HueSaturation = /* @__PURE__ */ wrapEffect(HueSaturationEffect)
+export const HueSaturation = /* @__PURE__ */ createEffectComponent<
+  typeof HueSaturationEffect,
+  EffectOptions<typeof HueSaturationEffect>
+>(HueSaturationEffect)

package/src/effects/LUT.tsx

@@ -1,8 +1,7 @@
-import { useThree } from '@react-three/fiber'
 import { BlendFunction, LUT3DEffect } from 'postprocessing'
-import { Ref, useLayoutEffect, useMemo } from 'react'
+import { Ref, useMemo } from 'react'
 import type { Texture } from 'three'
-import { useDispose } from '../util'
+import { useDispose, useLiveDefaults } from '../util'
 
 export type LUTProps = {
   lut: Texture
@@ -11,16 +10,15 @@ export type LUTProps = {
   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)
+const LIVE_KEYS = ['blendMode-blendFunction', 'lut', 'tetrahedralInterpolation']
 
-  useLayoutEffect(() => {
-    if (tetrahedralInterpolation) effect.tetrahedralInterpolation = tetrahedralInterpolation
-    if (lut) effect.lut = lut
-    invalidate()
-  }, [effect, invalidate, lut, tetrahedralInterpolation])
+// lut is LUT3DEffect's required constructor arg (no default) - only used
+// for the initial instance, later changes go through its own live setter
+// (via useLiveDefaults below) instead of reconstructing.
+export function LUT({ lut, blendFunction, tetrahedralInterpolation, ref }: LUTProps) {
+  const effect = useMemo(() => new LUT3DEffect(lut), [])
 
+  useLiveDefaults(effect, { 'blendMode-blendFunction': blendFunction, lut, tetrahedralInterpolation }, LIVE_KEYS)
   useDispose(effect)
 
   return <primitive ref={ref} object={effect} />