后期处理

后期处理：简单的说就是先渲染一张图存起来，在这张图上面"添油加醋"，处理完后再渲染到屏幕上。工作方式是你需要创建EffectComposer然后增加一些Pass对象。每一个Pass阶段都可以增加一些后置处理特效，添加小插图，模糊，添加光晕，添加噪点，调整色相，饱和度，对比度等等。最终把效果渲染到canvas。

# EffectComposer

效果组合器，管理后期处理过程，根据通道插入顺序，来执行通道内代码（主要为着色器代码）

// 引入
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'

const effectComposer = new EffectComposer(渲染器)

1
2
3
4

# addPass

给EffectComposer添加后期处理通道，可以添加多个，依次执行

effectComposer.addPass(通道)

# render

后期处理渲染出最终效果

effectComposer.render()

# RenderPass

RenderPass通道的作用是把场景和相机作为参数传入，获得场景的渲染结果，不对渲染结果做特定处理。
简单说就是RenderPass用来生成第一张原始图，用来传给后面通道使用，所以一般RenderPass会作为第一个通道

const renderPass = new RenderPass(scene, camera)

# renderToScreen

默认值是false，true将处理的结果保存到帧缓冲区，false直接显示在canvas画布上面。

# OutlinePass

该通道可以为物体（场景中被添加到通道中的物体）的边缘添加一个发光效果。官方示例 (opens new window)

参数：

vec2，一个2维分量，表示效果范围
scene，场景对象
camera，相机对象

配置项：

edgeStrength：边缘强度，默认3.0，最基础的属性，后面4个配置项都基于该项
edgeGlow:边缘流，默认0.0
edgeThickness:边缘厚度，默认1.0
pulsePeriod:闪烁频率，默认0 ，值越大频率越低
usePatternTexture：选中对象使用图案纹理，默认false，不使用
visibleEdgeColor：边缘可见部分发光颜色，默认#FFFFFF
hiddenEdgeColor：边缘遮挡部分发光颜色，默认#190A05
selectedObjects，一个对象数组，表示使用该效果的对象

import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";

// 创建一个纽结体
const geometry3 = new THREE.TorusKnotGeometry(1, 0.3, 100, 16);
const material3 = new THREE.MeshStandardMaterial({
  emissive: 0x33ff33,
});
const torusKnot = new THREE.Mesh(geometry3, material3);
torusKnot.position.set(0, 0, 0);
scene.add(torusKnot);

const outLinePass = new OutlinePass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  scene,
  camera
);
outLinePass.edgeStrength = 3;
outLinePass.edgeGlow = 2;
outLinePass.edgeThickness = 3;
outLinePass.pulsePeriod = 2;
outLinePass.selectedObjects = [torusKnot];
composer.addPass(outLinePass);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# UnrealBloomPass

该通道可以做发光效果,官方示例 (opens new window)

# 官方示例 (opens new window)

# 参考

编辑

上次更新: 2022/10/11

← blender 缓冲区→