OpenGL学习笔记（一）-窗口-渲染管线

参考网址：LearnOpenGL 中文版
哔哩哔哩教程

第一章 入门

1.0 配置库

• 首先，在我们画出出色的效果之前，需创建一个OpenGL上下文(Context)和一个用于显示的窗口。然而，这些操作在每个系统上都是不一样的，因此需要利用GLFW库，给我们提供一个窗口和一个OpenGL上下文用来渲染；
• 其次，OpenGL只是一个标准/规范，具体的实现是由驱动开发商针对特定显卡实现的。由于OpenGL驱动版本众多，它大多数函数的位置都无法在编译时确定下来，需要在运行时查询。为避免查询繁琐的过程，需利用GLEW库。

下载GLFW：GLFW 32位版本
下载GLEW: GLEW

包含目录、库目录和库

E:\OpenGL\glfw-3.3.6.bin.WIN32\glfw-3.3.6.bin.WIN32\include
E:\OpenGL\glew-2.1.0-win32\glew-2.1.0\include

E:\OpenGL\glfw-3.3.6.bin.WIN32\glfw-3.3.6.bin.WIN32\lib-vc2015
E:\OpenGL\glew-2.1.0-win32\glew-2.1.0\lib\Release\Win32

opengl32.lib
glfw3.lib
glew32s.lib

1.1 创建窗口

• 包含头文件

#define GLEW_STATIC
#include<GL/glew.h> //glew需包含在前面
#include<GLFW/glfw3.h>

• 初始化GLFW

glfwInit();//初始化
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);//使用版本号是3.3
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);//使用核心模式

• 创建窗口

GLFWwindow* window = glfwCreateWindow(800, 600, "My_window", NULL, NULL);//创建窗口，定义窗口大小，返回指针
if (window == NULL)
{
	std::cout << "open window failed" << endl;
	glfwTerminate();//结束窗口
	return -1;
}
glfwMakeContextCurrent(window);//使用当前window

• 初始化GLEW

glewExperimental = true;
if (glewInit() != GLEW_OK)
{
	cout << "init glew failed." << endl;
	glfwTerminate();
	return -1;
}

• 定义在窗口中，渲染窗口的大小

glViewport(0, 0, 800, 600);//左下角坐标，宽，高

• 定义一个渲染循环

  其中交换缓冲区的目的在于，为避免图像显示时出现闪烁，通常使用双缓冲区，前缓冲区用于显示最终的效果，后缓冲区用于绘制渲染指令，渲染指令完成后则交换缓冲区。

while (!glfwWindowShouldClose(window))//检查是否要求窗口退出
{
	glfwSwapBuffers(window);//交换缓冲区
	glfwPollEvents();//检查是否有触发某些事件，例如鼠标移动，按下等，调用回调函数
}

• glfwpollevents用于检查输入时间，需要写一个函数来相应它。由于检查输入需要时间，因此一般写在循环的后面，而在下一个循环前部来执行响应函数。

void processInput(GLFWwindow *window)
{
	if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
	{
		glfwSetWindowShouldClose(window, true);
	}
}

while (!glfwWindowShouldClose(window))//检查是否要求窗口退出
{
	processInput(window);//在该帧循环开始前，执行上一帧的输入

	glClearColor(0.2f, 0.3f, 0.3f, 1.0f);//设置清屏颜色，RGB透明
	glClear(GL_COLOR_BUFFER_BIT);//利用颜色清屏

	glfwSwapBuffers(window);//交换缓冲区
	glfwPollEvents();//检查是否有触发某些事件，例如鼠标移动，按下等，由于检查事件需要时间，所以一般放在该帧循环结束前
		
}

• 定义清屏颜色，执行清屏操作

glClearColor(0.2f, 0.3f, 0.3f, 1.0f);//设置清屏颜色，RGB透明
glClear(GL_COLOR_BUFFER_BIT);//利用颜色清屏

1.2 三角形

1.2.1 图形渲染管线

• OpenGL的大部分工作都是通过图形渲染管线将3D坐标转变为适应你屏幕的2D像素。图形渲染管线分为两个部分：把3D坐标转换为2D坐标；把2D坐标转变为实际的有颜色的像素。2D坐标时二维空间中的精确坐标值，而2D像素受分辨率影响，为近似值。
• 图像渲染管线分为以下几个阶段，每个阶段可以并行运行，又称为着色器（shader），一般只需定义顶点着色器和片段着色器。
  
