NSDT工具推荐Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器 - REVIT导出3D模型插件 - 3D模型语义搜索引擎 - Three.js虚拟轴心开发包

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

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

https://3dconvert.nsdt.cloud

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 renderer

2、点网效果

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翻译整理,转载请标明出处