add-postprocessing

为 R3F 场景添加后期处理

后期处理能让平淡的渲染呈现出高级质感，但每个效果通道都会占用帧时间。请有针对性地添加，并控制性能预算。

步骤 1 — 安装

npm i @react-three/postprocessing postprocessing

步骤 2 — 添加 EffectComposer

在 <Canvas> 内（场景内容之后）添加：

import {
  EffectComposer, Bloom, DepthOfField, Vignette,
  Noise, ChromaticAberration, ToneMapping, SMAA,
} from '@react-three/postprocessing'
import { BlendFunction, ToneMappingMode } from 'postprocessing'

function Effects() {
  return (
    <EffectComposer multisampling={0} disableNormalPass>
      <Bloom
        intensity={0.6}
        luminanceThreshold={0.85}
        luminanceSmoothing={0.2}
        mipmapBlur
      />
      <DepthOfField focusDistance={0.01} focalLength={0.08} bokehScale={3} />
      <ChromaticAberration offset={[0.0008, 0.0008]} />
      <Noise opacity={0.04} blendFunction={BlendFunction.OVERLAY} />
      <Vignette eskil={false} offset={0.2} darkness={0.9} />
      <ToneMapping mode={ToneMappingMode.ACES_FILMIC} />
      <SMAA />
    </EffectComposer>
  )
}

步骤 3 — 调整效果

• Bloom：提高 luminanceThreshold，让只有明亮区域发光；mipmapBlur 能提供柔和且开销较低的辉光。使用自发光材质（或大于 1 的值）让物体产生泛光。
• DOF：focusDistance 是归一化值（0–1）；可对其添加动画来实现移焦效果。开销较大，在移动设备上应关闭。
• 色调映射：电影感色彩优先使用 ACES_FILMIC；统一设置 gl={{ toneMapping }}。
• 颗粒/色差：保持轻微，过度使用会显得廉价。
• 调整时通过 leva 暴露参数，之后再硬编码。

步骤 4 — 性能预算

• 每个效果通道都会产生全屏填充开销。在中低端设备上，有条件地减少渲染的效果（例如关闭 DOF + CA，保留 Bloom + ToneMapping）。
• 除非某个效果需要法线（SSAO/SSR 需要），否则使用 disableNormalPass。
• 可考虑使用半分辨率效果和 <PerformanceMonitor> 动态调整。
• 添加效果栈后重新检查 FPS（如果低于目标值，交由 webgl-perf-auditor 处理）。

步骤 5 — 自定义效果

若要实现独特风格，可编写自定义效果（用 postprocessing 中的 Effect/wrapEffect 封装片段着色器）——将 GLSL 部分交给 shader-artist Agent 处理。

步骤 6 — 验证

• 确认开启效果后，场景仍能以目标 FPS 渲染。
• 如有可能，展示前后对比；报告启用的效果通道及其开销。