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变量,同族函数用法相似。