WebGL初始化着色器（笔记4）
初始化着色器函数initShaders()被定义在了cuon.util.js中
使用：
initShaders(gl, vshader, fshader);
参数：
gl 指定渲染的上下文
vshader 指定顶点着色器程序代码(字符串)
fshader 指定片元着色器程序代码（字符串）
返回值：
true 初始化着色器成功
false 初始化着色器失败
顶点着色器
var VSHADER_SOURCE="" +
"void main(){\n" +
" gl_Position = vec4(0.0,0.0,0.0,1.0);\n" + // 设置坐标
" gl_PointSize = 10.0;\n" + // 设置尺寸
"}\n";
首先用js声明了一个变量将书写的GLSL ES着色器语言代码字符串赋值变量。
类似于C语言，必须包含一个main()函数， void代码这个函数不会有返回值，而且你不能为main()指定参数。
函数内部的两行代码
gl_Position 类型：vec4 表示顶点的位置 必须设置
gl_PointSize 类型：float 表示点的尺寸（像素数） 如果不设置，默认为1.0
GLSL ES数据类型
float 表示是浮点数
vec4表示由四个浮点数组成的矢量
由4个分量组成的矢量被称为齐次坐标，它能够提高处理三维数据的效率，所以被大量使用
齐次坐标：（x,y,z,w）。齐次坐标（x,y,z,w）等价于三维坐标（x/w,y/w,z/w）。所以如果齐次坐标的第四个分量是1，你就可以将它当做单位坐标来使用。w的值必须大于等于0的。如果w趋近于0，那么它所表示的点将趋近于无穷远，所以在齐次坐标系中可以有无穷的概念。齐次坐标的存在，似的用矩阵乘法来描述顶点变换成为可能，三维图形系统在计算过程中，通常使用齐次坐标来表示顶点的三维坐标。
片元着色器
// 片元着色器程序
var FSHADER_SOURCE = "" +
"void main(){\n" +
" gl_FragColor = vec4(1.0,0.0,0.0,1.0);\n" + // 设置颜色
"}\n";
顶点着色器控制点的位置和大小，片元着色器控制点的颜色。片元就是显示在屏幕上的像素（严格意义上来说，片元包括这个像素的位置、颜色和其他信息）。
片元着色器的作用就是处理片元，使其显示在屏幕上。
片元着色器将点的颜色赋值给gl_FragColor变量，该变量是片元着色器唯一的内置变量，它控制着像素在屏幕上的最终颜色。
gl_FragColor 类型：vec4 描述：指定片元颜色（RGBA格式）。
对这个内置变量赋值后，相应的像素就会以这个颜色值显示。类型和顶点着色器中的顶点位置一样，也是vce4类型。四个浮点分量，分别代表RGBA值。
绘制操作
// 绘制一个点
gl.drawArrays(gl.POINTS,0,1);
gl.drawArrays(mode, first, count);执行顶点着色器，安装mode的参数指定的方式绘制图形。
参数：
mode 指定绘制的方式，可接收一下常量符号：gl.POINTS，gl.LINES, gl.LINE_STRIP, gl.LINE_LOOP, gl.TRIANGLES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN
first 指定从哪个顶点开始绘制（整数型）
count 指定绘制需要用到多少个顶点（整数型）
返回值：无
错误 INVALID_ENUM 传入的mode参数不是前述参数之一
INVALID_VALUE 参数first或count是负数
示例当中由于我们只绘制了单独的点，所以第一个值是gl.POINTS，第二个参数表示从第1个顶点开始画起，第三个参数表示仅绘制的一个点。