@react-three/postprocessing 3.0.5 → 3.1.0

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} />

package/src/effects/LensFlare.tsx

@@ -1,14 +1,15 @@
 // Created by Anderson Mancini 2023
 // From https://github.com/ektogamat/R3F-Ultimate-Lens-Flare
 
-import { useFrame, useThree } from '@react-three/fiber'
+import { useFrame, useThree, type ReactThreeFiber } from '@react-three/fiber'
 import { easing } from 'maath'
 import { BlendFunction, Effect } from 'postprocessing'
-import { useContext, useEffect, useRef, useState } from 'react'
+import { useContext, useEffect, useRef, useState, type Ref } from 'react'
 import { Color, Mesh, Texture, Uniform, Vector2, Vector3 } from 'three'
 
+import { createEffectComponent } from '../createEffectComponent'
 import { EffectComposerContext } from '../EffectComposer'
-import { wrapEffect } from '../wrapEffect'
+import { useMergeRefs, useVector3 } from '../util'
 
 const LensFlareShader = {
   fragmentShader: /* glsl */ `
@@ -441,26 +442,26 @@ type LensFlareEffectOptions = {
 
 export class LensFlareEffect extends Effect {
   constructor({
-    blendFunction,
-    enabled,
-    glareSize,
-    lensPosition,
-    screenRes,
-    starPoints,
-    flareSize,
-    flareSpeed,
-    flareShape,
-    animated,
-    anamorphic,
-    colorGain,
-    lensDirtTexture,
-    haloScale,
-    secondaryGhosts,
-    aditionalStreaks,
-    ghostScale,
-    opacity,
-    starBurst,
-  }: LensFlareEffectOptions) {
+    blendFunction = BlendFunction.NORMAL,
+    enabled = true,
+    glareSize = 0.2,
+    lensPosition = new Vector3(-25, 6, -60),
+    screenRes = new Vector2(0, 0),
+    starPoints = 6,
+    flareSize = 0.01,
+    flareSpeed = 0.01,
+    flareShape = 0.01,
+    animated = true,
+    anamorphic = false,
+    colorGain = new Color(20, 20, 20),
+    lensDirtTexture = null,
+    haloScale = 0.5,
+    secondaryGhosts = true,
+    aditionalStreaks = true,
+    ghostScale = 0.0,
+    opacity = 1.0,
+    starBurst = false,
+  }: Partial<LensFlareEffectOptions> = {}) {
     super('LensFlareEffect', LensFlareShader.fragmentShader, {
       blendFunction,
       uniforms: new Map<string, Uniform>([
@@ -493,40 +494,191 @@ export class LensFlareEffect extends Effect {
       time.value += deltaTime
     }
   }
+
+  private u<T>(name: string): T {
+    return this.uniforms.get(name)!.value
+  }
+
+  private setU(name: string, value: unknown): void {
+    this.uniforms.get(name)!.value = value
+  }
+
+  get enabled(): boolean {
+    return this.u('enabled')
+  }
+  set enabled(value: boolean) {
+    this.setU('enabled', value)
+  }
+
+  get glareSize(): number {
+    return this.u('glareSize')
+  }
+  set glareSize(value: number) {
+    this.setU('glareSize', value)
+  }
+
+  get lensPosition(): Vector3 {
+    return this.u('lensPosition')
+  }
+  set lensPosition(value: Vector3) {
+    this.setU('lensPosition', value)
+  }
+
+  get screenRes(): Vector2 {
+    return this.u('screenRes')
+  }
+  set screenRes(value: Vector2) {
+    this.setU('screenRes', value)
+  }
+
+  get starPoints(): number {
+    return this.u('starPoints')
+  }
+  set starPoints(value: number) {
+    this.setU('starPoints', value)
+  }
+
+  get flareSize(): number {
+    return this.u('flareSize')
+  }
+  set flareSize(value: number) {
+    this.setU('flareSize', value)
+  }
+
+  get flareSpeed(): number {
+    return this.u('flareSpeed')
+  }
+  set flareSpeed(value: number) {
+    this.setU('flareSpeed', value)
+  }
+
+  get flareShape(): number {
+    return this.u('flareShape')
+  }
+  set flareShape(value: number) {
+    this.setU('flareShape', value)
+  }
+
+  get animated(): boolean {
+    return this.u('animated')
+  }
+  set animated(value: boolean) {
+    this.setU('animated', value)
+  }
+
+  get anamorphic(): boolean {
+    return this.u('anamorphic')
+  }
+  set anamorphic(value: boolean) {
+    this.setU('anamorphic', value)
+  }
+
+  get colorGain(): Color {
+    return this.u('colorGain')
+  }
+  set colorGain(value: Color) {
+    this.setU('colorGain', value)
+  }
+
+  get lensDirtTexture(): Texture | null {
+    return this.u('lensDirtTexture')
+  }
+  set lensDirtTexture(value: Texture | null) {
+    this.setU('lensDirtTexture', value)
+  }
+
+  get haloScale(): number {
+    return this.u('haloScale')
+  }
+  set haloScale(value: number) {
+    this.setU('haloScale', value)
+  }
+
+  get secondaryGhosts(): boolean {
+    return this.u('secondaryGhosts')
+  }
+  set secondaryGhosts(value: boolean) {
+    this.setU('secondaryGhosts', value)
+  }
+
+  get aditionalStreaks(): boolean {
+    return this.u('aditionalStreaks')
+  }
+  set aditionalStreaks(value: boolean) {
+    this.setU('aditionalStreaks', value)
+  }
+
+  get ghostScale(): number {
+    return this.u('ghostScale')
+  }
+  set ghostScale(value: number) {
+    this.setU('ghostScale', value)
+  }
+
+  get starBurst(): boolean {
+    return this.u('starBurst')
+  }
+  set starBurst(value: boolean) {
+    this.setU('starBurst', value)
+  }
+
+  get opacity(): number {
+    return this.u('opacity')
+  }
+  set opacity(value: number) {
+    this.setU('opacity', value)
+  }
 }
 
-type LensFlareProps = {
+type LensFlareProps = Omit<Partial<LensFlareEffectOptions>, 'lensPosition'> & {
   /** Position of the effect */
-  lensPosition?: Vector3
+  lensPosition?: ReactThreeFiber.Vector3
   /** The time that it takes to fade the occlusion */
   smoothTime?: number
-} & Partial<LensFlareEffectOptions>
-
-const LensFlareWrapped = /* @__PURE__ */ wrapEffect(LensFlareEffect)
-
-export const LensFlare = ({
-  smoothTime = 0.07,
-  //
-  blendFunction = BlendFunction.NORMAL,
-  enabled = true,
-  glareSize = 0.2,
-  lensPosition = new Vector3(-25, 6, -60),
-  screenRes = new Vector2(0, 0),
-  starPoints = 6,
-  flareSize = 0.01,
-  flareSpeed = 0.01,
-  flareShape = 0.01,
-  animated = true,
-  anamorphic = false,
-  colorGain = new Color(20, 20, 20),
-  lensDirtTexture = null,
-  haloScale = 0.5,
-  secondaryGhosts = true,
-  aditionalStreaks = true,
-  ghostScale = 0.0,
-  opacity = 1.0,
-  starBurst = false,
-}: LensFlareProps) => {
+  ref?: Ref<LensFlareEffect>
+}
+
+const LensFlareWrapped = /* @__PURE__ */ createEffectComponent<
+  typeof LensFlareEffect,
+  Partial<LensFlareEffectOptions> & { ref?: Ref<LensFlareEffect> }
+>(LensFlareEffect)
+
+// Stable identity so a parent re-render (e.g. a Leva control) doesn't hand
+// r3f a brand-new Vector2 every time - r3f would then `.copy()` it onto the
+// uniform in place, stomping the viewport-driven value the effect below
+// maintains and leaving screenRes at (0, 0) until the next resize. Never
+// mutated (only ever copied *from*), so it's safe to share across instances.
+const DEFAULT_SCREEN_RES = /* @__PURE__ */ new Vector2(0, 0)
+
+// Same reasoning as DEFAULT_SCREEN_RES above - shared, read-only default.
+const DEFAULT_LENS_POSITION = /* @__PURE__ */ new Vector3(-25, 6, -60)
+
+export const LensFlare = (props: LensFlareProps) => {
+  const {
+    ref: forwardedRef,
+    smoothTime = 0.07,
+    blendFunction = BlendFunction.NORMAL,
+    enabled = true,
+    glareSize = 0.2,
+    screenRes,
+    starPoints = 6,
+    flareSize = 0.01,
+    flareSpeed = 0.01,
+    flareShape = 0.01,
+    animated = true,
+    anamorphic = false,
+    colorGain = new Color(20, 20, 20),
+    lensDirtTexture = null,
+    haloScale = 0.5,
+    secondaryGhosts = true,
+    aditionalStreaks = true,
+    ghostScale = 0.0,
+    opacity = 1.0,
+    starBurst = false,
+  } = props
+
+  const lensPosition = useVector3({ lensPosition: props.lensPosition ?? DEFAULT_LENS_POSITION }, 'lensPosition')
+
   const viewport = useThree(({ viewport }) => viewport)
   const raycaster = useThree(({ raycaster }) => raycaster)
   const { scene, camera } = useContext(EffectComposerContext)
@@ -534,6 +686,7 @@ export const LensFlare = ({
   const [projectedPosition] = useState(() => new Vector3())
 
   const ref = useRef<LensFlareEffect>(null)
+  const setRef = useMergeRefs(ref, forwardedRef)
 
   useFrame((_, delta) => {
     if (!ref?.current) return
@@ -541,7 +694,7 @@ export const LensFlare = ({
     const uOpacity = ref.current.uniforms.get('opacity')
     if (!uLensPosition || !uOpacity) return
 
-    let target = 1
+    let target = 0
 
     projectedPosition.copy(lensPosition).project(camera)
     if (projectedPosition.z > 1) return
@@ -555,6 +708,7 @@ export const LensFlare = ({
     const intersects = raycaster.intersectObjects(scene.children, true)
     const { object } = intersects[0] || {}
     if (object) {
+      target = 1
       if (object.userData?.lensflare === 'no-occlusion') {
         target = 0
       } else if (object instanceof Mesh) {
@@ -586,12 +740,12 @@ export const LensFlare = ({
 
   return (
     <LensFlareWrapped
-      ref={ref}
+      ref={setRef}
       blendFunction={blendFunction}
       enabled={enabled}
       glareSize={glareSize}
       lensPosition={lensPosition}
-      screenRes={screenRes}
+      screenRes={screenRes ?? DEFAULT_SCREEN_RES}
       starPoints={starPoints}
       flareSize={flareSize}
       flareSpeed={flareSpeed}

package/src/effects/Noise.tsx

@@ -1,4 +1,16 @@
 import { BlendFunction, NoiseEffect } from 'postprocessing'
-import { wrapEffect } from '../wrapEffect'
+import type { Ref } from 'react'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
 
-export const Noise = /* @__PURE__ */ wrapEffect(NoiseEffect, { blendFunction: BlendFunction.COLOR_DODGE })
+const NoiseImpl = /* @__PURE__ */ createEffectComponent<typeof NoiseEffect, EffectOptions<typeof NoiseEffect>>(
+  NoiseEffect
+)
+
+export type NoiseProps = EffectOptions<typeof NoiseEffect> & {
+  opacity?: number
+  ref?: Ref<NoiseEffect>
+}
+
+export function Noise({ blendFunction = BlendFunction.COLOR_DODGE, ...props }: NoiseProps) {
+  return <NoiseImpl blendFunction={blendFunction} {...props} />
+}