WebGL顶点阵列顺序

Question

我刚刚阅读了此Mozilla WebGL教程，并提出了一个问题https://developer.mozilla.org/en-us/docs/web/api/webgl_api/tutorial/tutorial/adding_2d_content_to_a_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索引：

使用顶点V0绘制一系列三角形（三边多边形）， v1，v2，然后是v2，v1，v3（请注意订单），然后是v2，v3，v4等。 订购是为了确保三角形都用 相同的方向，以便条带正确构成一个的一部分 表面。

wikipedia-三角条