XB PointStream

Releases

A cross-browser JavaScript tool which will emulate Arius3D's PointStream viewer. It will be able to quickly render a large amount of point cloud data to the <canvas> tag using WebGL.
XBPS 0.1
XBPS 0.2
XBPS 0.3
XBPS 0.4
XBPS 0.4.5 [Only Lib | Full]
XBPS 0.5 [xbps-min-0.5.js | xbps full]

XB PointStream Dev Links

3D Image Gallery
Blogs
Specifications
LightHouse
Github
Twitter
YouTube Videos

Development Resources

GPU Gems
GPU Gems 2

WebGL Specification
WebGL Cheat Sheet
OpenGLES 2.0 man pages

Occlusion Culling Algorithms

Parser Interface

There will be cases in which users have their own file format which they want to render with XB PointStream (for example, .ARA or .XML). We need to give users the ability to write their own parser and hook it into the library.

Users would write their JavaScript code which would implement the methods below. Once they do that, they would register their parser with the library by passing in an extension and their parser.

The library would then take care of the rest by creating an instance of their parser, call its methods and return a point cloud object.

/*
  The constructor of the parser.

  @param {Object} obj - collection of named functions

  These functions pass the parser back to the library since the library could
  be working with many parsers simultaneously.

  start - must occur exactly once. Has one argument, the parser itself
  end   - must occur exactly once. Has one argument, the parser itself
  parse - may occur one or many times. Has two arguments, the parser itself and a
  named collection of value types.

  See below for an example

*/
Constructor(obj)

/*
  Begins to load the resource.

  @param {String} path - path to resource
*/
load(path)


////// Getters

/*
  Get the version of this parser.
 
  @returns {String} parser version
*/
version

/*
  Get the number of points which have been parsed.

  @returns {Number} the number of points parsed so far by the parser.
*/
numParsedPoints

/*
  Get the total number of points in the point cloud, including points
  which have not yet been parsed.

  @returns {Number} the total number of points in the resource or -1 if unknown.
*/
numTotalPoints

/*
  Get the progress of the parser, how much it has parsed so far.

  @returns {Number} value between 0 to 1 or -1 if unknown.
*/
progress

/*
  The size of the resource in bytes.

  @returns {Number} the number of bytes in the resource or -1 if unknown.
*/
fileSize

/*
  The following example demonstrates how XB PointStream 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 XYZParser({ start: startCallback,
                         parse: parseCallback,
                         end: finishCallback});
// load some resource
parser.load("pointcloud.xyz");

Extending XB PointStream

Using the internal XB PointStream parser and shader

If you decide to use the internal XB PointStream parser and shader, you can have a script displaying your point cloud in about 10 lines of JavaScript. However, you will be required to send in your point cloud as an .ASC file as that is the only format we currently support. Also, the built-in shader will only draw the minimum necessary for you point cloud. That is, it will only render vertex positions and colors.

Using the internal XB PointStream parser with a custom shader

It is possible to create shader effects on point cloud objects to add effect such as mirroring, etc.

If you decide to use the internal .ASC parser and write a custom shader, you'll need to ensure your vertex shader uses the correct uniform and attribute variable names which XB PointStream refers to.

The built-in .ASC parser only reads in vertex position and colors, so you must use the following names to refer to those attributes in your vertex shader:

vec3 ps_Vertex vec4 ps_Color

XB PointStream will refer to the following uniforms:

For transformations: mat4 ps_ModelViewMatrix mat4 ps_ProjectionMatrix

For point size: float ps_PointSize vec3 ps_Attenuation

Using the internal XB PointStream shader with a custom parser

If your point cloud is in a format other than .ASC, but you want to use the built-in shader, you'll need to make sure your parser writes to the correct attribute names

• insert URL to example*

"ps_Vertex" "ps_Color"

Your script must also register your parser with XB PointStream with: ps.registerParser("XYZ", Your_XYZ_Parser_Name);

Using a custom shader and parser