fix(Outline,SelectiveBloom): guard against unattached refs, make all effect options reactive

Copilot review: resolveRef can return null before a ref attaches, which
crashed effect.selection.set()/addLight. Filtered nulls, and fixed
ObjectRef's own type to admit null so tsc catches this going forward.
Also enumerated the remaining BloomEffectOptions/OutlineEffect options
explicitly instead of an unstable ...props spread, so they update
reactively instead of only applying on first mount.

Author: kvvasuu

src/effects/Outline.tsx

@@ -4,7 +4,7 @@ import { Object3D } from 'three'
 import { EffectComposerContext } from '../EffectComposer'
 import { EMPTY_ARRAY, useDispose, useSelectionSync } from '../util'
 
-type ObjectRef = RefObject<Object3D>
+type ObjectRef = RefObject<Object3D | null>
 
 export type OutlineProps = ConstructorParameters<typeof OutlineEffect>[2] &
   Partial<{
@@ -18,17 +18,21 @@ export function Outline({
   selectionLayer = 10,
   blendFunction,
   patternTexture,
+  patternScale,
   edgeStrength,
   pulseSpeed,
   visibleEdgeColor,
   hiddenEdgeColor,
+  multisampling,
+  resolutionScale,
+  resolutionX,
+  resolutionY,
   width,
   height,
   kernelSize,
   blur,
   xRay,
   ref,
-  ...props
 }: OutlineProps) {
   const { scene, camera } = use(EffectComposerContext)
 
@@ -37,33 +41,40 @@ export function Outline({
       new OutlineEffect(scene, camera, {
         blendFunction,
         patternTexture,
+        patternScale,
         edgeStrength,
         pulseSpeed,
         visibleEdgeColor,
         hiddenEdgeColor,
+        multisampling,
+        resolutionScale,
+        resolutionX,
+        resolutionY,
         width,
         height,
         kernelSize,
         blur,
         xRay,
-        ...props,
       }),
-    // NOTE: `props` is an unstable reference, so we can't memoize it
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
       blendFunction,
-      blur,
-      camera,
-      edgeStrength,
-      height,
-      hiddenEdgeColor,
-      kernelSize,
       patternTexture,
+      patternScale,
+      edgeStrength,
       pulseSpeed,
-      scene,
       visibleEdgeColor,
+      hiddenEdgeColor,
+      multisampling,
+      resolutionScale,
+      resolutionX,
+      resolutionY,
       width,
+      height,
+      kernelSize,
+      blur,
       xRay,
+      camera,
+      scene,
     ]
   )
 

src/effects/SelectiveBloom.tsx

@@ -6,7 +6,7 @@ import { Object3D } from 'three'
 import { EffectComposerContext } from '../EffectComposer'
 import { EMPTY_ARRAY, resolveRef, useDispose, useSelectionSync } from '../util'
 
-type ObjectRef = RefObject<Object3D>
+type ObjectRef = RefObject<Object3D | null>
 
 export type SelectiveBloomProps = BloomEffectOptions &
   Partial<{
@@ -29,13 +29,17 @@ export function SelectiveBloom({
   ignoreBackground = false,
   luminanceThreshold,
   luminanceSmoothing,
+  mipmapBlur,
   intensity,
+  radius,
+  levels,
+  kernelSize,
+  resolutionScale,
   width,
   height,
-  kernelSize,
-  mipmapBlur,
+  resolutionX,
+  resolutionY,
   ref,
-  ...props
 }: SelectiveBloomProps) {
   const { scene, camera } = use(EffectComposerContext)
 
@@ -46,28 +50,35 @@ export function SelectiveBloom({
       blendFunction: BlendFunction.ADD,
       luminanceThreshold,
       luminanceSmoothing,
+      mipmapBlur,
       intensity,
+      radius,
+      levels,
+      kernelSize,
+      resolutionScale,
       width,
       height,
-      kernelSize,
-      mipmapBlur,
-      ...props,
+      resolutionX,
+      resolutionY,
     })
     instance.inverted = inverted
     instance.ignoreBackground = ignoreBackground
     return instance
-    // NOTE: `props` is an unstable reference, so we can't memoize it
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     scene,
     camera,
     luminanceThreshold,
     luminanceSmoothing,
+    mipmapBlur,
     intensity,
+    radius,
+    levels,
+    kernelSize,
+    resolutionScale,
     width,
     height,
-    kernelSize,
-    mipmapBlur,
+    resolutionX,
+    resolutionY,
     inverted,
     ignoreBackground,
   ])
@@ -83,12 +94,17 @@ export function SelectiveBloom({
       return
     }
 
-    lights.forEach((light) => addLight(resolveRef(light), effect))
+    // Refs may not have attached yet - resolve and drop nullish entries
+    // rather than crashing addLight/removeLight on a null object.
+    const resolvedLights = lights.map((light) => resolveRef(light)).filter((light): light is Object3D => light != null)
+    if (resolvedLights.length === 0) return
+
+    resolvedLights.forEach((light) => addLight(light, effect))
 
     invalidate()
 
     return () => {
-      lights.forEach((light) => removeLight(resolveRef(light), effect))
+      resolvedLights.forEach((light) => removeLight(light, effect))
 
       invalidate()
     }

src/tests/Outline.test.tsx

@@ -1,6 +1,6 @@
 import { EffectComposer as EffectComposerImpl, OutlineEffect, Selection as PPSelection } from 'postprocessing'
 import * as React from 'react'
-import { Mesh } from 'three'
+import { Mesh, Object3D } from 'three'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { EffectComposer } from '../EffectComposer'
 import { Outline } from '../effects/Outline'
@@ -71,4 +71,19 @@ describe('Outline', () => {
 
     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()
+  })
 })

src/tests/SelectiveBloom.test.tsx

@@ -1,6 +1,6 @@
 import { EffectComposer as EffectComposerImpl, SelectiveBloomEffect } from 'postprocessing'
 import * as React from 'react'
-import { Mesh, PointLight } from 'three'
+import { Mesh, Object3D, PointLight } from 'three'
 import { afterEach, describe, expect, it } from 'vitest'
 import { EffectComposer } from '../EffectComposer'
 import { SelectiveBloom } from '../effects/SelectiveBloom'
@@ -100,4 +100,19 @@ describe('SelectiveBloom', () => {
     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()
+  })
 })

src/util.tsx

@@ -21,7 +21,7 @@ export const resolveRef = <T,>(ref: T | RefObject<T>) =>
  */
 export function useSelectionSync(
   effect: { selection: PPSelection },
-  selection: Object3D | Object3D[] | RefObject<Object3D> | RefObject<Object3D>[],
+  selection: Object3D | Object3D[] | RefObject<Object3D | null> | RefObject<Object3D | null>[],
   selectionLayer: number
 ): void {
   const invalidate = useThree((state) => state.invalidate)
@@ -34,9 +34,9 @@ export function useSelectionSync(
 
   useEffect(() => {
     if (api) return
-    const resolved: Object3D[] = Array.isArray(selection)
-      ? selection.map((o) => resolveRef(o))
-      : [resolveRef(selection)]
+    const resolved = (Array.isArray(selection) ? selection.map((o) => resolveRef(o)) : [resolveRef(selection)]).filter(
+      (o): o is Object3D => o != null
+    )
     if (!resolved.length) return
 
     effect.selection.set(resolved)