WebGL 中的 VBO 和 EBO 状态

问题描述

在 WebGL 中使用索引缓冲区绘制一些东西，你会在某种程度上经历这个例程(正如 MDN):

In WebGL to draw something using an index buffer you would somewhat undergo this routine (as hinted by 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 如何知道从哪个缓冲区获取数据?

Suppose I have multiple VBO's with vertex data. How does an EBO will know from which buffer to take the data?

在标准 OpenGL 中，我会将其封装在 VAO 中.但让我困惑的是 WebGL 中的缺乏.

In standard OpenGL I would encapsulate it in VAO. But lack thereof in WebGL is what confuses me.

推荐答案

如果没有 VAO，你的典型路径是这样的

Without VAOs your typical path is this

设置:

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

对于 VAO，这将更改为

With VAOs this changes to

设置:

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

顺便说一句:WebGL 1 有 VAO 作为扩展，其中 适用于大多数设备，还有一个 polyfill 你可以用来让它看起来无处不在，所以如果你习惯使用 VAO，我建议你使用 polyfill.

BTW: WebGL 1 has VAOs as an extension which is available on most devices and there's a polyfill you can use to just make it look like it's everywhere so if you're used to using VAOs I'd suggest using the polyfill.

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

EBO 不从缓冲区获取数据，它们只是指定索引.属性从缓冲区获取数据.当您调用 vertexAttribPointer 时，属性会记录当前的 ARRAY_BUFFER 绑定.换句话说

EBO's don't take data from buffers they just specify indices. Attributes take data from buffers. Attributes record the current ARRAY_BUFFER binding when you call vertexAttribPointer. In other words

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

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

In this case positions will come from bufferA, normals from bufferB, texcoords from bufferC. That's the same with or without VAOs. The difference between VAOs and no VAOs is whether attribute state (and EBO binding) are global or per VAO.

这篇关于WebGL 中的 VBO 和 EBO 状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！