XB PointStream/custom parsers

Intro

Currently XBPS only supports reading .ASC file types. If you require the library to render other files, you will need to write a custom parser and register it with the library. This should not be difficult, there are only a few things your parser must implement.

Example

Here is an example which you can use to help understand the process: [link here]

Parser Skeleton

The following bit of code is a skeleton which you can use as an aid to help you write your own parser for XB PointStream.

var Your_Parser_Name = (function() {
  /*
  XBPS will create an instance of your parser and pass in an object with three named properties:
  
  start - must occur exactly once. When you call this function, pass in a reference to your parser
  end   - must occur exactly once. When you call this function, pass in a reference to your parser
  parse - may occur one or many times. When you call this function, pass in a reference to your parser
  as the first argument and an object as the second argument.

  This second object must have variables referencing typed single-dimensional arrays which contain
  the parsed values. For example, if vertsArray and colsArray were Float32Array arrays, you would call
  the parse function like this:

  var attributes = {};
  attributes["ps_Vertex"] = vertsArray;
  attributes["ps_Color"] = colsArray;
  parse(thisParser, attributes);

  PointStream will create buffers using these values and start rendering them using the built-in
  shaders. Notice the variable names have been qualified with "ps_". If you are using the XB PointStream
  built-in shaders, you will need to use these exact variable names.
 
  These are the only two variables the built-in shaders read. If your parser reads in vertex normal data,
  you will need to write your own shaders to handle lighting.
  */
  function Your_Parser_Name(config) {
   
    /*Returns the version of this parser.*/
    this.__defineGetter__("version", function(){return /*!!*/;});
   
    /*Get the number of parsed points so far.*/
    this.__defineGetter__("numParsedPoints", function(){return /*!!*/;});
   
    /*Get the total number of points in the point cloud.*/
    this.__defineGetter__("numTotalPoints", function(){return /*!!*/;});
   
    /*Returns the progress of downloading the point cloud between zero and one.*/
    this.__defineGetter__("progress", function(){return /*!!*/;});
   
    /*Returns the file size of the resource in bytes.*/
    this.__defineGetter__("fileSize", function(){return /*!!*/;});
   
    /*Path = path to the resource */
    this.load = function(path){/*!!*/};
  }
  return Your_Parser_Name;
}());

Putting Everything Together

Sample Parser

Here is a very simple parser which only reads in vertex data from a file.

/*The following is a very simple parser written only to be used as
  an example of how a user could write a parser for XB PointStream.*/
