@react-three/postprocessing 3.0.5 → 3.1.0

package/src/effects/Texture.tsx

@@ -1,17 +1,22 @@
 import { useLoader } from '@react-three/fiber'
 import { TextureEffect } from 'postprocessing'
-import { Ref, useLayoutEffect, useMemo } from 'react'
+import type { Ref } from 'react'
+import { useLayoutEffect } from 'react'
 import { RepeatWrapping, SRGBColorSpace, TextureLoader } from 'three'
-import { useDispose } from '../util'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
 
-type TextureProps = ConstructorParameters<typeof TextureEffect>[0] & {
+const TextureImpl = /* @__PURE__ */ createEffectComponent<typeof TextureEffect, EffectOptions<typeof TextureEffect>>(
+  TextureEffect
+)
+
+export type TextureProps = EffectOptions<typeof TextureEffect> & {
   textureSrc: string
   /** opacity of provided texture */
   opacity?: number
   ref?: Ref<TextureEffect>
 }
 
-export function Texture({ textureSrc, texture, opacity = 1, ref, ...props }: TextureProps) {
+export function Texture({ textureSrc, texture, opacity = 1, ...props }: TextureProps) {
   const t = useLoader(TextureLoader, textureSrc)
 
   useLayoutEffect(() => {
@@ -19,9 +24,5 @@ export function Texture({ textureSrc, texture, opacity = 1, ref, ...props }: Tex
     t.wrapS = t.wrapT = RepeatWrapping
   }, [t])
 
-  const effect = useMemo(() => new TextureEffect({ ...props, texture: t || texture }), [])
-
-  useDispose(effect)
-
-  return <primitive ref={ref} object={effect} blendMode-opacity-value={opacity} />
+  return <TextureImpl {...props} texture={texture ?? t} opacity={opacity} />
 }

package/src/effects/TiltShift.tsx

@@ -1,4 +1,32 @@
 import { BlendFunction, TiltShiftEffect } from 'postprocessing'
-import { wrapEffect } from '../wrapEffect'
+import type { Ref } from 'react'
+import { useMemo } from 'react'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
 
-export const TiltShift = /* @__PURE__ */ wrapEffect(TiltShiftEffect, { blendFunction: BlendFunction.ADD })
+type TiltShiftOptions = EffectOptions<typeof TiltShiftEffect>
+
+const TiltShiftImpl = /* @__PURE__ */ createEffectComponent<typeof TiltShiftEffect, TiltShiftOptions>(TiltShiftEffect)
+
+export type TiltShiftProps = TiltShiftOptions & {
+  opacity?: number
+  ref?: Ref<TiltShiftEffect>
+}
+
+// kernelSize/resolutionScale/resolutionX/resolutionY have no live setter in
+// postprocessing - routed through args so they still work as plain props
+// (previously they were passed as plain props and silently never reached
+// the effect at all, since there was no setter for diffProps to hit).
+export function TiltShift({
+  blendFunction = BlendFunction.ADD,
+  kernelSize,
+  resolutionScale,
+  resolutionX,
+  resolutionY,
+  ...liveProps
+}: TiltShiftProps) {
+  const args = useMemo<[TiltShiftOptions]>(
+    () => [{ kernelSize, resolutionScale, resolutionX, resolutionY }],
+    [kernelSize, resolutionScale, resolutionX, resolutionY]
+  )
+  return <TiltShiftImpl blendFunction={blendFunction} args={args} {...liveProps} />
+}

package/src/effects/TiltShift2.tsx

@@ -1,6 +1,7 @@
 import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import type { Ref } from 'react'
 import { Uniform } from 'three'
-import { wrapEffect } from '../wrapEffect'
+import { createEffectComponent } from '../createEffectComponent'
 
 const TiltShiftShader = {
   fragmentShader: /* glsl */ `
@@ -62,20 +63,22 @@ const TiltShiftShader = {
     `,
 }
 
+type Vec2Tuple = [number, number]
+
 export class TiltShiftEffect extends Effect {
   constructor({
     blendFunction = BlendFunction.NORMAL,
     blur = 0.15, // [0, 1], can go beyond 1 for extra
     taper = 0.5, // [0, 1], can go beyond 1 for extra
-    start = [0.5, 0.0], // [0,1] percentage x,y of screenspace
-    end = [0.5, 1.0], // [0,1] percentage x,y of screenspace
+    start = [0.5, 0.0] as Vec2Tuple, // [0,1] percentage x,y of screenspace
+    end = [0.5, 1.0] as Vec2Tuple, // [0,1] percentage x,y of screenspace
     samples = 10.0, // number of blur samples
-    direction = [1, 1], // direction of blur
+    direction = [1, 1] as Vec2Tuple, // direction of blur
   } = {}) {
     super('TiltShiftEffect', TiltShiftShader.fragmentShader, {
       blendFunction,
       attributes: EffectAttribute.CONVOLUTION,
-      uniforms: new Map<string, Uniform<number | number[]>>([
+      uniforms: new Map<string, Uniform<number | Vec2Tuple>>([
         ['blur', new Uniform(blur)],
         ['taper', new Uniform(taper)],
         ['start', new Uniform(start)],
@@ -85,6 +88,69 @@ export class TiltShiftEffect extends Effect {
       ]),
     })
   }
+
+  private u<T>(name: string): T {
+    return this.uniforms.get(name)!.value
+  }
+
+  private setU(name: string, value: unknown): void {
+    this.uniforms.get(name)!.value = value
+  }
+
+  get blur(): number {
+    return this.u('blur')
+  }
+  set blur(value: number) {
+    this.setU('blur', value)
+  }
+
+  get taper(): number {
+    return this.u('taper')
+  }
+  set taper(value: number) {
+    this.setU('taper', value)
+  }
+
+  get start(): Vec2Tuple {
+    return this.u('start')
+  }
+  set start(value: Vec2Tuple) {
+    this.setU('start', value)
+  }
+
+  get end(): Vec2Tuple {
+    return this.u('end')
+  }
+  set end(value: Vec2Tuple) {
+    this.setU('end', value)
+  }
+
+  get samples(): number {
+    return this.u('samples')
+  }
+  set samples(value: number) {
+    this.setU('samples', value)
+  }
+
+  get direction(): Vec2Tuple {
+    return this.u('direction')
+  }
+  set direction(value: Vec2Tuple) {
+    this.setU('direction', value)
+  }
+}
+
+export type TiltShift2Props = {
+  blendFunction?: BlendFunction
+  blur?: number
+  taper?: number
+  start?: Vec2Tuple
+  end?: Vec2Tuple
+  samples?: number
+  direction?: Vec2Tuple
+  ref?: Ref<TiltShiftEffect>
 }
 
-export const TiltShift2 = /* @__PURE__ */ wrapEffect(TiltShiftEffect, { blendFunction: BlendFunction.NORMAL })
+export const TiltShift2 = /* @__PURE__ */ createEffectComponent<typeof TiltShiftEffect, TiltShift2Props>(
+  TiltShiftEffect
+)

package/src/effects/ToneMapping.tsx

@@ -1,6 +1,19 @@
 import { ToneMappingEffect } from 'postprocessing'
-import { type EffectProps, wrapEffect } from '../wrapEffect'
+import type { Ref } from 'react'
+import { useMemo } from 'react'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
 
-export type ToneMappingProps = EffectProps<typeof ToneMappingEffect>
+type ToneMappingOptions = EffectOptions<typeof ToneMappingEffect>
 
-export const ToneMapping = /* @__PURE__ */ wrapEffect(ToneMappingEffect)
+const ToneMappingImpl = /* @__PURE__ */ createEffectComponent<typeof ToneMappingEffect, ToneMappingOptions>(
+  ToneMappingEffect
+)
+
+export type ToneMappingProps = ToneMappingOptions & { opacity?: number; ref?: Ref<ToneMappingEffect> }
+
+// minLuminance/maxLuminance have no live setter in postprocessing - routed
+// through args so they still work as plain props.
+export function ToneMapping({ minLuminance, maxLuminance, ...liveProps }: ToneMappingProps) {
+  const args = useMemo<[ToneMappingOptions]>(() => [{ minLuminance, maxLuminance }], [minLuminance, maxLuminance])
+  return <ToneMappingImpl args={args} {...liveProps} />
+}

package/src/effects/Vignette.tsx

@@ -1,4 +1,7 @@
 import { VignetteEffect } from 'postprocessing'
-import { wrapEffect } from '../wrapEffect'
+import { createEffectComponent, type EffectOptions } from '../createEffectComponent'
 
-export const Vignette = /* @__PURE__ */ wrapEffect(VignetteEffect)
+export const Vignette = /* @__PURE__ */ createEffectComponent<
+  typeof VignetteEffect,
+  EffectOptions<typeof VignetteEffect>
+>(VignetteEffect)

package/src/effects/Water.tsx

@@ -1,6 +1,7 @@
 import { BlendFunction, Effect, EffectAttribute } from 'postprocessing'
+import type { Ref } from 'react'
 import { Uniform } from 'three'
-import { wrapEffect } from '../wrapEffect'
+import { createEffectComponent } from '../createEffectComponent'
 
 const WaterShader = {
   fragmentShader: /* glsl */ `
@@ -10,7 +11,7 @@ const WaterShader = {
       vec2 vUv = uv;
       float frequency = 6.0 * factor;
       float amplitude = 0.015 * factor;
-      float x = vUv.y * frequency + time * 0.7; 
+      float x = vUv.y * frequency + time * 0.7;
       float y = vUv.x * frequency + time * 0.3;
       vUv.x += cos(x + y) * amplitude * cos(y);
       vUv.y += sin(x - y) * amplitude * cos(y);
@@ -25,11 +26,25 @@ export class WaterEffectImpl extends Effect {
     super('WaterEffect', WaterShader.fragmentShader, {
       blendFunction,
       attributes: EffectAttribute.CONVOLUTION,
-      uniforms: new Map<string, Uniform<number | number[]>>([['factor', new Uniform(factor)]]),
+      uniforms: new Map<string, Uniform<number>>([['factor', new Uniform(factor)]]),
     })
   }
+
+  get factor(): number {
+    return this.uniforms.get('factor')!.value
+  }
+
+  set factor(value: number) {
+    this.uniforms.get('factor')!.value = value
+  }
+}
+
+export type WaterEffectProps = {
+  blendFunction?: BlendFunction
+  factor?: number
+  ref?: Ref<WaterEffectImpl>
 }
 
-export const WaterEffect = /* @__PURE__ */ wrapEffect(WaterEffectImpl, {
-  blendFunction: BlendFunction.NORMAL,
-})
+export const WaterEffect = /* @__PURE__ */ createEffectComponent<typeof WaterEffectImpl, WaterEffectProps>(
+  WaterEffectImpl
+)

package/src/index.ts

@@ -1,4 +1,6 @@
+export * from './createEffectComponent'
 export * from './EffectComposer'
+export * from './EffectGroup'
 export * from './Selection'
 export * from './util'
 export * from './wrapEffect'
@@ -37,5 +39,5 @@ export * from './effects/ToneMapping'
 export * from './effects/Vignette'
 export * from './effects/Water'
 
-// These are not effect passes
-export * from './effects/N8AO'
+export * from './passes/DepthPicking'
+export * from './passes/N8AO'

package/src/passes/DepthPicking.tsx

@@ -0,0 +1,63 @@
+import { useThree } from '@react-three/fiber'
+import { CopyPass, DepthPickingPass as DepthPickingPassImpl } from 'postprocessing'
+import { use, useCallback, useEffect, useImperativeHandle, useState, type Ref } from 'react'
+import type { Camera } from 'three'
+import { Vector2, Vector3 } from 'three'
+import { EffectComposerContext } from '../EffectComposer'
+import { useDispose } from '../util'
+
+export type DepthPickingApi = {
+  readDepth: (ndc: Vector2 | Vector3) => Promise<number>
+}
+
+export type DepthPickingProps = {
+  ref?: Ref<DepthPickingApi>
+}
+
+// Mounts a vanilla `postprocessing` DepthPickingPass and exposes its
+// `readDepth` via ref - nothing else. Renders nothing. Pair with
+// `useDepthPicking` for a world-space position instead of raw depth.
+export function DepthPicking({ ref }: DepthPickingProps) {
+  const { composer } = use(EffectComposerContext)
+
+  const [depthPickingPass] = useState(() => new DepthPickingPassImpl())
+  const [copyPass] = useState(() => new CopyPass())
+  useEffect(() => {
+    composer.addPass(depthPickingPass)
+    composer.addPass(copyPass)
+    return () => {
+      composer.removePass(depthPickingPass)
+      composer.removePass(copyPass)
+    }
+  }, [composer, depthPickingPass, copyPass])
+
+  useDispose(depthPickingPass)
+  useDispose(copyPass)
+
+  useImperativeHandle(ref, () => ({ readDepth: (ndc) => depthPickingPass.readDepth(ndc) }), [depthPickingPass])
+
+  return null
+}
+
+export function useDepthPicking(pass: React.RefObject<DepthPickingApi | null>, camera?: Camera) {
+  const composerCamera = use(EffectComposerContext)?.camera
+  const defaultCamera = useThree((state) => state.camera)
+  const resolvedCamera = camera ?? composerCamera ?? defaultCamera
+  const [ndc] = useState(() => new Vector3())
+
+  return useCallback(
+    async (x: number, y: number): Promise<Vector3 | false> => {
+      if (!pass.current) return false
+      ndc.x = x
+      ndc.y = y
+      ndc.z = await pass.current.readDepth(ndc)
+      ndc.z = ndc.z * 2.0 - 1.0
+      const hit = 1 - ndc.z > 0.0000001 // missed if ndc.z is close to 1
+      // clone - unproject mutates in place, and ndc is reused across calls,
+      // so returning it directly would hand out a reference that changes
+      // under the caller on the next pick.
+      return hit ? ndc.clone().unproject(resolvedCamera) : false
+    },
+    [pass, resolvedCamera, ndc]
+  )
+}

package/src/{effects → passes}/N8AO.tsx

@@ -5,9 +5,11 @@ import { ReactThreeFiber, applyProps, useThree } from '@react-three/fiber'
 import { Ref, useLayoutEffect, useMemo } from 'react'
 /* @ts-ignore */
 import { N8AOPostPass } from 'n8ao'
+import { groupPasses } from '../EffectComposer'
 import { useDispose } from '../util'
 
 export type N8AOProps = {
+  enabled?: boolean
   aoRadius?: number
   distanceFalloff?: number
   intensity?: number
@@ -24,6 +26,7 @@ export type N8AOProps = {
 }
 
 export function N8AO({
+  enabled = true,
   halfRes,
   screenSpaceRadius,
   quality,
@@ -38,12 +41,26 @@ export function N8AO({
   renderMode = 0,
   ref,
 }: N8AOProps) {
-  const { camera, scene } = useThree()
-  const effect = useMemo(() => new N8AOPostPass(scene, camera), [camera, scene])
+  const { camera, scene, invalidate } = useThree()
+  const effect = useMemo(() => {
+    const instance = new N8AOPostPass(scene, camera)
+    // N8AOPostPass isn't a postprocessing Effect, so it's not mergeable via
+    // EffectGroup - it's already a standalone Pass, hence its own `enabled`
+    // prop below instead. Registering it here still gets it the shared
+    // trailing CopyPass safety net (see EffectComposer.tsx) so disabling it
+    // while it's the last pass in the chain doesn't blank the canvas.
+    groupPasses.add(instance)
+    return instance
+  }, [camera, scene])
 
   // TODO: implement dispose upstream; this effect has memory leaks without
   useDispose(effect)
 
+  useLayoutEffect(() => {
+    effect.enabled = enabled
+    invalidate()
+  }, [effect, enabled, invalidate])
+
   useLayoutEffect(() => {
     applyProps(effect.configuration, {
       color,
@@ -58,6 +75,9 @@ export function N8AO({
       halfRes,
       depthAwareUpsampling,
     })
+    // effect.configuration is a plain object, never r3f-managed - applyProps'
+    // own invalidate (gated behind object.__r3f) never fires for it.
+    invalidate()
   }, [
     screenSpaceRadius,
     color,
@@ -71,11 +91,15 @@ export function N8AO({
     halfRes,
     depthAwareUpsampling,
     effect,
+    invalidate,
   ])
 
   useLayoutEffect(() => {
-    if (quality) effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1))
-  }, [effect, quality])
+    if (quality) {
+      effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1))
+      invalidate()
+    }
+  }, [effect, quality, invalidate])
 
   return <primitive ref={ref} object={effect} />
 }

package/src/tests/Autofocus.test.tsx

@@ -0,0 +1,38 @@
+import { DepthPickingPass, EffectComposer as EffectComposerImpl, EffectPass, RenderPass } from 'postprocessing'
+import * as React from 'react'
+import { describe, expect, it } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { Autofocus } from '../effects/Autofocus'
+import { flush, root, strict, waitForComposer } from './test-utils'
+
+describe('Autofocus', () => {
+  it('inserts depthPickingPass right after RenderPass, not appended at the end', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    await React.act(async () => root.render(<EffectComposer ref={composerRef}>{<Autofocus />}</EffectComposer>))
+    const composer = await waitForComposer(composerRef)
+    await flush()
+
+    expect(composer.passes[0]).toBeInstanceOf(RenderPass)
+    expect(composer.passes[1]).toBeInstanceOf(DepthPickingPass)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('never lets depthPickingPass own renderToScreen, regardless of StrictMode double-invocation', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+
+    await React.act(async () => root.render(strict(<EffectComposer ref={composerRef}>{<Autofocus />}</EffectComposer>)))
+    const composer = await waitForComposer(composerRef)
+    for (let i = 0; i < 10; i++) await flush()
+
+    const depthPickingPass = composer.passes.find((p) => p instanceof DepthPickingPass)!
+    expect(depthPickingPass.renderToScreen).toBe(false)
+
+    // The real, visible output (DepthOfField's own EffectPass) must own it instead.
+    const effectPass = composer.passes.find((p) => p instanceof EffectPass)!
+    expect(effectPass.renderToScreen).toBe(true)
+
+    await React.act(async () => root.render(null))
+  })
+})

package/src/tests/Bloom.test.tsx

@@ -0,0 +1,76 @@
+import { BloomEffect, EffectComposer as EffectComposerImpl } from 'postprocessing'
+import * as React from 'react'
+import { describe, expect, it } from 'vitest'
+import { EffectComposer } from '../EffectComposer'
+import { Bloom } from '../effects/Bloom'
+import { flush, root } from './test-utils'
+
+describe('Bloom', () => {
+  it('applies intensity live, without reconstructing the effect', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<BloomEffect>()
+
+    const render = (intensity: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Bloom ref={ref} intensity={intensity} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(1))
+    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 mipmapBlur (a construction-only option) as a plain prop, reconstructing under the hood', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<BloomEffect>()
+
+    const render = (mipmapBlur: boolean) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Bloom ref={ref} mipmapBlur={mipmapBlur} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(true))
+    await flush()
+    const first = ref.current
+    expect(first!.mipmapBlurPass.enabled).toBe(true)
+
+    await React.act(async () => render(false))
+    await flush()
+
+    expect(ref.current).not.toBe(first)
+    expect(ref.current!.mipmapBlurPass.enabled).toBe(false)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('accepts opacity, as documented in the README (#opacity narrower than createEffectComponent allows)', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<BloomEffect>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <Bloom ref={ref} opacity={0.02} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+
+    expect(ref.current!.blendMode.opacity.value).toBe(0.02)
+
+    await React.act(async () => root.render(null))
+  })
+})

package/src/tests/ChromaticAberration.test.tsx

@@ -28,4 +28,54 @@ describe('ChromaticAberration', () => {
 
     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<ChromaticAberrationEffect>()
+
+    const render = (x: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <ChromaticAberration ref={ref} offset={[x, 0.001]} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(0.01))
+    await flush()
+    const first = ref.current
+    expect(first!.offset.x).toBeCloseTo(0.01)
+
+    await React.act(async () => render(0.02))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.offset.x).toBeCloseTo(0.02)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('applies radialModulation live, without reconstructing the effect', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<ChromaticAberrationEffect>()
+
+    const render = (radialModulation: boolean) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <ChromaticAberration ref={ref} radialModulation={radialModulation} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(false))
+    await flush()
+    const first = ref.current
+    expect(first!.radialModulation).toBe(false)
+
+    await React.act(async () => render(true))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.radialModulation).toBe(true)
+
+    await React.act(async () => root.render(null))
+  })
 })

package/src/tests/ColorDepth.test.tsx

@@ -0,0 +1,71 @@
+import { ColorDepthEffect, EffectComposer as EffectComposerImpl } from 'postprocessing'
+import * as React from 'react'
+import { describe, expect, it } from 'vitest'
+import { ColorDepth } from '../effects/ColorDepth'
+import { EffectComposer } from '../EffectComposer'
+import { flush, root } from './test-utils'
+
+describe('ColorDepth', () => {
+  it('applies bits live via the differently-named bitDepth setter, without reconstructing the effect', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<ColorDepthEffect>()
+
+    const render = (bits: number) =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <ColorDepth ref={ref} bits={bits} />
+        </EffectComposer>
+      )
+
+    await React.act(async () => render(4))
+    await flush()
+    const first = ref.current
+    expect(first!.bitDepth).toBe(4)
+
+    await React.act(async () => render(8))
+    await flush()
+
+    expect(ref.current).toBe(first)
+    expect(ref.current!.bitDepth).toBe(8)
+
+    await React.act(async () => root.render(null))
+  })
+
+  it('resets bitDepth to its constructor default when bits is removed', async () => {
+    const composerRef = React.createRef<EffectComposerImpl>()
+    const ref = React.createRef<ColorDepthEffect>()
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <ColorDepth ref={ref} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+    const defaultBitDepth = ref.current!.bitDepth
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <ColorDepth ref={ref} bits={4} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+    expect(ref.current!.bitDepth).toBe(4)
+
+    await React.act(async () =>
+      root.render(
+        <EffectComposer ref={composerRef}>
+          <ColorDepth ref={ref} />
+        </EffectComposer>
+      )
+    )
+    await flush()
+
+    expect(ref.current!.bitDepth).toBe(defaultBitDepth)
+
+    await React.act(async () => root.render(null))
+  })
+})