我正在尝试使用相同的着色器渲染不同形状的对象。
如果我尝试仅使用一种形状的以下代码,则该代码有效。如果我尝试使用 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);
最佳答案
您忘记在绘制元素之前绑定(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);
}
关于javascript - 使用相同着色器更改不同形状的缓冲区在渲染时失败 - WebGL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47367592/