@react-three/postprocessing 3.0.4 → 3.1.0

package/src/tests/SelectiveBloom.test.tsx

@@ -0,0 +1,166 @@
+import { EffectComposer as EffectComposerImpl, SelectiveBloomEffect } from 'postprocessing'
+import * as React from 'react'
+import { Mesh, Object3D, PointLight } from 'three'
+import { afterEach, describe, expect, it } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { SelectiveBloom } from '../effects/SelectiveBloom'
+import { Select, Selection } from '../Selection'
+import { flush, root, waitForComposer } from './test-utils'
+
+afterEach(async () => {
+  await React.act(async () => {
+    root.render(null)
+  })
+})
+
+describe('SelectiveBloom', () => {
+  it('does not reconstruct the effect (with its GPU resources) on unrelated re-renders', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const effectRef = React.createRef<SelectiveBloomEffect>()
+    const light = new PointLight()
+
+    const render = (tick: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <SelectiveBloom ref={effectRef} lights={[light]} intensity={2} />
+          <group name={`tick-${tick}`} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0))
+    await waitForComposer(composerRef)
+    await flush()
+    const first = effectRef.current
+    expect(first).toBeTruthy()
+
+    for (let t = 1; t <= 5; t++) {
+      await React.act(async () => render(t))
+      await flush()
+    }
+
+    expect(effectRef.current).toBe(first)
+  })
+
+  it('sets its selection from the Selection/Select API and clears it when the object deselects', async () => {
+    const effectRef = React.createRef<SelectiveBloomEffect>()
+    const meshRef = React.createRef<Mesh>()
+    const light = new PointLight()
+
+    const render = (enabled: boolean) =>
+      root.render(
+        <EffectComposer>
+          <Selection>
+            <Select enabled={enabled}>
+              <mesh ref={meshRef}>
+                <boxGeometry />
+                <meshBasicMaterial />
+              </mesh>
+            </Select>
+            <SelectiveBloom ref={effectRef} lights={[light]} />
+          </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('moves lights to the new render layer when selectionLayer changes', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const effectRef = React.createRef<SelectiveBloomEffect>()
+    const light = new PointLight()
+    const onLayer = (n: number) => light.layers.test({ mask: 1 << n } as never)
+
+    const render = (layer: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <SelectiveBloom ref={effectRef} lights={[light]} selectionLayer={layer} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(10))
+    await waitForComposer(composerRef)
+    await flush()
+    await flush()
+    expect(onLayer(10)).toBe(true)
+
+    await React.act(async () => render(15))
+    await flush()
+    await flush()
+
+    expect(onLayer(15)).toBe(true)
+    expect(onLayer(10)).toBe(false)
+  })
+
+  it('does not throw when a lights 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}>
+          <SelectiveBloom lights={[unattachedRef]} />
+        </EffectComposer>
+      )
+    )
+    await waitForComposer(composerRef)
+    await expect(flush()).resolves.not.toThrow()
+  })
+
+  it('applies intensity live, without reconstructing the effect', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const effectRef = React.createRef<SelectiveBloomEffect>()
+    const light = new PointLight()
+
+    const render = (intensity: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <SelectiveBloom ref={effectRef} lights={[light]} intensity={intensity} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(1))
+    await waitForComposer(composerRef)
+    await flush()
+    const first = effectRef.current
+    expect(first!.intensity).toBe(1)
+
+    await React.act(async () => render(3))
+    await flush()
+
+    expect(effectRef.current).toBe(first)
+    expect(effectRef.current!.intensity).toBe(3)
+  })
+
+  it('still reconstructs when luminanceThreshold changes (no live setter in postprocessing)', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const effectRef = React.createRef<SelectiveBloomEffect>()
+    const light = new PointLight()
+
+    const render = (luminanceThreshold: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <SelectiveBloom ref={effectRef} lights={[light]} luminanceThreshold={luminanceThreshold} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0.5))
+    await waitForComposer(composerRef)
+    await flush()
+    const first = effectRef.current
+
+    await React.act(async () => render(0.8))
+    await flush()
+
+    expect(effectRef.current).not.toBe(first)
+  })
+})

package/src/tests/ShockWave.test.tsx

