X3DOM – A DOM-BASED HTML5 X3D INTEGRATION MODEL

X3DOM – A DOM-BASED HTML5 X3D INTEGRATION MODEL 講演者：黃信榮　　　　　　2011/01/04 Fraunhofer IGD Johannes Behr NewMediaYuppies GmbH Peter Eschler† Fraunhofer IGD/ TU Darmstadt Yvonne Jung‡ Fraunhofer IGD/ TU Darmstadt Michael Z¨ollner§

目錄 • 摘要 • 簡介與研究動機 • 3D於網路的發展趨勢 • X3DOM的架構 • 研究成果 • 結論與未來方向

摘要 • 本研究提出一可以直接整合X3D與HTML5的DOM-3DOM • 本研究提出一個X3D版本的DOM，並深入討論X3D與HTML5的整合問題。 • 如何讓瀏覽器可以不須額外安裝其他元件便可執行X3D

簡介與研究動機 • 2D Website →　3D Website • XHTML以及HTML5發展，帶動瀏覽器系統等的發展。更帶來多元的網路服務以及雲端運算的崛起。 • Case By Case →　大量的重覆載入，以及同一時間內只有單一的解決方案。 • 現今系統大多有各自的標準以及規範，故透過以一新X3D版本DOM來整合3D內容於網路上修改、創建和共享等方式。

3D於網路的發展趨勢 • Rendering with Plugins 所有透過額外元件的系統主要有兩大缺點： • 需額外安裝，有安全性及相容性問題。 • 必須要整合各元件之間的權限以及使其同步。

Flash and PaperVision Flash,1996年推出，目前廣泛用於製作動畫、廣告以及各種網頁元件。10版仍然只有支援2D圖像以及數學運算，並不支援原生3D。 PaperVision是建立在2D圖形技術上的3D模擬系統。

Silverlight Silverlight是微軟前端使用者介面技術Windows Presentation Foundation（WPF）的一個子集。 • Silverlight 1.0 • Silverlight 2 • Silverlight 3：支援3D顯示功能 • Silverlight 4 • Silverlight 5(2010/12/2發表)： • 使用GPU的支持對硬件解碼和H.264展現性能的提升。 • GPU API、在GPU上直接渲染、在IE 9上的硬件加速。

Java, Java3D, JOGL and JavaFX • 較Flash與Silverlight有較低安裝門檻 • Java3D採用VRML/X3D的設計 • 捨棄高階語言的Java3D library，改採用低階語言的OpenGL，稱為JOGL。 • JavaFX Script語言是Sun專門為「設計GUI」而設計出來的語言。

O3D 為一種圖形API，用於製作互動式3D網頁程式。 • 低層是用C/C++作為瀏覽器插件，並把圖形量化後交給OpenGL處理。 • 高層則是實現於JavaScript，並提供場景圖形。類似於OpenSG、Java3D 、C3DL等。

X3D X3D是一種三維圖像標記語言。是由 Web3D聯盟設計的，是 VRML 標準的最新的升級版本。 X3D 以 XML 格式為基礎開發，所以可以直接使用 XML DOM 、XML Schema 校驗等技術和相關的 XML 編輯工具。

X3D data-encodings and programming language bindings– DOM is just a recommendation.

MPEG-4 and MPEG-4 Part 11 MPEG-4是一套用於音訊、視訊資訊的壓縮編碼標準，由國際標準化組織（ISO）和國際電工委員會（IEC）下屬的「動態影像專家組」制定。 MPEG—4根據VRML開發了一種自己的二進制語言用來進行場景描述，這就是BIFS—BInary Format for Scenes（二進制場景格式）。MPEG—4的BIFS就是VRML交互機制在MPEG—4中應用的體現。

Collada 全名是「COLLAborative Design Activity」，可以用來建立3D互動程式的一個檔案交換格式。主要定義一個開放式的XML Schema標準。

Rendering without Plugins 常見的有： • 利用2D瀏覽器技術來模擬3D • 使用硬體解碼的方式來製作3D Web

CCS/SVG Rendering Solutions 目前CSS、CANVAS以及SVG並不支援3D。但隨著JavaScript的演進，人們開始透過DHTML來模擬。(例如SVG的VML 3D) 蘋果甚至更新了許多支援3D的CSS至Webkit，但這都只是在2D框架上運行3D。

