WebGL：超过顶点边界的glDrawElements

我在WebGL中构建了一个2-D网格。它有5列，24行。在我的网格中的每个“细胞”是四个顶点，和六个指标：WebGL：超过顶点边界的glDrawElements

因此，对于每一个单元，我做的：

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”。

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

来源

2016-02-20 ricklane

随着UNSIGNED_SHORT你是在正确的轨道上。 See this answer你得到的新错误的含义是：有一个索引引用一个不存在的顶点。

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

更改

len = vertices.length;

到

len = vertices.length/3;

应该修复它。

来源

2016-02-20 14:31:42 Kenney

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

对不起，修好了 - 不客气！ – Kenney

WebGL：超过顶点边界的glDrawElements

回答

相关问题