javascript七基础学习系列一千零七十一：编写着色器

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 传入数据。下面是一个片段着色器的例子：
// 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 的值在着色器内不能改变。
创建着色器程序
浏览器并不理解原生GLSL 代码，因此GLSL 代码的字符串必须经过编译并链接到一个着色器程序中。为便于使用，通常可以使用带有自定义type 属性的

然后可以使用text 属性提取