add points render style

This fixes issue #89

README.md

@@ -67,6 +67,7 @@ Changelog
 ### New since Latest Release
 
 - Added option to set field of view (FOV)
+- Added "points" rendering mode in which every atom is rendered as a point. This is useful for rendering point clouds.
 
 ### New in Version 1.5.0
 

demo.js

@@ -25,6 +25,13 @@ var color = pv.color;
 
 var structure;
 
+function points() {
+  viewer.clear();
+  viewer.points('structure', structure, {
+                color: color.byResidueProp('num'),
+                showRelated : '1' });
+}
+
 function lines() {
   viewer.clear();
   viewer.lines('structure', structure, {
@@ -176,6 +183,7 @@ $('#style-sline').click(sline);
 $('#style-trace').click(trace);
 $('#style-lines').click(lines);
 $('#style-balls-and-sticks').click(ballsAndSticks);
+$('#style-points').click(points);
 $('#style-spheres').click(spheres);
 $('#color-uniform').click(uniform);
 $('#color-element').click(byElement);

doc/viewer.rst

@@ -89,6 +89,16 @@ These methods will automatically add the object to the viewer, there is not need
 
   :returns: The geometry of the object. 
 
+.. function:: pv.Viewer.points(name, structure[, options])
+
+  Renders the atoms of a structure (:class:`~pv.mol.Mol`, or :class:`~pv.mol.MolView`) as a point cloud. Valid *options* are:
+
+  * *color*: the color operation to be used. Defaults to :func:`pv.color.byElement`.
+  * *pointSize* relative point size of the points to be rendered. Defaults to 1.0
+
+  :returns: The geometry of the object. 
+
+
 .. function:: pv.Viewer.spheres(name, structure[, options])
 
   Renders the structure (:class:`~pv.mol.Mol`, or :class:`~pv.mol.MolView`) at full-atom level using a sphere for each atom. Valid *options* are:

index.html

@@ -73,6 +73,7 @@ <h1><a href="#">PV</a></h1>
           <li><a id=style-lines href="#">Bonds (Lines)</a></li>
           <li><a id=style-spheres href="#">Spheres</a></li>
           <li><a id=style-balls-and-sticks href="#">Balls And Sticks</a></li>
+          <li><a id=style-points href="#">Points</a></li>
         </ul>
       </li>
       <li class="has-dropdown">

src/gfx/canvas.js

@@ -224,6 +224,7 @@ Canvas.prototype = {
     shaderProgram.fogNear = getUniformLoc(shaderProgram, 'fogNear');
     shaderProgram.fogColor = getUniformLoc(shaderProgram, 'fogColor');
     shaderProgram.outlineColor = getUniformLoc(shaderProgram, 'outlineColor');
+    shaderProgram.pointSize = getUniformLoc(shaderProgram, 'pointSize');
 
     return shaderProgram;
   },

src/gfx/line-geom.js

@@ -40,6 +40,7 @@ function LineGeom(gl, float32Allocator) {
   this._vertArrays = [];
   this._float32Allocator = float32Allocator;
   this._lineWidth = 1.0;
+  this._pointSize = 1.0;
 }
 
 utils.derive(LineGeom, BaseGeom, {
@@ -54,6 +55,9 @@ utils.derive(LineGeom, BaseGeom, {
   setLineWidth : function(width) {
     this._lineWidth = width;
   },
+  setPointSize : function(size) {
+    this._pointSize = size;
+  },
 
   vertArrays : function() {
     return this._vertArrays;
@@ -83,6 +87,10 @@ utils.derive(LineGeom, BaseGeom, {
   _drawVertArrays : function(cam, shader, vertArrays, 
                                                 additionalTransforms) {
     this._gl.lineWidth(this._lineWidth * cam.upsamplingFactor());
+    if (shader.pointSize) {
+      this._gl.uniform1f(shader.pointSize, 
+                         this._pointSize * cam.upsamplingFactor());
+    }
     var i;
     if (additionalTransforms) {
       for (i = 0; i < vertArrays.length; ++i) {

src/gfx/render.js

@@ -201,6 +201,42 @@ exports.ballsAndSticks = function(structure, gl, opts) {
   return meshGeom;
 };
 
+var pointsForChain = (function () {
+  var clr = vec4.fromValues(0.0, 0.0, 0.0, 1.0);
+  return function(lineGeom, vertAssoc, chain, opts) {
+    var atomCount = chain.atomCount();
+    var idRange = opts.idPool.getContinuousRange(atomCount);
+    lineGeom.addIdRange(idRange);
+    var va = lineGeom.addChainVertArray(chain, atomCount);
+    va.setDrawAsPoints(true);
+    chain.eachAtom(function(atom) {
+      var vertStart = va.numVerts();
+      opts.color.colorFor(atom, clr, 0);
+      var objId = idRange.nextId({ geom : lineGeom, atom: atom });
+      va.addPoint(atom.pos(), clr, objId);
+      var vertEnd = va.numVerts();
+      vertAssoc.addAssoc(atom, va, vertStart, vertEnd);
+    });
+  };
+})();
+
+
+exports.points = function(structure, gl, opts) {
+  console.time('points');
+  var vertAssoc = new AtomVertexAssoc(structure, true);
+  opts.color.begin(structure);
+  var lineGeom = new LineGeom(gl, opts.float32Allocator);
+  lineGeom.setPointSize(opts.pointSize);
+  lineGeom.addVertAssoc(vertAssoc);
+  lineGeom.setShowRelated(opts.showRelated);
+  structure.eachChain(function(chain) {
+    pointsForChain(lineGeom, vertAssoc, chain, opts);
+  });
+  opts.color.end(structure);
+  console.timeEnd('points');
+  return lineGeom;
+};
+
 var linesForChain = (function () {
   var mp = vec3.create();
   var clr = vec4.fromValues(0.0, 0.0, 0.0, 1.0);

src/gfx/shaders.js

@@ -47,6 +47,22 @@ void main(void) {\n\
   }\n\
 }',
 
+// hemilight vertex shader
+LINES_VS : '\n\
+attribute vec3 attrPos;\n\
+attribute vec4 attrColor;\n\
+\n\
+uniform mat4 projectionMat;\n\
+uniform mat4 modelviewMat;\n\
+varying vec4 vertColor;\n\
+uniform float pointSize;\n\
+void main(void) {\n\
+  gl_Position = projectionMat * modelviewMat * vec4(attrPos, 1.0);\n\
+  float distToCamera = vec4(modelviewMat * vec4(attrPos, 1.0)).z;\n\
+  gl_PointSize = pointSize * 200.0 / abs(distToCamera); \n\
+  vertColor = attrColor;\n\
+}',
+
 // hemilight fragment shader
 HEMILIGHT_FS : '\n\
 precision ${PRECISION} float;\n\
@@ -170,13 +186,16 @@ SELECT_VS : '\n\
 precision ${PRECISION} float;\n\
 uniform mat4 projectionMat;\n\
 uniform mat4 modelviewMat;\n\
+uniform float pointSize;\n\
 attribute vec3 attrPos;\n\
 attribute float attrObjId;\n\
 \n\
 varying float objId;\n\
 \n\
 void main(void) {\n\
   gl_Position = projectionMat * modelviewMat * vec4(attrPos, 1.0);\n\
+  float distToCamera = vec4(modelviewMat * vec4(attrPos, 1.0)).z;\n\
+  gl_PointSize = pointSize * 200.0 / abs(distToCamera); \n\
   objId = attrObjId;\n\
 }',
 

src/gfx/vertex-array.js

@@ -32,7 +32,8 @@ define(
 // (unindexed) vertex array for line-based geometries
 function VertexArray(gl, numVerts, float32Allocator)  {
   VertexArrayBase.call(this, gl, numVerts, float32Allocator);
-  this._numLines = 0;
+  this._numVerts = 0;
+  this._primitiveType = this._gl.LINES;
 }
 
 utils.derive(VertexArray, VertexArrayBase, {
@@ -42,32 +43,36 @@ utils.derive(VertexArray, VertexArrayBase, {
   _COLOR_OFFSET : 3,
   _ID_OFFSET : 7,
 
-  numVerts : function() { return this._numLines * 2; },
+  numVerts : function() { return this._numVerts; },
 
-  addLine : function(startPos, startColor, endPos, endColor, idOne, idTwo) {
-    var index = this._FLOATS_PER_VERT * this._numLines * 2;
-    this._vertData[index++] = startPos[0];
-    this._vertData[index++] = startPos[1];
-    this._vertData[index++] = startPos[2];
-    this._vertData[index++] = startColor[0];
-    this._vertData[index++] = startColor[1];
-    this._vertData[index++] = startColor[2];
-    this._vertData[index++] = startColor[3];
-    this._vertData[index++] = idOne;
-    this._vertData[index++] = endPos[0];
-    this._vertData[index++] = endPos[1];
-    this._vertData[index++] = endPos[2];
-    this._vertData[index++] = endColor[0];
-    this._vertData[index++] = endColor[1];
-    this._vertData[index++] = endColor[2];
-    this._vertData[index++] = endColor[3];
-    this._vertData[index++] = idTwo;
-
-    this._numLines += 1;
+  setDrawAsPoints : function(enable) {
+    if (enable) {
+      this._primitiveType = this._gl.POINTS;
+    } else {
+      this._primitiveType = this._gl.LINES;
+    }
+  },
+
+  addPoint : function(pos, color, id) {
+    var index = this._FLOATS_PER_VERT * this._numVerts;
+    this._vertData[index++] = pos[0];
+    this._vertData[index++] = pos[1];
+    this._vertData[index++] = pos[2];
+    this._vertData[index++] = color[0];
+    this._vertData[index++] = color[1];
+    this._vertData[index++] = color[2];
+    this._vertData[index++] = color[3];
+    this._vertData[index++] = id;
+    this._numVerts += 1;
     this._ready = false;
     this._boundingSpehre = null;
   },
 
+  addLine : function(startPos, startColor, endPos, endColor, idOne, idTwo) {
+    this.addPoint(startPos, startColor, idOne);
+    this.addPoint(endPos, endColor, idTwo);
+  },
+
 
   bindAttribs : function(shader) {
     this._gl.vertexAttribPointer(shader.posAttrib, 3, this._gl.FLOAT, false,
@@ -105,7 +110,7 @@ utils.derive(VertexArray, VertexArrayBase, {
   // draws all triangles contained in the indexed vertex array using the 
   // provided shader.
   draw : function() {
-    this._gl.drawArrays(this._gl.LINES, 0, this._numLines * 2);
+    this._gl.drawArrays(this._primitiveType, 0, this._numVerts);
   }
 });
 

src/tests/viewer/functional.js

@@ -2,7 +2,7 @@ require(['viewer', 'io', 'color'], function(pv, io, color) {
 
 var ALL_STYLES = [
   'cartoon', 'tube', 'lines', 'spheres', 'ballsAndSticks',
-  'sline', 'trace', 'lineTrace'
+  'sline', 'trace', 'lineTrace', 'points'
 ];
 
 function createViewer() {

src/viewer.js

@@ -325,7 +325,7 @@ Viewer.prototype = {
     this._shaderCatalog = {
       hemilight : c.initShader(shaders.HEMILIGHT_VS, shaders.HEMILIGHT_FS, p),
       outline : c.initShader(shaders.OUTLINE_VS, shaders.OUTLINE_FS, p),
-      lines : c.initShader(shaders.HEMILIGHT_VS, shaders.LINES_FS, p),
+      lines : c.initShader(shaders.LINES_VS, shaders.LINES_FS, p),
       text : c.initShader(shaders.TEXT_VS, shaders.TEXT_FS, p),
       select : c.initShader(shaders.SELECT_VS, shaders.SELECT_FS, p)
     };
@@ -515,7 +515,7 @@ Viewer.prototype = {
 
   RENDER_MODES : [ 
     'sline', 'lines', 'trace', 'lineTrace', 'cartoon', 'tube', 'spheres', 
-    'ballsAndSticks',
+    'ballsAndSticks', 'points'
   ],
 
   /// simple dispatcher which allows to render using a certain style.
@@ -637,6 +637,14 @@ Viewer.prototype = {
     return this.add(name, obj);
   },
 
+  points : function(name, structure, opts) {
+    var options = this._handleStandardMolOptions(opts, structure);
+    options.color = options.color || color.byElement();
+    options.pointSize = options.pointSize || 1.0;
+    var obj = render.points(structure, this._canvas.gl(), options);
+    return this.add(name, obj);
+  },
+
   trace : function(name, structure, opts) {
     var options = this._handleStandardMolOptions(opts, structure);
     options.color = options.color || color.uniform([ 1, 0, 0 ]);