实验2.2——VAO，VBO的总结

关注

原创 2022-07-06 12:58:41 3.4k 阅读 AI 写同款· GEO 优化 ›

关于VAO、VBO、EBO的理解 VBO是一堆顶点，但你不知道这些顶点代表什么。VAO会告诉OpenGL什么是位置、颜色、纹理、法向量、索引，这些含义组成了VAO。比如VBO是画笔，颜料，画布；VAO就是画家，利用这些原料完成一幅作品。复习 - LearnOpenGL CN。VBO，有需要的话会加一个EBO。阅读详情

这俩个O，前面搞了这么多链接，已经迷糊了，捋一捋吧。

事物的发展都是一个过程，所以如果能按着这个技术发展的过程来学习，应该就能捋顺了。

简单的说，如果能亲身经历一遍这个发展过程，重新”发明“出VAO+VBO，自然就明白啥是VAO，VBO了。

过程1——立即渲染模式

这里不从网上找概念，因为我是小白，找了也看不懂，直接弄一点感性认识就可以了，小白不能要求太高嘛……

好像这样的就是所谓的立即渲染模式

glBegin( GL_TRIANGLES );

    glVertex3f(-1.0f, -0.5f, -4.0f);

    glVertex3f( 1.0f, -0.5f, -4.0f);

    glVertex3f( 0.0f, 0.5f, -4.0f);

glEnd();

它是通过这些函数调用，来实现图形数据从CPU到GPU的传输的，这就存在两个问题。

函数调用，需要压栈，弹栈什么的，很花时间
数据传输需要时间，因为这些零件没有集成在一起。如下图（引用自这里）所示，CPU，GPU，内存，相互之间都是存在一定的距离的，虽然电信号传的快，但传输时间也不会是0.

过程2——使用VBO

天地万物之理，无独必有对。问题能出现，就会有解决方法。

这是那个曾经看过的浏览量很高的pyopengl的教程

从高亮的那句话，就能这么猜测一下——在历史上，是先出现的VBO，再出现的VAO+VBO

引用自：

(31条消息) 写给 python 程序员的 OpenGL 教程_天元浪子的博客-优快云博客_写给python程序员的opengl

调用函数传数据到GPU，很花时间，那末，直接把数据放到显存里，绘制的时候直接让GPU从显存里取，不就快了吗？

这个其实就是VBO。

这个链接里面有完整的代码，试了试，可以运行的：

(31条消息) OpenGL使用纯VBO方式渲染出三角形，非VAO_AppNinja的博客-优快云博客_opengl vbo使用

拿前面那个绘制彩色三角形的改了改，也实现了纯VBO——没用VAO，只搞了两个VBO，用来存这两个三角形的数据。

代码在这里

结果是这个：

不用VAO好像也可以，就是写代码的时候麻烦了一点。

过程3——使用VAO管理VBO

在上一个过程中，是不是觉得这么写比较麻烦？

而且，这还只是2个图形，各2个属性的情况，多了只会更麻烦……

那末，怎么办？——往上再封装一层。【封装，有计算机内味儿了】

VAO的诞生——VBO+封装

网页1

这个链接，详细生动的说明了VAO到底是什么：

VAO(Vertex Array Object)简单理解其实代表的就是模型的数据，我们可能需要很多个模型，所以需要有个id来区分，所以创建vao的时候会返回一个vaoID。VAO中有一个属性列表，默认有16个属性(0 - 15)，我们可以为属性指定数据，其中属性可以是顶点位置，颜色，法线，纹理坐标等等我们需要的数据，其中的每一个属性对应的数据其实就是VBO（vertex buffer object）。

OpenGL有两类函数，第一种是状态设置函数，第二种是状态使用函数。比如对于vao对象，glBindVertexArray(vaoID)函数就是状态设置函数，glVertexAttribPointer就是状态使用函数，用来为属性列表中的某个属性绑定数据，绑定的数据就是vbo，如果我们已经为vao绑定过数据了，下一次使用的时候就不需要重新绑定了，直接使用这个vao就可以了，相当于我们已经有模型的数据了。在bind和unbind（就是调用glBindVertexArray(0)）之间的操作都是针对这一个vao对象的。形象的理解两者之间的关系可以看下图：

