OpenGL学习笔记一

文章目录

• OpenGL学习笔记一
• • 一、渲染管线
  • 二、归一化设备坐标(Normalized Device Coordinate)
  • 三、顶点着色器中的向量
  • 四、绘制三角形

参考官方网站 Hello Triangle
本笔记旨在提炼关键内容，同时结合自己的理解和翻译更好地掌握opengl的内容

一、渲染管线

图形渲染管线（Graphics Pipeline，大多译为管线，实际上指的是一堆原始图形数据途经一个输送管道，期间经过各种变化处理最终出现在屏幕的过程）的划分大致如下：

其中各个部分职能如下：

1. 顶点着色器(Vertex Shader) 主要作用是把3D坐标变换为另一种3D坐标
   同时对坐标进行一定的变换。

2. 图元装配(Primitive Assembly)以顶点着色器的输出作为输入，装配基本的图元（三角形等等）。

3. 几何着色器(Geometry Shader)产生新的图元用来都在新的几何形状。

4. 光栅化(Rasterization Stage)把图元映射为像素，生成供片段着色器着色的片段，片段着色器运行之前会裁掉(Cliapping)看不到的部分用来提高渲染效率。

5. 片段着色器(Fragment Shader)计算像素的最终颜色，也是所有的OpenGL高级效果产生的地方，它会使用3D场景中的数据(光照，阴影，光的颜色啥的)计算最终的像素值。

6. Alpha测试与混合(Blending)，Alpha为透明度，这个透明度用来做透视除法(Respective Division)。

一个渲染管线最小也要有两个部分：顶点着色器和片段着色器。顶点着色器用来构造最基本的点，片段着色器用来直接输出像素，中间的涉及到顶点变化的部分可以直接忽略，可以没有3D场景，光照等信息。

二、归一化设备坐标(Normalized Device Coordinate)

归一化设备坐标(Normalized Device Coordinate) 这里官方的翻译我觉得不太行，Normalized翻译成归一化好理解的多，这个坐标指的是OpenGL的坐标输入必须在[-1.0f, +1.0f] 之间，例如以下三个点：

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

三、顶点着色器中的向量

GLSL中的向量有四维rgbw，w用于透视除法；
rgbw都是float类型的数据，一个float 4 字节，所以顶点着色器中一个顶点需要12个字节，顶点数据之间没有冗余，紧密排列(Tightly Packed)，值与值之间没有空隙。这种排列方式如果你使用c语言多的话读到这里一定会会心一笑，这不就是c语言中常常使用的void* 还有buffer惯用的套路嘛， 事实上也 确实如此，我阅读到后面opengl的语法中关于int * 的使用还有buffer的处理的时候就发现其中c语言的内存处理思想在opengl数据处理这方面发挥了很大的作用。

四、绘制三角形

这部分的代码还有课后习题中的代码我一并放出来，注释详尽，具体请看注释：
核心函数main函数，其中提供了绘制三角形，绘制矩形(drawSquare())，绘制两个独立的三角形(drawTwoTriangles())，创建不同的shader程序来绘制两个不同颜色的三角形(drawTwoTrianglesWithDifferentColor())的函数。

