# 选择曝光效果
选择曝光效果和曝光效果类似，区别是选择曝光可以单独指定曝光对象。当前后处理渲染管线提供 SelectiveBloomEffect、SelectiveBloomEffectAdvanced、SelectiveBloomEffectAlternative三种类型的选择曝光效果。
# SelectiveBloomEffect
SelectiveBloomEffect 为 postprocessing 的内置效果。
import { Mesh, MeshStandardMaterial, TorusGeometry } from 'three';
import { MeshRenderer } from '@tx3d/core';
import { addToSelection, PostprocessingRenderPipeline, SelectiveBloomEffect } from '@tx3d/postprocessing';
// 获取场景渲染器
const { sceneRenderer } = engine;
// 获取后处理渲染管线
const renderPipeline = sceneRenderer.renderPipeline as PostprocessingRenderPipeline;
// 创建选择曝光后处理效果
const selectiveBloomEffect = new SelectiveBloomEffect( null, null, {
intensity: 1.25,
radius: 0.35,
luminanceThreshold: 0.15,
luminanceSmoothing: 0.1
} );
// 添加到渲染管线中
engine.sceneRenderer.renderPipeline.addEffect( selectiveBloomEffect );
// 获取选择曝光后处理效果的选择器
const { selection } = selectiveBloomEffect;
// 创建16个圆环并曝光
for ( let i = 0; i < 16; i++ ) {
const geometry = new TorusGeometry( 3.35, 0.05, 16, 100 );
const material = new MeshStandardMaterial( { color: '#000000', emissive: '#ffffff', toneMapped: false } );
const entity = engine.createEntity();
const mesh = entity.addComponent( MeshRenderer, { mesh: new Mesh( geometry, material ) } );
// 将曝光对象添加到选择器中
addToSelection( selection, mesh );
}
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
34
35
36
37
38
39
40
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
34
35
36
37
38
39
40
# SelectiveBloomEffectAdvanced
SelectiveBloomEffectAdvanced是基于SelectiveBloomEffect封装的。
import { Mesh, MeshStandardMaterial, TorusGeometry } from 'three';
import { MeshRenderer } from '@tx3d/core';
import { PostprocessingRenderPipeline, SelectiveBloomEffectAdvanced } from '@tx3d/postprocessing';
// 获取场景渲染器
const { sceneRenderer } = engine;
// 获取后处理渲染管线
const renderPipeline = sceneRenderer.renderPipeline as PostprocessingRenderPipeline;
// 创建选择曝光后处理效果
const selectiveBloomEffect = new SelectiveBloomEffectAdvanced( {
intensity: 1.25,
radius: 0.35,
luminanceThreshold: 0.15,
luminanceSmoothing: 0.1
} );
// 添加到渲染管线中
engine.sceneRenderer.renderPipeline.addEffect( selectiveBloomEffect );
// 创建16个圆环并曝光
for ( let i = 0; i < 16; i++ ) {
const geometry = new TorusGeometry( 3.35, 0.05, 16, 100 );
const material = new MeshStandardMaterial( { color: '#000000', emissive: '#ffffff', toneMapped: false } );
const entity = engine.createEntity();
const mesh = entity.addComponent( MeshRenderer, { mesh: new Mesh( geometry, material ) } );
// 曝光指定渲染对象
selectiveBloomEffect.enableBloom( mesh );
}
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
34
35
36
37
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
34
35
36
37
# 属性
🌏 radius 模糊半径
🌏 luminanceThreshold 亮度阈值
🌏 luminanceSmoothing 亮度平滑度
# 接口
🌏 enableBloom 曝光渲染组件或实体。
// 曝光指定渲染组件
selectiveBloomEffect.enableBloom( renderable );
// 曝光指定实体
selectiveBloomEffect.enableBloom( entity ); // 曝光实体中的所有渲染组件
1
2
3
4
5
2
3
4
5
🌏 disableBloom 禁用指定渲染组件或实体的曝光效果。
// 禁用指定渲染组件的曝光效果
selectiveBloomEffect.disableBloom( renderable );
// 禁用指定实体的曝光效果
selectiveBloomEffect.disableBloom( entity ); // 禁用实体中的所有渲染组件的曝光效果
1
2
3
4
5
2
3
4
5
🌏 toggleBloom 切换指定渲染组件或实体的曝光效果。
// 切换指定渲染组件的曝光效果
selectiveBloomEffect.toggleBloom( renderable );
// 切换指定实体的曝光效果
selectiveBloomEffect.toggleBloom( entity ); // 切换实体中的所有渲染组件的曝光效果
1
2
3
4
5
2
3
4
5
# SelectiveBloomEffectAlternative
SelectiveBloomEffectAlternative 是后处理渲染自定义的一个选择曝光后处理效果能够更好的处理半透明对象的曝光效果。
import { Mesh, MeshStandardMaterial, TorusGeometry } from 'three';
import { MeshRenderer } from '@tx3d/core';
import { PostprocessingRenderPipeline, SelectiveBloomEffectAlternative } from '@tx3d/postprocessing';
// 获取场景渲染器
const { sceneRenderer } = engine;
// 获取后处理渲染管线
const renderPipeline = sceneRenderer.renderPipeline as PostprocessingRenderPipeline;
// 创建选择曝光后处理效果
const selectiveBloomEffect = new SelectiveBloomEffectAlternative( {
intensity: 1.25,
radius: 0.35,
luminanceThreshold: 0.15,
luminanceSmoothing: 0.1
} );
// 添加到渲染管线中
engine.sceneRenderer.renderPipeline.addEffect( selectiveBloomEffect );
// 创建16个圆环并曝光
for ( let i = 0; i < 16; i++ ) {
const geometry = new TorusGeometry( 3.35, 0.05, 16, 100 );
const material = new MeshStandardMaterial( { color: '#000000', emissive: '#ffffff', toneMapped: false } );
const entity = engine.createEntity();
const mesh = entity.addComponent( MeshRenderer, { mesh: new Mesh( geometry, material ) } );
// 曝光指定渲染对象
selectiveBloomEffect.enableBloom( mesh );
}
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
34
35
36
37
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
34
35
36
37
# 属性
🌏 radius 模糊半径
🌏 luminanceThreshold 亮度阈值
🌏 luminanceSmoothing 亮度平滑度
# 接口
🌏 enableBloom 曝光渲染组件或实体。
// 曝光指定渲染组件
selectiveBloomEffect.enableBloom( renderable );
// 曝光指定实体
selectiveBloomEffect.enableBloom( entity ); // 曝光实体中的所有渲染组件
1
2
3
4
5
2
3
4
5
🌏 disableBloom 禁用指定渲染组件或实体的曝光效果。
// 禁用指定渲染组件的曝光效果
selectiveBloomEffect.disableBloom( renderable );
// 禁用指定实体的曝光效果
selectiveBloomEffect.disableBloom( entity ); // 禁用实体中的所有渲染组件的曝光效果
1
2
3
4
5
2
3
4
5
🌏 toggleBloom 切换指定渲染组件或实体的曝光效果。
// 切换指定渲染组件的曝光效果
selectiveBloomEffect.toggleBloom( renderable );
// 切换指定实体的曝光效果
selectiveBloomEffect.toggleBloom( entity ); // 切换实体中的所有渲染组件的曝光效果
1
2
3
4
5
2
3
4
5