OpenGL学习笔记2——三角形的绘制1
OpenGL学习笔记2——三角形的绘制1
- 1 精简版的三角形绘制
- 1.1 顶点数据
- 1.2 VAO和VBO
- 1.3 顶点着色器和片元着色器
- 1.4 着色器程序
- 1.5 VAO的设置
- 1.6 在渲染循环中渲染
- 1.7 完整代码
- 1.8 EBO
这一次主要是根据LearnOpengGL做的三角形绘制。看了很久看不懂，也做不下去。最后还是看了傅老师才看明白。真是可喜可贺，可喜可贺。
1 精简版的三角形绘制
三角形的绘制在创建窗口的基础上继续。
1.1 顶点数据
首先定义一下我们要画的三角形的三个顶点。比较要理解，就是xyz三个坐标。现在我们不需要深度所以z都是0。
float vertices[] = {
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
0.0f, 0.5f, 0.0f,
};
1.2 VAO和VBO
- VAO，Vertex Array Object。顶点数组对象。
- VBO，Vertex Buffer Object。顶点缓冲对象。
然后我们创建一个VAO和VBO。
// 创建顶点数组对象VAO（Vertex Array Object）
unsigned int VAO;
glGenVertexArrays(1, &VAO); // 第一个参数是几个对象，如果是多个对象的时候可以在第二个参数传一个数组进去
glBindVertexArray(VAO); // 绑定VAO
// 创建顶点缓冲对象VBO（Vertex Buffer Object）
unsigned int VBO;
glGenBuffers(1, &VBO);// 第一个参数是几个对象，如果是多个对象的时候可以在第二个参数传一个数组进去
glBindBuffer(GL_ARRAY_BUFFER, VBO); // 绑定VBO
// 将顶点数据绑定到GL_ARRAY_BUFFER上
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
其中glGenVertexArrays方法是可以创建多个VAO的，例如：
// 这只是写个例子，待会并不会写到代码里面。
unsigned int VAO[10];
glGenVertexArrays(10, VAO);
所以其实只有一个VAO的话也可以写成：
// 这只是写个例子，待会并不会写到代码里面。
unsigned int VAO[1];
glGenVertexArrays(10, VAO);
但是创建一个只有一个元素的数组显得很鸡肋，所以就像上面一样直接一个VAO，然后传入地址。glGenBuffers同理。
解释一下代码，unsigned int VAO，可以理解为声明了一个整数ID，这个ID就代表着VAO这个东西（不知道为啥不用指针，还不太理解）。另外unsigned int可以用GLuint代替，他俩是一样的。就是一个无符号的整型数据。
然后通过glGenVertexArrays把生成的一个或者多个（这里只有一个）顶点数组对象的地址赋值给VAO这个整型ID。glGenBuffers同理。
glBindVertexArray和glBindBuffer都是用来绑定VAO和VBO的。VBO可以绑定到不同的buffer上，所以这里要指定是绑定到GL_ARRAY_BUFFER上。
glBufferData是一个专门用来把用户定义的数据复制到当前绑定缓冲的函数。 GL_STATIC_DRAW代表顶点不会变动，这个函数还不太理解。
1.3 顶点着色器和片元着色器
OpenGL不提供顶点着色器和片元着色器，所以我们必须提供这两个着色器。它们是用GLSL语言写的，看起来和C语言很类似。下面是两个很简单着色器源码。
// 顶点着色器 vertexShader
#version 330 core // 标明使用的版本，OpenGL3.3 ，GLSL就要用330
layout (location = 0) in vec3 aPos;
// 上面这句定义从我们的VAO第0个指针位置获取数据，数据作为一个vec3，叫做aPos
// location = 0对应着等会glVertexAttribPointer方法的参数设置
void main() {
gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0); // 不做任何处理直接将顶点输出（因为需要4元的向量，所以直接用构造方法添加一个分量上去）
}
// 片元着色器 fragmentShaer
#version 330 core
out vec4 FragColor;
void main() {
FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f); // 设置颜色
}
但是GLSL并不能直接在这里编译，所以要写成字符数组，通过glfw的函数进行编译。如下。
// 顶点着色器源码
const char* vertex_shader_source =
"#version 330 core \n"
"layout(location = 0) in vec3 aPos; \n"
"void main(){ \n"
" gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
"} \n";
//片元（片段）着色器源码
const char* fragment_shader_source =
"#version 330 core \n"
"out vec4 FragColor; \n"
"void main(){ \n"
" FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
"} \n";
然后像前面创建VAO和VBO一样。
- 首先unsigned int创建shader的id。
- 使用glCreateShader函数，通过参数告诉他我们要创建的是什么shader，返回值就是创建的shader的唯一id。
- 使用glShaderSource函数，将源码绑定到shader上。第一个参数是绑定到哪个shader，第二个参数是有一个字符数组，我们这里只有一个。第三个参数源码的地址，第四个参数现在还不知道。
- 使用glCompileShader函数编译shader。
// 创建顶点着色器（shader）
unsigned int vertexShader;
vertexShader = glCreateShader(GL_VERTEX_SHADER);
glShaderSource(vertexShader, 1, &vertex_shader_source, nullptr); // 将shader源代码绑定到shader中
glCompileShader(vertexShader); // 编译shader
// 创建片元着色器（shader）
unsigned int fragmentShader;
fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragment_shader_source, nullptr); // 将shader源代码绑定到shader中
glCompileShader(fragmentShader); // 编译shader
1.4 着色器程序
光是弄好了两个shader还不能丢到GPU里面去运行。需要创建一个着色器程序(shader program)，然后把两个shader都附着上去。代码和前面的也很类似，也不用多说了。
// 创建一个着色器程序（shader program）
unsigned int shaderProgram;
shaderProgram = glCreateProgram();
glAttachShader(shaderProgram, vertexShader); // 附上vertexShader
glAttachShader(shaderProgram, fragmentShader); // 附上fragmentSahder
glLinkProgram(shaderProgram); // 链接起来
1.5 VAO的设置
傅老师的视频里面这里讲的比较形象，还画图了。
而且这个0可以是0-15，这里往哪放，顶点着色器里面就从哪里取（loaction = 这里的位置）。
// VAO的设置
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
1.6 在渲染循环中渲染
/*绘制三角形*/
glBindVertexArray(VAO); // 绑定VAO
glUseProgram(shaderProgram); // 使用我们刚才创建的shader program
glDrawArrays(GL_TRIANGLES, 0, 3); //绘制三角形，三个顶点
1.7 完整代码
#include 运行的结果就是这样的。
1.8 EBO
我们想画一个四边形，我们就需要四个顶点。然后OpenGL是按三角形绘制的，按照上面的方法就需要六个顶点（其中有两对是重复的）。这样是很浪费资源的，特别是在重复的顶点特别多的时候（正常情况下都是这样的情况）。
float vertices[] = {
// 第一个三角形
0.5f, 0.5f, 0.0f, // 右上角
0.5f, -0.5f, 0.0f, // 右下角
-0.5f, 0.5f, 0.0f, // 左上角
// 第二个三角形
0.5f, -0.5f, 0.0f, // 右下角
-0.5f, -0.5f, 0.0f, // 左下角
-0.5f, 0.5f, 0.0f // 左上角
};
所以开始引入了EBO（索引缓冲对象，Element Buffer Object），用索引指定哪三个顶点是一个三角形。
// 三角形的顶点数据
float vertices[] = {
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
0.0f, 0.5f, 0.0f,
0.9f, 0.8f, 0.0f
};
unsigned int indices[] = { // 注意索引从0开始!
0, 1, 2, // 第一个三角形
1, 2, 3 // 第二个三角形
};
可以在创建VAO和VBO的后面同样的创建EBO。
unsigned int EBO;
glGenBuffers(1, &EBO);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
渲染循环里面把原来的glDrawArrays替换为glDrawElements。还有要绑上EBO。
//glDrawArrays(GL_TRIANGLES, 0, 3);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); // 使用框线模式渲染，也可以去掉。
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
这样就画出了一个四边形。
下次再试试LearnOpenGL后面的练习，把这个弄清楚一点。