@react-three/postprocessing 3.0.3 → 3.0.5

package/src/EffectComposer.tsx

@@ -1,200 +1,278 @@
-import type { TextureDataType, Group, Camera, Scene } from 'three'
-import { HalfFloatType, NoToneMapping } from 'three'
-import {
-  type JSX,
-  memo,
-  forwardRef,
-  useMemo,
-  useEffect,
-  useLayoutEffect,
-  createContext,
-  useRef,
-  useImperativeHandle,
-} from 'react'
-import { useThree, useFrame, type Instance } from '@react-three/fiber'
-import {
-  EffectComposer as EffectComposerImpl,
-  RenderPass,
-  EffectPass,
-  NormalPass,
-  DepthDownsamplingPass,
-  Effect,
-  Pass,
-  EffectAttribute,
-} from 'postprocessing'
-
-export const EffectComposerContext = /* @__PURE__ */ createContext<{
-  composer: EffectComposerImpl
-  normalPass: NormalPass | null
-  downSamplingPass: DepthDownsamplingPass | null
-  camera: Camera
-  scene: Scene
-  resolutionScale?: number
-}>(null!)
-
-export type EffectComposerProps = {
-  enabled?: boolean
-  children: JSX.Element | JSX.Element[]
-  depthBuffer?: boolean
-  /** Only used for SSGI currently, leave it disabled for everything else unless it's needed */
-  enableNormalPass?: boolean
-  stencilBuffer?: boolean
-  autoClear?: boolean
-  resolutionScale?: number
-  multisampling?: number
-  frameBufferType?: TextureDataType
-  renderPriority?: number
-  camera?: Camera
-  scene?: Scene
-}
-
-const isConvolution = (effect: Effect): boolean =>
-  (effect.getAttributes() & EffectAttribute.CONVOLUTION) === EffectAttribute.CONVOLUTION
-
-export const EffectComposer = /* @__PURE__ */ memo(
-  /* @__PURE__ */ forwardRef<EffectComposerImpl, EffectComposerProps>(
-    (
-      {
-        children,
-        camera: _camera,
-        scene: _scene,
-        resolutionScale,
-        enabled = true,
-        renderPriority = 1,
-        autoClear = true,
-        depthBuffer,
-        enableNormalPass,
-        stencilBuffer,
-        multisampling = 8,
-        frameBufferType = HalfFloatType,
-      },
-      ref
-    ) => {
-      const { gl, scene: defaultScene, camera: defaultCamera, size } = useThree()
-      const scene = _scene || defaultScene
-      const camera = _camera || defaultCamera
-
-      const [composer, normalPass, downSamplingPass] = useMemo(() => {
-        // Initialize composer
-        const effectComposer = new EffectComposerImpl(gl, {
-          depthBuffer,
-          stencilBuffer,
-          multisampling,
-          frameBufferType,
-        })
-
-        // Add render pass
-        effectComposer.addPass(new RenderPass(scene, camera))
-
-        // Create normal pass
-        let downSamplingPass = null
-        let normalPass = null
-        if (enableNormalPass) {
-          normalPass = new NormalPass(scene, camera)
-          normalPass.enabled = false
-          effectComposer.addPass(normalPass)
-          if (resolutionScale !== undefined) {
-            downSamplingPass = new DepthDownsamplingPass({ normalBuffer: normalPass.texture, resolutionScale })
-            downSamplingPass.enabled = false
-            effectComposer.addPass(downSamplingPass)
-          }
-        }
-
-        return [effectComposer, normalPass, downSamplingPass]
-      }, [
-        camera,
-        gl,
-        depthBuffer,
-        stencilBuffer,
-        multisampling,
-        frameBufferType,
-        scene,
-        enableNormalPass,
-        resolutionScale,
-      ])
-
-      useEffect(() => composer?.setSize(size.width, size.height), [composer, size])
-      useFrame(
-        (_, delta) => {
-          if (enabled) {
-            const currentAutoClear = gl.autoClear
-            gl.autoClear = autoClear
-            if (stencilBuffer && !autoClear) gl.clearStencil()
-            composer.render(delta)
-            gl.autoClear = currentAutoClear
-          }
-        },
-        enabled ? renderPriority : 0
-      )
-
-      const group = useRef<Group>(null!)
-      useLayoutEffect(() => {
-        const passes: Pass[] = []
-
-        // TODO: rewrite all of this with R3F v9
-        const groupInstance = (group.current as Group & { __r3f: Instance<Group> }).__r3f
-
-        if (groupInstance && composer) {
-          const children = groupInstance.children
-
-          for (let i = 0; i < children.length; i++) {
-            const child = children[i].object
-
-            if (child instanceof Effect) {
-              const effects: Effect[] = [child]
-
-              if (!isConvolution(child)) {
-                let next: unknown = null
-                while ((next = children[i + 1]?.object) instanceof Effect) {
-                  if (isConvolution(next)) break
-                  effects.push(next)
-                  i++
-                }
-              }
-
-              const pass = new EffectPass(camera, ...effects)
-              passes.push(pass)
-            } else if (child instanceof Pass) {
-              passes.push(child)
-            }
-          }
-
-          for (const pass of passes) composer?.addPass(pass)
-
-          if (normalPass) normalPass.enabled = true
-          if (downSamplingPass) downSamplingPass.enabled = true
-        }
-
-        return () => {
-          for (const pass of passes) composer?.removePass(pass)
-          if (normalPass) normalPass.enabled = false
-          if (downSamplingPass) downSamplingPass.enabled = false
-        }
-      }, [composer, children, camera, normalPass, downSamplingPass])
-
-      // Disable tone mapping because threejs disallows tonemapping on render targets
-      useEffect(() => {
-        const currentTonemapping = gl.toneMapping
-        gl.toneMapping = NoToneMapping
-        return () => {
-          gl.toneMapping = currentTonemapping
-        }
-      }, [gl])
-
-      // Memoize state, otherwise it would trigger all consumers on every render
-      const state = useMemo(
-        () => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }),
-        [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]
-      )
-
-      // Expose the composer
-      useImperativeHandle(ref, () => composer, [composer])
-
-      return (
-        <EffectComposerContext.Provider value={state}>
-          <group ref={group}>{children}</group>
-        </EffectComposerContext.Provider>
-      )
-    }
-  )
-)
+import { useFrame, useThree, type Instance } from '@react-three/fiber'
+import {
+  DepthDownsamplingPass,
+  Effect,
+  EffectAttribute,
+  EffectComposer as EffectComposerImpl,
+  EffectPass,
+  NormalPass,
+  Pass,
+  RenderPass,
+} from 'postprocessing'
+import {
+  createContext,
+  memo,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+  type Ref,
+} from 'react'
+import type { Camera, Group, Scene, TextureDataType, WebGLRenderer } from 'three'
+import { HalfFloatType, NoToneMapping } from 'three'
+
+export const EffectComposerContext = /* @__PURE__ */ createContext<{
+  composer: EffectComposerImpl
+  normalPass: NormalPass | null
+  downSamplingPass: DepthDownsamplingPass | null
+  camera: Camera
+  scene: Scene
+  resolutionScale?: number
+}>(null!)
+
+export type EffectComposerProps = {
+  enabled?: boolean
+  children: ReactNode
+  depthBuffer?: boolean
+  /** Only used for SSGI currently, leave it disabled for everything else unless it's needed */
+  enableNormalPass?: boolean
+  stencilBuffer?: boolean
+  autoClear?: boolean
+  resolutionScale?: number
+  multisampling?: number
+  frameBufferType?: TextureDataType
+  renderPriority?: number
+  camera?: Camera
+  scene?: Scene
+  ref?: Ref<EffectComposerImpl>
+}
+
+type ComposerState = {
+  composer: EffectComposerImpl
+  normalPass: NormalPass | null
+  downSamplingPass: DepthDownsamplingPass | null
+}
+
+const isConvolution = (effect: Effect): boolean =>
+  (effect.getAttributes() & EffectAttribute.CONVOLUTION) === EffectAttribute.CONVOLUTION
+
+/**
+ * autoClear/toneMapping get force-set and never restored by whoever sets
+ * them. Ref-counted per (renderer, property) since composers can share a
+ * renderer; skips restoring if the value already changed since acquire.
+ */
+function createRendererPropertyGuard<K extends 'autoClear' | 'toneMapping'>(property: K) {
+  const refs = new WeakMap<
+    WebGLRenderer,
+    { count: number; original: WebGLRenderer[K]; forcedValue: WebGLRenderer[K] }
+  >()
+
+  return {
+    acquire(gl: WebGLRenderer, forcedValue: WebGLRenderer[K]): void {
+      const existing = refs.get(gl)
+      if (existing) {
+        existing.count++
+        existing.forcedValue = forcedValue
+      } else {
+        refs.set(gl, { count: 1, original: gl[property], forcedValue })
+      }
+    },
+    release(gl: WebGLRenderer): void {
+      const entry = refs.get(gl)
+      if (!entry) return
+
+      if (--entry.count <= 0) {
+        if (gl[property] === entry.forcedValue) {
+          gl[property] = entry.original
+        }
+        refs.delete(gl)
+      }
+    },
+  }
+}
+
+const autoClearGuard = /* @__PURE__ */ createRendererPropertyGuard('autoClear')
+const toneMappingGuard = /* @__PURE__ */ createRendererPropertyGuard('toneMapping')
+
+/**
+ * Groups a flat, ordered list of Effect/Pass instances into actual composer
+ * passes, merging consecutive non-convolution Effects into a single
+ * EffectPass.
+ */
+function buildPasses(nodes: Array<Effect | Pass>, camera: Camera): Pass[] {
+  const passes: Pass[] = []
+
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+
+    if (node instanceof Effect) {
+      const effects: Effect[] = [node]
+
+      if (!isConvolution(node)) {
+        let next: Effect | Pass | undefined
+        while ((next = nodes[i + 1]) instanceof Effect) {
+          if (isConvolution(next)) break
+          effects.push(next)
+          i++
+        }
+      }
+
+      passes.push(new EffectPass(camera, ...effects))
+    } else if (node instanceof Pass) {
+      passes.push(node)
+    }
+  }
+
+  return passes
+}
+
+export const EffectComposer = /* @__PURE__ */ memo(function EffectComposer({
+  children,
+  camera: _camera,
+  scene: _scene,
+  resolutionScale,
+  enabled = true,
+  renderPriority = 1,
+  autoClear = true,
+  depthBuffer,
+  enableNormalPass,
+  stencilBuffer,
+  multisampling = 8,
+  frameBufferType = HalfFloatType,
+  ref,
+}: EffectComposerProps) {
+  const { gl, scene: defaultScene, camera: defaultCamera, size } = useThree()
+  const scene = _scene || defaultScene
+  const camera = _camera || defaultCamera
+
+  // EffectComposer owns WebGL resources, so it must be created and
+  // disposed inside an effect lifecycle. useMemo is not suitable here
+  // because React may discard memoized values without running cleanup.
+  const [composerState, setComposerState] = useState<ComposerState | null>(null)
+
+  useEffect(() => {
+    autoClearGuard.acquire(gl, false)
+
+    const effectComposer = new EffectComposerImpl(gl, { depthBuffer, stencilBuffer, multisampling, frameBufferType })
+    effectComposer.addPass(new RenderPass(scene, camera))
+
+    let normalPass: NormalPass | null = null
+    let downSamplingPass: DepthDownsamplingPass | null = null
+
+    if (enableNormalPass) {
+      normalPass = new NormalPass(scene, camera)
+      normalPass.enabled = false
+      effectComposer.addPass(normalPass)
+
+      if (resolutionScale !== undefined) {
+        downSamplingPass = new DepthDownsamplingPass({ normalBuffer: normalPass.texture, resolutionScale })
+        downSamplingPass.enabled = false
+        effectComposer.addPass(downSamplingPass)
+      }
+    }
+
+    effectComposer.setSize(size.width, size.height)
+
+    setComposerState({ composer: effectComposer, normalPass, downSamplingPass })
+
+    return () => {
+      effectComposer.dispose()
+      autoClearGuard.release(gl)
+    }
+    // `size` intentionally excluded: it's applied via the composer.setSize
+    // effect below, and shouldn't tear down/recreate the whole composer.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [camera, gl, depthBuffer, stencilBuffer, multisampling, frameBufferType, scene, enableNormalPass, resolutionScale])
+
+  useEffect(() => {
+    composerState?.composer.setSize(size.width, size.height)
+  }, [composerState, size])
+
+  useFrame(
+    (_, delta) => {
+      if (!enabled || !composerState) return
+      const { composer } = composerState
+      const currentAutoClear = gl.autoClear
+      gl.autoClear = autoClear
+      if (stencilBuffer && !autoClear) gl.clearStencil()
+      composer.render(delta)
+      gl.autoClear = currentAutoClear
+    },
+    enabled ? renderPriority : 0
+  )
+
+  // Passes are derived from the actual r3f scene graph rather than tracked
+  // incrementally, so the list always matches current JSX order — including
+  // through wrapper components — even after a reorder or a remount.
+  const group = useRef<Group>(null!)
+
+  useLayoutEffect(() => {
+    if (!composerState) return
+    const { composer, normalPass, downSamplingPass } = composerState
+
+    const passes: Pass[] = []
+    const groupInstance = (group.current as Group & { __r3f: Instance<Group> }).__r3f
+
+    if (groupInstance) {
+      const nodes = groupInstance.children.map((child) => child.object).filter(
+        (object): object is Effect | Pass => object instanceof Effect || object instanceof Pass
+      )
+
+      passes.push(...buildPasses(nodes, camera))
+    }
+
+    for (const pass of passes) composer.addPass(pass)
+
+    if (passes.length) {
+      if (normalPass) normalPass.enabled = true
+      if (downSamplingPass) downSamplingPass.enabled = true
+    }
+
+    return () => {
+      for (const pass of passes) composer.removePass(pass)
+      if (normalPass) normalPass.enabled = false
+      if (downSamplingPass) downSamplingPass.enabled = false
+    }
+  }, [composerState, children, camera])
+
+  // Disable tone mapping because threejs disallows tonemapping on render targets
+  useEffect(() => {
+    toneMappingGuard.acquire(gl, NoToneMapping)
+    gl.toneMapping = NoToneMapping
+    return () => {
+      toneMappingGuard.release(gl)
+    }
+  }, [gl])
+
+  // Memoize state, otherwise it would trigger all consumers on every render
+  const state = useMemo(
+    () =>
+      composerState
+        ? {
+            composer: composerState.composer,
+            normalPass: composerState.normalPass,
+            downSamplingPass: composerState.downSamplingPass,
+            resolutionScale,
+            camera,
+            scene,
+          }
+        : null,
+    [composerState, resolutionScale, camera, scene]
+  )
+
+  // Expose the composer
+  useImperativeHandle(ref, () => composerState?.composer as EffectComposerImpl, [composerState])
+
+  // Wait until the composer exists before mounting children so they always
+  // see a valid composer instance via context.
+  if (!state) return null
+
+  return (
+    <EffectComposerContext.Provider value={state}>
+      <group ref={group}>{children}</group>
+    </EffectComposerContext.Provider>
+  )
+})

package/src/Selection.tsx

@@ -1,46 +1,86 @@
-import * as THREE from 'three'
-import React, { createContext, useState, useContext, useEffect, useRef, useMemo } from 'react'
-import { type ThreeElements } from '@react-three/fiber'
-
-export type Api = {
-  selected: THREE.Object3D[]
-  select: React.Dispatch<React.SetStateAction<THREE.Object3D[]>>
-  enabled: boolean
-}
-export type SelectApi = Omit<ThreeElements['group'], 'ref'> & {
-  enabled?: boolean
-}
-
-export const selectionContext = /* @__PURE__ */ createContext<Api | null>(null)
-
-export function Selection({ children, enabled = true }: { enabled?: boolean; children: React.ReactNode }) {
-  const [selected, select] = useState<THREE.Object3D[]>([])
-  const value = useMemo(() => ({ selected, select, enabled }), [selected, select, enabled])
-  return <selectionContext.Provider value={value}>{children}</selectionContext.Provider>
-}
-
-export function Select({ enabled = false, children, ...props }: SelectApi) {
-  const group = useRef<THREE.Group>(null!)
-  const api = useContext(selectionContext)
-  useEffect(() => {
-    if (api && enabled) {
-      let changed = false
-      const current: THREE.Object3D[] = []
-      group.current.traverse((o) => {
-        o.type === 'Mesh' && current.push(o)
-        if (api.selected.indexOf(o) === -1) changed = true
-      })
-      if (changed) {
-        api.select((state) => [...state, ...current])
-        return () => {
-          api.select((state) => state.filter((selected) => !current.includes(selected)))
-        }
-      }
-    }
-  }, [enabled, children, api])
-  return (
-    <group ref={group} {...props}>
-      {children}
-    </group>
-  )
-}
+import { type ThreeElements } from '@react-three/fiber'
+import {
+  createContext,
+  use,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from 'react'
+import { type Group, type Line, type Mesh, type Object3D, type Points } from 'three'
+
+export type Api = {
+  selected: Object3D[]
+  select: Dispatch<SetStateAction<Object3D[]>>
+  enabled: boolean
+}
+export type SelectApi = Omit<ThreeElements['group'], 'ref'> & {
+  enabled?: boolean
+}
+
+export const selectionContext = /* @__PURE__ */ createContext<Api | null>(null)
+
+export function Selection({ children, enabled = true }: { enabled?: boolean; children: ReactNode }) {
+  const [selected, select] = useState<Object3D[]>([])
+  const value = useMemo(() => ({ selected, select, enabled }), [selected, select, enabled])
+  return <selectionContext.Provider value={value}>{children}</selectionContext.Provider>
+}
+
+// Covers Mesh/Line/Points subclasses too, unlike `.type`.
+function isSelectable(object: Object3D): boolean {
+  const o = object as Partial<Mesh & Line & Points>
+  return !!(o.isMesh || o.isLine || o.isPoints)
+}
+
+export function Select({ enabled = false, children, ...props }: SelectApi) {
+  const group = useRef<Group>(null!)
+  // Stable, unlike the context value - avoids retriggering off our own write.
+  const select = use(selectionContext)?.select
+  const claimed = useRef<Object3D[]>([])
+
+  useEffect(() => {
+    if (!select) return
+
+    const current: Object3D[] = []
+    if (enabled) {
+      group.current.traverse((o) => {
+        if (isSelectable(o)) current.push(o)
+      })
+    }
+
+    const previouslyClaimed = claimed.current
+    claimed.current = current
+
+    select((prev) => {
+      const prevSet = new Set(prev)
+      const currentSet = new Set(current)
+      const toAdd = current.filter((o) => !prevSet.has(o))
+      const toRemove = previouslyClaimed.filter((o) => !currentSet.has(o) && prevSet.has(o))
+      if (!toAdd.length && !toRemove.length) return prev
+      const toRemoveSet = toRemove.length ? new Set(toRemove) : null
+      const kept = toRemoveSet ? prev.filter((o) => !toRemoveSet.has(o)) : prev
+      return toAdd.length ? [...kept, ...toAdd] : kept
+    })
+  }, [enabled, children, select])
+
+  // Separate from the effect above so unmount cleanup doesn't fire on every enabled/children change.
+  useEffect(() => {
+    return () => {
+      if (!select || !claimed.current.length) return
+      const stillClaimed = new Set(claimed.current)
+      select((prev) => {
+        const next = prev.filter((o) => !stillClaimed.has(o))
+        return next.length !== prev.length ? next : prev
+      })
+    }
+  }, [select])
+
+  return (
+    <group ref={group} {...props}>
+      {children}
+    </group>
+  )
+}