上一篇文章简单介绍了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的线条,那么总共是四个顶点,第一个顶点是从第一个端