@@ -0,0 +1,95 @@
+import { EffectComposer as EffectComposerImpl, ShockWaveEffect } from 'postprocessing'
+import * as React from 'react'
+import { Vector3 } from 'three'
+import { describe, expect, it } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { ShockWave } from '../effects/ShockWave'
+import { flush, root } from './test-utils'
+
+describe('ShockWave', () => {
+  it('applies speed and position, which createEffectComponent cannot (ShockWaveEffect takes them as a 3rd ctor arg)', async () => {
+    const ref = React.createRef<ShockWaveEffect>()
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const position = new Vector3(1, 2, 3)
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <ShockWave ref={ref} speed={5} position={position} />
+        </EffectComposer>
+      )
+    )
+
+    await flush()
+
+    expect(ref.current!.speed).toBe(5)
+    expect(ref.current!.position).toBe(position)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('updates speed/position live, without reconstructing the instance', async () => {
+    const ref = React.createRef<ShockWaveEffect>()
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <ShockWave ref={ref} speed={1} />
+        </EffectComposer>
+      )
+    )
+
+    await flush()
+
+    const firstInstance = ref.current
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <ShockWave ref={ref} speed={2} waveSize={0.5} />
+        </EffectComposer>
+      )
+    )
+
+    await flush()
+
+    expect(ref.current).toBe(firstInstance)
+    expect(ref.current!.speed).toBe(2)
+    expect(ref.current!.waveSize).toBe(0.5)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('resets speed to its constructor default when the prop is removed', async () => {
+    const ref = React.createRef<ShockWaveEffect>()
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <ShockWave ref={ref} speed={5} />
+        </EffectComposer>
+      )
+    )
+
+    await flush()
+
+    expect(ref.current!.speed).toBe(5)
+    const defaultSpeed = 2
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <ShockWave ref={ref} />
+        </EffectComposer>
+      )
+    )
+
+    await flush()
+
+    expect(ref.current!.speed).toBe(defaultSpeed)
+
+    await React.act(async () => root.render(null))
+  })
+})

package/src/tests/TiltShift.test.tsx

@@ -0,0 +1,76 @@
+import { EffectComposer as EffectComposerImpl, TiltShiftEffect } from 'postprocessing'
+import * as React from 'react'
+import { describe, expect, it } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { TiltShift } from '../effects/TiltShift'
+import { flush, root } from './test-utils'
+
+describe('TiltShift', () => {
+  it('applies resolutionScale at construction (previously never reached the effect at all)', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<TiltShiftEffect>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <TiltShift ref={ref} resolutionScale={0.25} />
+        </EffectComposer>
+      )
+    )
+
+    await flush()
+
+    expect(ref.current!.blurPass.resolution.scale).toBeCloseTo(0.25)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('reconstructs when resolutionScale (construction-only) changes', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<TiltShiftEffect>()
+
+    const render = (resolutionScale: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <TiltShift ref={ref} resolutionScale={resolutionScale} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0.25))
+    await flush()
+    const first = ref.current
+
+    await React.act(async () => render(0.5))
+    await flush()
+
+    expect(ref.current).not.toBe(first)
+    expect(ref.current!.blurPass.resolution.scale).toBeCloseTo(0.5)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('applies offset live, without reconstructing the effect', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<TiltShiftEffect>()
+
+    const render = (offset: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <TiltShift ref={ref} offset={offset} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0.1))
+    await flush()
+    const first = ref.current
+    expect(first!.offset).toBeCloseTo(0.1)
+
+    await React.act(async () => render(0.2))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.offset).toBeCloseTo(0.2)
+
+    await React.act(async () => root.render(null))
+  })
+})

package/src/tests/createEffectComponent.test.tsx

