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

package/src/effects/ASCII.tsx

@@ -0,0 +1,135 @@
+// From: https://github.com/emilwidlund/ASCII
+// https://twitter.com/emilwidlund/status/1652386482420609024
+
+import { forwardRef, useMemo } from 'react'
+import { CanvasTexture, Color, NearestFilter, RepeatWrapping, Texture, Uniform } from 'three'
+import { Effect } from 'postprocessing'
+
+const fragment = `
+uniform sampler2D uCharacters;
+uniform float uCharactersCount;
+uniform float uCellSize;
+uniform bool uInvert;
+uniform vec3 uColor;
+
+const vec2 SIZE = vec2(16.);
+
+vec3 greyscale(vec3 color, float strength) {
+    float g = dot(color, vec3(0.299, 0.587, 0.114));
+    return mix(color, vec3(g), strength);
+}
+
+vec3 greyscale(vec3 color) {
+    return greyscale(color, 1.0);
+}
+
+void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+    vec2 cell = resolution / uCellSize;
+    vec2 grid = 1.0 / cell;
+    vec2 pixelizedUV = grid * (0.5 + floor(uv / grid));
+    vec4 pixelized = texture2D(inputBuffer, pixelizedUV);
+    float greyscaled = greyscale(pixelized.rgb).r;
+
+    if (uInvert) {
+        greyscaled = 1.0 - greyscaled;
+    }
+
+    float characterIndex = floor((uCharactersCount - 1.0) * greyscaled);
+    vec2 characterPosition = vec2(mod(characterIndex, SIZE.x), floor(characterIndex / SIZE.y));
+    vec2 offset = vec2(characterPosition.x, -characterPosition.y) / SIZE;
+    vec2 charUV = mod(uv * (cell / SIZE), 1.0 / SIZE) - vec2(0., 1.0 / SIZE) + offset;
+    vec4 asciiCharacter = texture2D(uCharacters, charUV);
+
+    asciiCharacter.rgb = uColor * asciiCharacter.r;
+    asciiCharacter.a = pixelized.a;
+    outputColor = asciiCharacter;
+}
+`
+
+interface IASCIIEffectProps {
+  font?: string
+  characters?: string
+  fontSize?: number
+  cellSize?: number
+  color?: string
+  invert?: boolean
+}
+
+class ASCIIEffect extends Effect {
+  constructor({
+    font = 'arial',
+    characters = ` .:,'-^=*+?!|0#X%WM@`,
+    fontSize = 54,
+    cellSize = 16,
+    color = '#ffffff',
+    invert = false,
+  }: IASCIIEffectProps = {}) {
+    const uniforms = new Map<string, Uniform>([
+      ['uCharacters', new Uniform(new Texture())],
+      ['uCellSize', new Uniform(cellSize)],
+      ['uCharactersCount', new Uniform(characters.length)],
+      ['uColor', new Uniform(new Color(color))],
+      ['uInvert', new Uniform(invert)],
+    ])
+
+    super('ASCIIEffect', fragment, { uniforms })
+
+    const charactersTextureUniform = this.uniforms.get('uCharacters')
+
+    if (charactersTextureUniform) {
+      charactersTextureUniform.value = this.createCharactersTexture(characters, font, fontSize)
+    }
+  }
+
+  /** Draws the characters on a Canvas and returns a texture */
+  public createCharactersTexture(characters: string, font: string, fontSize: number): THREE.Texture {
+    const canvas = document.createElement('canvas')
+    const SIZE = 1024
+    const MAX_PER_ROW = 16
+    const CELL = SIZE / MAX_PER_ROW
+
+    canvas.width = canvas.height = SIZE
+    const texture = new CanvasTexture(canvas, undefined, RepeatWrapping, RepeatWrapping, NearestFilter, NearestFilter)
+    const context = canvas.getContext('2d')
+
+    if (!context) {
+      throw new Error('Context not available')
+    }
+
+    context.clearRect(0, 0, SIZE, SIZE)
+    context.font = `${fontSize}px ${font}`
+    context.textAlign = 'center'
+    context.textBaseline = 'middle'
+    context.fillStyle = '#fff'
+
+    for (let i = 0; i < characters.length; i++) {
+      const char = characters[i]
+      const x = i % MAX_PER_ROW
+      const y = Math.floor(i / MAX_PER_ROW)
+      context.fillText(char, x * CELL + CELL / 2, y * CELL + CELL / 2)
+    }
+
+    texture.needsUpdate = true
+    return texture
+  }
+}
+
+export const ASCII = /* @__PURE__ */ forwardRef<ASCIIEffect, IASCIIEffectProps>(
+  (
+    {
+      font = 'arial',
+      characters = ` .:,'-^=*+?!|0#X%WM@`,
+      fontSize = 54,
+      cellSize = 16,
+      color = '#ffffff',
+      invert = false,
+    },
+    fref
+  ) => {
+    const effect = useMemo(
+      () => new ASCIIEffect({ characters, font, fontSize, cellSize, color, invert }),
+      [characters, fontSize, cellSize, color, invert, font]
+    )
+    return <primitive ref={fref} object={effect} />
+  }
+)

