WebGL 绘制Line的bug(二)

上一篇文章简单介绍了WebGL绘制Line的bug，不少朋友给我发了私信，看来这个问题大家都遇上过哈。今天这篇文章会讲述解决这个问题的work around。

基本思路

上一篇文章结尾简单提了下解决的思路，就是通过三角形来模拟线条。

以两个端点组成的线段为例，绘制line的时候只用指定两个端点，如果通过三角形来模拟一条线段，则至少需要两个三角形，如下图：

这是两个三角形模拟的线段。

因此要绘制一条线段，则需要六个顶点，两个三角形；当时从上图中，可以看出有些顶点是共享，实际上只需要四个顶点，然后通过索引的方式绘制两个三角形，相信熟悉WebGL的同学都理解这种通过索引来绘制的方式，此处不详细说明。

如果要绘制两条相连的线段呢，则需要增加两个顶点，也就是6个顶点，绘制四个三角形，依次类推，绘制三条相连的线段需要8个顶点，绘制6个三角形；由此可以得出一个结论，绘制有n个端点的Line，需要：2 n 个顶点， (n-1) 2个三角形。

对于一条线段而言，控制的参数实际上只有两个端点的坐标和线的宽度。 

从上面的分析，我们知道了给定一系列点（n个）和线的宽度，绘制一条线段需要的顶点数是n * 2. 

如何计算顶点

两个端点的情况

当时 n个顶点数据应该如何计算得到呢？ 先举个简单的2维绘图的例子，现在假设给定了两个端点：