关注公众号：“C++学习与探索”，回复"opengl"，下载项目源码~

写在前面

  着色器是一种用于在图形渲染管线中对图形对象进行着色和渲染的程序。着色器主要分为顶点着色器、片元着色器和几何着色器三种类型。顶点着色器负责对图形对象的顶点坐标进行变换和处理，将对象从模型空间转换到屏幕空间。片元着色器则负责对每个像素进行着色，计算像素的颜色值和透明度等属性。几何着色器可以对几何图形进行处理和生成新的几何数据。着色器通过GLSL等编程语言编写，可以实现各种复杂的图形效果和渲染技术，使得图形应用程序能够呈现出更加逼真和生动的视觉效果。这里我们只关注顶点着色器和片元着色器。

GLSL

  着色器是使用一种叫GLSL的类C语言写成的。GLSL是为图形计算量身定制的，它包含一些针对向量和矩阵操作的有用特性。着色器的开头总是要声明版本，接着是输入和输出变量、uniform和main函数。每个着色器的入口点都是main函数，在这个函数中我们处理所有的输入变量，并将结果输出到输出变量中。如果你不知道什么是uniform也不用担心，我们后面会进行讲解。一个典型的着色器有下面的结构：

#version version_number
in type in_variable_name;
in type in_variable_name;out type out_variable_name;uniform type uniform_name;void main()
{// 处理输入并进行一些图形操作...// 输出处理过的结果到输出变量out_variable_name = weird_stuff_we_processed;
}

  当我们特别谈论到顶点着色器的时候，每个输入变量也叫顶点属性(Vertex Attribute)。我们能声明的顶点属性是有上限的，它一般由硬件来决定。OpenGL确保至少有16个包含4分量的顶点属性可用，但是有些硬件或许允许更多的顶点属性，你可以查询GL_MAX_VERTEX_ATTRIBS来获取具体的上限：

int nrAttributes;
glGetIntegerv(GL_MAX_VERTEX_ATTRIBS, &nrAttributes);
std::cout << "Maximum nr of vertex attributes supported: " << nrAttributes << std::endl;

变量

  和其他编程语言一样，GLSL有数据类型可以来指定变量的种类。GLSL中包含C等其它语言大部分的默认基础数据类型：int、float、double、uint和bool。GLSL也有两种容器类型，它们会在这个教程中使用很多，分别是向量(Vector)和矩阵(Matrix)，具体如下表。另外GLSL还提供一些内建变量和内建函数，后面如果使用到在进行介绍。

  一个向量的分量可以通过vec.x这种方式获取，这里x是指这个向量的第一个分量。你可以分别使用.x、.y、.z和.w来获取它们的第1、2、3、4个分量。GLSL也允许你对颜色使用rgba，或是对纹理坐标使用stpq访问相同的分量。向量这一数据类型也允许一些有趣而灵活的分量选择方式，叫做重组(Swizzling)。你可以使用上面4个字母任意组合来创建一个和原来向量一样长的（同类型）新向量，只要原来向量有那些分量即可；然而，你不允许在一个vec2向量中去获取.z元素。我们也可以把一个向量作为一个参数传给不同的向量构造函数，以减少需求参数的数量：

vec2 someVec;
vec4 differentVec = someVec.xyxx;
vec3 anotherVec = differentVec.zyw;
vec4 otherVec = someVec.xxxx + anotherVec.yxzy;vec2 vect = vec2(0.5, 0.7);
vec4 result = vec4(vect, 0.0, 0.0);
vec4 otherResult = vec4(result.xyz, 1.0);

输入输出

  虽然着色器是各自独立的小程序，但是它们都是一个整体的一部分，出于这样的原因，我们希望每个着色器都有输入和输出，这样才能进行数据交流和传递。GLSL定义了in和out关键字专门来实现这个目的。每个着色器使用这两个关键字设定输入和输出，只要一个输出变量与下一个着色器阶段的输入匹配，它就会传递下去。但在顶点和片段着色器中会有点不同。顶点着色器应该接收的是一种特殊形式的输入，否则就会效率低下。顶点着色器的输入特殊在，它从顶点数据中直接接收输入。为了定义顶点数据该如何管理，我们使用location这一元数据指定输入变量，这样我们才可以在CPU上配置顶点属性。我们已经在前面的教程看过这个了，layout (location = 0)。顶点着色器需要为它的输入提供一个额外的layout标识，这样我们才能把它链接到顶点数据。

