implement highlight shader for line geometries

select.js

@@ -26,11 +26,12 @@ viewer = pv.Viewer(document.getElementById('viewer'), {
     background : '#333', animateTime: 500, doubleClick : null
 });
 
-viewer.options('selectionColor', 'blue');
+viewer.options('selectionColor', '#f00');
 
 pv.io.fetchPdb('/pdbs/1crn.pdb', function(s) {
   viewer.on('viewerReady', function() {
-    viewer.lines('crambin', s);
+    var go = viewer.lineTrace('crambin', s, { showRelated: '1'});
+    go.setSelection(go.select({rnumRange : [15,20]}));
     viewer.autoZoom();
   });
 });

src/gfx/line-geom.js

@@ -39,7 +39,7 @@ function LineGeom(gl, float32Allocator) {
   BaseGeom.call(this, gl);
   this._vertArrays = [];
   this._float32Allocator = float32Allocator;
-  this._lineWidth = 1.0;
+  this._lineWidth = 0.5;
   this._pointSize = 1.0;
 }
 
@@ -66,13 +66,11 @@ utils.derive(LineGeom, BaseGeom, {
   shaderForStyleAndPass :
       function(shaderCatalog, style, pass) {
     if (pass === 'outline') {
-      return null;
+      return shaderCatalog.selectLines;
     }
     if (pass === 'select') {
       return shaderCatalog.select;
     }
-    if (pass === 'glow') {
-    }
     return shaderCatalog.lines;
   },
 
@@ -85,20 +83,26 @@ 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());
+                             additionalTransforms) {
+    var pointSizeMul = cam.upsamplingFactor();
+    if (shader.selectAttrib !== -1) {
+      pointSizeMul = 4.0 * cam.upsamplingFactor();
+
     }
     var i;
     if (additionalTransforms) {
+      this._gl.lineWidth(pointSizeMul * this._lineWidth);
       for (i = 0; i < vertArrays.length; ++i) {
         vertArrays[i].drawSymmetryRelated(cam, shader, additionalTransforms);
       }
     } else {
-      this._gl.uniform1i(shader.symId, 255);
       cam.bind(shader);
+      this._gl.lineWidth(pointSizeMul * this._lineWidth);
+      this._gl.uniform1i(shader.symId, 255);
+      if (shader.pointSize) {
+        this._gl.uniform1f(shader.pointSize, 
+                          pointSizeMul * this._pointSize);
+      }
       for (i = 0; i < vertArrays.length; ++i) {
         vertArrays[i].bind(shader);
         vertArrays[i].draw();

src/gfx/shaders.js

@@ -47,6 +47,46 @@ void main(void) {\n\
   }\n\
 }',
 
+SELECT_LINES_FS : '\n\
+precision ${PRECISION} float;\n\
+\n\
+varying float vertSelect;\n\
+varying vec3 vertNormal;\n\
+uniform float fogNear;\n\
+uniform float fogFar;\n\
+uniform vec3 fogColor;\n\
+uniform bool fog;\n\
+uniform vec3 selectionColor;\n\
+\n\
+void main(void) {\n\
+  gl_FragColor = mix(vec4(0.0, 0.0, 0.0, 0.0), vec4(selectionColor, 1.0), \n\
+                     vertSelect);\n\
+  gl_FragColor.a = step(0.5, vertSelect);\n\
+  if (gl_FragColor.a == 0.0) { discard; }\n\
+  float depth = gl_FragCoord.z / gl_FragCoord.w;\n\
+  if (fog) {\n\
+    float fog_factor = smoothstep(fogNear, fogFar, depth);\n\
+    gl_FragColor = mix(gl_FragColor, vec4(fogColor, gl_FragColor.w),\n\
+                        fog_factor);\n\
+  }\n\
+}',
+// hemilight vertex shader
+SELECT_LINES_VS : '\n\
+attribute vec3 attrPos;\n\
+attribute float attrSelect;\n\
+\n\
+uniform mat4 projectionMat;\n\
+uniform mat4 modelviewMat;\n\
+uniform float pointSize;\n\
+varying float vertSelect;\n\
+void main(void) {\n\
+  gl_Position = projectionMat * modelviewMat * vec4(attrPos, 1.0);\n\
+  gl_Position.z += gl_Position.w * 0.000001; \n\
+  float distToCamera = vec4(modelviewMat * vec4(attrPos, 1.0)).z;\n\
+  gl_PointSize = pointSize * 200.0 / abs(distToCamera); \n\
+  vertSelect = attrSelect;\n\
+}',
+
 // hemilight vertex shader
 LINES_VS : '\n\
 attribute vec3 attrPos;\n\

src/gfx/vertex-array.js

@@ -38,10 +38,11 @@ function VertexArray(gl, numVerts, float32Allocator)  {
 
 utils.derive(VertexArray, VertexArrayBase, {
 
-  _FLOATS_PER_VERT : 8,
+  _FLOATS_PER_VERT : 9,
   _POS_OFFSET : 0,
   _COLOR_OFFSET : 3,
   _ID_OFFSET : 7,
+  _SELECT_OFFSET : 8,
 
   numVerts : function() { return this._numVerts; },
 
@@ -63,9 +64,10 @@ utils.derive(VertexArray, VertexArrayBase, {
     this._vertData[index++] = color[2];
     this._vertData[index++] = color[3];
     this._vertData[index++] = id;
+    this._vertData[index++] = 0.0;
     this._numVerts += 1;
     this._ready = false;
-    this._boundingSpehre = null;
+    this._boundingSphere = null;
   },
 
   addLine : function(startPos, startColor, endPos, endColor, idOne, idTwo) {
@@ -87,10 +89,16 @@ utils.derive(VertexArray, VertexArrayBase, {
     this._gl.enableVertexAttribArray(shader.posAttrib);
     if (shader.objIdAttrib !== -1) {
       this._gl.vertexAttribPointer(shader.objIdAttrib, 1, this._gl.FLOAT, false,
-                                    this._FLOATS_PER_VERT * 4,
-                                    this._ID_OFFSET * 4);
+                                   this._FLOATS_PER_VERT * 4,
+                                   this._ID_OFFSET * 4);
       this._gl.enableVertexAttribArray(shader.objIdAttrib);
     }
+    if (shader.selectAttrib !== -1) {
+      this._gl.vertexAttribPointer(shader.selectAttrib, 1, this._gl.FLOAT, 
+                                   false, this._FLOATS_PER_VERT * 4,
+                                   this._SELECT_OFFSET * 4);
+      this._gl.enableVertexAttribArray(shader.selectAttrib);
+    }
   },
 
   releaseAttribs : function(shader) {
@@ -100,6 +108,9 @@ utils.derive(VertexArray, VertexArrayBase, {
     if (shader.objIdAttrib !== -1) {
       this._gl.disableVertexAttribArray(shader.objIdAttrib);
     }
+    if (shader.selectAttrib !== -1) {
+      this._gl.disableVertexAttribArray(shader.selectAttrib);
+    }
   },
 
   bind : function(shader) {

src/viewer.js

@@ -377,7 +377,8 @@ Viewer.prototype = {
       outline : c.initShader(shaders.OUTLINE_VS, shaders.OUTLINE_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)
+      selectLines : c.initShader(shaders.SELECT_LINES_VS, 
+                                 shaders.SELECT_LINES_FS, p)
     };
 
     this._boundDraw = utils.bind(this, this._draw);