@react-three/postprocessing 3.0.3 → 3.0.5

package/src/util.tsx

@@ -1,55 +1,96 @@
-import React, { RefObject } from 'react'
-import { Vector2 } from 'three'
-import * as THREE from 'three'
-import { type ReactThreeFiber, type ThreeElement, extend, useThree } from '@react-three/fiber'
-import type { Effect, Pass, BlendFunction } from 'postprocessing'
-
-export const resolveRef = <T,>(ref: T | React.RefObject<T>) =>
-  typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref
-
-export type EffectConstructor = new (...args: any[]) => Effect | Pass
-
-export type EffectProps<T extends EffectConstructor> = ThreeElement<T> &
-  ConstructorParameters<T>[0] & {
-    blendFunction?: BlendFunction
-    opacity?: number
-  }
-
-let i = 0
-const components = new WeakMap<EffectConstructor, React.ExoticComponent<any> | string>()
-
-export const wrapEffect = <T extends EffectConstructor>(effect: T, defaults?: EffectProps<T>) =>
-  /* @__PURE__ */ function Effect({ blendFunction = defaults?.blendFunction, opacity = defaults?.opacity, ...props }) {
-    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 args = React.useMemo(
-      () => [...(defaults?.args ?? []), ...(props.args ?? [{ ...defaults, ...props }])],
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [JSON.stringify(props)]
-    )
-
-    return (
-      <Component
-        camera={camera}
-        blendMode-blendFunction={blendFunction}
-        blendMode-opacity-value={opacity}
-        {...props}
-        args={args}
-      />
-    )
-  }
-
-export const useVector2 = (props: Record<string, unknown>, key: string): THREE.Vector2 => {
-  const value = props[key] as ReactThreeFiber.Vector2 | undefined
-  return React.useMemo(() => {
-    if (typeof value === 'number') return new THREE.Vector2(value, value)
-    else if (value) return new THREE.Vector2(...(value as THREE.Vector2Tuple))
-    else return new THREE.Vector2()
-  }, [value])
-}
+import { useThree, type ReactThreeFiber } from '@react-three/fiber'
+import type { Selection as PPSelection } from 'postprocessing'
+import { use, useEffect, useMemo, useRef, type RefObject } from 'react'
+import { Object3D, Vector2, type Vector2Tuple } from 'three'
+import { selectionContext } from './Selection'
+
+// Stable reference for array-typed props defaulting to "nothing" - `= []`
+// as a default parameter allocates a new array on every call, which is
+// enough to retrigger any effect that depends on it.
+export const EMPTY_ARRAY: never[] = []
+
+export const resolveRef = <T,>(ref: T | RefObject<T>) =>
+  typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref
+
+/**
+ * Keeps a postprocessing effect's `selection` (and its render layer) in
+ * sync with either mode effects support: the manual
+ * `selection` prop (used only when there's no enclosing <Selection>), or
+ * the declarative Selection/Select API. The two are mutually exclusive -
+ * context wins when both are present.
+ */
+export function useSelectionSync(
+  effect: { selection: PPSelection },
+  selection: Object3D | Object3D[] | RefObject<Object3D | null> | RefObject<Object3D | null>[],
+  selectionLayer: number
+): void {
+  const invalidate = useThree((state) => state.invalidate)
+  const api = use(selectionContext)
+
+  useEffect(() => {
+    effect.selection.layer = selectionLayer
+    invalidate()
+  }, [effect, invalidate, selectionLayer])
+
+  useEffect(() => {
+    if (api) return
+    const resolved = (Array.isArray(selection) ? selection.map((o) => resolveRef(o)) : [resolveRef(selection)]).filter(
+      (o): o is Object3D => o != null
+    )
+    if (!resolved.length) return
+
+    effect.selection.set(resolved)
+    invalidate()
+    return () => {
+      effect.selection.clear()
+      invalidate()
+    }
+  }, [effect, selection, api, invalidate])
+
+  useEffect(() => {
+    if (api && api.enabled && api.selected?.length) {
+      effect.selection.set(api.selected)
+      invalidate()
+      return () => {
+        effect.selection.clear()
+        invalidate()
+      }
+    }
+  }, [api, effect.selection, invalidate])
+}
+
+/**
+ * r3f never disposes <primitive> objects (their state may be owned outside
+ * React), so effects rendered that way must dispose themselves. Guards
+ * against double-dispose across StrictMode's dev-only mount/cleanup/mount
+ * cycle, where the cleanup closure re-runs against the same instance.
+ */
+export const useDispose = <T extends { dispose?: () => void }>(instance: T): void => {
+  const disposedRef = useRef<WeakSet<object>>(new WeakSet())
+
+  useEffect(() => {
+    const disposed = disposedRef.current
+    return () => {
+      if (instance && typeof instance === 'object' && !disposed.has(instance)) {
+        disposed.add(instance)
+        instance.dispose?.()
+      }
+    }
+  }, [instance])
+}
+
+export const useVector2 = (props: Record<string, unknown>, key: string): Vector2 => {
+  const value = props[key] as ReactThreeFiber.Vector2 | undefined
+
+  return useMemo(() => {
+    if (typeof value === 'number') {
+      return new Vector2(value, value)
+    }
+
+    if (value) {
+      return new Vector2(...(value as Vector2Tuple))
+    }
+
+    return new Vector2()
+  }, [value])
+}