• 将顶点数据作为输入，顶点数据由一系列顶点组成，每个顶点可包含任何想用的数据，包括3D位置，颜色，法线等。图中的顶点数据包含三个顶点；
• 顶点着色器对顶点坐标进行变换，对顶点属性进行基本处理；
• 图元装配将顶点数据装配成指定的图元形状，图元形状是指在渲染时将顶点数据组装成特定形状，例如GL_POINTS,GL_TRIANGLES,GL_LINE_STRIP;
• 几何着色器可以通过产生新的顶点构造出新的图元；
• 光栅化阶段将图元映射到屏幕上的像素，形成片段；
• 片段着色器根据光照、阴影，确定像素的颜色；
• 测试和混合阶段根据片段的深度，用来判断这个像素点是否可见。并对多个物体进行混合，计算该像素点的最终颜色。

1.2.2 顶点数据

• OpenGL的3D点坐标值都必须位于标准化设备坐标，即（x，y，z）都必须为-1.0到1.0的范围内。
• 渲染时，首先需从CPU中生成顶点数据，然后发送到GPU中进行渲染，以两个连接的三角形为例，共有四个顶点，其发送的数据为：

vertex -1.0 0.0 1.0 
vertex 1.0 0.75 1.0 
vertex -1.0 0.0 -1.0
vertex 1.0 0.0 -1.0 
normal -0.35 0.93 -0.35 
normal 0.0 0.93 -0.35 
plane 1//1 2//1 3//1  第一个三角形的每个点的法向量都为法向量1
plane 3//2 2//2 4//2  第二个三角形的每个点的法向量都为法向量2

• CPU将数据发送到GPU的内存上，在GPU中利用顶点缓冲对象（VBO）来管理这些内存，VBO以数组的形式存储大量的顶点，然后发送到显卡的图形渲染管线中进行处理，例如：

float vertices[] = {
-0.5f, -0.5f, 0.0f,
0.5f, -0.5f, 0.0f,
0.0f,  0.5f, 0.0f
};

1.2.3 VBO与VAO

• 定义VBO，并将顶点数据与VBO绑定
• glGenBufffers函数中的第二个参数，类型为指向对象名的指针，由于此时指定义了一个VBO，因此利用&VBO表示指针。
• glBufferData用来把用户定义的数据复制到当前绑定缓冲的函数。参数分别为：
  目标缓冲的类型；传输数据的大小；发送的实际数据；
  数据管理形式（GL_STATIC_DRAW；GL_DYNAMIC_DRAW；GL_STREAM_DRAW）

/*定义VBO*/
unsigned int VBO;//声明对象
glGenBuffers(1, &VBO);//定义缓冲对象
glBindBuffer(GL_ARRAY_BUFFER, VBO);//将缓冲对象类型和缓冲对象绑定
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);//将顶点数据绑定到当前缓冲对象中

• 由于VBO中的数据以数组形式存储的，顶点着色器并不知道如何利用这些数据，那么就需要定义顶点属性来解释这些数据，例如将上面的数组中每3个值读取为顶点数据。
  
• 定义顶点属性，解析VBO中的顶点数据
  glVertexAttribPointer函数的参数：
  第一个参数指定顶点属性编号，对应顶点着色器中使用的layout(location = 0)。
  第二个参数指定顶点属性大小，是一个vec3，它由3个值组成，所以大小是3。
  第三个参数指定数据的类型，这里是GL_FLOAT。
  第四个参数定义我们是否希望数据被标准化(Normalize)。
  第五个参数叫做步长(Stride)，它告诉我们在连续的顶点属性组之间的间隔。由于下个组位置数据在3个float之后，我们把步长设置为3*sizeof(float)。
  第六个参数的类型是void*，表示位置数据在缓冲中起始位置的偏移量(Offset)。由于位置数据在数组的开头，所以这里是0。

glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

