OpenGL学习笔记(1) 画一个三角形

悠悠 2022-01-08 01:13 296阅读 0赞

最近找实习有一丢丢蛋疼，沉迷鬼泣5，四周目通关，又不想写代码，写篇笔记复习一下，要好好学图形学啊

## 用OpenGL画一个三角形 ##

### 项目的简介 ###

记录一下跟着[learnOpenGL][]学习的过程  
笔记里的代码放在github上，依赖都用相对路径配好了，直接下载就能用，IDE是VS2017,[代码][Link 1]  
选择Triangle项目作为启动项可以测试这个代码  
使用的库是glad和glfw，感觉用glad和glfw开发OpenGL的方式和DX挺像的，也有可能是我见识少, 感觉很多教材用来教学的库都是GLUT, 嘛，学图形学的话也不必纠结这些(大概

#### 项目的架构 ####

1.窗口初始化  
2.渲染

int main()
    {
    	BaseInit();//窗口初始化，键盘、鼠标等事件的绑定
    	MainLoop();//渲染相关
    	return 0;
    }

要测试某个代码，比如说画三角形的，画正方体的，在MainLoop里实现

void MainLoop()
    {
    	NormalTriangle();
    }

#### 渲染管线 ####

learnOpenGL里的渲染管线的抽象描述是这样的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3dlbmxhaTIwMDg_size_16_color_FFFFFF_t_70]  
我们如果要画三角形的画，其实只要关注顶点着色器和片段着色器部分就好，其他操作管线会帮我们完成  
从代码的层面理解画一个三角形的逻辑的话大概是

1.  创建一个9个元素的float数组，代表三角形的坐标
2.  编译着色器
3.  创建顶点数组对象(Vertex Array Object)VAO并绑定
4.  创建顶点缓存数组(Vertex Buffer Object)VBO并绑定
5.  使用图元为三角形的绘图方法画三角形

当然不要忘记使用着色器程序，在我的理解里，VAO是在OpenGL里用来识别渲染对象的一个标识，在使用glad和glfw的情况下，OpenGL的对象都是用无符号整形数据来存储。如果想要同时画两个物体，那么只要在两个VAO之间切换绑定即可

#### 窗口初始化 ####

//窗口初始化
    void BaseInit()
    {
    	glfwInit();//初始化
    	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);//配置GLFW
    	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);//配置GLFW
    	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);//
    	glfwWindowHint(GLFW_RESIZABLE, GL_TRUE);
    	screenWidth = 800.0f;
    	screenHeight = 600.0f;
    	//创建窗口
    	glWindow = glfwCreateWindow(screenWidth, screenHeight, "LearnOpenGL", nullptr, nullptr);
    	if (glWindow == nullptr)
    	{
    		cout << "Failed to create GLFW window" << endl;
    		glfwTerminate();
    		return;
    	}
    	glfwMakeContextCurrent(glWindow);
    
    	if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    	{
    		std::cout << "Failed to initialize GLAD" << std::endl;
    		return;
    	}
    }

这段代码没什么好说的，做一些窗口和库的初始化

#### 画三角形 ####

void NormalTriangle()
    {
    	float Triangle[] = {
    		-0.9f, -0.5f, 0.0f,  // left 
    		-0.0f, -0.5f, 0.0f,  // right
    		-0.45f, 0.5f, 0.0f,  // top 
    	};
    
    	//编译着色器
    	Shader ourShader("vertex_1.vs", "fragment_1.fs");//编译着色器
    	ourShader.use();//使用着色器
    	unsigned int VBO, VAO;
    	glGenVertexArrays(1, &VAO); //生成顶点数组对象
    	glGenBuffers(1, &VBO);//生成顶点缓冲区
    	
    	glBindVertexArray(VAO);// 绑定顶点数组对象
    	glBindBuffer(GL_ARRAY_BUFFER, VBO);//绑定顶点缓冲区
    	glBufferData(GL_ARRAY_BUFFER, sizeof(Triangle), Triangle, GL_STATIC_DRAW);//设置缓冲区中的数据
    	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);	// 设置对缓冲区访问的步长为3以及相位为0，告诉着色器，这个数据输入到着色器的第一个(索引为0)输入变量，数据的长度是3个float
    	glEnableVertexAttribArray(0);
    
    	while (!glfwWindowShouldClose(glWindow))
    	{
    		glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
    		glClear(GL_COLOR_BUFFER_BIT);
    		//画三角形
    		glBindVertexArray(VAO);//绑定顶点数组对象
    		glDrawArrays(GL_TRIANGLES, 0, 3);
    		glfwPollEvents();
    		glfwSwapBuffers(glWindow);
    	}
    }

