C++ OpenGL学习笔记（4、绘制贴图纹理）

相关链接：
C++ OpenGL学习笔记（1、Hello World空窗口程序）
C++ OpenGL学习笔记（2、绘制橙色三角形绘制、绿色随时间变化的三角形绘制）
C++ OpenGL学习笔记（3、绘制彩色三角形、绘制彩色矩形）

通过前面几章，彩色三角形也可以画出来进行显示了。现在我有一张图片，我想把图像显示绘制出来，怎么操作。这里就需要openGL纹理绘制相关知识了，最终效果如下图

课前准备

本节代码是基于上一节绘制彩色矩形代码基础上进行升级的。

1、stb_image库

因为要绘制图片，至少需要打开图片等一些操作，所以这里引入一个图片库stb_image库，之所以引入这个库是因为它很简单，这个库所有文件就一个点.h文件，不会涉及很麻烦的编译过程，网盘下载链接：

通过网盘分享的文件：stb_image.h
链接: https://pan.baidu.com/s/1S019c2jQqFnWxAvsZNvd1w?pwd=cx6y 提取码: cx6y 
--来自百度网盘超级会员v5的分享

该库使用方法很简单，在这个头文件中已经说了，先要定义一个宏，然后包含头文件即可，如下图。

2、测试图像下载

wall.jpg网盘下载

通过网盘分享的文件：wall.jpg
链接: https://pan.baidu.com/s/1L6m9_jOxVPCY_Xg5mWrBJg?pwd=n2vr 提取码: n2vr 
--来自百度网盘超级会员v5的分享

直接另存为也可以

3、其他事项

因为代码慢慢多了起来，这次代码中进行一些封装：
1、将stb_image图像库封装在自定义的ffimage类中，保留一个读入接口，和图片的一些基础信息（图片宽、高等信息）
2、将Shader程序shaderProgram变量封装到自定义的Shader类中，同时把初始化Shder（initShader函数）放进去

封装的文件及代码

1、Base.h头文件

该头文件放入openGL基础的头文件，另外放入了几个自定义结构体：描述颜色信息、3维点信息、2维点信息
Base.h代码如下