你也可以忽略layout (location = 0)标识符，通过在OpenGL代码中使用glGetAttribLocation查询属性位置值(Location)，但是我更喜欢在着色器中设置它们，这样会更容易理解而且节省你（和OpenGL）的工作量。

  另一个例外是片段着色器，它需要一个vec4颜色输出变量，因为片段着色器需要生成一个最终输出的颜色。如果你在片段着色器没有定义输出颜色，OpenGL会把你的物体渲染为黑色（或白色）。所以，如果我们打算从一个着色器向另一个着色器发送数据，我们必须在发送方着色器中声明一个输出，在接收方着色器中声明一个类似的输入。当类型和名字都一样的时候，OpenGL就会把两个变量链接到一起，它们之间就能发送数据了（这是在链接程序对象时完成的）。为了展示这是如何工作的，我们会稍微改动一下之前教程里的那个着色器，让顶点着色器为片段着色器决定颜色。

顶点着色器

#version 330 core // 版本号
layout (location = 0) in vec3 aPos; // 位置变量的属性位置值为0out vec4 vertexColor; // 为片段着色器指定一个颜色输出void main()
{gl_Position = vec4(aPos, 1.0); // 注意我们如何把一个vec3作为vec4的构造器的参数，另外这里的gl_Position属于内建变量，也就是330 core版本顶点着色器必须为这个内建变量赋值vertexColor = vec4(0.5, 0.0, 0.0, 1.0); // 把输出变量设置为暗红色
}

片段着色器

#version 330 core
out vec4 FragColor;in vec4 vertexColor; // 从顶点着色器传来的输入变量（名称相同、类型相同）void main()
{FragColor = vertexColor; // 片段着色器需要输出一个表示颜色的vec4类型变量
}

  你可以看到我们在顶点着色器中声明了一个vertexColor变量作为vec4输出，并在片段着色器中声明了一个类似的vertexColor。由于它们名字相同且类型相同，片段着色器中的vertexColor就和顶点着色器中的vertexColor链接了。由于我们在顶点着色器中将颜色设置为深红色，最终的片段也是深红色的。下面的图片展示了输出结果：

Uniform

  我们成功地从顶点着色器向片段着色器发送数据。让我们更上一层楼，看看能否从应用程序中直接给片段着色器发送一个颜色！这里需要用到Uniform，Uniform是另一种从我们的应用程序在CPU上传递数据到GPU上的着色器的方式，之前一种是顶点属性，但uniform和顶点属性有些不同。首先，uniform是全局的(Global)。全局意味着uniform变量必须在每个着色器程序对象中都是独一无二的，而且它可以被着色器程序的任意着色器在任意阶段访问。第二，无论你把uniform值设置成什么，uniform会一直保存它们的数据，直到它们被重置或更新。要在GLSL中声明uniform，我们只需将uniform关键字添加到具有类型和名称的着色器中。从那时起，我们就可以在着色器中使用新声明的 uniform。我们来看看这次是否能通过uniform设置三角形的颜色：

#version 330 core
out vec4 FragColor;uniform vec4 ourColor; // 在OpenGL程序代码中设定这个变量void main()
{FragColor = ourColor;
}

QElapsedTimer timer;
timer.start();......
qint64 time = timer.elapsed();
float timeValue = (float)time / 1000.0;
float greenValue = (sin(timeValue) / 2.0f) + 0.5f;
int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");
glUseProgram(shaderProgram);
glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);

  我们在片段着色器中声明了一个uniform vec4的ourColor，并把片段着色器的输出颜色设置为uniform值的内容。因为uniform是全局变量，我们可以在任何着色器中定义它们，而无需通过顶点着色器作为中介。顶点着色器中不需要这个uniform，所以我们不用在那里定义它。如果你声明了一个uniform却在GLSL代码中没用过，编译器会静默移除这个变量，导致最后编译出的版本中并不会包含它，这可能导致几个非常麻烦的错误，记住这点。这个uniform现在还是空的，我们还没有给它添加任何数据。我们首先需要找到着色器中uniform属性的索引/位置值。当我们得到uniform的索引/位置值后，我们就可以更新它的值了。这次我们不去给像素传递单独一个颜色，而是让它随着时间改变颜色。
  首先我们通过Qt提供的接口获取运行的秒数。然后我们使用sin函数让颜色在0.0到1.0之间改变，最后将结果储存到greenValue里。接着，我们用glGetUniformLocation查询uniform ourColor的位置值。我们为查询函数提供着色器程序和uniform的名字（这是我们希望获得的位置值的来源）。如果glGetUniformLocation返回-1就代表没有找到这个位置值。最后，我们可以通过glUniform4f函数设置uniform值。注意，查询uniform地址不要求你之前使用过着色器程序，但是更新一个uniform之前你必须先使用程序（调用glUseProgram），因为它是在当前激活的着色器程序中设置uniform的。
  因为OpenGL在其核心是一个C库，所以它不支持类型重载，在函数参数不同的时候就要为其定义新的函数；glUniform是一个典型例子。这个函数有一个特定的后缀，标识设定的uniform的类型。每当你打算配置一个OpenGL的选项时就可以简单地根据这些规则选择适合你的数据类型的重载函数。在我们的例子里，我们希望分别设定uniform的4个float值，所以我们通过glUniform4f传递我们的数据(注意，我们也可以使用fv版本)。可能的后缀有：

  现在你知道如何设置uniform变量的值了，我们可以使用它们来渲染了。如果我们打算让颜色慢慢变化，我们就要在循环的每一次迭代中（所以他会逐帧改变）更新这个uniform，否则三角形就不会改变颜色。下面我们就计算greenValue然后每个渲染迭代都更新这个uniform。Qt控件中每一次循环都是通过绘制事件来触发界面更新的，在界面更新之前会调用绘制函数来绘制需要更新的内容，这里是在paintGL()中完成。

