用途
该资料提供 Three.js 后处理（Post-Processing）的实践指南，用于在 Three.js 渲染流程中添加全屏视觉效果。通过 EffectComposer 可以将场景渲染、泛光、景深、颜色校正、抗锯齿等效果串联为多个通道（pass），最终合成输出。适合需要为 3D 场景添加视觉特效、颜色分级、模糊、发光或创建自定义后处理效果的场景。
主要能力
资料以代码示例形式展示以下能力：
- EffectComposer 设置：初始化 composer，添加 RenderPass 渲染场景，添加后续效果通道，处理窗口缩放。
- 常用效果：
- 泛光（UnrealBloomPass）：可调强度、半径、阈值，支持运行时调整；介绍选择性泛光（通过图层标记只对特定物体应用）。
- 抗锯齿：FXAA（ShaderPass + FXAAShader，需更新分辨率 uniform）与 SMAA（SMAAPass，基于像素比设置尺寸）。
- 环境光遮蔽（SSAO）：SSAOPass，可调 kernelRadius、minDistance、maxDistance，并支持输出模式（Default、SSAO、Blur、Depth、Normal）。
- 景深（BokehPass）：可设焦距、光圈、最大模糊，支持动态更新焦距。
- 胶片颗粒（FilmPass）：可调噪声强度、扫描线强度、扫描线数量、灰度。
- 暗角（VignetteShader）：可调偏移与暗度。
- 颜色校正（ColorCorrectionShader）：可调幂次与乘数。
- Gamma 校正（GammaCorrectionShader）。
- 像素化（RenderPixelatedPass）：可设像素尺寸。
- 故障效果（GlitchPass）：可设 goWild 持续故障。
- 半调（HalftonePass）：可设形状、半径、旋转角度、散色、混合模式、灰度等。
- 轮廓描边（OutlinePass）：可设边缘强度、发光、厚度、脉冲周期、可见/隐藏边缘颜色，并指定 selectedObjects。
- 自定义 ShaderPass：展示如何编写自定义着色器（顶点着色器与片段着色器），包含必需 uniform tDiffuse，并示例波浪扭曲、反色、色差效果。
- 多效果组合：演示按顺序添加 RenderPass、泛光、暗角、Gamma 校正、FXAA（通常放在最后），并说明抗锯齿应在输出前最后处理。
- 渲染到纹理：使用 WebGLRenderTarget 将场景渲染到纹理，再作为其他材质贴图使用。
- 多通道渲染：使用多个 composer 分别渲染背景与前景，通过 autoClear 和 clearDepth 控制合成。
- WebGPU 后处理：基于节点系统（Nodes.js）的 pass、bloom、dof 示例（Three.js r150+）。
- 性能建议：限制 pass 数量、降低分辨率、禁用未使用效果、使用 FXAA 替代 MSAA、使用 DevTools 检查 GPU 使用；示例展示通过 enabled 属性关闭 pass、降低泛光分辨率、根据移动端判断是否添加昂贵效果。
- 窗口缩放处理：统一更新相机、渲染器、composer 尺寸，并针对 FXAA 分辨率 uniform 与泛光分辨率进行更新。
使用方式
资料中的代码均基于 Three.js 的 addons 模块导入，例如：
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
基本流程为：创建 EffectComposer 实例，添加 RenderPass，按需添加效果 pass，在动画循环中使用 composer.render() 替代 renderer.render()。对于自定义效果，通过 ShaderPass 传入包含 uniforms、vertexShader、fragmentShader 的对象。
适用场景
- 为 Three.js 场景添加发光、模糊、景深等视觉特效。
- 进行颜色分级、Gamma 校正、暗角等画面风格化处理。
- 实现抗锯齿、环境光遮蔽以提升画面质量。
- 创建故障、像素化、半调等风格化效果。
- 通过自定义 ShaderPass 实现特定后处理需求。
- 在 WebGPU 渲染器下使用节点系统进行后处理。
限制
资料未说明该后处理方案的浏览器兼容性、性能开销的具体数值、是否支持所有 Three.js 版本（仅提及 WebGPU 后处理需要 r150+）、以及各效果的具体参数范围与默认值。部分效果（如 SSAO、Bokeh）的启用条件与硬件要求暂未提供。资料中的代码示例需结合具体项目环境调整，未提供完整项目配置或构建步骤。