package/src/effects/Autofocus.tsx

@@ -0,0 +1,153 @@
+import * as THREE from 'three'
+import React, {
+  useRef,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  forwardRef,
+  useImperativeHandle,
+  RefObject,
+  useMemo,
+} from 'react'
+import { useThree, useFrame, createPortal, type Vector3 } from '@react-three/fiber'
+import { CopyPass, DepthPickingPass, DepthOfFieldEffect } from 'postprocessing'
+import { easing } from 'maath'
+
+import { DepthOfField } from './DepthOfField.tsx'
+import { EffectComposerContext } from '../EffectComposer.tsx'
+
+export type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {
+  target?: Vector3
+  /** should the target follow the pointer */
+  mouse?: boolean
+  /** size of the debug green point  */
+  debug?: number
+  /** manual update */
+  manual?: boolean
+  /** approximate time to reach the target */
+  smoothTime?: number
+}
+
+export type AutofocusApi = {
+  dofRef: RefObject<DepthOfFieldEffect | null>
+  hitpoint: THREE.Vector3
+  update: (delta: number, updateTarget: boolean) => void
+}
+
+export const Autofocus = /* @__PURE__ */ forwardRef<AutofocusApi, AutofocusProps>(
+  (
+    { target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0.25, ...props },
+    fref
+  ) => {
+    const dofRef = useRef<DepthOfFieldEffect>(null)
+    const hitpointRef = useRef<THREE.Mesh>(null)
+    const targetRef = useRef<THREE.Mesh>(null)
+
+    const scene = useThree(({ scene }) => scene)
+    const pointer = useThree(({ pointer }) => pointer)
+    const { composer, camera } = useContext(EffectComposerContext)
+
+    // see: https://codesandbox.io/s/depthpickingpass-x130hg
+    const [depthPickingPass] = useState(() => new DepthPickingPass())
+    const [copyPass] = useState(() => new CopyPass())
+    useEffect(() => {
+      composer.addPass(depthPickingPass)
+      composer.addPass(copyPass)
+      return () => {
+        composer.removePass(depthPickingPass)
+        composer.removePass(copyPass)
+      }
+    }, [composer, depthPickingPass, copyPass])
+
+    useEffect(() => {
+      return () => {
+        depthPickingPass.dispose()
+        copyPass.dispose()
+      }
+    }, [depthPickingPass, copyPass])
+
+    const [hitpoint] = useState(() => new THREE.Vector3(0, 0, 0))
+
+    const [ndc] = useState(() => new THREE.Vector3(0, 0, 0))
+    const getHit = useCallback(
+      async (x: number, y: number) => {
+        ndc.x = x
+        ndc.y = y
+        ndc.z = await depthPickingPass.readDepth(ndc)
+        ndc.z = ndc.z * 2.0 - 1.0
+        const hit = 1 - ndc.z > 0.0000001 // it is missed if ndc.z is close to 1
+        return hit ? ndc.unproject(camera) : false
+      },
+      [ndc, depthPickingPass, camera]
+    )
+
+    const update = useCallback(
+      async (delta: number, updateTarget = true) => {
+        // Update hitpoint
+        if (target) {
+          hitpoint.set(...(target as [number, number, number]))
+        } else {
+          const { x, y } = followMouse ? pointer : { x: 0, y: 0 }
+          const hit = await getHit(x, y)
+          if (hit) hitpoint.copy(hit)
+        }
+
+        // Update target
+        if (updateTarget && dofRef.current?.target) {
+          if (smoothTime > 0 && delta > 0) {
+            easing.damp3(dofRef.current.target, hitpoint, smoothTime, delta)
+          } else {
+            dofRef.current.target.copy(hitpoint)
+          }
+        }
+      },
+      [target, hitpoint, followMouse, getHit, smoothTime, pointer]
+    )
+
+    useFrame(async (_, delta) => {
+      if (!manual) {
+        update(delta)
+      }
+      if (hitpointRef.current) {
+        hitpointRef.current.position.copy(hitpoint)
+      }
+      if (targetRef.current && dofRef.current?.target) {
+        targetRef.current.position.copy(dofRef.current.target)
+      }
+    })
+
+    // Ref API
+    const api = useMemo<AutofocusApi>(
+      () => ({
+        dofRef,
+        hitpoint,
+        update,
+      }),
+      [hitpoint, update]
+    )
+    useImperativeHandle(fref, () => api, [api])
+
+    return (
+      <>
+        {debug
+          ? createPortal(
+              <>
+                <mesh ref={hitpointRef}>
+                  <sphereGeometry args={[debug, 16, 16]} />
+                  <meshBasicMaterial color="#00ff00" opacity={1} transparent depthWrite={false} />
+                </mesh>
+                <mesh ref={targetRef}>
+                  <sphereGeometry args={[debug / 2, 16, 16]} />
+                  <meshBasicMaterial color="#00ff00" opacity={0.5} transparent depthWrite={false} />
+                </mesh>
+              </>,
+              scene
+            )
+          : null}
+
+        <DepthOfField ref={dofRef} {...props} target={hitpoint} />
+      </>
+    )
+  }
+)

