@react-three/postprocessing 3.0.4 → 3.1.0

package/src/Selection.tsx

@@ -1,46 +1,86 @@
-import * as THREE from 'three'
-import React, { createContext, useState, useContext, useEffect, useRef, useMemo } from 'react'
-import { type ThreeElements } from '@react-three/fiber'
-
-export type Api = {
-  selected: THREE.Object3D[]
-  select: React.Dispatch<React.SetStateAction<THREE.Object3D[]>>
-  enabled: boolean
-}
-export type SelectApi = Omit<ThreeElements['group'], 'ref'> & {
-  enabled?: boolean
-}
-
-export const selectionContext = /* @__PURE__ */ createContext<Api | null>(null)
-
-export function Selection({ children, enabled = true }: { enabled?: boolean; children: React.ReactNode }) {
-  const [selected, select] = useState<THREE.Object3D[]>([])
-  const value = useMemo(() => ({ selected, select, enabled }), [selected, select, enabled])
-  return <selectionContext.Provider value={value}>{children}</selectionContext.Provider>
-}
-
-export function Select({ enabled = false, children, ...props }: SelectApi) {
-  const group = useRef<THREE.Group>(null!)
-  const api = useContext(selectionContext)
-  useEffect(() => {
-    if (api && enabled) {
-      let changed = false
-      const current: THREE.Object3D[] = []
-      group.current.traverse((o) => {
-        o.type === 'Mesh' && current.push(o)
-        if (api.selected.indexOf(o) === -1) changed = true
-      })
-      if (changed) {
-        api.select((state) => [...state, ...current])
-        return () => {
-          api.select((state) => state.filter((selected) => !current.includes(selected)))
-        }
-      }
-    }
-  }, [enabled, children, api])
-  return (
-    <group ref={group} {...props}>
-      {children}
-    </group>
-  )
-}
+import { type ThreeElements } from '@react-three/fiber'
+import {
+  createContext,
+  use,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from 'react'
+import { type Group, type Line, type Mesh, type Object3D, type Points } from 'three'
+
+export type Api = {
+  selected: Object3D[]
+  select: Dispatch<SetStateAction<Object3D[]>>
+  enabled: boolean
+}
+export type SelectApi = Omit<ThreeElements['group'], 'ref'> & {
+  enabled?: boolean
+}
+
+export const selectionContext = /* @__PURE__ */ createContext<Api | null>(null)
+
+export function Selection({ children, enabled = true }: { enabled?: boolean; children: ReactNode }) {
+  const [selected, select] = useState<Object3D[]>([])
+  const value = useMemo(() => ({ selected, select, enabled }), [selected, select, enabled])
+  return <selectionContext.Provider value={value}>{children}</selectionContext.Provider>
+}
+
+// Covers Mesh/Line/Points subclasses too, unlike `.type`.
+function isSelectable(object: Object3D): boolean {
+  const o = object as Partial<Mesh & Line & Points>
+  return !!(o.isMesh || o.isLine || o.isPoints)
+}
+
+export function Select({ enabled = false, children, ...props }: SelectApi) {
+  const group = useRef<Group>(null!)
+  // Stable, unlike the context value - avoids retriggering off our own write.
+  const select = use(selectionContext)?.select
+  const claimed = useRef<Object3D[]>([])
+
+  useEffect(() => {
+    if (!select) return
+
+    const current: Object3D[] = []
+    if (enabled) {
+      group.current.traverse((o) => {
+        if (isSelectable(o)) current.push(o)
+      })
+    }
+
+    const previouslyClaimed = claimed.current
+    claimed.current = current
+
+    select((prev) => {
+      const prevSet = new Set(prev)
+      const currentSet = new Set(current)
+      const toAdd = current.filter((o) => !prevSet.has(o))
+      const toRemove = previouslyClaimed.filter((o) => !currentSet.has(o) && prevSet.has(o))
+      if (!toAdd.length && !toRemove.length) return prev
+      const toRemoveSet = toRemove.length ? new Set(toRemove) : null
+      const kept = toRemoveSet ? prev.filter((o) => !toRemoveSet.has(o)) : prev
+      return toAdd.length ? [...kept, ...toAdd] : kept
+    })
+  }, [enabled, children, select])
+
+  // Separate from the effect above so unmount cleanup doesn't fire on every enabled/children change.
+  useEffect(() => {
+    return () => {
+      if (!select || !claimed.current.length) return
+      const stillClaimed = new Set(claimed.current)
+      select((prev) => {
+        const next = prev.filter((o) => !stillClaimed.has(o))
+        return next.length !== prev.length ? next : prev
+      })
+    }
+  }, [select])
+
+  return (
+    <group ref={group} {...props}>
+      {children}
+    </group>
+  )
+}

package/src/createEffectComponent.tsx

@@ -0,0 +1,71 @@
+import { extend, useThree } from '@react-three/fiber'
+import type { BlendFunction, Effect, Pass } from 'postprocessing'
+import type { ExoticComponent, JSX, Ref } from 'react'
+import { useRef } from 'react'
+import { useLiveDefaults, useMergeRefs } from './util'
+
+export type EffectConstructor = new (...args: any[]) => Effect | Pass
+
+// The effect's own options type, straight off its constructor - postprocessing
+// already types every effect's sole options object precisely (either inline or,
+// like BloomEffect, as a named exported type); this just strips the `| undefined`
+// that comes from the parameter being optional.
+export type EffectOptions<T extends EffectConstructor> = NonNullable<ConstructorParameters<T>[0]>
+
+const components = new WeakMap<EffectConstructor, ExoticComponent<any> | string>()
+let i = 0
+
+const BLEND_KEYS = ['blendMode-blendFunction', 'blendMode-opacity-value']
+
+/**
+ * Registers `effect` as a JSX intrinsic once per class and returns a
+ * component that renders it. Everything else - construction from `args`,
+ * live prop application (with the same Color/Vector coercion and reset-
+ * to-default on removal any r3f element gets), disposal - is r3f's own
+ * reconciler, same rules as `<mesh>`/`<meshStandardMaterial>`. Only fits
+ * effects whose constructor works with zero arguments (`new Effect()`) -
+ * r3f's own reset-on-removal falls back to `0` otherwise, which is wrong
+ * for anything non-numeric. Effects that require e.g. scene/camera stay
+ * hand-rolled (see Outline.tsx, SelectiveBloom.tsx, ShockWave.tsx).
+ *
+ * `blendFunction`/`opacity` are pierced through to `blendMode-*` - every
+ * `Effect` has them on a nested `blendMode`, not on the effect itself, so a
+ * plain top-level prop would silently land on a stray, unread property.
+ * Applied via useLiveDefaults, not as plain JSX props: BlendMode's own
+ * constructor requires `blendFunction` (no default), so its constructor
+ * length isn't 0 either, and r3f's native reset-on-removal falls back to
+ * `changedProps[prop] = 0` - which is BlendFunction.SKIP, not a merely
+ * "wrong" blend function but one that hides the effect entirely.
+ */
+export function createEffectComponent<T extends EffectConstructor, P extends object>(
+  effect: T
+): (
+  props: P & {
+    blendFunction?: BlendFunction
+    opacity?: number
+    args?: ConstructorParameters<T>
+    ref?: Ref<InstanceType<T>>
+  }
+) => JSX.Element {
+  return function EffectComponent({ blendFunction, opacity, ref, ...props }: any) {
+    let Component = components.get(effect)
+
+    if (!Component) {
+      const key = `@react-three/postprocessing/${effect.name}-${i++}`
+      extend({ [key]: effect })
+      components.set(effect, (Component = key))
+    }
+
+    const camera = useThree((state) => state.camera)
+    const localRef = useRef<InstanceType<T>>(null)
+    const setRef = useMergeRefs(localRef, ref)
+
+    useLiveDefaults(
+      localRef,
+      { 'blendMode-blendFunction': blendFunction, 'blendMode-opacity-value': opacity },
+      BLEND_KEYS
+    )
+
+    return <Component ref={setRef} camera={camera} {...props} />
+  }
+}

package/src/effects/ASCII.tsx

@@ -1,135 +1,183 @@
-// 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 type { Ref } from 'react'
+import { CanvasTexture, Color, type ColorRepresentation, NearestFilter, RepeatWrapping, Texture, Uniform } from 'three'
+import { createEffectComponent } from '../createEffectComponent'
+
+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;
+  }
+`
+
+export type ASCIIProps = {
+  font?: string
+  characters?: string
+  fontSize?: number
+  cellSize?: number
+  color?: ColorRepresentation
+  invert?: boolean
+  ref?: Ref<ASCIIEffect>
+}
+
+class ASCIIEffect extends Effect {
+  private _font: string
+  private _characters: string
+  private _fontSize: number
+
+  constructor({
+    font = 'arial',
+    characters = ` .:,'-^=*+?!|0#X%WM@`,
+    fontSize = 54,
+    cellSize = 16,
+    color = '#ffffff',
+    invert = false,
+  }: Omit<ASCIIProps, '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 })
+
+    this._font = font
+    this._characters = characters
+    this._fontSize = fontSize
+    this.updateCharactersTexture()
+  }
+
+  get cellSize(): number {
+    return this.uniforms.get('uCellSize')!.value
+  }
+
+  set cellSize(value: number) {
+    this.uniforms.get('uCellSize')!.value = value
+  }
+
+  get invert(): boolean {
+    return this.uniforms.get('uInvert')!.value
+  }
+
+  set invert(value: boolean) {
+    this.uniforms.get('uInvert')!.value = value
+  }
+
+  get color(): Color {
+    return this.uniforms.get('uColor')!.value
+  }
+
+  set color(value: ColorRepresentation) {
+    this.uniforms.get('uColor')!.value.set(value)
+  }
+
+  get font(): string {
+    return this._font
+  }
+
+  set font(value: string) {
+    this._font = value
+    this.updateCharactersTexture()
+  }
+
+  get characters(): string {
+    return this._characters
+  }
+
+  set characters(value: string) {
+    this._characters = value
+    this.uniforms.get('uCharactersCount')!.value = value.length
+    this.updateCharactersTexture()
+  }
+
+  get fontSize(): number {
+    return this._fontSize
+  }
+
+  set fontSize(value: number) {
+    this._fontSize = value
+    this.updateCharactersTexture()
+  }
+
+  // Regenerates the character atlas texture - characters/font/fontSize have
+  // no cheaper live update path, unlike the plain-uniform props above.
+  private updateCharactersTexture(): void {
+    const uniform = this.uniforms.get('uCharacters')!
+    const previous = uniform.value as Texture
+    uniform.value = this.createCharactersTexture(this._characters, this._font, this._fontSize)
+    previous.dispose()
+  }
+
+  /** 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__ */ createEffectComponent<typeof ASCIIEffect, ASCIIProps>(ASCIIEffect)