@react-three/postprocessing 3.0.3 → 3.0.5

package/src/effects/ASCII.tsx

@@ -1,135 +1,136 @@
-// 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): 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} />
-  }
-)
+// From: https://github.com/emilwidlund/ASCII
+// https://twitter.com/emilwidlund/status/1652386482420609024
+
+import { Effect } from 'postprocessing'
+import { Ref, useMemo } from 'react'
+import { CanvasTexture, Color, NearestFilter, RepeatWrapping, Texture, Uniform } from 'three'
+import { useDispose } from '../util'
+
+const fragment = /* glsl */ `
+  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
+  ref?: Ref<ASCIIEffect>
+}
+
+class ASCIIEffect extends Effect {
+  constructor({
+    font = 'arial',
+    characters = ` .:,'-^=*+?!|0#X%WM@`,
+    fontSize = 54,
+    cellSize = 16,
+    color = '#ffffff',
+    invert = false,
+  }: Omit<IASCIIEffectProps, 'ref'> = {}) {
+    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): 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 function ASCII({
+  font = 'arial',
+  characters = ` .:,'-^=*+?!|0#X%WM@`,
+  fontSize = 54,
+  cellSize = 16,
+  color = '#ffffff',
+  invert = false,
+  ref,
+}: IASCIIEffectProps) {
+  const effect = useMemo(
+    () => new ASCIIEffect({ characters, font, fontSize, cellSize, color, invert }),
+    [characters, fontSize, cellSize, color, invert, font]
+  )
+
+  useDispose(effect)
+
+  return <primitive ref={ref} object={effect} />
+}

package/src/effects/Autofocus.tsx

@@ -1,153 +1,175 @@
-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'
-import { EffectComposerContext } from '../EffectComposer'
-
-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} />
-      </>
-    )
-  }
-)
+import { createPortal, useFrame, useThree, type Vector3 as R3FVector3 } from '@react-three/fiber'
+import { easing } from 'maath'
+import { CopyPass, DepthOfFieldEffect, DepthPickingPass } from 'postprocessing'
+import {
+  Ref,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+  type RefObject,
+} from 'react'
+import { Mesh, Vector3 } from 'three'
+
+import { EffectComposerContext } from '../EffectComposer'
+import { DepthOfField } from './DepthOfField'
+
+// EffectComposerImpl.dispose() disposes every pass it currently holds —
+// including these two, since they're added via composer.addPass below.
+// When Autofocus unmounts alongside its ancestor EffectComposer (e.g. a
+// full tree unmount), both the composer's own teardown AND this
+// component's cleanup effect would dispose the same instances. Wrapping
+// dispose here makes it safe no matter which caller gets there first.
+function makeDisposeIdempotent<T extends { dispose: () => void }>(instance: T): T {
+  let disposed = false
+  const dispose = instance.dispose.bind(instance)
+  instance.dispose = () => {
+    if (disposed) return
+    disposed = true
+    dispose()
+  }
+  return instance
+}
+
+export type AutofocusProps = ComponentProps<typeof DepthOfField> & {
+  target?: R3FVector3
+  /** 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
+  ref?: Ref<AutofocusApi>
+}
+
+export type AutofocusApi = {
+  dofRef: RefObject<DepthOfFieldEffect | null>
+  hitpoint: Vector3
+  update: (delta: number, updateTarget: boolean) => void
+}
+
+export function Autofocus({
+  target = undefined,
+  mouse: followMouse = false,
+  debug = undefined,
+  manual = false,
+  smoothTime = 0.25,
+  ref,
+  ...props
+}: AutofocusProps) {
+  const dofRef = useRef<DepthOfFieldEffect>(null)
+  const hitpointRef = useRef<Mesh>(null)
+  const targetRef = useRef<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(() => makeDisposeIdempotent(new DepthPickingPass()))
+  const [copyPass] = useState(() => makeDisposeIdempotent(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 Vector3(0, 0, 0))
+
+  const [ndc] = useState(() => new 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 unknown 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(ref, () => 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

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

package/src/effects/BrightnessContrast.tsx

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