OpenGL基础（05）GLSL语言简介

前几个章节主要是使用OpenGL绘制出基本的图形，从这里开始我们考虑颜色的渐变，首先要了解GLSL语言的基础知识。

1 GLSL简介

GLSL是用来编写着色器程序的语言。GLSL是为图形计算量身定制的，它包含一些针对向量和矩阵操作的有用特性。着色器的开头要声明版本，接着是输入和输出变量、uniform和main函数。每个着色器的入口点都是main函数，在main中我们处理所有的in变量，并将结果输出到out变量中。

2 GLSL数据类型

GLSL的数据类型可以来指定变量种类。有如下几类：

• 基础数据类型：int、float、double、uint和bool。
• 容器类型：向量(Vector)、矩阵(Matrix)。

因为基础数据类型 和C语言类似，因此不多做阐述，主要讲解向量部分和矩阵部分

2.1 向量

@1 向量形式

GLSL中的向量是一个可以包含有1-4个分量的容器，分量的类型可以是前面默认基础类型的任意一个。它们可以是下面的形式（n代表分量的数量）：

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

一个向量的分量可以通过vec.x这种方式获取，也可以使用.x、.y、.z和.w来获取它们的其他几个分量。GLSL也允许对颜色使用rgba，或对纹理坐标使用stpq访问相同的分量。

@2 向量重组

向量这一数据类型也允许一些有趣而灵活的分量选择方式，叫做重组(Swizzling)。重组允许这样的语法：

vec2 someVec;
vec4 differentVec = someVec.xyxx;
vec3 anotherVec = differentVec.zyw;
vec4 otherVec = someVec.xxxx + anotherVec.yxzy;

可以使用上面4个字母任意组合来创建一个和原来向量一样长的（同类型）新向量，只要原来向量有那些分量即可。

@3 向量传递

我们也可以把一个向量作为一个参数传给不同的向量构造函数，以减少需求参数的数量：

vec2 vect = vec2(0.5f, 0.7f);
vec4 result = vec4(vect, 0.0f, 0.0f);
vec4 otherResult = vec4(result.xyz, 1.0f);

总之，向量是一种灵活的数据类型，我们可以把用在各种输入和输出上。

2.2 矩阵

3 输入输出

3.1 输入输出基础

着色器是各自独立的小程序，因此GLSL为每个着色器都定义了in和out关键字专门来实现数据交流和传递。每个着色器使用in和out来设定输入输出，只要一个输出变量与下一个着色器阶段的输入匹配，它的值就会传递下去。但在顶点和片段着色器中会有点不同。

• 顶点着色器从顶点数据中直接接收输入。
• 片段着色器需要一个vec4颜色输出变量，因为它需要生成一个最终输出的颜色。

所以，如果我们打算从一个着色器向另一个着色器发送数据，我们必须在发送方着色器中声明一个输出，在接收方着色器中声明一个输入。当类型和名字都一样的时候，OpenGL就会把两个变量链接到一起，它们之间就能发送数据了（这在链接程序对象时完成的）。如下两个着色器代码连接的方式如下：

@1 顶点着色器

#version 330 core
layout (location = 0) in vec3 position; // position变量的属性位置值为0
out vec4 vertexColor; // 为片段着色器指定一个颜色输出
void main()
{
    gl_Position = vec4(position, 1.0); // 注意我们如何把一个vec3作为vec4的构造器的参数
    vertexColor = vec4(0.0f, 0.0f, 1.0f, 1.0f); // 把输出变量设置为暗红色
}

@2 片段着色器

#version 330 core
in vec4 vertexColor; // 从顶点着色器传来的输入变量（名称相同、类型相同）
out vec4 color; // 片段着色器输出的变量名可以任意命名，类型必须是vec4
void main()
{
    color = vertexColor;
}

在顶点着色器中声明了一个vertexColor变量作为vec4输出，并在片段着色器中声明了一个vertexColor变量作为输入。它们名字相同且类型相同，片段着色器中的vertexColor就和顶点着色器中的vertexColor链接了。由于我们在顶点着色器中将颜色设置为蓝色，最终的片段也是蓝色的。值传递的过程 就像是管道连接过程一样。

3.2 输入输出扩展

基于上面的机制，我们可以把颜色数据加进顶点数据中。代码如下所示：

GLfloat 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标识符来把color属性的位置值设置为1，代码如下所示：

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

对应的片段着色器代码如下：

#version 330 core
in vec3 ourColor;
out vec4 color;

void main()
{
    color = vec4(ourColor, 1.0f);
}

因为我们添加了另一个顶点属性，并且更新了VBO的内存，我们就必须重新配置顶点属性指针。之前是这样：

更新后的VBO内存中的数据现在看起来像这样：

对应的代码修改为：

// 位置属性
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);

我们有3个顶点，和相应的3个颜色，从这个三角形的像素来看它可能包含50000左右的片段，片段着色器为这些像素进行插值颜色。如果你仔细看这些颜色就应该能明白了：红首先变成到紫再变为蓝色。片段插值会被应用到片段着色器的所有输入属性上。所以最终产生的效果如下所示：

4 Uniform变量

Uniform是 从CPU中的应用向GPU中的着色器发送数据的方式，但uniform和顶点属性有些不同。

• uniform是全局的(Global)。
• 无论你把uniform值设置成什么，uniform会一直保存它们的数据，直到它们被重置或更新。

通过GLSL语言，可以通过uniform设置三角形的颜色，着色器代码如下：

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

接下来我们在应用代码中做如下设置，代码如下：

//获取运行的秒数。
GLfloat timeValue = glfwGetTime();
//使用sin函数让颜色在0.0到1.0之间改变，最后将结果储存到greenValue，持续变化
GLfloat greenValue = (sin(timeValue) / 2) + 0.5;
//查询uniform ourColor的位置值。查询函数参数为：着色器程序 和 uniform名字
GLint vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");
glUseProgram(shaderProgram);
//设置uniform值
glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);

知道如何设置uniform变量的值，就可以使用它们来渲染了。可以在每次渲染循环时更新uniform，渲染部分代码如下：

while(!glfwWindowShouldClose(window))
{
    glfwPollEvents();
    glClearColor(0.2f, 0.4f, 0.3f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);
    glUseProgram(shaderProgram);

    //新添加部分:更新uniform颜色
    GLfloat timeValue = glfwGetTime();
    GLfloat greenValue = (sin(timeValue) / 2) + 0.5;
    GLint vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");
    glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);

    glBindVertexArray(VAO);
    glDrawArrays(GL_TRIANGLES, 0, 3);
    glBindVertexArray(0);
}

---

该系列文章主要参考openGL官网 和学习 learnopenGL官网 进行知识体系的梳理和重构，重在形成自己对openGL知识的理解和知识体系。

• 参考相关链接总站：https://learnopengl-cn.readthedocs.io/zh/latest/
• 参考OpenGL官网：https://www.opengl.org/about/
• 同时也参考了网上其他内容知识 进而 进行整合。