内嵌浏览器，从OpenGL衍生
canvas标签：允许javascript动态绘制图形
使用步骤
1.获取canvas元素
getElementById
2.向该元素请求二维图枞的绘图上下文
var cox = convas.getContenxt(‘2d’);
3.在绘图上下文上调用相应的绘图函数绘制二维图形
cox.fillStyle = ‘rgba(0,0,255,1.0)’;// 设置填充颜色
cox.fillRect(120,10,150,150);// 用这个颜色填充矩形
用getWebGLContex()来隐藏不同浏览器的差别
var gl = getWebGLContex();
着色器(用途)
顶点着色器：用来描述顶点特征（位置颜色的程序），顶点指二维三维空间的一个点
片元着色器：进行逐片元处理过程如光照。片元是一个webgl术语，可以理解为像素
绘制：
gl.drawArrays();
用attribute获取着色器
获取attribute变量的存储位置
var a_Position = gl.getAttribLocation(gl.program, ‘a_Position’);
向attribute变量赋值
gl.vertexAttrib3f(a_Position,0.0,0.0,0.0);
注册点击事件
onmousedown
canvas坐标系统和webgl在canvas中的坐标系统是不一样的
用uniform变量将颜色传给着色器
gl.getUnifromLocation(gl.prigram,’u_FragColor’);
gl.unifrom4f(u_FragColor,raba[0],rgba[1],rgba[2],rgba[3]);
缓冲区对象
gl.createBuffer();
将缓冲区对象绑定到目标
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
向缓冲区对象写入数据
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(a_Postion,2,gl.FLOAT,false,0,0);
链接a_Position变量与分配给他的缓冲区对象
gl.enableVertexAttribArray(a_Position);
平移
将平移距离传输给定点着色器
var u_Translation = gl.getUniformLocation(gl.program,’u_Translation’);
gl.uniform4f(u_Translation,Tx,Ty,Tz,0.0);
旋转
将旋转涂成数据传输给顶点着色器
var radian = Math,PI *ANGLE / 180.0 // 转为弧度制
var cosB = Math.cos(radian);
var sinB = Math.sin(radian);
var u_CosB = gl.getUniformLocation(gl.program,’u_CosB’);
var u_SinB = gl.getUniformLocation(gl.program,’u_SinB’);
gl.uniform1f(u_CosB,cosB);
gl.uniform1f(u_SinB,sinB);
纹理(texture)，
activeTexture
方法列表
状态信息
WebGLRenderingContext.activeTexture()
选择要激活的纹理单元。
WebGLRenderingContext.blendColor()
设置源和目标的混和因子。
WebGLRenderingContext.blendEquation()
用同一个表达式设置 RGB 混和表达式和 alpha 混和表达式。
WebGLRenderingContext.blendEquationSeparate()
分开设置 RGB 混和表达式和 alpha 混和表达式。
WebGLRenderingContext.blendFunc()
定义用于像素混合算法的函数。
WebGLRenderingContext.blendFuncSeparate()
分别定义混合像素RGB通道和透明通道的函数。
WebGLRenderingContext.clearColor()
设置用于清空用的颜色。
WebGLRenderingContext.clearDepth()
设置清除深度缓存时的深度值。
WebGLRenderingContext.clearStencil()
设置清除模板缓冲区时的模板值。
WebGLRenderingContext.colorMask()
设置在绘制或渲染WebGLFramebuffer时要开启或关闭的颜色分量。
WebGLRenderingContext.cullFace()
设置多边形的正面和/或反面是否要被排除。
WebGLRenderingContext.depthFunc()
设置比较输入像素深度和深度缓存值得函数。
WebGLRenderingContext.depthMask()
设置是否写入深度缓存。
WebGLRenderingContext.depthRange()
设置从规范化设备坐标映射到窗口或视口坐标时的深度范围。
WebGLRenderingContext.disable()
禁用这个上下文的WebGL功能。
WebGLRenderingContext.enable()
启用这个上下文的WebGL功能。
WebGLRenderingContext.frontFace()
设置多边形的正面使用顺时针还是逆时针绘制表示。
WebGLRenderingContext.getParameter()
返回给入参数名的值。
WebGLRenderingContext.getError()
返回错误信息。
WebGLRenderingContext.hint()
给某些行为设置建议使用的模式。具体建议需要看执行的情况。
WebGLRenderingContext.isEnabled()
测试这个上下文的WebGL功能是否开启。
WebGLRenderingContext.lineWidth()
设置线宽。
WebGLRenderingContext.pixelStorei()
设置像素存储模式。
WebGLRenderingContext.polygonOffset()
设置多边形偏移的比例和单位，从而计算深度值。（补充：解决深度冲突）
WebGLRenderingContext.sampleCoverage()
为抗锯齿效果设置多重取样覆盖参数。
WebGLRenderingContext.stencilFunc()
同时设置前面和背面的模板测试函数，及其引用值。
WebGLRenderingContext.stencilFuncSeparate()
可分开设置前面或背面的模板测试函数，及其引用值。
WebGLRenderingContext.stencilMask()
同时启用或禁用，前面和背面的模板测试掩码。
WebGLRenderingContext.stencilMaskSeparate()
可分开启用或禁用，前面和背面的模板测试掩码。
WebGLRenderingContext.stencilOp()
同时设置，在前面和背面的模板缓冲区上执行的操作。
WebGLRenderingContext.stencilOpSeparate()
可分开设置，在前面和背面的模板缓冲区上执行的操作
缓冲区
WebGLRenderingContext.bindBuffer()
把 WebGLBuffer 对象绑定到指定目标上。
WebGLRenderingContext.bufferData()
更新缓冲数据。
WebGLRenderingContext.bufferSubData()
更新从给入偏移量开始的缓冲数据。
WebGLRenderingContext.createBuffer()
创建 WebGLBuffer 对象。
WebGLRenderingContext.deleteBuffer()
删除 WebGLBuffer 对象。
WebGLRenderingContext.getBufferParameter()
返回缓冲信息。
WebGLRenderingContext.isBuffer()
返回给入的缓冲是否有效。
帧缓冲区
WebGLRenderingContext.bindFramebuffer()
把 WebGLFrameBuffer 对象绑定到指定对象上。
WebGLRenderingContext.checkFramebufferStatus()
返回帧缓冲区的状态。
WebGLRenderingContext.createFramebuffer()
创建 WebGLFrameBuffer 对象。
WebGLRenderingContext.deleteFramebuffer()
删除 WebGLFrameBuffer 对象。
WebGLRenderingContext.framebufferRenderbuffer()
把 WebGLRenderingBuffer 对象附加到 WebGLFrameBuffer 对象。
WebGLRenderingContext.framebufferTexture2D()
把纹理图像附加到 WebGLFrameBuffer object.
WebGLRenderingContext.getFramebufferAttachmentParameter()
返回帧缓冲区的信息。
WebGLRenderingContext.isFramebuffer()
返回 Boolean 值，表示给入的 WebGLFrameBuffer 对象是否有效。
WebGLRenderingContext.readPixels()
读取 WebGLFrameBuffer 的像素。
渲染缓冲区
WebGLRenderingContext.bindRenderbuffer()
把 WebGLRenderBuffer 对象绑定到指定的对象上。
WebGLRenderingContext.createRenderbuffer()
创建 WebGLRenderBuffer 对象。
WebGLRenderingContext.deleteRenderbuffer()
删除 WebGLRenderBuffer 对象。
WebGLRenderingContext.getRenderbufferParameter()
返回渲染缓冲区的信息。
WebGLRenderingContext.isBuffer()
返回 Boolean 值，表示给入的 WebGLRenderingBuffer 是否有效。
WebGLRenderingContext.renderbufferStorage()
创建渲染缓冲区数据存储。
纹理
WebGLRenderingContext.bindTexture()
把 WebGLTexture 对象绑定到指定对象上。
WebGLRenderingContext.compressedTexImage2D()
指定一个为压缩格式的2D纹理图片。
WebGLRenderingContext.compressedTexSubImage2D()
指定一个为压缩格式的2D纹理子图片。
WebGLRenderingContext.copyTexImage2D()
复制2D纹理图片。
WebGLRenderingContext.copyTexSubImage2D()
复制2D纹理子图片。
WebGLRenderingContext.createTexture()
创建 WebGLTexture 对象。
WebGLRenderingContext.deleteTexture()
删除 WebGLTexture 对象。
WebGLRenderingContext.generateMipmap()
为 WebGLTexture 对象生成一组纹理映射。
WebGLRenderingContext.getTexParameter()
返回纹理信息。
WebGLRenderingContext.isTexture()
返回 Boolean 值，表示给入的 WebGLTexture 是否有效。
WebGLRenderingContext.texImage2D()
指定2D纹理图片。
WebGLRenderingContext.texSubImage2D()
更新当前 WebGLTexture 的子矩形。
WebGLRenderingContext.texParameterf()
设置纹理参数。
WebGLRenderingContext.texParameteri()
设置纹理参数。
程序对象和着色器对象
WebGLRenderingContext.attachShader()
把 WebGLShader 添加到 WebGLProgram。
WebGLRenderingContext.bindAttribLocation()
绑定一个普通顶点索引到一个命名的attribute 变量
WebGLRenderingContext.compileShader()
编译 WebGLShader。
WebGLRenderingContext.createProgram()
创建 WebGLProgram。
WebGLRenderingContext.createShader()
创建 WebGLShader。
WebGLRenderingContext.deleteProgram()
删除 WebGLProgram。
WebGLRenderingContext.deleteShader()
删除 WebGLShader。
WebGLRenderingContext.detachShader()
分离 WebGLShader。
WebGLRenderingContext.getAttachedShaders()
返回附加在 WebGLProgram 上的 WebGLShader 对象的列表。
WebGLRenderingContext.getProgramParameter()
返回程序对象的信息。
WebGLRenderingContext.getProgramInfoLog()
返回 WebGLProgram 对象的信息日志。
WebGLRenderingContext.getShaderParameter()
返回着色器的信息。
WebGLRenderingContext.getShaderPrecisionFormat()
返回一个描述着色器数字类型精度的WebGLShaderPrecisionFormat 对象。
WebGLRenderingContext.getShaderInfoLog()
返回 WebGLShader 对象的信息日志。
WebGLRenderingContext.getShaderSource()
以字符串形式返回 WebGLShader 的源码。
WebGLRenderingContext.isProgram()
返回一个 Boolean 值，表示给入的 WebGLProgram 是否有效。
WebGLRenderingContext.isShader()
返回一个 Boolean 值，表示给入的 WebGLShader 是否有效。
WebGLRenderingContext.linkProgram()
链接给入的 WebGLProgram 对象。
WebGLRenderingContext.shaderSource()
设置一个 WebGLShader 的源码。
WebGLRenderingContext.useProgram()
使用指定的 WebGLProgram 作为当前渲染状态的一部分。
WebGLRenderingContext.validateProgram()
使 WebGLProgram 生效。
Uniform 和 Attribute
WebGLRenderingContext.disableVertexAttribArray()
在给定的位置，禁用顶点attribute数组。
WebGLRenderingContext.enableVertexAttribArray()
在给定的位置，启用顶点attribute数组。
WebGLRenderingContext.getActiveAttrib()
返回激活状态的attribute变量信息。
WebGLRenderingContext.getActiveUniform()
返回激活状态的uniform 变量信息。
WebGLRenderingContext.getAttribLocation()
返回attribute变量的指针位置。
WebGLRenderingContext.getUniform()
返回指定位置的uniform 变量。
WebGLRenderingContext.getUniformLocation()
返回uniform 变量的指针位置。
WebGLRenderingContext.getVertexAttrib()
返回指定位置的顶点attribute变量。
WebGLRenderingContext.getVertexAttribOffset()
获取给定索引的顶点attribute位置。
WebGLRenderingContext.uniform[1234][fi]v
指定一个uniform变量。
WebGLRenderingContext.uniformMatrix[234]fv()
指定一个uniform矩阵变量。
WebGLRenderingContext.vertexAttrib[1234]fv
指定一个普通顶点attribute的值。
WebGLRenderingContext.vertexAttribPointer()
指定一个顶点attributes 数组中，顶点attributes 变量的数据格式和位置。
绘制缓冲区
WebGLRenderingContext.clear()
把指定的缓冲区清空为预设的值。
WebGLRenderingContext.drawArrays()
渲染数组中的原始数据。
WebGLRenderingContext.drawElements()
渲染元素数组中的原始数据。
WebGLRenderingContext.finish()
阻断执行，直到之前所有的操作都完成。
WebGLRenderingContext.flush()
清空缓冲的命令，这会导致所有命令尽快执行完。
使用扩展插件
这些方法管理 WebGL 扩展：
WebGLRenderingContext.getSupportedExtensions()
返回一个包含 DOMString 的 Array ，每个元素都为支持的WebGL扩展。
WebGLRenderingContext.getExtension()
返回一个扩展对象。