6个最常用的Three.js后期处理效果

推荐：用 NSDT编辑器 快速搭建可编程3D场景

在之前的文章中我们讨论了如何加载 glTF 模型以及如何更改加载的 glTF 模型中的颜色。 在本文中，我将介绍如何为加载的 glTF 模型创建后处理效果。 这些效果在渲染 3D 场景后应用，允许你添加各种滤镜、增强和调整，以创造令人惊叹的视觉体验。

如果你需要将其他格式的模型转换到GLTF或GLB格式，可以使用NSDT 3DConvert这个 在线3D格式转换工具：

1、重影效果

After Image Pass主要用于创建重影效果。 此效果用于显示物体正在快速移动或改变其位置。 创建类似轨迹的效果。

除了 ThreeJS、Orbit Controls 和 GLTFLoader 之外，还应将以下 3 个组件导入到代码中。

import { EffectComposer } from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/RenderPass.js';
import { AfterimagePass } from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/AfterimagePass.js';
1
2
3

使用渲染器渲染场景后，我们需要一个 Effect Composer 来渲染后期处理效果。 添加渲染器后，可以将 Effect Composer 添加到代码中，如下所示：

// Instantiate the EffectComposer
const composer = new EffectComposer(renderer);
1
2

接下来，渲染通道（Render Pass）用于捕获整个场景，而不使用后期处理效果。 渲染通道是后处理管道中的第一个通道。 渲染通道的输出将作为后续后处理通道的输入。 我们插入以下几行将渲染通道添加到 Effect Composer 实例：

const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
1
2

通过插入以下行添加“Next After Image Pass”：

const afterimagePass = new AfterimagePass();
composer.addPass(afterimagePass);
1
2

最后，在 animate 函数内部，我们使用 Effect Composer 进行渲染，而不是使用 Renderer：

  composer.render(); // Use composer for rendering instead of renderer
1

2、点网效果

Dot Screen Pass 用于添加黑白点状图案。

可以按如下方式导入点网效果。

import { DotScreenPass } from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/DotScreenPass.js';
1

确保 Effect Composer 和 Render Pass 已导入并添加到场景中，如上所述。

现在，可以添加点网效果：

const dotscreenPass = new DotScreenPass();
composer.addPass(dotscreenPass);
1
2

最后，确保使用 Effect Composer 进行渲染，而不是上面提到的 Renderer。

3、老式电影效果

Film Pass 效果将创建黑白老电影风格的后期处理效果。

要导入 Film Pass 效果，请在代码顶部插入以下行：

import { FilmPass } from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/FilmPass.js';
1

如上所述导入并添加 Effect Composer 和 Render Pass 后，可以通过插入以下代码行来添加 Film Pass 效果：

const filmPass = new FilmPass();
composer.addPass(filmPass);
1
2

像往常一样，确保使用 Effect Composer 进行渲染，而不是上面提到的 Renderer。

4、故障效果

GlitchPass将创建类似电视故障的效果。

可以通过在代码顶部插入以下行来导入 Glitch Pass 效果：

import { GlitchPass } from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/GlitchPass.js';
1

导入并添加 Effect Composer 和 Render Pass 后，通过插入以下代码行添加 Glitch Pass 效果：

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

确保使用 Effect Composer 而不是 Renderer 进行渲染。

5、半色调效果

Halftone Pass 效果用于创建半色调效果，如下所示：

可以通过在代码顶部插入以下行来导入半色调通过效果：

import { HalftonePass } from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/HalftonePass.js';
1

导入并添加 Effect Composer 和 Render Pass 后，通过插入以下代码行添加 Halftone Pass 效果：

const halftonePass = new HalftonePass();
composer.addPass(halftonePass);
1
2

确保使用 Effect Composer 而不是 Renderer 进行渲染。

6、着色器通道

可以借助 Shader Pass 创建像素化效果。

可以通过在代码顶部插入以下行来导入着色器通道：

import { ShaderPass } from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/ShaderPass.js';
1

导入并添加 Effect Composer 和 Render Pass 后，通过插入以下代码行添加 Shader Pass 效果：

// Add pixelation effect shader pass
const pixelationShader = {
  uniforms: {
    tDiffuse: { value: null },
    resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
    pixelSize: { value: 10.0 }, // Adjust this value to control pixelation size
  },
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform sampler2D tDiffuse;
    uniform vec2 resolution;
    uniform float pixelSize;

    varying vec2 vUv;

    void main() {
      vec2 dxy = pixelSize / resolution;
      vec2 coord = dxy * floor(vUv / dxy);
      gl_FragColor = texture2D(tDiffuse, coord);
    }
  `,
};

const pixelationPass = new ShaderPass(pixelationShader);
pixelationPass.renderToScreen = true; // Render this pass to the screen
composer.addPass(pixelationPass);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

确保使用 Effect Composer 而不是 Renderer 进行渲染。

---

原文链接：ThreeJS常用后期处理 — BimAnt