WebGL编程（1）-学习总结之WebGL常用方法

WebGL简介：
WebGL，是一项使用canvas在网页上绘制和渲染复杂三维图形（3D图形），并允许用户与之进行交互的技术，WebGL的技术规范继承自免费和开源的OpenGL标准，而后者在计算机图形学、电子游戏、计算机辅助设计等领域已被广泛使用多年。
由于WebGL处理的是三维图形，所以它使用的是三维坐标系统（笛卡尔坐标系），具有x轴、y轴、z轴，并且WebGL采用的是右手坐标系。

canvas的中心点就是WebGL的(0.0,0.0,0.0)
canvas的x轴左边缘和右边缘分别对应WebGL的x轴的-1.0和1.0
canvas的y轴上边缘和下边缘分别对应WebGL的y轴的1.0和-1.0

例子：

<canvas id="canvas" height="400" width="400">该浏览器不支持canvas！</canvas>
		
<script>
			(function main(){
			  	//获取canvas的dom
				var canvas=document.getElementById("canvas");
				
				//获取webgl上下文
				var gl=canvas.getContext("webgl");
				
				if(!gl){
					alert("浏览器不支持WebGL!");
					return;
				}
				
				gl.clearColor(0.0,0.0,0.0,1.0)
				gl.clear(gl.COLOR_BUFFER_BIT);
			}());
</script>

WebGL的常用方法：

1. #.clearColor(red,green,blue,alpha)
指定绘图区域的背景色（清空canvas的颜色，并以该颜色覆盖）。
参数：
r,g,b,a 都是0.0~1.0的浮点数，并且必须带小数点


2. #.clear(buffer)
将指定缓冲区的值设为预定的值。
如果清空的是颜色缓冲区，那么将使用gl.clearColor()指定的值作为预定值。
参数：
buffer，指定待清空的缓冲区，使用位操作符OR（ | ）可指定多个缓冲区 。
可选缓冲区：

• gl.COLOR_BUFFER_BIT （颜色缓冲区）
• gl.DEPTH_BUFFER_BIT （深度缓冲区）
• gl.STENCIL_BUFFER_BIT （模板缓冲区）

对应的清空缓冲区的函数：
颜色缓存区 ， gl.clearColor(red,green,blue,alpha);
深度缓冲区 ， gl.clearDepth(depth)
模板缓冲区 ，gl.clearStencil(s)

3.#.drawArrays(mode, first, count)
用于从向量数组中绘制图元，按照mode参数指定的方式绘制图形。
参数：
mode

• gl.POINTS: 绘制一系列点。
• gl.LINE_STRIP: 绘制一个线条。即，绘制一系列线段，上一点连接下一点。
• gl.LINE_LOOP: 绘制一个线圈。即，绘制一系列线段，上一点连接下一点，并且最后一点与第一个点相连。
• gl.LINES: 绘制一系列单独线段。每两个点作为端点，线段之间不连接。
• gl.TRIANGLE_STRIP：绘制一个三角带。
• gl.TRIANGLE_FAN：绘制一个三角扇。
• gl.TRIANGLES: 绘制一系列三角形。每三个点作为顶点。

first
指定从哪个点开始绘制，从0开始。

count
指定绘制需要使用到多少个点。

返回值：无。

异常：

• 如果 mode 不是一个可接受值，将会抛出 gl.INVALID_ENUM 异常。
• 如果 first 或者 count 是负值，会抛出 gl.INVALID_VALUE 异常。
• 如果 gl.CURRENT_PROGRAM 为 null，会抛出 gl.INVALID_OPERATION 异常。
  
  

4.#.getAttribLocation(program,name)
获取由name参数指定的attibute变量的存储地址
参数：

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

返回值：

• 大于等于0 ）attribute变量的存储地址。
• -1 ）指定的attribute变量不存在，或者其具有gl_或webgl_前缀。

错误：

• INVALID_OPERATION ）程序对象未能成功连接。
• INVALID_VALUE ）name参数的长度大于attribute变量名的最大长度（默认256字节）。

5.#.vertexAttrib3f(location,v0,v1,v2)
将数据（v0,v1,v2）传给由location参数指定的attribute变量
参数：

• location ）指定将要修改的attribute变量的存储位置
• v0,v1,v2 ）指定填充对应attribute分量的值

*返回值：*无
错误：

• INVALID_OPERATION ）没有当前的program对象
• INVALID_VALUE ）location大于等于attribute变量的最大数目（默认为8）

该同族函数:分量的值对应填充
#.vertexAttrib1f(location,v0)
#.vertexAttrib2f(location,v0,v1)
#.vertexAttrib3f(location,v0,v1,v2)
#.vertexAttrib4f(location,v0,v1,v2,v3)

6.#.getUniformLocation(program,name)
获取由name参数指定的uniform变量的存储位置

7.#.uniform4f(location,u1,u2,u3,u4)
将数据传递给由location参数指定的uniform变量，同族函数用法相似。