@react-three/postprocessing 3.0.4 → 3.1.0

package/src/tests/Outline.test.tsx

@@ -0,0 +1,211 @@
+import { EffectComposer as EffectComposerImpl, OutlineEffect, Selection as PPSelection } from 'postprocessing'
+import * as React from 'react'
+import { Mesh, Object3D } from 'three'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { Outline } from '../effects/Outline'
+import { Select, Selection } from '../Selection'
+import { flush, root, waitForComposer } from './test-utils'
+
+afterEach(async () => {
+  await React.act(async () => {
+    root.render(null)
+  })
+})
+
+describe('Outline', () => {
+  it('does not re-set its (empty, declarative-mode) selection on unrelated re-renders', async () => {
+    const setSpy = vi.spyOn(PPSelection.prototype, 'set')
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    const render = (tick: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Outline />
+          <group name={`tick-${tick}`} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0))
+    await waitForComposer(composerRef)
+    await flush()
+    setSpy.mockClear()
+
+    for (let t = 1; t <= 5; t++) {
+      await React.act(async () => render(t))
+      await flush()
+    }
+
+    expect(setSpy).not.toHaveBeenCalled()
+    setSpy.mockRestore()
+  })
+
+  it('sets its selection from the Selection/Select API and clears it when the object deselects', async () => {
+    const effectRef = React.createRef<OutlineEffect>()
+    const meshRef = React.createRef<Mesh>()
+
+    const render = (enabled: boolean) =>
+      root.render(
+        <EffectComposer>
+          <Selection>
+            <Select enabled={enabled}>
+              <mesh ref={meshRef}>
+                <boxGeometry />
+                <meshBasicMaterial />
+              </mesh>
+            </Select>
+            <Outline ref={effectRef} />
+          </Selection>
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(true))
+    await flush()
+    await flush()
+
+    expect(Array.from(effectRef.current!.selection)).toContain(meshRef.current)
+
+    await React.act(async () => render(false))
+    await flush()
+    await flush()
+
+    expect(Array.from(effectRef.current!.selection)).not.toContain(meshRef.current)
+  })
+
+  it('does not throw when a selection ref has not attached yet', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const unattachedRef = React.createRef<Object3D>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Outline selection={[unattachedRef]} />
+        </EffectComposer>
+      )
+    )
+    await waitForComposer(composerRef)
+    await expect(flush()).resolves.not.toThrow()
+  })
+
+  it('applies visibleEdgeColor live, without reconstructing the effect (#143)', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const effectRef = React.createRef<OutlineEffect>()
+
+    const render = (color: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Outline ref={effectRef} visibleEdgeColor={color} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0xff0000))
+    await waitForComposer(composerRef)
+    await flush()
+
+    const first = effectRef.current
+    expect(first!.visibleEdgeColor.getHex()).toBe(0xff0000)
+
+    await React.act(async () => render(0x00ff00))
+    await flush()
+
+    expect(effectRef.current).toBe(first)
+    expect(effectRef.current!.visibleEdgeColor.getHex()).toBe(0x00ff00)
+  })
+
+  it('accepts a CSS color string for visibleEdgeColor/hiddenEdgeColor, not just a numeric hex (#187, #182)', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const effectRef = React.createRef<OutlineEffect>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Outline ref={effectRef} visibleEdgeColor="red" hiddenEdgeColor="blue" />
+        </EffectComposer>
+      )
+    )
+    await waitForComposer(composerRef)
+    await flush()
+
+    expect(effectRef.current!.visibleEdgeColor.getHex()).toBe(0xff0000)
+    expect(effectRef.current!.hiddenEdgeColor.getHex()).toBe(0x0000ff)
+  })
+
+  it('resets edgeStrength to its constructor default when the prop is removed', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const effectRef = React.createRef<OutlineEffect>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Outline ref={effectRef} edgeStrength={100} />
+        </EffectComposer>
+      )
+    )
+    await waitForComposer(composerRef)
+    await flush()
+
+    expect(effectRef.current!.edgeStrength).toBe(100)
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Outline ref={effectRef} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+
+    expect(effectRef.current!.edgeStrength).toBe(1)
+  })
+
+  it('still reconstructs when a construction-only prop (resolutionScale) changes', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const effectRef = React.createRef<OutlineEffect>()
+
+    const render = (resolutionScale: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Outline ref={effectRef} resolutionScale={resolutionScale} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0.5))
+    await waitForComposer(composerRef)
+    await flush()
+    const first = effectRef.current
+
+    await React.act(async () => render(1))
+    await flush()
+
+    expect(effectRef.current).not.toBe(first)
+  })
+
+  it('does not dispose its render target on unrelated re-renders (multisampling has an unconditional dispose side effect)', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const effectRef = React.createRef<OutlineEffect>()
+
+    const render = (tick: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Outline ref={effectRef} />
+          <group name={`tick-${tick}`} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0))
+    await waitForComposer(composerRef)
+    await flush()
+
+    // @ts-expect-error - `renderTargetMask` isn't part of the public OutlineEffect typing
+    const disposeSpy = vi.spyOn(effectRef.current!.renderTargetMask, 'dispose')
+
+    for (let t = 1; t <= 5; t++) {
+      await React.act(async () => render(t))
+      await flush()
+    }
+
+    expect(disposeSpy).not.toHaveBeenCalled()
+    disposeSpy.mockRestore()
+  })
+
+})

