threejs-postprocessing

Three.js 后期处理

当需要有意构建屏幕空间处理管线时，使用此技能。场景/相机设置请交由 threejs-fundamentals 处理，网格/材质着色器工作请交由 threejs-shaders 处理，纹理/渲染 目标语义请交由 threejs-textures 处理。

何时使用此技能

• 添加泛光、抗锯齿、环境光遮蔽、景深、轮廓或色彩分级
• 配置 EffectComposer，或解决通道顺序、重复渲染问题
• 编写自定义全屏 ShaderPass，或管理离屏渲染目标
• 修复模糊、分辨率不正确、效果缺失、通道开销过大或清理时的资源泄漏

说明

第 1 步：先建立基准渲染器

1. 添加通道前，先确保未处理的 renderer.render(scene, camera) 视图正确。
2. 判断效果属于材质/场景层面，还是确实属于屏幕空间。不要用全屏通道来弥补错误的灯光、纹理色彩空间或材质。
3. 由画布/渲染循环的所有者管理合成器；每帧应使用渲染器渲染或合成器渲染，两者不可同时用于同一最终输出。

第 2 步：构建最简有序合成器

import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new UnrealBloomPass(new THREE.Vector2(width, height), 0.6, 0.4, 0.85));

function render() {
  composer.render();
  requestAnimationFrame(render);
}
render();

通道顺序会影响行为。请说明每个通道为何排在下一通道之前或之后，尤其是在混合使用依赖深度、选取、抗锯齿或色彩校正通道时。

第 3 步：谨慎处理分辨率和色彩

function resize(width, height) {
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height, false);
  composer.setSize(width, height);
}

使合成器分辨率与渲染器配置的绘图缓冲区策略一致。采样像素偏移或深度的效果必须接收当前尺寸的 uniform。使用旧式伽马/色彩校正通道前，请检查渲染器当前的色彩输出配置。

第 4 步：将每个通道视为有预算的功能

需求	首选方案
普通场景输出	仅使用 RenderPass
明亮的自发光效果	在目标分辨率下测量后再使用 Bloom
平滑锯齿	优先使用可用的内置 MSAA，然后再使用合适的 AA 通道
对象轮廓	轮廓通道或针对性自定义通道
自定义屏幕空间运算	使用带有明确 uniform 的 ShaderPass
强景深/SSAO/故障效果	作为可选质量档位，并提供回退/关闭选项

只有在验证视觉要求后，才使用较低分辨率缓冲区、质量档位或选择性效果。不要堆叠通道来代替艺术指导。

第 5 步：验证效果并清理资源

• 测试调整大小、像素比、相机动态移动，以及路由变化/卸载。
• 在目标硬件上测试低、高质量设置，并记录帧时间影响。
• 单独切换每种效果，检查通道顺序。
• 根据所安装的 API 和功能生命周期，释放由合成器管理的渲染目标/通道；场景销毁后，不要遗留离屏 GPU 缓冲区。

示例

选择性泛光

明确处理选取/图层渲染，并确认普通场景不会变暗或重复绘制对象。选择性泛光是多次渲染的管线，并非只设置泛光阈值标志即可。

自定义暗角

只有在确认 CSS/画布叠加层无法满足要求后，才使用 ShaderPass。明确声明时间、分辨率和纹理 uniform，并由单一所有者更新它们。

最佳实践

1. 从普通渲染路径开始，每次只添加一个通道。
2. 每次调整大小时，保持合成器与渲染器的尺寸同步。
3. 将通道顺序和色彩管线视为功能要求的一部分。
4. 根据设备情况，通过质量控制限制高开销效果。
5. 发布视觉效果栈前，测量 GPU 帧时间。

参考资料

• Three.js 后期处理源代码说明
• Three.js 手册：后期处理
• EffectComposer 文档