ThreeJS学习：后处理EffectComposer

前言

在ThreeJS场景渲染完成后，如果我们想给场景添加一些效果，如发光效果，可通过后处理EffectComposer添加。

一、使用EffectComposer

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

  // 创建后处理对象EffectComposer，WebGL渲染器作为参数
  const composer = new EffectComposer(renderer);

  // 创建一个渲染器通道，场景和相机作为参数
  const renderPass = new RenderPass(scene, camera);

  // 设置renderPass通道
  composer.addPass(renderPass);
  // 通过addPass添加其他效果通道，例如发光描边等
  composer.addPass(outlinePass);
  // 调用后处理渲染
  composer.render();

如果渲染器重新渲染后，后处理器也需要重新进行渲染方能实现效果。

二、常见的后处理效果

1、发光描边

  import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';

  // OutlinePass第一个参数v2的尺寸和canvas画布保持一致
  const v2 = new THREE.Vector2(window.innerWidth, window.innerHeight);
  // const v2 = new THREE.Vector2(800, 600);
  const outlinePass = new OutlinePass(v2, scene, camera);
  // 设置模型对象
  outlinePass.selectedObjects = [mesh]; 

效果图

2、Bloom发光

  import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
  const bloomPass = new UnrealBloomPass();
  bloomPass.strength = 2;
  return bloomPass;
  bloomPass.selectedObjects = [mesh];

效果

3、闪屏 GlitchPass

   const glitchPass = new GlitchPass();
   composer.addPass(glitchPass);

4、残影 AfterimagePass

为场景中移动的物体添加残影的效果

  import { AfterimagePass } from 'three/examples/jsm/postprocessing/AfterimagePass.js';
  // 添加残影通道
  const afterimagePass = new AfterimagePass();
  composer.addPass(afterimagePass);
  // 可选：调整阻尼参数
  afterimagePass.uniforms.damp.value = 0.95; // 控制残影长度

效果

5、景深效果 BokehPass

模拟相机焦点与背景虚拟化

  const bokehPass = new BokehPass(scene, camera, {
    focus: 400,
    aperture: 0.01,
    maxblur: 0.3,
    aspect: 1,
  });
  composer.addPass(bokehPass);

• focus：场景中清晰的平面距离，距离相机 focus 值的物体将保持清晰；
• aperture：控制模糊程度，值越大，背景虚拟化越强烈
• maxblur：最大模糊度，限制模糊的上线，避免过度模糊
• aspect：画布尺寸的宽高比
  
  效果

6、清屏

用于在渲染流程的特定时刻清除渲染目标（如屏幕或中间缓冲区）为指定的颜色和透明度

  // 创建 ClearPass，设置清除颜色为蓝色，透明度为 1（不透明）
  const clearPass = new ClearPass(new THREE.Color(0x00_00_ff), 1);
  composer.addPass(clearPass);

效果图

7、全景贴图 CubeTexturePass

  import First from '../material/test1.png';
  import Second from '../material/test2.png';
  import Third from '../material/test3.png';
  import Forth from '../material/test4.png';
  import Fifth from '../material/test5.png';
  import Sixth from '../material/test6.png';

  const textureCube = new THREE.CubeTextureLoader().load(
    [First, Second, Third, Forth, Fifth, Sixth],
    (map: any) => {
      const cubeTexturePass = new CubeTexturePass(camera, map);
      composer.addPass(cubeTexturePass);
      composer.render();
    },
  );

效果图

8、点集 DotScreenPass

将整个场景渲染为一系列点状图案，模拟点阵显示或老式电视的扫描效果

  import { DotScreenPass } from 'three/addons/postprocessing/DotScreenPass.js';

  // 创建并添加 DotScreenPass
  const dotScreenPass = new DotScreenPass();
  // 可选：调整参数
  dotScreenPass.uniforms.angle.value = Math.PI / 8; // 旋转45度
  dotScreenPass.uniforms.scale.value = 0.3; // 设置点的大小
  composer.addPass(dotScreenPass);

效果图

9、电影复古效果 FilmPass

用于模拟电影胶片或老旧电视屏幕效果的后期处理通道。

  /**
   * 创建 FilmPass 并添加到 composer
   * 第一个参数 光照强度
   * 第二个参数 是否使用灰度图像
   */
  const filmPass = new FilmPass(5, true); // 示例参数
  composer.addPass(filmPass);

效果图

10、半色调效果 HalftonePass

通过模拟点阵图案来模仿老式印刷或报纸的视觉风格，常用于游戏或艺术项目中营造复古感

  const params = {
    shape: 0, // 点形 (0-圆形, 1-方形, 2-线性)
    radius: 1.5, // 点的半径
    rotateR: Math.PI / 12, // 红色通道旋转角度
    rotateG: (Math.PI / 12) * 2, // 绿色通道旋转角度
    rotateB: (Math.PI / 12) * 3, // 蓝色通道旋转角度
    scatter: 0, // 点的分散度
    blending: 1, // 混合模式
    blendingMode: 1, // 混合模式类型
    greyscale: false, // 是否为灰度
    disable: false, // 是否禁用
  };
  /**
   * 第一个参数：画布的宽度
   * 第二个参数：画布的高度
   */
  const halftonePassCustom = new HalftonePass(700, 700, params);
  composer.addPass(halftonePassCustom);

效果图

11、输入通道 OutputPass

负责将所有处理后的最终图像输出到屏幕。

// 添加输出通道（必须作为最后一个通道）
const outputPass = new OutputPass(); // 自动匹配画布尺寸
composer.addPass(outputPass);

12、环境光遮蔽通道 SAOPass

模拟物体表面因几何结构遮挡而产生的柔和阴影效果

  const saoPass = new SAOPass(scene, camera, new THREE.Vector2(700, 700));
  composer.addPass(saoPass);

效果

13、缓存 SavePass

缓存当前的渲染结果（通常是一个纹理），使其可以在后续的后期处理通道中被重用，避免重复渲染场景。

const savePass = new SavePass();
composer.addPass(savePass);

14、抗锯齿 SMAAPass

用于实现子像素形态抗锯齿的后期处理通道，它能有效平滑3D场景渲染后的边缘锯齿，提升图像质量

  const smaaPass = new SMAAPass();
  composer.addPass(smaaPass);

效果

15、超级采样抗锯齿渲染 SSAARenderPass

通过在多个采样点上渲染场景并进行平均，来平滑几何边缘的锯齿现象

  const ssaaPass = new SSAARenderPass(scene, camera);
  ssaaPass.unbiased = true; // 可选：启用无偏采样，减少颜色偏差
  ssaaPass.sampleLevel = 100; // 置采样等级（默认为 4），值越高抗锯齿效果越好，但性能开销越大
  composer.addPass(ssaaPass);

效果图

三、源代码

demo