繪圖與webGL的元素

Question

我有面指數（指向點）和點，並希望繪製一個循環中的三角形。 Web控制檯提供了我這個錯誤：

WebGL: drawElements: bound element array buffer is too small for given count and offset 

這是我的代碼：

for(var i=1;i<38000;i++){ 
var vtx = new Float32Array(
[points[faces[i][1]][1],points[faces[i][1]][2],points[faces[i][1]][3], 
    points[faces[i][2]][1],points[faces[i][2]][2],points[faces[i][2]][3], 
    points[faces[i][3]][1],points[faces[i][3]][2],points[faces[i][3]][3] 
] 
); 
var idx = new Uint16Array([0, 1]); 
initBuffers(vtx, idx); 
gl.lineWidth(1.0); 
gl.uniform4f(shaderProgram.colorUniform, 0, 0, 0, 1); 
gl.drawElements(gl.LINES, 3, gl.UNSIGNED_SHORT, 0); 
unbindBuffers(); 
} 
} 

例程不畫任何東西。我該如何解決這個問題？

Answer 1

您的drawElements調用需要第二個參數（count）的不同值。

首先：它表示您正在繪製的頂點數目（不是基元！）。所以(gl.TRIANGLES, 3...)會畫一個三角形。 (gl.LINES, 2...)會畫一條線，(gl.LINES, 4...)會畫2條，但是(gl.LINES, 3...)會畫一條線，一條線和一條半？確保你的計數符合原始類型。其次，假設您正在將idx正確上傳到緩衝區並對其進行綁定，則只有在您的繪製調用表明您正在繪製三個時才提供兩個索引。這可能是你錯誤的原因。將計數更改爲2，並且您的代碼應該可以工作（假設您已正確設置了其他所有設置）。至少你會避免你得到的錯誤信息。