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维绘图的例子，现在假设给定了两个端点：

（-50，0）和（50，0），要绘制一条宽度为2的线条，那么总共是四个顶点，第一个顶点是从第一个端点 + 线宽造成的偏移量，线宽为2，所以偏移量的基数应该是2 / 2 = 1;

第二个顶点是从第一个端点 + 线宽造成的偏移量 (-1),同样线宽为2，所以偏移量的基数应该是2 /2 (-1) = -1;

依次类推，那么应该如何偏移呢？ 这个与线段的走向有关，示例中 线段的走向可以用第二个端点 - 第一个端点计算出来：

（50，0） - （-50，0） = （100，0） ，归一化之后就是（1，0），此为线段的方向向量，表示的线段的走向的是沿x轴正方向，对于第一顶点，偏移的方向应该是（1，0）逆时针旋转90度，即和线段走向垂直的方向（与线段垂直的方向有两个，此处基于右手法则，选择逆时针旋转90度的一个），旋转90度之后，向量编程了（0，-1）

从图形学里面的数学知识可以得知，向量（x,y）逆时针旋转90度变成（-y，x）；

对于第二个顶点，偏移的方向应该是（1，0）顺时针旋转90度，但是前面，我们已经把偏移的基数变成-1了，所以可以认为偏移的方向还是（1，0）逆时针旋转90度，如图：

基于线段方向计算顶点偏移方向
由此，可以得出第一个顶点的位置是：

（-50，0） - （0，-1）* 1 = （-50，-1），
第二个顶点的位置是：

（-50，0）-（0，-1） * 1 = （-50，1）
对于第三，第四个顶点的计算也是类似的。

多个端点的情况

上面讨论的是只有两个端点的情况，事实上，如果是多个端点，以上讨论的情况只适合多个端点中第一个端点和最后一个端点的情况，对于中间的端点，偏移的方向要综合考虑这个端点连接的两条线段的情况，同样举例说明：

假设三个端点的情况，三个端点 分别是 （-50，0），（0，0），（0，50），现在要计算第二个端点（0，0）对应的两个顶点（第三、第四个），如图：

此时要计算中间的端点的两个顶点位置，则需要考虑改端点连接的两天线段的方向：

计算的大致思路，通过该端点的和前一个端点相减 计算出第一条线段的方向：
（0，0） - （-50，0） = （50，0） = （1，0）（归一化）

在通过该该端点的下一个端点减去该端点计算出第二条线段的方向：
（0，50） - （0，0） = （0，50） = （0，1）（归一化）

然后两个方向向量相加，在旋转逆时针旋转90度，可以得到偏移的方向：
（1，0） + （0，1） = （1，1） = （0.707,0.707）（归一化）

旋转之后，偏移方向编程了（-0.707，0.707），

需要注意的是，此时的的偏移基数其实也是发生了变化的，拐角处的偏移量此时应该变成大了,即有了一个放大因子。 可以通过 1 / 偏移方向 点乘 第一条线段的方向 来获取这个放大因子，不过如果两条线段夹角很小，点乘的值也很小，放大因子很大，为了拐角处的尖角不显得是否大，我们一般限定放大因子不超过2. 因此公式可以变成：

1 / max(偏移方向 .  第一条线段的方向，0.5)

如何组织顶点数据

上面大量篇幅讲述了如何计算顶点坐标，事实上，前面文字所述的一切计算方法都是发生在顶点着色器中的，而且也只能在着色器中计算，因为最终显示到屏幕上的顶点与镜头相关，上文中只是简单的用了2维的情况模拟，如果在js端计算，将极大消耗性能。 （那你不是瞎扯吗，我们都还没搞清楚如何计算出要传递给顶点着色器的数据呢），其实不是瞎扯，因为只有搞清楚了在着色器中如何计算最终的顶点，才知道如何向顶点着色器中组织数据，

以上文中“多个端点的情况”的为例，我们可以总结出计算出一个顶点需要哪些数据：

端点坐标，偏移量，前一个端点坐标，后一个端点坐标

因此在着色器中需要定义四个attribute变量 position，offset，positionPrev，positionNext，分别用来接收端点坐标，偏移量，前一个端点坐标，后一个端点坐标。

对于前面两顶点，其端点没有前一个端点，此时前一个端点就取端点坐标，然后在着色器中判断 如果前一个端点点坐标 == 端点坐标，则表明是第一个端点；使用两个端点的情况计算。

低于后面两个顶点，其端点没有后一个端点，此时后一个端点就取端点坐标，然后在着色器中判断 如果后一个端点点坐标 == 端点坐标，则表明是最后一个端点；使用两个端点的情况计算。

对于中间的顶点，既存在端点坐标，也存在前一个端点的坐标，和后一个端点的坐标，就使用前面多个端点的情况计算。

还是以之前三个端点的例子为例，三个端点的（50，0，0），（0，0，0），（0，50，0），线宽为2（注意此时已经是三维坐标了，之前模拟的情况是用屏幕上的2维坐标来模拟顶点在着色器中通过透视变换变成了二维坐标的情况）

那么第一个顶点的四个变量的数据分别是：

端点坐标，      偏移量，  前一个端点坐标，后一个端点坐标

（50，0，0），2/2,       (50,0,0)                  (0,0,0)

第二个顶点的四个变量的数据分别是：

端点坐标，      偏移量，  前一个端点坐标，后一个端点坐标

（50，0，0），-2/2,       (50,0,0)                  (0,0,0)

第三个顶点的四个变量的数据分别是：

端点坐标，      偏移量，  前一个端点坐标，后一个端点坐标

（0，0，0），2/2,       (50,0,0)                  (0,50,0)

第四个顶点的四个变量的数据分别是：

端点坐标，      偏移量，  前一个端点坐标，后一个端点坐标

（0，0，0），-2/2,       (50,0,0)                  (0,50,0)

第五个顶点的四个变量的数据分别是：

端点坐标，      偏移量，  前一个端点坐标，后一个端点坐标

（0，50，0），2/2,       (0,0,0)                  (0,50,0)

第六个顶点的四个变量的数据分别是：

端点坐标，      偏移量，  前一个端点坐标，后一个端点坐标

（0，50，0），-2/2,       (0,0,0)                  (0,50,0)

到此为止，我们知道了如何组织绘制需要的顶点的数据。

下一篇将贴上相关代码说明。

如果你对WebGL 感兴趣，可以了解下我们用WebGL开发的3D机房项目：

无插件纯Web 3D机房，HTML5+WebGL倾力打造