package/src/effects/Bloom.tsx

@@ -0,0 +1,6 @@
+import { BloomEffect, BlendFunction } from 'postprocessing'
+import { wrapEffect } from '../util.tsx'
+
+export const Bloom = /* @__PURE__ */ wrapEffect(BloomEffect, {
+  blendFunction: BlendFunction.ADD,
+})

package/src/effects/BrightnessContrast.tsx

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

package/src/effects/ChromaticAberration.tsx

@@ -0,0 +1,5 @@
+import { ChromaticAberrationEffect } from 'postprocessing'
+import { type EffectProps, wrapEffect } from '../util.tsx'
+
+export type ChromaticAberrationProps = EffectProps<typeof ChromaticAberrationEffect>
+export const ChromaticAberration = /* @__PURE__ */ wrapEffect(ChromaticAberrationEffect)

package/src/effects/ColorAverage.tsx

@@ -0,0 +1,15 @@
+import { ColorAverageEffect, BlendFunction } from 'postprocessing'
+import React, { Ref, forwardRef, useMemo } from 'react'
+
+export type ColorAverageProps = Partial<{
+  blendFunction: BlendFunction
+}>
+
+export const ColorAverage = /* @__PURE__ */ forwardRef<ColorAverageEffect, ColorAverageProps>(function ColorAverage(
+  { blendFunction = BlendFunction.NORMAL }: ColorAverageProps,
+  ref: Ref<ColorAverageEffect>
+) {
+  /** Because ColorAverage blendFunction is not an object but a number, we have to define a custom prop "blendFunction" */
+  const effect = useMemo(() => new ColorAverageEffect(blendFunction), [blendFunction])
+  return <primitive ref={ref} object={effect} dispose={null} />
+})

