1. getWebGLContext(element, [, debug])
(1) 获取WebGL绘图上下文，如果开启了debug属性，遇到错误时将在控制台显示错误信息。
(2) Element：指定
2. gl.clearColor(red, green, blue, alpha)
(1) 设置指定绘图区域的背景色，这是在清空绘图区的必需条件（可以理解为填充背景的意思）。以RGBA格式设置背景色。
(2) Red：指定红色值（0.0-1.0），越高颜色越亮
(3) Green：指定绿色值（0.0-1.0），越高颜色越亮
(4) Blue：指定蓝色值（0.0-1.0），越高颜色越亮
(5) Alpha：指定透明度值（0.0-1.0），越高越不透明
(6) 无返回值。如需获取错误信息在第1个函数中开启错误提示。
(7) 一旦设置了背景色后该背景色就会储存在WebGL系统中，在之后无需重复指定；如需改变则再次设置。
3. gl.clear(buffer)
(1) 将指定缓冲区（buffer）设定为预定的值。
(2) gl.COLOR_BUFFER_BIT：颜色缓冲区。当buffer为此值时将使用gl.clearColor()设定的颜色去清空颜色缓冲区。默认：(0.0, 0.0, 0.0, 0.0)。
(3) gl.DEPTH_BUFFER_BIT：深度缓冲区。使用gl.clearDepth()，默认：1.0。
(4) gl.STENCIL_BUFFER_BIT：模板缓冲区。使用gl.clearStencil()，默认：0。
(5) 正确返回：无；错误返回：INVALID_VALUE
4. initShaders(gl, vshader, fshader)
(1) 该函数被定义在cuon.util.js中（开头网盘地址可下载），用于在WebGL系统内部建立和初始化着色器。
(2) gl：指定要渲染的绘图环境。
(3) Vshader：指定顶点着色器程序代码。
(4) Fshader：指定片元着色器程序代码。
(5) 返回值：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’;//片元着色器程序var FSHADER_SOURCE =’void main() {\n’ +’ gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n’ +//设置颜色’}\n’;//获取环境var canvas = document.getElementById(‘example’);var gl = getWebGLContext(canvas);//初始化着色器if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log(‘初始化着色器失败！’);return;}
5. gl.drawArrays(mode, first, count)
(1) 执行顶点着色器，按照mode参数指定的方式绘制图形。
(2) Mode：指定绘制的方式，可设为：gl.POINTS(一系列点),gl.LINES(一系列单独的线段),gl.LINE_STRIP(一系列连接的线段),gl.LINE_LOOP(一系列连接的线段并最后一个点与第一个点连接),gl.TRIANGLES(一系列单独的三角形), gl.TRIANGLE_STRIP(一系列带状的三角形),gl.TRIANGLE_FAN(一系列三角形组成的类似于扇形的图形)
(3) First：指定从哪个顶点开始绘制图形（int）
(4) Count：指定用到的顶点数量（int）
(5) 返回值：无，正确绘制；INVALID_ENUM：传入的mode错误；INVALID_VALUE：first或count参数是无效的负数
6. gl.getAttribLocation(program, name)
(1) 获取由name参数指定的attribute变量的存储地址（用处是通过该存储地址向变量传输数据）
(2) Program：指定包含顶点着色器和片元着色器的着色器程序对象
(3) Name：指定要获取其存储地址的attribute变量的名称
(4) 返回值：大于等于0，返回存储地址；-1，变量名无效；INVALID_OPERATION，程序对象未能成功连接；INVALID_VALUE，name长度大于attribute变量名的最大长度（默认256字节）
例：
//顶点着色器程序var VSHADER_SOURCE =’attribute vec4 a_Position;\n’+//声明attribute变量’void main() {\n’ +’ gl_Position = a_Position;\n’+//设置坐标’ gl_PointSize = 10.0;\n’ + //设置尺寸’}\n’;>
//获取attribute变量的存储位置var a_Position = gl.getAttribLocation(gl.program, ‘a_Position’);if(a_Position < 0) {console.log(‘获取地址失败’);}
7. gl.vertexAttrib3f(location, v0, v1, v2)
(1) 将数据(v0, v1, v2)传给由location指定的attribute变量
(2) Location：指定要修改的attribute变量的存储地址
(3) V0：填充attribute变量第一个分量的值
(4) V1：填充attribute变量第二个分量的值
(5) V2：填充attribute变量第三个分量的值
(6) 返回值：无，赋值正常；INVALID_OPERATION，没有当前的program对象；INVALID_VALUE：location大于等于attribute变量的最大数目（默认为8）
例：
……//将顶点位置传输给attribute变量gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0);
8. 同理，还有获取uniform变量存储地址的函数：gl.getUniformLocation(program, name)；为uniform传值的函数：gl.uniform4f(location, v0, v1, v2, v3)
例：
/片元着色器程序var FSHADER_SOURCE =’precision mediump float;\n’ +//变量的变化范围 中等精度’uniform vec4 u_FragColor;\n’ +//uniform变量’void main() {\n’ +’ gl_FragColor = u_FragColor;\n’ +//设置颜色’}\n’;//获取u_FragColor存储位置var u_FragColor = gl.getUniformLocation(gl.program, ‘u_FragColor’);//将颜色信息传输给uniform变量gl.uniform4f(u_FragColor, 0.0, 0.0, 1.0, 1.0);
9. gl.createBuffer()
(1) 创建缓冲区对象
(2) 返回值：非null，新创建的缓冲区对象；null，创建失败
(3) gl.deleteBuffer(buffer)：删除buffer表示的缓冲区对象
例：
//创建缓冲区对象var vertexBuffer = gl.createBuffer();if(!vertexBuffer) {console.log(‘failed to create the buffer object’);return -1;}
10. gl.bindBuffer(target, buffer)
(1) 将buffer表示的缓冲区对象绑定到target目标上
(2) Target取值：
gl.ARRAYBUFFER，表示缓冲区对象中包含了顶点的数据；
gl.ELEMENT，表示缓冲区对象中包含了顶点的索引值；
gl.buffer，指定之前由gl.createBuffer()返回的待绑定的缓冲区对象；
null，禁用
(3) 返回值：无，正常；INVALID_ENUM，target无效
例：
……//将缓冲区对象绑定到目标gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
11. gl.bufferData(target, data, usage)
(1) 开辟存储空间，向绑定在target上的缓冲区对象写入数据data
(2) Target：gl.ARRAY_BUFFER或者gl.ELEMENT_ARRAY_BUFFER
(3) Data：写入缓冲区对象的数据，是个类型化数组
(4) Usage：使用数据的方式。gl.STATIC_DRAW，只向缓冲区对象写入一次数据，绘制多次；gl.STREAM_DRAW，只向缓冲区对象写入一次数据，绘制若干次；gl.DYNAMIC_DRAW，向缓冲区对象写入多次数据，绘制多次；
(5) 返回：无，正常；INVALID_ENUM，target无效
例：
……//向缓冲区对象中写入数据gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
12. gl.vertexAttribPointer(location, size, type, normalized, stride, offset)
(1) 将绑定到gl.ARRAY_BUFFER的缓冲区对象分配给由location指定的attribute变量
(2) Size：指定缓冲区中每个顶点的分量个数（1-4）
(3) Type：指定数据格式。
gl.UNSIGNED_BYTE(无符号字节);
gl.SHORT(短整型);
gl.UNSIGNED_SHORT(无符号短整型);h
gl.INT(整型);
gl.UNSIGNED_INT(无符号整型);
gl.FLOAT(浮点型)
(4) Normalized：true或false，表示是否将非浮点型数据归一化到[0, 1]或[-1, 1]区间
(5) Stride：指定相邻两个顶点间的字节数，默认0
(6) Offset：指定缓冲区对象中的偏移量（以字节为单位）
(7) 返回：无，正常；
INVALID_OPERATION，不存在当前程序对象；
INVALID_VALUE，location大于等于attribute变量的最大数目（默认为8）或stride或offset是负值
例：
//将缓冲区对象分配给a_Position变量gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
13. gl.enableVertexAttribArray(location)
(1) 开启location指定的attribute变量
(2) 返回：无，正常；INVALID_VALUE, ocation大于等于attribute变量的最大数目
例：
//连接a_Position变量与分配给它的缓冲区对象gl.enableVertexAttribArray(a_Position);
若有收获，就点个赞吧
0 人点赞
