@react-three/postprocessing 3.0.4 → 3.1.0

package/src/effects/TiltShift2.tsx

@@ -1,90 +1,156 @@
-import { Uniform } from 'three'
-import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
-import { wrapEffect } from '../util'
-
-const TiltShiftShader = {
-  fragmentShader: `
-
-    // original shader by Evan Wallace
-
-    #define MAX_ITERATIONS 100
-
-    uniform float blur;
-    uniform float taper;
-    uniform vec2 start;
-    uniform vec2 end;
-    uniform vec2 direction;
-    uniform int samples;
-
-    float random(vec3 scale, float seed) {
-        /* use the fragment position for a different seed per-pixel */
-        return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
-    }
-
-    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
-        vec4 color = vec4(0.0);
-        float total = 0.0;
-        vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);
-        vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);
-        float f_samples = float(samples);
-        float half_samples = f_samples / 2.0;
-
-        // use screen diagonal to normalize blur radii
-        float maxScreenDistance = distance(vec2(0.0), resolution); // diagonal distance
-        float gradientRadius = taper * (maxScreenDistance);
-        float blurRadius = blur * (maxScreenDistance / 16.0);
-
-        /* randomize the lookup values to hide the fixed number of samples */
-        float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
-        vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));
-        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradientRadius) * blurRadius;
-
-        #pragma unroll_loop_start
-        for (int i = 0; i <= MAX_ITERATIONS; i++) {
-            if (i >= samples) { break; } // return early if over sample count
-            float f_i = float(i);
-            float s_i = -half_samples + f_i;
-            float percent = (s_i + offset - 0.5) / half_samples;
-            float weight = 1.0 - abs(percent);
-            vec4 sample_i = texture2D(inputBuffer, uv + normalize(direction) / resolution * percent * radius);
-            /* switch to pre-multiplied alpha to correctly blur transparent images */
-            sample_i.rgb *= sample_i.a;
-            color += sample_i * weight;
-            total += weight;
-        }
-        #pragma unroll_loop_end
-
-        outputColor = color / total;
-
-        /* switch back from pre-multiplied alpha */
-        outputColor.rgb /= outputColor.a + 0.00001;
-    }
-    `,
-}
-
-export class TiltShiftEffect extends Effect {
-  constructor({
-    blendFunction = BlendFunction.NORMAL,
-    blur = 0.15, // [0, 1], can go beyond 1 for extra
-    taper = 0.5, // [0, 1], can go beyond 1 for extra
-    start = [0.5, 0.0], // [0,1] percentage x,y of screenspace
-    end = [0.5, 1.0], // [0,1] percentage x,y of screenspace
-    samples = 10.0, // number of blur samples
-    direction = [1, 1], // direction of blur
-  } = {}) {
-    super('TiltShiftEffect', TiltShiftShader.fragmentShader, {
-      blendFunction,
-      attributes: EffectAttribute.CONVOLUTION,
-      uniforms: new Map<string, Uniform<number | number[]>>([
-        ['blur', new Uniform(blur)],
-        ['taper', new Uniform(taper)],
-        ['start', new Uniform(start)],
-        ['end', new Uniform(end)],
-        ['samples', new Uniform(samples)],
-        ['direction', new Uniform(direction)],
-      ]),
-    })
-  }
-}
-
-export const TiltShift2 = /* @__PURE__ */ wrapEffect(TiltShiftEffect, { blendFunction: BlendFunction.NORMAL })
+import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import type { Ref } from 'react'
+import { Uniform } from 'three'
+import { createEffectComponent } from '../createEffectComponent'
+
+const TiltShiftShader = {
+  fragmentShader: /* glsl */ `
+
+    // original shader by Evan Wallace
+
+    #define MAX_ITERATIONS 100
+
+    uniform float blur;
+    uniform float taper;
+    uniform vec2 start;
+    uniform vec2 end;
+    uniform vec2 direction;
+    uniform int samples;
+
+    float random(vec3 scale, float seed) {
+        /* use the fragment position for a different seed per-pixel */
+        return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
+    }
+
+    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+        vec4 color = vec4(0.0);
+        float total = 0.0;
+        vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);
+        vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);
+        float f_samples = float(samples);
+        float half_samples = f_samples / 2.0;
+
+        // use screen diagonal to normalize blur radii
+        float maxScreenDistance = distance(vec2(0.0), resolution); // diagonal distance
+        float gradientRadius = taper * (maxScreenDistance);
+        float blurRadius = blur * (maxScreenDistance / 16.0);
+
+        /* randomize the lookup values to hide the fixed number of samples */
+        float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
+        vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));
+        float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradientRadius) * blurRadius;
+
+        #pragma unroll_loop_start
+        for (int i = 0; i <= MAX_ITERATIONS; i++) {
+            if (i >= samples) { break; } // return early if over sample count
+            float f_i = float(i);
+            float s_i = -half_samples + f_i;
+            float percent = (s_i + offset - 0.5) / half_samples;
+            float weight = 1.0 - abs(percent);
+            vec4 sample_i = texture2D(inputBuffer, uv + normalize(direction) / resolution * percent * radius);
+            /* switch to pre-multiplied alpha to correctly blur transparent images */
+            sample_i.rgb *= sample_i.a;
+            color += sample_i * weight;
+            total += weight;
+        }
+        #pragma unroll_loop_end
+
+        outputColor = color / total;
+
+        /* switch back from pre-multiplied alpha */
+        outputColor.rgb /= outputColor.a + 0.00001;
+    }
+    `,
+}
+
+type Vec2Tuple = [number, number]
+
+export class TiltShiftEffect extends Effect {
+  constructor({
+    blendFunction = BlendFunction.NORMAL,
+    blur = 0.15, // [0, 1], can go beyond 1 for extra
+    taper = 0.5, // [0, 1], can go beyond 1 for extra
+    start = [0.5, 0.0] as Vec2Tuple, // [0,1] percentage x,y of screenspace
+    end = [0.5, 1.0] as Vec2Tuple, // [0,1] percentage x,y of screenspace
+    samples = 10.0, // number of blur samples
+    direction = [1, 1] as Vec2Tuple, // direction of blur
+  } = {}) {
+    super('TiltShiftEffect', TiltShiftShader.fragmentShader, {
+      blendFunction,
+      attributes: EffectAttribute.CONVOLUTION,
+      uniforms: new Map<string, Uniform<number | Vec2Tuple>>([
+        ['blur', new Uniform(blur)],
+        ['taper', new Uniform(taper)],
+        ['start', new Uniform(start)],
+        ['end', new Uniform(end)],
+        ['samples', new Uniform(samples)],
+        ['direction', new Uniform(direction)],
+      ]),
+    })
+  }
+
+  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 blur(): number {
+    return this.u('blur')
+  }
+  set blur(value: number) {
+    this.setU('blur', value)
+  }
+
+  get taper(): number {
+    return this.u('taper')
+  }
+  set taper(value: number) {
+    this.setU('taper', value)
+  }
+
+  get start(): Vec2Tuple {
+    return this.u('start')
+  }
+  set start(value: Vec2Tuple) {
+    this.setU('start', value)
+  }
+
+  get end(): Vec2Tuple {
+    return this.u('end')
+  }
+  set end(value: Vec2Tuple) {
+    this.setU('end', value)
+  }
+
+  get samples(): number {
+    return this.u('samples')
+  }
+  set samples(value: number) {
+    this.setU('samples', value)
+  }
+
+  get direction(): Vec2Tuple {
+    return this.u('direction')
+  }
+  set direction(value: Vec2Tuple) {
+    this.setU('direction', value)
+  }
+}
+
+export type TiltShift2Props = {
+  blendFunction?: BlendFunction
+  blur?: number
+  taper?: number
+  start?: Vec2Tuple
+  end?: Vec2Tuple
+  samples?: number
+  direction?: Vec2Tuple
+  ref?: Ref<TiltShiftEffect>
+}
+
+export const TiltShift2 = /* @__PURE__ */ createEffectComponent<typeof TiltShiftEffect, TiltShift2Props>(
+  TiltShiftEffect
+)

