WebGL入门

1.清空绘图区

清空绘图区是使用指定的背景颜色填充canvas，使用gl.clearColor设置背景色。gl.clearColor(red, green, blue, alpha)。openGL的颜色取值返回是0-1。

调用gl.clear()函数，用clearColor指定的背景色清空绘图区域。gl.clear(g.COLOR_BUFFRE_BIT)，清理绘图区域实际上在清理颜色缓冲区（color buffer），传递的gl.COLOR_BUFFER_BIT就是在告诉WebGL清理颜色缓冲区。缓冲区还包括：
gl.COLOR_BUFFER_BIT颜色缓冲区、gl.DEPTH_BUFFER_BIT深度缓冲区、gl.STENCIL_BUFFER_BIT模板缓冲区。清理函数分别为gl.clearColor(red,green,blue,alpha)、gl.clearDepth(depth)、gl.clearStencil(s)。

2.什么是着色器

WebGL有两种着色器：

顶点着色器(Vertex shader)：顶点着色器是用来描述顶点特性（如位置、尺寸等）的程序。顶点(vertext)是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。
    片元着色器(Fragment shader)：进行片元处理过程如光照的程序。片元（fragment）是一个WebGL术语，你可以将其理解为像素（图像的单元）。

3.GLSE中的数据类型

float:表示浮点数

vec4:表示有四个浮点数组成的矢量

mat4:4*4矩阵（WebGL中矩阵是列主序的）

必须注意的是，如果WebGL需要的参数是浮点类型，例如10.0。如果传递10会报错，因为10被认为是整数。

4.vec4函数

我们在使用WebGL时，会给顶点着色器参数赋值，gl_Position的数据类型为vec4，gl_Position = vec4(0.0, 0.0, 0.0, 1.0)。但实际需要的位置坐标只有三个(x,y,z)值。幸好WebGL提供了vec4函数。由4个分量组成的矢量被称为齐次坐标，他能够提高三维数据的效率，在三维图形系统大量使用。如果最后一个分量设置为1.0，那么齐次坐标可以表示前三个分量为坐标值的那个点。所有当需要用齐次坐标表示顶点时，只需要将最后一个分量设置为1.0就可以了。

5.gl.drawArrays(mode, first, count)函数

mode:指定绘制的方式，包括gl.POINTS、gl.LINES、gl.LINE_STRIP、gl.TRIANGLES、gl.TRIANGLE_STRIP、gl.TRIANGLE_FAN。

first:指定从哪个顶点开始绘制（整形数）
    count:指定绘制需要用到多少个顶点（整形数）

6.attribute变量

想要将位置信息从javascript程序中传给顶点着色器。有两种方式可做到：attribute变量和uniform变量。attribute变量传输时那些与顶点相关的数据，uniform变量传输的是哪些所有顶点相同(与顶点无关)的数据。例如attribute vec4 a_Position, attribute变量a_Position的类型为vec4。一般attribute变量都以a_开头，而uniform变量以u_开头。如何获取attribute变量的存储位置？
    var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    如何给顶点位置设置值？
    gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);

7.gl.getAttribLocation(program, name)函数

program:指定包含顶点着色器和片元着色器的着色器程序对象
    name:想要获取存储地址的attribute变量的名称
    返回值：大于等于0，attribute变量的存储地址；小于0，指定的attribute变量不存在

8.gl.vertexAttrib4f(location, v0, v1, v2, v3)函数

location:指定将要修改的attribute变量的存储位置
    v0:attribute变量的第一个分量的值
    v1:attribute变量的第二个分量的值
    v2:attribute变量的第三个分量的值
    v2:attribute变量的第四个分量的值
    说明：gl.vertexAttrib3f有几个同族函数。gl.vertexAttrib1f(location, v0),gl.vertexAttrib2f(location, v0, v1),gl.vertexAttrib3f(location, v0, v1, v2)。

9.gl.getUniformLocation(program, name)

program:指定包含顶点着色器和片元着色器的着色器程序对象
    name:想要获取存储地址的uniform变量的名称

返回值：not-null，指定的uniform变量的位置；null，指定的uniform变量不存在，或者其命名以gl_或者webgl_前缀。

说明：getUniformLocation和getAttribLocation的区别在于为null和-1，如果变量不存在时。

10.gl.uniform4f(location, v0, v1, v2, v3)

向location位置处的变量赋值，参数和vertexAttrib4f函数参数相似。

11.gl.uniform4fv(location, [v0, v1, v2, v3])

向location位置处的变量赋值，参数是以数组的形式传入。

11.gl.uniformMatrix4fv(location, transpose, array)

将array表示的4*4矩阵分配给由location指定的uniform变量。参数：

location:uniform变量的存储位置。

Transpose：在WebGL中必须指定为false

array:带传输的类型化数组，4*4矩阵按列主序存储在其中

12.gl.FragCoord

该内置变量的第一个分量和第二个分量表示片元在<canvas>坐标系统中的坐标值

13.gl.drawingBufferWidth/gl.drawingBufferHeight

分别表示颜色缓冲区的宽度和高度