WebGL 顶点数组顺序

Question

我刚刚阅读了这个 mozilla WebGL 教程并遇到了一个问题 https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context

我想知道为什么一个简单正方形的位置数组应该是

const positions = [
    -1.0,  1.0, // 1 - top left
     1.0,  1.0, // 2 - top right
    -1.0, -1.0, // 3 - bottom left
     1.0, -1.0, // 4 - bottom right
];

而不是

const positions = [
    -1.0,  1.0, // 1 - top left
     1.0,  1.0, // 2 - top right
     1.0, -1.0, // 4 - bottom right
    -1.0, -1.0, // 3 - bottom left
];

这对我来说更有意义。

在第一种情况（正确的情况）中，从一个顶点到另一个顶点绘制正方形的线似乎应该交叉，但显然不是这样。

Answer 1

他们在该示例中使用 TRIANGLE_STRIP 索引：

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.

Wikipedia - Triangle strip

WebGL 顶点数组顺序

WebGL vertices array order

webgl