package/src/effects/ToneMapping.tsx

@@ -1,6 +1,19 @@
-import { ToneMappingEffect } from 'postprocessing'
-import { type EffectProps, wrapEffect } from '../util'
-
-export type ToneMappingProps = EffectProps<typeof ToneMappingEffect>
-
-export const ToneMapping = /* @__PURE__ */ wrapEffect(ToneMappingEffect)
+import { ToneMappingEffect } from 'postprocessing'
+import type { Ref } from 'react'
+import { useMemo } from 'react'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
+
+type ToneMappingOptions = EffectOptions<typeof ToneMappingEffect>
+
+const ToneMappingImpl = /* @__PURE__ */ createEffectComponent<typeof ToneMappingEffect, ToneMappingOptions>(
+  ToneMappingEffect
+)
+
+export type ToneMappingProps = ToneMappingOptions & { opacity?: number; ref?: Ref<ToneMappingEffect> }
+
+// minLuminance/maxLuminance have no live setter in postprocessing - routed
+// through args so they still work as plain props.
+export function ToneMapping({ minLuminance, maxLuminance, ...liveProps }: ToneMappingProps) {
+  const args = useMemo<[ToneMappingOptions]>(() => [{ minLuminance, maxLuminance }], [minLuminance, maxLuminance])
+  return <ToneMappingImpl args={args} {...liveProps} />
+}