Hardware Accelerated Rendering 本研究想要完成在常見的瀏覽器上能夠透過硬體加速來執行3D圖像。透過函式庫的開發(如C3DL、X3DomCanvas3D)來使得在瀏覽器加載更多且顯示更多複雜的數據與模型效率提升。但仍然受限於硬體效能，因為她們必須執行JavaScript與圖像相關演算法。

The HTML5 Promise HTML5規範已經明確利用X3D的3D場景的聲明 HTML5的定義中提到，X3D的資訊應包含在DOM之中，但並沒有明確定義其如何運行。主要是因為目前HTML5並沒有明確的標準，DOM在HTML5標準下3D Web所扮演的並不明確。

THE X3DOM ARCHITECTURE(1) • 用於整合HTML5與X3D，目標是支援HTML與X3D的數位內容。包含在一個具有命名空間的DOM 樹。 • 這個設計基礎建立在HTML5的規範已經使用了X3D的標準，並擬出一個架構提供兩者之間缺乏的溝通橋樑且深入探討。

X3DOM OVERVIEW SHOWING THE COMPONENTS OF THE PROPOSED INTEGRATION FRAMEWORK.

THE X3DOM ARCHITECTURE(2) • Connector 用來連接網路瀏覽器前端以及後端X3D的溝通機制。它應包含一個DOM/W3D調配器來支援不同的前端與後端。前端調配器須能直接直接讀取DOM tree 的資訊，而後端條配器須能直接讀取X3D tree 的資訊。 • Model Updates 在DOM tree任何更新，如創建，配置和變更到DOM元素，必須使用後端適配器反映到X3D的樹。 • Observer Responses 用於觀察DOM tree以及D3X tree的改變，並同時反應於另外一方。

THE X3DOM ARCHITECTURE(3) • Media streams • Media Downstream X3D的命名空間中的元素可以參考外部媒體元素，如圖片和電影的紋理和聲音。該 X3DOM架構必須能夠解決這些外部使用瀏覽器的URI / URL的串流機制。 • Media Upstream X3DOM架構必須能傳送一個要求給前端取得圖形內文，然後在同步更新上游的後端。由此所產生的圖像，包含顏色與透明度可以提供CSS更多元化的需求。

DOM INTEGRATION ASPECTS • X3D內容可以整合到XML以及XHTML任何命名空間之中，只缺乏一個渲染及執行的模式。本研究所提出的X3DOM則符合需求。 • 透過實際的的例子測試Firefox3發現我們需要明確的給出MINE類型來指示Firefox我們所給的是XHTML或者XML。

X3D Namespace in DOM Documents 在HTML底下我們可以<H1>、<P>等來定義命名空間，也可以使用<x3d>來定義一個命名空間，但如果要在同一個命名空間填入不同資訊則需在每一種資訊前面前墜x3d。為了擺脫這樣一個問題，我們可以使用一個默認的命名空間。但由於XML規範xmlns屬性，命名空間下的子類別則需要額外提出一個命名空間。

Naming and Identifying Nodes 雖然XHMTL使用“id”屬性來當做節點來詳細記錄id於DOM中，X3D的標準使用指定模組定義檔屬性。應考慮改變X3D的標識屬性並透過指定模組定義檔定義id。除了獨特的ID的元素，XHTML標準還定義了“類別”屬性。

研究成果 • 透過在Firefox以及Webkit上的測試以及評估，來開發可加載及擴展到不同的前端(瀏覽器)和後端(X3D)開放原始碼系統。 • 本研究得探討將有助於其他研究者評估以及模組化的概念。 • 本研究建構起DOM與X3D的橋梁，有助於人深入研究原生擴展或集成技術，並將其整合入系統之中。

結論和未來方向 結論 • 本研究所提出之模型只支援簡單的DOM節點輸入外，並不支援即時性的資料。 • 本研究定義了一個X3D的版本，該架構並不需要在特定的瀏覽器或者安裝特定額外元件。未來方向 • 將HTML5與X3D做更深入的整合，完善整個模型。 • 希望能在未來使X3D有如現在的SVG一樣被廣泛使用。

X3DOM – A DOM-BASED HTML5 X3D INTEGRATION MODEL