Three.js 后期处理（Post-Processing）详解

news2025/1/31 20:03:56

前言

一、什么是后期处理？

二、Three.js 后期处理的工作流程

2.1 创建 EffectComposer

2.2 添加渲染通道（Render Pass）

2.3 应用最终渲染

三、后期处理实现示例

3.1 基础代码

四、常见的后期处理效果

4.1 辉光效果（UnrealBloomPass）

4.2 景深（BokehPass / Depth of Field）

4.3 运动模糊（MotionBlurPass）

4.4 边缘检测（OutlinePass / SobelPass）

4.5 色彩调整（ColorCorrectionPass / LUTPass）

五、后期处理的注意事项

前言

在使用 Three.js 创建 3D 场景时，后期处理（Post-Processing）是一个不可忽视的环节。它通过对渲染结果进行额外的处理，可以极大地提升场景的视觉效果，使画面更具吸引力和表现力。

一、什么是后期处理？

后期处理（Post-Processing）是指在场景渲染完成后，对渲染的图像进行进一步的处理和调整。这些处理通常包括：

添加视觉效果（如模糊、辉光、色彩调整等）
模拟真实世界中的物理现象（如景深、运动模糊等）
实现特殊的视觉风格（如漫画效果、老电影风格等）

在 Three.js 中，后期处理是通过将渲染结果存储到帧缓冲区（Framebuffer），然后对其应用一系列着色器效果实现的。

二、Three.js 后期处理的工作流程

Three.js 提供了一个 EffectComposer 类，用于管理后期处理的整个流程。以下是后期处理的基本步骤：

2.1 创建 EffectComposer

EffectComposer 是后期处理的核心。它会接管场景的渲染，将渲染结果存储到帧缓冲区中。

2.2 添加渲染通道（Render Pass）

后期处理由一系列渲染通道（Pass）组成，每个通道都对帧缓冲区中的图像进行特定的处理。

RenderPass：渲染场景到帧缓冲区，作为后续处理的输入。
ShaderPass：应用特定的着色器效果。
EffectPass：封装多个复杂效果。

2.3 应用最终渲染

在所有的渲染通道完成处理后，EffectComposer 会将最终的图像渲染到屏幕上。

三、后期处理实现示例

以下是一个简单的后期处理示例，展示如何在 Three.js 中应用 EffectComposer 和一些常见的后期效果。

3.1 基础代码

import * as THREE from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
import { FilmPass } from 'three/examples/jsm/postprocessing/FilmPass.js';

// 初始化场景、摄像机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加一个简单的几何体
const geometry = new THREE.TorusKnotGeometry(1, 0.4, 100, 16);
const material = new THREE.MeshStandardMaterial({ color: 0xff6347 });
const torusKnot = new THREE.Mesh(geometry, material);
scene.add(torusKnot);

const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 10);
scene.add(light);

// 初始化 EffectComposer
const composer = new EffectComposer(renderer);

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

// 添加 UnrealBloomPass（辉光效果）
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
composer.addPass(bloomPass);

// 添加 FilmPass（电影胶片效果）
const filmPass = new FilmPass(0.35, 0.025, 648, false);
composer.addPass(filmPass);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  torusKnot.rotation.x += 0.01;
  torusKnot.rotation.y += 0.01;

  // 使用 composer 进行后期处理渲染
  composer.render();
}

animate();