@react-three/postprocessing 3.0.5 → 3.1.1

package/src/tests/Outline.test.tsx

@@ -86,4 +86,126 @@ describe('Outline', () => {
     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/SelectiveBloom.test.tsx

@@ -115,4 +115,52 @@ describe('SelectiveBloom', () => {
     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))
+  })
+})