WebGL：glDrawElements超出顶点范围

Question

我已经在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 = 255 <-GL_UNSIGNED_BYTE的最大值。

所以对我来说，鉴于我的类型选择，这是显而易见的结果。 我自然认为解决方案是更改为gl.UNSIGNED_SHORT并将缓冲区的创建也更改为：

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

但是，这会导致“ glDrawElements：尝试访问属性0中超出范围的顶点”。

我盯着索引/构建顶点的代码已有一段时间，试图查看是否要添加一个指向不存在的顶点元素的索引。 我认为该代码没有任何问题，这使我认为它与我选择的类型有关 。 任何方向将不胜感激。

Answer 1

使用UNSIGNED_SHORT您将走上正确的道路。 请参见以下答案 ，以获取新错误的含义：存在一个索引，该索引引用的顶点不存在。

这是因为您的len关闭了。 每个索引都引用一个顶点，每个顶点包含3个值。 因此，索引0引用前3个值，索引1引用后3个值，依此类推。

改变中

len = vertices.length;

至

len = vertices.length / 3;

应该修复它。