Question

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

所以对于每个细胞，我都这样做：

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是单元格的坐标，＆＃34;颜色＆＃34;是一个指定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＆lt; - GL_UNSIGNED_BYTE的最大值。

所以对我而言，鉴于我的选择，这是一个明显的结果。我当然认为解决方案是更改为gl.UNSIGNED_SHORT并将我的缓冲区创建更改为：

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

然而，这会导致＆＃34; glDrawElements：尝试访问属性0＆＃34;中超出范围的顶点。

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

Answer 1

UNSIGNED_SHORT您正走在正确的轨道上。关于你得到的新错误的See this answer意味着：引用一个不存在的顶点的索引。

这是因为您的len已关闭。每个索引引用一个顶点，每个顶点由3个值组成。因此，索引0引用前3个值，索引1引用第二个3，等等。

更改

len = vertices.length;

到

len = vertices.length / 3;

应该修复它。

WebGL：glDrawElements超过顶点边界

1 个答案: