Three.js 后处理(Post Processing)技术详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00280/article/details/148323194

Three.js 后处理(Post Processing)技术详解

three.js JavaScript 3D Library. 项目地址: https://gitcode.com/gh_mirrors/th/three.js

后处理是现代3D图形渲染中不可或缺的一部分，它能为场景添加各种视觉效果，提升整体视觉体验。本文将深入探讨如何在Three.js中实现后处理效果。

后处理基础概念

后处理是指在完成3D场景渲染后，对生成的2D图像进行额外处理的过程。Three.js通过EffectComposer（效果合成器）类提供了一套完整的后处理解决方案。

EffectComposer工作原理

EffectComposer使用两个渲染目标（RenderTarget）来实现后处理效果：

双缓冲机制：使用rtA和rtB两个渲染目标交替处理
处理流程：
- 首先将场景渲染到rtA
- 然后对rtA应用第一个后处理效果，结果输出到rtB
- 接着对rtB应用第二个后处理效果，结果输出回rtA
- 如此交替进行，直到所有后处理效果应用完毕

核心Pass类型

后处理效果由一系列Pass（处理阶段）组成，每个Pass负责一种特定的效果处理：

1. RenderPass

将场景渲染到渲染目标的基础Pass，通常是效果链中的第一个Pass。

2. BloomPass

实现发光效果（Bloom），使明亮区域产生光晕效果。参数包括：

强度(strength)
内核大小(kernel size)
模糊程度(sigma)
分辨率(resolution)

3. FilmPass

模拟胶片效果，添加噪点和扫描线。参数包括：

强度(intensity)
是否使用灰度(grayscale)

实现后处理效果

基本设置步骤

创建EffectComposer实例

const composer = new EffectComposer(renderer);

添加RenderPass作为第一个Pass

composer.addPass(new RenderPass(scene, camera));

添加其他效果Pass

// 添加Bloom效果
const bloomPass = new BloomPass(1, 25, 4, 256);
composer.addPass(bloomPass);

// 添加胶片效果
const filmPass = new FilmPass(0.5, false);
composer.addPass(filmPass);

在渲染循环中使用composer.render()

function render() {
  composer.render();
  requestAnimationFrame(render);
}

动态调整效果参数

可以通过修改Pass的uniforms值来实时调整效果参数：

// 调整Bloom强度
bloomPass.copyUniforms.opacity.value = newValue;

// 调整Film效果
filmPass.uniforms.intensity.value = newIntensity;
filmPass.uniforms.grayscale.value = newGrayscale;

自定义后处理着色器

Three.js允许开发者创建自定义后处理着色器，通过ShaderPass类实现：

创建自定义着色器

定义着色器对象：

const customShader = {
  uniforms: {
    tDiffuse: { value: null },  // 必须包含，表示前一个Pass的结果
    customParam: { value: 1.0 } // 自定义参数
  },
  vertexShader: `...`,  // 顶点着色器代码
  fragmentShader: `...` // 片段着色器代码
};

创建ShaderPass实例：

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

简单着色器示例

下面是一个颜色调整着色器示例：

const colorShader = {
  uniforms: {
    tDiffuse: { value: null },
    color: { value: new THREE.Color(0x88CCFF) }
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1);
    }
  `,
  fragmentShader: `
    varying vec2 vUv;
    uniform sampler2D tDiffuse;
    uniform vec3 color;
    void main() {
      vec4 previousPassColor = texture2D(tDiffuse, vUv);
      gl_FragColor = vec4(
          previousPassColor.rgb * color,
          previousPassColor.a);
    }
  `
};