小白的OpenGL3.3自学之路(3)OpenGL3.3之如何绘制一个三角形

老规矩，先上代码

//顶点缓冲绘制三角形
#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"
"void main()\n"
"{\n"
"   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
"}\0";
//const char *vertexShaderSource = "#version 330 core\n"
//"layout (location = 0) in vec3 aPos;\n"
//"out vec4 vertexColor;\n"
//"void main()\n"
//"{\n"
//"   gl_Position = vec4(aPos, 1.0);\n"
//"   vertexColor = vec4(0.5, 0.0, 0.0, 1.0);\n"
//"}\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"
"}\n\0";
//const char *fragmentShaderSource = "#version 330 core\n"
//"out vec4 FragColor;\n"
//"in vec4 vertexColor;\n"
//"void main()\n"
//"{\n"
//"   FragColor = vertexColor;\n"
//"}\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;
    }

    //编译顶点着色器
    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;
    }

    //编译片段着色器
    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::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
    }

    //着色器程序
    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);
        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;
    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);

    glBindBuffer(GL_ARRAY_BUFFER, 0);
    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);

    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);
}

结果自然是可以出图的:

OpenGL之不得不谈的VAO,VBO

首先我们来谈一下VBO。什么是VBO呢？VBO全名Vertex Buffer Object。顶点缓冲对象。VBO是在显卡存储空间中开辟出的一块内存缓存区，用于存储顶点的各类属性信息，如顶点位置坐标，顶点法向量，顶点颜色数据，顶点纹理坐标等。在渲染时，可以直接从VBO中取出顶点的各类属性数据，由于VBO在显存而不是在内存中，不需要从CPU传输数据，处理效率更高。
所以可以认为VBO就是显存中的一个存储区域，可以保持大量的顶点属性信息，而且可以开辟很多个VBO,每个VBO在OpenGL中有它唯一标识ID。这个ID对应具体的VBO的显存地址，通过这个ID可以对特定的VBO内的数据进行存取操作。
比如说我们可以创建一个VBO来存储顶点数据(x,y,z)，也可以用VBO存储顶点颜色，也可以用VBO存储纹理坐标值。说白了，VBO虽然叫顶点缓冲对象，但是它实际上干的是存储顶点数组数据的活，相反，VAO虽然全名叫顶点数组对象，但是它跟顶点数组半毛钱关系都没有。

那么这个VBO该怎么用呢？我们先来看一小段代码：

unsigned int VBO;
glGenBuffers(1,&VBO);
glBindBuffer(GL_ARRAY_BUFFER,VBO);
glBufferData(GL_ARRAY_BUFFER,sizeof(vertices),vertices,GL_STATIC_DRAW);

下面来解析这段代码。
unsigned int VBO 创建一个buffer
glGenBuffers(1,&VBO) 创建一个VBO缓冲对象的名字，相当于一个句柄(应用程序通过句柄访问相应对象的信息)
glBindBuffer(GL_ARRAY_BUFFER,VBO) 绑定缓冲对象，第一个参数决定了要绑定缓冲对象的 类型。顶点缓冲对象的缓冲类型是GL_ARRAY_BUFFER。索引缓冲对象的缓冲类型是GL_ELEMENT_ARRAY_BUFFER。
glBufferData(GL_ARRAY_BUFFER,sizeof(vertices),vertices,GL_STATIC_DRAW) 是为了把顶点数据传送到VBO。这个函数原型是void glBufferData(GLenum target, GLsizeiptr size, const GLvoid* data,GLenum usage)分配size个存储单位的OpenGL服务器内存，用于存储顶点数据或索引。第一个参数表示目标缓冲类型。这个参数与glBindBuffer中的第一个参数要保持一致。第二个参数表示需要分配的空间大小。第三个参数是我们希望发送的实际数据。第四个参数指定了数据使用模式。有三种模式可以选:GL_STATIC_DRAW,GL_DYNAMIC_DRAW,GL_STREAM_DRAW.
GL_STATIC_DRAW->数据只指定一次，但是可以多次作为绘图和图像指定函数的源数据
GL_DYNAMIC_DRAW->数据可以多次指定，并且可以多次作为绘图和图像指定函数的源数据
GL_STREAM_DRAW->数据只指定一次，并且最多只有几次作为绘图和图像指定函数的源数据

