用途
本技能面向 Three.js 的后期处理（post-processing），用于在场景渲染完成后叠加屏幕空间视觉效果，例如泛光、景深、模糊、色彩分级、抗锯齿、环境光遮蔽、暗角、胶片颗粒、像素化、故障、半调与描边等。核心机制是 EffectComposer：它把多个渲染通道（pass）串联起来，最终输出到屏幕。
主要能力
- EffectComposer 基础搭建：创建 composer、添加 RenderPass 作为首个通道、按顺序追加效果通道，并处理窗口尺寸变化。
- 泛光（Bloom）：使用 UnrealBloomPass，可调 strength（强度）、radius（扩散半径）、threshold（亮度阈值），并支持运行时修改。
- 选择性泛光：通过 Layers 标记需要发光的对象，配合暗色材质与自定义渲染循环，只对特定物体应用泛光。
- 抗锯齿：FXAA（ShaderPass + FXAAShader，需设置 resolution）与 SMAA（SMAAPass，需传入按像素比计算的宽高）。
- 环境光遮蔽：SSAOPass，可设置 kernelRadius、minDistance、maxDistance，并支持多种输出模式（Default、SSAO、Blur、Depth、Normal）。
- 景深：BokehPass，可配置 focus（对焦距离）、aperture（光圈）、maxblur（最大模糊量），并支持动态更新对焦距离。
- 屏幕效果：FilmPass（胶片颗粒/扫描线）、VignetteShader（暗角）、ColorCorrectionShader（色彩校正）、GammaCorrectionShader（伽马校正）、RenderPixelatedPass（像素化）、GlitchPass（故障）、HalftonePass（半调）、OutlinePass（描边）。
- 自定义 ShaderPass：提供 uniforms（必须包含 tDiffuse 输入纹理）、vertexShader、fragmentShader 的写法，并给出波浪扭曲、反色、色差等示例。
- 多效果组合：示例展示 RenderPass → Bloom → Vignette → GammaCorrection → FXAA 的典型顺序，并说明抗锯齿通常放在输出前最后。
- 渲染到纹理与多通道渲染：使用 WebGLRenderTarget 渲染到纹理；用多个 composer 分别渲染背景与前景并叠加。
- WebGPU 后处理：基于节点系统（pass、bloom、dof 等）与 THREE.PostProcessing 的写法。
- 性能建议：限制通道数量、降低模糊通道分辨率、按需启用/禁用通道、优先使用 FXAA 而非 MSAA、用 DevTools 分析 GPU 占用，并可根据移动端判断是否添加高开销通道。
使用方式
基本流程为：引入 three 与 three/addons/postprocessing 下的模块；创建 EffectComposer(renderer)；添加 RenderPass(scene, camera)；按需添加效果通道；在动画循环中调用 composer.render() 而不是 renderer.render()。窗口尺寸变化时需同步更新 camera.aspect、renderer.setSize、composer.setSize，以及各通道自身的分辨率参数（如 FXAA 的 resolution、Bloom 的 resolution）。
适用场景
适用于需要在 Three.js 网页 3D 场景中增强画面表现力的场合，例如发光物体、电影感景深、画面风格化（像素、半调、故障）、色彩分级、边缘描边高亮，以及自定义屏幕空间着色器效果。
限制
每个通道都会增加一次全屏渲染，通道越多性能开销越大；资料建议限制通道数量、降低模糊通道分辨率，并在移动端等低性能环境谨慎启用高开销效果。抗锯齿通道通常应放在输出前最后。部分效果（如选择性泛光）需要自定义渲染循环与材质切换。WebGPU 后处理依赖 Three.js r150+ 的节点系统。具体版本兼容性、浏览器支持范围与性能数据暂未提供。