引言
哈喽大家好，我是亿元程序员。
前两天美术妹子丢给我一个模型:
问我：
能不能给这个飞机加上一圈白色的描边？
我心想：不就是描边吗，小意思。
然后 我就又打开了Cocos Creator ......(为什么是又？)
然后就懵了。
Cocos 的内置standard材质里，翻遍了所有勾选项 ，愣是没找到一个"OutlineColor"。
没办法，自己动手。
好在 最后搞出来了两种方案 ，一种在编辑器点点点就行，一种自定义 effect ，效果都很能打。
言归正传 ，今天就把这两条路完整走一遍，看看一个 3D 模型描边到底是怎么做出来的。
本文源工程在文末获取，小伙伴们自行前往。
先看效果
效果就是这样：
- 模型轮廓有一圈干净的描边
- 颜色、粗细都可以在编辑器里直接调
话不多说，直接开干。
描边的本质：背面 Shell 法
在动手之前 ，先讲清楚一件事: 3D描边到底是怎么实现的？
最常见、也是这篇文章用的方案，叫"背面外扩 Shell 法"，俗称双壳法。
思路特别朴素：
把模型沿法线方向往外推一点点，整体涂成纯白，然后只画"背面"。
为什么只画背面？因为模型的正面被原模型挡住了 ，看不见；而沿轮廓边缘的位置，外扩出来的"壳"会从原模型边上露出来一圈。
这一圈就是描边。
听上去有点绕 ，但本质就一句话：做个稍大一号的白色副本，套在原模型外面，只画背面。
接下来的两种方法，区别只在于"放大"这件事在哪一步完成。
方法一：拖两个模型叠一起（最朴素方案）
这是连 shader 都不用写的方案。
思路直接到离谱：
首先，我们先把美术妹子给的模型先拖到场景里面去：
然后，再拖一个模型到这个模型的根节点下面：
效果如下，两台一样的飞机叠在一起：
接着 ，新建一个材质球，将Shader设置成内置的builtin-unlit，描边颜色为白色，将Cull Mode设置成FRONT。
然后 ，把材质球替换掉第二架飞机的材质球，并且适当地将第二架飞机放大（下图为2倍）:
就能够看到白色的飞机了：
最终效果如下：
从上面的内容看来，这个方法有比较明显的有点和缺点。
优点：
- 0 行 shader 代码，纯靠预制体嵌套 + 材质设置
- 门槛极低，美术自己都能改
- 粗细颜色都在 Inspector 里调，可视化
缺点（也得说清楚）：
- 一个物体要渲染两次 ，DrawCall 翻倍
- 描边粗细随距离变化（远处变细，近处变粗）
- 模型中心不在原点时，等比 scale 会让外层偏移，描边粗细不均
所以 这种方案适合：美术快速验证效果 、项目里描边物体不多 、懒得碰 shader。
但如果你要其他更好的描边方法，看下面这种方案。
方法二：自定义 Shader
一个 Pass 搞定（推荐）
还是同样的思路 ------背面外扩 + 只画背面，但"放大"这一步搬到 GPU 顶点着色器里做。
好处显而易见：
- 模型只有一份，预制体干干净净
- 描边粗细是世界空间常量 ，不随物体
scale变化 - 想做特殊效果（距离衰减、屏幕空间等宽）只要改顶点着色器
唯一的代价 是，不要求你会创造effect，但你得会改effect。
1.找模版
首先 在资源管理器上搜索standard找到builtin-standard模板，复制一份到asses目录下，并且改个你喜欢的名字。
2. 新增pass
新增一个pass ，指定顶点着色器和片元着色器，关键也是设置rasterizerState的cullMode为front，同时添加两个变量(颜色和描边粗细)。
2. 描边顶点着色器
核心就一行：
把顶点沿世界法线方向，推出去 outlineWidth 这么远。 完事。
3. 描边片元着色器（一行）
真的就一行：
没有光照、没有贴图、没有花里胡哨，直接吐出描边颜色。
**因为只有"背面外扩"的像素能进到这里来，**所以最终只看到一圈描边。
4.应用
写完之后 就可以直接用了，还是新建一个材质，设置Effect,描边颜色和描边粗细,附上模型贴图:
5.效果演示
把材质球替换掉模型的材质球即可看到我们片头的最终效果:
结语
那么问题来了 ：如果要做距离自适应描边（远处粗细看起来不变）或者屏幕空间等宽描边 的话，Cocos应该怎么卸载? 欢迎小伙伴们评论区聊聊。
本文完整工程源码 可通过点赞后私信 发送"模型描边"获取。
更多实战完整源码包含编辑器 可以通过阅读原文了解更多，感谢小伙伴们对创作的支持。
我是"亿元程序员"，一位有着 8 年游戏行业经验的主程。 在游戏开发中，希望能给到您帮助，也希望通过您能帮助到大家。
实不相瞒，想要个赞 和在看 ！请把该文章分享给你觉得有需要的其他小伙伴，谢谢！
推荐文章：