Difference between revisions of "X3DOM CAD"

Revision as of 14:33, 2 April 2013

Overview: X3DOM and CAD support

Resources and Issues related to using the CADGeometry component in models incorporated into HTML5 web pages and rendered in a browser pages using X3DOM implemented with Javascript+WebGL or Flash Player

X3DOM is one way to integrate an X3D model into into an HTML5 web document (see X3D_and_HTML5 ). The X3DOM implementation is a library of Javascript classes and functions which, after an HTML5 document is loaded, search the Document Object Model (DOM) tree of the document for X3D elements and renders the content in an HTML5 canvas element using WebGL calls or else Flash Player, on browsers that do not suport WebGL. The Javascript code is open source and available in a Github project. The Javascript code can also be loaded from a single minimized script at URL http://www.x3dom.org/x3dom/example/x3dom.js . X3DOM offers a partial but expanding coverage of X3D nodes; the nodes which can be rendered using X3DOM in an HTML5 page is documented in the Node Type Tree. The X3DOM classes themselves do not implement any of the nodes in the CADGeometry component. (As of version 1.4; March 2013) The coverage of X3D nodes can be extended through additional Javascript code which extends the X3DOM classes (see X3DOM Components)

X3dToX3dom.xslt is an XSLT 2 stylesheet which will generate an HTML5 document embedding an X3D input model. This stylesheet can be run using a stand-alone XSLT2 engine or from within the X3D-Edit tool.

CADGeometry.js Javascript code implementing the CADLayer, CADAssembly, CADFace, and CADPart nodes of the X3D CADGeometry component. This Javascript should be loaded by a webpage after the core components of the X3DOM Javascript have been loaded. Example:

   <script type="text/javascript" src="http://www.x3dom.org/x3dom/example/x3dom.js"/>
   <script type="text/javascript" src="http://www.kshell.com/pages/x3dom/x3dom_cad/scripts/CADGeometry.js"/>

X3D Models

• laser_assembly Converted from a STEP file in the National Design Repository.

• CadTeapot Copied from the Web3D Basic Examples CadTeapot model but modified so that each of the Appearance nodes for the 4 parts of the teapot is independently defined.

X3DOM Pages

These pages were generated using a modification of the X3dToX3dom.xslt script (modified XSLT stylesheet here). These pages load the CADGeometry extension to X3DOM after loading the X3DOM core classes.

• laser_assembly page The laser_assembly model embedded in a web page rendered with X3DOM.
• CadTeapot page The CadTeapot model embedded in a web page rendered with X3DOM.

X3DOM -- Product structure pages

• laser_assembly product structure The laser_assembly model in a page, with additional linked HTML/Javascript elements to display the assembly tree.
• CadTeapot product structure The laser_assembly model in a page, with additional linked HTML/Javascript elements to display the assembly tree.
• retention_clip A product structure containing nested assemblies.

DOM/X3DOM -- Javascript programming

The loaded X3D model is part of the document DOM (Document Object Model) and can be searched and manipulated by Javascript code. To ensure that the X3D model is completely loaded and initialized, the X3DOM framework allows the page script to assign a function to the variable x3dom.runtime.ready. This function will be run after the X3DOM code has resolved all external URL's in the X3D model and the rendering objects have been initialized.

For example, the following javascript defines a function which searches the DOM tree for CADPart nodes and prints the X3D field 'name' to the browser console.

/*
Javascript code to implement manipulating the DOM elements which
are associated with the CADGeometry component implementation of x3dom.

Vincent Marchetti 2012
Licensed in same way as X3DOM release 1.5 : http://x3dom.org

Dual licensed under the MIT and GPL.
http://x3dom.org/download/dev/docs/html/license.html
*/

(function(){
    // save any existing value of the
    // x3dom.runtime.ready, so it can
    // be executed along with our code
    var existing_ready = x3dom.runtime.ready;
    
    function print_part_names(){
        // locate X3D nodes in the DOM tree with standard
        // Javascript DOM API
        var parts=x3dElem.getElementsByTagName("CADPart");
        for (var j=0; j<parts.length; ++j)
            // get the X3D field value from the CADPart
            // node using the .getattribute member function
            console.log( parts[j].getAttribute('name'));
    }
       
    // according to X3DOM documentation, setting or overriding
    // this function is how you perform a desired action just before
    // the X3D scene to to be rendered, so the X3DOM objects have all been 
    // constructed
    x3dom.runtime.ready=function(){
        // Be courteous, let any previously existing function
        // go first
        if (existing_ready !== undefined) existing_ready();   
        // then run our code
        print_part_names();
    }
})();

This excerpt illustrates the method used to create the HTML part-structure tool in the XHTML examples above.

TODO: this functionality will be integrated into the X3dToX3dom.xslt stylesheet so that the HTML widget can be available for any X3D export.

To Do

• Incorporate the product structure display (on the HTML page) as an option in the X3dToX3dom stylesheet.
• Setup a SourceForge project for ProductStructure, other scripts useful
• Prepare a x3dom folder with examples and scripts to be included ( with local URL references from .xhtml to .js scripts) to be placed in the Examples/Basic/CAD/X3DOM folder on web3d.org