引用自：

vao和vbo - 知乎 (zhihu.com)

网页2

配合下面这个一起看，风味更佳：

上面那个图，和下面这个图，连起来看，就知道具体的VAO是什么了，而不是抽象的VAO。

引用自：

(31条消息) [OpenGL] VAO、VBO、EBO_Zeehoy的博客-优快云博客_opengl vbo

网页3

关于上图中红色的VAO里的那个类似长度16索引为0--15的线性表数据结构，还可以再接着认识：

里面的代码，试了试，是可以运行的


#include <iostream>
#include "glad/glad.h"
#include "GLFW/glfw3.h"


// 屏幕宽，高
int screen_width = 1280;
int screen_height = 720;

int main() {
    // 第一部分，初始化GLFW和GLAD，分为4个步骤进行/////////////////////////////////////////////////////////

    // 初始化GLFW
    glfwInit();                                                     // 初始化GLFW
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);                  // OpenGL版本为3.3，主次版本号均设为3
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);  // 使用核心模式(无需向后兼容性)
    //glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);            // 如果使用的是Mac OS X系统，需加上这行
    glfwWindowHint(GLFW_RESIZABLE, false);						    // 不可改变窗口大小

    // 必须使用VAO渲染
    //glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
    // 渲染出纯VBO三角形
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_COMPAT_PROFILE);

    // 创建窗口(宽、高、窗口名称)
    auto window = glfwCreateWindow(screen_width, screen_height, "Triangle", nullptr, nullptr);
    if (window == nullptr) {                                        // 如果窗口创建失败，输出Failed to Create OpenGL Context
        std::cout << "Failed to Create OpenGL Context" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);                                 // 将窗口的上下文设置为当前线程的主上下文

    // 初始化GLAD，加载OpenGL函数指针地址的函数
    // 在调用任何OpenGL函数之前
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }

    // 指定当前视口尺寸(前两个参数为左下角位置，后两个参数是渲染窗口宽、高)
    glViewport(0, 0, screen_width, screen_height);

    //查询硬件支持的顶点属性的上限
    int nrAttributes;
    glGetIntegerv(GL_MAX_VERTEX_ATTRIBS, &nrAttributes);
    std::cout << "Maximum nr of vertex attributes supported: " << nrAttributes << std::endl;

 
    return 0;
}

运行结果

明白了，3060移动端VAO支持16种顶点属性。

这就是解释了为什么上面那个图，线性表的长度画的是16，而不是15或者17或者别的什么东西。

引用自：

(31条消息) OPENGL学习笔记之glEnableVertexAttribArray函数_Sean_gGo的博客-优快云博客_glenablevertexattribarray

网页4

这个链接，可以当成一个总结来看：

一个VAO对应一个物体，一个VBO对应一个物品的所有属性（顶点坐标、颜色等，除顶点索引外），而一个EBO仅对应一个物品的一种属性（顶点索引属性）。

关于VAO的使用与否，这里又见到了。

还是以具体代码形式的，挺好的。

只是用VBO，需要重复设置属性指针
VAO+VBO，可以少写点代码，一句就画出了2个三角形。【与下面的那个”渲染的代码“是呼应的】

引用自：

(31条消息) OpenGL中VAO、VBO和EBO的区别_码农高射炮的博客-优快云博客_vao vbo区别

网页5

这个链接，关于VAO和VBO的每个函数，都画了图来解释，图很漂亮，文字也很详细，是一个不错的总结，适合我这样的0基础小白，从0开始建立一个感性认识，快速了解这些抽象的BO函数。

就是这里没给渲染的代码：

但是问题不大，因为网页4里有，可以互补着看。

这个”渲染的代码“，大概就是gldrawarray什么的。

引用自：

(31条消息) [OpenGL] VAO、VBO、EBO_Zeehoy的博客-优快云博客_opengl vbo