package/src/effects/ColorDepth.tsx

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

package/src/effects/Depth.tsx

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

package/src/effects/DepthOfField.tsx

@@ -0,0 +1,89 @@
+import { DepthOfFieldEffect, MaskFunction } from 'postprocessing'
+import { Ref, forwardRef, useMemo, useEffect, useContext } from 'react'
+import { ReactThreeFiber } from '@react-three/fiber'
+import { type DepthPackingStrategies, type Texture, Vector3 } from 'three'
+import { EffectComposerContext } from '../EffectComposer.tsx'
+
+type DOFProps = ConstructorParameters<typeof DepthOfFieldEffect>[1] &
+  Partial<{
+    target: ReactThreeFiber.Vector3
+    depthTexture: {
+      texture: Texture
+      // TODO: narrow to DepthPackingStrategies
+      packing: number
+    }
+    // TODO: not used
+    blur: number
+  }>
+
+export const DepthOfField = /* @__PURE__ */ forwardRef(function DepthOfField(
+  {
+    blendFunction,
+    worldFocusDistance,
+    worldFocusRange,
+    focusDistance,
+    focusRange,
+    focalLength,
+    bokehScale,
+    resolutionScale,
+    resolutionX,
+    resolutionY,
+    width,
+    height,
+    target,
+    depthTexture,
+    ...props
+  }: DOFProps,
+  ref: Ref<DepthOfFieldEffect>
+) {
+  const { camera } = useContext(EffectComposerContext)
+  const autoFocus = target != null
+  const effect = useMemo(() => {
+    const effect = new DepthOfFieldEffect(camera, {
+      blendFunction,
+      worldFocusDistance,
+      worldFocusRange,
+      focusDistance,
+      focusRange,
+      focalLength,
+      bokehScale,
+      resolutionScale,
+      resolutionX,
+      resolutionY,
+      width,
+      height,
+    })
+    // Creating a target enables autofocus, R3F will set via props
+    if (autoFocus) effect.target = new Vector3()
+    // Depth texture for depth picking with optional packing strategy
+    if (depthTexture) effect.setDepthTexture(depthTexture.texture, depthTexture.packing as DepthPackingStrategies)
+    // Temporary fix that restores DOF 6.21.3 behavior, everything since then lets shapes leak through the blur
+    const maskPass = (effect as any).maskPass
+    maskPass.maskFunction = MaskFunction.MULTIPLY_RGB_SET_ALPHA
+    return effect
+  }, [
+    camera,
+    blendFunction,
+    worldFocusDistance,
+    worldFocusRange,
+    focusDistance,
+    focusRange,
+    focalLength,
+    bokehScale,
+    resolutionScale,
+    resolutionX,
+    resolutionY,
+    width,
+    height,
+    autoFocus,
+    depthTexture,
+  ])
+
+  useEffect(() => {
+    return () => {
+      effect.dispose()
+    }
+  }, [effect])
+
+  return <primitive {...props} ref={ref} object={effect} target={target} />
+})

package/src/effects/DotScreen.tsx

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

package/src/effects/FXAA.tsx

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

package/src/effects/Glitch.tsx

@@ -0,0 +1,40 @@
+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.tsx'
+
+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} />
+})

package/src/effects/GodRays.tsx

@@ -0,0 +1,16 @@
+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.tsx'
+
+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} />
+})

package/src/effects/Grid.tsx

@@ -0,0 +1,21 @@
+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} />
+})

package/src/effects/HueSaturation.tsx

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

package/src/effects/LUT.tsx

@@ -0,0 +1,26 @@
+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} />
+})