@@ -0,0 +1,286 @@
+import { Effect, EffectComposer as EffectComposerImpl } from 'postprocessing'
+import * as React from 'react'
+import { Uniform } from 'three'
+import { describe, expect, it, vi } from 'vitest'
+import { createEffectComponent } from '../createEffectComponent'
+import { EffectComposer } from '../EffectComposer'
+import { flush, root } from './test-utils'
+
+// Zero-arity, real accessor - the class of effect createEffectComponent
+// targets. Matches BloomEffect's shape: `constructor({...} = {})`.
+class FakeEffect extends Effect {
+  private _value: number
+  constructor({ value = 0 }: { value?: number } = {}) {
+    super('FakeEffect', 'mainImage() {}')
+    this._value = value
+  }
+  get value() {
+    return this._value
+  }
+  set value(v: number) {
+    this._value = v
+  }
+}
+
+const FakeEffectComponent = /* @__PURE__ */ createEffectComponent<typeof FakeEffect, { value?: number }>(FakeEffect)
+
+// Options stored only in `uniforms` (mirrors WaterEffectImpl/RampEffect
+// before this branch gave them real accessors) - `factor` here HAS a real
+// accessor, proving that's what makes a plain JSX prop actually reach it.
+class UniformFixtureEffect extends Effect {
+  constructor({ factor = 0 }: { factor?: number } = {}) {
+    super('UniformFixtureEffect', 'mainImage() {}', { uniforms: new Map([['factor', new Uniform(factor)]]) })
+  }
+  get factor(): number {
+    return this.uniforms.get('factor')!.value
+  }
+  set factor(v: number) {
+    this.uniforms.get('factor')!.value = v
+  }
+}
+
+const UniformFixtureComponent = /* @__PURE__ */ createEffectComponent<typeof UniformFixtureEffect, { factor?: number }>(
+  UniformFixtureEffect
+)
+
+describe('createEffectComponent', () => {
+  it('constructs the effect and passes props through to the instance', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <FakeEffectComponent value={42} />
+        </EffectComposer>
+      )
+    )
+
+    await flush()
+
+    // @ts-expect-error - `effects` isn't part of the public Pass typing
+    const effect = composerRef.current!.passes[1].effects[0]
+
+    expect(effect).toBeInstanceOf(FakeEffect)
+    expect(effect.value).toBe(42)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('applies a live prop without reconstructing the instance (r3f-native, no args change)', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<FakeEffect>()
+
+    const render = (value: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <FakeEffectComponent ref={ref} value={value} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(1))
+    await flush()
+    const first = ref.current
+    expect(first!.value).toBe(1)
+
+    await React.act(async () => render(2))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.value).toBe(2)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('resets a live prop to its constructor default when removed (r3f-native diffProps)', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<FakeEffect>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <FakeEffectComponent ref={ref} value={5} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+    expect(ref.current!.value).toBe(5)
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <FakeEffectComponent ref={ref} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+
+    expect(ref.current!.value).toBe(0)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('reconstructs when an explicit args prop changes, same as any other r3f element', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<FakeEffect>()
+
+    const render = (value: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <FakeEffectComponent ref={ref} args={[{ value }]} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(1))
+    await flush()
+    const first = ref.current
+    expect(first!.value).toBe(1)
+
+    await React.act(async () => render(2))
+    await flush()
+
+    expect(ref.current).not.toBe(first)
+    expect(ref.current!.value).toBe(2)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('applies blendFunction/opacity through blendMode, not as a stray top-level property', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<FakeEffect>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <FakeEffectComponent ref={ref} blendFunction={7 as never} opacity={0.5} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+
+    expect(ref.current!.blendMode.blendFunction).toBe(7)
+    expect(ref.current!.blendMode.opacity.value).toBe(0.5)
+    expect((ref.current as unknown as { blendFunction?: unknown }).blendFunction).toBeUndefined()
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('resets blendFunction/opacity to blendMode\'s own defaults when the props are removed', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<FakeEffect>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <FakeEffectComponent ref={ref} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+    const defaultBlendFunction = ref.current!.blendMode.blendFunction
+    const defaultOpacity = ref.current!.blendMode.opacity.value
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <FakeEffectComponent ref={ref} blendFunction={7 as never} opacity={0.5} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+    expect(ref.current!.blendMode.blendFunction).toBe(7)
+    expect(ref.current!.blendMode.opacity.value).toBe(0.5)
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <FakeEffectComponent ref={ref} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+
+    expect(ref.current!.blendMode.blendFunction).toBe(defaultBlendFunction)
+    expect(ref.current!.blendMode.opacity.value).toBe(defaultOpacity)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('updates a uniforms-Map-backed prop live via its accessor, without reconstructing', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<UniformFixtureEffect>()
+
+    const render = (factor: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <UniformFixtureComponent ref={ref} factor={factor} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(1))
+    await flush()
+    const first = ref.current
+    expect(first!.uniforms.get('factor')!.value).toBe(1)
+
+    await React.act(async () => render(2))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.uniforms.get('factor')!.value).toBe(2)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('disposes the instance on unmount', async () => {
+    const disposeSpy = vi.spyOn(FakeEffect.prototype, 'dispose')
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    try {
+      await React.act(async () =>
+        root.render(
+          <EffectComposer ref={composerRef}>
+            <FakeEffectComponent value={1} />
+          </EffectComposer>
+        )
+      )
+      await flush()
+
+      await React.act(async () => root.render(null))
+
+      expect(disposeSpy).toHaveBeenCalledTimes(1)
+    } finally {
+      disposeSpy.mockRestore()
+    }
+  })
+
+  it('forwards a callback ref\'s own returned cleanup (React 19 ref cleanup), instead of dropping it', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const events: string[] = []
+    const cleanup = vi.fn(() => {
+      events.push('cleanup')
+    })
+    const callbackRef = vi.fn((instance: FakeEffect | null) => {
+      events.push(instance ? 'attach' : 'attach-null')
+      if (instance) return cleanup
+    })
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <FakeEffectComponent ref={callbackRef} value={1} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+
+    expect(callbackRef).toHaveBeenCalledTimes(1)
+    expect(cleanup).not.toHaveBeenCalled()
+
+    await React.act(async () => root.render(null))
+
+    // React 19 ref-cleanup semantics: once a cleanup is returned, it's
+    // called directly - the callback itself is never re-invoked with null.
+    expect(cleanup).toHaveBeenCalledTimes(1)
+    expect(callbackRef).toHaveBeenCalledTimes(1)
+    expect(events).toEqual(['attach', 'cleanup'])
+  })
+})