WebGL简介

来自 科技中国 ：http://www.techcn.com.cn/index.php?edition-view-179247-0.html

 

WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。

　WebGL和3D图形规范OpenGL、通用计算规范OpenCL一样来自Khronos Group，而且免费开放，预计2010年上半年完成并公开发布。Adobe Flash 10、微软Silverlight 3.0也都已经支持GPU加速，但它们都是私有的、不透明的。WebGL标准工作组的成员包括AMD，爱立信，谷歌，Mozilla，Nvidia以及Opera等，这些成员会与Khronos公司通力合作，创建一种多平台环境可用的WebGL标准，预计WebGL标准会在2010年上半年首度公开发布，该标准将完全免费对外提供。

　　WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

目录

• • WebGL描绘Web页面交互式三维动画渲染蓝图
• • 解析WebGL-3D图形硬件加速技术
• • 最新情况
• • 3D Web标准草案WebGL出炉
• • HTML5网页3D技术标准发布
• • 构建3D网页新世界
• • 火狐提前步入3D Web标准
• • 参考文献

[显示部分][显示全部]

WebGL描绘Web页面交互式三维动画渲染蓝图回目录

“不需要Flash，不需要Silverlight，浏览器本身就能做出性能不差的3D应用，甚至是像魔兽世界那样的大型在线3D游戏……”在现在看来，这只是梦想，不过，WebGL正在拉近梦想与现实间的距离……
　　Web图形渲染的发展历程
　　8月初，图形行业标准协会Khronos集团透露：Web页面调用OpenGL的标准——WebGL即将完成，并将于2010年初正式发布。这条貌似不起眼的、充满了技术化背景的新闻，很快引起了业界的巨大反响，因为它将给浏览器带来巨大的用户体验方面的影响。

　　图示：现在主流的Web交互式动画由Flash等浏览器插件调用DirectX、OpenGL等操作系统图形接口实现图形渲染，调用了硬件加速。但缺点是必须下载插件

　　图示：WebGL直接以OpenGL接口实现HTML5的canvas标签调用，以统一的OpenGL标准，从Web脚本生成利用硬件加速功能的Web交互式3D动画的图形渲染

　　Web应用不断扩大的市场份额显示着它在未来的重要性，而图形元素则是任何一张有吸引力的Web页面都不可或缺的。随着Web应用的进一步复杂化，普通的平面静态图形已不能满足应用的需要。于是，用于Web页面的交互式三维动画应运而生。
　　但早期的技术非常不成熟，比如Java Applet实现的简单交互式三维动画，不仅需要下载一个巨大的支持环境，而且画面非常粗糙，性能也很差。究其原因，就在于早期的这些交互式三维动画在做图形渲染时，并没有直接利用到图形硬件本身所带的加速功能，也就是，即使安装了性能很高的显卡，对于Web页面的交互式三维动画的显示也起不了什么作用。
　　后来，Adobe的Flash Player浏览器插件几乎在一夜之间，占据了Web交互式三维动画的半壁 江山。和Java Applet不同的是，它直接利用操作系统提供的图形应用程序接口，来调用图形硬件的加速功能，实现了高性能的图形渲染。这么一来，交互式三维动画几乎可 以瞬间加载完成，而且对于相当复杂的交互和三维动画而言，它都表现不俗。
　　可是，这样的解决方案也有不少的问题。首先，它是通过浏览器插件来实现的，这就意味着对于每种不同的操作系统和浏览器的组合，都需要下载特定版 本的插件，对于手持设备上运行的比较特殊的操作系统或浏览器，就可能没有对应版本的插件;其次，对于操作系统上的图形应用程序接口的调用，它并不是遵循一 个公开的标准。比如，在Windows平台上，Flash是通过调用DirectX来实现，而在Mac OS X上则是调用AGL。
　　这两点不足，很大程度上限制了Web交互式三维动画的应用范围。微软推出的Silverlight，本质上也无法解决这个问题。因此，开发一种无需浏览器插件支持、通过统一的图形应用程序接口调用来实现Web交互式三维动画图形渲染的技术，就变得很有必要，而这正是WebGL的革命意义所在。
　　尽管HTML5中引入了canvas标记，这个标记本身支持Web交互式三维动画的制作，但是，如果没有WebGL的支持，它并不能调用图形硬 件加速功能。因此，此前虽然很多浏览器支持canvas标记，但由于性能不够好，无法得到广泛的应用。可是，一旦加入了WebGL的支持，它的面貌就焕然 一新了。
　　WebGL完美地解决了现有的Web交互式三维动画的两个问题：第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。
　　这意味着，以后不需要再通过任何浏览器插件，仅仅用HTML和Javascript，就可以制作出性能丝毫不亚于现在用Flash、Silverlight等做出来的Web交互式三维动画，而且在任何平台上都能以同样的方式运作，这是多么巨大的改进!

