# 后处理效果
使用后处理效果可以为三维场景添加高性能的全屏特效，例如泛光、描边、景深等等。后处理效果需要通过后处理渲染管线（PostprocessingRenderPipeline）渲染。后处理渲染管线是基于postprocessing库封装的，支持 postprocessing 中的所有效果（Effect）和通道（Pass）。关于 postprocessing 的介绍请参考： Documentation和Wiki。
注意
使用后处理效果需要引入 @tx3d/postprocessing 包；
提示
使用后处理效果，初始化引擎时推荐以下设置：
powerPreference: 'high-performance',
antialias: false,
depth: false,
stencil: false
import { Engine } from '@tx3d/core';
// 创建引擎
const engine = new Engine( {
// 场景渲染器初始化参数
sceneRenderer: {
powerPreference: 'high-performance',
antialias: false,
depth: false,
stencil: false
}
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 设置后处理渲染管线
import { Engine } from '@tx3d/core';
import { PostprocessingRenderPipeline } from '@tx3d/postprocessing';
// 创建引擎
const engine = new Engine( {
viewport: document.getElementById('viewport'),
clearColor: '#F0FFFF',
powerPreference: 'high-performance',
antialias: false,
depth: false,
stencil: false,
renderPipeline: new PostprocessingRenderPipeline() // 设置后处理渲染管线
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
提示
关于渲染管线的详细介绍请参考“渲染管线”。
提示
后处理渲染管线初始化参数，详见PostprocessingRenderPipelineParameters。
# 添加后处理效果
通过后处理渲染管线（PostprocessingRenderPipeline）的addEffect接口添加一个或一组后处理效果。
import { BloomEffect, PostprocessingRenderPipeline } from '@tx3d/postprocessing';
// 获取场景渲染器
const { sceneRenderer } = engine;
// 获取后处理渲染管线
const renderPipeline = sceneRenderer.renderPipeline as PostprocessingRenderPipeline;
// 创建曝光后处理效果
const bloomEffect = new BloomEffect( {
intensity: 0.5,
radius: 0.35,
luminanceThreshold: 0.0,
luminanceSmoothing: 0.025
} );
// 添加到渲染管线
renderPipeline.addEffect( bloomEffect );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { BloomEffect, PostprocessingRenderPipeline, ToneMappingEffect, ToneMappingMode } from '@tx3d/postprocessing';
// 获取场景渲染器
const { sceneRenderer } = engine;
// 获取后处理渲染管线
const renderPipeline = sceneRenderer.renderPipeline as PostprocessingRenderPipeline;
// 创建曝光后处理效果
const bloomEffect = new BloomEffect( {
intensity: 0.5,
radius: 0.35,
luminanceThreshold: 0.0,
luminanceSmoothing: 0.025
} );
// 创建色调映射后处理效果
const toneMappingEffect = new ToneMappingEffect( {
mode: ToneMappingMode.NEUTRAL,
resolution: 256,
whitePoint: 16.0,
middleGrey: 0.6,
minLuminance: 0.01,
averageLuminance: 0.01,
adaptationRate: 1.0
} );
// 以组的方式添加后处理效果
renderPipeline.addEffect( [ bloomEffect, toneMappingEffect ] );
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
33
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
33
提示
推荐以组的方式添加后处理效果，后处理渲染管线内部会自动合并可以合并的效果提升渲染效率。
提示
addEffect 接口的第二个参数 dithering 标识是否“抖动”当前效果，默认为 false 不抖动。
“抖动”是一种欺骗人的眼睛，使用有限的色彩让你看到比实际图象更多色彩的显示方式。
通过在相邻像素间随机的加入不同的颜色来修饰图象，通常这种方式被用于颜色较少的情况下。