#include <iostream>
#include <glad/glad.h>
#include <GLFW/glfw3.h>
#pragma comment(lib,"glfw3.lib")using namespace std;float vertices[];void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);
unsigned int creatShaderProc();void drawTriangle(); 		//基本的三角形绘制
void drawSquare();			//绘制一个矩形
void drawTwoTriangles();	//绘制两个三角形
unsigned int creatShaderProcOrange();	//创建橘色的Shader程序
void drawTwoTrianglesWithDifferentColor();	//绘制两个不同颜色的三角形int main()
{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_OPENGL_FORWARD_COMPAT, GL_TRUE);//创建窗口GLFWwindow* window = glfwCreateWindow(600, 600, "LearnOpenGL", NULL, NULL);if (window == NULL){std::cout << "Failed to create GLFW window" << std::endl;glfwTerminate();return -1;}glfwMakeContextCurrent(window); //设为当前窗口glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);  //当前窗口的回调函数，用以变化窗口大小//初始化glad，方便glfs函数调用if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)){std::cout << "Failed to initialize GLAD" << std::endl;return -1;}glViewport(0, 0, 200, 300); //设置显示区位置大小//渲染循环while (!glfwWindowShouldClose(window)){processInput(window);  //检测输入并做相应处理//渲染指令//清空屏幕glClearColor(0.1f, 0.1f, 0.1f, 1.0f);  //状态设置函数：设置清空后的屏幕颜色，此时为深蓝绿色glClear(GL_COLOR_BUFFER_BIT);  //状态使用函数：只清空颜色缓冲，其他缓冲位参数有GL_DEPTH_BUFFER_BIT和GL_STENCIL_BUFFER_BIT//drawSquare();     //正常的两个三角形拼接//drawTwoTriangles();   //两个单独的三角形drawTwoTrianglesWithDifferentColor();   //两个颜色不同的三角形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) //用户没有ESC按下，返回GLFW_RELEASEglfwSetWindowShouldClose(window, true);
}//创建着色器程序，创建多个着色器并链接他们
unsigned int creatShaderProc()
{//创建顶点着色器，顶点着色器源码//GLSL语言 GLSL330对应opengl3.3版本 核心模式//多行字符串 R"(...)"中”和（不能有间隔//layout位置 in ：输入 vec3：三维向量 apos：变量名const char ShaderSource[] = R"(#version 330 core  layout(location = 0) in vec3 aPos; void main(){gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);})";const GLchar* vertexShaderSource = (GLchar*)&ShaderSource;  //glShaderSource函数指定着色器源码时要是用这个类型的数据//编译顶点着色器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;}/////创建片段着色器const char fragSource[] = R"(#version 330 coreout vec4 FragColor;void main(){FragColor = vec4(1.0f, 0.2f, 0.2f, 1.0f);} )";const GLchar* fragShaderSource = (GLchar*)fragSource;unsigned int fragmentShader;fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);glShaderSource(fragmentShader, 1, &fragShaderSource, NULL);glCompileShader(fragmentShader);/////链接着色器unsigned int shaderProgram;shaderProgram = glCreateProgram();glAttachShader(shaderProgram, vertexShader); //着色器附加到程序对象glAttachShader(shaderProgram, fragmentShader);glLinkProgram(shaderProgram);//检测链接是否成功glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);if (!success) {glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);cout << "shader link to program failed!" << infoLog << endl;}return shaderProgram;
}///渲染一个三角形,采用VAO顶点数组对象
void drawTriangle()
{//顶点三维坐标float vertices[] = {-0.5f, -0.5f, 0.0f,0.5f, -0.5f, 0.0f,0.0f,  0.5f, 0.0f};unsigned int VBO;glGenBuffers(1, &VBO);  //1:要生成缓冲对象的数量，VBO:用来存储缓冲对象的数组//1.复制顶点数组到缓冲区供opengl使用//  glBindBuffer(GL_ARRAY_BUFFER, VBO);  //  可同时绑定多个不同类型的缓冲//  将数据复制到当前绑定缓冲的内存中，并指定显卡管理缓存的形式,STATIC,DYNAMIC,STREAM//  glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);/*2.设置顶点属性指针对于glVertexAttribPointer函数，参数依次表示：location值，顶点属性大小（维度），数据类型，是否标准化（映射到0或-1 到1 之间），步长（连续顶点属性组之间的间隔大小），位置数据距缓冲开始位置的偏移量*///  从当前绑定的GL_ARRAY_BUFFER中VBO中获取数据，顶点属性0现在会链接到他的顶点数据//  glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);//  glEnableVertexAttribArray(0); //以顶点属性值为参数，启用顶点属性，顶点属性默认是禁用的//3.使用着色器程序//    glUseProgram(shaderProgram); //激活程序对象//    glDeleteShader(vertexShader); //已经用不到着色器对象了，删除之//    glDeleteShader(fragmentShader);// 3. 绘制物体//someOpenGLFunctionThatDrawsOurTriangle();/*用VAO顶点数组对象保存顶点属性指针配置glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);glEnableVertexAttribArray(0);*/unsigned int VAO;glGenVertexArrays(1, &VAO);//1.绑定VAOglBindVertexArray(VAO);//2.绑定VBO并读取到缓冲区，并指定显卡管理缓存的方式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.绘制物体unsigned int shaderProgram = creatShaderProc();glUseProgram(shaderProgram);glBindVertexArray(VAO);glDrawArrays(GL_TRIANGLES, 0, 3);  //GL_TRIANGLE:要绘制的图元类型 0：顶点数组的起始索引，3：要绘制的顶点个数
}//渲染一个矩形，采用EBO索引缓冲
void drawSquare()
{//引入索引缓冲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开始! 0, 2, 3, // 第一个三角形0, 1, 2  // 第二个三角形};unsigned int VAO, VBO, EBO;//绑定VAO,VBO,EBO  VAO会存储VBO的调用，在VAO解绑前解绑VBO，否则存储就没了glGenVertexArrays(1, &VAO);glBindVertexArray(VAO);glGenBuffers(1, &VBO);glBindBuffer(GL_ARRAY_BUFFER, VBO);glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);glGenBuffers(1, &EBO);glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);//设置顶点属性指针glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);glEnableVertexAttribArray(0);unsigned int shaderProgram = creatShaderProc();//渲染循环glUseProgram(shaderProgram);glBindVertexArray(VAO);glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); //线框模式 polygon：多边形 GL_FRONT_AND_BACK：应用到图形的正面和背面 GL_LINE:用线条绘制glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);//glDrawArrays(GL_TRIANGLES, 0, 6); // set the count to 6 since we're drawing 6 vertices now (2 triangles); not 3!glBindVertexArray(0);
}void drawTwoTriangles() {       //画两个顶点挨着的三角形//引入索引缓冲float vertices[] = {  //顶点数据// first triangle-0.9f, -0.5f, 0.0f,  // left -0.0f, -0.5f, 0.0f,  // right-0.45f, 0.5f, 0.0f,  // top // second triangle0.0f, -0.5f, 0.0f,  // left0.9f, -0.5f, 0.0f,  // right0.45f, 0.2f, 0.0f   // top };unsigned int VAO, VBO;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, 3 * sizeof(float), (void*)0);glEnableVertexAttribArray(0);unsigned int shaderProgram = creatShaderProc();//渲染循环glUseProgram(shaderProgram);glBindVertexArray(VAO);//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); //线框模式 polygon：多边形 GL_FRONT_AND_BACK：应用到图形的正面和背面 GL_LINE:用线条绘制//使用buffer绘制而不是elementglDrawArrays(GL_TRIANGLES, 0, 6); // set the count to 6 since we're drawing 6 vertices now (2 triangles); not 3!glBindVertexArray(0);
}//绘制不同颜色
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* fragmentShader1Source = "#version 330 core\n"
"out vec4 FragColor;\n"
"void main()\n"
"{\n"
"   FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
"}\n\0";
const char* fragmentShader2Source = "#version 330 core\n"
"out vec4 FragColor;\n"
"void main()\n"
"{\n"
"   FragColor = vec4(1.0f, 1.0f, 0.0f, 1.0f);\n"
"}\n\0";//创建着色器程序，创建多个着色器并链接他们
unsigned int creatShaderProcOrange()
{//创建顶点着色器，顶点着色器源码//GLSL语言 GLSL330对应opengl3.3版本 核心模式//多行字符串 R"(...)"中”和（不能有间隔//layout位置 in ：输入 vec3：三维向量 apos：变量名const char ShaderSource[] = R"(#version 330 core  layout(location = 0) in vec3 aPos; void main(){gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);})";const GLchar* vertexShaderSource = (GLchar*)&ShaderSource;  //glShaderSource函数指定着色器源码时要是用这个类型的数据//编译顶点着色器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;}/////创建片段着色器const char fragSource[] = R"(#version 330 coreout vec4 FragColor;void main(){FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);} )";const GLchar* fragShaderSource = (GLchar*)fragSource;unsigned int fragmentShader;fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);glShaderSource(fragmentShader, 1, &fragShaderSource, NULL);glCompileShader(fragmentShader);/////链接着色器unsigned int shaderProgram;shaderProgram = glCreateProgram();glAttachShader(shaderProgram, vertexShader); //着色器附加到程序对象glAttachShader(shaderProgram, fragmentShader);glLinkProgram(shaderProgram);//检测链接是否成功glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);if (!success) {glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);cout << "shader link to program failed!" << infoLog << endl;}return shaderProgram;
}void drawTwoTrianglesWithDifferentColor() {       //画两个顶点挨着的三角形//引入索引缓冲float vertices0[] = {  //顶点数据// first triangle-0.9f, -0.5f, 0.0f,  // left -0.0f, -0.5f, 0.0f,  // right-0.45f, 0.5f, 0.0f,  // top };float vertices1[] = {  //顶点数据// second triangle0.0f, -0.5f, 0.0f,  // left0.9f, -0.5f, 0.0f,  // right0.45f, 0.2f, 0.0f   // top  };unsigned int VAOs[2], VBOs[2];glGenVertexArrays(2, VAOs);glGenBuffers(2, VBOs);glBindVertexArray(VAOs[0]);glBindBuffer(GL_ARRAY_BUFFER, VBOs[0]);glBufferData(GL_ARRAY_BUFFER, sizeof(vertices0), vertices0, GL_STATIC_DRAW);glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);	// Vertex attributes stay the sameglEnableVertexAttribArray(0);glBindVertexArray(VAOs[1]);glBindBuffer(GL_ARRAY_BUFFER, VBOs[1]);glBufferData(GL_ARRAY_BUFFER, sizeof(vertices1), vertices1, GL_STATIC_DRAW);glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, (void*)0);	// Vertex attributes stay the sameglEnableVertexAttribArray(0);unsigned int shaderProgram = creatShaderProc();unsigned int shaderProgramOrange = creatShaderProcOrange();glUseProgram(shaderProgram);glBindVertexArray(VAOs[0]);glDrawArrays(GL_TRIANGLES, 0, 3);glUseProgram(shaderProgramOrange);glBindVertexArray(VAOs[1]);glDrawArrays(GL_TRIANGLES, 0, 3);}