（一）Html5新功能
最重要的功能之一当属WebGL了，和3D图形规范OpenGL、通用计算规范OpenCL一样，来自Khronos Group，2011年对外公布，到现在已经开始有WebGL2.0规范的雏形了。
这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，为Html5的Canvas提供硬件3D加速渲染，如下图所示：
WebGL
（二）WebGL与品类繁盛的openXX家族
简单列举一下：OpenGL 1/2/3/4.. OpenGL ES 1/2/3..
简单说：
（A）OpenGL
是个定义了一个跨编程语言、跨平台的编程接口规格的专业的图形程序接口。
（B）OpenGL ES
是 OpenGL 三维图形 API 的子集，针对手机、PDA和游戏主机等嵌入式设备而设计。
（C）WebGL
兼顾了openGL ES2.0的同时，增加了大量的扩展属性和封装API，简化了OpenGL的开发难度。
WebGL与OpenGL OpenGL ES的关联与不同
（三）WebGL与OpenGL ES 2.0相同点
（A）包含了ES2.0规范所有的常量定义：
在C/C++的宏定义中：
#define GL_DEPTH_BUFFER_BIT 0x00000100
#define GL_STENCIL_BUFFER_BIT 0x00000400
#define GL_COLOR_BUFFER_BIT 0x00004000相应的JS中，我们使用方式：
var gl = canvas.getContext('webgl');
gl.DEPTH_BUFFER_BIT
gl.STENCIL_BUFFER_BIT
gl.COLOR_BUFFER_BIT（B）包含了ES2.0规范几乎所有的函数调用
GLenum texture = xxx;
glActiveTexture (texture);相应的JS中，我们使用方式：
var texture = xxx;
gl.activeTexture(texture);是不是很简单呀。
这种一对一响应的变量和API使用方式，让不少OpenGL开发者轻而易举的转移到了Html5阵营，也让那些想学OpenGL的同学，在浏览器中就可以所见既所得的开发方式，降低了准入门槛。
很多事情，我们要反过来看，如果学会了WebGL是不是就可以轻松的搞定OpenGL和OpenGL ES2.0了吗？
（四）WebGL 不等于OpenGL ES2.0
（A）WebGL的规范，要比OpenGL ES大，比OpenGL要小
OpenGL ES 2.0 < WebGL < OpenGL 3.0
比如增加了OpenGL 2.0以后版本才有的一些常量：
#define GL_PIXEL_PACK_BUFFER 0x88EB
#define GL_PIXEL_UNPACK_BUFFER 0x88EC
#define GL_PIXEL_PACK_BUFFER_BINDING 0x88ED
#define GL_PIXEL_UNPACK_BUFFER_BINDING 0x88EF
#define GL_DEPTH_STENCIL 0x84F9
#define GL_DEPTH_STENCIL_ATTACHMENT 0x821A增加了一些WebGL特有的常量（以WebGL结尾）：
#define GL_UNPACK_FLIP_Y_WEBGL 0x9240
#define GL_UNPACK_PREMULTIPLY_ALPHA_WEBGL 0x9241
#define GL_CONTEXT_LOST_WEBGL 0x9242
#define GL_UNPACK_COLORSPACE_CONVERSION_WEBGL 0x9243
#define GL_BROWSER_DEFAULT_WEBGL 0x9244增加了一些WebGL特有的API：
createBuffer
createFramebuffer
createRenderbuffer
createTexture
deleteBuffer
deleteFramebuffer
deleteRenderbuffer
……删除OpenGL ES2.0的gen开头的所有API
genBuffers
generateMipmap
genFramebuffers
genRenderbuffers
genTextures
……重命名了OpenGL ES2.0里以get开头，以v结尾的指针类型API：
getBufferParameteriv
getVertexAttribPointerv
……新名称为：
getBufferParameter
getVertexAttribOffset
……（B）扩展面向状态编程，增加面向过程、面向对象思想
每一个canvas都有一个上下文对象
var gl = canvas.getContext('webgl', attris);
canvas.getContext = function(type, attrs) {
return new WebGLRenderingContext(attrs);
}上下文具有生命周期：
canvas.addEventListener( 'webglcontextlost', onContextLost, false );（C）WebGL与OpenGL的API不再一一对应
以glTexImage2D为例，OpenGL中函数定义为:
glTexImage2D(target, level, infmt, width, height, border, format, type, pixels);在WebGL中函数发生了重载，参数个数或为6或为9
// source可以是image/video/canvas标签对象
glTexImage2D(target, level, infmt, format, type, source);
glTexImage2D(target, level, infmt, width, height, border, format, type, pixels);（五）WebGL为什么要这样做，他做这件事的目的又是什么呢？这件事的意义又是什么？
请关注下一篇，在Html5一统前端的背景下，WebGL的布局与解局。
