Question

在WebGL中使用索引缓冲区绘制内容时，您会稍微经历此例程（如MDN所示）：

设置：

postRef.addListenerForSingleValueEvent

附图中：

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

没有bindBuffer(ELEMENT_ARRAY_BUFFER); glDrawElements(...);电话。

假设我有多个带有顶点数据的VBO。 EBO如何知道从哪个缓冲区获取数据？

在标准OpenGL中，我会将其封装在VAO中。但是在WebGL中缺乏它让我感到困惑。

Answer 1

没有VAO，您的典型路径是

设置：

doThings :: String -> IO ()

附图中：

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

使用VAO时，此更改为

设置：

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

附图中：

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)

顺便说一句：WebGL 1有VAOs as an extension is available on most devices你可以使用a polyfill让它看起来像是在任何地方所以如果你习惯使用VAO我建议使用polyfill。

EBO如何知道从哪个缓冲区获取数据？

EBO不会从他们只指定索引的缓冲区中获取数据。属性从缓冲区获取数据。当您致电for each model bindVertexArray(model's VAO) set uniforms and bind textures glDrawElements时，属性会记录当前ARRAY_BUFFER绑定。换句话说

vertexAttribPointer

在这种情况下，位置将来自bufferA，来自bufferB的法线，来自bufferC的texcoords。无论是否有VAO，都是一样的。 VAO与无VAO之间的区别在于属性状态（和EBO绑定）是全局的还是每个VAO。

WebGL中的VBO和EBO状态

1 个答案: