4. 顶点缓冲与属性：VBO、VAO、顶点属性布局
好，咱们今天聊聊图形管线里的「第一道工序」——怎么把顶点数据喂给GPU。
说实话，我刚学图形API那会儿，最头疼的就是VBO和VAO。这两个缩写长得像，功能又纠缠在一起，文档里翻来覆去就是「绑定」「解绑」「再绑定」……嗯，今天咱们把它彻底捋清楚。
4.1 为什么需要VBO？
你想想看，CPU和GPU是两个独立的处理器。CPU这边定义了一个顶点数组，比如：
float vertices[] = {
-0.5f, -0.5f, 0.0f, // 左下
0.5f, -0.5f, 0.0f, // 右下
0.0f, 0.5f, 0.0f // 顶部
};这个数组在CPU的内存里。但GPU没法直接读CPU的内存——它有自己的显存。所以我们需要把数据从CPU内存「搬运」到GPU显存里。这个搬运工，就是VBO（Vertex Buffer Object，顶点缓冲对象）。
核心理解：VBO本质上就是GPU显存里的一块缓冲区。你把顶点数据塞进去，GPU就能在渲染时直接读取，不用每次从CPU内存拷贝。
4.2 创建VBO并上传数据
流程很简单，三步走：
- 用
glGenBuffers生成一个VBO句柄 - 用
glBindBuffer绑定到GL_ARRAY_BUFFER目标 - 用
glBufferData把数据拷贝进去
代码长这样：
unsigned int VBO;
glGenBuffers(1, &VBO); // 生成1个VBO
glBindBuffer(GL_ARRAY_BUFFER, VBO); // 绑定到数组缓冲目标
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);最后一个参数GL_STATIC_DRAW是什么意思？我解释一下：它告诉GPU「这数据基本不变，你把它放在最快的显存区域」。如果你要频繁更新顶点数据，就用GL_DYNAMIC_DRAW或GL_STREAM_DRAW。我在项目中遇到过一个问题——把动态粒子系统的数据标成了GL_STATIC_DRAW，结果每帧更新时性能惨不忍睹。后来改成GL_DYNAMIC_DRAW，帧率直接翻倍。
个人习惯：我一般把静态几何体（比如地形、建筑）用GL_STATIC_DRAW，每帧更新的粒子或UI顶点用GL_DYNAMIC_DRAW。这个选择对性能影响挺大的。
4.3 VAO——把「数据」和「布局」打包
光有VBO还不够。GPU拿到一堆浮点数，它怎么知道哪些是位置、哪些是颜色、哪些是法线？
这就需要告诉GPU「顶点数据的布局」。比如：前3个float是位置，接下来3个float是法线，再接下来2个float是纹理坐标……
这个「布局描述」就是顶点属性指针。但每次渲染前都要重新设置这些指针，太麻烦了。于是VAO（Vertex Array Object，顶点数组对象）出现了。
VAO的作用：把VBO和顶点属性布局「打包」成一个状态对象。以后每次渲染，只要绑定这个VAO，所有设置自动恢复。
一句话总结：VBO管「数据在哪儿」，VAO管「数据怎么解释」。
4.4 顶点属性布局详解
假设我们的顶点结构是这样：
// 每个顶点：位置(x,y,z) + 颜色(r,g,b) + 纹理坐标(u,v)
// 一共8个float，stride = 8 * sizeof(float) = 32字节
float vertices[] = {
// 位置 // 颜色 // 纹理坐标
-0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 0.0f, 0.0f, // 顶点0
0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, // 顶点1
0.0f, 0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 0.5f, 1.0f // 顶点2
};设置顶点属性指针的代码：
// 位置属性 (location = 0)
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
// 颜色属性 (location = 1)
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);
// 纹理坐标属性 (location = 2)
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
glEnableVertexAttribArray(2);这里每个参数的含义：
| 参数 | 含义 | 本例值 |
|---|---|---|
| index | 着色器中的location编号 | 0, 1, 2 |
| size | 每个属性有几个分量 | 3（位置）、3（颜色）、2（纹理） |
| type | 数据类型 | GL_FLOAT |
| normalized | 是否归一化到[0,1] | GL_FALSE |
| stride | 两个顶点之间的字节跨度 | 32（8个float） |
| pointer | 该属性在顶点内的偏移量 | 0, 12, 24（字节） |
我曾经踩过的坑：stride参数写错了。如果你每个顶点是8个float，stride应该是8 * sizeof(float)，而不是sizeof(vertices)。后者是整个数组的大小，不是单个顶点的大小。这个bug我调了整整一个下午才找到。
4.5 把一切组装起来
现在我们把VBO和VAO组合使用：
unsigned int VAO, VBO;
glGenVertexArrays(1, &VAO);
glGenBuffers(1, &VBO);
// 1. 绑定VAO —— 记录后续所有状态
glBindVertexArray(VAO);
// 2. 绑定VBO并上传数据
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 3. 设置顶点属性指针
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));
glEnableVertexAttribArray(1);
glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
glEnableVertexAttribArray(2);
// 4. 解绑VAO（可选，但建议养成习惯）
glBindVertexArray(0);渲染循环里，只需要两行：
glBindVertexArray(VAO);
glDrawArrays(GL_TRIANGLES, 0, 3);是不是清爽多了？
4.6 核心流程图
下面这张图展示了VBO和VAO的关系，以及数据流向：
4.7 实战建议与避坑
- VAO一定要先创建再设置属性。我见过不少新手先绑VBO设属性，最后才创建VAO——结果VAO里啥也没记录，渲染出来一片黑。
- 每个顶点属性都要调用
glEnableVertexAttribArray。忘了启用的话，着色器里读到的全是0。 - stride和offset的单位是字节。不是元素个数，不是float个数。用
sizeof计算最保险。 - 如果你用OpenGL 3.3+核心模式，VAO是必须的。旧版兼容模式可以不创建VAO，但核心模式下不绑定VAO直接画会报错。
我个人习惯：每个模型对应一个VAO。加载模型时创建VAO，设置好所有属性。渲染时直接绑定对应的VAO，干净利落。如果模型有多个Mesh，每个Mesh单独一个VAO。
好了，VBO和VAO的核心内容就这些。说白了就是：VBO负责存数据，VAO负责记配置。两者配合，让GPU能高效地读取顶点数据。下一节咱们聊聊索引缓冲——当顶点重复出现时，怎么用更少的内存画出更复杂的图形。
公众号:蓝海资料掘金营，微信deep3321