webGL：用一个缓冲区绘制两个单独的rect

Question

我的问题很简单，我使用2平方坐标建立一个数组：

var vertices = [  -64, -32, 0.0,
               64, -32, 0.0, 
               64,  32, 0.0, 
              -64, -32, 0.0, 
              -64, 32, 0.0, 
               64, 32, 0.0 ];

vertices.push( -64 + 200, -32, 0.0,
                64 + 200, -32, 0.0, 
                64 + 200, 32, 0.0, 
               -64 + 200, -32, 0.0, 
               -64 + 200, 32, 0.0, 
                64 + 200, 32, 0.0 );

但结果图如下：

预期结果应该是2个单独的矩形，它们之间有黑色。 而且我不了解这种行为。

Answer 1

使用三角形条时，顶点被隐式索引：

  

使用顶点v0，v1，v2，然后是v2，v1，v3（注意顺序），然​​后是v2，v3，v4等绘制一系列三角形（三边形多边形）。排序是为了确保三角形都以相同的方向绘制，以便条带可以正确地形成表面的一部分。

如果想要使用三角形条带有单独的三角形，则需要添加＆＃34;停止顶点＆＃34;生成一个退化的三角形。

Read this answer for an explanation(with images) of TRIANGLE_STRIP and TRIANGLE_FAN.

然而，如果您不打算明确地构建条带或风扇，则三角条（和风扇）可能非常麻烦。这个并查看您的顶点布局我假设您只想使用普通TRIANGLES渲染几何。