【OpenGL】LearnOpenGL学习笔记02 - 绘制三角形、矩形-CSDN博客

本文链接：https://blog.csdn.net/weixin_44506615/article/details/149864439

上接: https://blog.csdn.net/weixin_44506615/article/details/149861824
完整代码：https://gitee.com/Duo1J/learn-open-gl

一、渲染管线

在开始之前，我们先简单了解一下图形渲染管线
在渲染3D物体时，我们常用到的一种几何结构为网格模型 (Mesh)，其为一系列点的集合，各点相连组成三角面
首先CPU会进行一些前置操作(数据处理、缓冲绑定等)后将产生数据提交 (DrawCall) 到GPU，GPU在接收到数据后会执行一系列操作来将3D场景数据转换为2D图像，这个过程就称作渲染管线
一个最简单的渲染管线通常有以下步骤:

图片来源LearnOpenGL
1. 顶点着色器 (Vertex Shader)
对传入的顶点数据进行操作，如位移等，此外还会进行一系列的坐标变换(MVP变换)，返回操作后的顶点坐标及其他属性
2. 光栅化
将三维几何图元转换为屏幕上的二维像素片元，通常会在这个环节进行视口变换，片元生成，裁剪等
3. 片元(片段、像素)着色器 (Fragment Shader/Pixel Shader)
处理光栅化生成的每个片元，进行光照模型计算、纹理采样等操作，返回片元的颜色值及其他属性
最后进行深度测试、模板测试、混合后写入帧缓冲区
如今大多数显卡都有成千上万个小处理核心，它们运行着各自的小程序，从而在渲染管线中快速并行的处理渲染数据，这些小程序就是上述的着色器(Shader)

二、绘制三角形

我们先定义一下输入的顶点数据
这段数据表示三个点，为三角形的三个顶点
这些点的坐标值范围在[-1,1]之间，称为标准化设备坐标(NDC)

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

1. 顶点缓冲对象(Vertex Buffer Objects - VBO)
VBO为显存中的一块缓冲区，其用来存储大量的顶点数据，在渲染前由CPU将数据发送到VBO中
我们可以通过以下代码来对VBO进行创建、绑定、设置数据

// 创建缓冲
unsigned int VBO;
glGenBuffers(1, &VBO);
// 绑定创建的缓冲到VBO
glBindBuffer(GL_ARRAY_BUFFER, VBO);
// 写入数据到VBO
// 这里第四个参数表示我们希望显卡如何管理给定的数据
// GL_STATIC_DRAW 数据不会或几乎不会改变
// GL_DYNAMIC_DRAW 数据会被改变很多
// GL_STREAM_DRAW 数据每次绘制时都会改变
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

2. 顶点属性
我们已经将顶点数据传入到了VBO中，但是GPU还不知道要怎么去解析这些顶点数据，所以接下来我们要配置顶点解析的方式

// 设置顶点属性
// 参数1: 设置位置值为0，对于顶点着色器中的layout(location = 0)
// 参数2: 顶点属性的大小，vec3，所以大小是3
// 参数3: 数据类型, float
// 参数4: 是否需要将数据标准化，会将数据映射到[-1,1]或是[0,1](取决于是否unsigned)
// 参数5: 步长
// 参数6: 数据偏移量
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

3. 顶点数组对象(Vertex Array Object - VAO)
我们可以将顶点数据VBO以及顶点属性都存储在一块特定的缓冲区中，在之后的绘制中我们就只需要切换这块特定的缓冲区即可，这块缓冲区就叫做VAO
接下来我们来创建、绑定VAO，请注意，绑定VAO需要在VBO之前进行

// 创建VAO
unsigned int VAO;
glGenVertexArrays(1, &VAO);
// 绑定VAO
glBindVertexArray(VAO);

// ...VBO和顶点属性相关

// 解绑VBO
glBindBuffer(GL_ARRAY_BUFFER, 0);
// 解绑VAO
glBindVertexArray(0);

4. 顶点着色器(Vertex Shader)
接下来我们需要编写顶点着色器的代码
在OpenGL中使用名为GLSL(OpenGL Shading Language)语言来编写
我们会先使用硬编码的方式进行编写，之后会拆分到一个独立的文件中

// 版本号
#version 330 core
// 声明输入坐标，从位置0
layout (location = 0) in vec3 aPos;

void main()
{
	// 设置顶点着色器的输出
    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
}

