WebGL三维网页开发技术
来源:第三维度
什么是WebGL?
WebGL是一套JavaScript API,允许开发者在浏览器中直接嵌入支持硬件加速的互动3D图形。下面是一个WebGL应用于网页中的视频,来源于WebGL教程的第10课,你可以看到简单的全3D的类似于Doom的游戏,而且完全是在浏览器中实现的,无需任何插件。
作为一项开放的web标准,WebGL是由Khronos Group开发的,Google、Apple、Mozilla、Opera等公司和组织都是其中的成员,即这一标准的制定者和积极倡导者。
WebGL是作为HTML5中的 <canvas>标签的一个特殊的上下文(experimental-webgl)实现在浏览器中的,因此WebGL也可以与所有DOM接口完全整合到一起。WebGL API是基于OpenGL ES 2.0的,是OpenGL ES 2.0的子集,所以WebGL可以运行于许多不同的硬件设备之上,例如桌面电脑、智能手机、平板电脑和智能电视。你可以在Khronos的网站上找到WebGL的规范全文。
WebGL可以用来做什么?
WebGL允许开发者在浏览器中实现实时的3D互动图形。WebGL可以应用于互动音乐电视、游戏、数据可视化、艺术、3D设计环境、3D空间建模、3D物体建模、绘制数学函数和创建物理模拟。
WebGL的工作原理是什么?
因为是被设计成直接工作在显卡端的,所以WebGL比目前其他的典型的web技术都要更加复杂。总的来说,它是相当的低等级的。这也正是它为什么能够如此迅速的完成大量的计算,并实现复杂的实时3D渲染的原因。
你不需要完全理解WebGL内在的工作原理。因为有很多第三方WebGL图形库可以帮你完成一些复杂的操作。但是如果你想成为一个高级开发者,充分利用WebGL的各种高级特性,那建议你最好还是深入了解一下其中的内涵。
在WebGL中编程,通常的目标都是想要渲染某种场景。这其中包括多重并发的绘制工作,称之为绘制调用(draw call),这些调用都是在GPU端通过一个叫做渲染管线(Rendering Pipeline)的处理流程来实现的。
在WebGL中,和其他大多数实时3D图形系统一样,三角形是用于绘制模型的最基本的元素。因此,在WebGL中需要通过使用JavaScript来生成绘制信息,这些绘制信息包括指定在什么位置绘制三角形、如何绘制三角形、这些三角形的外观长的什么样子(颜色、形状、纹理等等)。然后将这些信息传递给到GPU端,GPU进行处理,最后再返回绘制结果。
我如何才能运行WebGL?
要运行WebGL,你必须有一个支持它的浏览器。例如:
Google Chrome 9及以上版本
Mozilla Firefox 4以及上版本
Safari 5.1及以上版本(仅限于Mac OS X操作系统,不包括Windows操作系统;所有情况下必须强制开启WebGL支持,请参考下文)
Opera Next 即Opera 12 alpha及以上版本
微软的IE并不支持WebGL,不过你可以通过下载并安装IEWebGL这个插件,或者Google Chrome Framework来运行一些WebGL应用。
同时,你还需要一块好的显卡,并安装了最新的显卡驱动;这只是刚刚能够运行WebGL的要求,如果想要在一些复杂的应用中保证显示效果,那你需要一块更好的显卡。
如果你的显卡非常老旧,或者是板载的集成显卡,那么你需要在浏览器中强制开启WebGL支持;另外因为其他的一些原因(比如你的操作系统是Windows XP),在正常安装以上浏览器之后还是不能运行WebGL,那你最好也强制开启WebGL支持。
WebGL是一项在网页浏览器呈现3D画面的技术,有别于过往需加装浏览器插件,透过WebGL的技术,只需要编写网页代码即可实现3D图像的展示。WebGL的规格尚在发展中,由非营利的Khronos Group管理。
WebGL基于OpenGL ES 2.0,提供了3D图像的程序接口。它使用HTML5 Canvas并允许利用文档对象模型接口。可利用部分Javascript实现自动内存管理
WebGL绘图技术标准允许把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标准会在2011年上半年首度公开发布,该标准将完全免费对外提供。
WebGL完美地解决了现有的Web交互式三维动画的两个问题:第一,它通过HTML脚本本身实现Web交互式三维动画的制作,无需任何浏览器插件支持;第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。
WebGL标准已出现在Mozilla Firefox、Apple Safari及开发者预览版Google Chrome等浏览器中,这项技术支持Web开发人员借助系统显示芯片在浏览器中展示各种3D模型和场景,未来有望推出3D网页游戏及复杂3D结构的网站页面。
据国外媒体报道,近日一段诺基亚N900手机使用移动版Firefox软件演示WebGL标准的视频在网上流传,引起了许多手机用户的关注。
从视频中可以看到在展示网页中的3D模型及使用触控屏操作的过程非常流畅,这表示WebGL标准已经支持手机浏览器应用。目前手机 用户上网浏览多媒体网页仍受手机硬件、浏览器以及网速等方面限制导致体验不佳,如果WebGL标准能在手机上普及应用,将使手机网络服务得到快速的发展。
2011年3月,多媒体技术标准化组织Khronos在美国洛杉矶举办的游戏开发大会上发布WebGL标准规范 R 1.0,支持WebGL的浏览器不借助任何插件便可提供硬件图形加速从而提供高质量的3D体验。 目前WebGL标准已经获得了业界大佬们的支持: Apple (Mac OS Safari nightly builds), Google (Chrome9.0), Mozilla (Firefox4.0 beta)和Opera (preview build)。
WebGL的工作成员包括Mozilla、Opera、苹果公司,Mozilla的Arun Ranganathan担任主席。目前,WebGL被大多数处于测试阶段的浏览器所支持,支持此技术的有Mozilla Firefox、Google Chrome、Opera 12(目前的正式版11.52不支持)、Safari。另外,它也受Nokia N900 PR1.2支持。