@react-three/postprocessing 3.0.5 → 3.1.0

package/src/tests/EffectGroup.test.tsx

@@ -0,0 +1,337 @@
+import { CopyPass, Effect, EffectComposer as EffectComposerImpl, EffectPass, RenderPass } from 'postprocessing'
+import * as React from 'react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { EffectGroup } from '../EffectGroup'
+import { wrapEffect } from '../wrapEffect'
+import { EFFECT_SHADER, flush, root, strict, waitForComposer } from './test-utils'
+
+class EffectA extends Effect {
+  constructor() {
+    super('EffectA', EFFECT_SHADER)
+  }
+}
+
+class EffectB extends Effect {
+  constructor() {
+    super('EffectB', EFFECT_SHADER)
+  }
+}
+
+class EffectC extends Effect {
+  constructor() {
+    super('EffectC', EFFECT_SHADER)
+  }
+}
+
+const WrappedEffectA = wrapEffect(EffectA)
+const WrappedEffectB = wrapEffect(EffectB)
+const WrappedEffectC = wrapEffect(EffectC)
+
+// EffectGroup's pass appears in composer.passes only after its own
+// collection-walk effect (child) and EffectComposer's own tree-walk +
+// rebuild effects (parent) have all settled - can take more than one flush.
+const waitUntil = async (predicate: () => boolean): Promise<void> => {
+  for (let i = 0; i < 50; i++) {
+    await flush()
+    if (predicate()) return
+  }
+  throw new Error('Condition never became true')
+}
+
+const waitForGroupPass = async (composer: EffectComposerImpl): Promise<EffectPass> => {
+  await waitUntil(() => composer.passes.some((p) => p instanceof EffectPass))
+  return composer.passes.find((p): p is EffectPass => p instanceof EffectPass)!
+}
+
+afterEach(async () => {
+  await React.act(async () => {
+    root.render(null)
+  })
+})
+
+describe('EffectGroup', () => {
+  it('groups its children into exactly one EffectPass, in JSX order', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <WrappedEffectA />
+          <EffectGroup>
+            <WrappedEffectB />
+            <WrappedEffectC />
+          </EffectGroup>
+        </EffectComposer>
+      )
+    )
+    const composer = await waitForComposer(composerRef)
+    await waitUntil(() => composer.passes.filter((p) => p instanceof EffectPass).length === 2)
+
+    const effectPasses = composer.passes.filter((p): p is EffectPass => p instanceof EffectPass)
+    expect(effectPasses).toHaveLength(2)
+
+    const groupPass = effectPasses.find((p) => (p as unknown as { effects: Effect[] }).effects.length === 2)!
+    expect(groupPass).toBeDefined()
+    const groupedEffects = (groupPass as unknown as { effects: Effect[] }).effects
+    expect(groupedEffects[0]).toBeInstanceOf(EffectB)
+    expect(groupedEffects[1]).toBeInstanceOf(EffectC)
+  })
+
+  it('keeps sibling effects out of the group and preserves relative pass order', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <WrappedEffectA />
+          <EffectGroup>
+            <WrappedEffectB />
+          </EffectGroup>
+          <WrappedEffectC />
+        </EffectComposer>
+      )
+    )
+    const composer = await waitForComposer(composerRef)
+    await waitUntil(() => composer.passes.filter((p) => p instanceof EffectPass).length === 3)
+
+    // A and C are not adjacent (the group's pass sits between them), so
+    // they must NOT get merged into one EffectPass with each other.
+    expect(composer.passes[0]).toBeInstanceOf(RenderPass)
+
+    const effectPasses = composer.passes.filter((p): p is EffectPass => p instanceof EffectPass)
+    expect(effectPasses).toHaveLength(3)
+
+    const effectsOf = (p: EffectPass) => (p as unknown as { effects: Effect[] }).effects
+    expect(effectsOf(effectPasses[0])).toEqual([expect.any(EffectA)])
+    expect(effectsOf(effectPasses[1])).toEqual([expect.any(EffectB)])
+    expect(effectsOf(effectPasses[2])).toEqual([expect.any(EffectC)])
+  })
+
+  it('toggles enabled without reconstructing the pass', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const groupRef = React.createRef<EffectPass>()
+
+    const render = (enabled: boolean) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <EffectGroup ref={groupRef} enabled={enabled}>
+            <WrappedEffectA />
+          </EffectGroup>
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(true))
+    await waitForComposer(composerRef)
+    await waitUntil(() => groupRef.current !== null)
+
+    const pass = groupRef.current
+    expect(pass).not.toBeNull()
+    expect(pass!.enabled).toBe(true)
+
+    await React.act(async () => render(false))
+    await flush()
+
+    expect(groupRef.current).toBe(pass)
+    expect(pass!.enabled).toBe(false)
+  })
+
+  it('keeps something rendering to the screen when the only effect is disabled, via a trailing CopyPass', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const groupRef = React.createRef<EffectPass>()
+
+    const render = (enabled: boolean) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <EffectGroup ref={groupRef} enabled={enabled}>
+            <WrappedEffectA />
+          </EffectGroup>
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(true))
+    const composer = await waitForComposer(composerRef)
+    await waitUntil(() => groupRef.current !== null)
+
+    // Exactly one currently-enabled pass must own renderToScreen at all
+    // times - otherwise nothing (enabled) ever reaches the canvas.
+    const enabledRenderToScreenCount = () => composer.passes.filter((p) => p.enabled && p.renderToScreen).length
+
+    // Enabled: the group's own EffectPass runs; the trailing CopyPass
+    // (always enabled, always structurally last) owns renderToScreen.
+    expect(groupRef.current!.enabled).toBe(true)
+    expect(groupRef.current!.renderToScreen).toBe(false)
+    expect(enabledRenderToScreenCount()).toBe(1)
+
+    await React.act(async () => render(false))
+    await flush()
+
+    // Disabled: the render loop skips the EffectPass entirely, but the
+    // CopyPass - unaffected, still enabled, still owning renderToScreen -
+    // blits whatever buffer is already there through to the screen.
+    expect(groupRef.current!.enabled).toBe(false)
+    expect(enabledRenderToScreenCount()).toBe(1)
+  })
+
+  it('shares a single trailing CopyPass across multiple EffectGroups, not one per group', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <EffectGroup>
+            <WrappedEffectA />
+          </EffectGroup>
+          <EffectGroup>
+            <WrappedEffectB />
+          </EffectGroup>
+        </EffectComposer>
+      )
+    )
+    const composer = await waitForComposer(composerRef)
+    await waitUntil(() => composer.passes.filter((p) => p instanceof EffectPass).length === 2)
+
+    const copyPasses = composer.passes.filter((p) => p instanceof CopyPass)
+    expect(copyPasses).toHaveLength(1)
+    // Structurally last, so it - not either group's own pass - owns renderToScreen.
+    expect(composer.passes[composer.passes.length - 1]).toBe(copyPasses[0])
+    expect(copyPasses[0].renderToScreen).toBe(true)
+  })
+
+  it('adds no CopyPass at all when no EffectGroup is present', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <WrappedEffectA />
+        </EffectComposer>
+      )
+    )
+    const composer = await waitForComposer(composerRef)
+    await waitUntil(() => composer.passes.filter((p) => p instanceof EffectPass).length === 1)
+
+    expect(composer.passes.some((p) => p instanceof CopyPass)).toBe(false)
+  })
+
+  it('exposes the underlying EffectPass via ref', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const groupRef = React.createRef<EffectPass>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <EffectGroup ref={groupRef}>
+            <WrappedEffectA />
+          </EffectGroup>
+        </EffectComposer>
+      )
+    )
+    const composer = await waitForComposer(composerRef)
+    await waitForGroupPass(composer)
+
+    expect(groupRef.current).toBeInstanceOf(EffectPass)
+    expect(composer.passes).toContain(groupRef.current)
+  })
+
+  it('disposes its pass on unmount without double-disposing the grouped effects', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const effectDisposeSpy = vi.spyOn(EffectB.prototype, 'dispose')
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <EffectGroup>
+            <WrappedEffectB />
+          </EffectGroup>
+        </EffectComposer>
+      )
+    )
+    const composer = await waitForComposer(composerRef)
+    const groupPass = await waitForGroupPass(composer)
+    expect(groupPass).toBeDefined()
+
+    await React.act(async () => root.render(null))
+
+    expect(effectDisposeSpy).toHaveBeenCalledTimes(1)
+
+    effectDisposeSpy.mockRestore()
+  })
+
+  it('rebuilds the pass (new identity) when the effect list inside the group changes, mirroring buildPasses', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const groupRef = React.createRef<EffectPass>()
+
+    const render = (withSecond: boolean) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <EffectGroup ref={groupRef}>
+            <WrappedEffectA />
+            {withSecond && <WrappedEffectB />}
+          </EffectGroup>
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(false))
+    await waitForComposer(composerRef)
+    await waitUntil(() => groupRef.current !== null)
+
+    const firstPass = groupRef.current
+    expect((firstPass as unknown as { effects: Effect[] }).effects).toHaveLength(1)
+
+    await React.act(async () => render(true))
+    await waitUntil(() => groupRef.current !== firstPass)
+
+    expect(groupRef.current).not.toBe(firstPass)
+    expect((groupRef.current as unknown as { effects: Effect[] }).effects).toHaveLength(2)
+  })
+
+  it('initializes every effect in a rebuilt group, including ones added at runtime', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const groupRef = React.createRef<EffectPass>()
+    const initializeSpy = vi.spyOn(EffectB.prototype, 'initialize')
+
+    const render = (withSecond: boolean) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <EffectGroup ref={groupRef}>
+            <WrappedEffectA />
+            {withSecond && <WrappedEffectB />}
+          </EffectGroup>
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(false))
+    await waitForComposer(composerRef)
+    await waitUntil(() => groupRef.current !== null)
+
+    expect(initializeSpy).not.toHaveBeenCalled()
+
+    await React.act(async () => render(true))
+    await waitUntil(() => (groupRef.current as unknown as { effects: Effect[] }).effects.length === 2)
+
+    expect(initializeSpy).toHaveBeenCalledTimes(1)
+
+    initializeSpy.mockRestore()
+  })
+
+  it('ends up with exactly one EffectPass in StrictMode, not a stray extra from double-invoked state updates', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    await React.act(async () =>
+      root.render(
+        strict(
+          <EffectComposer ref={composerRef}>
+            <EffectGroup>
+              <WrappedEffectA />
+            </EffectGroup>
+          </EffectComposer>
+        )
+      )
+    )
+    const composer = await waitForComposer(composerRef)
+    await waitUntil(() => composer.passes.some((p) => p instanceof EffectPass))
+
+    expect(composer.passes.filter((p) => p instanceof EffectPass)).toHaveLength(1)
+  })
+})