VBO之后就是VAO。那么什么是VAO呢？VAO全名Vertex Array Object，顶点数组对象。它跟顶点如何绘制息息相关，但是跟顶点数组半毛钱关系没有。那是VBO干的事。所以，它的定位应该是state_object(状态对象，记录存储状态信息)，这里区别于VBO，VBO是buffer_object(缓冲对象)。VAO是一个保存了所有顶点数据属性的状态结合，它存储了顶点数据的格式以及顶点数据所需的VBO对象的引用。比如说数据在哪里->glBindBuffer函数这里。数据是以什么样的形式存储在GPU上面的->glVertexAttribPointer函数来告诉我们顶点位置在哪里，什么格式。顶点纹理坐标在哪里，什么格式等。是否启用顶点属性位置值，默认是关闭的。->glEnableVertexAttribArray(0)；所以等要绘图时，要记得首先启用VAO。
那么VAO该怎么使用呢？我们来看这一段代码：

unsigned int VAO;
glGenVertexArrays(1,&VAO);
glBindVertexArray(VAO);
glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,3*sizeof(float),(void*)0);
glEnableVertexAttribPointer(0);

下面来解析这一段代码。
unsigned int VBO 创建一个buffer
glGenVertexArrays(1,&VAO) 产生一个VAO对象的名字。
glBindVertexArray(VAO) 在一段代码中第一次使用时将VAO绑定到顶点数组对象，后续如果再用到这个函数，表示**顶点数组对象。如果是glBindVertexArray(0)则是解除先前的绑定。
glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,3*sizeof(float),(void*)0) 此函数第一个参数是指定我们要配置的顶点属性，后面我们会讲到，在顶点着色器里面有一句layout(location = 0),这句话定义了顶点属性的位置值(location)。把它的值设置为0，如果想把数据传到顶点位置属性中，那么我们把glVertexAttribPointer函数的第一个参数设置为0.同理，如果我们想把数据传到顶点颜色属性中，那么我们就把glVertexAttribPointer函数的第一个参数设置为1。再比如如果我们想把数据传到顶点纹理属性中，那么我们就把glVertexAttribPointer函数的第一个参数设置为2。如下面这些代码：

glBindBuffer(GL_ARRAY_BUFFER,vertexVBO);//绑定位置VBO
glVertexAttribPointer(0,3,GL_FLOAT,GL_FALSE,3*sizeof(float),(void*)0);//指定位置数据
glBindBuffer(GL_ARRAY_BUFFER,colorVBO);//绑定颜色VBO
glVertexAttribPointer(1,3,GL_FLOAT,GL_FALSE,3*sizeof(float),(void*)0);//指定颜色数据
glBindBuffer(GL_ARRAY_BUFFER,textureVBO);//绑定纹理VBO
glVertexAttribPointer(2,3,GL_FLOAT,GL_FALSE,3*sizeof(float),(void*)0);//指定纹理数据

第二个参数指定顶点属性的大小。顶点属性是一个vec3的向量，由三个float类型的值组成，所以大小是3。
第三个参数指定数据的类型，这里是GL_FLOAT(代表浮点型)。
第四个参数表示我们是否希望数据被标准化，如果设置为GL_TRUE，那么所有的数据都被映射到0到1之间。
第五个参数叫步长。如下图：

就是连续顶点属性组之间的间隔。就是从这个属性第二次出现的地方到整个数组0位置之间有多少字节。
最后一个参数的类型是void*，所以进行强制类型转换。这个参数表示位置数据在缓冲中起始位置的偏移量(offset)。

OpenGL之不得不谈的两个着色器

Vertex Shader 顶点着色器

顶点着色器把一个单独的顶点作为输入，顶点着色器的意义是把3D坐标转换为另一种3D坐标。并且允许我们对顶点属性进行一些基本处理。看了这些依旧云里雾里。那么直接上一段代码来解析一下：

#version 330 core
layout (location = 0) in vec3 aPos;

void main()
{
    gl_Position = vec4(aPos.x,aPos.y,aPos.z,1.0);
}

首先要明确的是这段代码是用一种叫着色器语言GLSL写的。首先是确定opengl的版本。采用OpenGL3.3版本核心模式。使用in关键字，在顶点着色器中声明输入的顶点属性。要绘制一个三角形，现在我们只需要位置数据。所以1个顶点属性来描述位置就够了。因为要形容一个点的位置，x,y,z三个分量即可。所以创建一个vec3类型的输入变量aPos。至于前面的layout (location = 0)则设定了这个输入变量是关于顶点位置的。如果是location =1 则是关于顶点颜色的，如果是location =2则是关于顶点纹理坐标的。变量gl_Position是一个预定义的内建4分量向量，它包含顶点着色器要求的一个输出。
注意：以上只是用GLSL写的顶点着色器源码吧。写完之后我们还需要编译这个顶点着色器。代码如下：

