VBO和WebGL的

Question

在WebGL的EBO狀態使用，你會有點接受這個例程（由MDN作爲暗示）索引緩存畫點什麼：

設置：

bindBuffer(ARRAY_BUFFER); 
bufferData(pass vertex data); 
bindBuffer(ELEMENT_ARRAY_BUFFER); 
bufferData(pass index data); 

圖紙：

bindBuffer(ELEMENT_ARRAY_BUFFER); 
glDrawElements(...); 

沒有bindBuffer(ARRAY_BUFFER)調用。

假設我有多個具有頂點數據的VBO。 EBO如何知道從哪個緩衝區獲取數據？

在標準OpenGL中，我將它封裝在VAO中。但WebGL中缺乏這些讓我困惑。

Answer 1

沒有VAOs您的典型路徑是這樣的

設置：

create programs and lookup attribute and uniform locations 
create buffers 
create texture 

圖紙：

for each model 
    for each attribute 
    bindBuffer(ARRAY_BUFFER, model's buffer for attribute) 
    vertexAttribPointer(...) 
    bindBuffer(ELEMENT_ARRAY_BUFFER, model's ebo) 
    set uniforms and bind textures 
    glDrawElements 

隨着VAOs，這會更改

設置：

create programs and lookup attribute and uniform locations 
create buffers 
create texture 

for each model 
    create and bind VAO 
    for each attribute 
     bindBuffer(ARRAY_BUFFER, model's buffer for attribute) 
     vertexAttribPointer(...) 
    bindBuffer(ELEMENT_ARRAY_BUFFER, model's ebo) 

圖紙：

for each model 
    bindVertexArray(model's VAO) 
    set uniforms and bind textures 
    glDrawElements 

BTW：WebGL的1具有VAOs as an extension其中is available on most devices並有a polyfill可以使用，只是使它看起來像它無處不在，所以如果你習慣使用VAOs我使用建議填充工具。

EBO如何知道從哪個緩衝區獲取數據？

EBO不從緩衝區取數據，他們只是指定索引。屬性從緩衝區獲取數據。當您撥打vertexAttribPointer時，屬性會記錄當前的ARRAY_BUFFER綁定。換句話說

gl.bindBuffer(ARRAY_BUFFER, bufferA); 
gl.vertexAttribPointer(positionLocation, ...); 
gl.bindBuffer(ARRAY_BUFFER, bufferB); 
gl.vertexAttribPointer(normalLocation, ...); 
gl.bindBuffer(ARRAY_BUFFER, bufferC); 
gl.vertexAttribPointer(texcoordLocation, ...); 

在這種情況下，位置將來自緩衝液A，法線從bufferB，從bufferC texcoords。無論是否有VAO，這都是一樣的。 VAO和無VAO之間的區別在於屬性狀態（和EBO綁定）是全局還是每個VAO。