XML 问题: Web 已经不再仅仅是支持 2D 了

XML 问题: Web 已经不再仅仅是支持 2D 了

级别: 初级

Dethe Elza ([email protected]), 资深技术架构师, Blast Radius

VRML 的重生已经使得 Web 对 3D 相当安全


以前,Web 上使用的 3D 曾经许诺要与构建一个 Web 页面一样简单。不幸的是,3D(即使是非常简单的 3D)也都比显示滚动的文本和图片要更加复杂。每个 VRML 供应商都实现了一组不同的规范,而且从来都不相互进行沟通。因此 Web 上的 3D 就慢慢消失了。否则又能怎样呢?后来出现了 XML 风格的 VRML:X3D,它已经成长为 VRML 的兄弟 H-Anim(Humanoid Animation)和 GeoVRML。Web 上的 3D 的最终用途可以超过虚拟购物中心吗?这篇有关 XML 媒体的最新文章展示了它能实现哪些功能。在本文中,Dethe 会着重介绍 X3D 的两种现在已经可以使用的用法,并展望一下 X3D 的未来。
Virtual Reality Markup Language(虚拟现实标记语言,VRML)试图卷入 Web 风潮而未获成功以来已经有 10 年的时间了。现在 X3D(使用 XML 开发的 VRML)已经成为一项 ISO 标准,并开始开发实现了。XGL(使用 XML 编写的 OpenGL)是一个与之竞争的 3D XML 规范。Web Hypertext Application Technologies Working Group(Web 超文本应用技术工作组,WHATWG)目前正在从事 3D canvas 提案的工作。开放源码的 3D 工具 Blender 现在可以导出 X3D(请参阅 参考资料 中更多有关这些技术的内容)。在所有这些技术充分发展之后,也许就是浏览器中 3D 显示的新纪元了。这些技术会如何发展呢?它们可以与其他 XML 实现进行集成吗?例如 XHTML 和 SVG?

VRML 发生了什么?

当 HTML 依然是星星之火时,VRML 就已经出现了。这是试图将 View Source 和虚拟现实的概念连接在一起的一次尝试,可以对 Web 迅速进行扩展。作为一个概念来说这非常不错,但是它却面对着太多的限制:硬件尚未准备好,OpenGL 也不是一种标准的特性,现有的实现尚不完整,兼容性也不好。VRML 最广泛的用途就是虚拟购物中心,这并没有太多用处;因为这除了依然具有访问真正超市的所有不便之处,还引入了互联网购物的风险。VRML 继续被研究,大部分工作都是在研究领域中开展的,但是 Web 社区却不关心这种技术了。

但是它从来都没有完全消亡,而且时代已经变了。随着 XML 得到无所不在的应用,VRML 规范进行了重写,从而利用 XML 解释器的优点(以及程序员对 XML 比较熟悉这个优点)。最终得到的规范 X3D 是由 Web3D Consortium 负责维护的,它提供了开放源码的工具、例子和文档(请参阅 参考资料)。游戏、OpenGL 和廉价的显卡都驱动着标准计算机的图形能力向超过早期专用图形工作站(这些机器的成本比普通计算机高几个数量级)的方向发展。这些因素现在促进了 VRML 的又一次蓬勃发展。

X3D 正在不断发展。尽管目前它仍然只是一种前沿技术,但是使用这种技术的领域正在不断发展,而且变得更加重要。本文提供了两个在 X3D 的主要商业应用领域之外的例子:快速原型设计和教育。

它的性能怎么样呢?诸如 Quake 之类的游戏的引擎针对特定的角度和图像类型进行了优化;它们并不是通用的 3D 呈现引擎。另一方面,X3D 播放器不但是一个通用的 3D 引擎,而且构建并维护了一个场景图和一个 XML Document Object Model(DOM)树。然而,对于很多应用来说,目前的性能就已经足够了,以后可以再进行改进。

X3D(可能)成功的秘密是 OpenGL 已经成为无处不在的技术。使用 OpenGL,可以实时地呈现高品质的 3D 场景,而没有光线跟踪器那样大的开销。在 OpenGL 基础上构建的语言有很多,从 XGL(请参阅 参考资料),它负责使用 XML 对 OpenGL API 进行编码;到 X3D,它负责提供一种高级接口,用来合并场景图、动画和脚本;再到 Flatland 的 3DML,这是基于构建块的概念的。尽管这些技术的使用日益简单,但是它们还是有很多限制。与易用性相比,X3D 看起来对性能的关注似乎不够;因为 XGL Web 页面已经有两年的时间没有更新了,而且 3DML 格式还没有广泛地得到应用。

在 VRML 进行标准化之后,又提出并开发了两个扩展:

  • GeoVRML 用来克服 VRML 对整个世界的视角的有限性 —— 仅限于房间中的东西。GeoVRML 使得对室外场景使用 VRML 更加简单,例如海拔图。
  • H-Anim 用来允许 VRML 对动画特性图进行建模 —— 这与商业程序 Poser 可以实现的功能类似,但是对于联结操作(用于逆向运动,从而提供真实的动画动作)方面有一些限制。

GeoVRML 和 H-Anim 都被吸收到了 X3D 规范中,但是由于 X3D 是模块化的,所以并非所有的配置文件和查看器都支持这些扩展。由于目前已经成为一项 ISO 标准,X3D 也从中获益良多。

X3D 使用配置文件的形式定义了完整规范的几个子集:

  • Interchange 配置文件可以支持几何、结构、基本光源和动画,它主要用来在应用程序之间转换数据。
  • Interactive 配置文件添加了其他光源、增益和传感器节点,用来与 3D 环境进行交互。
  • Immersive 配置文件添加了音频、冲突、雾化和脚本功能。
  • Full 配置文件添加了 NURBS、H-Anim 和 GeoSpatial 组件。

这些是基本的配置文件。其他配置文件包括 MPEG-4 Interactive,这是 Interactive 配置文件的一个低级版本,目标是用于移动设备上;还有 CAD Distillation Format(CDF),用来转换和交换 Computer Aided Drafting(CAD)数据。

因此,X3D 目前可以用来干什么呢?Web3D 站点上列出的主要领域有 CAD、医疗图像和可视化仿真,但是还提到了制图、交互、技术训练和制作文档。X3D 还可以用于数据的可视化、快速原型、娱乐和游戏的开发。在本文中我们无法涵盖所有这些领域的内容,因此将只关注其中的两个领域 —— 快速原型开发和教育,然后我们再介绍一下 X3D 的前景。





回页首


快速原型开发

假设您希望开发一个新产品。但是应该如何向自己的潜在投资者(或顾客)介绍这个产品呢?可以构建一个物理模型,让一个艺术家在纸上将其呈现出来,或者使用 X3D 将其仿制出来,并让有兴趣的团体观看它。



图 1. 图形(一个概念性手持式计算机)

清单 1 展示了主要的 X3D 结构(完整的文件请参阅 下载 一节中的 fig.x3d),它们用来创建 图 1 中的图形,使用了 FreeWrl 浏览器(请参阅 参考资料)。这是一个非常基本的例子,展示了可以使用 X3D 实现哪些功能,而不用深入钻研更高级的问题,例如打光、动画和脚本。我是手工编写这个文件的,这是一种选择,但是大部分人更喜欢使用 3D 绘图程序,并使用 X3D 呈现给 Web。



清单 1. fig.x3d
            <?xml version="1.0" encoding="utf-8"?>
            <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.0//EN"
            "http://www.web3d.org/specifications/x3d-3.0.dtd">
            <X3D profile='Immersive'
            xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance'
            xsd:noNamespaceSchemaLocation=
            'http://www.web3d.org/specifications/x3d-3.0.xsd'>
            <head>
            <meta name='filename' content='fig.x3d' />
            <meta name='author' content='Dethe Elza' />
            <meta name='created' content='2005-12-02' />
            <meta name='description'
            content='Prototype of the Fig, a notional handheld computer.' />
            </head>
            <Scene>
            <!-- This NavigationInfo node is added to many scenes,
            making examination of objects easier. -->
            <NavigationInfo type='"EXAMINE" "ANY"' />
            <Viewpoint description='' position='0 0 .55' />
            <Background skyColor="1 1 1" groundColor="1 1 1" />
            <!-- Set up the basic shape of the device -->
            <Shape DEF="screen">
            <Appearance>
            <Material diffuseColor='.8 .8 .8' />
            <ImageTexture url="hello_world.png" />
            </Appearance>
            <Box size='.5 .3 .01' />
            </Shape>
            <!-- Put a logo on the lower-left side -->
            <Transform translation="-.23 -.12 .015">
            <Shape DEF="logo">
            <Appearance>
            <Material diffuseColor=".8 .8 .8" />
            <ImageTexture url="fig_logo.png" />
            </Appearance>
            <Box size=".025 .03 .00001" />
            </Shape>
            </Transform>
            <!-- Define a speaker grille and translate to the left side -->
            <Transform translation="-.23 .12 .015">
            <Group DEF="Grille">
            <!-- Dot for the first hole of grille -->
            <Shape>
            <Appearance DEF="grey_hole">
            <Material diffuseColor=".2 .2 .2" />
            </Appearance>
            <Sphere DEF="Dot" radius=".001" />
            </Shape>
            <!-- Now we re-use the dot, translating to a new location -->
            <Transform translation="-.01 -.005 0">
            <Shape use="Dot" />
            </Transform>
            <!-- Snipped five more translated dots -->
            </Group>
            </Transform>
            <!-- Reuse the speaker grille, translated to the right side -->
            <Transform translation=".23 .12 .015">
            <Group USE="Grille" />
            </Transform>
            <!-- Define a raised area on the left for hand-hold and buttons -->
            <Transform translation="-.23 0 0">
            <Shape DEF="control_area">
            <Appearance DEF="white_plastic">
            <Material diffuseColor='.9 .9 .9' shininess="1" />
            </Appearance>
            <Box size=".04 .3 .03" />
            </Shape>
            </Transform>
            <!-- Re-use handle, translating it to the right -->
            <Transform translation=".23 0 0">
            <Shape USE="control_area" />
            </Transform>
            <!-- Create a raised bevel to round the box -->
            <Transform translation="-.25 0 0">
            <Shape DEF="vertical_bevel">
            <Appearance USE="white_plastic" />
            <Cylinder height=".3" radius=".015" />
            </Shape>
            </Transform>
            <!-- Re-use bevel -->
            <Transform translation=".25 0 0">
            <Shape USE="vertical_bevel" />
            </Transform>
            <!-- Four more bevels snipped -->
            <!-- Define a sphere to round the corner -->
            <Transform translation="-.25 -.15 0">
            <Shape DEF="Corner">
            <Appearance USE="white_plastic" />
            <Sphere radius=".015" />
            </Shape>
            </Transform>
            <!-- Three more corners snipped -->
            <!-- Define the camera/microphone grouping in the top bevel -->
            <Transform translation="0 .148 .014">
            <Group DEF="camera_microphone">
            <Transform rotation="1 0 0 1.57">
            <Shape>
            <Appearance USE="white_plastic" />
            <Cylinder radius=".006" height=".002" />
            </Shape>
            </Transform>
            <Shape DEF="camera">
            <Appearance>
            <Material diffuseColor="0 0 0" shininess="1.0" />
            </Appearance>
            <Sphere radius=".003" />
            </Shape>
            <Transform translation="-.03 -.002 .01">
            <Shape DEF="microphone">
            <Appearance USE="grey_hole" />
            <Box size=".006 .001 .001" />
            </Shape>
            </Transform>
            <Transform translation=".03 -.002 .01">
            <Shape USE="microphone" />
            </Transform>
            </Group>
            </Transform>
            <!-- Define the coloured buttons on the left -->
            <Transform translation="-.23 .02 .015">
            <Group DEF="buttons">
            <!-- Red button -->
            <Transform translation="-.01 0 0">
            <Shape>
            <Appearance>
            <Material diffuseColor="1 0 0" shininess=".4" />
            </Appearance>
            <Sphere radius=".006" />
            </Shape>
            </Transform>
            <!-- Yellow, Green, and Blue buttons snipped -->
            </Group>
            </Transform>
            <!-- Re-use buttons on the right, flipped -->
            <Transform translation=".23 .02 .015" rotation="0 1 0 3.15">
            <Group USE="buttons" />
            </Transform>
            </Scene>
            </X3D>
            





回页首


教育

教育是 X3D 可以发挥作用的另外一个领域。利用免费的工具,我们可以创建教学资料、动画、模拟,等等。学生可以进入到 X3D 世界中,查看源代码并对其进行扩展或调节。 图 2 是由一个 Python 脚本(下载 中也包括了这个脚本)生成的理想实体的简单视图。



图 2. 理想实体

清单 2 展示了主要的 X3D 结构(完整的文件请参阅 下载 一节中的 platonics.x3d),它们用来创建上面的图像。使用脚本来生成模型,就可以创建简单或复杂的可视化效果。另外,可以使用脚本在不同格式之间进行转换,从而对由(或为)其他程序所生成的 3D 内容重新进行规划(请参阅 参考资料)。



清单 2. platonics.x3d
            <?xml version="1.0" encoding="utf-8"?>
            <!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.0//EN"
            "http://www.web3d.org/specifications/x3d-3.0.dtd">
            <X3D profile='Immersive'
            xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance'
            xsd:noNamespaceSchemaLocation=
            'http://www.web3d.org/specifications/x3d-3.0.xsd'>
            <head>
            <meta name='filename' content='platonics.x3d' />
            <meta name='author' content='Dethe Elza' />
            <meta name='created' content='2005-10-20' />
            <meta name='description'
            content='Display of the Platonic solids' />
            </head>
            <Scene>
            <!-- This NavigationInfo node is added to many scenes,
            making examination of objects easier. -->
            <NavigationInfo type='"EXAMINE" "ANY"' />
            <Viewpoint description='Default' position='0 0 7' />
            <Background skyColor="1 1 1" groundColor="1 1 1" />
            <!-- tetrahedron description snipped -->
            <!-- cube description snipped -->
            <!-- octohedron description snipped -->
            <Transform translation="1.25 0 0" scale=".5 .5 .5">
            <!-- this is the dodecahedron description -->
            <Shape>
            <Appearance>
            <Material diffuseColor="0 1 0" />
            </Appearance>
            <IndexedFaceSet coordIndex="0,7,8,15,4,-1, 6,10,9,8,7,-1,
            0,1,5,6,7,-1, 1,2,12,11,5,-1, 12,13,16,17,11,-1,
            2,3,18,13,12,-1, 4,3,2,1,0,-1, 3,4,15,14,18,-1,
            6,5,11,17,10,-1, 9,10,17,16,19,-1, 8,9,19,14,15,-1,
            13,18,14,19,16">
            <Coordinate point=".577 .577 .577, .934 0 .357, .577 -.577
            .577, 0 -.357 .934, 0 .357 .934, .934 0 -.357, .577 .577
            -.577, .357 .934 0, -.357 .934 0, -.577 .577 -.577, 0 .357
            -.934, .577 -.577 -.577, .357 -.934 0, -.357 -.934 0,
            -.934 0 .357, -.577 .577 .577, -.577 -.577 -.577, 0 -.357
            -.934, -.577 -.577 .577, -.934 0 -.357" />
            </IndexedFaceSet>
            </Shape>
            </Transform>
            <!-- icosahedron description snipped -->
            </Scene>
            </X3D>
            





回页首


想要玩游戏吗?

我到现在还没有看到过直接使用 X3D 来开发游戏内容或游戏世界的例子。尽管最近一段时间之内我们还无法使用 X3D 重写 Quake 或 Halo 之类的游戏,但是编写类似的程序是可能的。SVG 曾经一度被认为速度太慢,不适合用来开发游戏,但是现在时代已经改变了。现在 Gnome 项目已经使用 SVG 将自己的程序进行了重写。很快,您就会意识到尽量使用 XML 来保存媒体内容的优点,这可以在所有的内容上充分利用各种工具。在这种情况中,为 2D 内容使用 SVG 和为 3D 内容使用 X3D 就更有意义了。





回页首


X3D 的将来

尽管 X3D 与 SVG 是独立进行开发的,但是这两种技术对于 3D 和 2D 图形来说都是非常优秀的。到现在为止,我还没有见过任何工具可以支持在 X3D 中使用 SVG 进行表面纹理的处理,但是的确有计划要支持这种功能。如果人们已经编写了一些工具来使用 SVG 显示 3D 或者一些 canvas 标记,那么采用一种方法对 SVG 文件中的 X3D 进行静态呈现就更有意义了。

使用最新的版本 Firefox 1.5,SVG 和可以使用脚本编程的 canvas 标记就可以进入主流领域了(内嵌到 Firefox 中,而且不需要任何插件)。WHATWG 和 Firefox 开发人员已经提出一些提案对 canvas 标记进行扩展,使其包括 3D 上下文。由于 Firefox 是在一个跨平台的应用程序工具包(XULRunner)的基础之上构建的,因此应用程序可以充分利用强大的 2D 和 3D 工具(以及这个工具包中其他基于 XML 的技术),这种可能性正在吸引人们的兴趣。我预计会出现可以完全使用 XML 媒体堆栈的应用程序。

另外一个可以看到 X3D 发展的领域是 Fab Labs(请参阅 参考资料)。这是由 MIT 发起的,这些小型的工作组让您几乎能够创建任何您可以建模的东西。尚未进行标准化的(就我所了解的而言)是用来捕获这些模型的 3D 语言。如果存在这种语言(让我们将其称为 Fabrication Markup Language(FabML)),X3D 就可以为它构造最佳的基础。






回页首


下载

描述 名字 大小 下载方法
Example code x-matters43-examples.zip 72KB HTTP
关于下载方法的信息 Get Adobe® Reader®


参考资料

学习
  • 您可以参阅本文在 developerWorks 全球站点上的 英文原文

  • Extensible 3D (X3D) Tooltips 对所有的 X3D 元素和属性进行了概要介绍和权威性的说明。

  • VRML 2.0 Sourcebook 是 X3D 版本的 Sourcebook 样例文件。

  • Web3D Consortium 是开发 X3D 规范、信息和工具的主页。

  • H-Anim Specification 在 VRML 和 X3D 中用来进行特征图建模。

  • GeoVRML 是一个用来在 VRML/X3D 中引用地理数据的工作组,例如地图和 3D 地理模型。

  • X3D Frequently Asked Questions 可以提供有关 X3D 的背景知识。

  • Wikipedia 中的 X3D entry 有一些历史信息和进一步的链接。

  • 3D Industry Forum 是 Web3D Consortium 的主要竞争者,是 Adobe Acrobat 中内嵌的二进制 U3D 规范的开发团体。

  • Flatland 是高级的基于 3DML “Blocks” 的规范和 Rover 软件的开发者。

  • 查看 VRML Shopping Mall。为了证明我对 VRML 购物中心的批评是符合实际情况的,您可以自己体验一下(这需要 VRML 查看器)。

  • 如果没有 OpenGL,VRML 的重生就是不可能的。

  • 在很多方法中,Scalable Vector Graphics (SVG) 是与 X3D 对应的 2D 伙伴,将来它们应该可以一起很好地工作。

  • 了解有关 SVG 的基本介绍,请阅读 Nicholas Chase 的 developerWorks 教程 “SVG-可伸缩向量图形介绍” (2004 年 3 月)。在 developerWorks 的 XML 专区 中,还可以发现大量的 SVG 内容

  • Web Hypertext Application Technology Working Group (WHATWG) 正在研究下一代基于 HTML 和 Web 的技术。

  • 在 Edd Dumbill 的文章 “HTML 的未来” (developerWorks,2005 年 12 月)中可以看到更多有关 WHATWG 和 canvas 的内容。

  • FabLab,MIT 的 Center for Bits and Atoms 已经组成了一个大约 $20,000(US)的包,它为人们构建物理对象提供了开放源码的等价物。

  • 了解如何才能成为 IBM 认证的 XML 及相关技术的开发人员

获得产品和技术
  • FreeWRL Viewer 是一个 Linux 和 OS X 上的查看器(Windows 支持很快就会有了)。本文中就是使用这个工具来对例子进行测试的,希望在 2006 年初可以支持完整的交换配置文件。

  • Xj3D Viewer 是一个使用 Java 语言编写的开放源码 X3D 查看器。

  • X3D-Edit 是一个用来构建 X3D 图形的基于 Java 的编辑器。

  • lib3ds 是一个用来使用 3DS 模型格式的开放源码库。

  • Rawkee Maya Exporter 可以用来从 Alias Maya 应用程序中导出 X3D 数据。

  • Blender 是一个重要的开放源码 3D 应用程序,提供了 3D 导出器。



关于作者

Dethe Elza 自己最喜欢的职位是首席疯狂科学家(Chief Mad Scientist)。可以通过 [email protected] 与 Dethe 联系。他在 http://livingcode.blogspot.com/ 上维护了一个有关 Python 和 Mac OS X 的 blog,并为自己的孩子编写程序。欢迎为这个栏目提供建议和推荐信息。

你可能感兴趣的:(XML 问题: Web 已经不再仅仅是支持 2D 了)