X3DOM – A DOM-BASED HTML5 X3D INTEGRATION MODEL

X3DOM – A DOM-BASED HTML5 X3D INTEGRATION MODEL

Fraunhofer IGD Johannes Behr

NewMediaYuppies GmbH Peter Eschler†

Fraunhofer IGD/ TU Darmstadt Yvonne Jung‡

Fraunhofer IGD/ TU Darmstadt Michael Z¨ollner§

1講演者：黃信榮　　　　　　 2011/01/04

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

2

摘要本研究提出一可以直接整合 X3D 與 HTML5 的

DOM-3DOM

本研究提出一個 X3D 版本的 DOM ，並深入討論X3D 與 HTML5 的整合問題。

如何讓瀏覽器可以不須額外安裝其他元件便可執行X3D

3

簡介與研究動機

2D Website → 　 3D Website

XHTML 以及 HTML5 發展，帶動瀏覽器系統等的發展。更帶來多元的網路服務以及雲端運算的崛起。

Case By Case → 　大量的重覆載入，以及同一時間內只有單一的解決方案。

現今系統大多有各自的標準以及規範，故透過以一新X3D 版本 DOM 來整合 3D 內容於網路上修改、創建和共享等方式。 4

3D於網路的發展趨勢

Rendering with Plugins

所有透過額外元件的系統主要有兩大缺點：

1.需額外安裝，有安全性及相容性問題。

2.必須要整合各元件之間的權限以及使其同步。

5

Flash and PaperVisionFlash,1996 年推出，目前廣泛用於製作動畫、廣告以及各種網頁元件。 10 版仍然只有支援 2D 圖像以及數學運算，並不支援原生 3D 。

PaperVision 是建立在 2D 圖形技術上的 3D 模擬系統。

6

SilverlightSilverlight 是微軟前端使用者介面技術 Windows Presentation Foundation （ WPF ）的一個子集。

Silverlight 1.0 Silverlight 2 Silverlight 3：支援 3D 顯示功能 Silverlight 4 Silverlight 5(2010/12/2發表 )：

1. 使用 GPU 的支持對硬件解碼和 H.264 展現性能的提升。2. GPU API 、在 GPU 上直接渲染、在 IE 9 上的硬件加速。

7

Java, Java3D, JOGL and JavaFX

較 Flash 與 Silverlight 有較低安裝門檻

Java3D 採用 VRML/X3D 的設計

捨棄高階語言的 Java3D library ，改採用低階語言的 OpenGL ，稱為 JOGL 。

JavaFX Script 語言是 Sun 專門為「設計 GUI 」而設計出來的語言。

8

O3D

為一種圖形 API ，用於製作互動式 3D 網頁程式。

低層是用 C/C++ 作為瀏覽器插件，並把圖形量化後交給 OpenGL 處理。

高層則是實現於 JavaScript ，並提供場景圖形。類似於 OpenSG 、 Java3D 、 C3DL 等。

9

X3D

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

10

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

11

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中應用的體現。

12

Collada全名是「 COLLAborative Design Activity 」，

可以用來建立 3D 互動程式的一個檔案交換格式。主要定義一個開放式的 XML Schema 標準。

13

Rendering without Plugins

常見的有：

1. 利用 2D瀏覽器技術來模擬 3D

2. 使用硬體解碼的方式來製作 3D Web

14

CCS/SVG Rendering Solutions

目前 CSS 、 CANVAS 以及 SVG 並不支援 3D 。但隨著 JavaScript 的演進，人們開始透過 DHTML 來模擬。 (例如 SVG 的 VML 3D)

蘋果甚至更新了許多支援 3D 的 CSS 至

Webkit ，但這都只是在 2D框架上運行 3D 。

15

Hardware Accelerated Rendering

本研究想要完成在常見的瀏覽器上能夠透過硬體加速來執行 3D 圖像。

透過函式庫的開發 ( 如C3DL 、 X3DomCanvas3D) 來使得在瀏覽器加載更多且顯示更多複雜的數據與模型效率提升。但仍然受限於硬體效能，因為她們必須執行 JavaScript與圖像相關演算法。

16

The HTML5 Promise

HTML5 規範已經明確利用 X3D 的 3D 場景的聲明

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

17

THE X3DOM ARCHITECTURE(1)

用於整合 HTML5 與 X3D ，目標是支援 HTML 與

X3D 的數位內容。包含在一個具有命名空間的 DOM

樹。

這個設計基礎建立在 HTML5 的規範已經使用了 X3D

的標準，並擬出一個架構提供兩者之間缺乏的溝通橋樑且深入探討。

18

X3DOM OVERVIEW SHOWING THE COMPONENTS OF THE PROPOSED INTEGRATION FRAMEWORK.

19


Connector用來連接網路瀏覽器前端以及後端 X3D 的溝通機制。它應包含一個 DOM/W3D調配器來支援不同的前端與後端。前端調配器須能直接直接讀取 DOM tree 的資訊，而後端條配器須能直接讀取 X3D tree 的資訊。

Model Updates在 DOM tree任何更新，如創建，配置和變更到DOM 元素，必須使用後端適配器反映到 X3D 的樹。

Observer Responses用於觀察 DOM tree 以及 D3X tree 的改變，並同時反應於另外一方。 20


Media streams Media Downstream

X3D 的命名空間中的元素可以參考外部媒體元素，如圖片和電影的紋理和聲音。該　 X3DOM架構必須能夠解決這些外部使用瀏覽器的 URI / URL 的串流機制。

Media Upstream

X3DOM架構必須能傳送一個要求給前端取得圖形內文，然後在同步更新上游的後端。由此所產生的圖像，包含顏色與透明度可以提供 CSS 更多元化的需求。

21

DOM INTEGRATION ASPECTS

X3D 內容可以整合到 XML 以及 XHTML任何命名空間之中，只缺乏一個渲染及執行的模式。本研究所提出的 X3DOM 則符合需求。

透過實際的的例子測試 Firefox3 發現我們需要明確的給出 MINE 類型來指示 Firefox我們所給的是XHTML或者 XML 。

22

X3D Namespace in DOM Documents

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

23

Naming and Identifying Nodes

雖然　 XHMTL 使用“ id” 屬性來當做節點來詳細記錄 id 於 DOM中， X3D 的標準使用指定模組定義檔屬性。應考慮改變　 X3D 的標識屬性並透過指定模組定義檔定義 id 。

除了獨特的 ID 的元素， XHTML 標準還定義了“類別”屬性。

24

研究成果透過在 Firefox 以及 Webkit 上的測試以及評估，來開發可加載及擴展到不同的前端 ( 瀏覽器 ) 和後端(X3D) 開放原始碼系統。

本研究得探討將有助於其他研究者評估以及模組化的概念。

本研究建構起 DOM 與 X3D 的橋梁，有助於人深入研究原生擴展或集成技術，並將其整合入系統之中。

25

結論和未來方向

結論本研究所提出之模型只支援簡單的 DOM節點輸入外，並不支援即時性的資料。

本研究定義了一個 X3D 的版本，該架構並不需要在特定的瀏覽器或者安裝特定額外元件。未來方向

將 HTML5 與 X3D做更深入的整合，完善整個模型。

希望能在未來使 X3D 有如現在的 SVG 一樣被廣泛使用。 26