WebGL中的VBO和EBO状态
在WebGL中,要使用索引缓冲区绘制某些内容,您可能需要执行以下例程: 设置:WebGL中的VBO和EBO状态,webgl,Webgl,在WebGL中,要使用索引缓冲区绘制某些内容,您可能需要执行以下例程: 设置: bindBuffer(ARRAY_BUFFER); bufferData(pass vertex data); bindBuffer(ELEMENT_ARRAY_BUFFER); bufferData(pass index data); create programs and lookup attribute and uniform locations create buffers create texture
bindBuffer(ARRAY_BUFFER);
bufferData(pass vertex data);
bindBuffer(ELEMENT_ARRAY_BUFFER);
bufferData(pass index data);
create programs and lookup attribute and uniform locations
create buffers
create texture
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)
图纸:
bindBuffer(ELEMENT_ARRAY_BUFFER);
glDrawElements(...);
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
for each model
bindVertexArray(model's VAO)
set uniforms and bind textures
glDrawElements
没有bindBufferARRAY\u缓冲区调用
假设我有多个带有顶点数据的VBO。EBO如何知道从哪个缓冲区获取数据
在标准OpenGL中,我会将其封装在VAO中。但WebGL中缺少这一点让我感到困惑。没有VAOs,您的典型路径是 设置:
bindBuffer(ARRAY_BUFFER);
bufferData(pass vertex data);
bindBuffer(ELEMENT_ARRAY_BUFFER);
bufferData(pass index data);
create programs and lookup attribute and uniform locations
create buffers
create texture
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)
图纸:
bindBuffer(ELEMENT_ARRAY_BUFFER);
glDrawElements(...);
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
for each model
bindVertexArray(model's VAO)
set uniforms and bind textures
glDrawElements
有了VAOs,这就变成了
设置:
bindBuffer(ARRAY_BUFFER);
bufferData(pass vertex data);
bindBuffer(ELEMENT_ARRAY_BUFFER);
bufferData(pass index data);
create programs and lookup attribute and uniform locations
create buffers
create texture
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)
图纸:
bindBuffer(ELEMENT_ARRAY_BUFFER);
glDrawElements(...);
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
for each model
bindVertexArray(model's VAO)
set uniforms and bind textures
glDrawElements
顺便说一句:WebGL 1有它,你可以用它让它看起来无处不在,所以如果你习惯使用VAOs,我建议你使用polyfill
EBO如何知道从哪个缓冲区获取数据
EBO不从缓冲区获取数据,它们只指定索引。属性从缓冲区获取数据。属性记录调用VertexAttributePointer时的当前数组\u缓冲区绑定。换句话说
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。无论有没有VAOs,情况都一样。VAO和no VAO之间的区别在于属性状态和EBO绑定是全局的还是每个VAO 没有VAOs,您的典型路径如下 设置:
bindBuffer(ARRAY_BUFFER);
bufferData(pass vertex data);
bindBuffer(ELEMENT_ARRAY_BUFFER);
bufferData(pass index data);
create programs and lookup attribute and uniform locations
create buffers
create texture
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)
图纸:
bindBuffer(ELEMENT_ARRAY_BUFFER);
glDrawElements(...);
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
for each model
bindVertexArray(model's VAO)
set uniforms and bind textures
glDrawElements
有了VAOs,这就变成了
设置:
bindBuffer(ARRAY_BUFFER);
bufferData(pass vertex data);
bindBuffer(ELEMENT_ARRAY_BUFFER);
bufferData(pass index data);
create programs and lookup attribute and uniform locations
create buffers
create texture
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)
图纸:
bindBuffer(ELEMENT_ARRAY_BUFFER);
glDrawElements(...);
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
for each model
bindVertexArray(model's VAO)
set uniforms and bind textures
glDrawElements
顺便说一句:WebGL 1有它,你可以用它让它看起来无处不在,所以如果你习惯使用VAOs,我建议你使用polyfill
EBO如何知道从哪个缓冲区获取数据
EBO不从缓冲区获取数据,它们只指定索引。属性从缓冲区获取数据。属性记录调用VertexAttributePointer时的当前数组\u缓冲区绑定。换句话说
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。无论有没有VAOs,情况都一样。VAO和no VAO之间的区别在于属性状态和EBO绑定是全局的还是每个VAO