@react-three/postprocessing 3.0.3 → 3.0.5

package/src/effects/Ramp.tsx

@@ -1,150 +1,150 @@
-import { Uniform } from 'three'
-import { Effect } from 'postprocessing'
-import { wrapEffect } from '../util'
-
-const RampShader = {
-  fragmentShader: /* glsl */ `
-    uniform int rampType;
-
-    uniform vec2 rampStart;
-    uniform vec2 rampEnd;
-
-    uniform vec4 startColor;
-    uniform vec4 endColor;
-
-    uniform float rampBias;
-    uniform float rampGain;
-
-    uniform bool rampMask;
-    uniform bool rampInvert;
-
-    float getBias(float time, float bias) {
-      return time / (((1.0 / bias) - 2.0) * (1.0 - time) + 1.0);
-    }
-
-    float getGain(float time, float gain) {
-      if (time < 0.5)
-        return getBias(time * 2.0, gain) / 2.0;
-      else
-        return getBias(time * 2.0 - 1.0, 1.0 - gain) / 2.0 + 0.5;
-    }
-
-    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
-      vec2 centerPixel = uv * resolution;
-      vec2 startPixel = rampStart * resolution;
-      vec2 endPixel = rampEnd * resolution;
-
-      float rampAlpha;
-
-      if (rampType == 1) {
-        vec2 fuv = centerPixel / resolution.y;
-        vec2 suv = startPixel / resolution.y;
-        vec2 euv = endPixel / resolution.y;
-
-        float radius = length(suv - euv);
-        float falloff = length(fuv - suv);
-        rampAlpha = smoothstep(0.0, radius, falloff);
-      } else {
-        float radius = length(startPixel - endPixel);
-        vec2 direction = normalize(vec2(endPixel.x - startPixel.x, -(startPixel.y - endPixel.y)));
-
-        float fade = dot(centerPixel - startPixel, direction);
-        if (rampType == 2) fade = abs(fade);
-
-        rampAlpha = smoothstep(0.0, 1.0, fade / radius);
-      }
-
-      rampAlpha = abs((rampInvert ? 1.0 : 0.0) - getBias(rampAlpha, rampBias) * getGain(rampAlpha, rampGain));
-
-      if (rampMask) {
-        vec4 inputBuff = texture2D(inputBuffer, uv);
-        outputColor = mix(inputBuff, inputColor, rampAlpha);
-      } else {
-        outputColor = mix(startColor, endColor, rampAlpha);
-      }
-    }
-  `,
-}
-
-export enum RampType {
-  Linear,
-  Radial,
-  MirroredLinear,
-}
-
-export class RampEffect extends Effect {
-  constructor({
-    /**
-     * Type of ramp gradient.
-     */
-    rampType = RampType.Linear,
-    /**
-     * Starting point of the ramp gradient in normalized coordinates.
-     *
-     * Ranges from `[0 - 1]` as `[x, y]`. Default is `[0.5, 0.5]`.
-     */
-    rampStart = [0.5, 0.5],
-    /**
-     * Ending point of the ramp gradient in normalized coordinates.
-     *
-     * Ranges from `[0 - 1]` as `[x, y]`. Default is `[1, 1]`
-     */
-    rampEnd = [1, 1],
-    /**
-     * Color at the starting point of the gradient.
-     *
-     * Default is black: `[0, 0, 0, 1]`
-     */
-    startColor = [0, 0, 0, 1],
-    /**
-     * Color at the ending point of the gradient.
-     *
-     * Default is white: `[1, 1, 1, 1]`
-     */
-    endColor = [1, 1, 1, 1],
-    /**
-     * Bias for the interpolation curve when both bias and gain are 0.5.
-     *
-     * Ranges from `[0 - 1]`. Default is `0.5`.
-     */
-    rampBias = 0.5,
-    /**
-     * Gain for the interpolation curve when both bias and gain are 0.5.
-     *
-     * Ranges from `[0 - 1]`. Default is `0.5`.
-     */
-    rampGain = 0.5,
-    /**
-     * When enabled, the ramp gradient is used as an effect mask, and colors are ignored.
-     *
-     * Default is `false`.
-     */
-    rampMask = false,
-    /**
-     * Controls whether the ramp gradient is inverted.
-     *
-     * When disabled, rampStart is transparent and rampEnd is opaque.
-     *
-     * Default is `false`.
-     */
-    rampInvert = false,
-    ...params
-  } = {}) {
-    super('RampEffect', RampShader.fragmentShader, {
-      ...params,
-      uniforms: new Map<string, Uniform>([
-        ['rampType', new Uniform(rampType)],
-        ['rampStart', new Uniform(rampStart)],
-        ['rampEnd', new Uniform(rampEnd)],
-        ['startColor', new Uniform(startColor)],
-        ['endColor', new Uniform(endColor)],
-        ['rampBias', new Uniform(rampBias)],
-        ['rampGain', new Uniform(rampGain)],
-        ['rampMask', new Uniform(rampMask)],
-        ['rampInvert', new Uniform(rampInvert)],
-      ]),
-    })
-  }
-}
-
-export const Ramp = /* @__PURE__ */ wrapEffect(RampEffect)
+import { Effect } from 'postprocessing'
+import { Uniform } from 'three'
+import { wrapEffect } from '../wrapEffect'
+
+const RampShader = {
+  fragmentShader: /* glsl */ `
+    uniform int rampType;
+
+    uniform vec2 rampStart;
+    uniform vec2 rampEnd;
+
+    uniform vec4 startColor;
+    uniform vec4 endColor;
+
+    uniform float rampBias;
+    uniform float rampGain;
+
+    uniform bool rampMask;
+    uniform bool rampInvert;
+
+    float getBias(float time, float bias) {
+      return time / (((1.0 / bias) - 2.0) * (1.0 - time) + 1.0);
+    }
+
+    float getGain(float time, float gain) {
+      if (time < 0.5)
+        return getBias(time * 2.0, gain) / 2.0;
+      else
+        return getBias(time * 2.0 - 1.0, 1.0 - gain) / 2.0 + 0.5;
+    }
+
+    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+      vec2 centerPixel = uv * resolution;
+      vec2 startPixel = rampStart * resolution;
+      vec2 endPixel = rampEnd * resolution;
+
+      float rampAlpha;
+
+      if (rampType == 1) {
+        vec2 fuv = centerPixel / resolution.y;
+        vec2 suv = startPixel / resolution.y;
+        vec2 euv = endPixel / resolution.y;
+
+        float radius = length(suv - euv);
+        float falloff = length(fuv - suv);
+        rampAlpha = smoothstep(0.0, radius, falloff);
+      } else {
+        float radius = length(startPixel - endPixel);
+        vec2 direction = normalize(vec2(endPixel.x - startPixel.x, -(startPixel.y - endPixel.y)));
+
+        float fade = dot(centerPixel - startPixel, direction);
+        if (rampType == 2) fade = abs(fade);
+
+        rampAlpha = smoothstep(0.0, 1.0, fade / radius);
+      }
+
+      rampAlpha = abs((rampInvert ? 1.0 : 0.0) - getBias(rampAlpha, rampBias) * getGain(rampAlpha, rampGain));
+
+      if (rampMask) {
+        vec4 inputBuff = texture2D(inputBuffer, uv);
+        outputColor = mix(inputBuff, inputColor, rampAlpha);
+      } else {
+        outputColor = mix(startColor, endColor, rampAlpha);
+      }
+    }
+  `,
+}
+
+export enum RampType {
+  Linear,
+  Radial,
+  MirroredLinear,
+}
+
+export class RampEffect extends Effect {
+  constructor({
+    /**
+     * Type of ramp gradient.
+     */
+    rampType = RampType.Linear,
+    /**
+     * Starting point of the ramp gradient in normalized coordinates.
+     *
+     * Ranges from `[0 - 1]` as `[x, y]`. Default is `[0.5, 0.5]`.
+     */
+    rampStart = [0.5, 0.5],
+    /**
+     * Ending point of the ramp gradient in normalized coordinates.
+     *
+     * Ranges from `[0 - 1]` as `[x, y]`. Default is `[1, 1]`
+     */
+    rampEnd = [1, 1],
+    /**
+     * Color at the starting point of the gradient.
+     *
+     * Default is black: `[0, 0, 0, 1]`
+     */
+    startColor = [0, 0, 0, 1],
+    /**
+     * Color at the ending point of the gradient.
+     *
+     * Default is white: `[1, 1, 1, 1]`
+     */
+    endColor = [1, 1, 1, 1],
+    /**
+     * Bias for the interpolation curve when both bias and gain are 0.5.
+     *
+     * Ranges from `[0 - 1]`. Default is `0.5`.
+     */
+    rampBias = 0.5,
+    /**
+     * Gain for the interpolation curve when both bias and gain are 0.5.
+     *
+     * Ranges from `[0 - 1]`. Default is `0.5`.
+     */
+    rampGain = 0.5,
+    /**
+     * When enabled, the ramp gradient is used as an effect mask, and colors are ignored.
+     *
+     * Default is `false`.
+     */
+    rampMask = false,
+    /**
+     * Controls whether the ramp gradient is inverted.
+     *
+     * When disabled, rampStart is transparent and rampEnd is opaque.
+     *
+     * Default is `false`.
+     */
+    rampInvert = false,
+    ...params
+  } = {}) {
+    super('RampEffect', RampShader.fragmentShader, {
+      ...params,
+      uniforms: new Map<string, Uniform>([
+        ['rampType', new Uniform(rampType)],
+        ['rampStart', new Uniform(rampStart)],
+        ['rampEnd', new Uniform(rampEnd)],
+        ['startColor', new Uniform(startColor)],
+        ['endColor', new Uniform(endColor)],
+        ['rampBias', new Uniform(rampBias)],
+        ['rampGain', new Uniform(rampGain)],
+        ['rampMask', new Uniform(rampMask)],
+        ['rampInvert', new Uniform(rampInvert)],
+      ]),
+    })
+  }
+}
+
+export const Ramp = /* @__PURE__ */ wrapEffect(RampEffect)

package/src/effects/SMAA.tsx

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

package/src/effects/SSAO.tsx

@@ -1,41 +1,44 @@
-import { Ref, forwardRef, useContext, useMemo } from 'react'
-import { SSAOEffect, BlendFunction } from 'postprocessing'
-import { EffectComposerContext } from '../EffectComposer'
-
-// first two args are camera and texture
-type SSAOProps = ConstructorParameters<typeof SSAOEffect>[2]
-
-export const SSAO = /* @__PURE__ */ forwardRef<SSAOEffect, SSAOProps>(function SSAO(
-  props: SSAOProps,
-  ref: Ref<SSAOEffect>
-) {
-  const { camera, normalPass, downSamplingPass, resolutionScale } = useContext(EffectComposerContext)
-  const effect = useMemo<SSAOEffect | {}>(() => {
-    if (normalPass === null && downSamplingPass === null) {
-      console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.')
-      return {}
-    }
-    return new SSAOEffect(camera, normalPass && !downSamplingPass ? (normalPass as any).texture : null, {
-      blendFunction: BlendFunction.MULTIPLY,
-      samples: 30,
-      rings: 4,
-      distanceThreshold: 1.0,
-      distanceFalloff: 0.0,
-      rangeThreshold: 0.5,
-      rangeFalloff: 0.1,
-      luminanceInfluence: 0.9,
-      radius: 20,
-      bias: 0.5,
-      intensity: 1.0,
-      color: undefined,
-      // @ts-ignore
-      normalDepthBuffer: downSamplingPass ? downSamplingPass.texture : null,
-      resolutionScale: resolutionScale ?? 1,
-      depthAwareUpsampling: true,
-      ...props,
-    })
-    // NOTE: `props` is an unstable reference, so we can't memoize it
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [camera, downSamplingPass, normalPass, resolutionScale])
-  return <primitive ref={ref} object={effect} dispose={null} />
-})
+import { BlendFunction, SSAOEffect } from 'postprocessing'
+import { Ref, useContext, useMemo } from 'react'
+import { EffectComposerContext } from '../EffectComposer'
+import { useDispose } from '../util'
+
+// first two args are camera and texture
+type SSAOProps = ConstructorParameters<typeof SSAOEffect>[2] & { ref?: Ref<SSAOEffect> }
+
+export function SSAO({ ref, ...props }: SSAOProps) {
+  const { camera, normalPass, downSamplingPass, resolutionScale } = useContext(EffectComposerContext)
+
+  const effect = useMemo<SSAOEffect | {}>(() => {
+    if (normalPass === null && downSamplingPass === null) {
+      console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.')
+      return {}
+    }
+
+    return new SSAOEffect(camera, normalPass && !downSamplingPass ? (normalPass as any).texture : null, {
+      blendFunction: BlendFunction.MULTIPLY,
+      samples: 30,
+      rings: 4,
+      distanceThreshold: 1.0,
+      distanceFalloff: 0.0,
+      rangeThreshold: 0.5,
+      rangeFalloff: 0.1,
+      luminanceInfluence: 0.9,
+      radius: 20,
+      bias: 0.5,
+      intensity: 1.0,
+      color: undefined,
+      // @ts-ignore
+      normalDepthBuffer: downSamplingPass ? downSamplingPass.texture : null,
+      resolutionScale: resolutionScale ?? 1,
+      depthAwareUpsampling: true,
+      ...props,
+    })
+    // NOTE: `props` is an unstable reference, so we can't memoize it
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [camera, downSamplingPass, normalPass, resolutionScale])
+
+  useDispose(effect)
+
+  return <primitive ref={ref} object={effect} />
+}

package/src/effects/ScanlineEffect.tsx

@@ -1,7 +1,7 @@
-import { ScanlineEffect, BlendFunction } from 'postprocessing'
-import { wrapEffect } from '../util'
-
-export const Scanline = /* @__PURE__ */ wrapEffect(ScanlineEffect, {
-  blendFunction: BlendFunction.OVERLAY,
-  density: 1.25,
-})
+import { BlendFunction, ScanlineEffect } from 'postprocessing'
+import { wrapEffect } from '../wrapEffect'
+
+export const Scanline = /* @__PURE__ */ wrapEffect(ScanlineEffect, {
+  blendFunction: BlendFunction.OVERLAY,
+  density: 1.25,
+})

package/src/effects/SelectiveBloom.tsx

@@ -1,126 +1,116 @@
-import { SelectiveBloomEffect, BlendFunction } from 'postprocessing'
-import type { BloomEffectOptions } from 'postprocessing'
-import React, { Ref, RefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'
-import { Object3D } from 'three'
-import { useThree } from '@react-three/fiber'
-import { EffectComposerContext } from '../EffectComposer'
-import { selectionContext } from '../Selection'
-import { resolveRef } from '../util'
-
-type ObjectRef = RefObject<Object3D>
-
-export type SelectiveBloomProps = BloomEffectOptions &
-  Partial<{
-    lights: Object3D[] | ObjectRef[]
-    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]
-    selectionLayer: number
-    inverted: boolean
-    ignoreBackground: boolean
-  }>
-
-const addLight = (light: Object3D, effect: SelectiveBloomEffect) => light.layers.enable(effect.selection.layer)
-const removeLight = (light: Object3D, effect: SelectiveBloomEffect) => light.layers.disable(effect.selection.layer)
-
-export const SelectiveBloom = /* @__PURE__ */ forwardRef(function SelectiveBloom(
-  {
-    selection = [],
-    selectionLayer = 10,
-    lights = [],
-    inverted = false,
-    ignoreBackground = false,
-    luminanceThreshold,
-    luminanceSmoothing,
-    intensity,
-    width,
-    height,
-    kernelSize,
-    mipmapBlur,
-
-    ...props
-  }: SelectiveBloomProps,
-  forwardRef: Ref<SelectiveBloomEffect>
-) {
-  if (lights.length === 0) {
-    console.warn('SelectiveBloom requires lights to work.')
-  }
-
-  const invalidate = useThree((state) => state.invalidate)
-  const { scene, camera } = useContext(EffectComposerContext)
-  const effect = useMemo(() => {
-    const effect = new SelectiveBloomEffect(scene, camera, {
-      blendFunction: BlendFunction.ADD,
-      luminanceThreshold,
-      luminanceSmoothing,
-      intensity,
-      width,
-      height,
-      kernelSize,
-      mipmapBlur,
-      ...props,
-    })
-    effect.inverted = inverted
-    effect.ignoreBackground = ignoreBackground
-    return effect
-  }, [
-    scene,
-    camera,
-    luminanceThreshold,
-    luminanceSmoothing,
-    intensity,
-    width,
-    height,
-    kernelSize,
-    mipmapBlur,
-    inverted,
-    ignoreBackground,
-    props,
-  ])
-
-  const api = useContext(selectionContext)
-
-  useEffect(() => {
-    // Do not allow array selection if declarative selection is active
-    // TODO: array selection should probably be deprecated altogether
-    if (!api && selection) {
-      effect.selection.set(
-        Array.isArray(selection) ? (selection as Object3D[]).map(resolveRef) : [resolveRef(selection) as Object3D]
-      )
-      invalidate()
-      return () => {
-        effect.selection.clear()
-        invalidate()
-      }
-    }
-  }, [effect, selection, api, invalidate])
-
-  useEffect(() => {
-    effect.selection.layer = selectionLayer
-    invalidate()
-  }, [effect, invalidate, selectionLayer])
-
-  useEffect(() => {
-    if (lights && lights.length > 0) {
-      lights.forEach((light) => addLight(resolveRef(light), effect))
-      invalidate()
-      return () => {
-        lights.forEach((light) => removeLight(resolveRef(light), effect))
-        invalidate()
-      }
-    }
-  }, [effect, invalidate, lights, selectionLayer])
-
-  useEffect(() => {
-    if (api && api.enabled) {
-      if (api.selected?.length) {
-        effect.selection.set(api.selected)
-        invalidate()
-        return () => {
-          effect.selection.clear()
-          invalidate()
-        }
-      }
-    }
-  }, [api, effect.selection, invalidate])
-
-  return <primitive ref={forwardRef} object={effect} dispose={null} />
-})
+import { useThree } from '@react-three/fiber'
+import type { BloomEffectOptions } from 'postprocessing'
+import { BlendFunction, SelectiveBloomEffect } from 'postprocessing'
+import { Ref, RefObject, use, useEffect, useMemo } from 'react'
+import { Object3D } from 'three'
+import { EffectComposerContext } from '../EffectComposer'
+import { EMPTY_ARRAY, resolveRef, useDispose, useSelectionSync } from '../util'
+
+type ObjectRef = RefObject<Object3D | null>
+
+export type SelectiveBloomProps = BloomEffectOptions &
+  Partial<{
+    lights: Object3D[] | ObjectRef[]
+    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]
+    selectionLayer: number
+    inverted: boolean
+    ignoreBackground: boolean
+    ref?: Ref<SelectiveBloomEffect>
+  }>
+
+const addLight = (light: Object3D, effect: SelectiveBloomEffect) => light.layers.enable(effect.selection.layer)
+const removeLight = (light: Object3D, effect: SelectiveBloomEffect) => light.layers.disable(effect.selection.layer)
+
+export function SelectiveBloom({
+  selection = EMPTY_ARRAY,
+  selectionLayer = 10,
+  lights = EMPTY_ARRAY,
+  inverted = false,
+  ignoreBackground = false,
+  luminanceThreshold,
+  luminanceSmoothing,
+  mipmapBlur,
+  intensity,
+  radius,
+  levels,
+  kernelSize,
+  resolutionScale,
+  width,
+  height,
+  resolutionX,
+  resolutionY,
+  ref,
+}: SelectiveBloomProps) {
+  const { scene, camera } = use(EffectComposerContext)
+
+  const invalidate = useThree((state) => state.invalidate)
+
+  const effect = useMemo(() => {
+    const instance = new SelectiveBloomEffect(scene, camera, {
+      blendFunction: BlendFunction.ADD,
+      luminanceThreshold,
+      luminanceSmoothing,
+      mipmapBlur,
+      intensity,
+      radius,
+      levels,
+      kernelSize,
+      resolutionScale,
+      width,
+      height,
+      resolutionX,
+      resolutionY,
+    })
+    instance.inverted = inverted
+    instance.ignoreBackground = ignoreBackground
+    return instance
+  }, [
+    scene,
+    camera,
+    luminanceThreshold,
+    luminanceSmoothing,
+    mipmapBlur,
+    intensity,
+    radius,
+    levels,
+    kernelSize,
+    resolutionScale,
+    width,
+    height,
+    resolutionX,
+    resolutionY,
+    inverted,
+    ignoreBackground,
+  ])
+
+  // Must run before the lights effect below: addLight/removeLight read
+  // effect.selection.layer live, so it needs to already reflect the
+  // latest selectionLayer by the time lights get (re-)assigned to it.
+  useSelectionSync(effect, selection, selectionLayer)
+
+  useEffect(() => {
+    if (lights.length === 0) {
+      console.warn('SelectiveBloom requires lights to work.')
+      return
+    }
+
+    // Refs may not have attached yet - resolve and drop nullish entries
+    // rather than crashing addLight/removeLight on a null object.
+    const resolvedLights = lights.map((light) => resolveRef(light)).filter((light): light is Object3D => light != null)
+    if (resolvedLights.length === 0) return
+
+    resolvedLights.forEach((light) => addLight(light, effect))
+
+    invalidate()
+
+    return () => {
+      resolvedLights.forEach((light) => removeLight(light, effect))
+
+      invalidate()
+    }
+  }, [effect, invalidate, lights, selectionLayer])
+
+  useDispose(effect)
+
+  return <primitive ref={ref} object={effect} />
+}

package/src/effects/Sepia.tsx

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