Scaling Up: Integrating X3DOM with whole body Laser scan data

Sandy Ressler 

National Institute of Standards and Technology

Web3D 2013, San Sebastian Spain, June 20-22, 2013


Any mention of commercial products within this presentation or NIST web pages is for information only; it does not imply recommendation or endorsement by NIST.

The views expressed in this presentation are solely those of the author and do not represent any official views of NIST or the US Government.


GOAL: NO Sleeping!


  1. A quick review of X3DOM
  2. A quicker review of jQuery
  3. A peek at Anthropometry application
  4. Types of data for whole body laser scan
  5. Putting LOTS of data into the DOM
  6. More anthropometry, moving beyond toyland
  7. Geometry compression
  8. Integrating with CSS (responsive web page)
  9. More Integration
  10. It's all about the leveraging the web



      A Quick Review of X3DOM

      • Yep I got me some 3D..r ight in the browser
      • NO PLUG INs!!!
      • just add JavaScript
      • usually sits on top of WebGL but doesn't have to
      • X3DOM can be rendered using Flash (ewwwww)

      • puts geometry in the DOM
      • this is GREAT ... up to a point (but not a million points)

      X3DOM is:

      A Quicker review

       of jquery

      What is jQuery?

      • Widely used utility library, robust, interoperable among all browsers
      • Huge number of extensions via plug-in mechanism
      • Users can easily create own plug-ins
      • powerful selection mechanism (for selecting elements of the DOM)
      • $('#asphere') - select one particular sphere called 'asphere'
      • $('sphere') - select all of the elements of the type <sphere>

      jquery is:

      Highly portable
      Throughly tested
      Widely used

      • $(selector).action
      • $(s).crawl.the.DOM

      $('#sphScaleUp').click(function() {
      $('sphere.sphA').parent().parent().attr('scale','10 10 10');

      What is jQuery?

      (and why should you care)


      robust, highly tested, interoperable, JavaScript framework to simplify your web development life

      • very powerful selection mechanism (selecting elements of the DOM)
      • jQuery utilizes CSS selection mechanism
        • $('#asphere') - select one particular sphere called 'asphere'
        • $('sphere') - select all of the elements of type <sphere>

      What is jQuery? (more)

    • deals with many issues of browser interoperability
    • simplifies life with asyncronous issues (AJAX)
    • highly extensible (gazillions of plugins)
    • Selectorama

      jQuery selectors lab

      jQuery selectors


      radius='0.0125' onclick="$('#dialog').dialog('open'); $('#dialog').html('<p> You just selected the '+ $(this).parent().parent().attr('description') + ' landmark. </p>'); $('#dialog') .dialog( {title: $(this) .parent() .parent() .attr('description') });

      select (pseudo english)

      for each element of the type (shape)

      do something fn()

      Method Chaining

       <transform id='lm0' description='Sellion'>
              <material id='mat0' diffuseColor='0 0.9 0'></material>
            <sphere id='asphere' radius='0.0125' ... 


      similar to functional programming

      take the output of one function and feed it to the input of the next function and so on...

      similar to UNIX pipes: ls | fgrep "foo" | wc

      PEEKING at an anthropometry application

      AnthroGloss - Anthropometric Landmark Glossary from sandyr on Vimeo.


      AnthroWeb Leverages:

      4391 Bodies 

      CAESAR 4391 from sandyr on Vimeo.

      Types of data for Whole body

       laser scan

      Data types

      1. Geometric mesh of body surface
      2. Anthropometric landmarks
      3. Demographics
      4. Viewpoints
      5. Compressed mesh (preprocessed)

      Putting lots of data into the dom


      To DOM or Not to DOM

      What is the DOM?

      • DOM - Document Object Model
      • The structure of everything needed to render a page..and more!
      • Manipulating the DOM means you are manipulating page elements
      • Selecting elements of the DOM means you are selecting those elements of the page you wish to manipulate.

      DOM (HTML) Events

      • Web programming is "real time" programming
      • Actions are "event driven"
      • just like games!!
      • An event happens, you perform an action and (sometimes) you have a callback to maintain control, in an asyncronous manner
      • type of events: mouse, keyboard,

      putting lots of data into the DOM

      • simply put the browser will fall apart
      • what's it like to compress the data?

      Walking man example

      Moving Beyond toyland

      geometry compression

      • X3DOM tool (AOPT) has a robust set of geometry compression functionality
      • result is a hybrid declarative approach
      • some of the data is directly in the DOM
      • some of the data is in files pointed to by DOM elements
      • results are greatly improved performance
      • reduced flexibility for DOM element manipulation

      Dynamically generating geometry

      defining a sphere template
       <sphere radius="0.0125" 
            $("#dialog").html("<p> You just selected the "+ $(this).parent().parent().attr("description") + " landmark. </p>");
            $("#dialog").dialog( {title: $(this).parent().parent().attr("description") });" 

      Dynamically generating geometry (2)

      code to clone the landmark (sphere)
      function cloneLandmarks(idstr, matstr) {
      for (var index = 0; index < OrigLandmarks[0].length; index++) {
          $(".ball").each(function(index) {
               newNum = new Number(index + 1);
               newElem = $("#"+idstr+"0").clone().attr("id", "idstr" + newNum); 
               //2nd child of shape is sphere
               //replace clock1 with correct clock id
               tmpObj = newElem.children().children(":nth-child(2)");
               tmpClickStr = tmpObj.attr("onclick");
               ntmpClickStr = tmpClickStr.replace(/clock1/i,"clock"+newNum);
               newElem.children() //replace mat1 with mat id
              $("#"+idstr+"0").after(newElem);  // place the new transform

      Dynamically generating geometry (3)


      Let's Generate that Geometry

      Responsive web design

       (integration with CSS)

      integrating with css

      • creating responsive web sites
      • you want the various (rectangular) areas of the application (web site) to scale appropriately
      • the key magic is to NOT specify a width or height attribute in the <X3D> element

      Integrating the pieces


      it's all about the leverage

      • what's the big win here?

      That's All Folks!

      Dancing CAESAR Poser from sandyr on Vimeo.