将编译着色器的部分封装起来代码容易理解多了，顶点着色器和片段着色器的代码都比较简单

//vertex_1.vs 顶点着色器
    #version 330 core
    layout (location = 0) in vec3 aPos;//输入的变量的位置为0，所以glVertexAttribPointer的第一个参数为0
    
    void main()
    {
        gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);//输出的变量叫gl_Position
    }

//fragment_1.fs 片段着色器
    #version 330 core
    out vec4 FragColor;//输出一个颜色
    
    void main()
    {
        FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
    }

## 最终的效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3dlbmxhaTIwMDg_size_16_color_FFFFFF_t_70 1]

#### 画一个彩色的三角形 ####

void ColourfulTriangle()
    {
    	//颜色会在光栅化阶段被硬件进行插值计算
    	float vertices[] = {
    		// 位置              // 颜色
    		 0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,   // 右下
    		-0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,   // 左下
    		 0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f    // 顶部
    	};
    
    	//编译着色器
    	Shader ourShader("vertex_4.vs", "fragment_4.fs");
    	ourShader.use();//glUseProgram(shaderProgram);
    	unsigned int VBO, VAO;
    	//顶点数组
    	glGenVertexArrays(1, &VAO);
    	glBindVertexArray(VAO);
    
    	//绑定顶点数组缓存
    	glGenBuffers(1, &VBO);
    	glBindBuffer(GL_ARRAY_BUFFER, VBO);
    	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
    
    	// 位置属性
    	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);//设置数据访问的指针
    	glEnableVertexAttribArray(0);
    	// 颜色属性
    	glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));//设置数据访问的指针
    	glEnableVertexAttribArray(1);
    
    
    	while (!glfwWindowShouldClose(glWindow))
    	{
    		glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
    		glClear(GL_COLOR_BUFFER_BIT);
    		//draw
    		glBindVertexArray(VAO);
    		glDrawArrays(GL_TRIANGLES, 0, 6);
    		glBindVertexArray(0);
    		glfwPollEvents();
    		glfwSwapBuffers(glWindow);
    	}
    }

在数组里加入了颜色的属性，要把属性传入着色器，设置数据访问的指针的步长和相位就好，步长是6，相位是3  
着色器的代码

//vertex_4.vs
    #version 330 core
    layout (location = 0) in vec3 aPos;   // 位置变量的属性位置值为 0 
    layout (location = 1) in vec3 aColor; // 颜色变量的属性位置值为 1
    
    out vec3 ourColor; // 向片段着色器输出一个颜色
    
    void main()
    {
        gl_Position = vec4(aPos, 1.0);
        ourColor = aColor; // 将ourColor设置为我们从顶点数据那里得到的输入颜色
    }

//fragment_4.fs
    #version 330 core
    out vec4 FragColor;  
    in vec3 ourColor;
    
    void main()
    {
        FragColor = vec4(ourColor, 1.0);
    }

最终的效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3dlbmxhaTIwMDg_size_16_color_FFFFFF_t_70 2]

编译着色器这里省了很多代码，贴上Shader.cpp和Shader.h，其实只是抄learnOpenGL给的源码

#include "Shader.h"
    #include <string>
    
    void Shader::use()
    {
    	glUseProgram(ID);
    }
    
    void Shader::setBool(const std::string & name, bool value) const
    {
    	glUniform1i(glGetUniformLocation(ID, name.c_str()), (int)value);
    }
    
    void Shader::setInt(const std::string & name, int value) const
    {
    	glUniform1i(glGetUniformLocation(ID, name.c_str()), value);
    }
    
    void Shader::setFloat(const std::string & name, float value) const
    {
    	glUniform1f(glGetUniformLocation(ID, name.c_str()), value);
    }