• 每当绘制一个物体时，都必须重复定义顶点属性，并且跟顶点缓冲对象（顶点数据）绑定起来，为避免繁琐的过程，定义一个顶点数组对象（VAO），在VAO中配置顶点属性，与对应的顶点缓冲对象关联。这样在渲染的时候，只需绑定VAO就可以了。一个VAO里可有多个顶点属性编号。
  
• 定义VAO

/*定义VAO*/
unsigned int VAO;//声明对象
glGenVertexArrays(1, &VAO);//产生一个VAO
glBindVertexArray(VAO);//将该VAO绑定到当前的上下文中

• 理解VBO与VAO中的绑定操作（bind）
  在实际运用中，有多个VAO存在，一般一个物体就对应了一个VAO，当你需要渲染该物体时，就把该VAO绑定到上下文中。
  同样也存在多个VBO，不同的VBO可能储存着不同的数据（顶点，法向等）。当需要读取顶点数据时，就把该VBO绑定到上下文，利用特定的的属性编号来读取；当需要读取法向数据时，就把该VBO解绑，去绑定另外一个VBO。
  

1.2.4 顶点着色器与片段着色器

• 利用着色器语言编写顶点着色器源代码：
  第一行中声明了与OpenGL对应的版本号，以及使用核心模式；
  第二行中location=0声明了使用编号为0的顶点属性，将数据存到一个三维向量中
  后面的main函数将三维向量赋值到gl_position中作为顶点着色器的输出

const char *vertexShaderSource = "#version 330 core\n"
"layout (location = 0) in vec3 aPos;\n"
"void main()\n"
"{\n"
"   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
"}\0";

• 创建顶点着色器

/*定义顶点着色器*/
unsigned int vertexShader;//声明顶点着色器对象
vertexShader = glCreateShader(GL_VERTEX_SHADER);//定义为顶点着色器对象
glShaderSource(vertexShader, 1,&vertextShaderSource,  NULL);//为着色器填充代码，1表示源代码只有1个字符串
glCompileShader(vertexShader);//编译着色器

• 片段着色器源代码

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

• 创建片段着色器

/*定义片段着色器*/
unsigned int fragmentShader;//声明片段着色器对象
fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);//定义为片段着色器对象
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);//为着色器填充代码，1表示源代码只有1个字符串
glCompileShader(fragmentShader);//编译着色器

• 将多个着色器合并，链接成一个着色器程序对象

//将多个着色器链接成着色器程序对象
unsigned int shaderProgram;
shaderProgram = glCreateProgram();//program只有单一形式，无可选项
glAttachShader(shaderProgram, vertexShader);//附加多个着色器
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);//链接着色器

• 着色器程序对象的使用

glUseProgram(shaderProgram);

1.2.5 绘制

• 要想使用VAO，要做的只是使用glBindVertexArray绑定VAO。从绑定之后起，我们应该绑定和配置对应的VBO和属性指针。（应该是与VBO绑定）
• 当我们打算绘制一个物体的时候，我们只要在绘制物体前简单地把VAO绑定到希望使用的设定上就行了。（应该是绑定到上下文中）

/ ..:: 初始化代码（只运行一次 (除非你的物体频繁改变)） :: ..
// 1. 绑定VAO
glBindVertexArray(VAO);
// 2. 把顶点数组复制到缓冲中供OpenGL使用
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 3. 设置顶点属性指针
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

[...]

// ..:: 绘制代码（渲染循环中） :: ..
// 4. 绘制物体
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
someOpenGLFunctionThatDrawsOurTriangle(GL_TRIANGLES, 0, 3);

• glDrawArrays函数，第一个参数是我们打算绘制的OpenGL图元的类型；第二个参数指定了顶点数组的起始索引；最后一个参数指定我们打算绘制多少个顶点，这里是3。
• 如果我们希望绘制多个三角形，那么必须增加顶点的数目为6：

float vertices[] = {
	-0.5f, -0.5f, 0.0f,
	0.5f, -0.5f, 0.0f,
	0.0f,  0.5f, 0.0f,
	0.5f, -0.5f, 0.0f,
	0.0f, 0.5f, 0.0f,
	0.8f,  0.8f, 0.0f,
};

glDrawArrays(GL_TRIANGLES, 0, 6);

• 顶点数据在读取的时候，按照逆时针方向读取三角形顶点，利用右手法则确定面的法向量。因此上述的两个三角形有一个为正面，一个为背面，在视角中可以设置去除背面：

