HTML5 知识库
X3D 与 HTML5
阅读:821次
评论:0条
更新时间:2011-07-16
<h1> <span class="mw-headline">目标: X3D 与 HTML5</span>
</h1>
<p>目前<a href="http://www.web3d.org/x3d">X3D工作组</a>
为了能将X3D与HTML整合得最好,加入了HTML工作组。</p>
<p>该项努力对Web3D - 事实上对所有3D图形 - 具有重要战略性意义,因为X3D是各种模型的数据交换格式。</p>
<p>我们考虑了在HTML页面中显示X3D场景的三种基本途径。</p>
<p></p>
<ul>
<li> (外部引用) HTML页面包含一个元素标签 - 引用.x3d场景,通过X3D插件来实现。在页面内可以使用DOM事件来传递数据。</li>
<li> (X3D作为HTML中的XML元素) HTML页面直接包含X3D源码,很可能带有XML名空间前缀,大致可以通过X3D插件或浏览器本身来实现。</li>
<li> (API访问方式) HTML页面包含某种形式的<a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-canvas-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-canvas-element">canvas</a>
(或者可能为 <code>Canvas3D</code>
)元素,允许对页面进行编程式访问,以便X3D场景访问接口(SAI)可以绘制位图</li>
</ul>
<p>待续。。。</p>
<p>Variations on these approaches are considered as part of <a title="X3D and HTML5 examples" href="http://www.web3d.org/x3d/wiki/index.php/X3D_and_HTML5_examples">X3D and HTML5 examples</a>
.
</p>
<p>Important new work includes the <a class="external text" title="http://www.x3DOM.org" rel="nofollow" href="http://www.x3dom.org/">X3DOM suite</a>
by Fraunhofer, which shows native X3D within an HTML page.
</p>
<p>Our
<a title="X3D and HTML5 Summary" href="http://www.web3d.org/x3d/wiki/index.php/X3D_and_HTML5_Summary">X3D and HTML5 Summary</a>
slideset was presented at the
HTML5 Working Group sessions
Friday 6 November 2009
in Mountain View
during the
<a class="external text" title="http://www.w3.org/2009/11/TPAC/" rel="nofollow" href="http://www.w3.org/2009/11/TPAC/">W3C Technical Plenary and Advisory Committee (TPAC)</a>
meeting.
As a result we are now actively working on showing <a class="external text" title="http://www.w3.org/Bugs/Public/show_bug.cgi?id=8238" rel="nofollow" href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=8238">X3D as XML in HTML</a>
.
</p>
<p>
<a name="HTML_5"></a>
</p>
<h1> <span class="mw-headline">HTML 5</span>
</h1>
<p>The <a class="external text" title="http://www.w3.org/html/wg" rel="nofollow" href="http://www.w3.org/html/wg">HTML working group</a>
page states:
</p>
<pre> What is HTML? HTML is the publishing language of the World Wide Web.<br><br><p>The latest editor's draft Hypertext Markup Language (HTML) recommendation states:
</p>
<pre> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html">HTML 5</a>
<br>
W3C Working Draft<br><br>
A vocabulary and associated APIs for HTML and XHTML<br><br><pre> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#declarative-3d-scenes" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#declarative-3d-scenes">13.2 Declarative 3D scenes</a>
<br><br><br>
Embedding 3D imagery into XHTML documents is the domain of X3D,<br><br>
or technologies based on X3D that are namespace-aware.<br><br><pre> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-object-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-object-element">4.8.5 The object element</a>
<br><br><br>
The object element can represent an external resource, which, depending on<br><br>
the type of the resource, will either be treated as an image, as a nested<br><br>
browsing context, or as an external resource to be processed by a plugin.<br><br><pre> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-param-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-param-element">4.8.6 The param element</a>
<br><br><br>
The param element defines parameters for plugins invoked by object elements.<br><br><p>
<a name="Technical_Tasks"></a>
</p>
<h1> <span class="mw-headline">Technical Tasks</span>
</h1>
<p>We are working on the following tasks.
</p>
</pre></pre></pre></pre></pre>
<ul>
<li> Ensure that all HTML5 questions and issues relative to X3D are properly considered and answered.
</li>
<li> Document how native X3D in .xml encoding can be best be
embedded inside an HTML5 document, typically in a namespace-aware
fashion
</li>
<li> Demonstrate X3D+HTML5 examples on the <a class="external text" title="http://www.web3D.org" rel="nofollow" href="http://www.web3d.org/">Web3D Consortium</a>
website
</li>
<li> Examine how X3D pertains to related HTML5 tags (such as object and canvas) that are used for plugin-type content
</li>
<li> Track MIME type issues
</li>
<li> Examine overall interoperability issues: combined X3D and HTML content with one floating over the other
<ul>
<li> X3D scene with transparent background floating over HTML document or desktop
</li>
<li> HTML text overlay laid out over an X3D scene as help
</li>
</ul>
</li>
<li> Identify API issues of mutual interest (such as DOM, Ajax and XHR) for further developmental work
</li>
<li> Consider direct integration of Scalable Vector Graphics (SVG) images as a supported format for X3D ImageTexture node
</li>
</ul>
<p>
<a name="Work_Support"></a>
</p>
<h1> <span class="mw-headline">Work Support</span>
</h1>
<ul>
<li> Maintain this X3D and HTML5 wiki page to track issues and progress
</li>
<li> Identify people in HTML5 working group who want to collaborate with us on these issues
</li>
<li> Report regularly on efforts to <a class="external text" title="mailto:x3d@web3d.org" rel="nofollow" href="mailto:x3d@web3d.org">x3d@web3d.org mailing list</a>
and in our every-other-week X3D working group teleconferences
</li>
<li> Discussions to occur on the <a class="external text" title="mailto:x3d@web3d.org" rel="nofollow" href="mailto:x3d@web3d.org">x3d@web3d.org mailing list</a>
and <a class="external text" title="mailto:public-html@w3.org" rel="nofollow" href="mailto:public-html@w3.org">public-html@w3.org mailing list</a>
</li>
<li> Other tasks and efforts as needed
</li>
</ul>
<p>
<a name="Participation"></a>
</p>
<h1> <span class="mw-headline">Participation</span>
</h1>
<p>Relevant HTML5 and W3C information:
</p>
<ul>
<li> <a class="external text" title="http://www.w3.org/html/wg" rel="nofollow" href="http://www.w3.org/html/wg">HTML Working Group</a>
especially <a class="external text" title="http://www.w3.org/html/wg/#who" rel="nofollow" href="http://www.w3.org/html/wg/#who">Membership and Participation</a>
</li>
<li> <a class="external text" title="http://www.w3.org" rel="nofollow" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>
</li>
<li> <a class="external text" title="http://www.w3.org/Consortium/Process" rel="nofollow" href="http://www.w3.org/Consortium/Process">W3C Process Document</a>
</li>
</ul>
<p>The following individuals have volunteered to serve as X3D Working Group representatives in the HTML5 Working Group.
</p>
<ul>
<li> Johannes Behr, <a class="external text" title="http://instantreality.org" rel="nofollow" href="http://instantreality.org/">Instant Reality</a>
, Fraunhofer Research, Darmstadt Germany
</li>
<li> <a class="external text" title="http://web.nps.navy.mil/~brutzman" rel="nofollow" href="http://web.nps.navy.mil/%7Ebrutzman">Don Brutzman</a>
, Naval Postgraduate School (Web3D-W3C liaison and W3C Advisory Committee representative), Monterey California USA
</li>
<li> John Stewart, <a class="external text" title="http://www.crc.ca/FreeWRL" rel="nofollow" href="http://www.crc.ca/FreeWRL">FreeWrl</a>
, Communications Research Center (CRC) Canada
</li>
<li> Joe Williams, <a class="external text" title="http://hypermultimedia.com" rel="nofollow" href="http://hypermultimedia.com/">HyperMultiMedia</a>
, Santa Rosa California USA
</li>
</ul>
<p>Any other <a class="external text" title="http://www.web3D.org" rel="nofollow" href="http://www.web3d.org/">Web3D Consortium</a>
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.
</p>
<p>
<a name="Meetings"></a>
</p>
<h1> <span class="mw-headline">Meetings</span>
</h1>
<p>Our weekly X3D and HTML5 teleconference is usually 0800-0900 (pacific time) each Tuesday.
</p>
<p>Designated members can participate Web3D HTML5 teleconference call.
</p>
<p>
<a name="Annotated_References"></a>
</p>
<h1> <span class="mw-headline">Annotated References</span>
</h1>
<p>X3D and HTML4
</p>
<ul>
<li> <a class="external text" title="http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html" rel="nofollow" href="http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html">HTML Object Tag for X3D</a>
shows how to place X3D objects within an HTML page
</li>
<li> <a class="external text" title="http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html" rel="nofollow" href="http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html">newHtmlPageWithX3dObject.html</a>
is an example HTML scene with X3D object tag to copy, edit and reuse.
</li>
<li> <a class="external text" title="http://www.web3d.org/x3d/specifications/ISO-IEC-19775-1.2-X3D-AbstractSpecification/Part01/X3D.html" rel="nofollow" href="http://www.web3d.org/x3d/specifications/ISO-IEC-19775-1.2-X3D-AbstractSpecification/Part01/X3D.html">X3D Abstract Specification</a>
</li>
<li> <a class="external text" title="http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/X3D_SAI.html" rel="nofollow" href="http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/X3D_SAI.html">X3D Scene Access Interface (SAI)</a>
Edition 2
<ul>
<li> <a class="external text" title="http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/servRef.html#importDocument" rel="nofollow" href="http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/servRef.html#importDocument">6.3.13 importDocument</a>
service is a utility request to import a W3C DOM document or document fragment and convert it to an X3D scene.
</li>
</ul>
</li>
</ul>
<p>HTML4 and XHTML
</p>
<ul>
<li> <a class="external text" title="http://www.w3.org/TR/html4" rel="nofollow" href="http://www.w3.org/TR/html4">HTML 4.01</a>
HyperText Markup Language (HTML)
</li>
<li> <a class="external text" title="http://www.w3.org/TR/xhtml1/" rel="nofollow" href="http://www.w3.org/TR/xhtml1/">XHTML</a>
Extensible HyperText Markup Language (XHTML)
</li>
</ul>
<p>HTML5
</p>
<ul>
<li> <a class="external text" title="http://www.w3.org/TR/html-design-principles" rel="nofollow" href="http://www.w3.org/TR/html-design-principles">HTML Design Principles</a>
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#embedded-content-0" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#embedded-content-0">4.8 Embedded content</a>
<ul>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-figure-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-figure-element">4.8.1 The figure element</a>
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.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-img-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-img-element">4.8.2 The img element</a>
represents an image.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-iframe-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-iframe-element">4.8.3 The iframe element</a>
represents a nested browsing context.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-embed-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-embed-element">4.8.4 The embed element</a>
represents an integration point for an external (typically non-HTML) application or interactive content. (See HTML issue <a class="external text" title="http://www.w3.org/Bugs/Public/show_bug.cgi?id=7075" rel="nofollow" href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=7075">embed element should be deprecated</a>
)
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-object-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-object-element">4.8.5 The object element</a>
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.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-param-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-param-element">4.8.6 The param element</a>
defines parameters for plugins invoked by object elements. It does not represent anything on its own.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#video" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#video">4.8.7 The video element</a>
represents a video or movie.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#audio" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#audio">4.8.8 The audio element</a>
is a media element whose media data is ostensibly audio data.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#source" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#source">4.8.9 The source element</a>
allows authors to specify multiple media resources for media elements. It does not represent anything on its own.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#media-elements" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#media-elements">4.8.10 Media elements</a>
are used to present audio data, or video and audio data, to the user.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-canvas-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-canvas-element">4.8.11 The canvas element</a>
represents a resolution-dependent bitmap canvas, which can be used for
rendering graphs, game graphics, or other visual images on the fly.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-map-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-map-element">4.8.12 The map element</a>
, in conjunction with any area element descendants, defines an image map. The element represents its children.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-area-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-area-element">4.8.13 The area element</a>
represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-image-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-image-element">4.8.14 Image maps</a>
allows geometric areas on an image to be associated with hyperlinks.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#mathml" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#mathml">4.8.15 MathML</a>
from the <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#mathml-namespace" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#mathml-namespace">MathML namespace</a>
falls into the embedded content category for the purposes of the content models in this specification.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#svg" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#svg">4.8.16 SVG</a>
from the <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#svg-namespace" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#svg-namespace">SVG namespace</a>
falls into the embedded content category for the purposes of the content models in this specification.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#dimension-attributes" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#dimension-attributes">4.8.17 Dimension attributes</a>
</li>
</ul>
</li>
</ul>
<p>Canvas for 2D and 3D
</p>
<ul>
<li> <a class="external text" title="http://dev.w3.org/html5/canvas-api/canvas-2d-api.html" rel="nofollow" href="http://dev.w3.org/html5/canvas-api/canvas-2d-api.html">Canvas 2D API 1.0 Specification</a>
W3C Editor's Draft highlights SVG goals and approach
</li>
<li> <a class="external text" title="http://www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet" rel="nofollow" href="http://www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet">Khronos Canvas3D</a>
press release from SIGGRAPH 2009 about working group efforts for Javascript bindings to OpenGL ES
</li>
<li> <a class="external text" title="https://wiki.mozilla.org/Canvas:3D" rel="nofollow" href="https://wiki.mozilla.org/Canvas:3D">Mozilla Canvas:3D</a>
proposal
</li>
<li> <a class="external text" title="http://blog.vlad1.com/canvas-3d" rel="nofollow" href="http://blog.vlad1.com/canvas-3d">Firefox Canvas3D</a>
is a prominent possible approach
</li>
<li> <a class="external text" title="http://blogoscoped.com/archive/2009-03-26-n50.html" rel="nofollow" href="http://blogoscoped.com/archive/2009-03-26-n50.html">Canvas 3D Rendering Demo</a>
appears to show another way to do things
</li>
<li> <a class="external text" title="http://java.sun.com/javase/technologies/desktop/java3d/forDevelopers/J3D_1_2_API/j3dapi/javax/media/j3d/Canvas3D.html" rel="nofollow" href="http://java.sun.com/javase/technologies/desktop/java3d/forDevelopers/J3D_1_2_API/j3dapi/javax/media/j3d/Canvas3D.html">Java3D Canvas3D</a>
is an established API, though not directly related to HTML
</li>
</ul>
<p>
<a name="X3D_and_HTML5_Examples"></a>
</p>
<h1> <span class="mw-headline">X3D and HTML5 Examples</span>
</h1>
<p>The
<a title="X3D and HTML5 examples" href="http://www.web3d.org/x3d/wiki/index.php/X3D_and_HTML5_examples">X3D and HTML5 examples</a>
page shows a set of examples ranging from simple to sophisticated.
</p>
<p>
<a name="API_details_under_discussion"></a>
</p>
<h1> <span class="mw-headline">API details under discussion</span>
</h1>
<p>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.
</p>
<p>These and other API topics are all technically related, and of interest, but have varying degrees of maturity.
</p>
<p>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.
</p>
<p>
<a name="X3DOM_proposal"></a>
</p>
<h2> <span class="mw-headline">X3DOM proposal</span>
</h2>
<p>
<a name="Basics"></a>
</p>
<h3> <span class="mw-headline">Basics</span>
</h3>
<p>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). </p>
<p>The X3DOM model tries to ease the development of applications
by not providing a special interface but following and respecting some
basic xhtml rules:
</p>
<p>1) Declarative XML content is part of the DOM tree; Embedded with a separate xml namespace
</p>
<pre> <?xml version="1.0" encoding="utf-8"?><br><br>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a class="external free" title="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>
<br>
"><br><br>
<html xmlns="<a class="external free" title="http://www.w3.org/1999/xhtml" rel="nofollow" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>
<br>
"><br><br>
<body><br><br>
<x3d:x3d xmlns:x3d="<a class="external free" title="http://www.web3d.org/specifications/x3d-3.0.xsd" rel="nofollow" href="http://www.web3d.org/specifications/x3d-3.0.xsd">http://www.web3d.org/specifications/x3d-3.0.xsd</a>
<br>
"><br><br>
<x3d:Scene><br><br>
<x3d:Shape><x3d:Box x3d:size="4 4 4" /></x3d:Shape><br><br>
</x3d:Scene> <br><br>
</x3d:x3d><br><br>
</body><br><br>
</html><br><br><p>2) The DOM elements can be used to read and manipulate the content
</p>
<pre> <?xml version="1.0" encoding="utf-8"?><br><br>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN","<a class="external free" title="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>
<br>
"><br><br>
<html xmlns="<a class="external free" title="http://www.w3.org/1999/xhtml" rel="nofollow" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>
<br>
"><br><br>
<body><br><br>
<x3d xmlns=<br><br>
"<a class="external free" title="http://www.web3d.org/specifications/x3d-3.0.xsd" rel="nofollow" href="http://www.web3d.org/specifications/x3d-3.0.xsd">http://www.web3d.org/specifications/x3d-3.0.xsd</a>
<br>
"><br><br>
<Scene><br><br>
<Shape><Box size="4 4 4" /></Shape><br><br>
</Scene> <br><br>
</x3d><br><br>
<script type="text/javascript"> <br><br>
// The namespace URIs<br><br>
var xhtml_ns = "<a class="external free" title="http://www.w3.org/1999/xhtml" rel="nofollow" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>
<br>
";<br><br>
var x3d_ns =<br><br>
"<a class="external free" title="http://www.web3d.org/specifications/x3d-3.0.xsd" rel="nofollow" href="http://www.web3d.org/specifications/x3d-3.0.xsd">http://www.web3d.org/specifications/x3d-3.0.xsd</a>
<br>
";<br><br>
// Get elements using namespaces<br><br>
var h1 = <br><br>
document.getElementsByTagNameNS(xhtml_ns, "h1"); <br><br>
var box = <br><br>
document.getElementsByTagNameNS(x3d_ns, "Box")[0];<br><br>
// Edit an attribute of the <Box /> element<br><br>
alert(box.getAttributeNS(null, "size"));<br><br>
box.setAttributeNS(null, "size", "2 2 2"); <br><br>
alert(box.getAttributeNS(null, "size"));<br><br>
</script><br><br>
</body><br><br><p>3) Events can be used to interact with the content
</p>
<pre> <?xml version="1.0" encoding="utf-8"?><br><br>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN", "<a class="external free" title="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>
<br>
"><br><br>
<html xmlns="<a class="external free" title="http://www.w3.org/1999/xhtml" rel="nofollow" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>
<br>
"><br><br>
<body><br><br>
<x3d xmlns=<br><br>
"<a class="external free" title="http://www.web3d.org/specifications/x3d-3.0.xsd" rel="nofollow" href="http://www.web3d.org/specifications/x3d-3.0.xsd">http://www.web3d.org/specifications/x3d-3.0.xsd</a>
<br>
"><br><br>
<Scene><br><br>
<Transform><br><br>
<Shape><Box size="4 4 4" /><br><br>
</Shape><br><br>
<TouchSensor id="ts" DEF="ts" /><br><br>
</Transform><br><br>
</Scene> <br><br>
</x3d><br><br>
<script type="text/javascript"> <br><br>
// The namespace URIs<br><br>
var xhtml_ns = "<a class="external free" title="http://www.w3.org/1999/xhtml" rel="nofollow" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>
<br>
";<br><br>
var x3d_ns = "<a class="external free" title="http://www.web3d.org/specifications/x3d-3.0.xsd" rel="nofollow" href="http://www.web3d.org/specifications/x3d-3.0.xsd">http://www.web3d.org/specifications/x3d-3.0.xsd</a>
<br>
";<br><br>
// Get elements using namespaces<br><br>
var h1 = document.getElementsByTagNameNS(xhtml_ns, "h1"); <br><br>
var x3d = document.getElementsByTagNameNS(x3d_ns, "x3d")[0]; <br><br>
var ts = x3d.getElementsByTagName("TouchSensor")[0];<br><br>
alert("ts=" + ts);<br><br>
ts.addEventListener("touchTime", function() {<br><br>
alert("clicked");<br><br>
}, false);<br><br>
</script><br><br>
</body><br><br>
</html><br><br><p>4) The position of the content in the document defines the position of the visible elements
</p>
<pre> The X3D element should also define the position where the content will be integrated into the html page. <br><br>
Simular how e.g. SVG or canvas works. A decoupled mechanisms will confuse application developer<br><br><p>
<a name="Implementation"></a>
</p>
<h3> <span class="mw-headline">Implementation</span>
</h3>
<p>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
</p>
<p>
<a name="Further_Information"></a>
</p>
<h3> <span class="mw-headline">Further Information</span>
</h3>
<p>More information can be found in the X3DOM paper at the Web3D 2009 symposium. The <a class="internal" title="X3dom-web3d2009-slides.zip" href="http://www.web3d.org/x3d/wiki/images/c/c3/X3dom-web3d2009-slides.zip">slides</a>
and <a class="internal" title="X3dom-web3d2009-paper.pdf" href="http://www.web3d.org/x3d/wiki/images/3/30/X3dom-web3d2009-paper.pdf">paper</a>
are available as preprint.
</p>
<p>
<a name="Future_work"></a>
</p>
<h1> <span class="mw-headline">Future work</span>
</h1>
<p>Some topics might become relevant once HTML5 is established as a
formal W3C Recommendation. These are not part of our current planned
work.
</p>
</pre></pre></pre></pre>
<ul>
<li> Publishing <a class="external text" title="http://www.web3d.org/x3d/specifications" rel="nofollow" href="http://www.web3d.org/x3d/specifications">X3D Specifications</a>
in HTML5
</li>
<li> Other topics as needed
</li>
</ul>
</h1>
<p>目前<a href="http://www.web3d.org/x3d">X3D工作组</a>
为了能将X3D与HTML整合得最好,加入了HTML工作组。</p>
<p>该项努力对Web3D - 事实上对所有3D图形 - 具有重要战略性意义,因为X3D是各种模型的数据交换格式。</p>
<p>我们考虑了在HTML页面中显示X3D场景的三种基本途径。</p>
<p></p>
<ul>
<li> (外部引用) HTML页面包含一个元素标签 - 引用.x3d场景,通过X3D插件来实现。在页面内可以使用DOM事件来传递数据。</li>
<li> (X3D作为HTML中的XML元素) HTML页面直接包含X3D源码,很可能带有XML名空间前缀,大致可以通过X3D插件或浏览器本身来实现。</li>
<li> (API访问方式) HTML页面包含某种形式的<a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-canvas-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-canvas-element">canvas</a>
(或者可能为 <code>Canvas3D</code>
)元素,允许对页面进行编程式访问,以便X3D场景访问接口(SAI)可以绘制位图</li>
</ul>
<p>待续。。。</p>
<p>Variations on these approaches are considered as part of <a title="X3D and HTML5 examples" href="http://www.web3d.org/x3d/wiki/index.php/X3D_and_HTML5_examples">X3D and HTML5 examples</a>
.
</p>
<p>Important new work includes the <a class="external text" title="http://www.x3DOM.org" rel="nofollow" href="http://www.x3dom.org/">X3DOM suite</a>
by Fraunhofer, which shows native X3D within an HTML page.
</p>
<p>Our
<a title="X3D and HTML5 Summary" href="http://www.web3d.org/x3d/wiki/index.php/X3D_and_HTML5_Summary">X3D and HTML5 Summary</a>
slideset was presented at the
HTML5 Working Group sessions
Friday 6 November 2009
in Mountain View
during the
<a class="external text" title="http://www.w3.org/2009/11/TPAC/" rel="nofollow" href="http://www.w3.org/2009/11/TPAC/">W3C Technical Plenary and Advisory Committee (TPAC)</a>
meeting.
As a result we are now actively working on showing <a class="external text" title="http://www.w3.org/Bugs/Public/show_bug.cgi?id=8238" rel="nofollow" href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=8238">X3D as XML in HTML</a>
.
</p>
<p>
<a name="HTML_5"></a>
</p>
<h1> <span class="mw-headline">HTML 5</span>
</h1>
<p>The <a class="external text" title="http://www.w3.org/html/wg" rel="nofollow" href="http://www.w3.org/html/wg">HTML working group</a>
page states:
</p>
<pre> What is HTML? HTML is the publishing language of the World Wide Web.<br><br><p>The latest editor's draft Hypertext Markup Language (HTML) recommendation states:
</p>
<pre> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html">HTML 5</a>
<br>
W3C Working Draft<br><br>
A vocabulary and associated APIs for HTML and XHTML<br><br><pre> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#declarative-3d-scenes" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#declarative-3d-scenes">13.2 Declarative 3D scenes</a>
<br><br><br>
Embedding 3D imagery into XHTML documents is the domain of X3D,<br><br>
or technologies based on X3D that are namespace-aware.<br><br><pre> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-object-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-object-element">4.8.5 The object element</a>
<br><br><br>
The object element can represent an external resource, which, depending on<br><br>
the type of the resource, will either be treated as an image, as a nested<br><br>
browsing context, or as an external resource to be processed by a plugin.<br><br><pre> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-param-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-param-element">4.8.6 The param element</a>
<br><br><br>
The param element defines parameters for plugins invoked by object elements.<br><br><p>
<a name="Technical_Tasks"></a>
</p>
<h1> <span class="mw-headline">Technical Tasks</span>
</h1>
<p>We are working on the following tasks.
</p>
</pre></pre></pre></pre></pre>
<ul>
<li> Ensure that all HTML5 questions and issues relative to X3D are properly considered and answered.
</li>
<li> Document how native X3D in .xml encoding can be best be
embedded inside an HTML5 document, typically in a namespace-aware
fashion
</li>
<li> Demonstrate X3D+HTML5 examples on the <a class="external text" title="http://www.web3D.org" rel="nofollow" href="http://www.web3d.org/">Web3D Consortium</a>
website
</li>
<li> Examine how X3D pertains to related HTML5 tags (such as object and canvas) that are used for plugin-type content
</li>
<li> Track MIME type issues
</li>
<li> Examine overall interoperability issues: combined X3D and HTML content with one floating over the other
<ul>
<li> X3D scene with transparent background floating over HTML document or desktop
</li>
<li> HTML text overlay laid out over an X3D scene as help
</li>
</ul>
</li>
<li> Identify API issues of mutual interest (such as DOM, Ajax and XHR) for further developmental work
</li>
<li> Consider direct integration of Scalable Vector Graphics (SVG) images as a supported format for X3D ImageTexture node
</li>
</ul>
<p>
<a name="Work_Support"></a>
</p>
<h1> <span class="mw-headline">Work Support</span>
</h1>
<ul>
<li> Maintain this X3D and HTML5 wiki page to track issues and progress
</li>
<li> Identify people in HTML5 working group who want to collaborate with us on these issues
</li>
<li> Report regularly on efforts to <a class="external text" title="mailto:x3d@web3d.org" rel="nofollow" href="mailto:x3d@web3d.org">x3d@web3d.org mailing list</a>
and in our every-other-week X3D working group teleconferences
</li>
<li> Discussions to occur on the <a class="external text" title="mailto:x3d@web3d.org" rel="nofollow" href="mailto:x3d@web3d.org">x3d@web3d.org mailing list</a>
and <a class="external text" title="mailto:public-html@w3.org" rel="nofollow" href="mailto:public-html@w3.org">public-html@w3.org mailing list</a>
</li>
<li> Other tasks and efforts as needed
</li>
</ul>
<p>
<a name="Participation"></a>
</p>
<h1> <span class="mw-headline">Participation</span>
</h1>
<p>Relevant HTML5 and W3C information:
</p>
<ul>
<li> <a class="external text" title="http://www.w3.org/html/wg" rel="nofollow" href="http://www.w3.org/html/wg">HTML Working Group</a>
especially <a class="external text" title="http://www.w3.org/html/wg/#who" rel="nofollow" href="http://www.w3.org/html/wg/#who">Membership and Participation</a>
</li>
<li> <a class="external text" title="http://www.w3.org" rel="nofollow" href="http://www.w3.org/">World Wide Web Consortium (W3C)</a>
</li>
<li> <a class="external text" title="http://www.w3.org/Consortium/Process" rel="nofollow" href="http://www.w3.org/Consortium/Process">W3C Process Document</a>
</li>
</ul>
<p>The following individuals have volunteered to serve as X3D Working Group representatives in the HTML5 Working Group.
</p>
<ul>
<li> Johannes Behr, <a class="external text" title="http://instantreality.org" rel="nofollow" href="http://instantreality.org/">Instant Reality</a>
, Fraunhofer Research, Darmstadt Germany
</li>
<li> <a class="external text" title="http://web.nps.navy.mil/~brutzman" rel="nofollow" href="http://web.nps.navy.mil/%7Ebrutzman">Don Brutzman</a>
, Naval Postgraduate School (Web3D-W3C liaison and W3C Advisory Committee representative), Monterey California USA
</li>
<li> John Stewart, <a class="external text" title="http://www.crc.ca/FreeWRL" rel="nofollow" href="http://www.crc.ca/FreeWRL">FreeWrl</a>
, Communications Research Center (CRC) Canada
</li>
<li> Joe Williams, <a class="external text" title="http://hypermultimedia.com" rel="nofollow" href="http://hypermultimedia.com/">HyperMultiMedia</a>
, Santa Rosa California USA
</li>
</ul>
<p>Any other <a class="external text" title="http://www.web3D.org" rel="nofollow" href="http://www.web3d.org/">Web3D Consortium</a>
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.
</p>
<p>
<a name="Meetings"></a>
</p>
<h1> <span class="mw-headline">Meetings</span>
</h1>
<p>Our weekly X3D and HTML5 teleconference is usually 0800-0900 (pacific time) each Tuesday.
</p>
<p>Designated members can participate Web3D HTML5 teleconference call.
</p>
<p>
<a name="Annotated_References"></a>
</p>
<h1> <span class="mw-headline">Annotated References</span>
</h1>
<p>X3D and HTML4
</p>
<ul>
<li> <a class="external text" title="http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html" rel="nofollow" href="http://www.web3d.org/x3d/content/examples/HtmlObjectTagForX3d.html">HTML Object Tag for X3D</a>
shows how to place X3D objects within an HTML page
</li>
<li> <a class="external text" title="http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html" rel="nofollow" href="http://www.web3d.org/x3d/content/examples/newHtmlPageWithX3dObject.html">newHtmlPageWithX3dObject.html</a>
is an example HTML scene with X3D object tag to copy, edit and reuse.
</li>
<li> <a class="external text" title="http://www.web3d.org/x3d/specifications/ISO-IEC-19775-1.2-X3D-AbstractSpecification/Part01/X3D.html" rel="nofollow" href="http://www.web3d.org/x3d/specifications/ISO-IEC-19775-1.2-X3D-AbstractSpecification/Part01/X3D.html">X3D Abstract Specification</a>
</li>
<li> <a class="external text" title="http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/X3D_SAI.html" rel="nofollow" href="http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/X3D_SAI.html">X3D Scene Access Interface (SAI)</a>
Edition 2
<ul>
<li> <a class="external text" title="http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/servRef.html#importDocument" rel="nofollow" href="http://www.web3d.org/x3d/specifications/ISO-IEC-FCD-19775-2.2-X3D-SceneAccessInterface/Part02/servRef.html#importDocument">6.3.13 importDocument</a>
service is a utility request to import a W3C DOM document or document fragment and convert it to an X3D scene.
</li>
</ul>
</li>
</ul>
<p>HTML4 and XHTML
</p>
<ul>
<li> <a class="external text" title="http://www.w3.org/TR/html4" rel="nofollow" href="http://www.w3.org/TR/html4">HTML 4.01</a>
HyperText Markup Language (HTML)
</li>
<li> <a class="external text" title="http://www.w3.org/TR/xhtml1/" rel="nofollow" href="http://www.w3.org/TR/xhtml1/">XHTML</a>
Extensible HyperText Markup Language (XHTML)
</li>
</ul>
<p>HTML5
</p>
<ul>
<li> <a class="external text" title="http://www.w3.org/TR/html-design-principles" rel="nofollow" href="http://www.w3.org/TR/html-design-principles">HTML Design Principles</a>
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#embedded-content-0" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#embedded-content-0">4.8 Embedded content</a>
<ul>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-figure-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-figure-element">4.8.1 The figure element</a>
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.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-img-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-img-element">4.8.2 The img element</a>
represents an image.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-iframe-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-iframe-element">4.8.3 The iframe element</a>
represents a nested browsing context.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-embed-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-embed-element">4.8.4 The embed element</a>
represents an integration point for an external (typically non-HTML) application or interactive content. (See HTML issue <a class="external text" title="http://www.w3.org/Bugs/Public/show_bug.cgi?id=7075" rel="nofollow" href="http://www.w3.org/Bugs/Public/show_bug.cgi?id=7075">embed element should be deprecated</a>
)
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-object-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-object-element">4.8.5 The object element</a>
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.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-param-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-param-element">4.8.6 The param element</a>
defines parameters for plugins invoked by object elements. It does not represent anything on its own.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#video" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#video">4.8.7 The video element</a>
represents a video or movie.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#audio" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#audio">4.8.8 The audio element</a>
is a media element whose media data is ostensibly audio data.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#source" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#source">4.8.9 The source element</a>
allows authors to specify multiple media resources for media elements. It does not represent anything on its own.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#media-elements" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#media-elements">4.8.10 Media elements</a>
are used to present audio data, or video and audio data, to the user.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-canvas-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-canvas-element">4.8.11 The canvas element</a>
represents a resolution-dependent bitmap canvas, which can be used for
rendering graphs, game graphics, or other visual images on the fly.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-map-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-map-element">4.8.12 The map element</a>
, in conjunction with any area element descendants, defines an image map. The element represents its children.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-area-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-area-element">4.8.13 The area element</a>
represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#the-image-element" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#the-image-element">4.8.14 Image maps</a>
allows geometric areas on an image to be associated with hyperlinks.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#mathml" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#mathml">4.8.15 MathML</a>
from the <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#mathml-namespace" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#mathml-namespace">MathML namespace</a>
falls into the embedded content category for the purposes of the content models in this specification.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#svg" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#svg">4.8.16 SVG</a>
from the <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#svg-namespace" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#svg-namespace">SVG namespace</a>
falls into the embedded content category for the purposes of the content models in this specification.
</li>
<li> <a class="external text" title="http://dev.w3.org/html5/spec/Overview.html#dimension-attributes" rel="nofollow" href="http://dev.w3.org/html5/spec/Overview.html#dimension-attributes">4.8.17 Dimension attributes</a>
</li>
</ul>
</li>
</ul>
<p>Canvas for 2D and 3D
</p>
<ul>
<li> <a class="external text" title="http://dev.w3.org/html5/canvas-api/canvas-2d-api.html" rel="nofollow" href="http://dev.w3.org/html5/canvas-api/canvas-2d-api.html">Canvas 2D API 1.0 Specification</a>
W3C Editor's Draft highlights SVG goals and approach
</li>
<li> <a class="external text" title="http://www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet" rel="nofollow" href="http://www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet">Khronos Canvas3D</a>
press release from SIGGRAPH 2009 about working group efforts for Javascript bindings to OpenGL ES
</li>
<li> <a class="external text" title="https://wiki.mozilla.org/Canvas:3D" rel="nofollow" href="https://wiki.mozilla.org/Canvas:3D">Mozilla Canvas:3D</a>
proposal
</li>
<li> <a class="external text" title="http://blog.vlad1.com/canvas-3d" rel="nofollow" href="http://blog.vlad1.com/canvas-3d">Firefox Canvas3D</a>
is a prominent possible approach
</li>
<li> <a class="external text" title="http://blogoscoped.com/archive/2009-03-26-n50.html" rel="nofollow" href="http://blogoscoped.com/archive/2009-03-26-n50.html">Canvas 3D Rendering Demo</a>
appears to show another way to do things
</li>
<li> <a class="external text" title="http://java.sun.com/javase/technologies/desktop/java3d/forDevelopers/J3D_1_2_API/j3dapi/javax/media/j3d/Canvas3D.html" rel="nofollow" href="http://java.sun.com/javase/technologies/desktop/java3d/forDevelopers/J3D_1_2_API/j3dapi/javax/media/j3d/Canvas3D.html">Java3D Canvas3D</a>
is an established API, though not directly related to HTML
</li>
</ul>
<p>
<a name="X3D_and_HTML5_Examples"></a>
</p>
<h1> <span class="mw-headline">X3D and HTML5 Examples</span>
</h1>
<p>The
<a title="X3D and HTML5 examples" href="http://www.web3d.org/x3d/wiki/index.php/X3D_and_HTML5_examples">X3D and HTML5 examples</a>
page shows a set of examples ranging from simple to sophisticated.
</p>
<p>
<a name="API_details_under_discussion"></a>
</p>
<h1> <span class="mw-headline">API details under discussion</span>
</h1>
<p>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.
</p>
<p>These and other API topics are all technically related, and of interest, but have varying degrees of maturity.
</p>
<p>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.
</p>
<p>
<a name="X3DOM_proposal"></a>
</p>
<h2> <span class="mw-headline">X3DOM proposal</span>
</h2>
<p>
<a name="Basics"></a>
</p>
<h3> <span class="mw-headline">Basics</span>
</h3>
<p>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). </p>
<p>The X3DOM model tries to ease the development of applications
by not providing a special interface but following and respecting some
basic xhtml rules:
</p>
<p>1) Declarative XML content is part of the DOM tree; Embedded with a separate xml namespace
</p>
<pre> <?xml version="1.0" encoding="utf-8"?><br><br>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a class="external free" title="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>
<br>
"><br><br>
<html xmlns="<a class="external free" title="http://www.w3.org/1999/xhtml" rel="nofollow" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>
<br>
"><br><br>
<body><br><br>
<x3d:x3d xmlns:x3d="<a class="external free" title="http://www.web3d.org/specifications/x3d-3.0.xsd" rel="nofollow" href="http://www.web3d.org/specifications/x3d-3.0.xsd">http://www.web3d.org/specifications/x3d-3.0.xsd</a>
<br>
"><br><br>
<x3d:Scene><br><br>
<x3d:Shape><x3d:Box x3d:size="4 4 4" /></x3d:Shape><br><br>
</x3d:Scene> <br><br>
</x3d:x3d><br><br>
</body><br><br>
</html><br><br><p>2) The DOM elements can be used to read and manipulate the content
</p>
<pre> <?xml version="1.0" encoding="utf-8"?><br><br>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN","<a class="external free" title="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>
<br>
"><br><br>
<html xmlns="<a class="external free" title="http://www.w3.org/1999/xhtml" rel="nofollow" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>
<br>
"><br><br>
<body><br><br>
<x3d xmlns=<br><br>
"<a class="external free" title="http://www.web3d.org/specifications/x3d-3.0.xsd" rel="nofollow" href="http://www.web3d.org/specifications/x3d-3.0.xsd">http://www.web3d.org/specifications/x3d-3.0.xsd</a>
<br>
"><br><br>
<Scene><br><br>
<Shape><Box size="4 4 4" /></Shape><br><br>
</Scene> <br><br>
</x3d><br><br>
<script type="text/javascript"> <br><br>
// The namespace URIs<br><br>
var xhtml_ns = "<a class="external free" title="http://www.w3.org/1999/xhtml" rel="nofollow" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>
<br>
";<br><br>
var x3d_ns =<br><br>
"<a class="external free" title="http://www.web3d.org/specifications/x3d-3.0.xsd" rel="nofollow" href="http://www.web3d.org/specifications/x3d-3.0.xsd">http://www.web3d.org/specifications/x3d-3.0.xsd</a>
<br>
";<br><br>
// Get elements using namespaces<br><br>
var h1 = <br><br>
document.getElementsByTagNameNS(xhtml_ns, "h1"); <br><br>
var box = <br><br>
document.getElementsByTagNameNS(x3d_ns, "Box")[0];<br><br>
// Edit an attribute of the <Box /> element<br><br>
alert(box.getAttributeNS(null, "size"));<br><br>
box.setAttributeNS(null, "size", "2 2 2"); <br><br>
alert(box.getAttributeNS(null, "size"));<br><br>
</script><br><br>
</body><br><br><p>3) Events can be used to interact with the content
</p>
<pre> <?xml version="1.0" encoding="utf-8"?><br><br>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN", "<a class="external free" title="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>
<br>
"><br><br>
<html xmlns="<a class="external free" title="http://www.w3.org/1999/xhtml" rel="nofollow" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>
<br>
"><br><br>
<body><br><br>
<x3d xmlns=<br><br>
"<a class="external free" title="http://www.web3d.org/specifications/x3d-3.0.xsd" rel="nofollow" href="http://www.web3d.org/specifications/x3d-3.0.xsd">http://www.web3d.org/specifications/x3d-3.0.xsd</a>
<br>
"><br><br>
<Scene><br><br>
<Transform><br><br>
<Shape><Box size="4 4 4" /><br><br>
</Shape><br><br>
<TouchSensor id="ts" DEF="ts" /><br><br>
</Transform><br><br>
</Scene> <br><br>
</x3d><br><br>
<script type="text/javascript"> <br><br>
// The namespace URIs<br><br>
var xhtml_ns = "<a class="external free" title="http://www.w3.org/1999/xhtml" rel="nofollow" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>
<br>
";<br><br>
var x3d_ns = "<a class="external free" title="http://www.web3d.org/specifications/x3d-3.0.xsd" rel="nofollow" href="http://www.web3d.org/specifications/x3d-3.0.xsd">http://www.web3d.org/specifications/x3d-3.0.xsd</a>
<br>
";<br><br>
// Get elements using namespaces<br><br>
var h1 = document.getElementsByTagNameNS(xhtml_ns, "h1"); <br><br>
var x3d = document.getElementsByTagNameNS(x3d_ns, "x3d")[0]; <br><br>
var ts = x3d.getElementsByTagName("TouchSensor")[0];<br><br>
alert("ts=" + ts);<br><br>
ts.addEventListener("touchTime", function() {<br><br>
alert("clicked");<br><br>
}, false);<br><br>
</script><br><br>
</body><br><br>
</html><br><br><p>4) The position of the content in the document defines the position of the visible elements
</p>
<pre> The X3D element should also define the position where the content will be integrated into the html page. <br><br>
Simular how e.g. SVG or canvas works. A decoupled mechanisms will confuse application developer<br><br><p>
<a name="Implementation"></a>
</p>
<h3> <span class="mw-headline">Implementation</span>
</h3>
<p>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
</p>
<p>
<a name="Further_Information"></a>
</p>
<h3> <span class="mw-headline">Further Information</span>
</h3>
<p>More information can be found in the X3DOM paper at the Web3D 2009 symposium. The <a class="internal" title="X3dom-web3d2009-slides.zip" href="http://www.web3d.org/x3d/wiki/images/c/c3/X3dom-web3d2009-slides.zip">slides</a>
and <a class="internal" title="X3dom-web3d2009-paper.pdf" href="http://www.web3d.org/x3d/wiki/images/3/30/X3dom-web3d2009-paper.pdf">paper</a>
are available as preprint.
</p>
<p>
<a name="Future_work"></a>
</p>
<h1> <span class="mw-headline">Future work</span>
</h1>
<p>Some topics might become relevant once HTML5 is established as a
formal W3C Recommendation. These are not part of our current planned
work.
</p>
</pre></pre></pre></pre>
<ul>
<li> Publishing <a class="external text" title="http://www.web3d.org/x3d/specifications" rel="nofollow" href="http://www.web3d.org/x3d/specifications">X3D Specifications</a>
in HTML5
</li>
<li> Other topics as needed
</li>
</ul>
评论 共 0 条 请登录后发表评论