allow to specify alpha value used for selection highlighting

Based on initial patch by ajfarkas.

src/color.js

@@ -36,6 +36,7 @@ var rgb = exports.rgb;
 exports.rgb.create = vec4.create;
 exports.rgb.scale = vec4.scale;
 exports.rgb.copy = vec4.copy;
+exports.rgb.clone = vec4.clone;
 exports.rgb.fromValues = vec4.fromValues;
 
 exports.rgb.mix = function(out, colorOne, colorTwo, t) {
@@ -77,13 +78,13 @@ var COLORS = {
 };
 
 
-exports.hex2rgb = function(color){
+exports.hex2rgb = function(color, alpha) {
   var r, g, b, a;
   if (color.length === 4 || color.length === 5 ) {
     r = parseInt(color[1], 16);
     g = parseInt(color[2], 16);
     b = parseInt(color[3], 16);
-    a = 15;
+    a = Math.round(alpha * 15);
     if(color.length===5) {
       a = parseInt(color[4], 16);
     }
@@ -95,7 +96,7 @@ exports.hex2rgb = function(color){
     r = parseInt(color.substr(1, 2), 16);
     g = parseInt(color.substr(3, 2), 16);
     b = parseInt(color.substr(5, 2), 16);
-    a = 255;
+    a = Math.round(255 * alpha);
     if(color.length===9) {
       a = parseInt(color.substr(7, 2), 16);
     }
@@ -114,19 +115,21 @@ exports.setColorPalette = function(customColors){
 };
 
 // internal function to force various types into an RGBA quadruplet 
-exports.forceRGB = function(color) {
+exports.forceRGB = function(color, alpha) {
+  alpha = alpha === undefined ? 1.0 : +alpha;
   if (typeof color === 'string') {
     var lookup = COLORS[color];
     if (lookup !== undefined) {
-      return lookup;
+      color = rgb.clone(lookup);
+      color[3] = alpha;
     }
     if (color.length > 0 && color[0] === '#') {
-     return exports.hex2rgb(color);
+     return exports.hex2rgb(color, alpha);
     }
   }
   // in case no alpha component is provided, default alpha to 1.0
   if (color.length === 3) {
-    return [color[0], color[1], color[2], 1.0];
+    return [color[0], color[1], color[2], alpha];
   }
   return color;
 };

src/gfx/cam.js

@@ -28,6 +28,7 @@ define(
 "use strict";
 
 var vec3 = glMatrix.vec3;
+var vec4 = glMatrix.vec4;
 var mat4 = glMatrix.mat4;
 
 function floatArraysAreEqual(lhs, rhs) {
@@ -62,7 +63,7 @@ function Cam(gl) {
   this._outlineColor = vec3.fromValues(0.1, 0.1, 0.1);
   this._outlineWidth = 1.0;
   this._outlineEnabled = true;
-  this._selectionColor = vec3.fromValues(0.1, 1.0, 0.1);
+  this._selectionColor = vec4.fromValues(0.1, 1.0, 0.1, 0.7);
   this._center = vec3.create();
   this._zoom = 50;
   this._screenDoorTransparency = false;
@@ -333,6 +334,11 @@ Cam.prototype = {
   },
   setSelectionColor : function(color) {
     this._selectionColor = vec3.clone(color);
+    if (color.length === 3) {
+      this._selectionColor = vec4.fromValues(color[0], color[1], color[2], 0.7);
+    } else {
+      this._selectionColor = vec4.clone(color);
+    }
   },
 
   // sets all OpenGL parameters to make this camera active.
@@ -382,7 +388,7 @@ Cam.prototype = {
     gl.uniform1f(shader.fogNear, this._fogNear + nearOffset);
     gl.uniform3fv(shader.fogColor, this._fogColor);
     gl.uniform3fv(shader.outlineColor, this._outlineColor);
-    gl.uniform3fv(shader.selectionColor, this._selectionColor);
+    gl.uniform4fv(shader.selectionColor, this._selectionColor);
     gl.uniform2fv(shader.relativePixelSize, this._relativePixelSize);
     gl.uniform1f(shader.outlineWidth, this._outlineWidth);
     gl.uniform1i(shader.screenDoorTransparency, this._screenDoorTransparency);

src/gfx/shaders.js

@@ -51,10 +51,11 @@ int intMod(int x, int y) { \n\
   return x-y*z;\n\
 }\n\
 \n\
-uniform vec3 selectionColor;\n\
+uniform vec4 selectionColor;\n\
 \n\
 vec3 handleSelect(vec3 inColor, float vertSelect) { \n\
-  return mix(inColor, selectionColor, step(0.5, vertSelect) * 0.7); \n\
+  return mix(inColor, selectionColor.rgb, \n\
+             step(0.5, vertSelect) * selectionColor.a); \n\
 } \n\
 \n\
 uniform bool fog;\n\
@@ -90,11 +91,11 @@ uniform float fogNear;\n\
 uniform float fogFar;\n\
 uniform vec3 fogColor;\n\
 uniform bool fog;\n\
-uniform vec3 selectionColor;\n\
+uniform vec4 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 = mix(vec4(0.0, 0.0, 0.0, 0.0), \n\
+                     vec4(selectionColor.rgb, 1.0), 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\
@@ -246,7 +247,7 @@ varying float vertSelect;\n\
 uniform vec3 outlineColor;\n\
 \n\
 void main() {\n\
-  gl_FragColor = vec4(mix(outlineColor, selectionColor, \n\
+  gl_FragColor = vec4(mix(outlineColor, selectionColor.rgb, \n\
                           step(0.5, vertSelect)), \n\
                       vertAlpha);\n\
   gl_FragColor.rgb = handleFog(gl_FragColor.rgb);\n\

src/viewer.js

@@ -271,7 +271,7 @@ Viewer.prototype = {
       outline : optValue(opts, 'outline', true),
       outlineColor : color.forceRGB(optValue(opts, 'outlineColor', 'black')),
       outlineWidth: optValue(opts, 'outlineWidth', 1.5),
-      selectionColor : color.forceRGB(optValue(opts, 'selectionColor', '#3f3')),
+      selectionColor : color.forceRGB(optValue(opts, 'selectionColor', '#3f3'), 0.7),
       fov : optValue(opts, 'fov', 45.0),
       doubleClick : getDoubleClickHandler(opts),
       click : getClickHandler(opts),
@@ -332,7 +332,7 @@ Viewer.prototype = {
       } else if (optName === 'fov') {
         this._cam.setFieldOfViewY(value * Math.PI / 180.0);
       } else if (optName === 'selectionColor') {
-        this._cam.setSelectionColor(color.forceRGB(value));
+        this._cam.setSelectionColor(color.forceRGB(value, 0.7));
       } else if (optName === 'outlineColor') {
         this._cam.setOutlineColorColor(color.forceRGB(value));
       } else if (optName === 'outlineWidth') {