javascript - WebGL纯色

https://www.dropbox.com/s/4zkhtdv4yaqhpxy/Screenshot%20from%202015-01-28%2010%3A42%3A02%201.png?dl=0
有人可以告诉我，我做错了什么吗？我希望立方体的每个面都具有一种纯色。创建多维数据集的代码在RunCube.coffee文件中，并且顶点和颜色在Cube.coffee文件中定义。我认为问题是我不知道如何使用颜色索引。
这是github https://github.com/trimpirim/shiny-soice上的存储库

更新：
我拥有所有数据的多维数据集。

@vertices: [
  [ 6.89954888016507530,  0.39691390817415106, -4.02972512706645780],
  [-0.78006682662096161, -3.78853119791598660, -7.00275139558893490],
  [-5.79336942493284560,  3.47790796230961650, -4.28264251507835430],
  [ 1.88624628185319150,  7.66335306839975420, -1.30961624655587690],
  [ 0.78006682662096205,  3.78853119791598920,  7.00275139558893490],
  [ 5.79336942493284290, -3.47790796230961740,  4.28264251507835780],
  [-1.88624628185319150, -7.66335306839975150,  1.30961624655588270],
  [-6.89954888016507440, -0.39691390817415328,  4.02972512706646220]
];

@faces: [
  [0, 1, 2], [0, 2, 3],
  [0, 3, 4], [0, 4, 5],
  [0, 5, 6], [0, 6, 1]
  [2, 1, 6], [2, 6, 7],
  [2, 7, 4], [2, 4, 3],
  [4, 7, 6], [4, 6, 5]
];

@colors: [
  [1.0, 0.0, 0.0, 1.0],
  [1.0, 1.0, 0.0, 1.0],
  [0.0, 1.0, 0.0, 1.0],
  [1.0, 0.5, 0.5, 1.0],
  [1.0, 0.0, 1.0, 1.0],
  [0.0, 0.0, 1.0, 1.0],
]

有人可以告诉我，正确的颜色数据应如何显示？

最佳答案

编辑：

没有单独的颜色索引。顶点位置和颜色（或您可能想到的任何其他属性）的索引相同。

要获得具有6种纯色的多维数据集，您将必须重复阵列的某些部分。

这是一种原型，顶点的外观如下：

vertices: [
    {
        position: [x,y,z],
        color: [r, g, b, a]
    },
    {
        position: [x,y,z],
        color: [r, g, b, a]
    },
    ...
];

具有position: [0,0,0], color [1,0,0,1]的顶点与具有position: [0,0,0], color [0,1,0,1]的顶点不同。您希望立方体的一个角成为3个具有不同颜色的面的一部分。因此，在一个角中必须有3个顶点，它们的位置相同，但颜色不同。不幸的是，在这种情况下，职位无法共享。

因此，您的定义应如下所示：

var vertex_positions = [
    // see that front face and back face has 8 unique positions
    // front face
    [0, 0, 0],
    [1, 0, 0],
    [1, 1, 0],
    [0, 1, 0],
    // back face
    [0, 0, 1],
    [1, 0, 1],
    [1, 1, 1],
    [0, 1, 1],
    // see that bottom face and top face has 8 unique positions too,
    // but they repeated with different order from front and back
    // bottom face
    [0, 0, 0],
    [1, 0, 0],
    [1, 0, 1],
    [0, 0, 1],
    // top face
    [0, 1, 0],
    [1, 1, 0],
    [1, 1, 1],
    [0, 1, 1],
    // left and right face have 8 unique positions too, but again
    // repeated from front, back / bottom, top
    // left face
    [0, 0, 0],
    [0, 1, 0],
    [0, 1, 1],
    [0, 0, 1],
    // right face
    [1, 0, 0],
    [1, 1, 0],
    [1, 1, 1],
    [1, 0, 1]
];

颜色，与位置相同的元素数量：

var vertex_colors = [
    // front face
    [1.0, 0.0, 0.0, 1.0],
    [1.0, 0.0, 0.0, 1.0],
    [1.0, 0.0, 0.0, 1.0],
    [1.0, 0.0, 0.0, 1.0],
    // back face
    [1.0, 1.0, 0.0, 1.0],
    [1.0, 1.0, 0.0, 1.0],
    [1.0, 1.0, 0.0, 1.0],
    [1.0, 1.0, 0.0, 1.0],
    // bottom face
    [0.0, 1.0, 0.0, 1.0],
    [0.0, 1.0, 0.0, 1.0],
    [0.0, 1.0, 0.0, 1.0],
    [0.0, 1.0, 0.0, 1.0],
    // top face
    [1.0, 0.5, 0.5, 1.0],
    [1.0, 0.5, 0.5, 1.0],
    [1.0, 0.5, 0.5, 1.0],
    [1.0, 0.5, 0.5, 1.0],
    // left face
    [1.0, 0.0, 1.0, 1.0],
    [1.0, 0.0, 1.0, 1.0],
    [1.0, 0.0, 1.0, 1.0],
    [1.0, 0.0, 1.0, 1.0],
    // right face
    [0.0, 0.0, 1.0, 1.0],
    [0.0, 0.0, 1.0, 1.0],
    [0.0, 0.0, 1.0, 1.0],
    [0.0, 0.0, 1.0, 1.0],
];

现在索引：

var triangles = [
    // front face
    [0, 1, 2],
    [0, 2, 3],
    // back face
    [4, 5, 6],
    [4, 6, 7],
    // bottom face
    [8, 9, 10],
    [8, 10, 11],
    // top face
    [12, 13, 14],
    [12, 14, 15],
    // left face
    [16, 17, 18],
    [16, 18, 19],
    // right face
    [20, 21, 22],
    [20, 22, 23]
];

立方体由12个三角形组成。对于纯色面，我们需要2个三角形的4个唯一顶点，因此我们需要24个不同的顶点定义。

正如gman所说，这是最传统的方式。还有其他方法可以达到相同的效果，但是它们的用例很少。

PS：对不起，我的索引可能不正确