unsigned int vertexShader;
vertexShader = glCreateShader(GL_VERSION_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;
}

glCreateShader函数用来创建一个着色器对象并声明着色器类型，是顶点着色器类型还是片段着色器类型。
glShaderSource函数是将字符数组(也就是着色器源码)绑定到对应的着色器对象上。
glCompileShader函数是编译对应的着色器对象。但是怎么判断编译成功了呢？就是定义一个整型变量success来表示是否成功编译，还定义了一个储存错误消息（如果有的话）的容器infoLog[512]。然后我们用glGetShaderiv检查是否编译成功。如果编译失败，我们会用glGetShaderInfoLog获取错误消息，然后打印它。

Fragment Shader 片段着色器

片段着色器通常做的是定义每个片段（像素）的颜色，但是在计算机图像学里面颜色通常被表示为有4个元素的数组：红色，绿色，蓝色和alpha(透明度)分量。这里颜色每个分量的强度都设置在0.0到1.0之间。那么这三种颜色分量的不同调配可以生成超过1600万种不同的颜色。也就是说想要形容一个颜色，我们需要一个vec4类型的向量。

#version 330 core
out vec4 FragColor;

void main()
{
    FragColor=vec4(1.0f,0.5f,0.2f,1.0f);
}

代码就不详细说了，跟上面差不多，输出一个vec4类型的向量表示顶点颜色。out关键字声明输出变量。

编译片段着色器跟编译顶点着色器同理，只不过着色器类型从GL_VERTEX_SHADER改为GL_FRAGMENT_SHADER。代码如下：

unsigned int fragmentShader;
fragmentShader=glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader,1,&fragmentShaderSource,NULL);
glCompileShader(fragmentShader);
int success;
char infoLog[512];
glGetShaderiv(fragmentShader,GL_COMPILE_STATUS,&success);
if(!success)
{
    glGetShaderInfoLog(fragmentShader,512,NULL,infoLog);
    std::cout<<"ERROR::SHADER::VERTEX::COMPILATION_FAILED\n"<<infoLog<<std::endl;
}

就不过多的讲了。有函数不懂的可以看上面。都有。

剩下的就是把两个编译后的着色器合并并链接完成。最后生成一个着色器程序对象(Shader Profram Object)。

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);
    std::cout<<"ERROR::SHADER::PROGRAM::LINKING_FAILED\n"<<infoLog<<std::endl;
}
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);

首先使用glCreateProgram函数创建一个着色器程序。然后用glAttachShader函数把之前编译的着色器附加到着色器程序。再用glLinkProgram函数来把顶点着色器，片段着色器跟程序对象链接为一个可执行程序。最后就是测试是否链接成功。成功以后就直接用glUseProgram函数来**这个程序对象。另外，在把着色器对象链接到程序对象以后，记得删除着色器对象，我们不再需要它们了。使用glDeleteShader函数来删除。

数据的输入

想渲染一个三角形，就需要指定三个顶点，每个顶点都有一个3D位置x,y,z。我们会将它们以标准化设备坐标的形式（OpenGL的可见区域）定义为一个float数组。至于标准化设备坐标就是把x,y,z都限定在(-1,1)的范围内。

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

绘图

绘图就是一个函数，glDrawArrays(enum mode,int first,size count)。这个函数第一个参数是表示绘制的类型，有三种取值：
1.GL_TRIANGLES:每三个顶点之间绘制三角形，之间不连接。
2.GL_TRIANGLE_FAN:以V0V1V2,V0V2V3,V0V3V4…的形式绘制三角形。
3.GL_TRIANGLE_STRIP:顺序在每三个顶点之间均绘制三角形。这个方法可以保证从相同的方向上所有三角形均被绘制。以V0V1V2,V1V2V3,V2V3V4,V3V4V5…的形式绘制三角形。
第二个参数定义从缓存中的哪一位开始绘制，一般定义为0。
第三个参数定义绘制的顶点数量。

最后就是结果了：

关于索引缓冲对象IBO下次再讲。推荐一波学习计算机视觉的群，群主是百度大牛，群内气氛活跃。高手辈出。群号是736854977。