glEnable(GL_CULL_FACE);//开启去除面功能
glCullFace(GL_BACK);//去除背面

1.2.6 EBO

• 在上节中利用顶点数据进行绘制时，相当于利用6个顶点绘制出了四边形，但实际上只需要4个顶点即可绘制，为节约资源，在VBO中储存不同的顶点数据，另外在索引缓冲对象（EBO）中指定顶点的绘制顺序。

float vertices[] = {
	-0.5f, -0.5f, 0.0f,//0
	0.5f, -0.5f, 0.0f,//1
	0.0f,  0.5f, 0.0f,//2
	0.8f,  0.8f, 0.0f,//3
};
unsigned int indices[] = {
	0,1,2,
	2,1,3};

• EBO的创建，先绑定EBO然后用glBufferData把索引复制到缓冲里

unsigned int EBO;//声明对象
glGenBuffers(1, &EBO);//定义缓冲对象
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);//缓冲对象类型与缓冲对象绑定
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);//绑定索引数据

• 绘制，glDrawElements函数从当前绑定到GL_ELEMENT_ARRAY_BUFFER目标的EBO中获取索引。这意味着必须在每次要用索引渲染一个物体时绑定相应的EBO。

glBindVertexArray(VAO);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glUseProgram(shaderProgram);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

• 但顶点数组对象同样也可以保存索引缓冲对象的绑定状态。 VAO绑定时正在绑定的索引缓冲对象会被保存为VAO的元素缓冲对象。绑定VAO的同时也会自动绑定EBO。
  
• 因此，实际上在渲染时只需要绑定VAO也是可以的。

// ..:: 初始化代码 :: ..
// 1. 绑定顶点数组对象
glBindVertexArray(VAO);
// 2. 把我们的顶点数组复制到一个顶点缓冲中，供OpenGL使用
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 3. 复制我们的索引数组到一个索引缓冲中，供OpenGL使用
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
// 4. 设定顶点属性指针
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

[...]

// ..:: 绘制代码（渲染循环中） :: ..
glUseProgram(shaderProgram);
glBindVertexArray(VAO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0)
glBindVertexArray(0);

1.2.7 练习

1. 使用两个VAO，VBO绘制两个三角形
由于由需要两个VAO，因此需要定义成数组，因为不同的VAO对应着不同的顶点数据，因此需要分别绑定VBO，顶点数据和顶点属性。
glGenBuffers函数的第二个参数为指向对象的指针，此时定义的是对象数组VBO[2]，在glGenBuffers函数中直接使用数组名VBO作为参数，是因为数组名在参数传递中，传递的是一个指向数组的指针。

/*定义VAO与VBO*/
unsigned int VAO[2];//声明对象
glGenVertexArrays(2, VAO);//产生一个VAO
unsigned int VBO[2];//声明对象
glGenBuffers(2, VBO);//定义缓冲对象

/*第一个三角形设置*/
glBindVertexArray(VAO[0]);//将该VAO绑定到当前的上下文中
glBindBuffer(GL_ARRAY_BUFFER, VBO[0]);//将缓冲对象类型和缓冲对象绑定
glBufferData(GL_ARRAY_BUFFER, sizeof(firstTriangle), firstTriangle, GL_STATIC_DRAW);//将顶点数据绑定到当前缓冲对象中
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

/*第二个三角形设置*/
glBindVertexArray(VAO[1]);//将该VAO绑定到当前的上下文中
glBindBuffer(GL_ARRAY_BUFFER, VBO[1]);//将缓冲对象类型和缓冲对象绑定
glBufferData(GL_ARRAY_BUFFER, sizeof(secondTriangle), secondTriangle, GL_STATIC_DRAW);//将顶点数据绑定到当前缓冲对象中
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

绘制的时候只需绑定VAO到上下文，就可进行绘制

glUseProgram(shaderProgram);
/*第一个三角形绘制*/
glBindVertexArray(VAO[0]);
glDrawArrays(GL_TRIANGLES, 0, 3);
/*第二个三角形绘制*/
glBindVertexArray(VAO[1]);
glDrawArrays(GL_TRIANGLES, 0, 3);