package/src/effects/Vignette.tsx

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

package/src/effects/Water.tsx

@@ -1,35 +1,50 @@
-import { Uniform } from 'three'
-import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
-import { wrapEffect } from '../util'
-
-const WaterShader = {
-  fragmentShader: /* glsl */ `
-    uniform float factor;
-
-    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
-      vec2 vUv = uv;
-      float frequency = 6.0 * factor;
-      float amplitude = 0.015 * factor;
-      float x = vUv.y * frequency + time * 0.7; 
-      float y = vUv.x * frequency + time * 0.3;
-      vUv.x += cos(x + y) * amplitude * cos(y);
-      vUv.y += sin(x - y) * amplitude * cos(y);
-      vec4 rgba = texture(inputBuffer, vUv);
-      outputColor = rgba;
-    }
-  `,
-}
-
-export class WaterEffectImpl extends Effect {
-  constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {
-    super('WaterEffect', WaterShader.fragmentShader, {
-      blendFunction,
-      attributes: EffectAttribute.CONVOLUTION,
-      uniforms: new Map<string, Uniform<number | number[]>>([['factor', new Uniform(factor)]]),
-    })
-  }
-}
-
-export const WaterEffect = /* @__PURE__ */ wrapEffect(WaterEffectImpl, {
-  blendFunction: BlendFunction.NORMAL,
-})
+import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import type { Ref } from 'react'
+import { Uniform } from 'three'
+import { createEffectComponent } from '../createEffectComponent'
+
+const WaterShader = {
+  fragmentShader: /* glsl */ `
+    uniform float factor;
+
+    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+      vec2 vUv = uv;
+      float frequency = 6.0 * factor;
+      float amplitude = 0.015 * factor;
+      float x = vUv.y * frequency + time * 0.7;
+      float y = vUv.x * frequency + time * 0.3;
+      vUv.x += cos(x + y) * amplitude * cos(y);
+      vUv.y += sin(x - y) * amplitude * cos(y);
+      vec4 rgba = texture(inputBuffer, vUv);
+      outputColor = rgba;
+    }
+  `,
+}
+
+export class WaterEffectImpl extends Effect {
+  constructor({ blendFunction = BlendFunction.NORMAL, factor = 0 } = {}) {
+    super('WaterEffect', WaterShader.fragmentShader, {
+      blendFunction,
+      attributes: EffectAttribute.CONVOLUTION,
+      uniforms: new Map<string, Uniform<number>>([['factor', new Uniform(factor)]]),
+    })
+  }
+
+  get factor(): number {
+    return this.uniforms.get('factor')!.value
+  }
+
+  set factor(value: number) {
+    this.uniforms.get('factor')!.value = value
+  }
+}
+
+export type WaterEffectProps = {
+  blendFunction?: BlendFunction
+  factor?: number
+  ref?: Ref<WaterEffectImpl>
+}
+
+export const WaterEffect = /* @__PURE__ */ createEffectComponent<typeof WaterEffectImpl, WaterEffectProps>(
+  WaterEffectImpl
+)

package/src/index.ts

