从零开始学习three.js（10）：后处理深度解析，从基础到高级应用

在三维可视化开发中，后期处理（Post-Processing） 是提升视觉效果的关键技术。Three.js 通过 EffectComposer 和渲染通道（Pass）系统，为开发者提供了强大的后期处理能力。本文将深入解析 three.js 后期处理的核心原理，并通过实战案例展示从基础到高级的应用技巧。

一、后期处理基础

1.1 核心概念

EffectComposer：后期处理的核心控制器，管理多个渲染通道的串联执行
RenderPass：基础渲染通道，负责将场景渲染到后期处理管线
ShaderPass：支持自定义着色器的通道，用于实现特效

1.2 基础配置

scss 复制代码

// 初始化基础组件
const composer = new EffectComposer(renderer);
composer.setSize(window.innerWidth, window.innerHeight);

// 添加基础渲染通道
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// 添加效果通道（示例：辉光效果）
const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.5, // 强度
  0.4, // 半径
  0.85 // 阈值
);
composer.addPass(bloomPass);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  composer.render();
}

1.3 常用内置效果

效果类型	实现类	关键参数
辉光效果	UnrealBloomPass	strength, radius, threshold
物体高亮	OutlinePass	edgeStrength, edgeGlow, edgeThickness
景深效果	BokehPass	focus, aperture
颜色调整	ColorCorrectionPass	contrast, saturation
屏幕空间环境光遮蔽	SSAOPass	radius, intensity

辉光（Bloom） ：通过 UnrealBloomPass 控制强度、半径和阈值，模拟发光材质。

景深（Depth of Field）：结合深度缓冲区，模糊远/近景，增强视觉层次感。

物体高亮 ：使用 OutlinePass 和射线检测实现鼠标悬停轮廓描边。

环境光遮蔽（Ambient Occlusion，简称 AO）：通过模拟物体表面因周围几何体遮挡环境光而产生的柔和阴影，提升画面的深度和细节表现。

ColorCorrectionPass ：是 Three.js 后处理管线中用于调节画面色彩分布的核心组件，通过调整 RGB 通道的数学运算参数，实现画面色调、对比度等视觉效果的精细化控制。本质上是 ShaderPass 的实例化对象，使用 THREE.ColorCorrectionShader 着色器代码对渲染结果逐像素处理。

二、高级应用技巧

2.1 多通道组合策略

通过合理组合多个渲染通道实现复杂效果：

scss 复制代码

// 典型多通道配置
composer.addPass(renderPass);       // 基础渲染
composer.addPass(ssaoPass);         // 环境光遮蔽
composer.addPass(bloomPass);        // 辉光效果
composer.addPass(filmPass);         // 胶片颗粒
composer.addPass(outputPass);       // 最终输出

2.2 自定义着色器开发

创建自定义 GLSL 着色器实现独特效果：

ini 复制代码

// 灰度转换着色器
uniform sampler2D tDiffuse;
varying vec2 vUv;

void main() {
  vec4 color = texture2D(tDiffuse, vUv);
  float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
  gl_FragColor = vec4(vec3(gray), color.a);
}

csharp 复制代码

// 集成自定义着色器
const customShader = {
  uniforms: { tDiffuse: { value: null } },
  vertexShader: /* 顶点着色器代码 */,
  fragmentShader: /* 片段着色器代码 */
};

const customPass = new ShaderPass(customShader);
composer.addPass(customPass);

2.3 性能优化方案

渲染目标优化：

ini 复制代码

composer.setSize(window.innerWidth/2, window.innerHeight/2); // 降采样
composer.renderTarget1.stencilBuffer = false; // 关闭不需要的缓冲区

通道优先级管理：

ini 复制代码

bloomPass.enabled = devicePerformance === 'high'; // 动态启用效果

WebGL2 特性利用：

ini 复制代码

const effect = new SSAOPass(scene, camera, width, height);
effect.useNormalBuffer = true; // 启用法线缓冲

三、实战案例：科幻场景特效

3.1 场景配置

ini 复制代码

// 基础场景设置
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);

// 动态光源配置
const pointLight = new THREE.PointLight(0xff4400, 2, 100);
pointLight.position.set(0, 10, 0);
scene.add(pointLight);

3.2 特效组合方案

scss 复制代码

// 高级特效组合
composer.addPass(renderPass);
composer.addPass(ssaoPass);       // 环境光遮蔽
composer.addPass(bloomPass);      // 强效辉光
composer.addPass(noisePass);      // 数字噪波
composer.addPass(glitchPass);     // 信号干扰
composer.addPass(colorPass);      // 色彩分级

3.3 动态参数控制

csharp 复制代码

gui.add(bloomPass, 'strength', 0, 3).name('辉光强度');
gui.add(ssaoPass, 'radius', 0.1, 2).name('AO半径');
gui.add(colorPass.uniforms.contrast, 'value', 0.5, 2).name('对比度');

四、性能优化：平衡效果与渲染效率

渲染目标管理
- 分辨率控制：降低 Render Target 的分辨率（如 0.5倍）以减少计算量。
- 缓冲区复用：避免频繁创建/销毁 Render Target，采用池化策略。
通道优化策略
- 按需启用：非全局特效（如局部高亮）仅在触发时激活对应 Pass。
- 抗锯齿替代方案 ：使用 FXAAPass 替代多重采样（MSAA），降低 GPU 负载。
实例化与 LOD
- InstancedMesh：对重复物体（如草地）使用实例化渲染，减少 Draw Call。
- 动态细节层次（LOD）：根据相机距离切换模型精度，降低后处理输入复杂度。

更多three.js、cesium.js开源案例，请移至gitee.com/giser2017/t...