具有多个属性的drawElements

时间:2016-05-29 19:58:34

标签: javascript webgl

我正在尝试使用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 fill渲染一个漂亮的三角形。但是如果我打电话给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可以正常工作。

感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

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

相关问题