接下来我们需要创建着色器对象，传入我们编写的代码并且编译它以供GPU使用

// 顶点着色器代码
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, &vertexShaderSource, NULL);
// 编译
glCompileShader(vertexShader);

// 可选，判断着色器是否编译成功
int success;
char infoLog[512];
glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
if (!success)
{
	glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
	std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
	glfwTerminate();
	return -1;
}

5. 片元(片段、像素)着色器(Fragment Shader/Pixel Shader)
接下来我们通过片元着色器计算像素最后的颜色输出

#version 330 core
// 输出颜色 vec4(r,g,b,a)
out vec4 FragColor;

void main()
{
	// 固定输出橘黄色
    FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
}

同样，我们需要创建并编译片元着色器

// 片元着色器代码
const char* fragmentShaderSource = "#version 330 core\n"
"layout (location = 0) out vec4 FragColor;\n"
"void main()\n"
"{\n"
"   FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
"}\0";

// 创建片元着色器
unsigned int fragmentShader;
fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);

glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
if (!success)
{
	glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
	std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;
	glfwTerminate();
	return -1;
}

6. 着色器程序
着色器程序对象是多个着色器链接后的结果

// 创建着色器程序
unsigned int shaderProgram;
shaderProgram = glCreateProgram();
// 添加着色器
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
// 链接
glLinkProgram(shaderProgram);

glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
if (!success)
{
	glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
	std::cout << "[Error] Shader program link failed!\n" << infoLog << std::endl;
	glfwTerminate();
	return -1;
}

// 链接完成后即可删除着色器对象
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);

7. 绘制三角形
准备就绪! 接下来开始绘制三角形，在我们的主循环中，输入处理之后

// 使用着色器程序
glUseProgram(shaderProgram);
// 绑定接下来要使用的VAO
glBindVertexArray(VAO);
// 绘制
glDrawArrays(GL_TRIANGLES, 0, 3);

编译执行，顺利的话可以看到
绘制三角形

三、绘制矩形

1. 元素(索引)缓冲对象(Element(Index) Buffer Object - EBO)
接下来我们来了解第三种缓冲对象，EBO
EBO中存储的实际上是一系列成组的索引，这些索引表示我们应该用VBO中的那些顶点来绘制一个三角形
现在我们修改一下我们的vertices数据，并增加indices数据

// 顶点数据，基于标准化设备坐标(NDC)
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   // 左上角
};

// 索引数据
unsigned int indices[] = {
	0, 1, 3, // 第一个三角形
	1, 2, 3  // 第二个三角形
};

现在我们顶点数据中有四个点，来表示矩形的四个角的坐标
而indices中有六个索引数据，每三个一组，共两组
第一组：0, 1, 3 表示GPU应该使用VBO中的第0个，第1个和第3个顶点来组成一个三角形
第二组：1, 2, 3 则表示GPU应该使用VBO中的第1个，第2个和第3个顶点来组成一个三角形
EBO的创建绑定与VBO类似

// VAO、VBO创建、绑定、设置

// 创建EBO
unsigned int EBO;
glGenBuffers(1, &EBO);
// 绑定EBO
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
// 设置EBO数据
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

//解绑VAO、VBO
//请注意这里不解绑EBO，在VAO中依然会使用到

然后修改绘制调用的指令

	// 绘制
	// glDrawArrays(GL_TRIANGLES, 0, 3);
	// 通过EBO绘制
	// 参数2: 绘制顶点的个数
	// 参数3: 索引的数据类型
	// 偏移量
	glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

编译运行，顺利的话可以看到
绘制矩形
我们还可以启用线框模式来查看绘制的两个三角形

glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

线框模式绘制矩形

全部代码

#include <iostream>

#include <glad/glad.h>
#include <GLFW/glfw3.h>
 
// 顶点数据，基于标准化设备坐标(NDC)
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   // 左上角
};

// 索引数据
unsigned int indices[] = {
	0, 1, 3, // 第一个三角形
	1, 2, 3  // 第二个三角形
};

// 顶点着色器代码
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";

// 片元着色器代码
const char* fragmentShaderSource = "#version 330 core\n"
"layout (location = 0) out vec4 FragColor;\n"
"void main()\n"
"{\n"
"   FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
"}\0";

void ProcessInput(GLFWwindow* window)
{
	if (glfwGetKey(window, GLFW_KEY_ESCAPE))
	{
		glfwSetWindowShouldClose(window, true);
	}
}