解析WebGL-3D图形硬件加速技术 回目录

WebGL是什么？

Web+GL 这二者相加的结果是一整套针对浏览器的3D图形硬件加速解决方案，类似于O3D，后者是Google为了丰富网页的3D体验（整合进Chrome浏览器）而开发的Open-Source图形硬件加速技术。

伴随着WebGL发布的一个热门话题 “这可能预示着O3D将渐渐的成为一个鸡肋，并最终淡出江湖” 。没错，发出这样感叹的人不占少数。当初Google的目标是利用O3D建立一套适用于浏览器的3D标准，然而从其对WebGL同样有着浓厚兴趣的态度上不得不让人替O3D的开发团队捏一把汗。

其实对于O3D有着过分忧虑的人可以暂时缓解一下，毕竟WebGL还是比较稚嫩，要在短时间内达到普及的程度将非常困难，其还存在很多需要克服的困难。WebGL的主要发展方向是整合JavaScript和OpenGL ES 2.0，而JavaScript将成为其主要的瓶颈，它无法高效的处理大量的数据运算（二个字形容 “太慢”）。当然这些仅仅是以目前的条件来分析，相信不久的将来针对于运算效率的问题将会有很大改善。

下面是一些WebGL必须要面对和克服的困难：

因为OpenGL ES 2.0并没有被大多数的硬件平台所支持，所以将会导致很多设备无法运行WebGL。
因为OpenGL ES 2.0对JavaScript的依赖程度达到了100%，其利用JavaScript来处理应用程序的场景绘图，例如：1）计算场景中子父物体间的矩阵运算。2）Culling Calculating（计算不需要绘制的内容）。3）分类计算，用于处理透明对象等。4）计算场景所包含的所有动画数据。这些应用会因为JavaScript的计算瓶颈而受到不同程度的限制。
无法高效的利用Javascript处理Skinning，如果利用GPU的运算能力来处理，势必会占用过多GPU的资源，从而无法更好的协调其它效果，例如：Shadow mapping（绘制软边的阴影贴图算法）
借用一个例子来更进一步的剖析，例如：处理一个带有phong材质的物体，每一帧的渲染就接近多达10次以上的GL调用：
一、给Shader传递所包含的Matrix信息（通常1-5个Matrices）。
二、每个需要传递的Color参数信息都将占用一次GL调用，对于Phone材质而言，至少需要两次调用(Color & Shininess)。然而如果追求效果的最大化，那么可以把五个参数都用上（Emissive, Ambient, Diffuse,Specular, Shininess）一共产生五次GL调用。
三、处理定点坐标。
四、处理法线信息。
五、如果模型包含有贴图信息，那么还需要增加一次GL调用来传递UV信息。
六、最后再次执行GL调用完成对模型的绘制。
从上面的结果来看，最少也需要5次GL调用，最多可以达到14次。如果结合最终项目的需求以每秒30帧的频率来计算，其效率可想而知。
WebGL并没有积极的去解决数据导入问题。目前为止，仅仅可以利用IMG tags来嵌入材质信息，暂不支持DXT图片压缩格式（而DXT已经被大多数的3D显卡硬件所支持）。暂无预处理技术，依然是在裸奔。在一个独立的File中不支持CubeMaps（是一个以较低性能损耗来描绘静态物体对周围环境的反射效果的捷径）。除了利用JavaScript的数组以外，没有更好的方式传递几何信息。
以上的信息可以对当前WebGL的情况有个基本的了解，其实无论比较的结果如何，未来遇到实际问题时，都是要根据实际情况来选择适用的解决方案。在这里没有谁有压倒性的优势，都各有利弊。对于开发者来讲，追求效率的同时，可以在要求不够严格的情况下选择最易上手的工具，缩短开发周期。

