什么是WebGL
简单来说WebGL是一种公开的3D绘图API,他使得在网页中直接绘制3D图形成为可能,通过javascript 与 OpenGL ES 之间的绑定(binding) javascript获得了调用 显卡的能力,这种硬件级别的加速是非常明显的. 显卡芯片(GPU)从物理结构来说 是非常适合进行大规模并发浮点运算的,这样在绘图工作中GPU可以做到与CPU各司其职 互相分担工作.
WebGL的重要意义
WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas 提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。 显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
WebGL, OpenGL ES, OpenGL 之间的关系
WebGL是OpenGL ES的子集. 而 OpenGL ES 是 OpenGL的子集
opengl 是一个由来已久的东西,关于它的历史感兴趣的话可以自行Google下,总结来讲,从OpenGL开始 各大显卡厂商就已经把他们的显卡驱动接口统一了,(当然出台一个行业内 统一的标准,是需要漫长的过程的) OpenGL 分为两大块, 一块是Shader(着色器) 另一块是 Shader与其他语言的接口.(官方只提供了C语言的接口)
opengl es 简单来讲他是 opengl 的嵌入式版本,专门为移动设备而设计,舍弃一些不常用的接口, opengl es 他丢掉了一些 '包袱' 在运行时,消耗更小的内存 和 更低的功率(省电). ARM、HI Corporation、Imagination、NVIDIA、高通、ZiiLABS 都表示将对 opengl es 进行大力的支持.
webgl 他是在opengl es 2.0 版本基础上设计的一套专门用于网页3D渲染的API, 由于浏览器的运行环境十分复杂,所以webgl实现的功能比opengl es 还要少.当然随着webgl的发展 在以后会支持更多的功能.
除了这些 gl家族还有 open cl , 和 NV的 CUDA 等其他衍生项目,童鞋们有机会可以关注下.WebGL是如何工作的?
上文已经讲述了,WebGL允许js调用显卡API(GLSL)来实现绘图硬件加速,那么原理是怎样的呢?
首先WebGL是由两大部分组成:
-
GLSL:OpenGL Shading Language,一种着色器语言. WebGL JS API: GLSL 与 javascript 之间的桥梁.
工作流程:
-
js获取要渲染的3D数据(3D模型).
-
通过
WebGL JS API建立好GLSL的通信桥梁. -
发送数据到
GLSL -
GLSL获得数据开始绘图. - 绘制完毕,结果显示在浏览器上.
感受 WebGL 的高性能
上图为 分别使用 svg canvas 和 webgl 绘制 5000个圆的例子
由此可见webgl释放出来的力量是相当震撼的.
为何gpu比cpu更适合做图形运算,网上流传着这样一个视频...
更深层次的原因是GPU和CPU的物理结构不同,GPU更偏重于运算,而CPU更偏重于逻辑控制.
上图中GPU茫茫多的绿点都是运算单元,而CPU却只有4个运算单元,结构上来说CPU的设计更趋向于"万能型"而GPU则更趋向于"专业型"
可以参见知乎上的名帖: CPU 和 GPU 的区别是什么？