# 描边效果
通过描边效果可以为指定对象的绘制轮廓线。当前后处理渲染管线提供 OutlineEffect、OutlineEffectAdvanced、OutlineEffectAlternative 三种类型的描边效果。
# OutlineEffect
OutlineEffect 为 postprocessing 的内置效果。
import { Mesh, MeshStandardMaterial, TorusGeometry } from 'three';
import { MeshRenderer } from '@tx3d/core';
import { addToSelection, OutlineEffect, PostprocessingRenderPipeline } from '@tx3d/postprocessing';
// 获取场景渲染器
const { sceneRenderer } = engine;
// 获取后处理渲染管线
const renderPipeline = sceneRenderer.renderPipeline as PostprocessingRenderPipeline;
// 创建描边后处理效果
const outlineEffect = new OutlineEffect( null, null, {
resolutionY: 480, // 分辨率
edgeStrength: 3, // 强度
pulseSpeed: 0.0, // 动画间隔
visibleEdgeColor: 0x004cff, // 描边的颜色
blur: true, // 是否模糊
xRay: true, // 是否显示被遮挡描边
} );
// 添加到渲染管线中
engine.sceneRenderer.renderPipeline.addEffect( outlineEffect );
// 获取描边后处理效果的选择器
const { selection } = outlineEffect;
// 创建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
41
42
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
41
42
# OutlineEffectAdvanced
OutlineEffectAdvanced 是基于 OutlineEffect 封装的。
import { Mesh, MeshStandardMaterial, TorusGeometry } from 'three';
import { MeshRenderer } from '@tx3d/core';
import { addToSelection, OutlineEffectAdvanced, PostprocessingRenderPipeline } from '@tx3d/postprocessing';
// 获取场景渲染器
const { sceneRenderer } = engine;
// 获取后处理渲染管线
const renderPipeline = sceneRenderer.renderPipeline as PostprocessingRenderPipeline;
// 创建描边后处理效果
const outlineEffect = new OutlineEffectAdvanced( {
resolutionY: 480, // 分辨率
edgeStrength: 3, // 强度
pulseSpeed: 0.0, // 动画间隔
visibleEdgeColor: 0x004cff, // 描边的颜色
blur: true, // 是否模糊
xRay: true, // 是否显示被遮挡描边
} );
// 添加到渲染管线中
engine.sceneRenderer.renderPipeline.addEffect( outlineEffect );
// 创建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 ) } );
// 描边指定对象
outlineEffect.enableOutline( 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
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
# 接口
🌏 enableOutline 描边指定渲染组件或实体。
// 描边指定渲染组件
outlineEffect.enableOutline( renderable );
// 描边指定实体
outlineEffect.enableOutline( entity ); // 描边实体中的所有渲染组件
1
2
3
4
5
2
3
4
5
🌏 disableOutline 禁用指定渲染组件或实体的描边效果。
// 禁用指定渲染组件的描边效果
outlineEffect.disableOutline( renderable );
// 禁用指定实体的描边效果
outlineEffect.disableOutline( entity ); // 禁用实体中的所有渲染组件的描边效果
1
2
3
4
5
2
3
4
5
🌏 toggleOutline 切换指定渲染组件或实体的描边效果。
// 切换指定渲染组件的描边效果
outlineEffect.toggleOutline( renderable );
// 切换指定实体的描边效果
outlineEffect.toggleOutline( entity ); // 切换实体中的所有渲染组件的描边效果
1
2
3
4
5
2
3
4
5
# OutlineEffectAlternative
OutlineEffectAlternative 是后处理渲染管线自定义的一个描边后处理效果能够更好的处理半透明对象的描边效果。
import { Mesh, MeshStandardMaterial, TorusGeometry } from 'three';
import { MeshRenderer } from '@tx3d/core';
import { addToSelection, OutlineEffectAlternative, PostprocessingRenderPipeline } from '@tx3d/postprocessing';
// 获取场景渲染器
const { sceneRenderer } = engine;
// 获取后处理渲染管线
const renderPipeline = sceneRenderer.renderPipeline as PostprocessingRenderPipeline;
// 创建描边后处理效果
const outlineEffect = new OutlineEffectAlternative( {
resolutionY: 480, // 分辨率
edgeStrength: 3, // 强度
pulseSpeed: 0.0, // 动画间隔
visibleEdgeColor: 0x004cff, // 描边的颜色
blur: true, // 是否模糊
xRay: true, // 是否显示被遮挡描边
} );
// 添加到渲染管线中
engine.sceneRenderer.renderPipeline.addEffect( outlineEffect );
// 创建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 ) } );
// 描边指定对象
outlineEffect.enableOutline( 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
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
# 属性
🌏 edgeStrength 描边强度
🌏 visibleEdgeColor 描边可见部分颜色
🌏 hiddenEdgeColor 描边被遮挡部分颜色
🌏 xRay 描边是否开启X-Ray模式
🌏 multisampling 描边多重采样次数
# 接口
🌏 enableOutline 描边指定渲染组件或实体。
// 描边指定渲染组件
outlineEffect.enableOutline( renderable );
// 描边指定实体
outlineEffect.enableOutline( entity ); // 描边实体中的所有渲染组件
1
2
3
4
5
2
3
4
5
🌏 disableOutline 禁用指定渲染组件或实体的描边效果。
// 禁用指定渲染组件的描边效果
outlineEffect.disableOutline( renderable );
// 禁用指定实体的描边效果
outlineEffect.disableOutline( entity ); // 禁用实体中的所有渲染组件的描边效果
1
2
3
4
5
2
3
4
5
🌏 toggleOutline 切换指定渲染组件或实体的描边效果。
// 切换指定渲染组件的描边效果
outlineEffect.toggleOutline( renderable );
// 切换指定实体的描边效果
outlineEffect.toggleOutline( entity ); // 切换实体中的所有渲染组件的描边效果
1
2
3
4
5
2
3
4
5