基于网页的 3D 图形技术进入桌面浏览器?

【本文原载:Ars Technica ,作者:Chris Foresman ,原文在此

mobilesafari_3d_css

在为 WebKit 增加了基于 CSS 的二维转换功能后不久,苹果又为 WebKit 增加了 3D 位置及转换功能。不过目前只有 Mobile Safari 浏览器才能使用 WebKit 中先进的 3D 功能。如果苹果将这一功能扩展到桌面 Safari 浏览器,它或许会开创一种全新视觉的富网页应用,并且没有 Flash 。

为通过 CSS 执行二维转换功能,苹果制定了一系列技术规范,并花了许多时间对其进行优化。Safari 4 测试版中的不少图形功能正是基于 CSS 的二维转换功能,Safari 还支持 HTML 5 视频和音频标签,从 Safari 4 测试版的“欢迎页面”中我们也能看到这一点。不过,没有引起外界多少注意的是,在 CSS 平面转换功能之外,苹果还为网页应用开发者提供了一些强大的3D 图形能力——前提是,这个网页应用必须是给 iPhone 开发的。

早在 2007 年 10 月 WebKit 团队已经为测试版的 WebKit 添加了 CSS 转换功能,包括在二维空间执行缩放、旋转、倾斜和平移等动作。随着技术规范的成熟,3D 和动画功能也被添加进来。最终,3D 转换功能也出现在了他们的技术规范里。尽管 3D 转换功能已经被添加进来有一段时间,但目前只有 iPhone 和 iPod touch 能够使用它,无论是 Safari 3.2、Safari 4 测试版,还是 WebKit 测试版都无法使用这一先进的 3D 转换功能。

需要指出的是,3D 转换功能运用的是二维的原理。但它能够让网页开发者在 3D 空间中以几乎任何文件对象模式(DOM)的要素的角度转化、缩放、旋转、倾斜和改变透视的效果。最终的结果是,它们的能力惊人。

下面就是两个例子:

这由 Safari 开发中心提供在 iPhone 模拟器中运行的 3D CSS 效果视频。

尽管许多二维的转换和动画能够复制 JavaScript 的效果,Mozilla 也在尝试基于 JavaScript 的 3D 效果 ,但 WebKit 的 CSS 转换能力拥有明显的性能优势。

“它的采用硬件加速,动画效果所需的所有定时和时间间隔都通过 Safari 本身来完成,无需通过 Safari 的 JavaScript 引擎,”芝加哥的开发者 Peter Zich 表示:“在 iPhone 上运行 JavaScript 动画的帧速率基本上不能超过 5 帧/秒,而 CSS 远远超过这一速率。”

这些能力让 iPhone 的网页应用开发者能够实现接近本地应用的 3D 效果。那么,苹果为何不将其引入到桌面浏览器?“我与苹果的 Safari 软件工程师 Vicki Murley 聊过这个问题,她的回答是‘我们没有特别的原因,只是还没有做而已’,”Peter Zich 说。08 年 7 月份 WebKit 的一小撮漏洞追踪者曾要求,在桌面版 WebKit 中添加 3D 图形转换功能支持。

下面是 Peter Zich 制作的基于3D CSS 转换功能的一个简单的 3D 模型:

Peter Zich 也希望苹果能够让浏览器更加三维化。“我们希望他们能够制作一个三维画布,”Peter Zich 曾尝试使用 PNG 文件制作一个简单的卡车模型(该页面只能在 iPhone 和 iPod touch 中浏览)。“我想做的是,你只需要在网页中设置一系列的点它就能够帮你建出 3D 模型。”

如果你要进一步探究,苹果为何不让 Flash 进入 iPhone 和 iPod touch 等移动设备,3D CSS 转换功能定是最重要的原因之一。WebKit 已经支持 HTML 5 先进媒体处理能力、先进的 Nitro JavaScript 引擎、以及基于 CSS 的转换和动画能力,苹果已经准备好让 WebKit 成为跨平台的最佳网页应用开发工具。而让桌面浏览器支持 3D 图形功能,能够让当前苹果专有的 CSS 扩展成为事实上的,或者说更加正式的网页标准。