OPENGL学习——绘制平面三角形

OPENGL是一个底层的图形库，可以跨平台，我们这里学习的是他的可编程渲染管线。我会对完整代码的每一句做讲解。请仔细读一读。
推荐一个学习网站https://learnopengl-cn.github.io/

一、创建一个窗口

完整代码
说明：这一部分主要作为了解，建立窗口的过程是固定的，没有什么知识可言。

#include <glad/glad.h>
#include <GLFW/glfw3.h>
//导入的两个OPENGL库，注意这俩是有顺序的
#include <iostream>

void framebuffer_size_callback(GLFWwindow* window, int width, int height);。
void processInput(GLFWwindow *window);
//这两个函数是回调函数，第一个是调节窗口大小的，第二个是退出窗口的。


int main()
{

    glfwInit();//初始化GLFW
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);//主版本号
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);//附版本号
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
    //设置为可编程渲染模式

    GLFWwindow* window = glfwCreateWindow(800, 600, "LearnOpenGL", NULL, NULL);
    //建立一个GLFW窗口，前边两个是长宽，第三个是窗口标题，后边两个NULL不用管，写NULL就行。
    if (window == NULL)//如果窗口创建失败了
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();//销毁窗口
        return -1;//退出main
    }
    glfwMakeContextCurrent(window);//这个也是必须写的，没有为啥
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);
//设置这个回调

    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
    //这个glad是给OPENGL做函数指针用的，它也需要创建，如果创建失败了就退出，和上边那个GLFW的一样。
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }    

    while (!glfwWindowShouldClose(window))
    {
   //这块叫做渲染循环，因为你要绘制的东西肯定是动态的，咱这是3D，所以东西必须得是循环绘制的，很好理解。

        processInput(window);//这个自己看去

        glfwSwapBuffers(window);//这个是绘制，告诉OPENGL需要绘制。
        glfwPollEvents();//检测触发事件，我需要检测是否触发事件。在这里是按ESC退出，实现这个在processInput里边。
    }


    glfwTerminate();//销毁窗口，上边出现过。
    return 0;
}


void processInput(GLFWwindow *window)
{
    if(glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)//如果点击ESC
        glfwSetWindowShouldClose(window, true);//正常退出
}

void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{

    glViewport(0, 0, width, height);
    //让视口，也就是渲染区域大小跟着窗口大小变，比如我全屏了，那么渲染的区域也得是全屏。
}

二、创建三角形
基本概念的认识：
1.图元：组成图形的最小单位，我们这里是三角形，这节课画的也是三角形。这个怎么理解呢，你去找一个OBJ模型，然后放大了看，你会发现这个OBJ的3D模型是由一个一个的三角形组成的（有的是四边形），这个三角形（或是四边形）就叫图元。

2.光栅化：我们的显示屏叫光栅显示屏，也就是图形显示都是用像素块显示的，这个大家都知道。把图形转化成像素块的过程就叫光栅化。

3.着色器（Shader）：运行在GPU上的程序，OPENGL里分为两个，顶点着色器和片段着色器，前者是绘制顶点的，你看不到，后者是让GPU往你电脑屏上显示东西的，点连成面。还有一个着色器叫几何着色器，我们不咋用。当然也可以做计算，看这个程序你怎么写了。

4.渲染：就是显示东西的意思。

5.VBO,EBO,VAO：VBO叫顶点缓冲对象，VAO叫顶点数组对象，EBO叫索引缓冲对象。啥意思呢，就是说VBO是存顶点的，EBO是存顶点绘制顺序的，最后这俩都要放进VAO里，方便管理。这个要在程序里体会。
完整代码

#include <glad/glad.h>
#include <GLFW/glfw3.h>
#include <iostream>
void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow *window);
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;
//两个着色器程序
//顶点着色器
const char *vertexShaderSource = "#version 330 core\n"//版本号
    "layout (location = 0) in vec3 aPos;\n"//要从0号通道接收数据，定义的顶点数据。vec3是个向量。
    "void main()\n"
    "{\n"
    "   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
    //这个就是告诉着色器是顶点了gl_Position是自带的一个变量。
    "}\0";
const char *fragmentShaderSource = "#version 330 core\n"
    "out vec4 FragColor;\n"
    "void main()\n"
    "{\n"
    "   FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
    //绘图了，FragColor 也是自带的，前边是RGB值。
    "}\n\0";

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(SCR_WIDTH, SCR_HEIGHT, "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);

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


    //建立shader
    unsigned int 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;
    }
    // fragment shader//和上边一样
    unsigned int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
    glCompileShader(fragmentShader);
    // check for shader compile errors
    glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
    if (!success)
    {
        glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;
    }
    // 连接shaders
    unsigned int shaderProgram = glCreateProgram();
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);
    //查错
    glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
    if (!success) {
        glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << std::endl;
    }
    glDeleteShader(vertexShader);//给他俩删了
    glDeleteShader(fragmentShader);


    float vertices[] = {
        -0.5f, -0.5f, 0.0f, 
         0.5f, -0.5f, 0.0f, 
         0.0f,  0.5f, 0.0f 
    }; 
//定义顶点数据
    unsigned int VBO, VAO;//创建VAO,VBO对象
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);

    glBindVertexArray(VAO);

    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);//1、0号location录入数据2、三个数据3、浮点类型4、不转化为标准空间,一般都是FALSE 5、步长 6、位置在数组的开头，所以是0
    glEnableVertexAttribArray(0);//这个也是说0号location


    glBindBuffer(GL_ARRAY_BUFFER, 0); //绑定VAO
    glBindVertexArray(0); 


    while (!glfwWindowShouldClose(window))
    {

        processInput(window);

        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);//背景颜色
        glClear(GL_COLOR_BUFFER_BIT);//清空颜色缓冲区

        glUseProgram(shaderProgram);
        glBindVertexArray(VAO); 
        glDrawArrays(GL_TRIANGLES, 0, 3);//画三角形

        glfwSwapBuffers(window);
        glfwPollEvents();
    }

    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    glDeleteProgram(shaderProgram);


    glfwTerminate();
    return 0;
}


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


void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{

    glViewport(0, 0, width, height);
}