OpenGL学习笔记一



文章目录

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



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


一、渲染管线

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

opencv图像归一化处理目的 opengl归一化_着色器


其中各个部分职能如下:

  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_RELEASE
        glfwSetWindowShouldClose(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 core
    out 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.绑定VAO
    glBindVertexArray(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 triangle
		 0.0f, -0.5f, 0.0f,  // left
		 0.9f, -0.5f, 0.0f,  // right
		 0.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绘制而不是element
	glDrawArrays(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 core
    out 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 triangle
		 0.0f, -0.5f, 0.0f,  // left
		 0.9f, -0.5f, 0.0f,  // right
		 0.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 same
	glEnableVertexAttribArray(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 same
	glEnableVertexAttribArray(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);

}