OpenGL学习笔记二（着色器）

OpenGL的着色器语言（GLSL)

ps：本篇大部分摘抄自LearnOpenGL

在说OpenGL的着色器语言之前先来介绍一下着色器到底是个什么东西。

在学unity3d的时候就听说有人说能写shader和做图形渲染优化的人都是大神，当时没学过着色器一听就感觉不明觉厉啊，先送上膝盖再说。现在学了着色器当然还是感觉一脸懵逼Orz。

这时就该祭出无上法典《计算机图形学》，没错就是这本书，看不懂shader、学不会shader还是我们没有打好基础，因为shader是应用在GPU上的语言，如果不了解GPU的工作流程，我们如何学会shader呢。

着色器(Shader)是运行在GPU上的小程序。这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说，着色器只是一种把输入转化为输出的程序。着色器也是一种非常独立的程序，因为它们之间不能相互通信；它们之间唯一的沟通只有通过输入和输出。

Shaders 是进行三维图形学编程的先进方法，从某种意义上来说 Shader 的出现是图形学中的一种”退步”，因为在这之前所有的功能都直接由固定管线提供，而开发人员只需要为其指定参数（如光照属性、旋转角度等），但是由于 Shader 的出现这些功能现在都需要开发者自己通过 Shader 实现。尽管如此，这种可编程性能够提供给开发者更多的灵活性和创造性。

目前主流的着色器语言有GLSL（OpenGL Shading Language）是在 OpenGL 对应的着色器语言。相对地，DirectX 对应的着色器语言是 High-Level Shading Language（HLSL）。本篇说的OpenGL的着色器语言GLSL。

着色器是使用一种叫GLSL的类C语言写成的。GLSL是为图形计算量身定制的，它包含一些针对向量和矩阵操作的有用特性。

OpenGL的可编程管线如下图所示：

在我上一篇OpenGL学习笔记（三角形） 就用到了最基本的着色器语言，也差不多是最简单的着色器语言，顶点着色器（Vertex Shader）和片段着色器（Fragment Shader）。就OpenGL而言着色器一般有三种着色器顶点着色器、片元着色器、几何着色器。

顶点处理器负责对传入渲染管线的每个顶点执行顶点着色器中的内容，（传入的顶点的数量由绘制函数确定），顶点着色器并不关心所要渲染的基本图元的拓扑结构。此外，你不能在顶点处理器中丢弃任何一个顶点。每个顶点都只被顶点处理器处理一次，在经过矩阵变换之后继续进入接下来的流水线。

下一个阶段是几何处理器，组成图元所需要的顶点以及其邻接关系都会被提供给着色器。这使得着色器能够考虑除顶点本身之外的其他信息。除此之外，几何处理器也可以将在绘制函数中确定的拓扑关系修改成另外一种拓扑关系。例如你可以通过创建一个顶点列表来生成两个三角形（如一个正方形）.除此之外，你也可以在每次调用几何着色器的时候对一个顶点进行多次引用，通过这样的方式我们可以按照我们在几何着色器中选定的拓扑结构来生成多个图元。

渲染管线中的下一个阶段是裁剪，这是一个单一功能的固定功能单元——它通过我们前面课程中见过的规范化盒子对图元进行裁剪。同时它还通过近裁剪面和远裁剪面对其进行裁剪。同时他也支持用户自定义裁剪面对场景进行裁剪。未被裁剪掉的顶点会变换到屏幕坐标系之下，之后通过光栅化将顶点按照拓扑结构渲染到屏幕上。例如，如果我们要绘制一个三角形那就意味着要找出位于三角形内部的所有点。对于这样每一个点，在光栅化过程中都会调用片段处理器对其进行处理。在片段处理器中我们可以通过对纹理进行取样或者使用其他技术来确定像素的颜色。

顶点着色器、片段着色器、几何着色器这三个可编程阶段是可选择的，如果我们不向其绑定 Shader 程序就会执行默认的固定管线的函数。

概念不能再说了不然头都晕了，下面直接上代码。

着色器的开头总是要声明版本，接着是输入和输出变量、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;

int 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)。

大多数时候我们使用vecn，因为float足够满足大多数要求了。

一个向量的分量可以通过vec.x这种方式获取，这里x是指这个向量的第一个分量。你可以分别使用.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.5, 0.0, 0.0, 1.0); // 把输出变量设置为暗红色
}

片段着色器

#version 330 core
out vec4 FragColor;

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

void main()
{
    FragColor = vertexColor;
}