OpenGL原理与实践——核心模式（一）：VBO、VAO等原理解析及项目初始设置

序言——OpenGL在是什么？为什么？做什么?

OpenGL实现了什么

OpenGL内模型数据的本质——顶点数据

我们需要研究什么——三角形，一个图形基元

MVP变换

OpenGL渲染流程的关键——摄像机变换

OpenGL渲染管线概览

准备——项目配置

项目初始代码框架及注释

初识——三角形绘制

OpenGL中的顶点数据格式——float数组

OpenGL中shader如何从CPU中获取数据——layout（锚点）

Shader

VBO：Vertex Buffer Object

VAO：解决锚点问题，记录了VBO的锚点信息

编译shader

设定VAO并进行渲染

整体源码

序言——OpenGL在是什么？为什么？做什么?

OpenGL实现了什么

将三维物体映射到视线方向上的一个裁剪空间（屏幕）上

OpenGL内模型数据的本质——顶点数据

我们需要研究什么——三角形，一个图形基元

MVP变换

OpenGL渲染流程的关键——摄像机变换

OpenGL渲染管线概览

准备——项目配置

GLFW

Download | GLFW

GLAD

https://glad.dav1d.de

下载后，进行相应配置。

项目初始代码框架及注释

#include <glad/glad.h>
#include <GLFW/glfw3.h>
#include <iostream>void framebuffer_size_callback(GLFWwindow* window, int width, int height) {glViewport(0, 0, width, height);
}void processInput(GLFWwindow* window) {if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS) {glfwSetWindowShouldClose(window, true);}
}int main() {//初始化OpenGL上下文环境，OpenGL是一个状态机，会保存当前状态下的渲染状态以及管线的状态glfwInit(); //，3版本以上glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);//用OpenGL核心开发模式glfwWindowHint(GLFW_OPENGL_PROFILE,GLFW_OPENGL_CORE_PROFILE);//创建窗体GLFWwindow* window = glfwCreateWindow(800, 600, "OpenGl Core", nullptr, nullptr);if (window == nullptr) {std::cout << "Failed to create GLFW window" << std::endl;glfwTerminate();return -1;}//把当前上下文绑定至当前窗口glfwMakeContextCurrent(window);//通过glad绑定各种函数指针if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)) {std::cout << "Failed to initialize GLAD" << std::endl;return -1;}//视口：需要渲染的东西在哪里glViewport(0, 0, 800, 600);//当Frame大小变动，调用回调函数调整视口大小glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);//防止窗口结束退出while (!glfwWindowShouldClose(window)) {processInput(window);//擦除画布，用定义的颜色填充glClearColor(0.2f, 0.3f, 0.3f, 1.0f);glClear(GL_COLOR_BUFFER_BIT);//双缓冲glfwSwapBuffers(window);glfwPollEvents();}//结束，释放资源glfwTerminate();return 0;}

运行结果如下：

初识——三角形绘制

OpenGL中的顶点数据格式——float数组

看向-Z方向

OpenGL中shader如何从CPU中获取数据——layout（锚点）

CPU将float顶点数据数组传入GPU
CPU告诉GPU如何解析这个数组
调用渲染指令进行绘制

GPU显存中的布局：layout；可以理解为“锚点”，指明在这一锚点代表的区域，存放了什么样的数据。

Shader

直白来说，Shader就是跑在GPU上的一种语言，用来操作GPU。

我们先写好两个shader的内容，先大致了解一番：

vertexShader：

#version 330 core//在layout=0，这块区域放置了一个vec3
layout (location = 0 ) in vec3 aPos;//操作
void main()
{gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
}

vertexShader中的数据gl_Position，会自动流入下一个阶段中，也就是fragmentShader
vertexShader会被调用多少次？有多少顶点就会调用多少次

fragmentShader：

#version 330 core
out vec4 FragColor;
void main(){FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
}

fragmentShader的目的是为了输出一个数据，这里是vec4 FragColor，被定义为out类型，会被输出到下一个管线流程中。
fragmentShader会被调用多少次？简单来说有多少像素就会调用多少次

流程：

将顶点数据转入到vertexShader，进行空间变换等操作（注意是并行的）
数据从vertexShader传入到fragmentShader，进行像素插值等操作（处理一堆像素点）

VBO：Vertex Buffer Object

在上面那个图中，其中的“GPU shader”就是所谓的VBO，也就是我们开辟的一块区域。

在开辟的这块空间，存储顶点数据。

那么在OpenGL中如何做这件事？

获取VBO的index（由OpenGL状态机分配的index）
绑定VBO的index
给VBO分配显存空间，并传输数据
告诉shader数据的解析方式
激活锚点，按照解析方式取读取数据

具体代码如下，我们在mian.cpp中添加如下函数：

//构建模型数据：VBO，
void initModel() {float vertices[] = {-0.5f, -0.5f, 0.0f,0.5f, -0.5f, 0.0f,0.0f, 0.5f, 0.0f};glGenBuffers(1, &VBO);//绑定哪一种buffer， glBindBuffer(GL_ARRAY_BUFFER, VBO);//分配显存：分配哪种buffer，分配显存大小，分配地址，使用数据的方式glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);//对哪个锚点进行操作：layout=0的锚点，读3个顶点，类型为float，不需要归一化，每次步长为3个float大小，从0处开始读glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);//打开锚点：激活glEnableVertexAttribArray(0);//解绑glBindBuffer(GL_ARRAY_BUFFER, 0);
}

每个函数的作用和参数意义，这里我用注释详细标明。方便后时查阅复习。

VAO：解决锚点问题，记录了VBO的锚点信息

编译shader

VAO是与shader密切相关的一个内容，所以在此之前需要进行shader的一系列操作：

首先声明一个全局变量：

unsigned int shaderProgram = 0;

初始化Shader，并进行编译链接。

void initShader(const char* _vertexPath, const char* _fragPath) {//shader的代码读取std::string _vertexCode("");std::string _fragCode("");std::ifstream _vShaderFile;std::ifstream _fShaderFile;_vShaderFile.exceptions(std::ifstream::failbit | std::ifstream::badbit);_fShaderFile.exceptions(std::ifstream::failbit | std::ifstream::badbit);try {_vShaderFile.open(_vertexPath);_fShaderFile.open(_fragPath);std::stringstream _vShaderStream, _fShaderStream;_vShaderStream << _vShaderFile.rdbuf();_fShaderStream << _fShaderFile.rdbuf();_vertexCode = _vShaderStream.str();_fragCode = _fShaderStream.str();}catch(std::ifstream::failure e) {std::string errStr = "read shader fail";std::cout << errStr << ": " << e.what() << std::endl;}const char* _vShaderStr = _vertexCode.c_str();const char* _fShaderStr = _fragCode.c_str();//shader的编译链接unsigned int _vertexID = 0, _fragID = 0;char _infoLog[512];int _successFlag = 0;//编译_vertexID = glCreateShader(GL_VERTEX_SHADER);glShaderSource(_vertexID, 1, &_vShaderStr, nullptr);glCompileShader(_vertexID);//捕捉编译过程中的状态信息glGetShaderiv(_vertexID, GL_COMPILE_STATUS, &_successFlag);if (!_successFlag) {glGetShaderInfoLog(_vertexID, 512, nullptr, _infoLog);std::string errStr(_infoLog);std::cout << errStr << std::endl;}_fragID = glCreateShader(GL_FRAGMENT_SHADER);glShaderSource(_fragID, 1, &_vShaderStr, nullptr);glCompileShader(_fragID);//捕捉编译过程中的状态信息glGetShaderiv(_fragID, GL_COMPILE_STATUS, &_successFlag);if (!_successFlag) {glGetShaderInfoLog(_fragID, 512, nullptr, _infoLog);std::string errStr(_infoLog);std::cout << errStr << std::endl;}//链接//创建一个程序shaderProgram = glCreateProgram();glAttachShader(shaderProgram, _vertexID);glAttachShader(shaderProgram, _fragID);glLinkProgram(shaderProgram);glGetProgramiv(shaderProgram, GL_LINK_STATUS, &_successFlag);if (!_successFlag) {glGetShaderInfoLog(shaderProgram, 512, nullptr, _infoLog);std::string errStr(_infoLog);std::cout << errStr << std::endl;}//删除中间文件glDeleteShader(_vertexID);glDeleteShader(_fragID);}

设定VAO并进行渲染

//构建模型数据：VBO，VAO
void initModel() {float vertices[] = {-0.5f, -0.5f, 0.0f,0.5f, -0.5f, 0.0f,0.0f, 0.5f, 0.0f};glGenVertexArrays(1, &VAO);glBindVertexArray(VAO);//之后的VBO便属于了VAO的管理范围glGenBuffers(1, &VBO);//绑定哪一种buffer， glBindBuffer(GL_ARRAY_BUFFER, VBO);//分配显存：分配哪种buffer，分配显存大小，分配地址，使用数据的方式glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);//对哪个锚点进行操作：layout=0的锚点，读3个顶点，类型为float，不需要归一化，每次步长为3个float大小，从0处开始读glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);//打开锚点：激活glEnableVertexAttribArray(0);//解绑//glBindBuffer(GL_ARRAY_BUFFER, 0);glBindVertexArray(0);}

//渲染
void render() {glBindVertexArray(VAO);glUseProgram(shaderProgram);//以三角形模式绘制，从第0个顶点开始，起作用的有3个点glDrawArrays(GL_TRIANGLES, 0, 3);glUseProgram(0);
}

渲染结果：

整体源码

main.cpp

#include <glad/glad.h>
#include <GLFW/glfw3.h>
#include <iostream>
#include <string>
#include <fstream>
#include <sstream>void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);
void initModel();
void initShader(const char* _vertexPath, const char* _fragPath);
void render();unsigned int VBO = 0;
unsigned int VAO = 0;
unsigned int shaderProgram = 0;int main() {//初始化OpenGL上下文环境，OpenGL是一个状态机，会保存当前状态下的渲染状态以及管线的状态glfwInit(); //，3版本以上glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);//用OpenGL核心开发模式glfwWindowHint(GLFW_OPENGL_PROFILE,GLFW_OPENGL_CORE_PROFILE);//创建窗体GLFWwindow* window = glfwCreateWindow(800, 600, "OpenGl Core", nullptr, nullptr);if (window == nullptr) {std::cout << "Failed to create GLFW window" << std::endl;glfwTerminate();return -1;}//把当前上下文绑定至当前窗口glfwMakeContextCurrent(window);//通过glad绑定各种函数指针if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)) {std::cout << "Failed to initialize GLAD" << std::endl;return -1;}//视口：需要渲染的东西在哪里glViewport(0, 0, 800, 600);//当Frame大小变动，调用回调函数调整视口大小glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);initModel();initShader("vertexShader.glsl", "fragmentShader.glsl");//防止窗口结束退出while (!glfwWindowShouldClose(window)) {processInput(window);//擦除画布，用定义的颜色填充glClearColor(0.2f, 0.3f, 0.3f, 1.0f);glClear(GL_COLOR_BUFFER_BIT);render();//双缓冲glfwSwapBuffers(window);glfwPollEvents();}//结束，释放资源glfwTerminate();return 0;}void framebuffer_size_callback(GLFWwindow* window, int width, int height) {glViewport(0, 0, width, height);
}void processInput(GLFWwindow* window) {if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS) {glfwSetWindowShouldClose(window, true);}
}//渲染
void render() {glBindVertexArray(VAO);glUseProgram(shaderProgram);//以三角形模式绘制，从第0个顶点开始，起作用的有3个点glDrawArrays(GL_TRIANGLES, 0, 3);glUseProgram(0);
}//构建模型数据：VBO，VAO
void initModel() {float vertices[] = {-0.5f, -0.5f, 0.0f,0.5f, -0.5f, 0.0f,0.0f, 0.5f, 0.0f};glGenVertexArrays(1, &VAO);glBindVertexArray(VAO);//之后的VBO便属于了VAO的管理范围glGenBuffers(1, &VBO);//绑定哪一种buffer， glBindBuffer(GL_ARRAY_BUFFER, VBO);//分配显存：分配哪种buffer，分配显存大小，分配地址，使用数据的方式glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);//对哪个锚点进行操作：layout=0的锚点，读3个顶点，类型为float，不需要归一化，每次步长为3个float大小，从0处开始读glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);//打开锚点：激活glEnableVertexAttribArray(0);//解绑//glBindBuffer(GL_ARRAY_BUFFER, 0);glBindVertexArray(0);}//
void initShader(const char* _vertexPath, const char* _fragPath) {//shader的代码读取std::string _vertexCode("");std::string _fragCode("");std::ifstream _vShaderFile;std::ifstream _fShaderFile;_vShaderFile.exceptions(std::ifstream::failbit | std::ifstream::badbit);_fShaderFile.exceptions(std::ifstream::failbit | std::ifstream::badbit);try {_vShaderFile.open(_vertexPath);_fShaderFile.open(_fragPath);std::stringstream _vShaderStream, _fShaderStream;_vShaderStream << _vShaderFile.rdbuf();_fShaderStream << _fShaderFile.rdbuf();_vShaderFile.close();_fShaderFile.close();_vertexCode = _vShaderStream.str();_fragCode = _fShaderStream.str();}catch(std::ifstream::failure e) {std::string errStr = "read shader fail";std::cout << errStr << ": " << e.what() << std::endl;}const char* _vShaderStr = _vertexCode.c_str();const char* _fShaderStr = _fragCode.c_str();//shader的编译链接unsigned int _vertexID = 0, _fragID = 0;char _infoLog[512];int _successFlag = 0;//编译_vertexID = glCreateShader(GL_VERTEX_SHADER);glShaderSource(_vertexID, 1, &_vShaderStr, nullptr);glCompileShader(_vertexID);//捕捉编译过程中的状态信息glGetShaderiv(_vertexID, GL_COMPILE_STATUS, &_successFlag);if (!_successFlag) {glGetShaderInfoLog(_vertexID, 512, nullptr, _infoLog);std::string errStr(_infoLog);std::cout << errStr << std::endl;}_fragID = glCreateShader(GL_FRAGMENT_SHADER);glShaderSource(_fragID, 1, &_fShaderStr, nullptr);glCompileShader(_fragID);//捕捉编译过程中的状态信息glGetShaderiv(_fragID, GL_COMPILE_STATUS, &_successFlag);if (!_successFlag) {glGetShaderInfoLog(_fragID, 512, nullptr, _infoLog);std::string errStr(_infoLog);std::cout << errStr << std::endl;}//链接//创建一个程序shaderProgram = glCreateProgram();glAttachShader(shaderProgram, _vertexID);glAttachShader(shaderProgram, _fragID);glLinkProgram(shaderProgram);glGetProgramiv(shaderProgram, GL_LINK_STATUS, &_successFlag);if (!_successFlag) {glGetShaderInfoLog(shaderProgram, 512, nullptr, _infoLog);std::string errStr(_infoLog);std::cout << errStr << std::endl;}//删除中间文件glDeleteShader(_vertexID);glDeleteShader(_fragID);}

vertexShader.glsl

#version 330 core
layout (location = 0) in vec3 aPos;
void main()
{gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
};

fragmentShader.glsl

#version 330 core
out vec4 FragColor;
void main()
{FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
};