@react-three/postprocessing 3.0.4 → 3.1.0

package/src/effects/Glitch.tsx

@@ -1,40 +1,32 @@
-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 type { ReactThreeFiber } from '@react-three/fiber'
+import { GlitchEffect, GlitchMode } from 'postprocessing'
+import type { Ref } from 'react'
+import { useMemo } from 'react'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
+
+type GlitchOptions = Omit<
+  EffectOptions<typeof GlitchEffect>,
+  'delay' | 'duration' | 'strength' | 'chromaticAberrationOffset'
+> & {
+  delay?: ReactThreeFiber.Vector2
+  duration?: ReactThreeFiber.Vector2
+  strength?: ReactThreeFiber.Vector2
+  chromaticAberrationOffset?: ReactThreeFiber.Vector2
+  mode?: GlitchMode
+}
+
+const GlitchImpl = /* @__PURE__ */ createEffectComponent<typeof GlitchEffect, GlitchOptions>(GlitchEffect)
+
+export type GlitchProps = GlitchOptions & {
+  active?: boolean
+  opacity?: number
+  ref?: Ref<GlitchEffect>
+}
+
+// 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,16 +1,104 @@
-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 { useThree } from '@react-three/fiber'
+import { GodRaysEffect } from 'postprocessing'
+import { Ref, RefObject, use, useEffect, useLayoutEffect, useMemo } from 'react'
+import { Mesh, Points } from 'three'
+import { EffectComposerContext } from '../EffectComposer'
+import { applyPierced, readPierced, resolveRef, useDispose, useLiveDefaults } from '../util'
+
+type GodRaysProps = ConstructorParameters<typeof GodRaysEffect>[2] & {
+  sun: Mesh | Points | RefObject<Mesh | Points>
+  ref?: Ref<GodRaysEffect>
+}
+
+// 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)
+
+  return <primitive ref={ref} object={effect} />
+}

package/src/effects/Grid.tsx

@@ -1,21 +1,27 @@
-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 { type Ref, useImperativeHandle, useLayoutEffect, useRef } from 'react'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
+
+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 localRef = useRef<GridEffect>(null)
+  useImperativeHandle(ref, () => localRef.current!, [])
+
+  useLayoutEffect(() => {
+    if (size) {
+      localRef.current?.setSize(size.width, size.height)
+      invalidate()
+    }
+  }, [size, invalidate])
+
+  return <GridImpl ref={localRef} {...props} />
+}

package/src/effects/HueSaturation.tsx

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

package/src/effects/LUT.tsx

@@ -1,26 +1,25 @@
-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 { BlendFunction, LUT3DEffect } from 'postprocessing'
+import { Ref, useMemo } from 'react'
+import type { Texture } from 'three'
+import { useDispose, useLiveDefaults } from '../util'
+
+export type LUTProps = {
+  lut: Texture
+  blendFunction?: BlendFunction
+  tetrahedralInterpolation?: boolean
+  ref?: Ref<LUT3DEffect>
+}
+
+const LIVE_KEYS = ['blendMode-blendFunction', '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} />
+}