C++ OpenGL学习笔记（2、绘制橙色三角形绘制、绿色随时间变化的三角形绘制）

相关文章链接
C++ OpenGL学习笔记（1、Hello World空窗口程序）

三角形是最基础的一个面图形，要在一个空的窗口上绘制三角形，就需要在上一节代码基础上进行修改。

绘制橙色三角形绘制

绘制效果

1、主要修改内容有：

1.1、在主程序的基础上增加如下3个函数

1.2、另外在主程序外面新增3个全局变量

如下

1.3、编写两个shader程序文件

vertexShader.glsl文件、fragmentShader.glsl文件

下面一项项的说代码

2、initModel()函数

该函数主要初始化模型，主要是初始化三角形顶点数据，初始化全局变量VAO、VBO

该函数内部流程大概：
0、初始化顶点数组，该数组总共3行，每行都是一个顶点数据，分别表示该点的x、y、z坐标点，所以总共是3个点的数据。
1、创建一个VAO
2、绑定VAO，
3、创建一个VBO，
4、绑定VBO，
5、给VBO分配显存空间，传输数据
6、告诉shader数据解析方式
7、激活锚点
8、给VBO解绑
9、给VAO解绑

该函数完整代码如下

void initModel()
{//构建模型，在模型数据发送GPU，VAO,VBO 在这里完成的//基础数据，三角形顶点float vertices[] = {-0.5f,-0.5f,0.0f,0.5,-0.5,0.0f,0.0f,0.5f,0.0f};glGenVertexArrays(1, &VAO);//创建1个VAOglBindVertexArray(VAO);//绑定VAO//下面初始化VBO，下面的VBO就属于VAO的管理范围，以后绘图直接使用VAO即可glGenBuffers(1, &VBO);//可以同时获取多个VBO的indexglBindBuffer(GL_ARRAY_BUFFER,VBO);//绑定VBOglBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices,GL_STATIC_DRAW);//给GL_ARRAY_BUFFER分配空间，第二个参数：分配多大的空间，第三个参数：从哪里开始读取数据，第四个参数：告诉openGL怎么使用这个数据//下面做锚定点glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);//每个顶点包含3个坐标，每个坐标都是float类型，不进行正则化，步长3 * sizeof(float)glEnableVertexAttribArray(0);//激活0号锚点glBindBuffer(GL_ARRAY_BUFFER, 0);//给VBO解绑glBindVertexArray(0);//给VAO解绑}

3、initShader函数

该函数完整形式：void initShader(const char* _vertexPath ,const char* _fragPath )；里面两个参数分别是两个shader文件的绝对路径，那么就先把两个shader文件摆出来吧

3.1、vertexShader.glsl文件

该文件为顶点数据处理文件，主要确定顶点位置。代码如下

#version 330 core  //版本声明
layout(location = 0) in vec3 aPos;//记得上面在初始化模型里面激活0号锚点的代码吗，这是相对应的void main()
{//gl_Position 是opengl内置全局变量，该变量会在后面进行调用gl_Position = vec4(aPos.x,aPos.y,aPos.z,1.0);
};

里面代码跟普通代码C++代码很相似，每行作用都做了注解，先照抄即可；

3.2、fragmentShader.glsl文件

该文件主要是光栅化显示作用，主要是对顶点数据进行内插，内插后在范围内的进行用指定颜色进行显示出来。
完整代码如下：

#version 330 core
out vec4 FragColor;//任何out定义的变量会被输出到下一步,openGL光栅化的下一步不用管，它是有个管线自动处理的void main()
{FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);//1是白色，0是黑色。橙色RGB为：（1，0.5，0.2）最后一个是alpha通道，默认为1};

注意这里出现了out定义的变量，数据类型是vec4，在shader语言中还有用in、uniform进行定义变量，数据类型可以自定义。区别是：
in定义的变量是由openGL管线中上一步传入过来的，上一步的out变量是下一步的in变量，变量名称不要变化；
uniform定义的变量是由外部C++代码传入进来的，后面可以做一个样例出来，现在先不用管；

管线搞不懂就看下面这张图：

管线顾名思义就是一根像线的管道，在这个管道中只有几个步骤可以进行编辑（填充蓝色的），其他步骤不需要程序员去管的（填充灰色的）：

3.3、initShader函数代码

该代码看着比较长，里面实际上只干了几件事情，最终是将shader代码编译链接在全局变量shaderProgram中。

函数流程：
1、读取_vertexPath （vertexShader.glsl）文件到变量_vertexCode中；
2、读取_fragPath （fragmentShader.glsl）文件到变量 _fragCode中；
3、分别编译_vertexCode、 _fragCode代码到_vertexID、_fragID；
4、初始化全局变量shaderProgram，分别将刚刚编译出来的_vertexID、_fragID链接到shaderProgram里面去；
5、分别检查编译是否成功、链接是否成功，最后进行_vertexID、_fragID的释放

void initShader(const char* _vertexPath ,const char* _fragPath )
{//shader写出来，编译出来std::string _vertexCode("");std::string _fragCode("");std::ifstream _vShaderFile;std::ifstream _fShaderFile;_vShaderFile.exceptions(std::ifstream::failbit| std::ifstream::badbit);_fShaderFile.exceptions(std::ifstream::failbit| std::ifstream::badbit);try {_vShaderFile.open(_vertexPath);_fShaderFile.open(_fragPath);std::stringstream _vShaderStream, _fShaderStream;_vShaderStream << _vShaderFile.rdbuf();_fShaderStream << _fShaderFile.rdbuf();_vertexCode = _vShaderStream.str();_fragCode = _fShaderStream.str();}catch (std::ifstream::failure e) {std::string errStr = "rerad shader fail";std::cout << errStr << std::endl;}const char* _vShaderStr = _vertexCode.c_str();const char* _fShaderStr = _fragCode.c_str();//shader的编译链接unsigned int _vertexID = 0,_fragID = 0;char  _infoLog[512];//存储错误信息int  _successFlag = 0;//是否成功//编译_vertexID = glCreateShader(GL_VERTEX_SHADER);//编译的是VERTEX类型glShaderSource(_vertexID, 1, &_vShaderStr, NULL);//把代码传过去glCompileShader(_vertexID);//编译glGetShaderiv(_vertexID,GL_COMPILE_STATUS,&_successFlag);//获取编译情况如何if (!_successFlag) {//如果编译不成功glGetShaderInfoLog(_vertexID, 512,NULL,_infoLog);std::string errStr(_infoLog);std::cout << errStr << std::endl;}//frag shader _fragID = glCreateShader(GL_FRAGMENT_SHADER);//编译的是FRAGMENT类型glShaderSource(_fragID, 1, &_fShaderStr, NULL);//把代码传过去glCompileShader(_fragID);//编译glGetShaderiv(_fragID, GL_COMPILE_STATUS, &_successFlag);//获取编译情况如何if (!_successFlag) {//如果编译不成功glGetShaderInfoLog(_fragID, 512, NULL, _infoLog);std::string errStr(_infoLog);std::cout << errStr << std::endl;}//链接shaderProgram = glCreateProgram();glAttachShader(shaderProgram,_vertexID);//向program好的加入编译好的glAttachShader(shaderProgram,_fragID);//向program好的加入glLinkProgram(shaderProgram);//开始链接//检查链接是否成功glGetProgramiv(shaderProgram, GL_LINK_STATUS, &_successFlag);if (!_successFlag) {//如果链接不成功glGetProgramInfoLog(shaderProgram, 512, NULL, _infoLog);std::string errStr(_infoLog);std::cout << errStr << std::endl;}//释放glDeleteShader(_vertexID);glDeleteShader(_fragID);}

3、rend函数

该函数是绘制函数，是放在while循环里面的

void rend()
{//渲染函数//每次循环都会调用该函数,直接进行渲染glBindVertexArray(VAO);//使用VAO方式进行绘制glUseProgram(shaderProgram);glDrawArrays(GL_TRIANGLES,0,3);//绘制，从第0个开始画，起作用的是3个glUseProgram(0);
}

编译运行的效果

绿色随时间变化的三角形绘制

该程序是在橙色三角形的基础上进行变种来的，程序逻辑是从外部传入一个随着时间变化的颜色数据即可。
主要修改：
1、fragmentShader.glsl文件中，新增一个uniform定义的颜色变量；
2、在rend函数中新增一个与时间相关的变换函数，该函数输出的值作为绿色波段的颜色值；将新增的绿色波段颜色信息传入到fragmentShader中即可

1.1、fragmentShader.glsl文件修改如下

//外部传参的写法
#version 330 core
out vec4 FragColor;
uniform vec4 MyColor;//通过外部传参进来
void main()
{FragColor = MyColor;//外部传进来的颜色直接传到下一个流程中};

1.2、在rend函数修改如下

void rend()
{//渲染函数//外部传参的写法，将颜色通过外面传入进去===========================================glUseProgram(shaderProgram);//注意这行代码必须提前，否则黑屏，绘制不出来float _time = glfwGetTime();//获取时间，通过时间变换来改变渲染颜色；float _green = sin(_time)*0.5f+0.5f;//动态改变绿色通道的值int _location = glGetUniformLocation(shaderProgram,"MyColor");//获取MyColor变量位置，MyColor即fragmentShader.glsl文件中用uniform修饰的变量glUniform4f(_location, 0.0f, _green, 0.0f, 1.0f);//把颜色传入进去（ 0.0f, _green, 0.0f, 1.0f）传入到fragmentShader里面的MyColor变量glBindVertexArray(VAO);//使用VAO方式进行绘制glDrawArrays(GL_TRIANGLES, 0, 3);//绘制，从第0个开始画，起作用的是3个glUseProgram(0);}

运行后，这窗口中三角形随着时间的变化不断循环颜色发生变化，如下图

总代码

总共代码在上次环境配置基础上，修改3个文件：
1、main.cpp
2、vertexShader.glsl
3、fragmentShader.glsl

1、mainl.cpp

/*
三角形绘制基础代码
在这节课介绍三角形绘制的基础方法，也会涉及到基础的shader调用，其中最关键的概念是
VAO、VBO在OpenGL核心模式下的使用及内涵
也会做一个小小的程序结构，让大家方便今后的架构慢慢改进先对vertexShader.glsl 进行顶点变换,再传入fragmentShader.glsl里面插值1、获取VBO的index
2、绑定VBO的index
3、给VBO分配显存空间，传输数据
4、告诉shader数据解析方式
5、激活锚点*/
#include <glad/glad.h>
#include "GLFW/glfw3.h"
#include <iostream>#include <string>
#include <fstream>
#include <sstream>unsigned int VBO = 0;
unsigned int VAO = 0;
unsigned int shaderProgram = 0;void rend()
{//渲染函数每次循环都会调用该函数,直接进行渲染//glBindVertexArray(VAO);//使用VAO方式进行绘制//glUseProgram(shaderProgram);//glDrawArrays(GL_TRIANGLES,0,3);//绘制，从第0个开始画，起作用的是3个//glUseProgram(0);//外部传参的写法，将颜色通过外面传入进去===========================================glUseProgram(shaderProgram);float _time = glfwGetTime();//获取时间，通过时间变换来改变渲染颜色；float _green = sin(_time)*0.5f+0.5f;//动态改变绿色通道的值int _location = glGetUniformLocation(shaderProgram,"MyColor");//获取MyColor变量位置glUniform4f(_location, 0.0f, _green, 0.0f, 1.0f);//把颜色传入进去（ 0.0f, _green, 0.0f, 1.0f）传入到fragmentShader里面的MyColor变量glBindVertexArray(VAO);//使用VAO方式进行绘制glDrawArrays(GL_TRIANGLES, 0, 3);//绘制，从第0个开始画，起作用的是3个glUseProgram(0);}void initModel()
{//构建模型，在模型数据发送GPU，VAO,VBO 在这里完成的//基础数据，三角形顶点float vertices[] = {-0.5f,-0.5f,0.0f,0.5,-0.5,0.0f,0.0f,0.5f,0.0f};glGenVertexArrays(1, &VAO);//创建1个VAOglBindVertexArray(VAO);//绑定VAO//下面初始化VBO，下面的VBO就属于VAO的管理范围，以后绘图直接使用VAO即可glGenBuffers(1, &VBO);//可以同时获取多个VBO的indexglBindBuffer(GL_ARRAY_BUFFER,VBO);//绑定VBOglBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices,GL_STATIC_DRAW);//给GL_ARRAY_BUFFER分配空间，第二个参数：分配多大的空间，第三个参数：从哪里开始读取数据，第四个参数：告诉openGL怎么使用这个数据//下面做锚定点glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);//每个顶点包含3个坐标，每个坐标都是float类型，不进行正则化，步长3 * sizeof(float)glEnableVertexAttribArray(0);//激活0号锚点glBindBuffer(GL_ARRAY_BUFFER, 0);//给VBO解绑glBindVertexArray(0);//给VAO解绑}void initShader(const char* _vertexPath ,const char* _fragPath )
{//shader写出来，编译出来std::string _vertexCode("");std::string _fragCode("");std::ifstream _vShaderFile;std::ifstream _fShaderFile;_vShaderFile.exceptions(std::ifstream::failbit| std::ifstream::badbit);_fShaderFile.exceptions(std::ifstream::failbit| std::ifstream::badbit);try {_vShaderFile.open(_vertexPath);_fShaderFile.open(_fragPath);std::stringstream _vShaderStream, _fShaderStream;_vShaderStream << _vShaderFile.rdbuf();_fShaderStream << _fShaderFile.rdbuf();_vertexCode = _vShaderStream.str();_fragCode = _fShaderStream.str();}catch (std::ifstream::failure e) {std::string errStr = "rerad shader fail";std::cout << errStr << std::endl;}const char* _vShaderStr = _vertexCode.c_str();const char* _fShaderStr = _fragCode.c_str();//shader的编译链接unsigned int _vertexID = 0,_fragID = 0;char  _infoLog[512];//存储错误信息int  _successFlag = 0;//是否成功//编译_vertexID = glCreateShader(GL_VERTEX_SHADER);//编译的是VERTEX类型glShaderSource(_vertexID, 1, &_vShaderStr, NULL);//把代码传过去glCompileShader(_vertexID);//编译glGetShaderiv(_vertexID,GL_COMPILE_STATUS,&_successFlag);//获取编译情况如何if (!_successFlag) {//如果编译不成功glGetShaderInfoLog(_vertexID, 512,NULL,_infoLog);std::string errStr(_infoLog);std::cout << errStr << std::endl;}//frag shader _fragID = glCreateShader(GL_FRAGMENT_SHADER);//编译的是FRAGMENT类型glShaderSource(_fragID, 1, &_fShaderStr, NULL);//把代码传过去glCompileShader(_fragID);//编译glGetShaderiv(_fragID, GL_COMPILE_STATUS, &_successFlag);//获取编译情况如何if (!_successFlag) {//如果编译不成功glGetShaderInfoLog(_fragID, 512, NULL, _infoLog);std::string errStr(_infoLog);std::cout << errStr << std::endl;}//链接shaderProgram = glCreateProgram();glAttachShader(shaderProgram,_vertexID);//向program好的加入编译好的glAttachShader(shaderProgram,_fragID);//向program好的加入glLinkProgram(shaderProgram);//开始链接//检查链接是否成功glGetProgramiv(shaderProgram, GL_LINK_STATUS, &_successFlag);if (!_successFlag) {//如果链接不成功glGetProgramInfoLog(shaderProgram, 512, NULL, _infoLog);std::string errStr(_infoLog);std::cout << errStr << std::endl;}//释放glDeleteShader(_vertexID);glDeleteShader(_fragID);}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){glfwSetWindowShouldClose(window, true);//把关闭状态设置为true}
}int main()
{glfwInit();//初始化上下文环境glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);//要求opengl 3版本以上glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);//设置CORE模式，只能用VAO绘制GLFWwindow* window = glfwCreateWindow(800, 600, "OpenGL Core", NULL, NULL);//创建窗体if (window == NULL){std::cout << "Failed to create GLFW window" << std::endl;glfwTerminate();return -1;}glfwMakeContextCurrent(window);//上下文绑定窗体if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))//初始化函数指针，为下面函数做准备{std::cout << "Failed to initialize GLAD" << std::endl;return -1;}glViewport(0, 0, 800, 600);//设置需要渲染的视口glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);//设置回调函数initModel();//初始化模型initShader("vertexShader.glsl","fragmentShader.glsl");//初始化shader文件while (!glfwWindowShouldClose(window))//创建的window关掉后就退出while循环{processInput(window);//glClearColor(0.2f, 0.3f, 0.3f, 1.0f);//设置颜色glClear(GL_COLOR_BUFFER_BIT);//用设置的颜色把画布进行清零掉rend();//渲染绘制glfwSwapBuffers(window);glfwPollEvents();}glfwTerminate();std::cout << "Hello World!\n";return 0;
}

2、vertexShader.glsl

#version 330 core
layout(location = 0) in vec3 aPos;
void main()
{//gl_Position 是opengl内置全局变量，该变量会在后面进行调用gl_Position = vec4(aPos.x,aPos.y,aPos.z,1.0);
};

3、fragmentShader.glsl

/*任何out定义的变量会被输出到下一步*/
//#version 330 core
//out vec4 FragColor;
//void main()
//{
//	FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
//
//};//外部传参的写法
#version 330 core
out vec4 FragColor;
uniform vec4 MyColor;//通过外部传参进来
void main()
{FragColor = MyColor;//外部传进来的颜色直接传到下一个流程中};