package/src/wrapEffect.tsx

@@ -0,0 +1,122 @@
+import { extend, useThree } from '@react-three/fiber'
+import type { BlendFunction, Effect, Pass } from 'postprocessing'
+import { useMemo, type ExoticComponent, type JSX, type Ref } from 'react'
+
+export type EffectConstructor = new (...args: any[]) => Effect | Pass
+
+// Handles three ConstructorParameters<T> shapes: required first param
+// (P), optional first param (Partial<P> — some effects in postprocessing
+// type inner fields as required even though the whole object is
+// omittable), and no params at all ({})
+type FirstConstructorParam<T extends EffectConstructor> =
+  ConstructorParameters<T> extends [infer P, ...any[]]
+    ? P
+    : ConstructorParameters<T> extends [(infer P)?, ...any[]]
+      ? Partial<P>
+      : {}
+
+export type EffectProps<T extends EffectConstructor> = FirstConstructorParam<T> & {
+  ref?: Ref<InstanceType<T>>
+  blendFunction?: BlendFunction
+  opacity?: number
+  args?: ConstructorParameters<T>
+}
+
+let i = 0
+
+const components = new WeakMap<EffectConstructor, ExoticComponent<any> | string>()
+
+const identityTokens = new WeakMap<object, number>()
+let nextIdentityToken = 0
+
+// Same object in, same token out — lets otherwise-opaque values (textures,
+// refs, any class instance) still change the fingerprint when swapped for
+// a different instance, without walking into them.
+function identityOf(value: object): number {
+  let token = identityTokens.get(value)
+  if (token === undefined) {
+    token = nextIdentityToken++
+    identityTokens.set(value, token)
+  }
+  return token
+}
+
+// Walks props into a JSON-safe fingerprint for the args memo below. Two
+// things JSON.stringify can't be trusted with here:
+//  - it throws on cycles (refs, or any three.js object with a back-
+//    reference), so cycles are cut off with a WeakSet guard instead.
+//  - it calls a value's own toJSON first if present, which for e.g.
+//    THREE.Texture re-encodes the whole image to a base64 data URL on
+//    every single render (measured ~39ms for a 512x512 texture) just to
+//    throw the result away. Reading properties directly sidesteps that.
+//  - reading properties directly instead means typed arrays need their
+//    own case: Object.keys() on one returns every numeric index, so
+//    walking a texture's backing buffer element-by-element is even
+//    slower (~340ms for the same texture) than the toJSON it replaces.
+//    Identity is enough — same buffer means unchanged.
+function fingerprint(value: unknown, seen: WeakSet<object>): unknown {
+  if (value === null || typeof value !== 'object') return value
+  if (seen.has(value)) return '[Circular]'
+
+  if (ArrayBuffer.isView(value) || value instanceof ArrayBuffer) {
+    return identityOf(value)
+  }
+
+  seen.add(value)
+
+  if (Array.isArray(value)) {
+    return value.map((item) => fingerprint(item, seen))
+  }
+
+  const out: Record<string, unknown> = {}
+  for (const key of Object.keys(value).sort()) {
+    out[key] = fingerprint((value as Record<string, unknown>)[key], seen)
+  }
+  return out
+}
+
+function stableStringify(value: unknown): string {
+  return JSON.stringify(fingerprint(value, new WeakSet()))
+}
+
+export function wrapEffect<T extends EffectConstructor>(
+  effect: T,
+  defaults?: EffectProps<T>
+): (props: EffectProps<T>) => JSX.Element {
+  return function WrappedEffect({
+    ref,
+    blendFunction = defaults?.blendFunction,
+    opacity = defaults?.opacity,
+    ...props
+  }) {
+    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 args = useMemo(
+      () => [
+        ...((defaults?.args as unknown as any[]) ?? []),
+        ...((props.args as unknown as any[]) ?? [{ ...defaults, ...props }]),
+      ],
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [stableStringify(props)]
+    )
+
+    return (
+      <Component
+        camera={camera}
+        blendMode-blendFunction={blendFunction}
+        blendMode-opacity-value={opacity}
+        {...props}
+        args={args}
+        ref={ref}
+      />
+    )
+  }
+}