@@ -1,40 +1,43 @@
-export * from './Selection'
-export * from './EffectComposer'
-export * from './util'
-
-export * from './effects/Autofocus'
-export * from './effects/LensFlare'
-export * from './effects/Bloom'
-export * from './effects/BrightnessContrast'
-export * from './effects/ChromaticAberration'
-export * from './effects/ColorAverage'
-export * from './effects/ColorDepth'
-export * from './effects/Depth'
-export * from './effects/DepthOfField'
-export * from './effects/DotScreen'
-export * from './effects/Glitch'
-export * from './effects/GodRays'
-export * from './effects/Grid'
-export * from './effects/HueSaturation'
-export * from './effects/Noise'
-export * from './effects/Outline'
-export * from './effects/Pixelation'
-export * from './effects/ScanlineEffect'
-export * from './effects/SelectiveBloom'
-export * from './effects/Sepia'
-export * from './effects/SSAO'
-export * from './effects/SMAA'
-export * from './effects/FXAA'
-export * from './effects/Ramp'
-export * from './effects/Texture'
-export * from './effects/ToneMapping'
-export * from './effects/Vignette'
-export * from './effects/ShockWave'
-export * from './effects/LUT'
-export * from './effects/TiltShift'
-export * from './effects/TiltShift2'
-export * from './effects/ASCII'
-export * from './effects/Water'
-
-// These are not effect passes
-export * from './effects/N8AO'
+export * from './createEffectComponent'
+export * from './EffectComposer'
+export * from './EffectGroup'
+export * from './Selection'
+export * from './util'
+export * from './wrapEffect'
+
+export * from './effects/ASCII'
+export * from './effects/Autofocus'
+export * from './effects/Bloom'
+export * from './effects/BrightnessContrast'
+export * from './effects/ChromaticAberration'
+export * from './effects/ColorAverage'
+export * from './effects/ColorDepth'
+export * from './effects/Depth'
+export * from './effects/DepthOfField'
+export * from './effects/DotScreen'
+export * from './effects/FXAA'
+export * from './effects/Glitch'
+export * from './effects/GodRays'
+export * from './effects/Grid'
+export * from './effects/HueSaturation'
+export * from './effects/LensFlare'
+export * from './effects/LUT'
+export * from './effects/Noise'
+export * from './effects/Outline'
+export * from './effects/Pixelation'
+export * from './effects/Ramp'
+export * from './effects/ScanlineEffect'
+export * from './effects/SelectiveBloom'
+export * from './effects/Sepia'
+export * from './effects/ShockWave'
+export * from './effects/SMAA'
+export * from './effects/SSAO'
+export * from './effects/Texture'
+export * from './effects/TiltShift'
+export * from './effects/TiltShift2'
+export * from './effects/ToneMapping'
+export * from './effects/Vignette'
+export * from './effects/Water'
+
+export * from './passes/DepthPicking'
+export * from './passes/N8AO'

package/src/passes/DepthPicking.tsx

@@ -0,0 +1,63 @@
+import { useThree } from '@react-three/fiber'
+import { CopyPass, DepthPickingPass as DepthPickingPassImpl } from 'postprocessing'
+import { use, useCallback, useEffect, useImperativeHandle, useState, type Ref } from 'react'
+import type { Camera } from 'three'
+import { Vector2, Vector3 } from 'three'
+import { EffectComposerContext } from '../EffectComposer'
+import { useDispose } from '../util'
+
+export type DepthPickingApi = {
+  readDepth: (ndc: Vector2 | Vector3) => Promise<number>
+}
+
+export type DepthPickingProps = {
+  ref?: Ref<DepthPickingApi>
+}
+
+// Mounts a vanilla `postprocessing` DepthPickingPass and exposes its
+// `readDepth` via ref - nothing else. Renders nothing. Pair with
+// `useDepthPicking` for a world-space position instead of raw depth.
+export function DepthPicking({ ref }: DepthPickingProps) {
+  const { composer } = use(EffectComposerContext)
+
+  const [depthPickingPass] = useState(() => new DepthPickingPassImpl())
+  const [copyPass] = useState(() => new CopyPass())
+  useEffect(() => {
+    composer.addPass(depthPickingPass)
+    composer.addPass(copyPass)
+    return () => {
+      composer.removePass(depthPickingPass)
+      composer.removePass(copyPass)
+    }
+  }, [composer, depthPickingPass, copyPass])
+
+  useDispose(depthPickingPass)
+  useDispose(copyPass)
+
+  useImperativeHandle(ref, () => ({ readDepth: (ndc) => depthPickingPass.readDepth(ndc) }), [depthPickingPass])
+
+  return null
+}
+
+export function useDepthPicking(pass: React.RefObject<DepthPickingApi | null>, camera?: Camera) {
+  const composerCamera = use(EffectComposerContext)?.camera
+  const defaultCamera = useThree((state) => state.camera)
+  const resolvedCamera = camera ?? composerCamera ?? defaultCamera
+  const [ndc] = useState(() => new Vector3())
+
+  return useCallback(
+    async (x: number, y: number): Promise<Vector3 | false> => {
+      if (!pass.current) return false
+      ndc.x = x
+      ndc.y = y
+      ndc.z = await pass.current.readDepth(ndc)
+      ndc.z = ndc.z * 2.0 - 1.0
+      const hit = 1 - ndc.z > 0.0000001 // missed if ndc.z is close to 1
+      // clone - unproject mutates in place, and ndc is reused across calls,
+      // so returning it directly would hand out a reference that changes
+      // under the caller on the next pick.
+      return hit ? ndc.clone().unproject(resolvedCamera) : false
+    },
+    [pass, resolvedCamera, ndc]
+  )
+}

