# 描边2
描边2可以支持绘制透明物体的轮廓线，并且支持多套不同参数。
# 初始化
使用Outline2类添加描边效果。
import {
Postprocessing,
Outline2,
KernelSize
} from '@tx3d/postprocessing';
// 创建后处理类
const postprocessing = new Postprocessing( engine );
// 添加后处理效果
const effect = postprocessing.addEffect( Outline2,
{
resolutionY: 480, // 分辨率
edgeStrength: 24, // 强度
pulseSpeed: 0.4, // 动画间隔
visibleEdgeColor: 0x0091ff, // 描边的颜色
blur: true, // 是否模糊
kernelSize: KernelSize.SMALL, // 模糊强度 VERY_SMALL SMALL MEDIUM LARGE VERY_LARGE HUGE
xRay: true, // 是否显示被遮挡描边
}
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
提示
描边初始化参数，详见OutlineParams。
# 接口
🌏 addOutline 根据指定参数增加一套新的描边效果
// 增加一套描边效果
effect.addOutline(
{
edgeStrength: 3, // 强度
pulseSpeed: 0.4, // 动画间隔
visibleEdgeColor: 0x00ffee, // 可见的颜色
edgeDetectionAlpha: 0.2 // 边缘检测透明度阈值
}
);
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
提示
每套描边效果 都有对应的索引 第一套对应0 第二套对应1 以此类推。
在后面的所有方法中 都需要传入对应的索引 来控制不同的描边效果。
🌏 removeOutline 根据索引删除不同的描边效果
outlineEffect.removeOutline([0, 1]);
1
🌏 setOutline 设置要描边的对象
effect.setOutline(component, true, 0);
1
🌏 setEdgeStrength 设置描边强度
effect.setEdgeStrength(3, 0);
1
🌏 setVisibleEdgeColor 设置描边颜色
effect.setVisibleEdgeColor(0x333333, 0);
1
🌏 getVisibleEdgeColor 获取描边颜色
effect.getVisibleEdgeColor(0);
1
🌏 setPulseSpeed 设置动画速度
effect.setPulseSpeed(0.4, 0);
1
🌏 setBlurSize 设置模糊大小
effect.setBlurSize(KernelSize.SMALL, 0);
1
🌏 setEdgeDetectionAlpha 设置检测透明度阈值
effect.setEdgeDetectionAlpha( 0, 0 );
1