最新情况回目录

　　WebGL标准已出现在Mozilla Firefox、Apple Safari及开发者预览版Google Chrome等浏览器中，这项技术支持Web开发人员借助系统显示芯片在浏览器中展示各种3D模型和场景，未来有望推出3D网页游戏及复杂3D结构的网站页面。
　　
　　据国外媒体报道，近日一段诺基亚N900手机使用移动版Firefox软件演示WebGL标准的视频在网上流传，引起了许多手机用户的关注。
　　从视频中可以看到在展示网页中的3D模型及使用触控屏操作的过程非常流畅，这表示WebGL标准已经支持手机浏览器应用。目前手机 用户上网浏览多媒体网页仍受手机硬件、浏览器以及网速等方面限制导致体验不佳，如果WebGL标准能在手机上普及应用，将使手机网络服务得到快速的发展。
　　WebGL标准目前仍在开发完善当中，预计将于2010年上半年发布。

3D Web标准草案WebGL出炉回目录

3D图像最先普及在电玩游戏中，然后进入操作系统，而最新发展，是网络浏览器也朝向3D迈出重大的一步。
管理OpenGL图像界面的Khronos Group宣布，该组织与Mozilla合作将硬件加速3D图像带入网络的工作，已经拟定出一份标准草案。这项标准称为WebGL，能让使用JavaScript语言的程序设计师，放心利用影音卡处理3D图像。
该组织现在征求网络开发者和其他有关人士提供意见，以利完成这项标准。Mozilla的标准拥护者兼WebGL工作小组首席Arun Ranganathan说：我期望能在2010年初，第一季之内，达成一个非临时性、不仅是草案的规格。
微软Internet Explorer仍旧是最多人使用的浏览器，但其他四个主要竞争者Mozilla Firefox、苹果Safari、Google Chrome和Opera Software的Opera，都卯尽全力（有时甚至类似非正式的联盟）用最新的技术提升网络的呈现。
这四家浏览器商一致支持WebGL。Firefox、Safari都有开发者测试版，而Chrome甚至已内建这项标准。微软拒绝评论，仅强调该公司对标准的普遍支持。
在网络构建3D支持，有利于网络应用软件的使用者界面，包括游戏。民众对网络游戏的热爱，可作为厂商升级到最新技术的一大诱因。但Ranganathan表示，往后的发展仍不确定。浏览器的先进2D界面Canvas的到来，曾引领图像工作的蓬勃发展，而他预期3D技术能创造类似的改变。
但先别过度期待3D网络能取代原生软件的效果。首先，即使有3D图像加速，网络软件还有许多其他处理和使用者界面的限制。其次，即使 WebGL的标准化顺利完成，还必须内建到浏览器内，再由民众升级到新版本，而程序设计师也需要学习如何支持该技术。
WebGL不是唯一进行中的3D网络技术。Google自己的O3D计划，目前只是一个浏览器附加程序，但该公司也准备将此内建到Chrome。但O3D是一个更高层级的界面，并非WebGL的直接竞争者。细节具有高度技术性，但相对于WebGL的立即模式界面，O3D采用一种保留模式方法。
而当然，10年前还有所谓的VRML（虚拟时境模式建构语言），属于一种文件格式而非界面。但VRML的后继者X3D，对WebGL确实有用，目前也有一个X3dom计划，进行这方面的工作。

HTML5网页3D技术标准发布回目录

HTML5标准将内建3D技术的支持，其中WebGL就是一项用于加速网页3D图形界面应用的通用技术标准。近日，Khronos联盟组织发布了WebGL标准的草案版本。标准的草案版本中使用了HTML5的有关技术来绘制OpenGL ES 2.0图像，这样便无需使用插件便可以达到将网页3D化的目的。
WebGL标准不仅可以简化开启显卡3D网页硬加速功能的操作步骤，而且还规定了一套适合网页使用的3D图形接口界面，支持脚本化运行，而且还设计了显卡性能测试工具等调试类功能。