package/src/tests/Glitch.test.tsx

@@ -0,0 +1,56 @@
+import { EffectComposer as EffectComposerImpl, GlitchEffect, GlitchMode } from 'postprocessing'
+import * as React from 'react'
+import { describe, expect, it } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { Glitch } from '../effects/Glitch'
+import { flush, root } from './test-utils'
+
+describe('Glitch', () => {
+  it('toggles active/mode live, without reconstructing the effect', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<GlitchEffect>()
+
+    const render = (active: boolean) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Glitch ref={ref} active={active} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(true))
+    await flush()
+    const first = ref.current
+    expect(first!.mode).toBe(GlitchMode.SPORADIC)
+
+    await React.act(async () => render(false))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.mode).toBe(GlitchMode.DISABLED)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('reconstructs when dtSize (construction-only) changes', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<GlitchEffect>()
+
+    const render = (dtSize: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Glitch ref={ref} dtSize={dtSize} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(64))
+    await flush()
+    const first = ref.current
+
+    await React.act(async () => render(128))
+    await flush()
+
+    expect(ref.current).not.toBe(first)
+
+    await React.act(async () => root.render(null))
+  })
+})

package/src/tests/GodRays.test.tsx

@@ -0,0 +1,101 @@
+import { EffectComposer as EffectComposerImpl, GodRaysEffect } from 'postprocessing'
+import * as React from 'react'
+import { Mesh, SphereGeometry } from 'three'
+import { describe, expect, it, vi } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { GodRays } from '../effects/GodRays'
+import { flush, root, waitForComposer } from './test-utils'
+
+describe('GodRays', () => {
+  it('applies density live, without reconstructing the effect', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<GodRaysEffect>()
+    const sun = new Mesh(new SphereGeometry(1, 8, 8))
+
+    const render = (density: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <primitive object={sun} />
+          <GodRays ref={ref} sun={sun} density={density} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0.9))
+    await waitForComposer(composerRef)
+    await flush()
+    const first = ref.current
+    expect(first!.godRaysMaterial.density).toBeCloseTo(0.9)
+
+    await React.act(async () => render(0.5))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.godRaysMaterial.density).toBeCloseTo(0.5)
+
+    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<GodRaysEffect>()
+    const sun = new Mesh(new SphereGeometry(1, 8, 8))
+
+    const render = (resolutionScale: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <primitive object={sun} />
+          <GodRays ref={ref} sun={sun} 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))
+  })
+
+  it('invalidates when sun is swapped for a different mesh, so frameloop="demand" repaints', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<GodRaysEffect>()
+    const sunA = new Mesh(new SphereGeometry(1, 8, 8))
+    const sunB = new Mesh(new SphereGeometry(1, 8, 8))
+
+    // Both meshes are mounted unconditionally throughout - only the `sun`
+    // prop GodRays points at changes, so the only invalidate() candidate is
+    // GodRays.tsx's own effect.lightSource assignment, not r3f's native
+    // handling of a <primitive object={...}> swap (a real prop change it
+    // already invalidates for on its own, which a naive test could
+    // mistake for this effect's own behavior).
+    const render = (sun: Mesh) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <primitive object={sunA} />
+          <primitive object={sunB} />
+          <GodRays ref={ref} sun={sun} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(sunA))
+    await waitForComposer(composerRef)
+    await flush()
+    expect(ref.current!.lightSource).toBe(sunA)
+
+    const invalidateSpy = vi.spyOn(root.render(null).getState(), 'invalidate')
+
+    await React.act(async () => render(sunB))
+    await flush()
+
+    expect(ref.current!.lightSource).toBe(sunB)
+    expect(invalidateSpy).toHaveBeenCalled()
+
+    invalidateSpy.mockRestore()
+    await React.act(async () => root.render(null))
+  })
+})

