Qt with OpenGL：能够自动变色的着色器

最近在系统的学习有关OpenGL的内容，参考的主要学习资料是Joey de Vries的教程在Github上的中文翻译：LearnOpenGL CN
这些笔记主要是汇总整理一些其中的想法，并结合Qt的内容给出自己的理解，对于每篇文章的实现的Qt代码，贴在文后

---

在三角形中有提及，Shader是运行在GPU上的小程序，这些小程序为Graphic Pipeline某些特定部分运行。它们之间也不能互相通信，从输入到输出环环相扣。

GLSL

着色器是使用一种叫GLSL的类C语言写成的。GLSL是为Graphic Pipeline量身定做，包含一些针对向量和矩阵操作的有用特性。
着色器的开头总是要声明版本，然后是输入和输出变量、uniform和main函数。每个着色器的入口都是main函数，在这个函数中我们处理所有的输入变量，并将结果输出到输出变量中，uniform是个很特殊的变量，后文会有详细解释
典型Shader的结构：

#version version_number
in type in_variable_name;
in type in_variable_name;

out type out_variable_name;

uniform type uniform_name;

int main(){
    // 处理输入并进行一些图形操作
    ···
    // 输出处理过的结果到输出变量
    out_variable_name = weird_stuff_we_processed;
}

当我们特别谈论到VertexShader时，每个输入变量也叫顶点属性。OpenGL确保至少有16个包含4分量的顶点属性可用，一般来说这些足够我们使用。

数据类型

和其他编程语言一样，GLSL有数据类型可以来指定变量的种类。GLSL中包含c等其他语言大部分默认的基础数据类型：int、float、double、uint和bool。GLSL也有两种容器类型，分别时Vector和Matrix。

向量Vector

GLSL中的向量可以时一个包含1，2，3，4个分量的容器，分量类型可以时前面默认基础类型的任意一个：

类型	含义
vecn	包含n个float分量的默认向量
bvecn	包含n个bool分量的向量
ivecn	包含n个int分量的向量
uvecn	包含n个unsigned int 分量的向量
dvecn	包含n个double分量的向量

大多数的时候我们使用vecn，因为float足够满足大多数要求了。
可以使用.x、.y、.z和.w访问位置，也可以使用rgba访问颜色或是stpq访问纹理。
向量也是可以重组的：

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

使用向量真是特别灵活多变。

输入与输出

Shader彼此之间是独立的，但是却又是用输入输出将它们链接起来。GLSL定义了in和out关键字实现这个目的。只要一个输出变量也下一个着色器阶段的输入匹配，就可以传递下去。
顶点着色器应该接受的是一种特殊形式的输入，要不然效率会很低下（是由于从CPU发送数据到GPU很慢）。我们可以使用location这样的元数据指定输入变量，这样才可以在CPU上配置顶点属性。
片段着色器需要一个vec4颜色输出变量，如果不指定片段着色器的输出颜色，那么OpenGL会将物体渲染成黑色或者白色。所以在数据传递的时候，我们必须在发送方着色器中声明一个输出，在接收方声明一个输入，类型和名字都要一样，这样链接程序时就会把变量链接到一起。

顶点着色器

#version 330 core
layout (location = 0) in vec3 aPos; // 位置变量的属性位置值为0

out vec4 vertexColor; // 为片段着色器指定一个颜色输出

void main()
{
    gl_Position = vec4(aPos, 1.0); // 注意我们如何把一个vec3作为vec4的构造器的参数
    vertexColor = vec4(0.5, 0.0, 0.0, 1.0); // 把输出变量设置为暗红色
}

片段着色器

#version 330 core
out vec4 FragColor;

in vec4 vertexColor; // 从顶点着色器传来的输入变量（名称相同、类型相同）

void main()
{
    FragColor = vertexColor;
}

Uniform

Uniform是一种从CPU中的应用向GPU中的着色器发送数据的方式，但是uniform和顶点属性不一样，uniform是全局的。这就意味着uniform类型的变量在每一个着色器里都是独一无二的，它们是可以在任意着色器的任意阶段都可以访问的变量；第二就是无论uniform值设置成什么，这个变量都会一直保存它们的数据，直到这个数据重新刷新。

#version 330 core
out vec4 FragColor;

uniform vec4 ourColor; // 在OpenGL程序代码中设定这个变量

void main()
{
    FragColor = ourColor;
}

在这个片段着色器中声明了一个uniform vec4的ourColor，把这个颜色设置为输出颜色的内容。由于这个是全局变量，所以在哪里都是可以定义这个uniform，也就不需要再顶点着色器定义uniform。如果我们声明了一个uniform，然而在GLSL代码中却没用过，编译器就会自己移除这个变量，会产生一系列错误，所以如果定义了uniform就一定要用上，否则就不要定义它，不爱就别伤害。
现在这个uniform还是一个空的变量，所以就需要找到着色器中索引值

float timeValue = glfwGetTime();
float greenValue = (sin(timeValue) / 2.0f) + 0.5f;
int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");
glUseProgram(shaderProgram);
glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);

这段代码实现了一个可以让输出颜色不断变化的功能，我们还需要不断的把颜色刷新到图形上：

while(!glfwWindowShouldClose(window))
{
    // 输入
    processInput(window);

    // 渲染
    // 清除颜色缓冲
    glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);

    // 记得激活着色器
    glUseProgram(shaderProgram);

    // 更新uniform颜色
    float timeValue = glfwGetTime();
    float greenValue = sin(timeValue) / 2.0f + 0.5f;
    int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");
    glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);

    // 绘制三角形
    glBindVertexArray(VAO);
    glDrawArrays(GL_TRIANGLES, 0, 3);

    // 交换缓冲并查询IO事件
    glfwSwapBuffers(window);
    glfwPollEvents();
}

以上的代码都是在C++的环境中运行，这些都只用于理解，在Qt中有更为简便的实现方式。

Qt工程