10. Html5的局：这些年，WebGL替我们做的那些事

（一）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的布局与解局。