05 WebGL初始化着色器

初始化着色器函数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个顶点开始画起，第三个参数表示仅绘制的一个点。