void LearnOpenGLWidget::paintGL()
{m_funcs->glClearColor(0.2f, 0.3f, 0.3f, 1.0f);m_funcs->glClear(GL_COLOR_BUFFER_BIT);// 指定着色器m_funcs->glUseProgram(m_program);// 更新uniform颜色qint64 time = m_elapsedTimer.elapsed();float timeValue = (float)time / 1000.0;float greenValue = sin(timeValue) / 2.0f + 0.5f;qDebug() << "greenValue: " << greenValue;int vertexColorLocation = m_funcs->glGetUniformLocation(m_program, "ourColor");m_funcs->glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);// 绑定VAOm_funcs->glBindVertexArray(m_VAO);// 绘制三角形m_funcs->glDrawArrays(GL_TRIANGLES, 0, 3);
}

  我们会得到这样的效果：

  可以看到，uniform对于设置一个在渲染迭代中会改变的属性是一个非常有用的工具，它也是一个在程序和着色器间数据交互的很好工具，但假如我们打算为每个顶点设置一个颜色的时候该怎么办？这种情况下，我们就不得不声明和顶点数目一样多的uniform了。在这一问题上更好的解决方案是在顶点属性中包含更多的数据，这是我们接下来要做的事情。

更多属性

  在前面的教程中，我们了解了如何填充VBO、配置顶点属性指针以及如何把它们都储存到一个VAO里。这次，我们同样打算把颜色数据加进顶点数据中。我们将把颜色数据添加为3个float值至vertices数组。我们将把三角形的三个角分别指定为红色、绿色和蓝色：

float vertices[] = {// 位置              // 颜色0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,   // 右下-0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,   // 左下0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f    // 顶部
};

  由于现在有更多的数据要发送到顶点着色器，我们有必要去调整一下顶点着色器，使它能够接收颜色值作为一个顶点属性输入。需要注意的是我们用layout标识符来把aColor属性的位置值设置为1。

#version 330 core
layout (location = 0) in vec3 aPos;   // 位置变量的属性位置值为 0 
layout (location = 1) in vec3 aColor; // 颜色变量的属性位置值为 1out vec3 ourColor; // 向片段着色器输出一个颜色void main()
{gl_Position = vec4(aPos, 1.0);ourColor = aColor; // 将ourColor设置为我们从顶点数据那里得到的输入颜色
}

  由于我们不再使用uniform来传递片段的颜色了，现在使用ourColor输出变量，我们必须再修改一下片段着色器。

#version 330 core
in vec3 ourColor;
out vec4 color;void main()
{color = vec4(ourColor, 1.0f);
}

  因为我们添加了另一个顶点属性，并且更新了VBO的内存，我们就必须重新配置顶点属性指针告诉OpenGL如何解释顶点属性。更新后的VBO内存中的数据现在看起来像这样：

  glVertexAttribPointer函数的前几个参数比较明了。这次我们配置属性位置值为1的顶点属性。颜色值有3个float那么大，我们不去标准化这些值。由于我们现在有了两个顶点属性，我们不得不重新计算步长值。为获得数据队列中下一个属性值（比如位置向量的下个x分量）我们必须向右移动6个float，其中3个是位置值，另外3个是颜色值。这使我们的步长值为6乘以float的字节数（=24字节）。同样，这次我们必须指定一个偏移量。对于每个顶点来说，位置顶点属性在前，所以它的偏移量是0。颜色属性紧随位置数据之后，所以偏移量就是3 * sizeof(GLfloat)，用字节来计算就是12字节。按照类似的方式，你可以给顶点属性数据中添加更多的属性，但是需要在OpenGL支持的最大范围内，在上一篇你好三角形中我们有提到这一点。

