着色器（Vertex Shader）基础

什么是顶点着色器    

        顶点着色器处理顶点并告知它们在“剪辑空间”中的坐标，该空间使计算机可以轻松了解哪些顶点对摄像机可见，哪些顶点不可见，必须剪切或“剪切”掉。

        这使得 GPU 在后期阶段的速度更快，因为它们需要处理的数据较少。

        它们通过接收来自顶点列表中的单个顶点作为输入来执行此过程，并返回一个结果，该结果确定顶点在裁剪空间中应存在的位置。

        由于此着色器在传递给 GPU 管道的所有顶点上按顶点执行，因此可以在此着色器中执行任何需要修改顶点的操作，只要最终输出是顶点在剪辑空间中的位置。

示例 - 三角形

        我们可以看到，对于提供的一组顶点位置，绘制了一个形状。画布上放置顶点的点由顶点着色器（部分）确定。 

运作方式

让我们看看顶点着色器的代码

Vertex Shader 代码：

attribute vec4 vertexPosition;

uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionMatrix;

void main() {
  gl_Position = projectionMatrix * viewMatrix * modelMatrix * vertexPosition;
}

尽管这是 WebGL（类似于 OpenGL），但此处应用的概念也可以映射到其他语言中。

该函数是执行顶点着色器（以及任何与此相关的着色器）时执行的主要函数，并且应包含要执行的主要着色器代码。这类似于 C/C++，其中主条目中的函数是在启动应用程序时执行的函数。void main

该属性是一个属性，它接收顶点的初始坐标作为其主要输入，它应该转换为最终剪辑空间坐标。vertexPosition

它被定义为属性，因为它是对顶点的某个“属性”（在本例中为其位置）的描述，可以根据正在操作的顶点而变化，并且始终是只读的。

请注意，它的 type 设置为 ，这意味着它是一个大小为 4 的向量，但传递给顶点着色器的顶点不必仅限于此类型，但类型将提供有关顶点坐标的最详细信息。vec4vec4

、 和 uniform 是单独传递给顶点着色器的附加属性。与属性不同，这些值对于操作的对象/基元的每个顶点都需要相同，这就是它被定义为 uniform 的原因（对于着色器操作的每个数据，它都是 uniform/相同的）。modelMatrix viewMatrix projectionMatrix vertexPosition

与属性类似，这些 uniform 的类型是 ，这意味着大小为 4x4 的矩阵。同样，它们不必局限于此类型，可以是最大 4x4 的矩阵，甚至可以是最大 4 的向量。vertexPositionmat4

以下是对正在使用的 uniform 变量的简单解释：

1. 模型矩阵

此矩阵用于表示顶点在世界中的位置。它表示着色器正在绘制的模型的中心，该模型已被平移、旋转和/或缩放到世界中的必要位置。

将顶点坐标与此矩阵相乘将提供顶点在世界中的位置与它所属的模型中心相对应的结果。

2. 视图矩阵

此矩阵用于表示顶点相对于视图的位置，或者更具体地说，是相机视图。一旦知道顶点在世界中的位置（通过将其与 相乘），就可以通过将其与此矩阵相乘来确定它相对于摄像机的位置。modelMatrix

3. 投影矩阵

此矩阵用于表示摄像机的透视。视野、纵横比等因素可能会扭曲并影响对象的外观。同样，物体的比例也会因距离而异，这需要考虑。

通过将投影矩阵乘以先前的计算结果，我们能够将顶点映射到摄像机的视角上，同时考虑它的纵横比、视野以及它能看到的最远和最近的距离。

这个最终计算为我们提供了 clip-space 中顶点的坐标。

从上面的解释中，应该可以更明显地理解为什么会执行 vertex shader 中第 8 行的操作。

1. 取顶点位置并将其与模型矩阵相乘，以确定该顶点与模型在世界中的中心的位置。
2. 然后将结果与视图矩阵相乘，以确定顶点相对于相机的位置
3. 最后，将第二个操作的结果与投影矩阵相乘，以确定顶点在相机透视中的位置。

此最终结果是顶点着色器的输出，在 WebGL 中，它存储在特殊变量 gl_Position中。

其他说明

此旋转矩阵可以更轻松地在着色器外部创建，因为有一些实用程序库提供用于执行此类操作的帮助程序函数（OpenGL 具有用于此类任务的 GLM 库）。

但是，为了了解旋转的工作原理，它显示在着色器中。

我们还计算了顶点着色器本身内模型、视图和投影矩阵的乘法。这是一个计算，其结果对于任何顶点都不会改变。

由于计算结果是一个常量，因此可以在 GPU 外部完成一次，然后作为 a 传递给顶点着色器。此优化将在以后的示例和章节中完成。uniform

这将在顶点着色器中可见，其中我们传递一个 called ，它是模型、视图和投影矩阵的乘积。任何其他转换（如旋转）也将事先计算，然后通过此 uniform。uniformmvpMatrix

总结

• 顶点着色器从顶点列表中接收一个顶点，并将其绘制到称为剪辑空间的空间中。
• 顶点着色器需要向其提供有关模型、视图和投影的某些值，以便能够确定顶点的最终位置。
• 由于着色器确定顶点在此空间中的位置，因此它可以操纵和变换要放置在任何需要的位置的顶点。