#ifndef SHADER_H
    #define SHADER_H
    #include "glfw3.h"
    #include "glad.h"; // 包含glad来获取所有的必须OpenGL头文件
    #include <string>
    #include <fstream>
    #include <sstream>
    #include <iostream>
    #define TEXTURE_PATH (std::string("Resources/Texture/"))	//纹理的路径
    #define SHADER_PATH (std::string("Resources/Shader/"))		//Shader的路径
    //检查Shader是否编译正确
    inline void assertShader(unsigned int shaderObj, std::string&& shaderName)
    {
    	int success = 0;
    	char infoLog[512];
    	glGetShaderiv(shaderObj, GL_COMPILE_STATUS, &success);
    	if (!success)
    	{
    		glGetShaderInfoLog(shaderObj, 512, NULL, infoLog);
    		std::cout << "ERROR::SHADER" << shaderName << "::COMPILATION_FAILED\n" << infoLog << std::endl;
    	}
    }
    //检查着色器程序是否编译正确
    inline void assertProgram(unsigned int programObj, std::string&& programName)
    {
    	int success = 0;
    	char infoLog[512];
    	glGetProgramiv(programObj, GL_LINK_STATUS, &success);
    	if (!success)
    	{
    		glGetShaderInfoLog(programObj, 512, NULL, infoLog);
    		std::cout << "ERROR::PROGRAM::" << programName << "::COMPILATION_FAILED\n" << infoLog << std::endl;
    	}
    }
    class Shader
    {
    public:
    	// 程序ID
    	unsigned int ID;
    	Shader() : ID(-1)
    	{
    
    	};
    	// 构造器读取并构建着色器
    	template <typename S1, typename S2 = std::string>
    	Shader(S1&& vertexPath, S2&& fragmentPath)
    	{
    		// 1. 从文件路径中获取顶点/片段着色器
    		std::string vertexCode;
    		std::string fragmentCode;
    		std::ifstream vShaderFile;
    		std::ifstream fShaderFile;
    		// 保证ifstream对象可以抛出异常：
    		vShaderFile.exceptions(std::ifstream::failbit | std::ifstream::badbit);
    		fShaderFile.exceptions(std::ifstream::failbit | std::ifstream::badbit);
    		try
    		{
    			// 打开文件
    			vShaderFile.open(SHADER_PATH + std::forward<S1>(vertexPath));
    			fShaderFile.open(SHADER_PATH + std::forward<S2>(fragmentPath));
    			std::stringstream vShaderStream, fShaderStream;
    			// 读取文件的缓冲内容到数据流中
    			vShaderStream << vShaderFile.rdbuf();
    			fShaderStream << fShaderFile.rdbuf();
    			// 关闭文件处理器
    			vShaderFile.close();
    			fShaderFile.close();
    			// 转换数据流到string
    			vertexCode = vShaderStream.str();
    			fragmentCode = fShaderStream.str();
    		}
    		catch (std::ifstream::failure e)
    		{
    			std::cout << "ERROR::SHADER::FILE_NOT_SUCCESFULLY_READ" << std::endl;
    		}
    		const char* vShaderCode = vertexCode.c_str();
    		const char* fShaderCode = fragmentCode.c_str();
    
    		unsigned int vertex, fragment;
    
    		vertex = glCreateShader(GL_VERTEX_SHADER);
    		glShaderSource(vertex, 1, &vShaderCode, NULL);
    		glCompileShader(vertex);
    		assertShader(vertex, "VertexShader");
    
    		fragment = glCreateShader(GL_FRAGMENT_SHADER);
    		glShaderSource(fragment, 1, &fShaderCode, NULL);
    		glCompileShader(fragment);
    		assertShader(fragment, "FragmentShader");
    
    		ID = glCreateProgram();
    		glAttachShader(ID, vertex);
    		glAttachShader(ID, fragment);
    		glLinkProgram(ID);
    
    		assertProgram(ID, "ShaderProgram");
    
    		// 删除着色器，它们已经链接到我们的程序中了，已经不再需要了
    		glDeleteShader(vertex);
    		glDeleteShader(fragment);
    	}
    	// 使用/激活程序
    	void use();
    	// uniform工具函数
    	void setBool(const std::string &name, bool value) const;
    	void setInt(const std::string &name, int value) const;
    	void setFloat(const std::string &name, float value) const;
    };
    
    #endif

转载于:https://www.cnblogs.com/NightFrost/p/10792607.html

[learnOpenGL]: https://learnopengl-cn.github.io/#
[Link 1]: https://github.com/haowenlai2008/OpenGLGame
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3dlbmxhaTIwMDg_size_16_color_FFFFFF_t_70]: /images/20211220/44378f330eee4632b0580fd83663136b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3dlbmxhaTIwMDg_size_16_color_FFFFFF_t_70 1]: /images/20211220/aa8d98644ada48f0becde595bc786233.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhb3dlbmxhaTIwMDg_size_16_color_FFFFFF_t_70 2]: /images/20211220/a1b3672282b84725a3344ed574255477.png