网页3D应用示例
对于那些已经能够支持HTML5技术的浏览器如苹果Safari4，谷歌Chrome3，Mozilla Firfox3.5，Opera10而言，理论上讲应用WebGL标准的难度并不大，不过仍然可能需要发布专门的pre-release版本才可以完美支持WebGL标准。同时，尽管目前基于Android2.0或iPhone Safari的系统仍然无法支持WebGL，但随着移动OpenGL标准在移动浏览器应用中的日渐普及，WebGL标准也将被支持HTML5标准，并采用OpenGL ES渲染页面的浏览器所逐步广泛采用。
不过目前由AMD,苹果，谷歌，Mozilla以及Nvidia等公司组成的标准小组仍在继续WebGL的代码平台部分的标准编写工作，据Khronos联盟组织估计，明年上半年，支持WebGL的有关产品便会面市。

 

构建3D网页新世界 回目录

今年下半年， HTML5 和 WebGL 变成极热门词语，3D 网页来势汹汹。主流的浏览器 Google Chrome 以及 Mozilla Firefox 均致力于 HTML5+WebGL 的 3D 网页技术方案的发展，各种实验性项目层出不穷。这是一个转折时期——互联网最重要的门户浏览器正在从主流支持 2D 平面网页内容到原生的支持 3D 物体形象的展示。

何谓 WebGL ？

WebGL 是网页开发语言 JAVA Script 形式的绘图 API 接口，提供设备硬件图形能力的直接调用。HTML5 则是网页开发语言新标准，提供了网页上的 Canvas “画布”供网页上的 3D 对象展现。

简单的说，在此之前，3D 物体形象在网页上不能直接展示，必须使用非标准的特殊网页语言语法或者通过安装额外的浏览器插件。HTML5 和 WebGL 提供了一种技术方案，使程序员可以直接在网页上展示物体的 3D 形象，并且这种展现直接使用设备的图形处理器的处理能力,其绘图性能能够得到保证。3D 网页技术应用很广，体验 3D 网页也非常简单，我们只需要桌面电脑支持现代的图形显示设备，同时，必须安装足够高版本的新型浏览器，诸如 firefox 和 Chrome 即可。

3D 网页游戏

先说说 3D 网页游戏，在这场技术浪潮中，先知先觉的游戏厂商真正积极研发 WebGL 游戏引擎，为 3D 网页游戏潮流的到来提前进行技术储备。
Mozilla 社区的 Paladin 项目组正在开发名为“Gladius”WebGL 3D 游戏引擎，CopperLicht 则是一个快速 JAVAScript 的 WebGL 游戏引擎，在其网站上提供了一批 WebGL 游戏场景范例，其中不少的 3D 场景甚至可以媲美传统的 PC 桌面游戏。它们的效果可以在 ResureFox 和 ambiera 网站看到。

3D 地图

而 3D 地图是另外一个关键应用。和目前的枯燥平面地图相比，3D 地图可以以旋转的视角查看街景、建筑物的立体形状，用户有身临其境的感觉，体验非华丽、无以形容。在 MapsGL 项目中，3D 地图的先行者 Google 正利用 WebGL 技术提供 3D 街景地图。按照 Google 的说法，他们在“重新打造了 Google 地图……提供更强大的性能、更丰富的 3D 图形、更流畅的图像过渡效果和 45° 视图旋转效果，以及能更方便地访问街景视图。”

要查看其效果，你可以直接访问 Google Maps 网页，并选择打开 MapsGL 功能。当地图的比例放大到一个街道路口大小的时候，平面的地图就会展示成 3D 的街景。下面是使用 MapsGL 功能访问美国曼哈顿周围的地图看到景观截图，转动图上的罗盘或者移动鼠标，查看的视角随之转动，其效果仿佛本人在曼哈顿的街道上闲逛。

 

可以想象，当每个城市都完成了 3D 的建模，并通过网页提供服务，3D 地图之上能够叠加各种有趣的服务，例如：3D 寻路导航，虚拟旅游，美食查找、网络社交、网络游戏等等。这些应用有目前的 2D 的版本，安装插件可以实现不怎么流畅的 3D 效果，但在未来的 3D 网页中，逼真的 3D 城市街景呈现了流畅的视角转换后，它将带来迥异的用户体验。

3D 社交网络