package/src/tests/Grid.test.tsx

@@ -0,0 +1,34 @@
+import { EffectComposer as EffectComposerImpl, GridEffect } from 'postprocessing'
+import * as React from 'react'
+import { describe, expect, it } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { Grid } from '../effects/Grid'
+import { flush, root } from './test-utils'
+
+describe('Grid', () => {
+  it('applies scale/lineWidth live, without reconstructing the effect', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<GridEffect>()
+
+    const render = (scale: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Grid ref={ref} scale={scale} lineWidth={0.1} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(1))
+    await flush()
+    const first = ref.current
+    expect(first!.scale).toBe(1)
+    expect(first!.lineWidth).toBeCloseTo(0.1)
+
+    await React.act(async () => render(2))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.scale).toBe(2)
+
+    await React.act(async () => root.render(null))
+  })
+})

package/src/tests/LUT.test.tsx

@@ -0,0 +1,64 @@
+import { EffectComposer as EffectComposerImpl, LUT3DEffect } from 'postprocessing'
+import * as React from 'react'
+import { DataTexture } from 'three'
+import { describe, expect, it } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { LUT } from '../effects/LUT'
+import { flush, root, waitForComposer } from './test-utils'
+
+describe('LUT', () => {
+  it('applies tetrahedralInterpolation live, without reconstructing the effect', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<LUT3DEffect>()
+    const lut = new DataTexture(new Uint8Array(4 * 4 * 4 * 4), 4, 4)
+
+    const render = (tetrahedralInterpolation: boolean) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <LUT ref={ref} lut={lut} tetrahedralInterpolation={tetrahedralInterpolation} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(false))
+    await waitForComposer(composerRef)
+    await flush()
+    const first = ref.current
+    expect(first!.tetrahedralInterpolation).toBe(false)
+
+    await React.act(async () => render(true))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.tetrahedralInterpolation).toBe(true)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('applies a new lut live via its own setter, without reconstructing the effect', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<LUT3DEffect>()
+    const lutA = new DataTexture(new Uint8Array(4 * 4 * 4 * 4), 4, 4)
+    const lutB = new DataTexture(new Uint8Array(4 * 4 * 4 * 4), 4, 4)
+
+    const render = (lut: DataTexture) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <LUT ref={ref} lut={lut} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(lutA))
+    await waitForComposer(composerRef)
+    await flush()
+    const first = ref.current
+    expect(first!.lut).toBe(lutA)
+
+    await React.act(async () => render(lutB))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.lut).toBe(lutB)
+
+    await React.act(async () => root.render(null))
+  })
+})

