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

YOu提供3個頂點的頂點數據，所以唯一有效的頂點索引是0,1,2。但是，您嘗試使用0,3,2的索引數組進行渲染，該數組將嘗試訪問第四個頂點，並導致對頂點緩衝區的超出邊界的訪問。