在现代Web应用中，后处理（Post-Processing）效果是提升3D场景视觉效果的重要手段。Three.js提供了EffectComposer来实现复杂的后处理效果。本文将详细介绍EffectComposer的基本概念、使用方法以及几个常见的后处理效果的实现。
1. 后处理与EffectComposer概述
后处理是指在渲染场景后对图像进行额外处理，以实现各种视觉效果，如模糊、景深、颜色校正等。Three.js的EffectComposer是一个用于处理后期效果的工具，它可以通过一系列的Pass（处理单元）来实现复杂的后处理效果。
EffectComposer是一个附加组件，必须显式导入。
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
构造函数
EffectComposer(renderer: WebGLRenderer, renderTarget: WebGLRenderTarget)
- renderer: 用于渲染场景的渲染器。
- renderTarget: （可选）EffectComposer内部使用的预配置渲染目标。
EffectComposer的基本工作流程如下：
- 创建一个EffectComposer实例。
- 添加渲染目标和一系列的Pass。
- 在渲染循环中调用composer的render方法。
属性
| 属性名称 | 类型 | 描述 |
|---|---|---|
| .passes | Array | 表示（有序）后处理Pass链的数组 |
| .readBuffer | WebGLRenderTarget | 对内部读取缓冲区的引用 |
| .renderer | WebGLRenderer | 对内部渲染器的引用 |
| .renderToScreen | Boolean | 最终Pass是否渲染到屏幕（默认帧缓冲区） |
| .writeBuffer | WebGLRenderTarget | 对内部写入缓冲区的引用 |
方法
| 方法名称 | 参数 | 描述 |
|---|---|---|
| .addPass(pass: Pass) | pass: 要添加到Pass链中的Pass | 将给定的Pass添加到Pass链中 |
| .dispose() | 无 | 释放该实例分配的与GPU相关的资源 |
| .insertPass(pass: Pass, index: Integer) | pass: 要插入到Pass链中的Pass； index: 定义Pass应插入的位置 | 将给定的Pass插入到给定索引的Pass链中 |
| .isLastEnabledPass(passIndex: Integer) | passIndex: 要检查的Pass索引 | 如果给定索引的Pass是Pass链中的最后一个启用Pass，则返回true |
| .removePass(pass: Pass) | pass: 要从Pass链中移除的Pass | 从Pass链中移除给定的Pass |
| .render(deltaTime: Float) | deltaTime: 增量时间值 | 按顺序执行所有启用的后处理Pass，以生成最终帧 |
| .reset(renderTarget: WebGLRenderTarget) | renderTarget: 可选，预配置渲染目标 | 重置EffectComposer的内部状态 |
| .setPixelRatio(pixelRatio: Float) | pixelRatio: 设备像素比 | 设置设备像素比，通常用于HiDPI设备，以防止输出模糊 |
| .setSize(width: Integer, height: Integer) | width: EffectComposer的宽度； height: EffectComposer的高度 | 根据设备像素比调整内部渲染缓冲区和Pass的大小 |
| .swapBuffers() | 无 | 交换内部读/写缓冲区 |
2. 设置EffectComposer
首先，需要在Three.js场景中设置EffectComposer。以下是一个基本的示例代码：
// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建一个场景
const scene = new THREE.Scene();
// 创建一个相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 创建一个EffectComposer
const composer = new THREE.EffectComposer(renderer);
// 创建一个渲染通道（RenderPass）并添加到composer中
const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);
3. 添加后处理效果
EffectComposer通过不同的Pass来实现各种后处理效果。以下是几个常见的后处理效果及其实现方法：
道具（BloomPass）
道具效果可以为场景中的亮区添加发光效果。可以使用UnrealBloomPass实现：
const bloomPass = new THREE.UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
1.5, 0.4, 0.85
);
composer.addPass(bloomPass);
颜色校正（ColorCorrectionPass）
颜色校正用于调整场景的颜色，可以使用ShaderPass来实现：
const colorCorrectionShader = {
uniforms: {
'tDiffuse': { value: null },
'powRGB': { value: new THREE.Vector3(2, 2, 2) }
},
vertexShader: /* vertex shader code */,
fragmentShader: /* fragment shader code */
};
const colorCorrectionPass = new THREE.ShaderPass(colorCorrectionShader);
composer.addPass(colorCorrectionPass);
景深（DepthOfFieldPass）
景深效果用于模拟相机的焦点，可以使用BokehPass实现：
const bokehPass = new THREE.BokehPass(scene, camera, {
focus: 1.0,
aperture: 0.025,
maxblur: 1.0,
width: window.innerWidth,
height: window.innerHeight
});
composer.addPass(bokehPass);
4. 在渲染循环中使用EffectComposer
在渲染循环中，使用composer的render方法来渲染场景并应用后处理效果：
function animate() {
requestAnimationFrame(animate);
// 通过composer渲染场景
composer.render();
}
animate();
5. 官方示例
| 示例名称 | 描述 | 示例地址 |
|---|---|---|
| postprocessing | 后处理基础效果 | three.js examples (threejs.org) |
| postprocessing advanced | 高级后处理效果 | three.js examples (threejs.org) |
| postprocessing backgrounds | 背景后处理效果 | three.js examples (threejs.org) |
| postprocessing transition | 过渡效果 | three.js examples (threejs.org) |
| postprocessing depth-of-field | 景深效果 | three.js examples (threejs.org) |
| postprocessing depth-of-field 2 | 第二种景深效果 | three.js examples (threejs.org) |
| postprocessing fxaa | 快速近似抗锯齿效果（FXAA） | three.js examples (threejs.org) |
| postprocessing glitch | 故障效果 | three.js examples (threejs.org) |
| postprocessing godrays | 上帝光效果 | three.js examples (threejs.org) |
| postprocessing gtao | 屏幕空间环境光遮蔽（GTAO） | three.js examples (threejs.org) |
| postprocessing masking | 遮罩效果 | three.js examples (threejs.org) |
| postprocessing material ao | 材质环境光遮蔽 | three.js examples (threejs.org) |
| postprocessing outline | 轮廓效果 | three.js examples (threejs.org) |
| postprocessing pixelate | 像素化效果 | three.js examples (threejs.org) |
| postprocessing procedural | 程序生成效果 | three.js examples (threejs.org) |
| postprocessing rgb halftone | RGB半色调效果 | three.js examples (threejs.org) |
| postprocessing sao | 屏幕空间环境光遮蔽（SAO） | three.js examples (threejs.org) |
| postprocessing smaa | 亚像素形态抗锯齿（SMAA） | three.js examples (threejs.org) |
| postprocessing sobel | Sobel边缘检测 | three.js examples (threejs.org) |
| postprocessing ssaa | 超级采样抗锯齿（SSAA） | three.js examples (threejs.org) |
| postprocessing ssao | 屏幕空间环境光遮蔽（SSAO） | three.js examples (threejs.org) |
| postprocessing taa | 时间抗锯齿（TAA） | three.js examples (threejs.org) |
| postprocessing unreal bloom | 虚幻引擎风格的发光效果 | three.js examples (threejs.org) |
| postprocessing unreal bloom selective | 选择性虚幻引擎风格的发光效果 | three.js examples (threejs.org) |
EffectComposer是Three.js中实现后处理效果的强大工具。通过组合不同的Pass，可以实现各种复杂的视觉效果，提升3D场景的视觉吸引力。本文介绍的设置EffectComposer的基本步骤以及几个常见的后处理效果，希望能为你的Three.js项目带来灵感。