package/src/tests/N8AO.test.tsx

@@ -0,0 +1,92 @@
+import { CopyPass, EffectComposer as EffectComposerImpl } from 'postprocessing'
+import * as React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { N8AO } from '../passes/N8AO'
+import { flush, root, waitForComposer } from './test-utils'
+
+describe('N8AO', () => {
+  it('invalidates after a live config change and after a quality change, so frameloop="demand" repaints', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const invalidateSpy = vi.spyOn(root.render(null).getState(), 'invalidate')
+
+    const render = (intensity: number, quality?: 'performance' | 'ultra') =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <N8AO intensity={intensity} quality={quality} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(1))
+    await flush()
+    invalidateSpy.mockClear()
+
+    await React.act(async () => render(2))
+    await flush()
+    expect(invalidateSpy).toHaveBeenCalled()
+
+    invalidateSpy.mockClear()
+
+    await React.act(async () => render(2, 'ultra'))
+    await flush()
+    expect(invalidateSpy).toHaveBeenCalled()
+
+    invalidateSpy.mockRestore()
+    await React.act(async () => root.render(null))
+  })
+
+  it('toggles enabled without reconstructing the pass', async () => {
+    const ref = React.createRef<any>()
+
+    const render = (enabled: boolean) =>
+      root.render(
+        <EffectComposer>
+          <N8AO ref={ref} enabled={enabled} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(true))
+    await flush()
+    const instance = ref.current
+    expect(instance.enabled).toBe(true)
+
+    await React.act(async () => render(false))
+    await flush()
+    expect(ref.current).toBe(instance)
+    expect(instance.enabled).toBe(false)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('gets the shared trailing CopyPass safety net, keeping something rendering to screen when disabled', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<any>()
+
+    const render = (enabled: boolean) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <N8AO ref={ref} enabled={enabled} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(true))
+    const composer = await waitForComposer(composerRef)
+    await flush()
+
+    const copyPass = composer.passes.find((p) => p instanceof CopyPass)
+    expect(copyPass).toBeDefined()
+
+    const enabledRenderToScreenCount = () => composer.passes.filter((p) => p.enabled && p.renderToScreen).length
+    expect(enabledRenderToScreenCount()).toBe(1)
+
+    await React.act(async () => render(false))
+    await flush()
+
+    // N8AO's own pass is now disabled, but exactly one enabled pass must
+    // still own renderToScreen - otherwise nothing reaches the canvas.
+    expect(enabledRenderToScreenCount()).toBe(1)
+    expect(copyPass!.renderToScreen).toBe(true)
+
+    await React.act(async () => root.render(null))
+  })
+})