@react-three/postprocessing 3.0.5 → 3.1.1

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

package/src/effects/Outline.tsx

@@ -1,83 +1,82 @@
 import { OutlineEffect } from 'postprocessing'
-import { Ref, RefObject, use, useMemo } from 'react'
-import { Object3D } from 'three'
+import { Ref, RefObject, use, useEffect, useMemo } from 'react'
+import { Color, Object3D, type ColorRepresentation } from 'three'
 import { EffectComposerContext } from '../EffectComposer'
-import { EMPTY_ARRAY, useDispose, useSelectionSync } from '../util'
+import { applyPierced, EMPTY_ARRAY, readPierced, useDispose, useLiveDefaults, useSelectionSync } from '../util'
 
 type ObjectRef = RefObject<Object3D | null>
 
-export type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &
+type OutlineEffectOptions = NonNullable<ConstructorParameters<typeof OutlineEffect>[2]>
+
+export type OutlineProps = Omit<OutlineEffectOptions, 'visibleEdgeColor' | 'hiddenEdgeColor'> &
   Partial<{
     selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]
     selectionLayer: number
+    visibleEdgeColor: ColorRepresentation
+    hiddenEdgeColor: ColorRepresentation
     ref?: Ref<OutlineEffect>
   }>
 
+// Every OutlineEffect option that has a real setter (verified against
+// postprocessing's source) - resolutionScale/resolutionX/resolutionY are
+// the only ones without one, since they only feed the internal blur pass
+// at construction time. scene/camera are required constructor args, so
+// OutlineEffect can't use createEffectComponent (needs `new Effect()` to
+// work with zero args) - built by hand instead.
+const LIVE_KEYS = [
+  'patternTexture',
+  'patternScale',
+  'edgeStrength',
+  'pulseSpeed',
+  'visibleEdgeColor',
+  'hiddenEdgeColor',
+  'multisampling',
+  'width',
+  'height',
+  'kernelSize',
+  'blur',
+  'xRay',
+  'dithering',
+  'blendMode-blendFunction',
+]
+
+// The setter stores whatever it's given as-is, unlike the constructor -
+// wrap in a Color here too, or a raw hex/string breaks the shader uniform.
+function set(effect: OutlineEffect, key: string, value: unknown): void {
+  if (key === 'visibleEdgeColor' || key === 'hiddenEdgeColor') applyPierced(effect, key, new Color(value as never))
+  else applyPierced(effect, key, value)
+}
+
 export function Outline({
   selection = EMPTY_ARRAY,
   selectionLayer = 10,
   blendFunction,
-  patternTexture,
-  patternScale,
-  edgeStrength,
-  pulseSpeed,
-  visibleEdgeColor,
-  hiddenEdgeColor,
-  multisampling,
   resolutionScale,
   resolutionX,
   resolutionY,
-  width,
-  height,
-  kernelSize,
-  blur,
-  xRay,
   ref,
+  ...liveProps
 }: OutlineProps) {
-  const { scene, camera } = use(EffectComposerContext)
+  const { scene, camera, autoClear } = use(EffectComposerContext)
 
   const effect = useMemo(
-    () =>
-      new OutlineEffect(scene, camera, {
-        blendFunction,
-        patternTexture,
-        patternScale,
-        edgeStrength,
-        pulseSpeed,
-        visibleEdgeColor,
-        hiddenEdgeColor,
-        multisampling,
-        resolutionScale,
-        resolutionX,
-        resolutionY,
-        width,
-        height,
-        kernelSize,
-        blur,
-        xRay,
-      }),
-    [
-      blendFunction,
-      patternTexture,
-      patternScale,
-      edgeStrength,
-      pulseSpeed,
-      visibleEdgeColor,
-      hiddenEdgeColor,
-      multisampling,
-      resolutionScale,
-      resolutionX,
-      resolutionY,
-      width,
-      height,
-      kernelSize,
-      blur,
-      xRay,
-      camera,
-      scene,
-    ]
+    () => new OutlineEffect(scene, camera, { resolutionScale, resolutionX, resolutionY }),
+    [scene, camera, resolutionScale, resolutionX, resolutionY]
   )
 
+  useEffect(() => {
+    if (autoClear !== false) {
+      console.warn('Outline requires <EffectComposer autoClear={false}> to render correctly.')
+    }
+  }, [autoClear])
+
+  useLiveDefaults(
+    effect,
+    { ...liveProps, 'blendMode-blendFunction': blendFunction } as Record<string, unknown>,
+    LIVE_KEYS,
+    readPierced,
+    set
+  )
   useSelectionSync(effect, selection, selectionLayer)
   useDispose(effect)
 

package/src/effects/Pixelation.tsx

@@ -1,6 +1,14 @@
 import { PixelationEffect } from 'postprocessing'
-import { Ref, useMemo } from 'react'
-import { useDispose } from '../util'
+import type { Ref } from 'react'
+import { createEffectComponent } from '../createEffectComponent'
+
+// PixelationEffect's sole constructor arg is a bare number, not an options
+// object - granularity is a real live setter though, so it's just a normal
+// prop; only the curated default (5, vs the class's own default of 30)
+// needs a thin wrapper.
+const PixelationImpl = /* @__PURE__ */ createEffectComponent<typeof PixelationEffect, { granularity?: number }>(
+  PixelationEffect
+)
 
 export type PixelationProps = {
   granularity?: number
@@ -8,10 +16,5 @@ export type PixelationProps = {
 }
 
 export function Pixelation({ granularity = 5, ref }: PixelationProps) {
-  /** Because GlitchEffect granularity is not an object but a number, we have to define a custom prop "granularity" */
-  const effect = useMemo(() => new PixelationEffect(granularity), [granularity])
-
-  useDispose(effect)
-
-  return <primitive ref={ref} object={effect} />
+  return <PixelationImpl granularity={granularity} ref={ref} />
 }

package/src/effects/Ramp.tsx

@@ -1,6 +1,7 @@
-import { Effect } from 'postprocessing'
+import { BlendFunction, Effect } from 'postprocessing'
+import type { Ref } from 'react'
 import { Uniform } from 'three'
-import { wrapEffect } from '../wrapEffect'
+import { createEffectComponent } from '../createEffectComponent'
 
 const RampShader = {
   fragmentShader: /* glsl */ `
@@ -72,6 +73,9 @@ export enum RampType {
   MirroredLinear,
 }
 
+type RampTuple2 = [number, number]
+type RampTuple4 = [number, number, number, number]
+
 export class RampEffect extends Effect {
   constructor({
     /**
@@ -83,25 +87,25 @@ export class RampEffect extends Effect {
      *
      * Ranges from `[0 - 1]` as `[x, y]`. Default is `[0.5, 0.5]`.
      */
-    rampStart = [0.5, 0.5],
+    rampStart = [0.5, 0.5] as RampTuple2,
     /**
      * Ending point of the ramp gradient in normalized coordinates.
      *
      * Ranges from `[0 - 1]` as `[x, y]`. Default is `[1, 1]`
      */
-    rampEnd = [1, 1],
+    rampEnd = [1, 1] as RampTuple2,
     /**
      * Color at the starting point of the gradient.
      *
      * Default is black: `[0, 0, 0, 1]`
      */
-    startColor = [0, 0, 0, 1],
+    startColor = [0, 0, 0, 1] as RampTuple4,
     /**
      * Color at the ending point of the gradient.
      *
      * Default is white: `[1, 1, 1, 1]`
      */
-    endColor = [1, 1, 1, 1],
+    endColor = [1, 1, 1, 1] as RampTuple4,
     /**
      * Bias for the interpolation curve when both bias and gain are 0.5.
      *
@@ -145,6 +149,91 @@ export class RampEffect extends Effect {
       ]),
     })
   }
+
+  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 rampType(): RampType {
+    return this.u('rampType')
+  }
+  set rampType(value: RampType) {
+    this.setU('rampType', value)
+  }
+
+  get rampStart(): RampTuple2 {
+    return this.u('rampStart')
+  }
+  set rampStart(value: RampTuple2) {
+    this.setU('rampStart', value)
+  }
+
+  get rampEnd(): RampTuple2 {
+    return this.u('rampEnd')
+  }
+  set rampEnd(value: RampTuple2) {
+    this.setU('rampEnd', value)
+  }
+
+  get startColor(): RampTuple4 {
+    return this.u('startColor')
+  }
+  set startColor(value: RampTuple4) {
+    this.setU('startColor', value)
+  }
+
+  get endColor(): RampTuple4 {
+    return this.u('endColor')
+  }
+  set endColor(value: RampTuple4) {
+    this.setU('endColor', value)
+  }
+
+  get rampBias(): number {
+    return this.u('rampBias')
+  }
+  set rampBias(value: number) {
+    this.setU('rampBias', value)
+  }
+
+  get rampGain(): number {
+    return this.u('rampGain')
+  }
+  set rampGain(value: number) {
+    this.setU('rampGain', value)
+  }
+
+  get rampMask(): boolean {
+    return this.u('rampMask')
+  }
+  set rampMask(value: boolean) {
+    this.setU('rampMask', value)
+  }
+
+  get rampInvert(): boolean {
+    return this.u('rampInvert')
+  }
+  set rampInvert(value: boolean) {
+    this.setU('rampInvert', value)
+  }
+}
+
+export type RampProps = {
+  blendFunction?: BlendFunction
+  rampType?: RampType
+  rampStart?: RampTuple2
+  rampEnd?: RampTuple2
+  startColor?: RampTuple4
+  endColor?: RampTuple4
+  rampBias?: number
+  rampGain?: number
+  rampMask?: boolean
+  rampInvert?: boolean
+  ref?: Ref<RampEffect>
 }
 
-export const Ramp = /* @__PURE__ */ wrapEffect(RampEffect)
+export const Ramp = /* @__PURE__ */ createEffectComponent<typeof RampEffect, RampProps>(RampEffect)

package/src/effects/SMAA.tsx

@@ -1,4 +1,20 @@
 import { SMAAEffect } from 'postprocessing'
-import { wrapEffect } from '../wrapEffect'
+import type { Ref } from 'react'
+import { useMemo } from 'react'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
 
-export const SMAA = /* @__PURE__ */ wrapEffect(SMAAEffect)
+type SMAAOptions = EffectOptions<typeof SMAAEffect>
+
+const SMAAImpl = /* @__PURE__ */ createEffectComponent<typeof SMAAEffect, SMAAOptions>(SMAAEffect)
+
+export type SMAAProps = SMAAOptions & { opacity?: number; ref?: Ref<SMAAEffect> }
+
+// preset/edgeDetectionMode/predicationMode have no live setter in
+// postprocessing - routed through args so they still work as plain props.
+export function SMAA({ preset, edgeDetectionMode, predicationMode, ...liveProps }: SMAAProps) {
+  const args = useMemo<[SMAAOptions]>(
+    () => [{ preset, edgeDetectionMode, predicationMode }],
+    [preset, edgeDetectionMode, predicationMode]
+  )
+  return <SMAAImpl args={args} {...liveProps} />
+}