javascript - 使用相同着色器更改不同形状的缓冲区在渲染时失败 - WebGL

Question

我正在尝试使用相同的着色器渲染不同形状的对象。

如果我尝试仅使用一种形状的以下代码，则该代码有效。如果我尝试使用 2 个相同形状的以下代码，则代码有效。但是，如果我尝试使用相同的着色器使用 2 个不同的形状，则会收到以下错误:glDrawElements: attempt to access out of range vertices in attribute 0并且只显示了一个变形的物体。

对于每个上传的形状，我都会保存其顶点 ( positions ) 和索引 ( positions_indices )。之后我创建 vertex_buffer和index_buffer并将它们保存在model中目的。这是代码:

var model = new Model(positions,positions_indices);

Answer 1

您忘记在绘制元素之前绑定(bind)元素数组缓冲区:

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, models[i].index_buffer);

此外，在定义通用顶点属性数据数组之前，您必须绑定(bind)数组缓冲区。

你的代码应该看起来像这样:

for(var i = 0;i<models.length;i++) {
    //creating and setting model matrix and setting color uniform property to shader

   gl.bindBuffer(gl.ARRAY_BUFFER, models[i].vertex_buffer);
   gl.vertexAttribPointer(position, 3, gl.FLOAT, false,0,0);
   gl.enableVertexAttribArray(position);

   gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, models[i].index_buffer);

   gl.drawElements(gl.TRIANGLES, models[i].positions_indices.length, gl.UNSIGNED_INT, 0); 
}