package/src/tests/SSAO.test.tsx

@@ -0,0 +1,140 @@
+import { EffectComposer as EffectComposerImpl, SSAOEffect } from 'postprocessing'
+import * as React from 'react'
+import { Color } from 'three'
+import { describe, expect, it } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { SSAO } from '../effects/SSAO'
+import { flush, root, waitForComposer } from './test-utils'
+
+describe('SSAO', () => {
+  it('resets color/fade/minRadiusScale to their constructor defaults when removed, not the first-mounted value', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<SSAOEffect>()
+
+    const render = (withOverrides: boolean) =>
+      root.render(
+        <EffectComposer ref={composerRef} enableNormalPass>
+          <SSAO ref={ref} {...(withOverrides ? { color: new Color('red'), fade: 0.5, minRadiusScale: 0.9 } : {})} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(true))
+    await waitForComposer(composerRef)
+    await flush()
+
+    expect(ref.current!.color!.getHexString()).toBe('ff0000')
+    expect(ref.current!.ssaoMaterial.fade).toBeCloseTo(0.5)
+    expect(ref.current!.ssaoMaterial.minRadiusScale).toBeCloseTo(0.9)
+
+    await React.act(async () => render(false))
+    await flush()
+
+    // SSAOEffect's own constructor defaults (null / 0.01 / 0.1), not the
+    // values from the first render this instance ever saw.
+    expect(ref.current!.color).toBeNull()
+    expect(ref.current!.ssaoMaterial.fade).toBeCloseTo(0.01)
+    expect(ref.current!.ssaoMaterial.minRadiusScale).toBeCloseTo(0.1)
+  })
+
+  it('applies intensity live, without reconstructing the effect', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<SSAOEffect>()
+
+    const render = (intensity: number) =>
+      root.render(
+        <EffectComposer ref={composerRef} enableNormalPass>
+          <SSAO ref={ref} intensity={intensity} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(1))
+    await waitForComposer(composerRef)
+    await flush()
+    const first = ref.current
+    expect(first!.intensity).toBe(1)
+
+    await React.act(async () => render(2))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.intensity).toBe(2)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('applies bias live via the nested ssaoMaterial, without reconstructing the effect', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<SSAOEffect>()
+
+    const render = (bias: number) =>
+      root.render(
+        <EffectComposer ref={composerRef} enableNormalPass>
+          <SSAO ref={ref} bias={bias} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0.5))
+    await waitForComposer(composerRef)
+    await flush()
+    const first = ref.current
+    expect(first!.ssaoMaterial.bias).toBeCloseTo(0.5)
+
+    await React.act(async () => render(0.8))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.ssaoMaterial.bias).toBeCloseTo(0.8)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('applies worldProximityThreshold live via the nested ssaoMaterial, without reconstructing the effect', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<SSAOEffect>()
+
+    const render = (worldProximityThreshold: number) =>
+      root.render(
+        <EffectComposer ref={composerRef} enableNormalPass>
+          <SSAO ref={ref} worldProximityThreshold={worldProximityThreshold} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0.5))
+    await waitForComposer(composerRef)
+    await flush()
+    const first = ref.current
+    expect(first!.ssaoMaterial.worldProximityThreshold).toBeCloseTo(0.5)
+
+    await React.act(async () => render(0.8))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.ssaoMaterial.worldProximityThreshold).toBeCloseTo(0.8)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('still reconstructs when resolutionScale (construction-only) changes', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<SSAOEffect>()
+
+    const render = (resolutionScale: number) =>
+      root.render(
+        <EffectComposer ref={composerRef} enableNormalPass>
+          <SSAO ref={ref} resolutionScale={resolutionScale} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0.5))
+    await waitForComposer(composerRef)
+    await flush()
+    const first = ref.current
+
+    await React.act(async () => render(1))
+    await flush()
+
+    expect(ref.current).not.toBe(first)
+
+    await React.act(async () => root.render(null))
+  })
+})

package/src/tests/Selection.test.tsx

@@ -0,0 +1,324 @@
+import * as React from 'react'
+import * as THREE from 'three'
+import { afterEach, describe, expect, it } from 'vitest'
+import { Select, Selection, selectionContext } from '../Selection'
+import { flush, root } from './test-utils'
+
+afterEach(async () => {
+  await React.act(async () => {
+    root.render(null)
+  })
+})
+
+function Capture({ onSnapshot }: { onSnapshot: (selected: THREE.Object3D[]) => void }) {
+  const api = React.useContext(selectionContext)
+  React.useEffect(() => {
+    onSnapshot(api?.selected ?? [])
+  })
+  return null
+}
+
+describe('Selection/Select', () => {
+  it('settles to a stable selected array without looping', async () => {
+    const snapshots: THREE.Object3D[][] = []
+    const meshRef = React.createRef<THREE.Mesh>()
+
+    await React.act(async () =>
+      root.render(
+        <Selection>
+          <Capture onSnapshot={(s) => snapshots.push(s)} />
+          <Select enabled>
+            <mesh ref={meshRef}>
+              <boxGeometry />
+              <meshBasicMaterial />
+            </mesh>
+          </Select>
+        </Selection>
+      )
+    )
+    await flush()
+    await flush()
+
+    // Exactly one render for the initial (empty) commit, one for the
+    // single necessary addition - the original bug kept re-triggering
+    // itself, so this would grow unbounded (and eventually throw) instead
+    // of stopping at 2.
+    expect(snapshots).toEqual([[], [meshRef.current]])
+  })
+
+  it('selects a Line and a Points object, not just Mesh', async () => {
+    const snapshots: THREE.Object3D[][] = []
+    const lineRef = React.createRef<THREE.Line>()
+    const pointsRef = React.createRef<THREE.Points>()
+
+    await React.act(async () =>
+      root.render(
+        <Selection>
+          <Capture onSnapshot={(s) => snapshots.push(s)} />
+          <Select enabled>
+            <threeLine ref={lineRef}>
+              <bufferGeometry />
+              <lineBasicMaterial />
+            </threeLine>
+          </Select>
+          <Select enabled>
+            <points ref={pointsRef}>
+              <bufferGeometry />
+              <pointsMaterial />
+            </points>
+          </Select>
+        </Selection>
+      )
+    )
+    await flush()
+    await flush()
+
+    const last = snapshots[snapshots.length - 1]
+    expect(last).toContain(lineRef.current)
+    expect(last).toContain(pointsRef.current)
+  })
+
+  it('removes its objects once unmounted, leaving a sibling Select untouched', async () => {
+    const snapshots: THREE.Object3D[][] = []
+    const meshARef = React.createRef<THREE.Mesh>()
+    const meshBRef = React.createRef<THREE.Mesh>()
+
+    const render = (mountA: boolean) =>
+      root.render(
+        <Selection>
+          <Capture onSnapshot={(s) => snapshots.push(s)} />
+          {mountA && (
+            <Select key="a" enabled>
+              <mesh ref={meshARef}>
+                <boxGeometry />
+                <meshBasicMaterial />
+              </mesh>
+            </Select>
+          )}
+          <Select key="b" enabled>
+            <mesh ref={meshBRef}>
+              <boxGeometry />
+              <meshBasicMaterial />
+            </mesh>
+          </Select>
+        </Selection>
+      )
+
+    await React.act(async () => render(true))
+    await flush()
+    await flush()
+    expect(snapshots[snapshots.length - 1]).toEqual(expect.arrayContaining([meshARef.current, meshBRef.current]))
+
+    await React.act(async () => render(false))
+    await flush()
+    await flush()
+
+    const last = snapshots[snapshots.length - 1]
+    expect(last).not.toContain(meshARef.current)
+    expect(last).toContain(meshBRef.current)
+  })
+
+  it('removes its objects when enabled toggles to false', async () => {
+    const snapshots: THREE.Object3D[][] = []
+    const meshRef = React.createRef<THREE.Mesh>()
+
+    const render = (enabled: boolean) =>
+      root.render(
+        <Selection>
+          <Capture onSnapshot={(s) => snapshots.push(s)} />
+          <Select enabled={enabled}>
+            <mesh ref={meshRef}>
+              <boxGeometry />
+              <meshBasicMaterial />
+            </mesh>
+          </Select>
+        </Selection>
+      )
+
+    await React.act(async () => render(true))
+    await flush()
+    await flush()
+    expect(snapshots[snapshots.length - 1]).toContain(meshRef.current)
+
+    await React.act(async () => render(false))
+    await flush()
+    await flush()
+    expect(snapshots[snapshots.length - 1]).not.toContain(meshRef.current)
+  })
+
+  it('selects a SkinnedMesh - isMesh is inherited, not just the exact type string', async () => {
+    const snapshots: THREE.Object3D[][] = []
+    const meshRef = React.createRef<THREE.SkinnedMesh>()
+
+    await React.act(async () =>
+      root.render(
+        <Selection>
+          <Capture onSnapshot={(s) => snapshots.push(s)} />
+          <Select enabled>
+            <skinnedMesh ref={meshRef} />
+          </Select>
+        </Selection>
+      )
+    )
+    await flush()
+    await flush()
+
+    expect(snapshots[snapshots.length - 1]).toContain(meshRef.current)
+  })
+
+  it('does not duplicate an object claimed by nested Selects', async () => {
+    const snapshots: THREE.Object3D[][] = []
+    const meshRef = React.createRef<THREE.Mesh>()
+
+    await React.act(async () =>
+      root.render(
+        <Selection>
+          <Capture onSnapshot={(s) => snapshots.push(s)} />
+          <Select enabled>
+            <Select enabled>
+              <mesh ref={meshRef}>
+                <boxGeometry />
+                <meshBasicMaterial />
+              </mesh>
+            </Select>
+          </Select>
+        </Selection>
+      )
+    )
+    await flush()
+    await flush()
+    await flush()
+
+    const last = snapshots[snapshots.length - 1]
+    expect(last.filter((o) => o === meshRef.current)).toHaveLength(1)
+  })
+
+  it('keeps an object selected via the outer Select after the inner one disables', async () => {
+    const snapshots: THREE.Object3D[][] = []
+    const meshRef = React.createRef<THREE.Mesh>()
+
+    const render = (innerEnabled: boolean) =>
+      root.render(
+        <Selection>
+          <Capture onSnapshot={(s) => snapshots.push(s)} />
+          <Select enabled>
+            <Select enabled={innerEnabled}>
+              <mesh ref={meshRef}>
+                <boxGeometry />
+                <meshBasicMaterial />
+              </mesh>
+            </Select>
+          </Select>
+        </Selection>
+      )
+
+    await React.act(async () => render(true))
+    await flush()
+    await flush()
+    await flush()
+    expect(snapshots[snapshots.length - 1]).toContain(meshRef.current)
+
+    await React.act(async () => render(false))
+    await flush()
+    await flush()
+    await flush()
+
+    // The inner Select's own cleanup drops its claim, but the mesh never
+    // left the outer Select's subtree - its own traversal still finds it.
+    expect(snapshots[snapshots.length - 1]).toContain(meshRef.current)
+  })
+
+  it('does not change the selected array reference on a re-render where children only changes identity', async () => {
+    const refs: THREE.Object3D[][] = []
+    const meshRef = React.createRef<THREE.Mesh>()
+
+    function CaptureRef() {
+      const api = React.useContext(selectionContext)
+      React.useEffect(() => {
+        if (api) refs.push(api.selected)
+      })
+      return null
+    }
+
+    // A fresh JSX tree every call, like a parent re-rendering for an
+    // unrelated reason - Select's own `children` prop is a new reference
+    // each time even though the underlying mesh never changes.
+    const render = () =>
+      root.render(
+        <Selection>
+          <CaptureRef />
+          <Select enabled>
+            <mesh ref={meshRef}>
+              <boxGeometry />
+              <meshBasicMaterial />
+            </mesh>
+          </Select>
+        </Selection>
+      )
+
+    await React.act(async () => render())
+    await flush()
+    await flush()
+
+    refs.length = 0
+    for (let i = 0; i < 5; i++) {
+      await React.act(async () => render())
+      await flush()
+    }
+
+    expect(new Set(refs).size).toBe(1)
+  })
+
+  it('a cleanup updater returns the same reference when nothing is left for it to remove', async () => {
+    const meshRef = React.createRef<THREE.Mesh>()
+    const updaters: Array<(prev: THREE.Object3D[]) => THREE.Object3D[]> = []
+
+    // React batches both nested Selects' cleanup calls into a single
+    // re-render regardless of this bail-out (the net change from mount to
+    // unmount is real), so the optimization isn't observable through
+    // rendering alone. Capture the raw updater functions instead and
+    // replay them directly to verify the second one bails.
+    function CapturingSelection({ children }: { children: React.ReactNode }) {
+      const [selected, setSelected] = React.useState<THREE.Object3D[]>([])
+      const select = React.useCallback((updater: React.SetStateAction<THREE.Object3D[]>) => {
+        if (typeof updater === 'function') updaters.push(updater as (prev: THREE.Object3D[]) => THREE.Object3D[])
+        setSelected(updater)
+      }, [])
+      const value = React.useMemo(() => ({ selected, select, enabled: true }), [selected, select])
+      return <selectionContext.Provider value={value}>{children}</selectionContext.Provider>
+    }
+
+    const render = (mounted: boolean) =>
+      root.render(
+        <CapturingSelection>
+          {mounted && (
+            <Select enabled>
+              <Select enabled>
+                <mesh ref={meshRef}>
+                  <boxGeometry />
+                  <meshBasicMaterial />
+                </mesh>
+              </Select>
+            </Select>
+          )}
+        </CapturingSelection>
+      )
+
+    await React.act(async () => render(true))
+    await flush()
+    await flush()
+    await flush()
+
+    const mesh = meshRef.current!
+    updaters.length = 0
+    await React.act(async () => render(false))
+    await flush()
+    await flush()
+    await flush()
+
+    expect(updaters).toHaveLength(2)
+    const afterFirst = updaters[0]([mesh])
+    const afterSecond = updaters[1](afterFirst)
+    expect(afterSecond).toBe(afterFirst)
+  })
+})