WebGL - 着色器扫盲

全文都是知识点归纳和摘抄，没有个人理解！

一、着色器概念

着色器是什么？

WebGL依赖一种新的称为着色器（shader）的绘图机制。着色器提供了灵活且强大的绘制二维或三维图形的方法，所有WebGL必须使用它。WebGL需要两种着色器:顶点着色器（Vertex shader）和 片元着色器（Fragment shader）；

1. 顶点着色器（Vertex shader）

（1）作用

1. 处理每个顶点，计算出每个顶点的位置。
2. 把每个顶点的位置发送到光栅化模块中。
3. webgl可以对图元（点、线、三角形等）进行光栅化处理。图元光栅化处理时需要使用片段着色器方法。
4. 需要将坐标系下指定的顶点位置表示变换到光栅化模块中裁剪坐标系下的表示。（如果应用程序直接在裁剪坐标系下指定顶点位置，顶点着色器 不用对输入着色器的数据做修改，通过gl_position传到光栅模块中）

（2）概念
用来描述顶点的特性的程序，比如位置、大小等。顶点是指二维或三维空间中的一个点，比如二维图形或三维图形线与线之间的顶点或交点；

（3）工作原理

1. 每个顶点都会执行一次Vertex Shader代码。 它的功能就是把每个顶点在虚拟空间中的三维坐标变换为可以在 屏幕上显示的二维坐标，并带有用于z-buffer的深度信息。
2. 可操作属性：位置、颜色、纹理坐标，但是不能创建新的顶点。
3. 主要完成以下工作：
   （1）基于点操作的矩阵乘法位置变换 。
   （2）根据光照公式计算每点的color值 。
   （3）生成或者转换纹理坐标。

（4）超详细解说

1. 每个顶点的处理受到一小段Vertex Shader代码的控制
2. 由gup执行以渲染每个样本（通常是一个像素）
3. 每次渲染一个形状时，顶点着色器会在形状中的每个顶点运行。它的工作是将输入顶点从原始坐标系转换到 WebGL 使用的裁剪空间坐标系，其中每个轴的坐标范围从 -1.0 到 1.0，并且不考虑纵横比，实际尺寸或任何其他因素。
4. 顶点着色器需要对顶点坐标进行必要的转换，在每个顶点基础上进行其他调整或计算，然后通过将其保存在由 GLSL 提供的特殊变量（我们称为 gl_Position）中来返回变换后的顶点
5. 顶点着色器根据需要，也可以完成其他工作。例如，决定哪个包含 texel (en-US) 面部纹理的坐标，可以应用于顶点；通过法线来确定应用到顶点的光照因子等。然后将这些信息存储在变量（varyings)或属性 (attributes)属性中，以便与片段着色器共享。

2. 片元着色器（Fragment shader）

（1）作用

1. 计算出当前绘制图元中每个像素的颜色值。
2. 它计算每个像素的颜色和其它属性。它通过应用光照值、凹凸贴图，阴影，镜面高光，半透明等处理来计算像素的颜色并输出。它也可改变像素的深度(z-buffering)或在多个渲染目标被激活的状态下输出多种颜色。一个Pixel Shader不能产生复杂的效果，因为它只在一个像素上进行操作，而不知道场景的几何形状。
3. GPU为片元内部的像素逐一填充颜色信息。其运行的次数由图形的片元数决定 。

（2）概念
也称像素着色器，进行逐片的处理过程（如光照）。片元可以理解为像素。

（3）工作原理

1. 片段着色器在顶点着色器处理完图形的顶点后，会被要绘制的每个图形的每个像素点调用一次。
2. 它的职责是确定像素的颜色，通过指定应用到像素的纹理元素（也就是图形纹理中的像素），获取纹理元素的颜色，然后将适当的光照应用于颜色。之后颜色存储在特殊变量 gl_FragColor 中，返回到 WebGL 层。该颜色将最终绘制到屏幕上图形对应像素的对应位置。

（4）超详细解说

1. 每个像素的绘制过程也受到一小段Fragment Shader代码的控制。
2. 执行顶点着色器会输出一个顶点，顶点经过图元组装模块和裁剪模块处理到达光栅模块。光栅化模块输出位于视见体内部的每个图元的片元。每个片元都会被片元着色器处理。每次执行片元着色器必须输出每个片元的颜色。
   （把这些三角形进行插值，将三角形变成一个个像素，然后对每个像素执行一次片段着色器，片段着色器中使用 gl_FragColor 内置变量输出这个像素的颜色）。

---

相关链接：

1. 着色器(Shader)