WebGL绘制带箭头贴图的线

示例

在讲述本文内容之前，我希望读者先具备以下知识点：

1. 了解WebGL的基本知识，懂得调用自定义的Shader程序；
2. 基本的数学基础和空间几何知识；
3. 明白GPU的渲染管线流程；

因为，本文内容主要讲述绘制的核心思路和注意事项，所以对于基本知识只能简单描述，请谅解；

前言

首先，先附上一篇至今我看到思路十分正确，图文并茂（图片真的很好看）的讲述WebGL绘制有宽度的线和箭头贴图的文章：WebGL绘制有宽度的线  https://www.cnblogs.com/dojo-lzz/p/9219290.html

链接博客的作者基本讲述本文想要讲的主要思路，但是他并没有过多的讲述其他细节。我就在上述的博文中补充一些关键的细节。

在绘制箭头线之前，我们必须掌握如何绘制有宽度的线条，因为，箭头图片的贴图坐标与此有关。

绘制有宽度的线

WebGL提供绘制线条的接口中是提供了线条宽度的属性，但是在windows系统中不管设置线宽的属性为多少，都是一条只有一像素宽度的线。因此，我们需要利用绘制三角形的方式去拟合带宽度的线。

从上述两张图片可以简单的理解，如何从一条线去构造宽带；假设我们有以下线的顶点数据 Line = [p0, p1, p2 ...]，那么我们需要将顶点沿着直线方向的法线方向（垂直方向上）的正方向和反方向各平移 lineWidth / 2 的距离，这就刚好实现宽度为lineWidth的线条。原理十分的简单。

而我们的顶点数据的在每个顶点处只有一个点，若需要在法线方向上的正反方向上都平移，则我们需要提前把一个顶点复制两份，同时做上标识是正方向还是负方向（因为需要区分三角形的顶点索引顺序），然后传给Shader程序。一般上述的步骤需要在Js里面的准备GLSL顶点数据时