具有多个属性的 drawElements

Question

我正在尝试使用 drawElements 渲染多个属性缓冲区：

var verteces = [1,1, 0,-1, -1,0];
var vBuffer = gl.createBuffer(gl.ARRAY_BUFFER);
gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verteces), gl.DYNAMIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);


var colors = [1,0,0,1, 0,1,0,1, 0,0,1,1];
var cBuffer = gl.createBuffer(gl.ARRAY_BUFFER);
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.DYNAMIC_DRAW);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 4, gl.FLOAT, false, 0, 0);


var indices = [0,3,2];
var elBuffer = gl.createBuffer(gl.ELEMENT_ARRAY_BUFFER);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);

如果我运行使用 gl.drawArrays(gl.TRIANGLES, 0, 3); 这段代码，它会呈现一个带有 rbg 填充的漂亮三角形。但是如果我调用 gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_BYTE, 0); 我会得到

[.CommandBufferContext.Offscreen-MainThread-0AB44528]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

想不通这里出了什么问题。 drawElements 不设置颜色缓冲区工作正常。

感谢任何帮助。

Answer 1

您提供了 3 个顶点的顶点数据，因此唯一有效的顶点索引是 0,1,2。然而，您尝试使用 0,3,2 的索引数组进行渲染，这将尝试访问第四个顶点，并会导致对顶点缓冲区的越界访问。

具有多个属性的 drawElements

drawElements with multiple attributes

javascript

webgl