void OnSetFrameBufferSize(GLFWwindow* window, int width, int height)
{
	glViewport(0, 0, width, height);
}

int main()
{
	glfwInit();
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

	GLFWwindow* window = glfwCreateWindow(1280, 720, "OpenGLRenderer", NULL, NULL);
	if (window == NULL)
	{
		std::cout << "Failed to create GLFW window" << std::endl;
		glfwTerminate();
		return -1;
	}
	glfwMakeContextCurrent(window);

	if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
	{
		std::cout << "Failed to initialize GLAD" << std::endl;
		return -1;
	}

	glfwSetFramebufferSizeCallback(window, OnSetFrameBufferSize);

	// 创建VAO
	unsigned int VAO;
	glGenVertexArrays(1, &VAO);
	// 绑定VAO
	glBindVertexArray(VAO);

	// 创建缓冲
	unsigned int VBO;
	glGenBuffers(1, &VBO);
	// 绑定创建的缓冲到VBO
	glBindBuffer(GL_ARRAY_BUFFER, VBO);
	// 写入数据到VBO
	// 这里第四个参数表示我们希望显卡如何管理给定的数据
	// GL_STATIC_DRAW 数据不会或几乎不会改变
	// GL_DYNAMIC_DRAW 数据会被改变很多
	// GL_STREAM_DRAW 数据每次绘制时都会改变
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

	// 设置顶点属性
	// 参数1: 设置位置值为0，对于顶点着色器中的layout(location = 0)
	// 参数2: 顶点属性的大小，vec3，所以大小是3
	// 参数3: 数据类型, float
	// 参数4: 是否需要将数据标准化，会将数据映射到[-1,1]或是[0,1](取决于是否unsigned)
	// 参数5: 步长
	// 参数6: 数据偏移量
	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
	glEnableVertexAttribArray(0);

	// 创建EBO
	unsigned int EBO;
	glGenBuffers(1, &EBO);
	// 绑定EBO
	glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
	// 设置EBO数据
	glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

	// 解绑VBO
	glBindBuffer(GL_ARRAY_BUFFER, 0);
	// 解绑VAO
	glBindVertexArray(0);

	// 创建顶点着色器
	unsigned int vertexShader;
	vertexShader = glCreateShader(GL_VERTEX_SHADER);
	// 设置着色器代码，第二个参数为传入的源码字符串数量
	glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
	// 编译
	glCompileShader(vertexShader);

	// 可选，判断着色器是否编译成功
	int success;
	char infoLog[512];
	glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
	if (!success)
	{
		glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
		std::cout << "[Error] Vertex shader compile failed!\n" << infoLog << std::endl;
		glfwTerminate();
		return -1;
	}

	// 创建片元着色器
	unsigned int fragmentShader;
	fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
	glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
	glCompileShader(fragmentShader);

	glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
	if (!success)
	{
		glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
		std::cout << "[Error] Fragment shader compile failed!\n" << infoLog << std::endl;
		glfwTerminate();
		return -1;
	}

	// 创建着色器程序
	unsigned int shaderProgram;
	shaderProgram = glCreateProgram();
	// 添加着色器
	glAttachShader(shaderProgram, vertexShader);
	glAttachShader(shaderProgram, fragmentShader);
	// 链接
	glLinkProgram(shaderProgram);

	glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
	if (!success)
	{
		glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
		std::cout << "[Error] Shader program link failed!\n" << infoLog << std::endl;
		glfwTerminate();
		return -1;
	}

	// 链接完成后即可删除着色器对象
	glDeleteShader(vertexShader);
	glDeleteShader(fragmentShader);

	while (!glfwWindowShouldClose(window))
	{
		glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
		glClear(GL_COLOR_BUFFER_BIT);

		ProcessInput(window);

		// 使用着色器程序
		glUseProgram(shaderProgram);
		// 绑定接下来要使用的VAO
		glBindVertexArray(VAO);

		// 线框模式
		//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

		// 绘制
		// glDrawArrays(GL_TRIANGLES, 0, 3);
		// 通过EBO绘制
		// 参数2: 绘制顶点的个数
		// 参数3: 索引的数据类型
		// 偏移量
		glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

		glfwSwapBuffers(window);
		glfwPollEvents();
	}

	glfwTerminate();
	return 0;
}