package/src/EffectComposer.test.tsx

@@ -1,126 +0,0 @@
-import * as React from 'react'
-import * as THREE from 'three'
-import { vi, describe, it, expect } from 'vitest'
-import { extend, createRoot, act } from '@react-three/fiber'
-import { EffectComposer } from './EffectComposer'
-import { EffectComposer as EffectComposerImpl, RenderPass, Pass, Effect, EffectPass } from 'postprocessing'
-
-// Let React know that we'll be testing effectful components
-declare global {
-  var IS_REACT_ACT_ENVIRONMENT: boolean
-}
-global.IS_REACT_ACT_ENVIRONMENT = true
-
-// Create virtual R3F root for testing
-extend(THREE as any)
-const root = createRoot({
-  style: {} as CSSStyleDeclaration,
-  addEventListener: (() => {}) as any,
-  removeEventListener: (() => {}) as any,
-  width: 1280,
-  height: 800,
-  clientWidth: 1280,
-  clientHeight: 800,
-  getContext: (() =>
-    new Proxy(
-      {},
-      {
-        get(_target, prop) {
-          switch (prop) {
-            case 'getParameter':
-              return () => 'WebGL 2' // GL_VERSION
-            case 'getExtension':
-              return () => ({}) // EXT_blend_minmax
-            case 'getContextAttributes':
-              return () => ({ alpha: true })
-            case 'getShaderPrecisionFormat':
-              return () => ({ rangeMin: 1, rangeMax: 1, precision: 1 })
-            default:
-              return () => {}
-          }
-        },
-      }
-    )) as any,
-} satisfies Partial<HTMLCanvasElement> as HTMLCanvasElement)
-root.configure({ frameloop: 'never' })
-
-const EFFECT_SHADER = 'mainImage() {}'
-
-describe('EffectComposer', () => {
-  it('should merge effects together', async () => {
-    const composerRef = React.createRef<EffectComposerImpl>()
-
-    const effectA = new Effect('A', EFFECT_SHADER)
-    const effectB = new Effect('B', EFFECT_SHADER)
-    const effectC = new Effect('C', EFFECT_SHADER)
-    const passA = new Pass()
-    const passB = new Pass()
-
-    // Forward order
-    await act(async () =>
-      root.render(
-        <EffectComposer ref={composerRef}>
-          {/* EffectPass(effectA, effectB) */}
-          <primitive object={effectA} />
-          <primitive object={effectB} />
-          {/* PassA */}
-          <primitive object={passA} />
-          {/* EffectPass(effectC) */}
-          <primitive object={effectC} />
-          {/* PassB */}
-          <primitive object={passB} />
-        </EffectComposer>
-      )
-    )
-    expect(composerRef.current!.passes.map((p) => p.constructor)).toStrictEqual([
-      RenderPass,
-      EffectPass,
-      Pass,
-      EffectPass,
-      Pass,
-    ])
-    // @ts-expect-error
-    expect((composerRef.current!.passes[1] as EffectPass).effects).toStrictEqual([effectA, effectB])
-    expect(composerRef.current!.passes[2]).toBe(passA)
-    // @ts-expect-error
-    expect((composerRef.current!.passes[3] as EffectPass).effects).toStrictEqual([effectC])
-    expect(composerRef.current!.passes[4]).toBe(passB)
-
-    // NOTE: instance children ordering is unstable until R3F v9, so we remount from scratch
-    await act(async () => root.render(null))
-
-    // Reverse order
-    await act(async () =>
-      root.render(
-        <EffectComposer ref={composerRef}>
-          {/* PassB */}
-          <primitive object={passB} />
-          {/* EffectPass(effectC) */}
-          <primitive object={effectC} />
-          {/* PassA */}
-          <primitive object={passA} />
-          {/* EffectPass(effectB, effectA) */}
-          <primitive object={effectB} />
-          <primitive object={effectA} />
-        </EffectComposer>
-      )
-    )
-    expect(composerRef.current!.passes.map((p) => p.constructor)).toStrictEqual([
-      RenderPass,
-      Pass,
-      EffectPass,
-      Pass,
-      EffectPass,
-    ])
-    expect(composerRef.current!.passes[1]).toBe(passB)
-    // @ts-expect-error
-    expect((composerRef.current!.passes[2] as EffectPass).effects).toStrictEqual([effectC])
-    expect(composerRef.current!.passes[3]).toBe(passA)
-    // @ts-expect-error
-    expect((composerRef.current!.passes[4] as EffectPass).effects).toStrictEqual([effectB, effectA])
-  })
-
-  it.skip('should split convolution effects', async () => {
-    await act(async () => root.render(null))
-  })
-})