Javascript WebGL:GLD元素超出顶点边界

我在WebGL中构建了一个二维网格。它有5列和24行。我的网格中的每个“单元”有四个顶点和六个索引：

因此，对于每个单元，我会：

var addCell = function(x, y, w, h, colorArray) {
    len = vertices.length;

    vertices.push(x, y, zIndex);
    vertices.push(x, y - h, zIndex);
    vertices.push(x + w, y - h, zIndex);
    vertices.push(x + w, y, zIndex);

    Array.prototype.push.apply(colors, colorArray);
    Array.prototype.push.apply(colors, colorArray);
    Array.prototype.push.apply(colors, colorArray);
    Array.prototype.push.apply(colors, colorArray);

    indices.push(len, len + 1, len + 2);
    indices.push(len, len + 2, len + 3);
}

其中x和y是单元格的坐标，“颜色”是指定rgba的四元素数组。因此，我从左到右创建第一行，然后创建第二行，依此类推。创建索引缓冲区时，我执行以下操作：

indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);

当我画我的场景时，我说：

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0);

当我这样做时，它只渲染前12 3/4行（共24行）。这是因为每个单元有4个顶点（相邻单元不共享顶点）。因此，前12+行包含：

---

12.75*5*4=255With

UNSIGNED_SHORT

您走在正确的轨道上。你得到的新错误意味着什么：有一个索引引用一个不存在的顶点

这是因为您的

len

已关闭。每个索引引用一个顶点，每个顶点由3个值组成。所以索引0引用前3个值，索引1引用第二个3，以此类推

改变

len = vertices.length;

到

---

应该会解决的。

用

UNSIGNED\u SHORT

你走对了。你得到的新错误意味着什么：有一个索引引用一个不存在的顶点

这是因为您的

len

已关闭。每个索引引用一个顶点，每个顶点由3个值组成。所以索引0引用前3个值，索引1引用第二个3，以此类推

改变

len = vertices.length;

到

---

应该会修好的。

啊，当然。我实际上需要除以3（每个顶点由3个点组成）。非常感谢你！啊，当然。我实际上需要除以3（每个顶点由3个点组成）。非常感谢你！

len = vertices.length / 3;