如何通过WebGL实现复杂物体的精细描边效果？

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

前言：终于把手头的项目结束了，可以利用这段时间研究研究技术～希望成为一名3D开发者，仅使用现有引擎来开发项目，不过多少有一些浮于表面，多研究研究底层实现更有利于整体把控。

前言

终于把手头的事结束了，可以有时间来研究研究技术~作为一名3D开发人员，仅仅使用现有的引擎来开发项目不免有些浮于表面，多研究研究底层的实现更利于对3D开发整体的把控~于是我决定最近开始研究webgl一些特效的实现，希望能在秋招前对底层有更深入的理解。

在webgl中实现描边的效果有很多种方式，比如我写卡通风格着色器那篇文章讲到的（将视线投影到每个点的法线上，这个值越小越说明这个点靠近边缘），所以接下来介绍实现的另一种方式：法线延展法。

这种方法不用进行法线与视线之间的计算，而是将物体每个点的x、y、z坐标沿着该点的法线扩大一定的距离并且添加描边的颜色，然后在绘制原来的物体覆盖到上面，这样便实现了描边的效果。

这里将原物体覆盖到描边物体上面就有两种实现的方式：

1.先关闭深度检测，然后绘制描边物体，开启深度检测，绘制原物体。这样由于绘制描边物体时深度检测被关闭了，原物体就会覆盖在描边物体上绘制从而实现描边效果。