WebGL

教程如下:http://article.yeeyan.org/view/centaurtek/100348

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页面交互式三维动画渲染蓝图编辑本段回目录

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

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

网页上的3D蓝图
  图示: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

最新情况编辑本段回目录

  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 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

posted @ 2010-10-21 10:26  白羊与晚霞  阅读(2240)  评论(0)    收藏  举报