NSDT工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - Three.js虚拟轴心开发包 - 3D模型在线减面 - STL模型在线切割
在之前的文章中我们讨论了如何加载 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';使用渲染器渲染场景后，我们需要一个 Effect Composer 来渲染后期处理效果。 添加渲染器后，可以将 Effect Composer 添加到代码中，如下所示：
// Instantiate the EffectComposer
const composer = new EffectComposer(renderer);接下来，渲染通道（Render Pass）用于捕获整个场景，而不使用后期处理效果。 渲染通道是后处理管道中的第一个通道。 渲染通道的输出将作为后续后处理通道的输入。 我们插入以下几行将渲染通道添加到 Effect Composer 实例：
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);通过插入以下行添加“Next After Image Pass”：
const afterimagePass = new AfterimagePass();
composer.addPass(afterimagePass);最后，在 animate 函数内部，我们使用 Effect Composer 进行渲染，而不是使用 Renderer：
composer.render(); // Use composer for rendering instead of renderer2、点网效果
Dot Screen Pass 用于添加黑白点状图案。
可以按如下方式导入点网效果。
import { DotScreenPass } from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/DotScreenPass.js';确保 Effect Composer 和 Render Pass 已导入并添加到场景中，如上所述。
现在，可以添加点网效果：
const dotscreenPass = new DotScreenPass();
composer.addPass(dotscreenPass);最后，确保使用 Effect Composer 进行渲染，而不是上面提到的 Renderer。
3、老式电影效果
Film Pass 效果将创建黑白老电影风格的后期处理效果。
要导入 Film Pass 效果，请在代码顶部插入以下行：
import { FilmPass } from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/FilmPass.js';如上所述导入并添加 Effect Composer 和 Render Pass 后，可以通过插入以下代码行来添加 Film Pass 效果：
const filmPass = new FilmPass();
composer.addPass(filmPass);像往常一样，确保使用 Effect Composer 进行渲染，而不是上面提到的 Renderer。
4、故障效果
GlitchPass将创建类似电视故障的效果。
可以通过在代码顶部插入以下行来导入 Glitch Pass 效果：
import { GlitchPass } from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/GlitchPass.js';导入并添加 Effect Composer 和 Render Pass 后，通过插入以下代码行添加 Glitch Pass 效果：
const glitchPass = new GlitchPass();
composer.addPass(glitchPass);确保使用 Effect Composer 而不是 Renderer 进行渲染。
5、半色调效果
Halftone Pass 效果用于创建半色调效果，如下所示：
可以通过在代码顶部插入以下行来导入半色调通过效果：
import { HalftonePass } from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/HalftonePass.js';导入并添加 Effect Composer 和 Render Pass 后，通过插入以下代码行添加 Halftone Pass 效果：
const halftonePass = new HalftonePass();
composer.addPass(halftonePass);确保使用 Effect Composer 而不是 Renderer 进行渲染。
6、着色器通道
可以借助 Shader Pass 创建像素化效果。
可以通过在代码顶部插入以下行来导入着色器通道：
import { ShaderPass } from 'https://cdn.skypack.dev/three@0.133.0/examples/jsm/postprocessing/ShaderPass.js';导入并添加 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);确保使用 Effect Composer 而不是 Renderer 进行渲染。
原文链接：ThreeJS post processing effects
BimAnt翻译整理，转载请标明出处