var FOO_Parser = (function() {

  function FOO_Parser(config) {
   
    var start = config.start || function(){};
    var parse = config.parse || function(){};
    var end = config.end || function(){};
   
    var fileSizeInBytes = 0;
    var numParsedPoints = 0;
    var numTotalPoints = 0;
    var progress = 0;
      
    // keep track if onprogress event handler was called to
    // handle Chrome/WebKit vs. Minefield differences.
    // Minefield will call onprogress zero or many times
    // Chrome/WebKit will call onprogress one or many times
    var onProgressCalled = false;
    var AJAX = null;
       
    /* Returns the version of this parser. */
    this.__defineGetter__("version", function(){return 0.1;});
   
    /* Get the number of parsed points so far. */
    this.__defineGetter__("numParsedPoints", function(){return numParsedPoints;});
   
    /* Get the total number of points in the point cloud. */
    this.__defineGetter__("numTotalPoints", function(){ return numTotalPoints;});
   
    /* Get the progress of downloading the point cloud (zero to one or -1 if unknown) */
    this.__defineGetter__("progress", function(){ return progress;});
   
    /* Returns the file size of the resource in bytes. */
    this.__defineGetter__("fileSize", function(){return fileSizeInBytes;});

    /**/
    this.load = function(path){

      AJAX = new XMLHttpRequest();     
      AJAX.parser = this;

      /*occurs exactly once, when the resource begins to be downloaded */
      AJAX.onloadstart = function(evt){
        start(AJAX.parser);
      };
           
      /*occurs exactly once, when the file is done being downloaded */
      AJAX.onload = function(evt){
        var ascData = AJAX.responseText;
        var chunk = null;

        // if the onprogress event didn't get called--we simply got
        // the file in one go, we can parse from start to finish.
        if(onProgressCalled === false){
          chunk = ascData;
        }
        // otherwise the onprogress event was called at least once,
        // that means we need to get the data from a specific point to the end.
        else if(ascData.length - AJAX.lastNewLineIndex > 1){
          chunk = ascData.substring(AJAX.lastNewLineIndex, ascData.length);
        }

        AJAX.parseChunk(chunk);

        numTotalPoints = numParsedPoints;
        progress = 1;
        end(AJAX.parser);
      }

      AJAX.parseChunk = function(chunk){
       
        // this occurs over network connections, but not locally.
        if(chunk !== ""){
          // trim leading and trailing spaces
          chunk = chunk.replace(/\s+$/,"");
          chunk = chunk.replace(/^\s+/,"");
         
          // split on white space
          chunk = chunk.split(/\s+/);
         
          var numVerts = chunk.length/3;
          numParsedPoints += numVerts;
                   
          var verts = new Float32Array(numVerts * 3);

          for(var i = 0, j = 0, len = chunk.length; i < len; i += 3, j += 3){
            verts[j]   = parseFloat(chunk[i]);
            verts[j+1] = parseFloat(chunk[i+1]);
            verts[j+2] = parseFloat(chunk[i+2]);
          }
                   
          // XB PointStream expects an object with named/value pairs
          // which contain the attribute arrays. These must match attribute
          // names found in the shader
          parse(AJAX.parser, {"ps_Vertex":verts});
        }
      };
   
      /*On Minefield, this will occur zero or many times
        On Chrome/WebKit this will occur one or many times */
      AJAX.onprogress = function(evt){
     
       if(evt.lengthComputable){
          fileSizeInBytes = evt.total;
          progress = evt.loaded/evt.total;
        }

        onProgressCalled = true;

        // if we have something to actually parse
        if(AJAX.responseText){
          var ascData = AJAX.responseText;

          // likely stopped getting data in the middle of a line in the file:
          // 1.079 1.296 9.360 0 0 0 4.307 1.181 5.208\n
          // 3.163 2.225 6.139 0 0 0 0.6<-- stopped here
         
          // So find the last known newline. Everything from the last
          // request to this last newline can be placed in a buffer.
          var lastNewLineIndex = ascData.lastIndexOf("\n");
          AJAX.lastNewLineIndex = lastNewLineIndex;
         
          // if the status just changed and we finished downloading the
          // file, grab everyting until the end. If there is only a bunch
          // of whitespace, make a note of that and don't bother parsing.
          if(AJAX.readyState === 4){
            var chunk = ascData.substring(AJAX.startOfNextChunk, ascData.length);
            AJAX.parseChunk(chunk);
          }
          // if we still have more data to go
          else{
            // Start of the next chunk starts after the newline.
            var chunk = ascData.substring(AJAX.startOfNextChunk, lastNewLineIndex + 1);
            AJAX.startOfNextChunk = lastNewLineIndex + 1;
            AJAX.parseChunk(chunk);
          }
        }
      };
     
      AJAX.open("GET", path, true);
      AJAX.send(null);
    };
  }
  return FOO_Parser;
}());

Create your HTML file

Create an HTML which includes your parser, the library and the demo.js script.

<html>
  <head>
    <script src="foo_parser.js"></script>
    <script src="xbps.js"></script>
    <script src="demo.js"></script>
  </head>

  <body onLoad="start();">
  <canvas id="canvas" width="300" height="300"></canvas>   
  </body>
</html>

Create the Demo.js file

Give XBPS a reference to your parser and tell it what files it can read. In this case, we pass in "foo".

function start(){
  var ps = new PointStream();
  ps.setup(document.getElementById('canvas'));
  ps.registerParser("foo", FOO_Parser);
  ps.onRender = function render() {
    ps.translate(0, 0, -20);
    ps.render(acorn);
  };
  var acorn = ps.load("pointCloud.foo");
}

/*
  The following example demonstrates how XBPS might use
  a particular parser.
*/

var parser;

function startCallback(parser){
  // started
}

function parseCallback(parser, attributes){
  parser.version;
  parser.numParsedPoints;
  parser.numTotalPoints;
  parser.progress;
  parser.fileSize;
}

function finishCallback(parser){
  // finished
}

// create a hypothetical parser and set the callbacks
parser = new Your_Parser_Name({ start: startCallback,
                                parse: parseCallback,
                                end: finishCallback});
// load some resource
parser.load("pointcloud.xyz");