如何用three.js结合卷积算法实现物体边缘描边的长尾？

本文共计1189个文字，预计阅读时间需要5分钟。

法线延拓法+网上使用法线延拓法实现物体边缘效果的文章较多，此处不再描述。但这种方法存在一个缺点：当两个面的法线夹角较大时，两个面的边缘无法完美连接。如图所示。

法线延展法

网上使用法线延展法实现物体描边效果的文章比较多，这里不再描述。

但是这种方法有个缺点：当两个面的法线夹角差别较大时，两个面的描边无法完美连接。如下图所示：

卷积法

这里使用另一种方法卷积法实现物体描边效果，一般机器学习使用该方法比较多。先看效果图：

使用three.js具体的实现方法如下：

1. 创建着色器材质，隐藏不需要描边的物体进行渲染，将需要描边的位置渲染成白色，其他位置渲染成黑色。
2. 利用片源着色器计算卷积，白色是物体内部，黑色是物体外部，灰色是边框。
3. 设置材质透明、不融合，将边框叠加到原图上，可以使用FXAA抗锯齿。

这三步就可以实现了，很简单吧。下面我们将详细介绍实现方法，不想看的可以直接去看完整实现代码：

完整代码：gitee.com/tengge1/ShadowEditor/blob/master/ShadowEditor.Web/src/helper/SelectHelper.js

详细的实现过程：

1. 使用three.js正常绘制场景，得到下图，这里不介绍了。

2. 创建着色器材质，隐藏所有不需要描边的物体。将需要描边的物体绘制成白色，其他地方绘制成黑色。