javascript基础学习系列二百九十八：着色器

着色器是 OpenGL 中的另一个概念。WebGL 中有两种着色器:顶点着色器和片段(或像素)着色器。 顶点着色器用于把 3D 顶点转换为可以渲染的 2D 点。片段着色器用于计算绘制一个像素的正确颜色。 WebGL 着色器的独特之处在于，它们不是 JavaScript 实现的，而是使用一种与 C 或 JavaScript 完全不同 的语言 GLSL(OpenGL Shading Language)写的。
 编写着色器
GLSL 是一种类似于 C 的语言，专门用于编写 OpenGL 着色器。因为 WebGL 是 OpenGL ES 2 的实现，
所以 OpenGL 中的着色器可以直接在 WebGL 中使用。这样也可以让桌面应用更方便地移植到 Web 上。 每个着色器都有一个 main()方法，在绘制期间会重复执行。给着色器传递数据的方式有两种: attribute 和 uniform。attribute 用于将顶点传入顶点着色器，而 uniform 用于将常量值传入任 何着色器。attribute 和 uniform 是在 main()函数外部定义的。在值类型关键字之后是数据类型，
然后是变量名。下面是一个简单的顶点着色器的例子:

// OpenGL 着色器语言
// 着色器，摘自 Bartek Drozdz 的文章“Get started with WebGL—draw a square” attribute vec2 aVertexPosition;
    void main() {
   
   
      gl_Position = vec4(aVertexPosition, 0.0, 1.0);
     } 

这个顶点着色器定义了一个名为 aVertexPosition 的 attribute。这个 attribute 是一个包含 两项的数组(数据类型为 vec2)，代表 x 和 y 坐标。即使只传入了两个坐标，顶点着色器返回的值也会 包含 4 个元素，保存在变量 gl_Position 中。这个着色器创建了一个新的包含 4 项的数组(vec4)， 缺少的坐标会补充上，实际上是把 2D 坐标转换为了 3D 坐标。

片段着色器与顶点着色器类似，只不过是通过 uniform 传入数据。下面是一个片段着色器的例子: 23

// OpenGL 着色器语言
// 着色器，摘自 Bartek Drozdz 的文章“Get started with WebGL—draw a square” uniform vec4 uColor;
void main() {
   
   
  gl_FragColor = uColor;
}

片段着色器必须返回一个值，保存到变量 gl_FragColor 中，这个值表示绘制时使用的颜色。这 个着色器定义了一个 uniform，包含颜色的 4 个组件(vec4)，保存在 uColor 中。从代码上看，这个 着色器只是把传入的值赋给了 gl_FragColor。uColor 的值在着色器内不能改变。

注意 OpenGL着色器语言比示例中的代码要复杂，详细介绍需要整本书的篇幅。因此， 本节只是从使用 WebGL 的角度对这门语言做个极其简单的介绍。要了解更多信息，可以 参考 Randi J. Rost 的著作《OpenGL 着色语言》。
 创建着色器程序
浏览器并不理解原生 GLSL 代码，因此 GLSL 代码的字符串必须经过编译并链接到一个着色器程序中。为便于使用，通常可以使用带有自定义 type 属性的

<