X3D與HTML5
目標: X3D 與 HTML5
目前X3D工作組
為了能將X3D與HTML整合得最好,加入了HTML工作組。
該項努力對Web3D – 事實上對所有3D圖形 – 具有重要戰略性意義,因為X3D是各種模型的資料交換格式。
我們考慮了在HTML頁面中顯示X3D場景的三種基本途徑。
- (外部引用) HTML頁面包含一個元素標籤 – 引用.x3d場景,通過X3D外掛來實現。在頁面內可以使用DOM事件來傳遞資料。
- (X3D作為HTML中的XML元素) HTML頁面直接包含X3D原始碼,很可能帶有XML名空間字首,大致可以通過X3D外掛或瀏覽器本身來實現。
- (API訪問方式) HTML頁面包含某種形式的canvas
(或者可能為Canvas3D
)元素,允許對頁面進行程式設計式訪問,以便X3D場景訪問介面(SAI)可以繪製點陣圖
待續。。。
Variations on these approaches are considered as part of X3D and HTML5 examples
.
Important new work includes the X3DOM suite
by Fraunhofer, which shows native X3D within an HTML page.
Our
X3D and HTML5 Summary
slideset was presented at the
HTML5 Working Group sessions
Friday 6 November 2009
in Mountain View
during the
W3C Technical Plenary and Advisory Committee (TPAC)
meeting.
As a result we are now actively working on showing X3D as XML in HTML
.
HTML 5
The HTML working group
page states:
What is HTML? HTML is the publishing language of the World Wide Web.
The latest editor`s draft Hypertext Markup Language (HTML) recommendation states:
HTML 5
W3C Working Draft
A vocabulary and associated APIs for HTML and XHTML
13.2 Declarative 3D scenes
Embedding 3D imagery into XHTML documents is the domain of X3D,
or technologies based on X3D that are namespace-aware.
4.8.5 The object element
The object element can represent an external resource, which, depending on
the type of the resource, will either be treated as an image, as a nested
browsing context, or as an external resource to be processed by a plugin.
4.8.6 The param element
The param element defines parameters for plugins invoked by object elements.
Technical Tasks
We are working on the following tasks.
- Ensure that all HTML5 questions and issues relative to X3D are properly considered and answered.
- Document how native X3D in .xml encoding can be best be
embedded inside an HTML5 document, typically in a namespace-aware
fashion - Demonstrate X3D+HTML5 examples on the Web3D Consortium
website - Examine how X3D pertains to related HTML5 tags (such as object and canvas) that are used for plugin-type content
- Track MIME type issues
- Examine overall interoperability issues: combined X3D and HTML content with one floating over the other
- X3D scene with transparent background floating over HTML document or desktop
- HTML text overlay laid out over an X3D scene as help
- Identify API issues of mutual interest (such as DOM, Ajax and XHR) for further developmental work
- Consider direct integration of Scalable Vector Graphics (SVG) images as a supported format for X3D ImageTexture node
Work Support
- Maintain this X3D and HTML5 wiki page to track issues and progress
- Identify people in HTML5 working group who want to collaborate with us on these issues
- Report regularly on efforts to x3d@web3d.org mailing list
and in our every-other-week X3D working group teleconferences - Discussions to occur on the x3d@web3d.org mailing list
and public-html@w3.org mailing list - Other tasks and efforts as needed
Participation
Relevant HTML5 and W3C information:
- HTML Working Group
especially Membership and Participation - World Wide Web Consortium (W3C)
- W3C Process Document
The following individuals have volunteered to serve as X3D Working Group representatives in the HTML5 Working Group.
- Johannes Behr, Instant Reality
, Fraunhofer Research, Darmstadt Germany - Don Brutzman
, Naval Postgraduate School (Web3D-W3C liaison and W3C Advisory Committee representative), Monterey California USA - John Stewart, FreeWrl
, Communications Research Center (CRC) Canada - Joe Williams, HyperMultiMedia
, Santa Rosa California USA
Any other Web3D Consortium
members who are interested in serving as one of our X3D Working Group
representatives is asked to review the HTML working group membership
materials, notify the X3D working group that you are interested, and
describe what your goals will be.
Meetings
Our weekly X3D and HTML5 teleconference is usually 0800-0900 (pacific time) each Tuesday.
Designated members can participate Web3D HTML5 teleconference call.
Annotated References
X3D and HTML4
- HTML Object Tag for X3D
shows how to place X3D objects within an HTML page - newHtmlPageWithX3dObject.html
is an example HTML scene with X3D object tag to copy, edit and reuse. - X3D Abstract Specification
- X3D Scene Access Interface (SAI)
Edition 2- 6.3.13 importDocument
service is a utility request to import a W3C DOM document or document fragment and convert it to an X3D scene.
- 6.3.13 importDocument
HTML4 and XHTML
HTML5
- HTML Design Principles
- 4.8 Embedded content
- 4.8.1 The figure element
represents some flow content, optionally with a caption, which can be
moved away from the main flow of the document without affecting the
document`s meaning. - 4.8.2 The img element
represents an image. - 4.8.3 The iframe element
represents a nested browsing context. - 4.8.4 The embed element
represents an integration point for an external (typically non-HTML) application or interactive content. (See HTML issue embed element should be deprecated
) - 4.8.5 The object element
can represent an external resource, which, depending on the type of the
resource, will either be treated as an image, as a nested browsing
context, or as an external resource to be processed by a plugin. - 4.8.6 The param element
defines parameters for plugins invoked by object elements. It does not represent anything on its own. - 4.8.7 The video element
represents a video or movie. - 4.8.8 The audio element
is a media element whose media data is ostensibly audio data. - 4.8.9 The source element
allows authors to specify multiple media resources for media elements. It does not represent anything on its own. - 4.8.10 Media elements
are used to present audio data, or video and audio data, to the user. - 4.8.11 The canvas element
represents a resolution-dependent bitmap canvas, which can be used for
rendering graphs, game graphics, or other visual images on the fly. - 4.8.12 The map element
, in conjunction with any area element descendants, defines an image map. The element represents its children. - 4.8.13 The area element
represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map. - 4.8.14 Image maps
allows geometric areas on an image to be associated with hyperlinks. - 4.8.15 MathML
from the MathML namespace
falls into the embedded content category for the purposes of the content models in this specification. - 4.8.16 SVG
from the SVG namespace
falls into the embedded content category for the purposes of the content models in this specification. - 4.8.17 Dimension attributes
- 4.8.1 The figure element
Canvas for 2D and 3D
- Canvas 2D API 1.0 Specification
W3C Editor`s Draft highlights SVG goals and approach - Khronos Canvas3D
press release from SIGGRAPH 2009 about working group efforts for Javascript bindings to OpenGL ES - Mozilla Canvas:3D
proposal - Firefox Canvas3D
is a prominent possible approach - Canvas 3D Rendering Demo
appears to show another way to do things - Java3D Canvas3D
is an established API, though not directly related to HTML
X3D and HTML5 Examples
The
X3D and HTML5 examples
page shows a set of examples ranging from simple to sophisticated.
API details under discussion
We have discussed Johannes` message of 25 March 2009 + responses
(Subject: Re: Khronos Press Releases etc.) that included an
X3DOM-connector.pdf diagram regarding how X3D might work with DOM, HTML
etc. Also discussed the thread on Khronos` presumed upcoming work on
Canvas3D element, and past work on Ajax3D.
These and other API topics are all technically related, and of interest, but have varying degrees of maturity.
The primary objective of the current effort is to support X3D
and HTML5. Further work on DOM and other APIs is likely to evolve and
spin off from this central effort.
X3DOM proposal
Basics
The object element represents external resources like pdf-documents,
movies or x3d-worlds. This plugin model works nicely for isolated
content and applications which are unrelated to the surrounding
xhtml-document. If the web-application developer would like to access
and manipulate the object content he or she has to deal with object or
plugin specific interfaces. e.g. X3D browser should provide a Scene
Access Interface (SAI).
The X3DOM model tries to ease the development of applications
by not providing a special interface but following and respecting some
basic xhtml rules:
1) Declarative XML content is part of the DOM tree; Embedded with a separate xml namespace
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<body>
<x3d:x3d xmlns:x3d="http://www.web3d.org/specifications/x3d-3.0.xsd
">
<x3d:Scene>
<x3d:Shape><x3d:Box x3d:size="4 4 4" /></x3d:Shape>
</x3d:Scene>
</x3d:x3d>
</body>
</html>
2) The DOM elements can be used to read and manipulate the content
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN","http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<body>
<x3d xmlns=
"http://www.web3d.org/specifications/x3d-3.0.xsd
">
<Scene>
<Shape><Box size="4 4 4" /></Shape>
</Scene>
</x3d>
<script type="text/javascript">
// The namespace URIs
var xhtml_ns = "http://www.w3.org/1999/xhtml
";
var x3d_ns =
"http://www.web3d.org/specifications/x3d-3.0.xsd
";
// Get elements using namespaces
var h1 =
document.getElementsByTagNameNS(xhtml_ns, "h1");
var box =
document.getElementsByTagNameNS(x3d_ns, "Box")[0];
// Edit an attribute of the <Box /> element
alert(box.getAttributeNS(null, "size"));
box.setAttributeNS(null, "size", "2 2 2");
alert(box.getAttributeNS(null, "size"));
</script>
</body>
3) Events can be used to interact with the content
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN", "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="http://www.w3.org/1999/xhtml
">
<body>
<x3d xmlns=
"http://www.web3d.org/specifications/x3d-3.0.xsd
">
<Scene>
<Transform>
<Shape><Box size="4 4 4" />
</Shape>
<TouchSensor id="ts" DEF="ts" />
</Transform>
</Scene>
</x3d>
<script type="text/javascript">
// The namespace URIs
var xhtml_ns = "http://www.w3.org/1999/xhtml
";
var x3d_ns = "http://www.web3d.org/specifications/x3d-3.0.xsd
";
// Get elements using namespaces
var h1 = document.getElementsByTagNameNS(xhtml_ns, "h1");
var x3d = document.getElementsByTagNameNS(x3d_ns, "x3d")[0];
var ts = x3d.getElementsByTagName("TouchSensor")[0];
alert("ts=" + ts);
ts.addEventListener("touchTime", function() {
alert("clicked");
}, false);
</script>
</body>
</html>
4) The position of the content in the document defines the position of the visible elements
The X3D element should also define the position where the content will be integrated into the html page.
Simular how e.g. SVG or canvas works. A decoupled mechanisms will confuse application developer
Implementation
The X3DOM model should be implemented as native browser feature,
simular to SVG, in the future. Current test-implementation utilize the
object/SAI model internally. In addition test-versions based on the
Canvas3D layer exist. Both need a browser-extension right now to
synchronize and update the DOM changes
Further Information
More information can be found in the X3DOM paper at the Web3D 2009 symposium. The slides
and paper
are available as preprint.
Future work
Some topics might become relevant once HTML5 is established as a
formal W3C Recommendation. These are not part of our current planned
work.
- Publishing X3D Specifications
in HTML5 - Other topics as needed
相關文章
- HTML5與Web前端HTMLWeb前端
- HTML5系列:HTML5與HTML4的區別HTML
- HTML5 drag & drop 拖拽與拖放HTML
- HTML5接入與OC互動HTML
- AMD 處理器路線圖曝光,銳龍 7000 X3D 系列將至3D
- HTML5 SVG與Canvas的區別HTMLSVGCanvas
- 13 Android與HTML5互動AndroidHTML
- HTML5 window.postMessage 與跨域HTML跨域
- Html5與本地App資料整理分析HTMLAPP
- html5 canvas學習--操作與使用影象HTMLCanvas
- HTLM4與HTML5的區別HTML
- HTML5表單新增元素與屬性HTML
- [TEAP早期試讀]HTML5與JSONHTMLJSON
- HTML5在路上 圖靈與你同行HTML圖靈
- HTML5前瞻與心得:技術與藝術的糾纏。HTML
- HTML5與WebGL程式設計(1):介紹HTMLWeb程式設計
- HTML5表單新增元素與屬性 (續)HTML
- HTML5與CSS3知識點總結HTMLCSSS3
- HTML5與WebGL程式設計(2):Three.jsHTMLWeb程式設計JS
- 【讀書筆記】XHTML與HTML5的差異筆記HTML
- html5之div,article,section區別與應用HTML
- 《HTML5與CSS3實戰指南》——1.3我們為什麼應關注HTML5HTMLCSSS3
- 《HTML5遊戲程式設計核心技術與實戰》一第1章 遊戲和HTML5初探HTML遊戲程式設計
- HTML5 移動端自適應方案與踩坑HTML
- HTML5本地儲存localStorage與sessionStorage詳解HTMLSession
- HTML5離線應用與客戶端儲存HTML客戶端
- HTML5中與頁面顯示相關的APIHTMLAPI
- 使用jQueryMobile與HTML5開發WebApp推薦文章jQueryHTMLWebAPP
- HTML5系列:HTML5表單HTML
- HTML5系列:HTML5繪圖HTML繪圖
- HTML5系列:HTML5結構HTML
- 《HTML5與CSS3權威指南(第3版·上冊)》——第3章HTML5的結構HTMLCSSS3
- 遊戲玩家的春天!反殺13代酷睿!AMD 明年初 CES 釋出銳龍 7000 X3D遊戲3D
- HTML5與CSS3權威指南筆記案例1HTMLCSSS3筆記
- HTML5中的aria與role,WAI-ARIA無障礙HTMLAI
- 《HTML5觸控介面設計與開發》——2.6 總結HTML
- HTML5、Web引擎與跨平臺移動App開發HTMLWebAPP
- HTML5已死;HTML5長生!HTML