使用相同着色器更改不同形状的缓冲区在渲染时失败 - 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

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

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

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

您的代码应该看起来像这样：

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); 
}

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

Changing buffers of different shapes with same shader fails at rendering - WebGL

javascript

webgl