DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> Web 已經不再僅僅是支持 2D 了
Web 已經不再僅僅是支持 2D 了
編輯:XML詳解     

以前,Web 上使用的 3D 曾經許諾要與構建一個 Web 頁面一樣簡單。不幸的是,3D(即使是非常簡單的 3D)也都比顯示滾動的文本和圖片要更加復雜。每個 VRML 供應商都實現了一組不同的規范,而且從來都不相互進行溝通。因此 Web 上的 3D 就慢慢消失了。否則又能怎樣呢?後來出現了 XML 風格的 VRML:X3D,它已經成長為 VRML 的兄弟 H-Anim(Humanoid Animation)和 GeoVRML。Web 上的 3D 的最終用途可以超過虛擬購物中心嗎?這篇有關 XML 媒體的最新文章展示了它能實現哪些功能。

  從 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. 圖形(一個概念性手持式計算機)
XML 問題: Web 已經不再僅僅是支持 2D 了

  查看原圖(大圖)

  清單 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" 
"/School/UploadFiles_7810/201103/20110327133902287.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. 理想實體
XML 問題: Web 已經不再僅僅是支持 2D 了

  查看原圖(大圖)

  清單 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 就可以為它構造最佳的基礎。

  本文示例源代碼或素材下載



 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved