@react-three/postprocessing 2.19.0 → 3.0.0-rc.0

package/src/effects/N8AO.tsx

@@ -0,0 +1,81 @@
+// From https://github.com/N8python/n8ao
+// https://twitter.com/N8Programs/status/1660996748485984261
+
+import { Ref, forwardRef, useLayoutEffect, useMemo } from 'react'
+/* @ts-ignore */
+import { N8AOPostPass } from 'n8ao'
+import { useThree, ReactThreeFiber, applyProps } from '@react-three/fiber'
+
+export type N8AOProps = {
+  aoRadius?: number
+  distanceFalloff?: number
+  intensity?: number
+  quality?: 'performance' | 'low' | 'medium' | 'high' | 'ultra'
+  aoSamples?: number
+  denoiseSamples?: number
+  denoiseRadius?: number
+  color?: ReactThreeFiber.Color
+  halfRes?: boolean
+  depthAwareUpsampling?: boolean
+  screenSpaceRadius?: boolean
+  renderMode?: 0 | 1 | 2 | 3 | 4
+}
+
+export const N8AO = /* @__PURE__ */ forwardRef<N8AOPostPass, N8AOProps>(
+  (
+    {
+      halfRes,
+      screenSpaceRadius,
+      quality,
+      depthAwareUpsampling = true,
+      aoRadius = 5,
+      aoSamples = 16,
+      denoiseSamples = 4,
+      denoiseRadius = 12,
+      distanceFalloff = 1,
+      intensity = 1,
+      color,
+      renderMode = 0,
+    },
+    ref: Ref<N8AOPostPass>
+  ) => {
+    const { camera, scene } = useThree()
+    const effect = useMemo(() => new N8AOPostPass(scene, camera), [camera, scene])
+
+    // TODO: implement dispose upstream; this effect has memory leaks without
+    useLayoutEffect(() => {
+      applyProps(effect.configuration, {
+        color,
+        aoRadius,
+        distanceFalloff,
+        intensity,
+        aoSamples,
+        denoiseSamples,
+        denoiseRadius,
+        screenSpaceRadius,
+        renderMode,
+        halfRes,
+        depthAwareUpsampling,
+      })
+    }, [
+      screenSpaceRadius,
+      color,
+      aoRadius,
+      distanceFalloff,
+      intensity,
+      aoSamples,
+      denoiseSamples,
+      denoiseRadius,
+      renderMode,
+      halfRes,
+      depthAwareUpsampling,
+      effect,
+    ])
+
+    useLayoutEffect(() => {
+      if (quality) effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1))
+    }, [effect, quality])
+
+    return <primitive ref={ref} object={effect} />
+  }
+)

package/src/effects/Noise.tsx

@@ -0,0 +1,4 @@
+import { NoiseEffect, BlendFunction } from 'postprocessing'
+import { wrapEffect } from '../util.tsx'
+
+export const Noise = /* @__PURE__ */ wrapEffect(NoiseEffect, { blendFunction: BlendFunction.COLOR_DODGE })

package/src/effects/Outline.tsx

@@ -0,0 +1,117 @@
+import { OutlineEffect } from 'postprocessing'
+import { Ref, RefObject, forwardRef, useMemo, useEffect, useContext, useRef } from 'react'
+import { Object3D } from 'three'
+import { useThree } from '@react-three/fiber'
+import { EffectComposerContext } from '../EffectComposer.tsx'
+import { selectionContext } from '../Selection.tsx'
+import { resolveRef } from '../util.tsx'
+
+type ObjectRef = RefObject<Object3D>
+
+export type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &
+  Partial<{
+    selection: Object3D | Object3D[] | ObjectRef | ObjectRef[]
+    selectionLayer: number
+  }>
+
+export const Outline = /* @__PURE__ */ forwardRef(function Outline(
+  {
+    selection = [],
+    selectionLayer = 10,
+    blendFunction,
+    patternTexture,
+    edgeStrength,
+    pulseSpeed,
+    visibleEdgeColor,
+    hiddenEdgeColor,
+    width,
+    height,
+    kernelSize,
+    blur,
+    xRay,
+    ...props
+  }: OutlineProps,
+  forwardRef: Ref<OutlineEffect>
+) {
+  const invalidate = useThree((state) => state.invalidate)
+  const { scene, camera } = useContext(EffectComposerContext)
+
+  const effect = useMemo(
+    () =>
+      new OutlineEffect(scene, camera, {
+        blendFunction,
+        patternTexture,
+        edgeStrength,
+        pulseSpeed,
+        visibleEdgeColor,
+        hiddenEdgeColor,
+        width,
+        height,
+        kernelSize,
+        blur,
+        xRay,
+        ...props,
+      }),
+    // NOTE: `props` is an unstable reference, so we can't memoize it
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      blendFunction,
+      blur,
+      camera,
+      edgeStrength,
+      height,
+      hiddenEdgeColor,
+      kernelSize,
+      patternTexture,
+      pulseSpeed,
+      scene,
+      visibleEdgeColor,
+      width,
+      xRay,
+    ]
+  )
+
+  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.selectionLayer = selectionLayer
+    invalidate()
+  }, [effect, invalidate, selectionLayer])
+
+  const ref = useRef<OutlineEffect>(undefined)
+  useEffect(() => {
+    if (api && api.enabled) {
+      if (api.selected?.length) {
+        effect.selection.set(api.selected)
+        invalidate()
+        return () => {
+          effect.selection.clear()
+          invalidate()
+        }
+      }
+    }
+  }, [api, effect.selection, invalidate])
+
+  useEffect(() => {
+    return () => {
+      effect.dispose()
+    }
+  }, [effect])
+
+  return <primitive ref={forwardRef} object={effect} />
+})

package/src/effects/Pixelation.tsx

@@ -0,0 +1,15 @@
+import { forwardRef, useMemo, Ref } from 'react'
+import { PixelationEffect } from 'postprocessing'
+
+export type PixelationProps = {
+  granularity?: number
+}
+
+export const Pixelation = /* @__PURE__ */ forwardRef<PixelationEffect, PixelationProps>(function Pixelation(
+  { granularity = 5 }: PixelationProps,
+  ref: Ref<PixelationEffect>
+) {
+  /** 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])
+  return <primitive ref={ref} object={effect} dispose={null} />
+})

package/{dist/effects/Ramp.js → src/effects/Ramp.tsx}

@@ -1,156 +1,150 @@
-import { Uniform } from "three";
-import { Effect } from "postprocessing";
-import { wrapEffect } from "../util.js";
-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);
-      }
-    }
-  `
-  )
-};
-var RampType = /* @__PURE__ */ ((RampType2) => {
-  RampType2[RampType2["Linear"] = 0] = "Linear";
-  RampType2[RampType2["Radial"] = 1] = "Radial";
-  RampType2[RampType2["MirroredLinear"] = 2] = "MirroredLinear";
-  return RampType2;
-})(RampType || {});
-class RampEffect extends Effect {
-  constructor({
-    /**
-     * Type of ramp gradient.
-     */
-    rampType = 0,
-    /**
-     * 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: /* @__PURE__ */ new Map([
-        ["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)]
-      ])
-    });
-  }
-}
-const Ramp = /* @__PURE__ */ wrapEffect(RampEffect);
-export {
-  Ramp,
-  RampEffect,
-  RampType
-};
-//# sourceMappingURL=Ramp.js.map
+import { Uniform } from 'three'
+import { Effect } from 'postprocessing'
+import { wrapEffect } from '../util.tsx'
+
+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

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

package/src/effects/SSAO.tsx

@@ -0,0 +1,41 @@
+import { Ref, forwardRef, useContext, useMemo } from 'react'
+import { SSAOEffect, BlendFunction } from 'postprocessing'
+import { EffectComposerContext } from '../EffectComposer.tsx'
+
+// 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} />
+})

package/src/effects/ScanlineEffect.tsx

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