Difference between revisions of "XB PointStream"

From CDOT Wiki
Jump to: navigation, search
m (Added warning about out of date information.)
 
(106 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
===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 &lt;canvas&gt; tag using WebGL.<br />
 
−
[http://scotland.proximity.on.ca/asalga/releases/0.1.zip XBPS 0.1]<br />
 
−
[http://scotland.proximity.on.ca/asalga/releases/0.2.zip XBPS 0.2]<br />
 
−
[http://scotland.proximity.on.ca/asalga/releases/0.3.zip XBPS 0.3]<br />
 
−
[http://scotland.proximity.on.ca/asalga/releases/0.4.zip XBPS 0.4]<br />
 
−
XBPS 0.4.5 '''[[http://scotland.proximity.on.ca/asalga/releases/0.4.5.zip Only Lib] | [http://github.com/asalga/XB-PointStream/archives/0.4.5 Full]]'''<br />
 
−
XBPS 0.5 '''[[http://scotland.proximity.on.ca/asalga/releases/0.5/xbps-0.5.js xbps-min-0.5.js] | [http://scotland.proximity.on.ca/asalga/releases/0.5/xbps-min-0.5.zip xbps full]]'''<br />
 
  
  
−
===XB PointStream Dev Links===
+
          NOTE: To edit current events, go to the page: [[Template:CDOT Current Events]]
−
[http://scotland.proximity.on.ca/asalga/ 3D Image Gallery]<br />
 
−
[http://en.wordpress.com/tag/xb-pointstream/ Blogs]<br />
 
−
[http://zenit.senecac.on.ca/wiki/index.php/XB_PointStream/specs Specifications]<br />
 
−
[http://cdot.lighthouseapp.com/projects/52886-xb-pointstream LightHouse]<br />
 
−
[http://github.com/asalga/XB-PointStream Github]<br />
 
−
[http://twitter.com/XBPointStream Twitter]<br />
 
−
[http://www.youtube.com/results?search_query=xb+pointstream&aq=f YouTube Videos]<br />
 
  
−
===Development Resources===
 
−
[http://developer.nvidia.com/object/gpu_gems_home.html GPU Gems]<br />
 
−
[http://http.developer.nvidia.com/GPUGems2/gpugems2_frontmatter.html GPU Gems 2]<br />
 
  
−
[http://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html WebGL Specification]<br />
+
######### --><!-- Style borrowed from Wikipedia's front page --><!-- Main title is suppressed by a CSS entry in the page: MediaWiki:Monobook.css  --><!--        BANNER ACROSS TOP OF PAGE        -->{| id="mp-topbanner" style="width:100%; background:#fcfcfc; border:none;"
−
[http://www.nihilogic.dk/labs/webgl_cheat_sheet/WebGL_Cheat_Sheet.pdf WebGL Cheat Sheet]<br />
+
| style="width:88%; color:#000;" |
−
[http://www.khronos.org/opengles/sdk/docs/man/ OpenGLES 2.0 man pages]<br />
+
{| style="width: 100%; border:1px solid #ccc; background:none;"
 +
| style="text-align:center; color:#000;" |
 +
<span style="font-size:262%; border:none; margin:0; color:#000; line-height: 100%">'''<span style="color: #b51418">XB PointStream</span>'''<br />[[File:Multishells.png|center|250px]]</span>
  
−
[http://www.gamasutra.com/view/feature/3394/occlusion_culling_algorithms.php Occlusion Culling Algorithms]<br />
+
{{Admon/obsolete}}
 +
|}
 +
|}
  
−
<!---
+
<!--       LEFT-HAND COLUMN        -->
−
'''Sample Files'''<br />
+
{| id="mp-upper" style="margin:0 0 0 0; background:none;"
−
[http://www.fastscan3d.com/download/samples/ OBJ Sample Files]<br />
+
<!-- |colspan="3"|<div style="background: #ffff00">'''Important!''' - The [[CDOT Development Systems]] have been re-arranged .</div>
−
-->
+
|- -->
 +
| class="MainPageBG" style="width:60%; border:1px solid #ccc; background:#f8f8f8; vertical-align:top; color:#000;"|
 +
{| id="mp-left" cellpadding="2" cellspacing="5" style="width:100%; vertical-align:top; background:#f8f8f8;"
 +
! <h2 id="mp-tfa-h2" style="margin:0; background:#b51418; font-size:120%; font-weight:bold; border:1px solid #ccc; text-align:left; color:#fff; padding:0.2em 0.4em;">About XB PointStream</h2>
 +
|-
 +
| style="color:#000;" | [[File:Shell.png|right|150px]]<div id="mp-tfa">The typical method used to represent 3D graphics for applications such as video games is that of a textured meshed.  Essentially the object is made up of a mesh of flat triangles and a 2D texture graphic that is applied over the mesh to give it its colour and depth.  However, this is not the only way to represent 3D graphics.  Another method for representing 3D graphics is that of a point cloud which is a set of coloured points in 3D space.  While a point cloud is usually larger than a textured mesh in terms of amount of data, it provides a level of realism not found in a mesh.  Furthermore, some 3D scanning equipment such as 3D scanners, LiDAR equipment, medical scanners, and MicroSoft's Kinect all deliver their data as point clouds.
  
−
===Parser Interface===
+
XB PointStream provides a framework to simplify the streaming and rendering of point clouds allowing them to be rendered in a web page without any plug-ins.  WebGL, a JavaScript API based on Open GL ES 2.0 enables the creation of 3D content in the web browser without any plugins.  It is currently implemented in release version of Firefox and Chrome and development versions of Safari and Opera.  To support the creation of 3D content many web libraries have been written.  However, most of these libraries are based on textured meshes.  XB PointStream is different from these other libraries in that it focuses on point clouds.  It is highly customizable to adapt to different file formats and provides support for addition of customizable shaders.
 +
</div>
  
−
There will be cases in which users have their own file format
+
|-
−
which they want to render with XB PointStream (for example,
+
! <h2 id="mp-tfa-h2" style="margin:0; background:#b51418; font-size:120%; font-weight:bold; border:1px solid #ccc; text-align:left; color:#fff; padding:0.2em 0.4em;">Demos</h2>
−
.ARA or .XML). We need to give users the ability to write their
+
|-
−
own parser and hook it into the library.
+
| style="color:#000;" | <div id="mp-tfa">XB PointStream uses WebGL and thus you will need to use a WebGL enabled browser to see the demos running live.  Current browsers that support WebGL are Firefox 4.0+ and current release of Chrome.  Development versions of Safari and Opera also support WebGL.  If your video card is really old or does not meet standards, your browser may also have problems supporting WebGL.  [http://www.doesmybrowsersupportwebgl.com/ Click here to test your browser].  If your browser does not support WebGL, please check out the videos of the demos instead.
 +
</div>
 +
<br>
 +
{| class="wikitable" border="1"
 +
|+
 +
!Demo !! Run it! ([http://www.doesmybrowsersupportwebgl.com/ needs webGL enabled browser]) !! Watch it!
 +
|-
 +
| Ply Point Cloud || http://scotland.proximity.on.ca/asalga/demos/andor/||
 +
|-
 +
| Drag and Drop Viewer |||| http://www.youtube.com/watch?v=y3AGz-8X-aI
 +
|-
 +
| Vitual Museum || http://scotland.proximity.on.ca/asalga/demos/museum/||
 +
|-
 +
| SMS Demo (requires a device with motion scensors and FF4 || http://scotland.proximity.on.ca/asalga/demos/sms/||http://www.youtube.com/watch?v=U37owvJj3Ws
 +
|-
 +
| User Defined Shaders || http://scotland.proximity.on.ca/asalga/demos/0.5/demo/user_shader/ ||
 +
|-
 +
| Multiple Point clouds || http://scotland.proximity.on.ca/asalga/demos/0.5/demo/many_clouds/ ||
  
−
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.
 
  
−
<pre>
+
|}
−
/*
+
| style="border:1px solid transparent;" |
−
  The constructor of the parser.
+
<!--        Right-hand column        -->
 +
| class="MainPageBG" style="width:40%; border:1px solid #ccc; background:#f8f8f8; vertical-align:top;"|
 +
{| id="mp-right" cellpadding="2" cellspacing="5" style="width:100%; vertical-align:top; background:#f8f8f8;"
 +
! <h2 id="mp-itn-h2" style="margin:0; background:#b51418; font-size:120%; font-weight:bold; border:1px solid #ccc; text-align:left; color:#fff; padding:0.2em 0.4em;">Current Blog Posts</h2>
 +
|-
 +
| style="color:#000;" | <div id="mp-itn">
 +
<!-- {{Planet Current Posts}} --><rss>http://asalga.wordpress.com/category/point-cloud/feed/|short|max=10</rss>
 +
|-
 +
! <h2 id="mp-tfa-h2" style="margin:0; background:#b51418; font-size:120%; font-weight:bold; border:1px solid #ccc; text-align:left; color:#fff; padding:0.2em 0.4em;">Downloads - Release 0.8</h2>
 +
|-
 +
| style="color:#000;" |
  
−
  @param {Object} obj - collection of named functions
+
* '''[http://scotland.proximity.on.ca/asalga/releases/0.8/xbps-min-0.8.js minified] | [http://scotland.proximity.on.ca/asalga/releases/0.8/xbps-min-0.8.zip src + example] | [http://github.com/asalga/XB-PointStream/archives/0.8 full]'''
 +
|-
 +
! <h2 id="mp-tfa-h2" style="margin:0; background:#b51418; font-size:120%; font-weight:bold; border:1px solid #ccc; text-align:left; color:#fff; padding:0.2em 0.4em;">Development Links</h2>
 +
|-
 +
| style="color:#000;" |
  
−
  These functions pass the parser back to the library since the library could
+
* [http://cdot.lighthouseapp.com/projects/52886-xb-pointstream Bug Tracker]
−
  be working with many parsers simultaneously.
+
* [http://github.com/asalga/XB-PointStream Github]
 +
* [http://en.wordpress.com/tag/xb-pointstream/ Blogs]
 +
* [http://zenit.senecac.on.ca/wiki/index.php/XB_PointStream/specs Specifications]
 +
* [http://twitter.com/XBPointStream Twitter]
 +
* [http://www.youtube.com/results?search_query=xb+pointstream&aq=f YouTube Videos]
 +
* [http://zenit.senecac.on.ca/wiki/index.php/XB_PointStream/extending_xbps Extending XBPointStream]
 +
* [http://zenit.senecac.on.ca/wiki/index.php/XB_PointStream/custom_parsers Custom Parsers]
 +
|-
 +
! <h2 id="mp-tfa-h2" style="margin:0; background:#b51418; font-size:120%; font-weight:bold; border:1px solid #ccc; text-align:left; color:#fff; padding:0.2em 0.4em;">Projects using XB PointStream</h2>
 +
|-
 +
| style="color:#000;" |
 +
* [http://www.visual-experiments.com/2011/04/13/google-chrome-photosynth-webgl-viewer-extension/ Google Chrome Photosynth WebGL Viewer Extension]
 +
* [http://3dtubeme.com/ 3D TubeMe]
  
−
  start - must occur exactly once. Has one argument, the parser itself
+
|-
−
  end  - must occur exactly once. Has one argument, the parser itself
+
! <h2 id="mp-tfa-h2" style="margin:0; background:#b51418; font-size:120%; font-weight:bold; border:1px solid #ccc; text-align:left; color:#fff; padding:0.2em 0.4em;">Old Releases</h2>
−
  parse - may occur one or many times. Has two arguments, the parser itself and a
+
|-
−
  named collection of value types.
+
| style="color:#000;" |
 +
* Release 0.75 ['''[http://scotland.proximity.on.ca/asalga/releases/0.75/xbps-min-0.75.zip src + example]''' | '''[http://scotland.proximity.on.ca/asalga/releases/0.75/xbps-min-0.75.js minified]''' | '''[http://github.com/asalga/XB-PointStream/archives/0.75 full]''']
 +
* Release 0.7 ['''[http://scotland.proximity.on.ca/asalga/releases/0.7/xbps-min-0.7.zip src + example]''' | '''[http://scotland.proximity.on.ca/asalga/releases/0.7/xbps-min-0.7.js minified]''' | '''[http://github.com/asalga/XB-PointStream/archives/0.7 full]''']
 +
* Release 0.6 ['''[http://scotland.proximity.on.ca/asalga/releases/0.6/xbps-min-0.6.zip src + example]''' | '''[http://scotland.proximity.on.ca/asalga/releases/0.6/xbps-min-0.6.js minified]''' | '''[http://github.com/asalga/XB-PointStream/archives/0.6 full]''']
 +
* [http://scotland.proximity.on.ca/asalga/releases/0.5/xbps-0.5.js Release 0.5 Minified]
 +
* [http://scotland.proximity.on.ca/asalga/releases/0.5/xbps-min-0.5.zip Release 0.5 source + example]
 +
* [http://scotland.proximity.on.ca/asalga/releases/0.4.5.zip Release 0.4.5 library only]
 +
* [http://github.com/asalga/XB-PointStream/archives/0.4.5 Release 0.4.5 Full]
 +
* [http://scotland.proximity.on.ca/asalga/releases/0.4.zip Release 0.4]
 +
* [http://scotland.proximity.on.ca/asalga/releases/0.3.zip Release 0.3]
 +
* [http://scotland.proximity.on.ca/asalga/releases/0.2.zip Release 0.2]
 +
* [http://scotland.proximity.on.ca/asalga/releases/0.1.zip Release 0.1]
 +
|}
 +
|}
  
−
  See below for an example
 
  
−
*/
+
__NOTOC__ __NOEDITSECTION__
−
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
 
−
</pre>
 
−
 
 
−
<pre>
 
−
/*
 
−
  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");
 
−
</pre>
 
−
 
 
−
===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
 

Latest revision as of 15:43, 27 January 2014

XB PointStream
Multishells.png
Important.png
This page may be obsolete.
It contains historical information.

About XB PointStream

Shell.png
The typical method used to represent 3D graphics for applications such as video games is that of a textured meshed. Essentially the object is made up of a mesh of flat triangles and a 2D texture graphic that is applied over the mesh to give it its colour and depth. However, this is not the only way to represent 3D graphics. Another method for representing 3D graphics is that of a point cloud which is a set of coloured points in 3D space. While a point cloud is usually larger than a textured mesh in terms of amount of data, it provides a level of realism not found in a mesh. Furthermore, some 3D scanning equipment such as 3D scanners, LiDAR equipment, medical scanners, and MicroSoft's Kinect all deliver their data as point clouds.

XB PointStream provides a framework to simplify the streaming and rendering of point clouds allowing them to be rendered in a web page without any plug-ins. WebGL, a JavaScript API based on Open GL ES 2.0 enables the creation of 3D content in the web browser without any plugins. It is currently implemented in release version of Firefox and Chrome and development versions of Safari and Opera. To support the creation of 3D content many web libraries have been written. However, most of these libraries are based on textured meshes. XB PointStream is different from these other libraries in that it focuses on point clouds. It is highly customizable to adapt to different file formats and provides support for addition of customizable shaders.

Demos

XB PointStream uses WebGL and thus you will need to use a WebGL enabled browser to see the demos running live. Current browsers that support WebGL are Firefox 4.0+ and current release of Chrome. Development versions of Safari and Opera also support WebGL. If your video card is really old or does not meet standards, your browser may also have problems supporting WebGL. Click here to test your browser. If your browser does not support WebGL, please check out the videos of the demos instead.


Demo Run it! (needs webGL enabled browser) Watch it!
Ply Point Cloud http://scotland.proximity.on.ca/asalga/demos/andor/
Drag and Drop Viewer http://www.youtube.com/watch?v=y3AGz-8X-aI
Vitual Museum http://scotland.proximity.on.ca/asalga/demos/museum/
SMS Demo (requires a device with motion scensors and FF4 http://scotland.proximity.on.ca/asalga/demos/sms/ http://www.youtube.com/watch?v=U37owvJj3Ws
User Defined Shaders http://scotland.proximity.on.ca/asalga/demos/0.5/demo/user_shader/
Multiple Point clouds http://scotland.proximity.on.ca/asalga/demos/0.5/demo/many_clouds/


Current Blog Posts

Extension:RSS -- Error: "http://asalga.wordpress.com/category/point-cloud/feed/%7Cshort%7Cmax=10" is not in the whitelist of allowed feeds. http://zenit.senecac.on.ca/~chris.tyler/planet/rss20.xml is the only allowed feed.

Downloads - Release 0.8

Development Links

Projects using XB PointStream

Old Releases


Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=XB_PointStream&oldid=104182"