#pragma once
//存放各种头文件#include <glad/glad.h>
#include "GLFW/glfw3.h"
#include <iostream>#include <string>
#include <fstream>
#include <sstream>typedef unsigned int uint;
typedef unsigned char byte;
struct ffRGBA
{//描述一个点的颜色信息byte m_r;byte m_g;byte m_b;byte m_a;ffRGBA(byte _r = 255, byte _g = 255, byte _b = 255, byte _a = 255){m_r = _r;m_g = _g;m_b = _b;m_a = _a;}};template <typename T>
struct tVec3 {//三维向量结构体T m_x;T m_y;T m_z;tVec3(T _x = 0, T _y = 0, T _z = 0){m_x = _x;m_y = _y;m_z = _z;}
};template <typename T>
struct tVec2 {//二维向量结构体T m_x;T m_y;tVec2(T _x = 0, T _y = 0){m_x = _x;m_y = _y;}
};

2、ffimage类

下载stb_image.h文件放入项目同级目录
ffimage.h代码如下

#pragma once
#include "Base.h"class ffImage
{
private:int m_width;//图片宽int m_height;//图片高int m_picType;//图片数据类型ffRGBA * m_data;//图片Buffer信息
public:int getWidth() const { return m_width; }int getHeight() const { return m_height; }int getPicType() const { return m_picType; }ffRGBA* getData()const { return m_data; }ffRGBA getColor(int x, int y)const{if (x<0 || x>m_width - 1 || y<0 || y>m_height - 1){return ffRGBA(0,0,0,0);}return m_data[y*m_width + x];}ffImage(int _width = 0, int _height = 0, int _picType = 0, ffRGBA* _data = NULL){m_width = _width;m_height = _height;m_picType = _picType;int _sumSize = m_width * m_height;if (_data&& _sumSize){m_data = new ffRGBA[_sumSize];memcpy(m_data,_data,sizeof(ffRGBA)*_sumSize);}else{m_data = NULL;}};~ffImage(){}public:static ffImage* readFromFile(const char* _fileName);//读入影像函数};

ffimage.cpp代码如下

#include "ffimage.h"#define STB_IMAGE_IMPLEMENTATION//调用stb_image.h前需要进行这个宏定义
#include "stb_image.h"ffImage * ffImage::readFromFile(const char * _fileName)
{int _picType = 0;int _width = 0;int _height = 0;//stbimage读入的图像是反过来的，上下颠倒stbi_set_flip_vertically_on_load(true);//读的时候给我颠倒回来unsigned char* bits = stbi_load(_fileName, &_width, &_height, &_picType, STBI_rgb_alpha);//按照8位RGBA读取ffImage* _image = new ffImage(_width,_height,_picType,(ffRGBA*)bits);stbi_image_free(bits);return _image;
}

3、Shader类

主要封装Shader程序为m_shaderProgram变量，和初始化Shader的函数
Shader.h文件代码如下

#pragma once
#include "Base.h"
class Shader
{
public:Shader(){m_shaderProgram = 0;}~Shader() {}void initShader(const char* _vertexPath, const char* _fragPath);void start() {glUseProgram(m_shaderProgram);//启用m_shaderProgram}void end() {glUseProgram(0);//关闭m_shaderProgram}private:unsigned int m_shaderProgram;};

Shader.cpp文件

#include "Shader.h"void Shader::initShader(const char * _vertexPath, const char * _fragPath)
{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;}//链接m_shaderProgram = glCreateProgram();glAttachShader(m_shaderProgram, _vertexID);//向program好的加入编译好的glAttachShader(m_shaderProgram, _fragID);//向program好的加入glLinkProgram(m_shaderProgram);//开始链接//检查链接是否成功glGetProgramiv(m_shaderProgram, GL_LINK_STATUS, &_successFlag);if (!_successFlag) {//如果链接不成功glGetProgramInfoLog(m_shaderProgram, 512, NULL, _infoLog);std::string errStr(_infoLog);std::cout << errStr << std::endl;}//释放glDeleteShader(_vertexID);glDeleteShader(_fragID);}

纹理贴图代码相关修改及说明

再次说明：本节代码是基于上一节绘制彩色矩形代码基础上进行升级的。

主要变化：
1、增加纹理全局变量纹理初始化函数initTexture
2、initModel()函数，该函数里面需要增加纹理位置信息
3、修改Shader相关代码

1、initTexture纹理初始化函数

1、该函数在主程序初始化模型下面增加该函数入口

2、定义全局变量

3、initTexture函数代码

void initTexture()
{//初始化纹理贴图,构建完成全局变量_texture对象_pImage = ffImage::readFromFile("wall.jpg");//同级目录下准备了一张图片glGenTextures(1, &_texture);//新建一个textureglBindTexture(GL_TEXTURE_2D,_texture);//绑定texture纹理类型为GL_TEXTURE_2D//设置纹理属性glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_REPEAT);//设置S方向填充方式为重复REPEAT方式glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_REPEAT);//设置T方向填充方式为重复REPEAT方式glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);//设置图像缩小时候采样方式为NEAREST最近邻方式glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);//设置图像放大时候采样方式为LINEAR双线性方式//读入图像数据glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, _pImage->getWidth(), _pImage->getHeight(),0,GL_RGBA,GL_UNSIGNED_BYTE, _pImage->getData());}

2、initModel函数

1、修改变量vertices，要引入纹理贴的顶点位置。引入后每行顶点坐标含义：前三个点位置坐标、中间三个颜色信息，每行最后两位为纹理坐标位置(u、v)
2、修改锚点0、锚点1的步长信息，新增锚点2为纹理坐标信息，最后启动锚点2

void initModel()
{//构建模型，在模型数据发送GPU，VAO,VBO 在这里完成的//带颜色信息的顶点，0.0是黑色，1.0是白色,下面三个点分别设置红、绿、蓝//float vertices[] = {//-0.5f,-0.5f,0.0f, 1.0f,0.0f,0.0f,//0.5,-0.5,0.0f, 0.0f,1.0f,0.0f,//0.0f,0.5f,0.0f,0.0f,0.0f,1.0f,//};//带纹理坐标、带颜色信息的顶点，每行最后两位为纹理坐标位置(u、v)float vertices[] = {0.5f, 0.5f,0.0f, 1.0f,0.0f,0.0f,   1.0f,1.0f,0.5f,-0.5f,0.0f, 0.0f,1.0f,0.0f,   1.0f,0.0f,-0.5f,-0.5f,0.0f, 0.0f,0.0f,1.0f,  0.0f,0.0f, -0.5f,0.5f,0.0f, 0.0f,1.0f,0.0f,   0.0f,1.0f,};unsigned int indices[] = {0,1,3,1,2,3};glGenVertexArrays(1, &VAO);//创建1个VAOglBindVertexArray(VAO);//绑定VAOunsigned int EBO = 0;//这个容器绑定角点和indexglGenBuffers(1, &EBO);glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);//下面初始化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)增加颜色信息，修改锚定//glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);//0代表顶点信息，每个顶点包含3个坐标，每个坐标都是float类型，不进行正则化，步长6 * sizeof(float),顶点起始点是从0开始，所以(void*)0//glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));//1代表颜色信息，每个顶点包含3个坐标，每个坐标都是float类型，不进行正则化，步长6 * sizeof(float),颜色起始点是从3开始，所以3*sizeof(float)//增加纹理信息和颜色信息，修改锚定glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);//顶点步长改成了8glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));//颜色步长改成了8glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));//新建2号锚点，该锚点是连续读取2个数据，最后的起始位置是6，所以最后一个是(void*)(6 * sizeof(float))glEnableVertexAttribArray(0);//启动0这个锚定点，弄顶点glEnableVertexAttribArray(1);//启动1这个锚定点，弄颜色glEnableVertexAttribArray(2);//启动2这个锚定点，弄纹理glBindBuffer(GL_ARRAY_BUFFER, 0);//给VBO解绑glBindVertexArray(0);//给VAO解绑}

vertexShader.glsl文件修改

initModel函数新增了锚点2，所以顶点Shader文件需要进行相关变化

#version 330 core
layout(location = 0) in vec3 aPos;//layout为0是位置顶点信息
layout(location = 1) in vec3 aColor;//layout为1是颜色信息
layout(location = 2) in vec2 aUV;//layout为2是纹理位置，UV坐标
out vec4 outColor;//下一步输出变量
out vec2 outUV;//纹理位置void main()
{/*gl_Position 是opengl内置全局变量，该变量会在后面进行调用*/gl_Position = vec4(aPos.x,aPos.y,aPos.z,1.0);//outColor = vec4(aColor.x, aColor.y, aColor.z, 1.0);outColor = vec4(aColor, 1.0);outUV = aUV;//把纹理位置信息增加到管线中};

fragmentShader.glsl文件修改

在上一步顶点管线中新增了纹理位置输出，所以在渲染管线中要新增该变量

#version 330 core
out vec4 FragColor;in vec4 outColor;//从vertexShader.glsl文件过来的变量，要求变量名也一致
in vec2 outUV;//上个管线输入的变量uniform sampler2D ourTexture;//内置的数据类型sampler2D，专门描述纹理的。如果C++外部不传入ourTexture这个变量，则它默认为0void main()
{//FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);//FragColor = outColor;FragColor = texture(ourTexture, outUV);//内置函数texture函数，从outUV位置上取纹理ourTexture的颜色值给FragColor 方案1：直接取出纹理颜色值};

rend函数

该函数还是用绘制矩形的那个函数，没有变化

void rend()
{//渲染函数//每次循环都会调用该函数,直接进行渲染glBindTexture(GL_TEXTURE_2D, _texture);//绘制前绑定纹理_shader.start();glBindVertexArray(VAO);//使用VAO方式进行绘制//glDrawArrays(GL_TRIANGLES, 0, 3);//绘制，从第0个开始画，起作用的是3个glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);//绘制EBO元素，6个索引_shader.end();
}

主函数完整代码

其他几个函数完整代码都贴出来了的，包含下图文件：

这里只贴出主程序文件所有代码，main.cpp

/*
三角形绘制基础代码
在这节课介绍三角形绘制的基础方法，也会涉及到基础的shader调用，其中最关键的概念是
VAO、VBO在OpenGL核心模式下的使用及内涵
也会做一个小小的程序结构，让大家方便今后的架构慢慢改进先对vertexShader.glsl 进行顶点变换,再传入fragmentShader.glsl里面插值1、获取VBO的index
2、绑定VBO的index
3、给VBO分配显存空间，传输数据
4、告诉shader数据解析方式
5、激活锚点//本节内容：
1、纹理贴图做准备
2、进一步封装类
3、引入stb_image库，该库只有一个stb_image.h头文件*/
#include "Base.h"
#include "Shader.h"
#include "ffimage.h"Shader _shader;unsigned int VAO = 0;
unsigned int VBO = 0;unsigned int _texture = 0;//纹理
ffImage* _pImage = NULL;//纹理贴图影像void rend()
{//渲染函数//每次循环都会调用该函数,直接进行渲染glBindTexture(GL_TEXTURE_2D, _texture);//绘制前绑定纹理_shader.start();glBindVertexArray(VAO);//使用VAO方式进行绘制//glDrawArrays(GL_TRIANGLES, 0, 3);//绘制，从第0个开始画，起作用的是3个glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);//绘制EBO元素，6个索引_shader.end();
}void initModel()
{//构建模型，在模型数据发送GPU，VAO,VBO 在这里完成的//带颜色信息的顶点，0.0是黑色，1.0是白色,下面三个点分别设置红、绿、蓝//float vertices[] = {//-0.5f,-0.5f,0.0f, 1.0f,0.0f,0.0f,//0.5,-0.5,0.0f, 0.0f,1.0f,0.0f,//0.0f,0.5f,0.0f,0.0f,0.0f,1.0f,//};//带纹理坐标、带颜色信息的顶点，每行最后两位为纹理坐标位置(u、v)float vertices[] = {0.5f, 0.5f,0.0f, 1.0f,0.0f,0.0f,   1.0f,1.0f,0.5f,-0.5f,0.0f, 0.0f,1.0f,0.0f,   1.0f,0.0f,-0.5f,-0.5f,0.0f, 0.0f,0.0f,1.0f,  0.0f,0.0f, -0.5f,0.5f,0.0f, 0.0f,1.0f,0.0f,   0.0f,1.0f,};unsigned int indices[] = {0,1,3,1,2,3};glGenVertexArrays(1, &VAO);//创建1个VAOglBindVertexArray(VAO);//绑定VAOunsigned int EBO = 0;//这个容器绑定角点和indexglGenBuffers(1, &EBO);glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);//下面初始化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)增加颜色信息，修改锚定//glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);//0代表顶点信息，每个顶点包含3个坐标，每个坐标都是float类型，不进行正则化，步长6 * sizeof(float),顶点起始点是从0开始，所以(void*)0//glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));//1代表颜色信息，每个顶点包含3个坐标，每个坐标都是float类型，不进行正则化，步长6 * sizeof(float),颜色起始点是从3开始，所以3*sizeof(float)//增加纹理信息和颜色信息，修改锚定glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)0);//顶点步长改成了8glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));//颜色步长改成了8glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));//新建2号锚点，该锚点是连续读取2个数据，最后的起始位置是6，所以最后一个是(void*)(6 * sizeof(float))glEnableVertexAttribArray(0);//启动0这个锚定点，弄顶点glEnableVertexAttribArray(1);//启动1这个锚定点，弄颜色glEnableVertexAttribArray(2);//启动2这个锚定点，弄纹理glBindBuffer(GL_ARRAY_BUFFER, 0);//给VBO解绑glBindVertexArray(0);//给VAO解绑}void initTexture()
{//初始化纹理贴图,构建完成全局变量_texture对象_pImage = ffImage::readFromFile("wall.jpg");//同级目录下准备了一张图片glGenTextures(1, &_texture);//新建一个textureglBindTexture(GL_TEXTURE_2D,_texture);//绑定texture纹理类型为GL_TEXTURE_2D//设置纹理属性glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_REPEAT);//设置S方向填充方式为重复REPEAT方式glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_REPEAT);//设置T方向填充方式为重复REPEAT方式glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);//设置图像缩小时候采样方式为NEAREST最近邻方式glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);//设置图像放大时候采样方式为LINEAR双线性方式//读入图像数据glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, _pImage->getWidth(), _pImage->getHeight(),0,GL_RGBA,GL_UNSIGNED_BYTE, _pImage->getData());}void initShader(const char* _vertexPath, const char* _fragPath)
{//shader写出来，编译出来_shader.initShader(_vertexPath, _fragPath);}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();//初始化模型initTexture();//调取读纹理函数initShader("vertexShader.glsl", "fragmentShader.glsl");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;
}

变形

因为每个顶点的颜色信息还进行了保留，如果在fragmentShader.glsl文件中的核心代码进行相关变形就会得到一个彩色的纹理图像

#version 330 core
out vec4 FragColor;in vec4 outColor;//从vertexShader.glsl文件过来的变量，要求变量名也一致
in vec2 outUV;uniform sampler2D ourTexture;//内置的数据类型sampler2D，专门描述纹理的。如果C++外部不传入ourTexture这个变量，则它默认为0void main()
{FragColor = texture(ourTexture, outUV)*outColor;//方案2：纹理像素和原来彩色进行相乘，进行颜色混合};

输出效果