add ability to highlight subsets of structures

This only works for mesh-based geometries for now. Line-based geometries
will follow.

demo.js

@@ -27,58 +27,69 @@ var structure;
 
 function points() {
   viewer.clear();
-  viewer.points('structure', structure, {
-                color: color.byResidueProp('num'),
-                showRelated : '1' });
+  var go = viewer.points('structure', structure, {
+                         color: color.byResidueProp('num'),
+                         showRelated : '1' });
+  go.setSelection(structure.select({ rnumRange : [15,20] }));
 }
 
 function lines() {
   viewer.clear();
-  viewer.lines('structure', structure, {
+  var go = viewer.lines('structure', structure, {
               color: color.byResidueProp('num'),
               showRelated : '1' });
+  go.setSelection(structure.select({ rnumRange : [15,20] }));
 }
 
 function cartoon() {
   viewer.clear();
   var go = viewer.cartoon('structure', structure, {
       color : color.ssSuccession(), showRelated : '1',
   });
+  go.setSelection(structure.select({ rnumRange : [15,20] }));
+
   var rotation = viewpoint.principalAxes(go);
   viewer.setRotation(rotation)
 }
 
 function lineTrace() {
   viewer.clear();
-  viewer.lineTrace('structure', structure, { showRelated : '1' });
+  var go = viewer.lineTrace('structure', structure, { showRelated : '1' });
+  go.setSelection(structure.select({ rnumRange : [15,20] }));
 }
 
 function spheres() {
   viewer.clear();
-  viewer.spheres('structure', structure, { showRelated : '1' });
+  var go = viewer.spheres('structure', structure, { showRelated : '1' });
+  go.setSelection(structure.select({ rnumRange : [15,20] }));
 }
 
 function sline() {
   viewer.clear();
-  viewer.sline('structure', structure,
+  var go = viewer.sline('structure', structure,
           { color : color.uniform('red'), showRelated : '1'});
+  go.setSelection(structure.select({ rnumRange : [15,20] }));
 }
 
 function tube() {
   viewer.clear();
-  viewer.tube('structure', structure);
+  var go = viewer.tube('structure', structure);
   viewer.lines('structure.ca', structure.select({aname :'CA'}),
             { color: color.uniform('blue'), lineWidth : 1,
               showRelated : '1' });
+  go.setSelection(structure.select({ rnumRange : [15,20] }));
 }
 
 function trace() {
   viewer.clear();
-  viewer.trace('structure', structure, { showRelated : '1' });
+  var go = viewer.trace('structure', structure, { showRelated : '1' });
+  go.setSelection(structure.select({ rnumRange : [15,20] }));
+
 }
 function ballsAndSticks() {
   viewer.clear();
-  viewer.ballsAndSticks('structure', structure, { showRelated : '1' });
+  var go = viewer.ballsAndSticks('structure', structure, { showRelated : '1' });
+  go.setSelection(structure.select({ rnumRange : [15,20] }));
 }
 
 function preset() {
@@ -245,7 +256,7 @@ $('#load-from-pdb').change(function() {
 viewer = pv.Viewer(document.getElementById('viewer'), { 
     width : 'auto', height: 'auto', antialias : true, 
     outline : true, quality : 'medium', style : 'hemilight',
-    background : '#333', animateTime: 500, doubleClick : null
+    background : '#fff', animateTime: 500, doubleClick : null
 });
 viewer.addListener('viewerReady', crambin);
 

src/gfx/base-geom.js

@@ -289,6 +289,14 @@ utils.derive(BaseGeom, SceneNode, {
       this._vertAssocs[i].setOpacity(val, view);
     }
     console.timeEnd('BaseGeom.setOpacity');
+  },
+  setSelection : function(view) {
+    console.time('BaseGeom.setSelection');
+    this._ready = false;
+    for (var i = 0; i < this._vertAssocs.length; ++i) {
+      this._vertAssocs[i].setSelection(view);
+    }
+    console.timeEnd('BaseGeom.setSelection');
   }
 });
 

src/gfx/cam.js

@@ -260,6 +260,10 @@ Cam.prototype = {
     return this._currentShader;
   },
 
+  invalidateCurrentShader : function() {
+    this._currentShader = null;
+  },
+
   // sets all OpenGL parameters to make this camera active.
   //
   // among other things, it sets the follow uniforms on the shader:

src/gfx/canvas.js

@@ -188,6 +188,7 @@ Canvas.prototype = {
     gl.shaderSource(shader, code);
     gl.compileShader(shader);
     if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      console.log(code);
       console.error(gl.getShaderInfoLog(shader));
       return null;
     }
@@ -215,6 +216,7 @@ Canvas.prototype = {
     shaderProgram.colorAttrib = getAttribLoc(shaderProgram, 'attrColor');
     shaderProgram.normalAttrib = getAttribLoc(shaderProgram, 'attrNormal');
     shaderProgram.objIdAttrib = getAttribLoc(shaderProgram, 'attrObjId');
+    shaderProgram.selectAttrib = getAttribLoc(shaderProgram, 'attrSelect');
     shaderProgram.symId = getUniformLoc(shaderProgram, 'symId');
     shaderProgram.projection = getUniformLoc(shaderProgram, 'projectionMat');
     shaderProgram.modelview = getUniformLoc(shaderProgram, 'modelviewMat');

src/gfx/indexed-vertex-array.js

@@ -84,16 +84,20 @@ utils.derive(IndexedVertexArray, VertexArrayBase, {
     this._vertData[i++] = color[2];
     this._vertData[i++] = color[3];
     this._vertData[i++] = objId;
+    this._vertData[i++] = 0.0; // select
     this._numVerts += 1;
     this._ready = false;
   },
 
-  _FLOATS_PER_VERT : 11,
-  _BYTES_PER_VERT : 11 * 4,
+  _FLOATS_PER_VERT : 12,
+  _BYTES_PER_VERT : 12 * 4,
 
   _OBJID_OFFSET : 10,
   _OBJID_BYTE_OFFSET : 10 * 4,
 
+  _SELECT_OFFSET : 11,
+  _SELECT_BYTE_OFFSET : 11 * 4,
+
   _COLOR_OFFSET : 6,
   _COLOR_BYTE_OFFSET : 6 * 4,
 
@@ -148,6 +152,11 @@ utils.derive(IndexedVertexArray, VertexArrayBase, {
                              byteStride, this._OBJID_BYTE_OFFSET);
       gl.enableVertexAttribArray(shader.objIdAttrib);
     }
+    if (shader.selectAttrib !== -1) {
+      gl.vertexAttribPointer(shader.selectAttrib, 1, gl.FLOAT, false,
+                             byteStride, this._SELECT_BYTE_OFFSET);
+      gl.enableVertexAttribArray(shader.selectAttrib);
+    }
   },
 
   releaseAttribs : function(shader) {
@@ -162,6 +171,9 @@ utils.derive(IndexedVertexArray, VertexArrayBase, {
     if (shader.objIdAttrib !== -1) {
       gl.disableVertexAttribArray(shader.objIdAttrib);
     }
+    if (shader.selectAttrib !== -1) {
+      gl.disableVertexAttribArray(shader.selectAttrib);
+    }
   },
 
   bind : function(shader) {

src/gfx/shaders.js

@@ -141,6 +141,7 @@ void main(void) {\n\
 OUTLINE_FS : '\n\
 precision ${PRECISION} float;\n\
 varying float vertAlpha;\n\
+varying float vertSelect;\n\
 \n\
 uniform vec3 outlineColor;\n\
 uniform float fogNear;\n\
@@ -149,13 +150,15 @@ uniform vec3 fogColor;\n\
 uniform bool fog;\n\
 \n\
 void main() {\n\
-  gl_FragColor = vec4(outlineColor, vertAlpha);\n\
+  gl_FragColor = vec4(mix(outlineColor, vec3(0.0, 1.0, 0.0), \n\
+                          vertSelect), \n\
+                      vertAlpha);\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, vertAlpha),\n\
-                        fog_factor);\n\
+                       fog_factor);\n\
   }\n\
 }',
 
@@ -167,17 +170,20 @@ precision ${PRECISION} float;\n\
 attribute vec3 attrPos;\n\
 attribute vec3 attrNormal;\n\
 attribute vec4 attrColor;\n\
+attribute float attrSelect;\n\
                                                                        \n\
 uniform vec3 outlineColor;\n\
 uniform mat4 projectionMat;\n\
 uniform mat4 modelviewMat;\n\
 varying float vertAlpha;\n\
+varying float vertSelect;\n\
 \n\
 void main(void) {\n\
   gl_Position = projectionMat * modelviewMat * vec4(attrPos, 1.0);\n\
   vec4 normal = modelviewMat * vec4(attrNormal, 0.0);\n\
   vertAlpha = attrColor.a;\n\
-  gl_Position.xy += normal.xy*0.100;\n\
+  vertSelect = attrSelect;\n\
+  gl_Position.xy += gl_Position.w*normal.xy*0.002 * (1.0 + attrSelect);\n\
   gl_Position.z += gl_Position.w*0.0001;\n\
 }',
 

src/gfx/vert-assoc.js

@@ -96,6 +96,21 @@ AtomVertexAssoc.prototype = {
     return null;
   },
 
+  setSelection : function(view) {
+    var atomMap = {};
+    view.eachAtom(function(atom) {
+      atomMap[atom.index()] = true;
+    });
+    for (var i = 0; i < this._assocs.length; ++i) {
+      var assoc = this._assocs[i];
+      var ai = atomMap[assoc.atom.index()];
+      var selected = ai !== true ? 0.0 : 1.0;
+      var va = assoc.vertexArray;
+      for (var j = assoc.vertStart ; j < assoc.vertEnd; ++j) {
+        va.setSelected(j, selected);
+      }
+    }
+  },
   setOpacity : function(val, view) {
     var atomMap = {};
     view.eachAtom(function(atom) {
@@ -210,6 +225,39 @@ TraceVertexAssoc.prototype = {
     return null;
   },
 
+  setSelection : function(view) {
+    var colorData = [];
+    var i, j;
+    var traces = this._structure.backboneTraces();
+    for (i = 0; i < traces.length; ++i) {
+      // get current residue colors
+      var data = this._perResidueColors[i];
+      var index = 0;
+      var trace = traces[i];
+      for (j = 0; j < trace.length(); ++j) {
+        var selected = view.containsResidue(trace.residueAt(j)) ? 1.0 : 0.0;
+        data[index + 3] = selected;
+        index+=4;
+      }
+      if (this._interpolation > 1) {
+        colorData.push(color.interpolateColor(data, this._interpolation));
+      } else {
+        colorData.push(data);
+      }
+    }
+
+    // store the color in the actual interleaved vertex array.
+    for (i = 0; i < this._assocs.length; ++i) {
+      var assoc = this._assocs[i];
+      var ai = assoc.slice;
+      var newColors = colorData[assoc.traceIndex];
+      var a = newColors[ai*4+3];
+      var va = assoc.vertexArray;
+      for (j = assoc.vertStart ; j < assoc.vertEnd; ++j) {
+        va.setSelected(j, a);
+      }
+    }
+  },
   setOpacity : function(val, view) {
     var colorData = [];
     var i, j;

src/gfx/vertex-array-base.js

@@ -65,6 +65,12 @@ VertexArrayBase.prototype = {
     this._ready = false;
   },
 
+  setSelected : function(index, a) {
+    var selected = index * this._FLOATS_PER_VERT + this._SELECT_OFFSET;
+    this._vertData[selected] = a;
+    this._ready = false;
+  },
+
 
   boundingSphere : function() {
     if (!this._boundingSphere) {

src/viewer.js

@@ -377,10 +377,8 @@ Viewer.prototype = {
     };
 
     this._boundDraw = utils.bind(this, this._draw);
-
     this._touchHandler = new TouchHandler(this._canvas.domElement(), 
                                           this, this._cam);
-
     if (!this._initialized) {
       this._initialized = true;
       this._dispatchEvent({'name':'viewerReadyEvent'},
@@ -456,7 +454,6 @@ Viewer.prototype = {
       this.requestRedraw();
     }
   },
-
   _draw : function() {
     if (this._canvas === null) {
       // only happens when viewer has been destroyed
@@ -486,8 +483,6 @@ Viewer.prototype = {
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
     this._drawWithPass('normal');
-
-
   },
 
   setCenter : function(center, ms) {