// 位置属性
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)0);
glEnableVertexAttribArray(0);
// 颜色属性
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(GLfloat), (GLvoid*)(3* sizeof(GLfloat)));
glEnableVertexAttribArray(1);

  一切顺利，会得到这样的效果：

  我们只提供了三种颜色，却得到了一个放大调色盘。这是在片段着色器中进行的所谓片段插值(Fragment Interpolation)的结果。当渲染一个三角形时，光栅化(Rasterization)阶段通常会造成比原指定顶点更多的片段。光栅会根据每个片段在三角形形状上所处相对位置决定这些片段的位置。
  基于这些位置，它会插值(Interpolate)所有片段着色器的输入变量。比如说，我们有一个线段，上面的端点是绿色的，下面的端点是蓝色的。如果一个片段着色器在线段的70%的位置运行，它的颜色输入属性就会是一个绿色和蓝色的线性结合；更精确地说就是30%蓝 + 70%绿。
  这正是在这个三角形中发生了什么。我们有3个顶点，和相应的3个颜色，从这个三角形的像素来看它可能包含50000左右的片段，片段着色器为这些像素进行插值颜色。如果你仔细看这些颜色就应该能明白了：红首先变成到紫再变为蓝色。片段插值会被应用到片段着色器的所有输入属性上。

自己的着色器类

  由于后续会经常用到着色器，每次都重新写出完整的过程显然不符合人类偷懒的天性，现在让我们用Qt结合OpenGL完成一个着色器类，帮助我们完成从文件中读取着色器内容，然后编译，链接完成生成着色器程序，并提供设置Uniform变量的功能。

bool compileSourceCode(const char *vertexCode, const char *fragmentCode)
{int success = -1;char infoLog[512];// vertex shaderunsigned int vertexShader = m_funcs->glCreateShader(GL_VERTEX_SHADER);m_funcs->glShaderSource(vertexShader, 1, &vertexCode, NULL);m_funcs->glCompileShader(vertexShader);m_funcs->glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);if (!success){m_funcs->glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);qWarning() << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog;Q_ASSERT(false);return false;}// fragment shaderunsigned int fragmentShader = m_funcs->glCreateShader(GL_FRAGMENT_SHADER);m_funcs->glShaderSource(fragmentShader, 1, &fragmentCode, NULL);m_funcs->glCompileShader(fragmentShader);m_funcs->glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);if (!success){m_funcs->glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);qWarning() << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog;Q_ASSERT(false);return false;}// link shadersunsigned int shaderProgram = m_funcs->glCreateProgram();m_funcs->glAttachShader(shaderProgram, vertexShader);m_funcs->glAttachShader(shaderProgram, fragmentShader);m_funcs->glLinkProgram(shaderProgram);// check for linking errorsm_funcs->glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);if (!success){m_funcs->glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);qWarning() << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog;Q_ASSERT(false);return false;}m_funcs->glDeleteShader(vertexShader);m_funcs->glDeleteShader(fragmentShader);m_ID = shaderProgram;return true;
}

  compileSourceCode()提供了从字符串编译链接出着色器程序的能力，和前面生成着色器的流程类似，先处理顶点着色器和片段着色器的编译，编译完成后链接生成着色器程序保存在m_ID中，最后删除使用完毕的顶点着色器和片段着色器。

bool compileSourceFile(const QString& vertexFileName, const QString& fragmentFileName)
{QFile vertexFile(vertexFileName);if (!vertexFile.open(QIODevice::ReadOnly | QIODevice::Text)){qWarning() << "Open vertexFile Failed";Q_ASSERT(false);return false;}QFile fragmentFile(fragmentFileName);if (!fragmentFile.open(QIODevice::ReadOnly | QIODevice::Text)){qWarning() << "Open fragmentFile Failed";Q_ASSERT(false);return false;}QTextStream vStream(&vertexFile);QString vertexStr = vStream.readAll();QTextStream fStream(&fragmentFile);QString fragmentStr = fStream.readAll();vertexFile.close();fragmentFile.close();std::string vStr = vertexStr.toStdString();std::string fStr = fragmentStr.toStdString();return compileSourceCode(vStr.c_str(), fStr.c_str());
}

  compileSourceFile()提供了从文件编译出着色器程序的能力，通过Qt提供的接口实现文件读取到字符串，然后调用compileSourceCode()实现着色器的编译。

void use()
{m_funcs->glUseProgram(m_ID);
}

  use()提供提供激活当前着色器的功能。

void setFloat(const char *name, float value, bool useShader = false)
{if (useShader)use();m_funcs->glUniform1f(m_funcs->glGetUniformLocation(m_ID, name), value);
}......

  最后setFloat()等函数提供设置着色器中Uniform变量的功能。OK，这样就是实现了我们自己的着色器，以后可以愉快的使用了~

欢迎留言讨论，创作不易，感谢点赞、关注和收藏～