Difference between revisions of "X3D and HTML5"

From Web3D.org
Jump to: navigation, search
(→‎Technical Tasks: add SVG as ImageTexture)
Line 40: Line 40:
 
** HTML text overlay laid out over an X3D scene as help
 
** 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
 
* 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=
 
=Work Support=

Revision as of 15:34, 29 May 2009

Goal

The X3D Working Group will participate in the HTML Working Group for the purpose of best integrating X3D with HTML.

This effort has strategic importance for Web3D. We intend to establish a solid foundation for X3D to properly support 3D graphics in HTML5.

HTML5

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

Participation

Relevant HTML5 and W3C information:

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 0800-0900 (pacific time) each Tuesday.

We are requesting membership for Web3D participants in W3C HTML5. Don will report to W3C our list of participants, passwords and access will then be provided.

Annotated References

X3D and HTML4

HTML4 and XHTML

  • HTML 4.01 HyperText Markup Language (HTML)
  • XHTML Extensible HyperText Markup Language (XHTML)

HTML5

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

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.

Retrieved from "https://web3d.org/wiki/index.php?title=X3D_and_HTML5&oldid=2077"