OpenGL入门1.3：着色器 GLSL
前言#
经过之前一段时间的学习（渲染管线简介）我们已经知道了着色器(Shader)是运行在GPU上的程序，这些小程序为图形渲染管线的某个特定部分而运行，着色器只是一种把输入转化为输出的程序，着色器也是一种非常独立的程序，因为它们之间不能相互通信，它们之间唯一的沟通只有通过输入和输出
之前我们简要地触及了一点着色器的皮毛，并了解了如何恰当使用它们，现在我们要用一种更加广泛的形式详细解释着色器，特别是OpenGL着色器语言(GLSL)
GLSL简介#
我们现在讨论的着色器是使用OpenGL着色器语言GLSL写成的，这是一种类C语言，GLSL是为图形计算量身定制的，它包含一些针对向量和矩阵操作的有用特性
着色器的开头总是要声明版本，接着是输入和输出变量、uniform(以后会解释)和main函数
每个着色器的入口点都是main函数，在这个函数中我们处理所有的输入变量，并将结果输出到输出变量中
一个典型的着色器有下面的结构：
#version version_number
in type in_variable_name;
in type in_variable_name; //声明版本
out type out_variable_name; //输出
uniform type uniform_name; //uniform
int main()
{
// 处理输入并进行一些图形操作
...
// 输出处理过的结果到输出变量
out_variable_name = weird_stuff_we_processed;
}
回看我们之前的图：
可以看到，对于顶点着色器(Vertex Shader)来说，输入变量是顶点数据(Vertex Data)，顶点数据是用顶点属性(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;
通常情况下它至少会返回16个，大部分情况下是够用了
数据类型#
GLSL中包含C等其它语言大部分的默认基础数据类型：int、float、double、uint和bool
GLSL也有两种容器类型，它们会在这个教程中使用很多，分别是向量(Vector)和矩阵(Matrix)，其中矩阵我们之后再讨论
向量#
GLSL中的向量是一个可以包含有1、2、3或者4个分量的容器，分量的类型可以是前面默认基础类型的任意一个。它们可以是下面的形式（n代表分量的数量）：
| 类型 | 含义 |
|---|---|
vecn |
包含n个float分量的默认向量 |
bvecn |
包含n个bool分量的向量 |
ivecn |
包含n个int分量的向量 |
uvecn |
包含n个unsigned int分量的向量 |
dvecn |
包含n个double分量的向量 |
大多数时候我们使用vecn，因为float足够满足大多数要求了
一个向量的分量可以分别使用.x、.y、.z和.w来获取它们的第1、2、3、4个分量
GLSL也允许你对颜色使用rgba，或是对纹理坐标使用stpq访问相同的分量
向量这一数据类型也允许一些有趣而灵活的分量选择方式：重组(Swizzling)
vec2 someVec;
vec4 differentVec = someVec.xyxx;
vec3 anotherVec = differentVec.zyw;
vec4 otherVec = someVec.xxxx + anotherVec.yxzy;
你可以使用上面4个字母任意组合来创建一个和原来向量一样长的（同类型）新向量，只要原来向量有那些分量即可（当然，不允许在一个vec2向量中去获取.z元素）
我们也可以把一个向量作为一个参数传给不同的向量构造函数，以减少需求参数的数量：
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; //位置变量的属性位置值为0
out vec4 vertexColor; //指定一个颜色输出作为片段着色器输入
void main()
{
gl_Position = vec4(aPos, 1.0); //把一个vec3作为vec4的构造器的参数
vertexColor = vec4(0.0, 0.0, 1.0, 1.0); //把输出变量设置为蓝色
}
片段着色器
#version 330 core
out vec4 FragColor;
in vec4 vertexColor; //从顶点着色器传来的输入变量（名称相同、类型相同）
void main()
{
FragColor = vertexColor;
}
我们在顶点着色器中声明了一个vertexColor变量作为vec4输出，并在片段着色器中声明了一个类似的vertexColor输入，由于它们名字相同且类型相同，片段着色器中的vertexColor就和顶点着色器中的vertexColor链接了
由于我们在顶点着色器中将颜色设置为蓝色，最终的片段也是蓝色的
那我们更进一步，看看能否从应用程序中直接给片段着色器发送一个颜色
Uniform#
Uniform是一种从CPU中的应用向GPU中的着色器发送数据的方式，但uniform和顶点属性有些不同，首先，uniform是全局的(Global)，全局意味着uniform变量必须在每个着色器程序对象中都是独一无二的，而且它可以被着色器程序的任意着色器在任意阶段访问，然后，无论你把uniform值设置成什么，uniform会一直保存它们的数据，直到它们被重置或更新
我们可以在一个着色器中添加uniform关键字至类型和变量名前来声明一个GLSL的uniform
从此处开始我们就可以在着色器中使用新声明的uniform了，以下是片段着色器的代码
#version 330 core
out vec4 FragColor;
uniform vec4 ourColor; // 在OpenGL程序代码中设定这个变量
void main()
{
FragColor = ourColor;
}
我们在片段着色器中声明了一个uniform vec4的ourColor，并把片段着色器的输出颜色设置为uniform值的内容，因为uniform是全局变量，我们可以在任何着色器中定义它们，而无需通过顶点着色器作为中介，顶点着色器中不需要这个uniform，所以我们不用顶点着色器里定义它
如果你声明了一个uniform却在GLSL代码中没用过，编译器会静默移除这个变量，导致最后编译出的版本中并不会包含它，这可能导致几个非常麻烦的错误
这个uniform现在还是空的；我们还没有给它添加任何数据，所以下面我们就做这件事
我们首先需要找到着色器中uniform属性的索引/位置值，当我们得到uniform的索引/位置值后，我们就可以更新它的值了，这次我们不去给像素传递单独一个颜色，而是让它随着时间改变颜色：
//渲染循环内
glUseProgram(shaderProgram);
float timeValue = glfwGetTime();//获取运行的秒数
float greenValue = (sin(timeValue) / 2.0f) + 0.5f;//让颜色在0.0到1.0之间改变，结果储存到greenValue里
int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");//用glGetUniformLocation查询uniform ourColor的位置值
glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);//通过glUniform4f函数设置uniform值
首先我们通过glfwGetTime()获取运行的秒数
然后我们使用sin函数让颜色在0.0到1.0之间改变，最后将结果储存到greenValue里
接着，我们用glGetUniformLocation查询uniform ourColor的位置值，我们为查询函数提供着色器程序和uniform的名字（这是我们希望获得的位置值的来源），如果glGetUniformLocation返回-1就代表没有找到这个位置值
最后，我们可以通过glUniform4f函数设置uniform值，注意，查询uniform地址不要求你之前使用过着色器程序，但是更新一个uniform之前你必须先使用程序（调用glUseProgram)，因为它是在当前激活的着色器程序中设置uniform的
因为OpenGL在其核心是一个C库，所以它不支持类型重载，在函数参数不同的时候就要为其定义新的函数；glUniform是一个典型例子。这个函数有一个特定的后缀，标识设定的uniform的类型。可能的后缀有：
| 后缀 | 含义 |
|---|---|
f |
函数需要一个float作为它的值 |
i |
函数需要一个int作为它的值 |
ui |
函数需要一个unsigned int作为它的值 |
3f |
函数需要3个float作为它的值 |
fv |
函数需要一个float向量/数组作为它的值 |
在我们的代码中，我们希望分别设定uniform的4个float值，所以我们通过glUniform4f传递我们的数据(也可以使用fv)
现在你知道如何设置uniform变量的值了，我们可以使用它们来渲染了，如果我们打算让颜色慢慢变化，我们就要在渲染循环的每一次迭代中（所以他会逐帧改变）更新这个uniform，否则三角形就不会改变颜色
下面我们就计算greenValue然后每个渲染迭代都更新这个uniform：
while (!glfwWindowShouldClose(window))
{
// 输入
processInput(window);
// 渲染指令
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(shaderProgram);
float timeValue = glfwGetTime();//获取运行的秒数
float greenValue = (sin(timeValue) / 2.0f) + 0.5f;//让颜色在0.0到1.0之间改变，结果储存到greenValue里
int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");//用glGetUniformLocation查询uniform ourColor的位置值
glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);//通过glUniform4f函数设置uniform值
glBindVertexArray(VAO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
glBindVertexArray(0);
// 检查并调用事件，交换缓冲
glfwSwapBuffers(window);
// 检查触发什么事件，更新窗口状态
glfwPollEvents();
}
这里的代码对之前代码是一次非常直接的修改。这次，我们在每次迭代绘制三角形前先更新uniform值
正确更新了uniform，就可以看到我们的矩形逐渐由绿变黑再变回绿色：
现在我们的代码如下：
#include <glad/glad.h>
#include <GLFW/glfw3.h>
#include <iostream>
void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);
// settings
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, 1.0);\n"
"}\0";
const char* fragmentShaderSource = "#version 330 core\n"
"out vec4 FragColor;\n"
"uniform vec4 ourColor;\n"
"void main()\n"
"{\n"
" FragColor = ourColor;\n"
"}\n\0";
int main()
{
// 实例化GLFW窗口
glfwInit();//glfw初始化
glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);//主版本号
glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);//次版本号
glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
GLFWwindow* window = glfwCreateWindow(800, 600, "LearnOpenGL", NULL, NULL);
//（宽，高，窗口名）返回一个GLFWwindow类的实例：window
if (window == NULL)
{
// 生成错误则输出错误信息
std::cout << "Failed to create GLFW window" << std::endl;
glfwTerminate();
return -1;
}
glfwMakeContextCurrent(window);
// 告诉GLFW我们希望每当窗口调整大小的时候调用改变窗口大小的函数
glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);
// glad管理opengl函数指针，初始化glad
if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
{
// 生成错误则输出错误信息
std::cout << "Failed to initialize GLAD" << std::endl;
return -1;
}
//build and compile 着色器程序
//顶点着色器
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;
}
else {
std::cout << "vertexShader complie SUCCESS" << std::endl;
}
//片段着色器
unsigned int fragmentShader;
fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);
//检查片段着色器是否编译错误
glGetShaderiv(fragmentShader, GL_LINK_STATUS, &success);
if (!success) {
glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;
}
else {
std::cout << "fragmentShader complie SUCCESS" << 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;
}
else {
std::cout << "shaderProgram complie SUCCESS" << std::endl;
}
//连接后删除
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);
//顶点数据
float vertices[] = {
0.5f, 0.5f, 0.0f, // 0号点
0.5f, -0.5f, 0.0f, // 1号点
-0.5f, -0.5f, 0.0f, // 2号点
-0.5f, 0.5f, 0.0f // 3号点
};
unsigned int indices[] = { // 注意索引从0开始!
0, 1, 3, // 第一个三角形
1, 2, 3 // 第二个三角形
};
unsigned int VBO;
glGenBuffers(1, &VBO);
unsigned int VAO;
glGenVertexArrays(1, &VAO);
unsigned int EBO;
glGenBuffers(1, &EBO);
// 初始化代码
// 1. 绑定顶点数组对象
glBindVertexArray(VAO);
// 2. 把我们的顶点数组复制到一个顶点缓冲中，供OpenGL使用
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 3. 复制我们的索引数组到一个索引缓冲中，供OpenGL使用
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
// 4. 设定顶点属性指针
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);
////线框模式wireframe
//glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
// 渲染循环
while (!glfwWindowShouldClose(window))
{
// 输入
processInput(window);
// 渲染指令
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(shaderProgram);
float timeValue = glfwGetTime();//获取运行的秒数
float greenValue = (sin(timeValue) / 2.0f) + 0.5f;//让颜色在0.0到1.0之间改变，结果储存到greenValue里
int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");//用glGetUniformLocation查询uniform ourColor的位置值
glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);//通过glUniform4f函数设置uniform值
glBindVertexArray(VAO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
glBindVertexArray(0);
// 检查并调用事件，交换缓冲
glfwSwapBuffers(window);
// 检查触发什么事件，更新窗口状态
glfwPollEvents();
}
// 释放之前的分配的所有资源
glDeleteVertexArrays(1, &VAO);
glDeleteBuffers(1, &VBO);
glDeleteBuffers(1, &EBO);
glfwTerminate();
return 0;
}
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
// 每当窗口改变大小，GLFW会调用这个函数并填充相应的参数供你处理
glViewport(0, 0, width, height);
}
void processInput(GLFWwindow* window)
{
// 返回这个按键是否正在被按下
if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)