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

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

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

Draws a series of triangles (three-sided polygons) using vertices v0, v1, v2, then v2, v1, v3 (note the order), then v2, v3, v4, and so on. The ordering is to ensure that the triangles are all drawn with the same orientation so that the strip can correctly form part of a surface.

如果想要使用三角形带分离三角形，则需要添加 "stop vertices" 以生成退化三角形。

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

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

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

webGL : draw two separate rect with one buffer

drawing

webgl