ELEMENT_ARRAY_BUFFER 可以用于在立方体的每个面上映射相同的纹理吗？

Question

所以我正在编写一些 WebGL，没有 THREE.JS。我正在尝试渲染一个立方体，将单个纹理映射到立方体的每个面。在我设置属性的代码中，我有类似的内容：

  var vertices = new Float32Array([
    // x,    y,    z                              u, v
     1.0,  1.0,  1.0, /* v0 right top front */    1.0, 1.0,
    -1.0,  1.0,  1.0, /* v1 left top front */     0.0, 1.0,
    -1.0, -1.0,  1.0, /* v2 left bottom front */  0.0, 0.0,
     1.0, -1.0,  1.0, /* v3 right bottom front */ 1.0, 0.0,
     // u's switch for back faces
     1.0, -1.0, -1.0, /* v4 right bottom back */  0.0, 0.0,
     1.0,  1.0, -1.0, /* v5 right top back */     0.0, 1.0,
    -1.0,  1.0, -1.0, /* v6 left top back */      1.0, 1.0,
    -1.0, -1.0, -1.0, /* v7 left bottom back */   1.0, 0.0
  ]);

  // the pairs of vertex triples
  // 3 vertices = 1 triangle
  // 2 triangles = 1 quad = 1 face
  var indices = new Uint8Array([
    0, 1, 2,  0, 2, 3, // front
    0, 3, 4,  0, 4, 5, // right
    //0, 5, 6,  0, 6, 1, // top
    1, 6, 7,  1, 7, 2, // left
    //7, 4, 3,  7, 3, 2, // bottom
    4, 7, 6,  4, 6, 5  // back
  ]);

我最终得到了一个立方体，其纹理反映了左右面，这很好。对于顶部和底部，由于两条注释掉的行，我没有面孔。当我评论它们时，面部没有像我预期的那样对纹理进行采样。果然，例如，如果您查看顶面的索引，以及它们将具有的 UV 坐标：

index | u   | v
  0   | 1.0 | 1.0
  1   | 0.0 | 1.0
  5   | 0.0 | 1.0
  6   | 1.0 | 1.0

所以我们可以看到索引 1 和 5（也就是 0 和 6）具有相同的 UV 坐标，所以它当然不会在四边形上看起来正确。

我一直在尝试在纸上画出来，但我无法在不弄乱另一张脸的坐标的情况下更改 UV。我想知道的是：是否可以使用 ELEMENT_ARRAY_BUFFER 将 UV 坐标映射到立方体上，或者我是否需要使用更多数据并使用 ARRAY_BUFFER 进行绘制？

== 编辑 ==

看起来像个骗子：OpenGL ES - texture map all faces of an 8 vertex cube?

Answer 1

讨厌回答我自己的问题，但根据提示 here，我能够通过使用 24 个顶点而不是 8 个顶点来使其工作。我可以使用 24 而不是 36，因为我在我的ELEMENT_ARRAY_BUFFER（仅使用一个 ARRAY_BUFFER 是我无法做到的）。

  var vertices = new Float32Array([
    // x,    y,    z,   u,   v
    // front face (z: +1)
     1.0,  1.0,  1.0, 1.0, 1.0, // top right
    -1.0,  1.0,  1.0, 0.0, 1.0, // top left
    -1.0, -1.0,  1.0, 0.0, 0.0, // bottom left
     1.0, -1.0,  1.0, 1.0, 0.0, // bottom right
    // right face (x: +1)
     1.0,  1.0, -1.0, 1.0, 1.0, // top right
     1.0,  1.0,  1.0, 0.0, 1.0, // top left
     1.0, -1.0,  1.0, 0.0, 0.0, // bottom left
     1.0, -1.0, -1.0, 1.0, 0.0, // bottom right
    // top face (y: +1)
     1.0,  1.0, -1.0, 1.0, 1.0, // top right
    -1.0,  1.0, -1.0, 0.0, 1.0, // top left
    -1.0,  1.0,  1.0, 0.0, 0.0, // bottom left
     1.0,  1.0,  1.0, 1.0, 0.0, // bottom right
    // left face (x: -1)
    -1.0,  1.0,  1.0, 1.0, 1.0, // top right
    -1.0,  1.0, -1.0, 0.0, 1.0, // top left
    -1.0, -1.0, -1.0, 0.0, 0.0, // bottom left
    -1.0, -1.0,  1.0, 1.0, 0.0, // bottom right
    // bottom face (y: -1)
     1.0, -1.0,  1.0, 1.0, 1.0, // top right
    -1.0, -1.0,  1.0, 0.0, 1.0, // top left
    -1.0, -1.0, -1.0, 0.0, 0.0, // bottom left
     1.0, -1.0, -1.0, 1.0, 0.0, // bottom right
    // back face (x: -1)
    -1.0,  1.0, -1.0, 1.0, 1.0, // top right
     1.0,  1.0, -1.0, 0.0, 1.0, // top left
     1.0, -1.0, -1.0, 0.0, 0.0, // bottom left
    -1.0, -1.0, -1.0, 1.0, 0.0  // bottom right
  ]);

  // the pairs of vertex triples
  // 3 vertices = 1 triangle
  // 2 triangles = 1 quad = 1 face
  var indices = new Uint8Array([
     0,  1,  2,   0,  2,  3,
     4,  5,  6,   4,  6,  7,
     8,  9, 10,   8, 10, 11,
    12, 13, 14,  12, 14, 15,
    16, 17, 18,  16, 18, 19,
    20, 21, 22,  20, 22, 23
  ]);

滚动上面的代码示例^

顶点的数量可以进一步减少，因为一些索引共享相同的 XYZ 和 UV 坐标，但如果我稍后将法线添加到我的交错缓冲区（或任何其他属性），我可能需要重复值。