@react-three/postprocessing 3.0.1 → 3.0.3

package/src/effects/ASCII.tsx

@@ -1,135 +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): 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 { 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} />
+  }
+)

package/src/effects/Autofocus.tsx

@@ -1,153 +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'
-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 * 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} />
+      </>
+    )
+  }
+)

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 { BloomEffect, BlendFunction } from 'postprocessing'
+import { wrapEffect } from '../util'
+
+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 '../util'
+
+export const BrightnessContrast = /* @__PURE__ */ wrapEffect(BrightnessContrastEffect)

package/src/effects/ChromaticAberration.tsx

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

package/src/effects/ColorAverage.tsx

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

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

package/src/effects/Depth.tsx

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