古法编程

Three.js 后处理特效实现指南：从 Bloom 到自定义 Shader

解决 3D 场景视觉单调问题：通过配置 EffectComposer 后处理管线，在场景渲染完成后添加发光、模糊、色彩校正等屏幕空间特效，提升画面的电影感和视觉质量。

为什么需要这个技能

基础的 Three.js 渲染仅能完成物体的几何着色，但在实际项目中，为了达到“高级感”，需要对最终生成的图像进行二次处理。例如，霓虹灯的辉光（Bloom）、相机的虚化（DOF）、画面边缘的暗角（Vignette）以及电影级的色彩分级（Color Grading）。

后处理（Post-processing）是在屏幕空间（Screen Space）对像素进行操作。通过本技能，你可以摆脱简单的材质渲染，构建一套完整的视觉滤镜管线，甚至编写自定义的 GLSL Shader 来实现独特的艺术风格。

适用场景

  • 视觉增强：为场景添加发光（Bloom）或环境光遮蔽（SSAO）增加空间感。
  • 相机模拟：实现景深（Depth of Field）或胶片颗粒感（Film Grain）。
  • 性能优化：使用 FXAA 或 SMAA 解决锯齿问题。
  • 艺术风格化：通过像素化（Pixelation）、故障风（Glitch）或自定义 Shader 改变画面氛围。

核心工作流

1. 建立后处理管线

后处理不再直接调用 renderer.render()，而是通过 EffectComposer 管理一系列 Pass（通道）。

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

const composer = new EffectComposer(renderer);
// 必须首先添加 RenderPass，将场景渲染到缓冲区
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

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

2. 添加常用特效

可以通过添加不同的 Pass 叠加效果。例如添加 UnrealBloomPass 实现发光效果：

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

const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.5, // 强度
  0.4, // 半径
  0.85 // 阈值
);
composer.addPass(bloomPass);

3. 构建自定义 ShaderPass

如果你需要特殊的视觉效果，可以定义自己的顶点和片元着色器，通过 ShaderPass 注入。

import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";

const CustomShader = {
  uniforms: {
    tDiffuse: { value: null }, // 输入纹理
    time: { value: 0 },
  },
  vertexShader: `...`, // 顶点着色器
  fragmentShader: `...`, // 片元着色器
};

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

4. 性能与适配

  • 分辨率适配：在窗口 resize 时，必须同时调用 renderer.setSize 和 composer.setSize。
  • 顺序关键：Pass 的添加顺序决定了效果叠加顺序。通常 RenderPass 在最前，GammaCorrectionShader 和抗锯齿 FXAA 在最后。

下载和安装

下载 threejs-postprocessing 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要

暂无推荐