package/src/passes/N8AO.tsx

@@ -0,0 +1,105 @@
+// From https://github.com/N8python/n8ao
+// https://twitter.com/N8Programs/status/1660996748485984261
+
+import { ReactThreeFiber, applyProps, useThree } from '@react-three/fiber'
+import { Ref, useLayoutEffect, useMemo } from 'react'
+/* @ts-ignore */
+import { N8AOPostPass } from 'n8ao'
+import { groupPasses } from '../EffectComposer'
+import { useDispose } from '../util'
+
+export type N8AOProps = {
+  enabled?: boolean
+  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
+  ref?: Ref<N8AOPostPass>
+}
+
+export function N8AO({
+  enabled = true,
+  halfRes,
+  screenSpaceRadius,
+  quality,
+  depthAwareUpsampling = true,
+  aoRadius = 5,
+  aoSamples = 16,
+  denoiseSamples = 4,
+  denoiseRadius = 12,
+  distanceFalloff = 1,
+  intensity = 1,
+  color,
+  renderMode = 0,
+  ref,
+}: N8AOProps) {
+  const { camera, scene, invalidate } = useThree()
+  const effect = useMemo(() => {
+    const instance = new N8AOPostPass(scene, camera)
+    // N8AOPostPass isn't a postprocessing Effect, so it's not mergeable via
+    // EffectGroup - it's already a standalone Pass, hence its own `enabled`
+    // prop below instead. Registering it here still gets it the shared
+    // trailing CopyPass safety net (see EffectComposer.tsx) so disabling it
+    // while it's the last pass in the chain doesn't blank the canvas.
+    groupPasses.add(instance)
+    return instance
+  }, [camera, scene])
+
+  // TODO: implement dispose upstream; this effect has memory leaks without
+  useDispose(effect)
+
+  useLayoutEffect(() => {
+    effect.enabled = enabled
+    invalidate()
+  }, [effect, enabled, invalidate])
+
+  useLayoutEffect(() => {
+    applyProps(effect.configuration, {
+      color,
+      aoRadius,
+      distanceFalloff,
+      intensity,
+      aoSamples,
+      denoiseSamples,
+      denoiseRadius,
+      screenSpaceRadius,
+      renderMode,
+      halfRes,
+      depthAwareUpsampling,
+    })
+    // effect.configuration is a plain object, never r3f-managed - applyProps'
+    // own invalidate (gated behind object.__r3f) never fires for it.
+    invalidate()
+  }, [
+    screenSpaceRadius,
+    color,
+    aoRadius,
+    distanceFalloff,
+    intensity,
+    aoSamples,
+    denoiseSamples,
+    denoiseRadius,
+    renderMode,
+    halfRes,
+    depthAwareUpsampling,
+    effect,
+    invalidate,
+  ])
+
+  useLayoutEffect(() => {
+    if (quality) {
+      effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1))
+      invalidate()
+    }
+  }, [effect, quality, invalidate])
+
+  return <primitive ref={ref} object={effect} />
+}