3D 技术能演变出有趣应用，其中，最有趣的当属基于 3D 地图的网络社交。目前现在的社交 SNS 网站是都是基于文字、图片、视频的内容，所使用的地图是平面的地图。试想一下，未来的网络社交的背景是逼真的 3D 街景，您在“街上”行走的时候，可以真实的推开其中的一扇店门，“真实”的去某个咖啡店买一杯咖啡，还能看到朋友的 3D 形象，坐在靠窗的桌子上看书，您可以走过去和“他/她”说话。

这并非痴人说梦，Google正在做这方面的尝试：在 YoubeQ 项目中构建 Google Earth 里的 3D 社交网络。用户化身为一个 3D 小人，在Google Earth展示的街景中闲逛，碰到朋友能聊聊天。这个项目在Google Earth能够支持网页模式之后，访问势必更加简单直接。

移动设备中的 3D

和我们日常相关的，还有平板电脑上的 3D 网页应用。相比其他设备，平板电脑更适合运行 3D 网页应用。在平板电脑中，三维的立体形象与手指的操作能够很好的结合在一起。比如，Google 的 3D 圆筒书架 是在 PC 电脑实现的 3D 网页应用，书架实现为巨大的柱状多层转筒， 鼠标拖曳可以模拟手转动书架找书。想象一下，如果该应用用在平版电脑上，用手指转动书架，然后使用一个手指向上的手势来取书，是不是更爽一些？

3D 我们的世界

可以想象，3D 网页技术普及之后，我们的世界将被充分的 3D 模型化，大到地球、宇宙天体、小到汽车、房子、电子产品、微生物、细菌，都可以有详尽的细节的 3D 形象，我们可以以此趣味的展示和探索周围精彩的世界。去年年底，Google 推出的人体浏览器 3D 网页应用，把人体进行 3D 建模，能够以各种视角 360 度查看人体每个器官，包括骨骼、肌肉、内脏器官、神经系统等。（此应用为 Google 实验室的成果，目前该应用的 Google 网页已经关闭，相关的人体 3D 医学影像由 Zygote 网站继续提供运营。有兴趣的朋友可以看看人体浏览器的运行视频）

 

瓶颈

然而，先进技术的发展需要一个漫长的过程。其中，复杂物体的 3D 建模是 3D 网页主要的应用瓶颈之一，举例来说，程序员需要展示一个 3D 的轮船，把这个轮船表示为计算机能理解的多边形平面的组合是一个复杂的事情，对网页开发程序员来说，最好有现成的轮船的 3D 模型可以使用，不需要关注建模的细节。3D 网页的世界也许需要一个价格低廉的巨大 3D 模型库，囊括周围世界的各种物体。对此，Google 的做法是发动全球的爱好者创建和共享 3D 模型，这种做法是否会造成资源垄断，和未来的中小 3D 应用开发者能否得益，那是今后值得思考的问题。

 

火狐提前步入3D Web标准回目录

　据国外媒体报道，可靠消息称，名为“WebGL”的绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，为多种浏览器提供3D加速功能，而这个技术入驻浏览器已经逐步演变为现实。
　　据了解，上周，Mozilla的程序员已经开始将WebGL植入最新的Firefox builds。而本月初，程序员也已经开始将WebGL植入WebKit引擎，而WebKit引擎目前正被用于苹果的Safari和谷歌的Chrome浏览器。
　　此外，今年夏初，WebKit引擎还增加了对CSS 3D转换的支持，能让Web开发人员在3D空间内放置页面元素
　　目前，Web标准日益变化，而这个事实也加速了WebGL的推出进程，WebGL将会在日后的几个月中趋于稳定。
　　Mozilla的发言人表示，3D图像加速技术将融入下一代浏览器超快的JavaScript引擎，这意味着我们未来会看到更多先进的应用程序会采用开放的Web技术。3D技术有很大的发展空间，我们非常愿意公开此提案。
　　3月份，Mozilla和Khronos Group发起了WebGL计划，通过增加OpenGL ES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化。
　　8月份，WebGL程序员Mark Steele指出，WebGL标准将会在2010年上半年正式推出，但是将会在此之前进驻浏览器。

参考文献回目录

http://news.csdn.net/a/20091215/215801.html
http://hi.baidu.com/imcger/blog/item/7c851d38f312612eb8998fdf.html
http://www.ifanr.com/60391