WebGL性能优化：退化三角形

从性能的角度来看，gl.drawArrays()或gl.drawElements()函数的调用次数越少越好，例如，如果一个顶点数组包含200个三角形，则一次调用gl.drawArrays()或gl.drawElements()比100次调用绘图函数且每次绘制两个三角形的效率要高许多

如果使用独立三角形图形（即 gl.TRIANGLES）, 这很容易实现。但是，如果使用gl.TRIANGLE_STRIP图元，则当三角形带之间存在不连续性时，就不那么容易组合不同的三角形带。

gl.TRIANGLE_STRIP：（V0 V1 V2 、V2 V1 V3、V2 V3 V4、V4 V3 V5）

这种不连续性或两个三角形带间存在跳转的解决方法是插入额外的索引（如果使用gl.drawArrays()函数，则插入额外的顶点），这样就得到退化三角形，退化三角形是指三角形至少有两个索引（或顶点）是相同的，因此，存在面积为0的三角形，这样的三角形很容易被GPU检测并删除

在 gl.drawElements()和gl.drawArrays()方法中都可以使用退化三角形。但是在 gl.drawArrays0方法中使用退化三角形需要复制顶点数据。无论从内存或性能的角度来看，其成本都比在元素数组缓冲中复制索引要大许多。这是因为，顶点数据比元素索引要占用更多的内存。此外，复制顶点的想法很不好，这是因为在 GPU中，变换后的顶点缓存通常只会缓存顶点索引。这意味着，每次出现在三角形带中时，复制的顶点都需要经过顶点着色器的变换处理。

连接两个三角形带需要增加额外的索引，额外索引的数量取决于第一个三角形带所使用的索引数。这是因为，三角形的组绕顺序起决定作用。假设我们想使第一个和第二个三角形带都使用相同的组绕顺序，则需要考虑两种情况:

1. 如果第一个三角形带包含偶数个三角形，则为了连接第二个三角形带，需要增加两个额外的索引。
2. 如果第一个三角形带包含奇数个三角形，则为连接第二个三角形带，则为了保证组绕顺序不变而需要增加3个额外的索引。

情况一

 为了连接这两个三角形带并建立所需要的退化三角形，需要在这两个三角形带之间派加两个额外的索引。这两个索引就是上图的索引3和4。这里使用的规则是第一个三角形带的最后一个顶点和最后一个三角形带的第一个顶点重复。

首先是来自第一个三角形带的两个三角形，它们的索引分别为(0,1,2)和(2,1,3)。然后是4个退化三角形，它们将会被GPU丢弃。最后是来自后一个三角形带的两个三角形，它们的索引分别为(4,5,6)和(6,5,7)。

情况二

如下第一个三角形带由奇数个三角形组成的情况。在这个示例中，第一个三角形带由(V0,V1,V2)、(V2,V1,V3;)、(V2,V3,V4)这3个三角形组成，它们与元素数组缓冲中的元素索引(0,1,2,3,4)相对应。第二个三角形带由(V5,V6,V7,)、(V7,V6,V8)这两个三角形组成,它们与元素数组缓存中最后位置的元素索引(5,6,7,8)相对应。

方法一

 方法二

 

如果我们想保持在这种情况下的两个三角形带的组绕顺序不变，除了像前面的偶数情形那样添加两个索引外，还需要添加另外一个索引。总之，这意味着需要添加索引4、4、5或 4、5、5

 另，可以看出三角形带中三角形的对应索引。首先是第-个三角形带的3个三角形，对应的索引分别为(0,1,2)、(2,1,3)和(2,3,4)。然后是5个退化三角形，它们最终会被 GPU 丢弃。最后是后一个三角形带中的两个三角形，它们的索引分别为(5,6,7)和(7,6,8)。