# 后期效果

使用后期效果可以为三维场景添加高性能的全屏特效，例如泛光、描边、景深等等。

注意

使用后期效果需要引入 @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

# 创建后期对象

使用引擎（Engine）的createPostprocessing接口创建后期对象。

import { HalfFloatType } from 'three';
import { Postprocessing } from '@tx3d/postprocessing';

// 后期对象初始化参数，可选
const parameters = {

    depthBuffer: true,
    stencilBuffer: false, 
    multisampling: 4, 
    frameBufferType: HalfFloatType

}

// 创建后期对象
const postprocessing = engine.createPostprocessing( 
    
    Postprocessing,    // 后期对象类型，当前只有Tx3d.Postprocessing一种，必填
    scene,                  // 后期对象关联的场景实体，必填
    camera,                 // 后期对象关联的相机实体，必填
    parameters              // 初始化参数，可选
    
);

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

注意

后期对象与场景和相机是一对一的强关联且后期对象不允许动态调整其关联的场景和相机，因此在创建后期对象时必须制定其关联的场景和相机。此外，在切换场景或相机时如果不存在的对应的后期对象则会使用常规方式渲染。

提示

后期效果初始化参数，详见PostprocessingParameters。

# 获取后期对象

使用引擎（Engine）的getPostprocessing接口获取指定GUID后期对象。

// 后期对象GUID（关联的场景实体&关联的相机实体的GUID组合）
const guid = `${scene.guid}_${camera.guid}`;

// 获取后期对象
const postprocessing = engine.getPostprocessing( guid );

1
2
3
4
5

# 销毁后期对象

使用引擎（Engine）的removePostprocessing接口销毁指定GUID后期对象。

// 后期对象GUID（关联的场景实体&关联的相机实体的GUID组合）
const guid = `${scene.guid}_${camera.guid}`;

// 销毁后期对象
engine.removePostprocessing( guid );

1
2
3
4
5

# 添加后期效果

使用Postprocessing的addEffect接口添加效果。

import { Blur } from '@tx3d/postprocessing';

// 添加模糊后处理效果
const effect = postprocessing.addEffect( Blur );

1
2
3
4

# 获取后期效果

使用Postprocessing的getEffect接口获取效果。

import { Blur } from '@tx3d/postprocessing';

// 获取模糊后处理效果
const effect = postprocessing.getEffect( Blur );

1
2
3
4

# 后期效果通用初始化参数

所有后期效果都可以初始化设置的参数

🌏 height 渲染质量

import { Blur } from '@tx3d/postprocessing';

// 添加后处理效果
const effect = postprocessing.addEffect( Blur, {

    resolutionY:480 //通用参数 所有效果都可以设置
    
} );

1
2
3
4
5
6
7
8

# 后期效果通用属性

所有后期效果都可以设置的属性

🌏 blendFunction 混合方式

当后期效果渲染完毕后以何种方式跟场景混合。默认是BlendFunction.SCREEN

import { BlendFunction } from '@tx3d/postprocessing';

// 设置混合方式
effect.blendFunction = BlendFunction.SCREEN;

1
2
3
4

提示

混合方式参数，详见BlendFunction。

🌏 opacity 启用

// 禁用效果
effect.enable = false;

1
2

🌏 opacity 透明度

// 设置后期效果透明度
effect.opacity = 0.5;

1
2

🌏 dithering 颜色抖动

Dithering (抖动显示)它是一种欺骗你眼睛，使用有限的色彩让你看到比实际图象更多色彩的显示方式。
通过在相邻像素间随机的加入不同的颜色来修饰图象，通常这种方式被用于颜色较少的情况下。

// 开启颜色抖动
effect.dithering = true;

1
2

← 如何创建粒子系统泛光 →