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:表示有四个浮点数组成的矢量
必须注意的是,如果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函数参数相似。