1、后处理入门：什么是后处理、后处理管线概念、EffectComposer介绍、渲染目标与帧缓冲

1.1 什么是后处理？说白了就是“拍完照再修图”

各位同学，咱们先聊点轻松的。你有没有想过，为什么游戏里的画面能那么炫酷？发光、模糊、老电影效果……这些可不是 Three.js 默认渲染器直接画出来的。

默认情况下，Three.js 把 3D 场景渲染到屏幕上，就像你用手机直接拍了一张照片。但后处理呢？它是在这张“照片”拍完之后，再拿进 Photoshop 里调色、加滤镜、做特效。嗯，就是这么回事。

我个人习惯把后处理理解成“渲染后的二次加工”。你想想看，如果所有特效都要在 3D 场景里用几何体、材质去模拟，那性能得多差？后处理直接在像素级别操作，效率高得多。

我在项目中遇到过最典型的场景：客户想要一个“梦境般模糊”的过渡效果。如果用 3D 场景去模糊，得改相机参数、调材质，麻烦得要命。但用后处理，一个高斯模糊滤镜就搞定了。你说省不省事？

1.2 后处理管线：一条流水线，三个关键工位

后处理不是一步到位的。它是一条管线（Pipeline），说白了就是一条流水线。咱们来看看这条流水线上都有哪些工位：

1. 输入工位：原始渲染结果（就是 Three.js 默认渲染器画出来的那张图）
2. 加工工位：一个或多个滤镜/特效（比如模糊、颜色校正、发光）
3. 输出工位：最终显示到屏幕上的画面

你可能会问：“为什么不能一步到位？” 我刚开始学的时候也这么想。后来发现，特效之间是有依赖关系的。比如你先做了模糊，再做颜色校正，和先做颜色校正再做模糊，效果完全不一样。管线就是用来控制这个顺序的。

1.3 EffectComposer：你的后处理“总指挥”

在 Three.js 里，后处理的核心就是 EffectComposer。你可以把它理解成后处理管线的“总指挥”。它负责：

• 管理渲染目标（后面会讲）
• 按顺序执行各个特效
• 把最终结果输出到屏幕

使用起来其实很简单。我直接给你看代码：

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';

// 1. 创建 EffectComposer
const composer = new EffectComposer(renderer);

// 2. 添加 RenderPass（这是必须的，它负责把场景渲染到缓冲区）
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// 3. 添加一个发光特效
const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  0.5,  // 强度
  0.4,  // 半径
  0.85  // 阈值
);
composer.addPass(bloomPass);

// 4. 在动画循环里，用 composer 代替 renderer.render()
function animate() {
  requestAnimationFrame(animate);
  composer.render();
}

看到了吗？核心就三步：创建 composer、添加 pass、调用 composer.render()。我建议你把这段代码背下来，因为后面所有章节都会用到这个结构。

1.4 渲染目标与帧缓冲：后处理的“画板”和“草稿纸”

好，现在咱们聊聊底层原理。后处理为什么能“在像素级别操作”？因为它用到了两个关键概念：渲染目标（RenderTarget）和帧缓冲（Framebuffer）。

你可以这样理解：

• 帧缓冲：一块显存里的“画板”。Three.js 默认渲染到屏幕，但后处理需要渲染到这块画板上，方便后续加工。
• 渲染目标：一个 JavaScript 对象，它封装了帧缓冲。你只需要操作渲染目标，不用直接碰底层的帧缓冲。

在 EffectComposer 内部，它自动创建了两个渲染目标，来回切换使用。为什么是两个？因为一个用来读，一个用来写。就像你画画时，不能在同一张纸上边画边擦，得有一张草稿纸。

我举个例子你就明白了：

// 手动创建一个渲染目标
const renderTarget = new THREE.WebGLRenderTarget(
  window.innerWidth,
  window.innerHeight,
  {
    format: THREE.RGBAFormat,
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
  }
);

// 渲染到渲染目标，而不是屏幕
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);
renderer.setRenderTarget(null); // 恢复渲染到屏幕

这段代码展示了最原始的后处理流程：先渲染到缓冲区，再读出来加工。当然，实际开发中你不需要手动管理这些，EffectComposer 帮你搞定了。但理解这个原理很重要，因为后面调试特效时，你可能会需要直接操作渲染目标。

1.5 我的一点经验之谈

学后处理，最容易犯的错就是“贪多”。我刚开始时恨不得把所有特效都堆上去，结果画面又卡又丑。后来才明白，后处理是“少即是多”的艺术。一个恰到好处的发光，比十个乱七八糟的滤镜强得多。

另外，性能问题也要注意。每个特效都会消耗 GPU 资源。如果你要做移动端项目，尽量控制在 2-3 个特效以内。我踩过这个坑，在手机上跑 5 个特效，直接卡成 PPT。

好了，第一章就到这里。下一章咱们会深入第一个实战特效：辉光（Bloom）效果。到时候我会手把手带你做一个发光的小球，保证你学会后就能用在项目里。

记住：后处理不难，难的是理解管线思维。你只要把 EffectComposer 当成一个“特效流水线”，把每个特效当成一个“加工工位”，一切就都清晰了。