Changeset 21911

Timestamp:

08/03/17 15:17:23 (8 years ago)

Author:

dlcheng

Message:

CHG: Updating js scripts.

Location:

issm/trunk-jpl/src/m

Files:

• array/arrayoperations.js (modified) (8 diffs)
• classes/clusters/generic.js (modified) (2 diffs)
• plot/applyoptions.js (modified) (18 diffs)
• plot/plot_mesh.js (modified) (1 diff)
• plot/plot_overlay.js (modified) (4 diffs)
• plot/plot_quiver.js (modified) (1 diff)
• plot/plot_unit.js (modified) (3 diffs)
• plot/webgl.js (modified) (18 diffs)
• plot/webgl_node.js (modified) (9 diffs)
• solve/WriteData.js (modified) (1 diff)

issm/trunk-jpl/src/m/array/arrayoperations.js

@@ -1 +1 @@
 function ArrayMax(array){ //{{{
-        return Math.max.apply(null,array);
+        //Calculate array max using for loop instead of Math.max.apply(null, array) to avoid recursive stack overflow in mobile browsers
+        
+        var max=-Infinity;
+        
+        for (var i=0;i<array.length; i++) {
+                max=Math.max(max,array[i]);
+        }
+        
+        return max;
 } //}}}
 function ArrayMax2D(array){ //{{{
         
-        var max=0;
+        var max=-Infinity;
 
         for (var i=0;i<array.length;i++){
@@ -14 +22 @@
 } //}}}
 function ArrayMin(array){ //{{{
-        return Math.min.apply(null,array);
+        //Calculate array min using for loop instead of Math.min.apply(null, array) to avoid recursive stack overflow in mobile browsers
+        
+        var min=Infinity;
+        
+        for (var i=0;i<array.length; i++) {
+                min=Math.min(min,array[i]);
+        }
+        
+        return min;
+} //}}}
+function ArrayMin2D(array){ //{{{
+        
+        var min=Infinity;
+
+        for (var i=0;i<array.length;i++){
+                var subarray=array[i];
+                min=Math.min(min,ArrayMin(subarray));
+        }
+
+        return min;
 } //}}}
 function ArraySum(array){ //{{{
@@ -66 +93 @@
         return or;
 
-} //}}}
-function ArrayMin2D(array){ //{{{
-        
-        var min=ArrayMax2D(array);
-
-        for (var i=0;i<array.length;i++){
-                var subarray=array[i];
-                min=Math.min(min,ArrayMin(subarray));
-        }
-
-        return min;
 } //}}}
 function ListToMatrix(list, elementsPerSubArray) { //{{{
@@ -126 +142 @@
 function ArrayNot(array) { //{{{
 
-        var notarray=array;
+        var notarray=array.slice();
         for (var i=0;i<array.length;i++)notarray[i]=-array[i];
         return notarray;
@@ -138 +154 @@
 function ArrayPow(array,coefficient) { //{{{
 
-        var powarray=array;
+        var powarray=array.slice();
         for (var i=0;i<array.length;i++)powarray[i]=Math.pow(array[i],coefficient);
         return powarray;
@@ -144 +160 @@
 function ArraySqrt(array) { //{{{
 
-        var sqrtarray=array;
+        var sqrtarray=array.slice();
         for (var i=0;i<array.length;i++)sqrtarray[i]=Math.sqrt(array[i]);
         return sqrtarray;
@@ -150 +166 @@
 function ArrayScale(array,alpha) { //{{{
 
-        for (var i=0;i<array.length;i++)array[i]=array[i]*alpha;
-
+        var scalearray=array.slice();
+        for (var i=0;i<array.length;i++)scalearray[i]=array[i]*alpha;
+        return scalearray;
 } //}}}
 function ArrayMag(array1,array2) { //{{{
@@ -250 +267 @@
 } //}}}
 function NewArrayFill(size,value) { //{{{
-
-        return new Array(size).fill(value);
+        
+        var array = new Array(size);
+        
+        for (var i = 0; i < size; i++) {
+                array[i] = value;
+        }
+        
+        return array;
 } //}}}
 function NewArrayFillIncrement(size,start,increment) { //{{{

issm/trunk-jpl/src/m/classes/clusters/generic.js

@@ -53 +53 @@
                 } //}}}
                 var request = new XMLHttpRequest();
+                request.open("POST", this.url, true);
                 $(callbackid).html(sprintf("%-16s", "CONNECTING...")).prop("disabled", true);
                 request.position = 0; //Keep track of current parsing position in repsonseText
@@ -157 +158 @@
                 var data = new Blob([nplength,npbuffer,codeversionlength,codeversionbuffer,runtimenamelength,runtimenamebuffer,namelength,namebuffer,toolkitslength,toolkitsbuffer,solutionlength,solutionbuffer,binlength,binbuffer]);
                 
-                request.open("POST", this.url, true);
                 request.responseType = 'application/octet-stream';
                 request.send(data);

issm/trunk-jpl/src/m/plot/applyoptions.js

@@ -6 +6 @@
         //
         //   See also: PLOTMODEL, PARSE_OPTIONS
-        
+
         //{{{ colorbar
         var gl = canvas.gl;
@@ -16 +16 @@
                         var ccanvasid, ctitleid, clabelsid, ccanvas, ctitle, clabels, ccontext, cmap, colorbar, cwidth, cheight, cgradient, color, y, x;
                         //}}}
-                        //{{{ Create colorbar labels 
+                        //{{{ Create colorbar labels
                         var labels = [];
                         var cdivisions = options.getfieldvalue('colorbarnticks', 6);
@@ -49 +49 @@
                         } //}}}
                         //{{{ Initialize colorbar canvas
-                        ccanvasid = options.getfieldvalue('colorbarid', options.getfieldvalue('canvasid').replace('canvas','colorbar-canvas'));                 
+                        ccanvasid = options.getfieldvalue('colorbarid', options.getfieldvalue('canvasid').replace('canvas','colorbar-canvas'));
                         ccanvas = $('#'+ccanvasid)[0];
                         cwidth = ccanvas.width*options.getfieldvalue('colorbarwidth', 1);
@@ -63 +63 @@
                         for (var i=0; i < colorbar.length; i++) {
                                 color = colorbar[colorbar.length-i-1];
-                                color = [Math.round(color[0]*255), Math.round(color[1]*255), Math.round(color[2]*255)]; 
+                                color = [Math.round(color[0]*255), Math.round(color[1]*255), Math.round(color[2]*255)];
                                 cgradient.addColorStop(i/colorbar.length*(cdivisions/(cdivisions+1.0))+(1.0/(cdivisions+1.0)),'rgba('+color.toString()+', 1.0)');
                         }
@@ -107 +107 @@
                         if (options.exist('colorbartitle')) { ctitle.html(options.getfieldvalue('colorbartitle')); }
                         //}}}
-                } 
+                }
         } //}}}
         //{{{ texture canvas
@@ -119 +119 @@
         tcontext = tcanvas.getContext('2d');
         tgradient = tcontext.createLinearGradient(0, 0, 0, 256);
-                
+
         var cmap = options.getfieldvalue('colormap','jet');
         var colorbar = colorbars[cmap];
         for (var i=0; i < colorbar.length; i++) {
                 color = colorbar[colorbar.length-i-1];
-                color = [Math.round(color[0]*255), Math.round(color[1]*255), Math.round(color[2]*255)]; 
+                color = [Math.round(color[0]*255), Math.round(color[1]*255), Math.round(color[2]*255)];
                 tgradient.addColorStop(i/colorbar.length,'rgba('+color.toString()+', 1.0)');
         }
-        
+
         tcontext.fillStyle = tgradient;
         tcontext.fillRect(0, 0, 256, 256);
@@ -134 +134 @@
         //}}}
         //{{{ text display
-        if (options.exist('textlabels')) {
-                var textcanvas, textcanvasid;   
-                textcanvasid = options.getfieldvalue('textcanvasid', options.getfieldvalue('canvasid')+'-text');
-                textcanvas = $('#'+textcanvasid);
-                textcanvas.textlabels = options.getfieldvalue('textlabels',[]);
+        var overlaycanvasid = options.getfieldvalue('overlayid', options.getfieldvalue('canvasid')+'-overlay');
+        var overlaycanvas = $('#'+overlaycanvasid)[0];
+        if (!isEmptyOrUndefined(overlaycanvas)) {
+                //Get drawing context and save reference on main WebGL canvas
+                var ctx = overlaycanvas.getContext('2d');
+                canvas.overlaycanvas = overlaycanvas;
                 
-                //setup drawing function for text canvas draw calls
-                textcanvas.draw = function(canvas) {
-                        var textcontext, textlabels, textlabel, textcanvaswidth, textcanvasheight, textcoordinates;     
-                        var textposition = vec3.create();
-                        var mvpMatrix = mat4.create();
-                        
-                        //ensure correct canvas coordinate scaling
-                        textcanvaswidth = this[0].clientWidth;
-                        textcanvasheight = this[0].clientHeight;
-                        this[0].width  = textcanvaswidth;
-                        this[0].height = textcanvasheight;
-                        
-                        textcontext = this[0].getContext('2d');
-                        textlabels = options.getfieldvalue('textlabels',[]);
-                        textcontext.clearRect(0, 0, textcanvaswidth, textcanvasheight);
-                        
-                        //worldspace to screenspace transformation for text
-                        for (text in textlabels) {
-                                textlabel = textlabels[text];
-                                mat4.multiply(mvpMatrix, canvas.camera.vpMatrix, canvas.nodes.overlay.modelMatrix);
-                                textposition = vec3.transformMat4(textposition, textlabel.pos, mvpMatrix);
-                                if (textposition[2] > 1) { //clip coordinates with z > 1
-                                        continue;
-                                }
-                                textcoordinates = [(textposition[0]+1.0)/2.0*textcanvaswidth, (-textposition[1]+1.0)/2.0*textcanvasheight]; //NDC to screenspace
-                                textcontext.font = String(options.getfieldvalue('colorbarfontsize', 18))+'px "Lato", Helvetica, Arial, sans-serif';
-                                textcontext.fillStyle = options.getfieldvalue('colorbarfontcolor','black');
-                                textcontext.strokeStyle = options.getfieldvalue('colorbarfontcolor','black');
-                                textcontext.textAlign = 'center';
-                                textcontext.textBaseline = 'middle';
-                                textcontext.fillText(textlabel.text, textcoordinates[0], textcoordinates[1]);
-                                textcontext.strokeText(textlabel.text, textcoordinates[0], textcoordinates[1]);
-                        }
-                }
-                canvas.textcanvas = textcanvas;
-        } //}}}
+                //Resize interal viewport coordinates to match screenspace coordinates
+                var rect = overlaycanvas.getBoundingClientRect();
+                overlaycanvas.width  = rect.width;
+                overlaycanvas.height = rect.height;
+                
+                //Clear canvas each frame for any new drawings
+                canvas.overlayHandlers['draw'] = function(overlaycanvas) {
+                        ctx.clearRect(0, 0, overlaycanvas.width, overlaycanvas.height);
+                }
+        }
         //{{{ lat long overlay
         if (options.exist('latlongoverlay')) {
-                var overlaycanvasid = options.getfieldvalue('latlongoverlayid', options.getfieldvalue('canvasid')+'-overlay');
-                var overlaycanvas = $('#'+overlaycanvasid)[0];
                 var latitudes = {
                         //'-90': 1,
                         //'-65': .999,
                         '-60': 0.994046875,
-                        //'-55': 0.983187500000002,
-                        //'-50': 0.97173550854167,
                         '-45': 0.955729166666666,
-                        //'-40': 0.94218750000000218,
-                        //'-35': 0.94218750000000218,
                         '-30': 0.9226562500000024,
-                        //'-25': 0.87934895833333526,
-                        //'-20': 0.856572916666669,
                         //'-15': 0.830729166666665,
-                        //'-10': 0.803552708333336,
-                        //'-5': 0.77395833333333541,
                         '0': 0.74218749999999811,
-                        //'5': 0.70950364583333347,
-                        //'10': 0.67479166666666823,
                         //'15': 0.63932291666666663,
-                        //'20': 0.60171875,
-                        //'25': 0.563453125,
                         '30': 0.523390625000001,
-                        //'35': 0.48401875,
-                        //'40': 0.44296875,
                         '45': 0.4020001,
-                        //'50': 0.3578125,
-                        //'55': 0.311875,
                         '60': 0.26953124999999978,
                         //'65': 0.225390625,
-                        //'70': 0.18125,
-                        //'75': 0.13541666666666671,
-                        //'80': 0.08953125,
-                        //'85': 0.046250000000000013,
                         //'90': 0.0,
                 }
                 var longitudes = [-150, -120, -90, -60, -30, 0, 30, 60, 90, 120, 150, 180];
-                overlaycanvas.draw = function(canvas) {
-                        var rect = overlaycanvas.getBoundingClientRect();
-                        overlaycanvas.width  = rect.width;
-                        overlaycanvas.height = rect.height;
-                        var ctx = overlaycanvas.getContext('2d');
+                canvas.overlayHandlers['latlong'] = function(canvas) {
+                        //Transform from world space to viewport space
                         var centerx = overlaycanvas.width / 2;
                         var centery = overlaycanvas.height / 2;
                         var radius = (overlaycanvas.height) / 2;
+
+                        //Draw latitudes
                         ctx.setLineDash([5, 10]);
                         for(latitude in latitudes) {
@@ -229 +181 @@
                                 ctx.arc(centerx, centery, radius * latitudes[latitude], 0, 2 * Math.PI);
                                 ctx.stroke();
-                                ctx.font = String(options.getfieldvalue('colorbarfontsize', 18))+'px "Lato", Helvetica, Arial, sans-serif';
+                                ctx.font = 'bold ' + String(options.getfieldvalue('colorbarfontsize', 18))+'px "Lato", Helvetica, Arial, sans-serif';
                                 ctx.fillStyle = options.getfieldvalue('colorbarfontcolor','black');
                                 ctx.strokeStyle = options.getfieldvalue('colorbarfontcolor','black');
@@ -237 +189 @@
                                 ctx.strokeText(latitude, centerx, centery + radius * latitudes[latitude]);
                         }
+                        //Draw longitudes
                         ctx.setLineDash([1, 0]);
                         for (longitude in longitudes) {
@@ -245 +198 @@
                         }
                 }
-                canvas.overlaycanvas = overlaycanvas;
+        } //}}}
+        if (options.exist('textlabels')) {
+                //Attatch new overlay handler to display text labels
+                var textLabels = options.getfieldvalue('textlabels',[]);
+                canvas.overlayHandlers['text'] = function(canvas) {
+                        for (var i = 0; i < textLabels.length; i++) {
+                                //Get text label to display
+                                var textLabel = textLabels[i];
+                                textLabel = {
+                                        position: defaultFor(textLabel.position, vec3.create()),
+                                        text: defaultFor(textLabel.text, ''),
+                                        fontSize: defaultFor(textLabel.fontSize, 18),
+                                        fontColor: defaultFor(textLabel.fontColor, 'black'),
+
+                                };
+                                
+                                // function declared in slr-gfm sim-front-end-controller.js
+                                // if labels are behind the globe sphere then skip iteartion and do not display them
+                                if (isLabelVisible(textLabel)) {
+                                        //Transform from world space to viewport space
+                                        var screenPoint = vec3.transformMat4(vec3.create(), textLabel.position, canvas.camera.vpMatrix);
+                                        var x = (screenPoint[0] + 1.0) * (canvas.width / 2) + canvas.selector.offset().left;
+                                        var y = (-screenPoint[1] + 1.0) * (canvas.height / 2) + canvas.selector.offset().top;
+                                        
+                                        //Draw text
+                                        ctx.font = 'bold ' + String(textLabel.fontSize) + 'px Arial Black, sans-serif';
+                                        ctx.fillStyle = textLabel.fontColor;
+                                        ctx.strokeStyle = 'white';
+                                        ctx.textAlign = 'center';
+                                        ctx.textBaseline = 'middle';
+                                        ctx.fillText(textLabel.text, x, y);
+                                        ctx.strokeText(textLabel.text, x, y);
+                                }
+                        }
+                }
         } //}}}
         //{{{ additional rendering nodes
         if (options.exist('render')) {
                 var meshresults = processmesh(md, data, options);
-                var x = meshresults[0]; 
-                var y = meshresults[1]; 
-                var z = meshresults[2]; 
+                var x = meshresults[0];
+                var y = meshresults[1];
+                var z = meshresults[2];
                 var elements = meshresults[3];
-                var is2d = meshresults[4]; 
+                var is2d = meshresults[4];
                 var isplanet = meshresults[5];
-                
+
                 var xlim = options.getfieldvalue('xlim', [ArrayMin(x), ArrayMax(x)]);
                 var ylim = options.getfieldvalue('ylim', [ArrayMin(y), ArrayMax(y)]);
                 var zlim = options.getfieldvalue('zlim', [ArrayMin(z), ArrayMax(z)]);
 
-                var global = vec3.length([(xlim[0] + xlim[1]) / 2, (ylim[0] + ylim[1]) / 2, (zlim[0] + zlim[1]) / 2]) < 6371000/10; //tolerance for global models = center is 637100 meters away from center of earth   
-                var translation = global ? [(xlim[0] + xlim[1]) / 2, (ylim[0] + ylim[1]) / 2, (zlim[0] + zlim[1]) / 2] : [(xlim[0] + xlim[1]) / 2, (ylim[0] + ylim[1]) - 6371000, (zlim[0] + zlim[1]) / 2];
-                
+                var global = vec3.length([(xlim[0] + xlim[1]) / 2, (ylim[0] + ylim[1]) / 2, (zlim[0] + zlim[1]) / 2]) < 6371000/10; //tolerance for global models = center is 637100 meters away from center of earth
+                var translation = global ? [(xlim[0] + xlim[1]) / 2, (ylim[0] + ylim[1]) / 2, (zlim[0] + zlim[1]) / 2] : canvas.view.position;
+
                 var renderObjects = options.getfieldvalue('render',{});
-                if ('sky' in renderObjects && !('sky' in canvas.nodes)) {
-                        var object = renderObjects.sky;
+                for (var renderObject in renderObjects) {
+                        //Modify renderObejct?
+                        var object = renderObjects[renderObject];
                         object = {
-                                enabled: defaultFor(object.enabled, true),
-                                scale: defaultFor(object.scale, 1),
+                                enabled: defaultFor(object.enabled, true),                                      //Toggle display of the render object node
+                                scale: defaultFor(object.scale, 1),                                                     //Model matrix scaling
+                                x: defaultFor(object.x, [0.0, 1.0, 0.0, 0.0, 0.0, 0.0]),        //x coordinate array
+                                y: defaultFor(object.y, [0.0, 0.0, 0.0, 1.0, 0.0, 0.0]),        //y coordinate array
+                                z: defaultFor(object.z, [0.0, 0.0, 0.0, 0.0, 0.0, 1.0]),        //z coordinate array
+                                indices: defaultFor(object.indices, []),                                        //indices array
+                                name: defaultFor(object.name, 'NY'),                                            //Text to display for cities.
+                                size: defaultFor(object.size, 1),                                                       //Physical size of the object in meters
+                                color: defaultFor(object.color, 'black'),                                       //Diffuse color of object
+                                height: defaultFor(object.height, 25000),                                       //Height of object along y axis, currently for clouds only
+                                range: defaultFor(object.range, 120000),                                                //Range of sz plane to spawn object, currently for clouds only
+                                quantity: defaultFor(object.quantity, 15)                                       //Quantity of objects to display, currently for clouds only
                         };
-                        if (object.enabled) {
-                                var atmosphereScale = 1.25;
-                                var mesh = GL.Mesh.icosahedron({size: 6371000 * atmosphereScale, subdivisions: 5});
+                        if (!object.enabled) { continue; }
+                        if ('sky' === renderObject && !('sky' in canvas.nodes)) {
+                                var mesh = GL.Mesh.icosahedron({size: 6371000 * canvas.atmosphere.scaleHeight, subdivisions: 5});
                                 var texture = initTexture(gl, canvas.rootPath + 'textures/TychoSkymapII_t4_2k.jpg');
                                 node = new Node(
                                         'canvas', canvas,
                                         'options', options,
+                                        'renderObject', object,
                                         'name', 'sky',
                                         'shaderName', 'SkyFromSpace',
@@ -286 +285 @@
                                 );
                         }
-                }
-                if ('space' in renderObjects && !('space' in canvas.nodes)) {
-                        var object = renderObjects.space;
-                        object = {
-                                enabled: defaultFor(object.enabled, true),
-                                scale: defaultFor(object.scale, 1),
-                        };
-                        if (object.enabled) {
+                        if ('space' === renderObject && !('space' in canvas.nodes)) {
                                 var mesh = GL.Mesh.sphere({size: 6371000 * 20});
                                 var texture = initTexture(gl, canvas.rootPath + 'textures/TychoSkymapII_t4_2k.jpg');
@@ -299 +291 @@
                                         'canvas', canvas,
                                         'options', options,
+                                        'renderObject', object,
                                         'name', 'space',
                                         'shaderName', 'Textured',
@@ -308 +301 @@
                                 );
                         }
-                }
-                if ('coastlines' in renderObjects && !('coastlines' in canvas.nodes)) {
-                        var object = renderObjects.coastlines;
-                        object = {
-                                enabled: defaultFor(object.enabled, false),
-                                scale: defaultFor(object.scale, 1),
-                                x: defaultFor(object.x, {}),
-                                y: defaultFor(object.y, {}),
-                                z: defaultFor(object.z, {})
-                        };
-                        if (object.enabled) {
-                                node = new Node(
-                                        'canvas', canvas,
-                                        'options', options,
+                        if ('coastlines' === renderObject && !('coastlines' in canvas.nodes)) {
+                                node = new Node(
+                                        'canvas', canvas,
+                                        'options', options,
+                                        'renderObject', object,
                                         'name', 'coastlines',
                                         'shaderName', 'Colored',
@@ -331 +315 @@
                                 node.patch('Vertices', [object.x, object.y, object.z], 'FaceColor', 'none');
                         }
-                }
-                if ('graticule' in renderObjects && !('graticule' in canvas.nodes)) {
-                        var object = renderObjects.graticule;
-                        object = {
-                                enabled: defaultFor(object.enabled, false),
-                                scale: defaultFor(object.scale, 1),
-                                x: defaultFor(object.x, {}),
-                                y: defaultFor(object.y, {}),
-                                z: defaultFor(object.z, {})
-                        };
-                        if (object.enabled) {                   
-                                node = new Node(
-                                        'canvas', canvas,
-                                        'options', options,
+                        if ('graticule' === renderObject && !('graticule' in canvas.nodes)) {
+                                node = new Node(
+                                        'canvas', canvas,
+                                        'options', options,
+                                        'renderObject', object,
                                         'name', 'graticule',
                                         'shaderName', 'Colored',
@@ -350 +325 @@
                                         'lineWidth', options.getfieldvalue('linewidth', 1),
                                         'scale', [object.scale, object.scale, object.scale],
-                                        'rotation', [-90, 0, 0]
+                                        'rotation', [-90, 180, 0]
                                 );
                                 node.patch('Vertices', [object.x, object.y, object.z], 'FaceColor', 'none');
                         }
-                }
-                if ('cities' in renderObjects && !('cities' in canvas.nodes)) {
-                        var object = renderObjects.cities;
-                        object = {
-                                enabled: defaultFor(object.enabled, false),
-                                scale: defaultFor(object.scale, 1),
-                                size: defaultFor(object.size, 1.5),
-                                color: defaultFor(object.color, 'black'),
-                                x: defaultFor(object.x, {}),
-                                y: defaultFor(object.y, {}),
-                                z: defaultFor(object.z, {}),
-                                indices: defaultFor(object.indices, {})
-                        };
-                        if (object.enabled) {
+                        if ('cities' === renderObject && !('cities' in canvas.nodes)) {
                                 var mesh = GL.Mesh.icosahedron({size: object.size, subdivisions: 1});
                                 node = new Node(
                                         'canvas', canvas,
                                         'options', options,
+                                        'renderObject', object,
                                         'name', 'cities',
-                                        'shaderName', 'Colored',
+                                        'shaderName', 'ColoredDiffuse',
                                         'diffuseColor', object.color,
                                         'lineWidth', options.getfieldvalue('linewidth', 1),
@@ -381 +344 @@
                                 node.geometryShader('Mesh', mesh, 'Vertices', [object.x, object.y, object.z], 'Indices', object.indices);
                         }
-                }
-                if ('city' in renderObjects) {
-                        var object = renderObjects.city;
-                        object = {
-                                enabled: defaultFor(object.enabled, false),
-                                name: defaultFor(object.name, 'NY'),
-                                size: defaultFor(object.size, 15000),
-                                color: defaultFor(object.color, 'magenta'),
-                                x: defaultFor(object.x, {}),
-                                y: defaultFor(object.y, {}),
-                                z: defaultFor(object.z, {})
-                        };
-                        if (object.enabled) {
+                        if ('axis' === renderObject && !('axis' in canvas.nodes)) {             
+                                node = new Node(
+                                        'canvas', canvas,
+                                        'options', options,
+                                        'renderObject', object,
+                                        'name', 'axis',
+                                        'shaderName', 'Colored',
+                                        'drawMode', gl.LINES,
+                                        'lineWidth', options.getfieldvalue('linewidth', 1),
+                                        'scale', [object.scale, object.scale, object.scale],
+                                        'rotation', [0, 0, 0]
+                                );
+                                node.patch('Vertices', [object.x, object.y, object.z], 'FaceColor', 'none');
+                        }
+                        if ('city' === renderObject) {
                                 //city
                                 var mesh = GL.Mesh.sphere({size: object.size});
@@ -399 +364 @@
                                         'canvas', canvas,
                                         'options', options,
+                                        'renderObject', object,
                                         'name', 'city',
-                                        'shaderName', 'Colored',
+                                        'shaderName', 'ColoredDiffuse',
                                         'diffuseColor', object.color,
                                         'mesh', mesh,
                                         'translation', [object.x, object.z, -object.y]
                                 );
-                                
-                                var overlaycanvasid = options.getfieldvalue('overlayid', options.getfieldvalue('canvasid')+'-overlay');
-                                var overlaycanvas = $('#'+overlaycanvasid)[0];
-                                overlaycanvas.draw = function(canvas) {
-                                        var rect = overlaycanvas.getBoundingClientRect();
-                                        overlaycanvas.width  = rect.width;
-                                        overlaycanvas.height = rect.height;
-                                        var ctx = overlaycanvas.getContext('2d');
+                                //Attatch new overlay handler to display city name
+                                canvas.overlayHandlers['city'] = function(canvas) {
                                         var node = canvas.nodes['city'];
-                                        node.translation = [object.x, object.z, -object.y];
-                                        node.updateModelMatrix();
+                                        var object = node.renderObject;
                                         var screenPoint = vec3.transformMat4(vec3.create(), node.translation, canvas.camera.vpMatrix);
                                         var x = (screenPoint[0] + 1.0) * (canvas.width / 2) + canvas.selector.offset().left;
                                         var y = (-screenPoint[1] + 1.0) * (canvas.height / 2) + canvas.selector.offset().top;
 
-                                        ctx.font = String(options.getfieldvalue('colorbarfontsize', 22))+'px Arial Black, sans-serif';
+                                        ctx.font = 'bold ' + String(options.getfieldvalue('colorbarfontsize', 22))+'px Arial Black, sans-serif';
                                         ctx.fillStyle = options.getfieldvalue('colorbarfontcolor','black');
                                         ctx.strokeStyle = 'white';
@@ -428 +387 @@
                                         ctx.strokeText(object.name, x, y);
                                 }
-                                canvas.overlaycanvas = overlaycanvas;
-                        }
-                }
-                if (canvas.clouds.enabled) {
-                        //clouds
-                        for (var i = 0; i < canvas.clouds.quantity; i++) {
+                        }
+                        if ('clouds' === renderObject && !('clouds0' in canvas.nodes)) {
+                                //clouds                                
                                 var mesh = GL.Mesh.fromURL(canvas.rootPath+'obj/cloud.obj');
-                                translation = [translation[0] + Math.floor((Math.random() * (1 + 12000 - (-12000)) + (-12000))), translation[1] - 405000, translation[2]  + Math.floor((Math.random() * (1 + 12000 - (-12000)) + (-12000)))];
-                                node = new Node(
-                                        'canvas', canvas,
-                                        'options', options,
-                                        'name', 'clouds' + i,
-                                        'shaderName', 'Textured',
-                                        'animation', {'time': Date.now(),'target': translation,'current': translation},
-                                        'diffuseColor', [0.7,0.7,0.7,1.0],
-                                        'mesh', mesh,
-                                        'scale', [2500, 2500, 2500],
-                                        'translation', translation
-                                );
+                                for (var i = 0; i < object.quantity; i++) {
+                                        //TODO: More options, less magic numbers. Add animation. Better shading.
+                                        var offset = [  translation[0] + (Math.random() - 0.5) * 2 * object.range, 
+                                                                        translation[1] + object.height + (Math.random() - 0.5) * 0.2 * object.range, 
+                                                                        translation[2] + (Math.random() - 0.5) * 2 * object.range];
+                                        node = new Node(
+                                                'canvas', canvas,
+                                                'options', options,
+                                                'renderObject', object,
+                                                'name', 'clouds' + i,
+                                                'shaderName', 'ColoredDiffuse',
+                                                'animation', {'time': Date.now(),'target': translation,'current': translation},
+                                                'diffuseColor', [0.7,0.7,0.7,1.0],
+                                                'specularColor', [0.0,0.0,0.0,1.0],
+                                                'mesh', mesh,
+                                                'scale', [object.scale, object.scale, object.scale],
+                                                'translation', offset
+                                        );
+                                }
                         }
                 }

issm/trunk-jpl/src/m/plot/plot_mesh.js

@@ -31 +31 @@
         }
         else {
-                vertices = Node.prototype.scaleVertices(md, x, y, z, options.getfieldvalue('heightscale', 1));
+                vertices = Node.prototype.scaleVertices(md, x, y, z, elements, options.getfieldvalue('heightscale', 1), options.getfieldvalue('maskscale',{}));
                 scale = [1, 1, 1];
         }

issm/trunk-jpl/src/m/plot/plot_overlay.js

@@ -41 +41 @@
         }
         else {
-                vertices = Node.prototype.scaleVertices(md, x, y, z, options.getfieldvalue('heightscale', 1));
+                vertices = Node.prototype.scaleVertices(md, x, y, z, elements, options.getfieldvalue('heightscale', 1), options.getfieldvalue('maskscale',{}));
                 scale = [1, 1, 1];
         }
@@ -52 +52 @@
                 'options', options,
                 'name', 'overlay',
-                'shaderName', 'ground' in options.getfieldvalue('render', {}) ? 'GroundFromSpace' : 'Textured',
+                'shaderName', 'ground' in options.getfieldvalue('render', {}) ? 'GroundFromSpace' : 'TexturedDiffuse',
                 'alpha', options.getfieldvalue('outeralpha', 1.0),
                 //'center', [(xlim[0] + xlim[1]) / 2, (ylim[0] + ylim[1]) / 2, md.mesh.classname() === 'mesh3dsurface' ? (zlim[0] + zlim[1]) / 2 : zlim[0]],
                 'center', [(xlim[0] + xlim[1]) / 2, (ylim[0] + ylim[1]) / 2, (zlim[0] + zlim[1]) / 2],
-                'diffuseColor', 'white',
+                'ambientColor', [0.1, 0.1, 0.1 ,1.0],
+                'diffuseColor', [1.0, 1.0, 1.0 ,1.0],
+                'specularStrength', 0.0,
                 'maskEnabled', options.getfieldvalue('outermask','off') == 'on',
                 'maskHeight', options.getfieldvalue('outermaskheight', 150.0),
@@ -65 +67 @@
         );
         //}}}
-        
+
         var xRange = xlim[1] - xlim[0];
         var yRange = ylim[1] - ylim[0];
         var coordArray = [new Array(x.length), new Array(x.length)];
+        
         //generate mesh:
-        
         if (md.mesh.classname() == 'mesh3dsurface') {
                 var xyz, magnitude;
@@ -87 +89 @@
                 }
         }
-        node.patch('Faces', elements, 'Vertices', vertices, 'FaceVertexCData', coordArray, 'FaceColor', 'interp', 'EdgeColor', edgecolor);
+        node.patch('Faces', elements, 'Vertices', vertices, 'FaceVertexCData', coordArray, 'FaceColor', 'interp');
 } //}}}

issm/trunk-jpl/src/m/plot/plot_quiver.js

@@ -37 +37 @@
         }
         else {
-                vertices = Node.prototype.scaleVertices(md, x, y, z, options.getfieldvalue('heightscale', 1));
+                vertices = Node.prototype.scaleVertices(md, x, y, z, elements, options.getfieldvalue('heightscale', 1), options.getfieldvalue('maskscale',{}));
                 scale = [1, 1, 1];
         }

issm/trunk-jpl/src/m/plot/plot_unit.js

@@ -13 +13 @@
         //}
         //else {
-                
+
         //{{{ declare variables:
         //Process data and model
@@ -37 +37 @@
         }
         else {
-                vertices = Node.prototype.scaleVertices(md, x, y, z, options.getfieldvalue('heightscale', 1));
+                vertices = Node.prototype.scaleVertices(md, x, y, z, elements, options.getfieldvalue('heightscale', 1), options.getfieldvalue('maskscale',{}));
                 scale = [1, 1, 1];
         }
         
         //Compute gl variables:
-        var edgecolor = options.getfieldvalue('edgecolor', 'black');
+        var edgecolor = options.getfieldvalue('edgecolor', [1.0, 1.0, 1.0 ,1.0]);
         var maskzeros = options.getfieldvalue('maskzeros', {});
         var node = new Node(
@@ -48 +48 @@
                 'options', options,
                 'name', 'unit',
-                'shaderName', 'Textured',
+                'shaderName', 'TexturedDiffuse',
                 'alpha', options.getfieldvalue('alpha', 1.0),
                 'caxis', options.getfieldvalue('caxis',[ArrayMin(data), ArrayMax(data)]),
                 //'center', [(xlim[0] + xlim[1]) / 2, (ylim[0] + ylim[1]) / 2, md.mesh.classname() === 'mesh3dsurface' ? (zlim[0] + zlim[1]) / 2 : zlim[0]],
                 'center', [(xlim[0] + xlim[1]) / 2, (ylim[0] + ylim[1]) / 2, (zlim[0] + zlim[1]) / 2],
+                'lightingBias', 0.8,
                 'diffuseColor', edgecolor,
+                'specularStrength', 0.0,
                 'enabled', options.getfieldvalue('nodata','off') == 'off',
                 'log', options.getfieldvalue('log',false),

issm/trunk-jpl/src/m/plot/webgl.js

@@ -9 +9 @@
                 if (!isEmptyOrUndefined(canvas.animation) && canvas.animation.handler !== 0) { clearInterval(canvas.animation.handler); }
                 initWebGL(canvas, options);
-                initializeMarker(canvas);
                 draw(canvas);
                 canvas.initialized = true;
+                
+                //The onStart event triggers once per plotmodel call load after WebGL and canvas initialization are complete
+                canvas.selector.trigger('onStart', [canvas]);
         }
         return canvas;
@@ -34 +36 @@
                 mc.add(new Hammer.Pan({threshold: 0, pointers: 0}));
                 mc.add(new Hammer.Pinch({threshold: 0})).recognizeWith(mc.get('pan'));
-                mc.on('tap press', function (ev) {onTap(ev, canvas);});
+                mc.on('tap', function (ev) {onTap(ev, canvas);});
                 mc.on('panstart panmove', function (ev) {onPan(ev, canvas, displayview);});
-                mc.on('pinchstart pinchmove', function (ev) {onPinch(ev, canvas, displayview);});               
+                mc.on('pinchstart pinchmove', function (ev) {onPinch(ev, canvas, displayview);});
                 canvas.addEventListener('mousewheel', function (ev) {onZoom(ev, canvas, displayzoom)}, false);
                 canvas.addEventListener('DOMMouseScroll', function (ev) {onZoom(ev, canvas, displayzoom)}, false);
@@ -46 +48 @@
                 canvas.unitData = {};
                 canvas.unitMovieData = {};
+                
                 canvas.gl = gl;
                 canvas.rootPath = options.getfieldvalue('rootpath', '../../../js/');
@@ -57 +60 @@
         
         //Add context state variables
+        canvas.render = options.getfieldvalue('render', {});
         canvas.controlSensitivity = options.getfieldvalue('controlsensitivity', 1);
+        canvas.overlayHandlers = {};
         var backgroundcolor = new RGBColor(options.getfieldvalue('backgroundcolor', 'lightcyan'));
         if (backgroundcolor.ok) { canvas.backgroundcolor = [backgroundcolor.r/255.0, backgroundcolor.g/255.0, backgroundcolor.b/255.0, 1.0]; }
@@ -63 +68 @@
         
         //Property intiialization, using values from options first, then from default values.
+        var atmosphere = options.getfieldvalue('atmosphere', {});
+        canvas.atmosphere = {                                                                                           //Default Values
+                wavelength_r: defaultFor(atmosphere.wavelength_r,                       0.65),          //0.65          Red wavelength (micrometers)
+                wavelength_g: defaultFor(atmosphere.wavelength_g,                       0.57),          //0.57          Green wavelength (micrometers)
+                wavelength_b: defaultFor(atmosphere.wavelength_b,                       0.475),         //0.475         Green wavelength (micrometers)
+                eSun:   defaultFor(atmosphere.eSun,                                             100.0),         //20.0          Sun intensity   
+                kRayleigh: defaultFor(atmosphere.kRayleigh,                             0.0025),        //0.0025        Rayleigh scattering amount
+                kMie: defaultFor(atmosphere.kMie,                                                       0.000),         //0.01          Mie scattering amount
+                g: defaultFor(atmosphere.g,                                                             -0.99),         //-0.99         Mie phase asymmetry/direction factor
+                hdr_exposure: defaultFor(atmosphere.hdr_exposure,                       0.8),           //0.8           High Dynamic Range Exposure
+                scaleHeight: defaultFor(atmosphere.scaleHeight,                         1.25),          //1.025         Scale of height of atmosphere to earth radius.
+                scaleDepth: defaultFor(atmosphere.scaleDepth,                           0.25),          //0.25          Percentage altitude at which the atmosphere's average density is found
+                a: defaultFor(atmosphere.a,                                                             -0.00287),      //-0.00287      Scaling constant a
+                b: defaultFor(atmosphere.b,                                                             0.459),         //0.459         Scaling constant b
+                c: defaultFor(atmosphere.c,                                                             3.83),          //3.83          Scaling constant c
+                d: defaultFor(atmosphere.d,                                                             -6.80),         //-6.80         Scaling constant d
+                e: defaultFor(atmosphere.e,                                                             3.6),           //5.25          Scaling constant e. Lower when increasing atmosphere scale.
+                attenuation: defaultFor(atmosphere.attenuation,                         0.5)            //0.5           Strength of atmospheric scattering on ground shading.
+        };
+        updateAtmosphereParameters(canvas);
         var animation = options.getfieldvalue('movies', {});
         canvas.animation = {
-                frame: defaultFor(animation.frame, 0),
-                play: defaultFor(animation.play, true),
-                increment: defaultFor(animation.increment, true),
-                fps: defaultFor(animation.fps, 4),
-                interval: defaultFor(animation.interval, 1000 / animation.fps),
-                loop: defaultFor(animation.loop, true),
-                handler: defaultFor(animation.handler, 0)
+                frame: defaultFor(animation.frame,                                                      0),
+                play: defaultFor(animation.play,                                                        true),
+                increment: defaultFor(animation.increment,                                      true),
+                fps: defaultFor(animation.fps,                                                          4),
+                interval: defaultFor(animation.interval,                                        1000 / defaultFor(animation.fps, 4)),
+                loop: defaultFor(animation.loop,                                                        true),
+                handler: defaultFor(animation.handler,                                          0)
         }
         var brush = options.getfieldvalue('brush', {});
         canvas.brush = {
-                enabled: defaultFor(brush.enabled, false),
-                strength: defaultFor(brush.strength, 0.075),
-                falloff: defaultFor(brush.falloff, 0.5),
-                hit: defaultFor(brush.hit, {})
+                enabled: defaultFor(brush.enabled,                                                      false),
+                strength: defaultFor(brush.strength,                                            0.075),
+                falloff: defaultFor(brush.falloff,                                                      0.5),
+                hit: defaultFor(brush.hit,                                                                      {})
         };
         var camera = options.getfieldvalue('camera', {});
         canvas.camera = {
-                position: defaultFor(camera.position, vec3.create()),
-                rotation: defaultFor(camera.rotation, vec3.create()),
-                near: defaultFor(camera.near, 1e3),
-                far: defaultFor(camera.far, 1e10),
-                fov: defaultFor(camera.fov, 45),
-                vMatrix: defaultFor(camera.vMatrix, mat4.create()),
-                pMatrix: defaultFor(camera.pMatrix, mat4.create()),
-                vpMatrix: defaultFor(camera.vpMatrix, mat4.create()),
-                vInverseMatrix: defaultFor(camera.vInverseMatrix, mat4.create()),
-                pInverseMatrix: defaultFor(camera.pInverseMatrix, mat4.create()),
-                vpInverseMatrix: defaultFor(camera.vpInverseMatrix, mat4.create()),
-                ready: defaultFor(camera.ready, false)
-        };
-        var clouds = options.getfieldvalue('clouds', {});
-        canvas.clouds = {
-                enabled: defaultFor(clouds.enabled, false),
-                height: defaultFor(clouds.height, 7500),
-                quantity: defaultFor(clouds.quantity, 10),
-                hit: defaultFor(clouds.hit, {})
+                position: defaultFor(camera.position,                                           vec3.create()),
+                rotation: defaultFor(camera.rotation,                                           quat.create()),
+                relativePosition: defaultFor(camera.relativePosition,           vec3.create()),
+                direction: defaultFor(camera.direction,                                         vec3.create()),
+                near: defaultFor(camera.near,                                                           1e3),
+                far: defaultFor(camera.far,                                                             1e10),
+                fov: defaultFor(camera.fov,                                                             45),
+                vMatrix: defaultFor(camera.vMatrix,                                             mat4.create()),
+                pMatrix: defaultFor(camera.pMatrix,                                             mat4.create()),
+                vpMatrix: defaultFor(camera.vpMatrix,                                           mat4.create()),
+                vInverseMatrix: defaultFor(camera.vInverseMatrix,                       mat4.create()),
+                pInverseMatrix: defaultFor(camera.pInverseMatrix,                       mat4.create()),
+                vpInverseMatrix: defaultFor(camera.vpInverseMatrix,             mat4.create()),
+                ready: defaultFor(camera.ready,                                                         false)
         };
         var dataMarkers = options.getfieldvalue('datamarkers', {});
         canvas.dataMarkers = {
-                enabled: defaultFor(dataMarkers.enabled, true),
-                values: defaultFor(dataMarkers.values, []),
-                image: defaultFor(dataMarkers.image, canvas.rootPath+'textures/data_marker.svg'),
-                size: defaultFor(dataMarkers.size, [32, 32]),
-                format: defaultFor(dataMarkers.format, ['X: %.2e<br>Y: %.2e<br>Z: %.2e<br>Value: %0.1f', 'x', 'y', 'z', 'value']),
-                animated: defaultFor(dataMarkers.animated, false),
-                labels: defaultFor(dataMarkers.labels, []),
-                font: defaultFor(dataMarkers.font, ''),
-                marker: defaultFor(dataMarkers.marker, document.getElementById('sim-data-marker-' + canvas.id)),
-                reposition: defaultFor(dataMarkers.reposition, true)
+                enabled: defaultFor(dataMarkers.enabled,                                        true),
+                values: defaultFor(dataMarkers.values,                                          []),
+                image: defaultFor(dataMarkers.image,                                            canvas.rootPath + 'textures/data_marker.svg'),
+                size: defaultFor(dataMarkers.size,                                                      [32, 32]),
+                format: defaultFor(dataMarkers.format,                                          ['X: %.2e<br>Y: %.2e<br>Z: %.2e<br>Value: %0.1f', 'x', 'y', 'z', 'value']),
+                animated: defaultFor(dataMarkers.animated,                                      false),
+                labels: defaultFor(dataMarkers.labels,                                          []),
+                font: defaultFor(dataMarkers.font,                                                      ''),
+                marker: defaultFor(dataMarkers.marker,                                          document.getElementById('sim-data-marker-' + canvas.id)),
+                reposition: defaultFor(dataMarkers.reposition,                          true)
         };
         var draw = options.getfieldvalue('draw', {});
         canvas.draw = {
-                ready: defaultFor(draw.ready, false),
-                handler: defaultFor(draw.handler, null)
+                ready: defaultFor(draw.ready,                                                           false),
+                handler: defaultFor(draw.handler,                                                       null)
         };
         var view = options.getfieldvalue('view', {});
         canvas.view = {
-                position: defaultFor(view.position, [0.0, 0.0, 0.0]),
-                rotation: defaultFor(view.rotation, [0, 90]),
-                zoom: defaultFor(view.zoom, 1.0),
-                zoomLimits: defaultFor(view.zoomLimits, [0.001, 100.0]),
-                lastZoom: defaultFor(view.lastZoom, 1.0),
-                azimuthLimits: defaultFor(view.azimuthLimits, [0, 360]),
-                elevationLimits: defaultFor(view.elevationLimits, [-180, 180]),
-                panningEnabled: defaultFor(view.panningEnabled, false),
-                twod: defaultFor(view.twod, false)
+                position: defaultFor(view.position,                                             [0.0, 0.0, 0.0]),
+                rotation: defaultFor(view.rotation,                                             [0, 90]),
+                zoom: defaultFor(view.zoom,                                                             1.0),
+                zoomLimits: defaultFor(view.zoomLimits,                                         [0.001, 100.0]),
+                lastZoom: defaultFor(view.lastZoom,                                             1.0),
+                azimuthLimits: defaultFor(view.azimuthLimits,                           [0, 360]),
+                elevationLimits: defaultFor(view.elevationLimits,                       [-180, 180]),
+                panningEnabled: defaultFor(view.panningEnabled,                         false),
+                preventDefaultOnPan: defaultFor(view.preventDefaultOnPan,       false),
+                twod: defaultFor(view.twod,                                                             false)
         };
 
@@ -171 +192 @@
         var shaders = {};
         shaders.Colored = new GL.Shader.fromURL(rootPath+'shaders/Colored.vsh', rootPath+'shaders/Colored.fsh', null, gl);
+        shaders.ColoredDiffuse = new GL.Shader.fromURL(rootPath+'shaders/ColoredDiffuse.vsh', rootPath+'shaders/ColoredDiffuse.fsh', null, gl);
         shaders.Textured = new GL.Shader.fromURL(rootPath+'shaders/Textured.vsh', rootPath+'shaders/Textured.fsh', null, gl);
+        shaders.TexturedDiffuse = new GL.Shader.fromURL(rootPath+'shaders/TexturedDiffuse.vsh', rootPath+'shaders/TexturedDiffuse.fsh', null, gl);
         shaders.SkyFromSpace = new GL.Shader.fromURL(rootPath+'shaders/SkyFromSpace.vert', rootPath+'shaders/SkyFromSpace.frag', null, gl);
         shaders.GroundFromSpace = new GL.Shader.fromURL(rootPath+'shaders/GroundFromSpace.vert', rootPath+'shaders/GroundFromSpace.frag', null, gl);
-        shaders.Clouds = new GL.Shader.fromURL(rootPath+'shaders/Clouds.vert', rootPath+'shaders/Clouds.frag', null, gl);
         return shaders;
 } //}}}
@@ -184 +206 @@
         return gl.textures[imageSource];
 } //}}}
+function updateAtmosphereParameters(canvas) {
+        //Precalculate derived atmosphere shader parameters
+        //TODO: Find a better way to structure this
+        var atm = canvas.atmosphere;
+        atm.inv_wavelength4 = [1.0 / Math.pow(atm.wavelength_r, 4), 1.0 / Math.pow(atm.wavelength_g, 4), 1.0 / Math.pow(atm.wavelength_b, 4)];
+        atm.innerRadius = 6.371e6;
+        atm.innerRadius2 = atm.innerRadius * atm.innerRadius;
+        atm.outerRadius = atm.innerRadius * atm.scaleHeight;
+        atm.outerRadius2 = atm.outerRadius * atm.outerRadius;
+        atm.krESun = atm.kRayleigh * atm.eSun;
+        atm.kmESun = atm.kMie * atm.eSun;
+        atm.kr4PI = atm.kRayleigh * 4 * Math.PI;
+        atm.km4PI = atm.kMie * 4 * Math.PI;
+        atm.scale = 1.0 / (atm.outerRadius - atm.innerRadius);
+        atm.scaleOverScaleDepth = atm.scale / atm.scaleDepth;
+        atm.g2 = atm.g * atm.g;
+        canvas.atmosphere = atm;
+}
 function clamp(value, min, max) { //{{{
         return Math.max(min, Math.min(value, max));
@@ -253 +293 @@
 } //}}}
 //}}}
-//{{{ Interface Functions
+//{{{ Interaction Functions
 function onTap(ev, canvas) { //{{{
-        //Sets up a marker on a canvas that will track a point on the mesh. Can be dismissed by closing the display or clicking the marker.
         ev.preventDefault();
         
-        if (canvas.clouds.enabled) {
-                for (var i = 0; i < canvas.clouds.quantity; i++) {
-                        raycast(canvas, ev.srcEvent.layerX, ev.srcEvent.layerY, canvas.nodes["clouds" + i]);
-                }
-        }
-        var hit = raycast(canvas, ev.srcEvent.layerX, ev.srcEvent.layerY, canvas.unitNode);
-        if ('cities' in canvas.nodes) {
-                var hitCities = raycast(canvas, ev.srcEvent.layerX, ev.srcEvent.layerY, canvas.nodes.cities);
-                canvas.nodes.cities.hit = hitCities;
-                updateCities(canvas);
-        }
-
-        canvas.brush.hit = hit;
-        
-        if (canvas.dataMarkers.enabled) {
-                canvas.dataMarkers.marker.selector.closed = false;
-                canvas.dataMarkers.marker.hit = hit;
-                updateMarker(canvas, true);
-        }
-        
-        brushModify(canvas);
+        var hit = raycastXY(canvas, ev.srcEvent.layerX, ev.srcEvent.layerY, canvas.unitNode);
+
+        //Trigger any handlers attatched to this canvas event.
+        canvas.selector.trigger('onTap', [ev, canvas, hit]);
 } //}}}
 function onPan(ev, canvas, displaylog) { //{{{
         ev.preventDefault();
-        
-        if (canvas.dataMarkers.enabled) {
-                if (!isEmptyOrUndefined(canvas.unitNode)) {
-                        canvas.brush.hit = raycast(canvas, ev.srcEvent.layerX, ev.srcEvent.layerY, canvas.unitNode);
-                        brushModify(canvas);
-                }
-        }
-        
-        if (canvas.clouds.enabled) {
-                if (!isEmptyOrUndefined(canvas.nodes['overlay'])) {
-                        canvas.clouds.hit = raycast(canvas, ev.srcEvent.layerX, ev.srcEvent.layerY, canvas.nodes['overlay']);
-                        updateClouds(canvas);
-                }
-        }
         
         if (ev.type === 'panstart') {
@@ -301 +309 @@
                 canvas.lastDeltaY = 0;
         }
-        if (ev.srcEvent.shiftKey || ev.pointers.length === 2) {
-                if (!canvas.view.panningEnabled) return;
-                var deltaX = (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth / canvas.view.zoom * 2 * canvas.controlSensitivity * 6.371e6;
-                var deltaY = (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight / canvas.view.zoom * 2 * canvas.controlSensitivity * 6.371e6;
-                
-                if (canvas.view.twod) {
-                        canvas.view.position[0] += Math.cos(DEG2RAD * canvas.view.rotation[0]) * deltaX - Math.sin(DEG2RAD * 0) * deltaY;
-                        canvas.view.position[2] += Math.sin(DEG2RAD * canvas.view.rotation[0]) * deltaX + Math.cos(DEG2RAD * 0) * deltaY;
+        
+        //Trigger any handlers attatched to this canvas event.
+        canvas.selector.trigger('onPan', [ev, canvas]);
+        
+        //If any onPan handler sets preventDefaultOnPan to true, skips default onPan camera behavior
+        if (!canvas.view.preventDefaultOnPan) {
+                //If panning with two fingers or shift key, translate camera center
+                if (ev.srcEvent.shiftKey || ev.pointers.length === 2) {
+                        if (canvas.view.panningEnabled) {
+                                var deltaX = (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth / canvas.view.zoom * 2 * canvas.controlSensitivity * 6.371e6;
+                                var deltaY = (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight / canvas.view.zoom * 2 * canvas.controlSensitivity * 6.371e6;
+                                
+                                //TODO: convert canvas.view.rotation from az/el euler to quaternion
+                                if (canvas.view.twod) {
+                                        canvas.view.position[0] += Math.cos(DEG2RAD * canvas.view.rotation[0]) * deltaX - Math.sin(DEG2RAD * 0) * deltaY;
+                                        canvas.view.position[2] += Math.sin(DEG2RAD * canvas.view.rotation[0]) * deltaX + Math.cos(DEG2RAD * 0) * deltaY;
+                                }
+                                else {
+                                        canvas.view.position[0] += Math.cos(DEG2RAD * canvas.view.rotation[0]) * deltaX - Math.sin(DEG2RAD * canvas.view.rotation[0]) * deltaY;
+                                        canvas.view.position[2] += Math.sin(DEG2RAD * canvas.view.rotation[0]) * deltaX + Math.cos(DEG2RAD * canvas.view.rotation[0]) * deltaY;
+                                }
+                        }
                 }
+                //Else, rotate around camera center
                 else {
-                        canvas.view.position[0] += Math.cos(DEG2RAD * canvas.view.rotation[0]) * deltaX - Math.sin(DEG2RAD * canvas.view.rotation[0]) * deltaY;
-                        canvas.view.position[2] += Math.sin(DEG2RAD * canvas.view.rotation[0]) * deltaX + Math.cos(DEG2RAD * canvas.view.rotation[0]) * deltaY;
+                        canvas.view.rotation[0] += (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * 2 * canvas.controlSensitivity * RAD2DEG;
+                        canvas.view.rotation[1] += (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * -2 * canvas.controlSensitivity * RAD2DEG;
+                        
+                        if (canvas.view.rotation[0] > 360) { canvas.view.rotation[0] -= 360; };
+                        if (canvas.view.rotation[0] < -360) { canvas.view.rotation[0] += 360; };
+                        if (canvas.view.rotation[1] > 180) { canvas.view.rotation[1] -= 360; };
+                        if (canvas.view.rotation[1] < -180) { canvas.view.rotation[1] += 360; };
+                        
+                        canvas.view.rotation[0] = clamp(canvas.view.rotation[0], canvas.view.azimuthLimits[0], canvas.view.azimuthLimits[1]);
+                        canvas.view.rotation[1] = clamp(canvas.view.rotation[1], canvas.view.elevationLimits[0], canvas.view.elevationLimits[1]);
+                        
+                        if (displaylog) { console.log(canvas.view.rotation); }
                 }
-        }
-        
-        else {
-                canvas.view.rotation[0] += (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * 2 * canvas.controlSensitivity * RAD2DEG;
-                canvas.view.rotation[1] += (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * -2 * canvas.controlSensitivity * RAD2DEG;
-                
-                if (canvas.view.rotation[0] > 360) { canvas.view.rotation[0] -= 360; };
-                if (canvas.view.rotation[0] < -360) { canvas.view.rotation[0] += 360; };
-                if (canvas.view.rotation[1] > 180) { canvas.view.rotation[1] -= 360; };
-                if (canvas.view.rotation[1] < -180) { canvas.view.rotation[1] += 360; };
-                
-                canvas.view.rotation[0] = clamp(canvas.view.rotation[0], canvas.view.azimuthLimits[0], canvas.view.azimuthLimits[1]);
-                canvas.view.rotation[1] = clamp(canvas.view.rotation[1], canvas.view.elevationLimits[0], canvas.view.elevationLimits[1])
-        }
+        }       
+        
+        canvas.view.preventDefaultOnPan = false;
         canvas.lastDeltaX = ev.deltaX;
         canvas.lastDeltaY = ev.deltaY;
-        
-        canvas.dataMarkers.reposition = true;
-        
-        if (displaylog) { console.log(canvas.view.rotation); }
 } //}}}
 function onPinch(ev, canvas, displaylog) { //{{{
         ev.preventDefault();
         if (ev.type === 'pinchstart') { canvas.view.lastZoom = canvas.view.zoom; }
-        else { modifyZoom(ev.scale * canvas.view.lastZoom, canvas, displaylog); }
+        else { modifyZoom(ev.scale * canvas.view.lastZoom, canvas, displaylog, ev, 0); }
 } //}}}
 function onZoom(ev, canvas, displaylog) { //{{{
         ev.preventDefault();
-        var delta = clamp(ev.scale || ev.wheelDelta || -ev.detail, -1, 1) * canvas.controlSensitivity * canvas.view.zoom / 20;
-        modifyZoom(canvas.view.zoom + delta, canvas, displaylog);
-} //}}}
-function modifyZoom(value, canvas, displaylog) { //{{{
-        canvas.view.zoom = clamp(value, canvas.view.zoomLimits[0], canvas.view.zoomLimits[1]);
-        canvas.dataMarkers.reposition = true;
-        if (displaylog) { console.log(canvas.view.zoom); }
-} //}}}
-function modifyDataMarkersEnabled(value, canvas) { //{{{
-        canvas.dataMarkers.enabled = value;
+        var delta = clamp(ev.scale || ev.wheelDelta || -ev.detail, -1, 1) * canvas.controlSensitivity * canvas.view.zoom / 2;
+        modifyZoom(canvas.view.zoom + delta, canvas, displaylog, ev, 0);
+} //}}}
+function modifyZoom(value, canvas, displaylog, ev, duration) { //{{{
+        if (isEmptyOrUndefined(duration)) duration = 200;
+        var targetZoom = clamp(value, canvas.view.zoomLimits[0], canvas.view.zoomLimits[1]);
+        var currentZoom = canvas.view.zoom;
+        animateValue(
+                0,
+                1.0,
+                duration,
+                function(value, info) {
+                        canvas.view.zoom = currentZoom * (1 - value) + targetZoom * value;
+                        if (displaylog) { console.log(canvas.view.zoom); }
+                        
+                        //Trigger any handlers attatched to this canvas event.
+                        canvas.selector.trigger('onZoom', [ev, canvas]);
+                }
+        );
 } //}}}
 function toggleMoviePlay(canvas) { //{{{
@@ -364 +391 @@
         }
 } //}}}
-//}}}
-//{{{ Interaction Functions
-function raycast(canvas, x, y, node) { //{{{
-        //Performs raycast on canvas.unitNode.mesh using x/y screen coordinates. Returns hit objects with hit position, coords, and indicies of ray-triangle intersection.
+function screenToWorldPoint(canvas, x, y) { //{{{
+        var viewportX = (x - canvas.width / 2) / (canvas.width / 2);
+        var viewportY = (canvas.height / 2 - y) / (canvas.height / 2);
+        var origin = vec3.transformMat4(vec3.create(), [viewportX, viewportY, 0], canvas.camera.vpInverseMatrix);
+        return origin;
+} //}}}
+function screenToModelRay(canvas, x, y, node) { //{{{
+        var inverseMVPMatrix = mat4.invert(mat4.create(), mat4.multiply(mat4.create(), canvas.camera.vpMatrix, node.modelMatrix));
+        var viewportX = (x - canvas.width / 2) / (canvas.width / 2);
+        var viewportY = (canvas.height / 2 - y) / (canvas.height / 2);
+        var origin = vec3.transformMat4(vec3.create(), [viewportX, viewportY, 0], inverseMVPMatrix);
+        var far = vec3.transformMat4(vec3.create(), [viewportX, viewportY, 1.0], inverseMVPMatrix);
+        var direction = vec3.subtract(vec3.create(), far, origin);
+        return {'origin':origin, 'direction':direction};
+} //}}}
+function raycast(canvas, origin, direction, node) { //{{{
+        //Performs raycast on given node using ray origin and direction vectors.
+        //Returns hit objects with hit position, normals, barycentric coordinates, element number, and indices of ray-triangle intersection.
         //TODO: Diagnose marker issues with orthographic views and slr-eustatic updates when switching between basins.
-        var inverseMVPMatrix = mat4.invert(mat4.create(), mat4.multiply(mat4.create(), canvas.camera.vpMatrix, node.modelMatrix));
-        var origin = vec3.transformMat4(vec3.create(), [(x - canvas.width / 2) / (canvas.width / 2), (canvas.height / 2 - y) / (canvas.height / 2), 0], inverseMVPMatrix);
-        var far = far || vec3.transformMat4(vec3.create(), [(x - canvas.width / 2) / (canvas.width / 2), (canvas.height / 2 - y) / (canvas.height / 2), 1.0], inverseMVPMatrix);
-        var ray = vec3.subtract(vec3.create(), far, origin);
-
-        var mesh = node.mesh;
-
-        if (!mesh) { return; }
-        if (!node.octree) { node.octree = new GL.Octree(mesh); }
-        
-        var hit = node.octree.testRay(origin, ray, 1e3, 1e10);
-        
-        if(!hit) { return; }
-
-        if (node.name.startsWith("clouds")) { canvas.clouds.selected = node.name; alert("New selected cloud: " + canvas.clouds.selected); }
+        if (!node.octree) { node.octree = new GL.Octree(node.mesh); }
+        
+        var hit = node.octree.testRay(origin, direction, 1e3, 1e10);
+        if (!hit) { return; }
 
         hit.modelPos = vec3.copy(vec3.create(), hit.pos);
         vec3.transformMat4(hit.pos, hit.pos, node.modelMatrix);
-        vec3.transformMat4(hit.normal, hit.normal, node.modelMatrix);
-
+        
         return hit;
 } //}}}
-function updateCities(canvas) {
-        //Update selected city
-        var hit = canvas.nodes.cities.hit;
-        if (hit) {
-                citiesIndex = Math.floor(hit.indices[0] / ((ArrayMax(canvas.nodes.cities.mesh.getIndexBuffer('triangles').data) + 1) / cities.length));
-                cityName = cities[citiesIndex];
-                if (cityName !== $('#gfm-sim-controls-select-city').val()) {
-                        $('#gfm-sim-controls-select-city').val(cityName).selectmenu("refresh");
-                        changeCity(canvas);
-                }
-        }
-}
-function brushModify(canvas) { //{{{
-        //This function takes in the canvas and x/y coordinates, performing a raycast against the mesh, and modifies the mesh using a the canvas.brush.strength and canvas.brush.falloff properties.
-        //Currently the brush extends to the raycasted element and its immediate neighbors.
-        //TODO: Allow variable brush size/additional neighbors. Allow the function to work on multiple models (currently hardcoded to md model).
-        if (!canvas.unitNode || canvas.brush.enabled != 'on') { return; }
-        
-        var hit = canvas.brush.hit;
-
-        if (hit) {
-                var bufferVertices = canvas.unitNode.mesh.getBuffer('vertices');
-                var vertices = bufferVertices.data;
-                var bufferCoords = canvas.unitNode.mesh.getBuffer('coords');
-                var coords = bufferCoords.data;
-
-                //Query nearby elements and store indicies of affected vertices using pregenerated vertexconnectivity list (from NodeConnectivity)
-                var baseIndices = new Set(hit.indices);
-                var connectedIndices = new Set(hit.indices);
-                var connectedElement;
-                var indices;
-                var lengthIndex = md.mesh.vertexconnectivity[0].length - 1;
-                var length;
-                for (var i = 0; i < 3; i++) {
-                        length = md.mesh.vertexconnectivity[hit.indices[i]][lengthIndex];
-                        for (var j = 0; j < length; j++) {
-                                //Shift elements down by one (matlab 1-based index to 0-based index)
-                                connectedElement = md.mesh.vertexconnectivity[hit.indices[i]][j] - 1;
-                                indices = md.mesh.elements[connectedElement];
-                                connectedIndices.add(indices[0] - 1);
-                                connectedIndices.add(indices[1] - 1);
-                                connectedIndices.add(indices[2] - 1);
-                        }
-                }
-
-                //Apply modifications to included vertices in mesh using brush strength and falloff.
-                var strength;
-                for (var index of connectedIndices) {
-                        if (!baseIndices.has(index)) {
-                                strength = canvas.brush.strength * canvas.brush.falloff;
-                        }
-                        else {
-                                strength = canvas.brush.strength;
-                        }
-                        vertices[index*3+2] += strength * 100;
-                        md.geometry.surface[index] += strength; 
-                        md.geometry.thickness[index] += strength;
-                        coords[index*2+1] += strength;
-                        canvas.unitData[index] += strength;
-                }
-                
-                //Update mesh on GPU
-                bufferVertices.upload(canvas.gl.DYNAMIC_DRAW);
-                bufferCoords.upload(canvas.gl.DYNAMIC_DRAW);
-                canvas.unitNode.octree = new GL.Octree(canvas.unitNode.mesh);   
-        }
-} //}}}
-function updateClouds(canvas) {
-        //Update clouds if rendered
-        //TODO: Steven, the hit now queries the radaroverlay.
-        if (canvas.nodes[canvas.clouds.selected]) {
-                var v1 = vec3.fromValues(vertices[hit.indices[0] * 3], vertices[hit.indices[0] * 3 + 1], vertices[hit.indices[0] * 3 + 2]);
-                var v2 = vec3.fromValues(vertices[hit.indices[1] * 3], vertices[hit.indices[1] * 3 + 1], vertices[hit.indices[1] * 3 + 2]);
-                var v3 = vec3.fromValues(vertices[hit.indices[2] * 3], vertices[hit.indices[2] * 3 + 1], vertices[hit.indices[2] * 3 + 2]);
-                vec3.transformMat4(v1, v1, canvas.unitNode.modelMatrix);//move out of brushModify, perhaps onto onPan
-                vec3.transformMat4(v2, v2, canvas.unitNode.modelMatrix);
-                vec3.transformMat4(v3, v3, canvas.unitNode.modelMatrix);
-                var x  = (v1[0] + v2[0] + v3[0]) / 3;// + Math.floor((Math.random() * (1 + 10000 - (-10000)) + (-10000)));
-                var y  = (v1[1] + v2[1] + v3[1]) / 3;// + Math.floor((Math.random() * (1 + 10000 - (-10000)) + (-10000)));
-                var z  = (v1[2] + v2[2] + v3[2]) / 3;
-                canvas.nodes[canvas.clouds.selected].translation = [x, y + canvas.clouds.height, z];
-                updateModelMatrix(canvas.nodes[canvas.clouds.selected]);
-        }
-}
-function initializeMarker(canvas) { //{{{
-        //Initialize data marker and tooltip display once per page load
-        var marker = $('#' + canvas.dataMarkers.marker.id);
-        var size = canvas.dataMarkers.size;
-        if (!marker.hasClass('tooltipstered')) {
-                marker.css({
-                        'position': 'absolute',
-                        'left': -size[0] + 'px',
-                        'top': -size[1] + '0px',
-                        'width': size[0] + 'px',
-                        'height': size[1] + 'px',
-                        'pointer-events': 'all',
-                        'cursor': 'pointer',
-                        'display': 'none'
-                });
-                marker.tooltipster({
-                        contentAsHTML: true,
-                        maxWidth: 320,
-                        maxHeight: 320,
-                        zIndex: 1000,
-                        trigger: 'custom',
-                        triggerOpen: {
-                                mouseenter: false,
-                                originClick: true,
-                                touchstart: false
-                        },
-                        triggerClose: {
-                                mouseleave: false,
-                                originClick: true,
-                                touchleave: false
-                        },
-                });
-                marker.on('click touch', function () {
-                        marker.fadeOut(175);
-                        marker.tooltipster('close');
-                        marker.closed = true;
-                });
-                marker.closed = false;
-                canvas.dataMarkers.marker.selector = marker;
-        }
-        updateMarker(canvas, true);
-} //}}}
-function repositionMarker(canvas) { //{{{
-        //Mover marker to point to mouse position, offset in y by 1 to enable immediate clicking.
-        //Return if no marker hit exists, the camera is not rendering, or if no reposition has been scheduled.
-        if (isEmptyOrUndefined(canvas.dataMarkers.marker.hit) || !canvas.camera.ready || !canvas.dataMarkers.reposition) { return; }
-        var size = canvas.dataMarkers.size;
-        var screenPoint = vec3.transformMat4(vec3.create(), canvas.dataMarkers.marker.hit.pos, canvas.camera.vpMatrix);
-        var x = (screenPoint[0] + 1.0) * (canvas.width / 2) + canvas.selector.offset().left;
-        var y = (-screenPoint[1] + 1.0) * (canvas.height / 2) + canvas.selector.offset().top;
-        canvas.dataMarkers.marker.selector.css({
-                'left': (Math.round(x) - size[0] / 2) + 'px', 
-                'top': (Math.round(y) - size[1] + 1) + 'px'
-        });
-        if (canvas.dataMarkers.marker.selector.tooltipster('status').state != 'closed') { canvas.dataMarkers.marker.selector.tooltipster('reposition'); }
-        canvas.dataMarkers.reposition = false;
-} //}}}
-function updateMarker(canvas, reset) { //{{{
-        //Retrieve data value fields and plots them on data marker popup if a hit has been registered.
-        //TODO: Automatically pick up any field of size md.mesh.numberofelements
-        //If no marker has been placed, no update is needed. If canvas is resimulating and unitNode has not been set yet, wait and try again.
-        if (!canvas.dataMarkers.enabled || isEmptyOrUndefined(canvas.dataMarkers.marker.hit)) { return; }
-        if (isEmptyOrUndefined(canvas.unitNode) || isEmptyOrUndefined(canvas.unitNode.mesh)) { setTimeout( function(){ updateMarker(canvas, reset); }, 750); return; }
-        
-        var hit = canvas.dataMarkers.marker.hit;
-        
-        var coords = canvas.unitNode.mesh.vertexBuffers.coords.data;
-        var latitude = md.mesh.lat;
-        var longitude = md.mesh.long;
-        var thickness;
-        var velocity;
-        if (md.results[0]) {
-                thickness = md.results[canvas.animation.frame].Thickness;
-                velocity = md.results[canvas.animation.frame].Vel;
-        }
-        else {
-                thickness = md.geometry.thickness;
-                velocity = md.initialization.vel;
-        }
-        
-        //Construct new argument array of the data display format for sprintf using first first argument as the formatSpecifier string and the rest as the additional arguments.
-        var labels = canvas.dataMarkers.labels.slice();
-        for (var i = 0; i < labels.length; i++) {
-                if (labels[i].toLowerCase() === 'x') { labels[i] = hit.modelPos[0]; }
-                else if (labels[i].toLowerCase() === 'y') { labels[i] = hit.modelPos[1]; }
-                else if (labels[i].toLowerCase() === 'z') { labels[i] = hit.modelPos[2]; }
-                else if (labels[i].toLowerCase() === 'latitude') {
-                        var hitLatitude = [latitude[hit.indices[0]], latitude[hit.indices[1]], latitude[hit.indices[2]]];
-                        var valueLatitude = Math.abs(hitLatitude[0] * hit.uvw[0] + hitLatitude[1] * hit.uvw[1] + hitLatitude[2] * hit.uvw[2]);
-                        labels[i] = valueLatitude;
-                }
-                else if (labels[i].toLowerCase() === 'longitude') {
-                        var hitLongitude = [longitude[hit.indices[0]], longitude[hit.indices[1]], longitude[hit.indices[2]]];
-                        var valueLongitude = Math.abs(hitLongitude[0] * hit.uvw[0] + hitLongitude[1] * hit.uvw[1] + hitLongitude[2] * hit.uvw[2]);
-                        labels[i] = valueLongitude;
-                }
-                else if (labels[i].toLowerCase() === 'thickness') {
-                        var hitThickness = [thickness[hit.indices[0]], thickness[hit.indices[1]], thickness[hit.indices[2]]];
-                        var valueThickness = hitThickness[0] * hit.uvw[0] + hitThickness[1] * hit.uvw[1] + hitThickness[2] * hit.uvw[2];
-                        labels[i] = valueThickness; 
-                }
-                else if (labels[i].toLowerCase() === 'velocity') {
-                        var hitVelocity = [velocity[hit.indices[0]], velocity[hit.indices[1]], velocity[hit.indices[2]]];
-                        var valueVelocity = hitVelocity[0] * hit.uvw[0] + hitVelocity[1] * hit.uvw[1] + hitVelocity[2] * hit.uvw[2];    
-                        labels[i] = valueVelocity; 
-                }
-                else if (labels[i].toLowerCase() === 'value') {
-                        var hitCoords = [coords[hit.indices[0]*2], coords[hit.indices[0]*2+1], coords[hit.indices[1]*2], coords[hit.indices[1]*2+1], coords[hit.indices[2]*2], coords[hit.indices[2]*2+1]];
-                        var u = hitCoords[0] * hit.uvw[0] + hitCoords[2] * hit.uvw[1] + hitCoords[4] * hit.uvw[2];
-                        var v = hitCoords[1] * hit.uvw[0] + hitCoords[3] * hit.uvw[1] + hitCoords[5] * hit.uvw[2];
-                        var value = canvas.unitNode.caxis[0] * (1.0 - v) + canvas.unitNode.caxis[1] * v;
-                        labels[i] = value; 
-                }
-        }
-        
-        //Apply changes to tooltip
-        $('#tooltip-content-data-marker-' + canvas.id).html(sprintf.apply(null, canvas.dataMarkers.format.concat(labels)));
-        $('#tooltip-content-data-marker-' + canvas.id).css({'font': canvas.dataMarkers.font});                          
-        
-        //If animated, setup animation loop to update plot as movie plays.
-        if (canvas.dataMarkers.animated) {
-                var isEmpty = (canvas.dataMarkers.values.length === 0);
-                var lastUpdatedIndex = (canvas.dataMarkers.values.length - 1);
-                var newMovieFrame = (!isEmpty && canvas.dataMarkers.values[lastUpdatedIndex][0] != canvas.animation.frame);
-                //If new data marker has been placed, reinitialize plot. If not, push new value into plot value array.
-                if (reset) {
-                        canvas.dataMarkers.values = [];
-                        newMovieFrame = true;
-                        for (var currentFrame = 0; currentFrame < (canvas.unitNode.movieLength); currentFrame++) {
-                                coords = canvas.unitMovieData[currentFrame];
-                                var hitCoords = [coords[hit.indices[0]*2], coords[hit.indices[0]*2+1], coords[hit.indices[1]*2], coords[hit.indices[1]*2+1], coords[hit.indices[2]*2], coords[hit.indices[2]*2+1]];
-                                var u = hitCoords[0] * hit.uvw[0] + hitCoords[2] * hit.uvw[1] + hitCoords[4] * hit.uvw[2];
-                                var v = hitCoords[1] * hit.uvw[0] + hitCoords[3] * hit.uvw[1] + hitCoords[5] * hit.uvw[2];
-                                var value = canvas.unitNode.caxis[0] * (1.0 - v) + canvas.unitNode.caxis[1] * v;
-                                canvas.dataMarkers.values.push([currentFrame, value]);
-                        }
-                }
-                else {
-                        if (canvas.animation.lastFrame > canvas.animation.frame) {
-                                canvas.dataMarkers.values = [];
-                        }
-                        if (isEmpty || newMovieFrame) {
-                                coords = canvas.unitMovieData[canvas.animation.frame];
-                                var hitValues = [coords[hit.indices[0]], coords[hit.indices[1]], coords[hit.indices[2]]];
-                                var value = hitValues[0] * hit.uvw[0] + hitValues[1] * hit.uvw[1] + hitValues[2] * hit.uvw[2];  
-                                canvas.dataMarkers.values.push([canvas.animation.frame, value]);
-                        }
-                }
-                
-                //Replot data marker popup using update data value array.
-                if (isEmpty || newMovieFrame) {
-                        var dataLabels = {'latitude': valueLatitude, 'longitude': valueLongitude, 'thickness': valueThickness, 'velocity': valueVelocity, 'value': value};
-                        var dataDisplay = canvas.dataMarkers.values.slice(0, canvas.animation.frame + 1);               
-                        plot(
-                                'id', '#sim-plot', 
-                                'type', 'bar', 
-                                'width', 400, 
-                                'height', 300, 
-                                'nticks', 25, 
-                                'xlabel', 'Time', 
-                                'ylabel', 'Value', 
-                                'title', 'Changes Over Time', 
-                                'datalabels', canvas.dataMarkers.labels,
-                                'labelvalues', dataLabels,
-                                'data', dataDisplay
-                        );
-                }
-        }
-        canvas.dataMarkers.reposition = true;
-        if (reset && !canvas.dataMarkers.marker.selector.closed) {
-                canvas.dataMarkers.marker.selector.fadeIn(175);
-                canvas.dataMarkers.marker.selector.tooltipster('open');
-        }
+function raycastXY(canvas, x, y, node) { //{{{
+        //Performs raycast on given node using x and y screenspace coordinates.
+        //Returns hit objects with hit position, normals, barycentric coordinates, element number, and indices of ray-triangle intersection.
+        //TODO: Diagnose marker issues with orthographic views and slr-eustatic updates when switching between basins.
+        var ray = screenToModelRay(canvas, x, y, node);
+        return raycast(canvas, ray.origin, ray.direction, node);
 } //}}}
 function animateValue(current, target, duration, stepCallback, doneCallback) { //{{{
@@ -669 +447 @@
         var elevationRotationMatrix = mat4.create();
         var aspectRatio = canvas.clientWidth / canvas.clientHeight;
-        var cameraPosition = vec3.create();
-
-        if (canvas.view.twod) { mat4.ortho(pMatrix, -aspectRatio*6.371e6/canvas.view.zoom, aspectRatio*6.371e6/canvas.view.zoom, -6.371e6/canvas.view.zoom, 6.371e6/canvas.view.zoom, canvas.camera.near, canvas.camera.far); }
-        else { mat4.perspective(pMatrix, canvas.camera.fov * DEG2RAD, aspectRatio, canvas.camera.near, canvas.camera.far); }
+        var camera = canvas.camera;
+        var view = canvas.view;
+
+        if (view.twod) { mat4.ortho(pMatrix, -aspectRatio*6.371e6/view.zoom, aspectRatio*6.371e6/view.zoom, -6.371e6/view.zoom, 6.371e6/view.zoom, camera.near, camera.far); }
+        else { mat4.perspective(pMatrix, camera.fov * DEG2RAD, aspectRatio, camera.near, camera.far); }
         
         //Apply worldspace translation
-        mat4.translate(vMatrix, translateMatrix, vec3.negate(vec3.create(), canvas.view.position));
+        mat4.translate(vMatrix, translateMatrix, vec3.negate(vec3.create(), view.position));
         
         //Calculate rotation around camera focal point about worldspace origin
-        if (canvas.view.twod) {
+        if (view.twod) {
                 mat4.rotate(azimuthRotationMatrix, azimuthRotationMatrix, -DEG2RAD * 0, [0, 1, 0]);
                 mat4.rotate(elevationRotationMatrix, elevationRotationMatrix, DEG2RAD * 90, [1, 0, 0]);
@@ -684 +463 @@
         }
         else {
-                mat4.rotate(azimuthRotationMatrix, azimuthRotationMatrix, -DEG2RAD * (canvas.view.rotation[0] + 90), [0, 1, 0]);
-                mat4.rotate(elevationRotationMatrix, elevationRotationMatrix, DEG2RAD * canvas.view.rotation[1], [1, 0, 0]);
+                mat4.rotate(azimuthRotationMatrix, azimuthRotationMatrix, -DEG2RAD * (view.rotation[0] + 90), [0, 1, 0]);
+                mat4.rotate(elevationRotationMatrix, elevationRotationMatrix, DEG2RAD * view.rotation[1], [1, 0, 0]);
                 mat4.multiply(rotationMatrix, elevationRotationMatrix, azimuthRotationMatrix);
+                //var quaternionWorldX = Node.prototype.eulerToQuaternion(0, 0, DEG2RAD * (view.rotation[0]));
+                //var quaternionWorldY = Node.prototype.eulerToQuaternion(0, DEG2RAD * (view.rotation[1]), 0);
+                //var quaternionWorldZ = Node.prototype.eulerToQuaternion(DEG2RAD * (view.rotation[2]), 0, 0);
+                //var quaternionTemp = quat.multiply(quat.create(), quaternionWorldY, quaternionWorldX);
+                //quat.multiply(camera.rotation, quaternionWorldZ, quaternionTemp);
+                //mat4.fromQuat(rotationMatrix, camera.rotation);       
         }
 
@@ -694 +479 @@
         //Apply screenspace translation to emulate rotation around point
         mat4.identity(translateMatrix);
-        mat4.translate(translateMatrix, translateMatrix, [0.0, 0.0, -6.371e6/canvas.view.zoom]);
+        mat4.translate(translateMatrix, translateMatrix, [0.0, 0.0, -6.371e6/view.zoom]);
         mat4.multiply(vMatrix, translateMatrix, vMatrix);
         
         //Apply projection matrix to get camera matrix
-        mat4.copy(canvas.camera.vMatrix, vMatrix);
-        mat4.multiply(canvas.camera.vpMatrix, pMatrix, vMatrix);
+        mat4.copy(camera.vMatrix, vMatrix);
+        mat4.multiply(camera.vpMatrix, pMatrix, vMatrix);
         
         //Calculate inverse view matrix fields for lighting and raycasts
-        mat4.invert(canvas.camera.vInverseMatrix, canvas.camera.vMatrix);
-        mat4.invert(canvas.camera.vpInverseMatrix, canvas.camera.vpMatrix);
-        
-        vec3.transformMat4(canvas.camera.position, cameraPosition, canvas.camera.vpInverseMatrix);
-        canvas.camera.ready = true;
-        repositionMarker(canvas);
+        mat4.invert(camera.vInverseMatrix, camera.vMatrix);
+        mat4.invert(camera.vpInverseMatrix, camera.vpMatrix);
+        
+        vec3.transformMat4(camera.position, vec3.create(), camera.vInverseMatrix);
+        vec3.sub(camera.relativePosition, camera.position, view.position);
+        vec3.normalize(camera.direction, camera.relativePosition);
+        
+        camera.ready = true;
 }//}}}
 function drawSceneGraphNode(canvas, node) { //{{{
@@ -718 +505 @@
         mat4.multiply(mvpMatrix, canvas.camera.vpMatrix, node.modelMatrix);
         
-        var mvMatrix = mat4.create();
-        mat4.multiply(mvMatrix, canvas.camera.vMatrix, node.modelMatrix);
-        
-        var normalMatrix = mat4.create();
-        mat4.invert(normalMatrix, node.modelMatrix);
-        mat4.transpose(normalMatrix, normalMatrix);
+        var normalMatrix = mat3.create();
+        var tempMatrix = mat4.create();
+        mat4.invert(tempMatrix, node.modelMatrix);
+        mat4.transpose(tempMatrix, tempMatrix);
+        mat3.fromMat4(normalMatrix, tempMatrix);
         
         if (node.texture) { node.texture.bind(0); }
@@ -732 +518 @@
         gl.lineWidth(node.lineWidth);
         gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-
+        
         //Setup for light that originates from camera
-        var origin = vec3.fromValues(0, 0, 0);
-        var lightOrigin = vec3.fromValues(0, 0, 0);
-        var cameraPositionRelative = vec3.create();
-        vec3.transformMat4(origin, origin, canvas.camera.vInverseMatrix);
-        vec3.normalize(lightOrigin, lightOrigin);
-        vec3.sub(cameraPositionRelative, origin, node.translation);
-        cameraHeight = vec3.length(cameraPositionRelative);
-        
-        var atm = {                                     //Default Values
-                wavelength_r: 0.65,             //0.65          Red wavelength (micrometers)
-                wavelength_g: 0.57,                     //0.57          Green wavelength (micrometers)
-                wavelength_b: 0.475,            //0.475         Green wavelength (micrometers)
-                eSun: 100.0,                            //20.0          Sun intensity   
-                kRayleigh: 0.0025,                      //0.0025        Rayleigh scattering amount
-                kMie: 0.000,                            //0.01          Mie scattering amount
-                g: -0.99,                                       //-0.99         Mie phase asymmetry/direction factor
-                hdr_exposure: 0.8,                      //0.8           High Dynamic Range Exposure
-                scale: 1.25,                            //1.025         Scale of atmosphere. WARNING: Change atmosphereScale in applyoptions.js, and scaling constants.
-                scaleDepth: 0.25,                       //0.25          Percentage altitude at which the atmosphere's average density is found
-                a: -0.00287,                            //-0.00287      Scaling constant a
-                b: 0.459,                                       //0.459         Scaling constant b
-                c: 3.83,                                        //3.83          Scaling constant c
-                d: -6.80,                                       //-6.80         Scaling constant d
-                e: 3.6,                                         //5.25          Scaling constant e. Lower when increasing atmosphere scale.
-                attenuation: 0.5                        //0.5           Strength of atmospheric scattering on ground shading.
-        };
-                        
-        var inv_wavelength4 = [1.0 / Math.pow(atm.wavelength_r, 4), 1.0 / Math.pow(atm.wavelength_g, 4), 1.0 / Math.pow(atm.wavelength_b, 4)];
-        var innerRadius = 6.371e6;
-        var outerRadius = innerRadius*atm.scale;
-        var scale = 1.0 / (outerRadius - innerRadius);
-        var scaleDepth = atm.scaleDepth;
+        var atm = canvas.atmosphere;
+        var lightOrigin = vec3.create();
         
         node.shader.uniforms({
-                m4MVP: mvpMatrix,
-                m4Normal: normalMatrix,
-                m4Model: node.modelMatrix,
-                u_lightPosition: lightOrigin,
-                //u_lightPosition: [1.0, 1.0, 1.0],
-                u_diffuseColor: node.diffuseColor,
-                u_texture: 0,
-                u_alpha: node.alpha,
-                u_maskZerosColor: node.maskZerosColor,
-                u_maskZerosEnabled: node.maskZerosEnabled,
-                u_maskZerosTolerance: node.maskZerosTolerance,
-                u_maskZerosZeroValue: node.maskZerosZeroValue,
-                u_maskEnabled: node.maskEnabled,
-                u_maskHeight: node.maskHeight,
-                u_maskColor: node.maskColor,
-                u_pointSize: node.pointSize,
-                v3CameraPosition: origin,
-                v3Translate: node.translation,
-                v3LightPos: lightOrigin,
-                v3InvWavelength: inv_wavelength4,
-                fOuterRadius: outerRadius,
-                fOuterRadius2: outerRadius * outerRadius,
-                fInnerRadius: innerRadius,
-                fInnerRadius2: innerRadius * innerRadius,
-                fKrESun: atm.kRayleigh * atm.eSun, 
-                fKmESun: atm.kMie * atm.eSun, 
-                fKr4PI: atm.kRayleigh * 4 * Math.PI, 
-                fKm4PI: atm.kMie * 4 * Math.PI,
-                fScale: scale, 
-                fScaleDepth: scaleDepth,
-                fScaleOverScaleDepth: scale/scaleDepth, 
-                v3LightPosFrag: lightOrigin,
-                fHdrExposure: atm.hdr_exposure, 
-                g: atm.g,                       
-                g2: atm.g * atm.g,
-                a: atm.a,
-                b: atm.b,
-                c: atm.c,
-                d: atm.d,               
-                e: atm.e,
-                attenuation: atm.attenuation
+                m4MVP:                                  mvpMatrix,
+                m3Normal:                               normalMatrix,
+                m4Model:                                node.modelMatrix,
+                u_alpha:                                node.alpha,
+                u_ambientColor:                 node.ambientColor,
+                u_cameraPosition:               canvas.camera.position,
+                u_diffuseColor:                 node.diffuseColor,
+                u_lightDirection:               canvas.camera.direction,
+                u_lightingBias:                 node.lightingBias,
+                u_maskZerosColor:               node.maskZerosColor,
+                u_maskZerosEnabled:     node.maskZerosEnabled,
+                u_maskZerosTolerance:   node.maskZerosTolerance,
+                u_maskZerosZeroValue:   node.maskZerosZeroValue,
+                u_maskEnabled:                  node.maskEnabled,
+                u_maskHeight:                   node.maskHeight,
+                u_maskColor:                    node.maskColor,
+                u_pointSize:                    node.pointSize,
+                u_specularColor:                node.specularColor,
+                u_specularPower:                node.specularPower,
+                u_specularStrength:     node.specularStrength,
+                u_texture:                              0,
+                v3CameraPosition:               canvas.camera.position,
+                v3Translate:                    node.translation,
+                v3LightPos:                     lightOrigin,
+                v3InvWavelength:                atm.inv_wavelength4,
+                fOuterRadius:                   atm.outerRadius,
+                fOuterRadius2:                  atm.outerRadius2,
+                fInnerRadius:                   atm.innerRadius,
+                fInnerRadius2:                  atm.innerRadius2,
+                fKrESun:                                atm.krESun,
+                fKmESun:                                atm.kmESun,
+                fKr4PI:                                 atm.kr4PI,
+                fKm4PI:                                 atm.km4PI,
+                fScale:                                 atm.scale, 
+                fScaleDepth:                    atm.scaleDepth,
+                fScaleOverScaleDepth:   atm.scaleOverScaleDepth, 
+                v3LightPosFrag:                 lightOrigin,
+                fHdrExposure:                   atm.hdr_exposure,       
+                g:                                              atm.g,                  
+                g2:                                     atm.g2,
+                a:                                              atm.a,
+                b:                                              atm.b,
+                c:                                              atm.c,
+                d:                                              atm.d,          
+                e:                                              atm.e,
+                attenuation:                    atm.attenuation
         }).draw(node.mesh, node.drawMode, 'triangles');
         
@@ -814 +575 @@
         gl.disable(gl.CULL_FACE);
 } //}}}
+function canvasResize(canvas) {
+        var rect = canvas.getBoundingClientRect();
+        canvas.width  = rect.width;
+        canvas.height = rect.height;
+        canvas.gl.viewport(0, 0, canvas.width, canvas.height);
+        
+        if (!isEmptyOrUndefined(canvas.overlaycanvas)) {
+                rect = canvas.overlaycanvas.getBoundingClientRect();
+                canvas.overlaycanvas.width  = rect.width;
+                canvas.overlaycanvas.height = rect.height;
+        }
+}
 function draw(canvas) { //{{{
         //Ensure all nodes are ready to render
@@ -833 +606 @@
         //Begin rendering nodes
         if (canvas.draw.ready) {
-                var rect = canvas.getBoundingClientRect();
-                canvas.width  = rect.width;
-                canvas.height = rect.height;
+                //Handle canvas resizing and viewport/screenspace coordinate synchronization
+                canvasResize(canvas);   
                 
                 var gl = canvas.gl;
                 gl.makeCurrent(); //litegl function to handle switching between multiple canvases
-                gl.viewport(0, 0, canvas.width, canvas.height);
                 gl.clearColor(canvas.backgroundcolor[0], canvas.backgroundcolor[1], canvas.backgroundcolor[2], canvas.backgroundcolor[3]);
                 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
@@ -845 +616 @@
                 updateCameraMatrix(canvas);
                 
-                if (canvas.textcanvas) { canvas.textcanvas.draw(canvas); }
-                if (canvas.overlaycanvas) { canvas.overlaycanvas.draw(canvas); }
+                //Trigger any handlers attatched to this canvas event.
+                canvas.selector.trigger('onPreRender', [canvas]);
+                
+                for (var handler in canvas.overlayHandlers) { canvas.overlayHandlers[handler](canvas); }
                 
                 var drawPassNumber = 3;

issm/trunk-jpl/src/m/plot/webgl_node.js

@@ -6 +6 @@
 
 function Node() { //{{{
-        //properties 
+        //properties
         // {{{
         var args = Array.prototype.slice.call(arguments);
@@ -15 +15 @@
         this.gl = canvas.gl;
         
-        this.alpha = options.getfieldvalue('alpha',                                                             1.0),
-        this.animation = options.getfieldvalue('animation',                                             {}),
-        this.arrays = options.getfieldvalue('arrays',                                                           {}),
-        this.caxis = options.getfieldvalue('caxis',                                                             [0.0, 1.0]),
-        this.center = options.getfieldvalue('center',                                                           vec3.create()),
-        this.cullFace = options.getfieldvalue('cullFace',                                                       this.gl.BACK),
-        this.computeIndices = options.getfieldvalue('computeIndices',                           true),
-        this.disableDepthTest = options.getfieldvalue('disableDepthTest',                       false),
-        this.diffuseColor = options.getfieldvalue('diffuseColor',                                       [0.0, 0.0, 0.0, 1.0]),
-        this.drawMode = options.getfieldvalue('drawMode',                                                       this.gl.TRIANGLES),
-        this.drawOrder = options.getfieldvalue('drawOrder',                                             1),
-        this.enabled = options.getfieldvalue('enabled',                                                         true),
-        this.enableCullFace = options.getfieldvalue('enableCullFace',                           true),
-        this.hideOcean = options.getfieldvalue('hideOcean',                                             false),
-        this.lineWidth = options.getfieldvalue('lineWidth',                                             1.0),
-        this.log = options.getfieldvalue('log',                                                                         false),
-        this.maskColor = options.getfieldvalue('maskColor',                                             vec4.fromValues(0.0, 0.0, 1.0, 1.0)),
-        this.maskEnabled = options.getfieldvalue('maskEnabled',                                         false),
-        this.maskHeight = options.getfieldvalue('maskHeight',                                           150.0),
-        this.maskZerosColor = options.getfieldvalue('maskZerosColor',                           [1.0, 1.0, 1.0, 1.0]),
-        this.maskZerosEnabled = options.getfieldvalue('maskZerosEnabled',                       false),
-        this.maskZerosTolerance = options.getfieldvalue('maskZerosTolerance',           1e-6),
-        this.maskZerosZeroValue = options.getfieldvalue('maskZerosZeroValue',           0.5),
-        this.mesh = options.getfieldvalue('mesh',                                                                       undefined),
-        this.name = options.getfieldvalue('name',                                                                       'node'),
-        this.nanIndices = options.getfieldvalue('nanIndices',                                           new Set()),
-        this.octree = options.getfieldvalue('octree',                                                           undefined),
-        this.pointSize = options.getfieldvalue('pointSize',                                             15.0),
-        this.shaderName = options.getfieldvalue('shaderName',                                           'Colored'),
-        this.shader = options.getfieldvalue('shader',                                                           this.gl.shaders[this.shaderName]),
-        this.texture = options.getfieldvalue('texture',                                                         undefined),
-        this.scale = options.getfieldvalue('scale',                                                             vec3.fromValues(1, 1, 1)),
-        this.rotation = options.getfieldvalue('rotation',                                                       vec3.create()),
-        this.translation = options.getfieldvalue('translation',                                         vec3.create()),
-        this.modelMatrix = options.getfieldvalue('modelMatrix',                                         mat4.create()),
-        this.rotationMatrix = options.getfieldvalue('rotationMatrix',                           mat4.create()),
-        this.inverseModelMatrix = options.getfieldvalue('inverseModelMatrix',           mat4.create()),
-        this.inverseRotationMatrix = options.getfieldvalue('inverseRotationMatrix', mat4.create())
+        this.alpha = options.getfieldvalue('alpha',                                                             1.0);                                                                   //Shading transparency.
+        this.ambientColor = options.getfieldvalue('ambientColor',                                       [0.0, 0.0, 0.0, 1.0]);                                  //Ambient color used in lighting.
+        this.animation = options.getfieldvalue('animation',                                             {});                                                                    //Animtation parameters.
+        this.arrays = options.getfieldvalue('arrays',                                                           {});                                                                    //Storage for webgl arrays.
+        this.caxis = options.getfieldvalue('caxis',                                                             [0.0, 1.0]);                                                    //Color axis for texturing.
+        this.center = options.getfieldvalue('center',                                                           vec3.create());                                                 //Center of rotation/scaling.
+        this.cullFace = options.getfieldvalue('cullFace',                                                       this.gl.BACK);                                                  //GL enum for face culling back/front faces.
+        this.computeIndices = options.getfieldvalue('computeIndices',                           true);                                                                  //Specifies whether or not indices need to be computed during patching.
+        this.disableDepthTest = options.getfieldvalue('disableDepthTest',                       false);                                                                 //GL enum for enabling/disabling depth testing.
+        this.diffuseColor = options.getfieldvalue('diffuseColor',                                       [0.0, 0.0, 0.0, 1.0]);                                  //Diffuse color in vec4 rgba format.
+        this.drawMode = options.getfieldvalue('drawMode',                                                       this.gl.TRIANGLES);                                             //GL enum for draw mode.
+        this.drawOrder = options.getfieldvalue('drawOrder',                                             1);                                                                             //Drawing order for non-depth tested/transparent objects. Higher numbers are drawn. first.
+        this.enabled = options.getfieldvalue('enabled',                                                         true);                                                                  //Toggles display of this nodde.
+        this.enableCullFace = options.getfieldvalue('enableCullFace',                           true);                                                                  //Toggles use of face culling.
+        this.hideOcean = options.getfieldvalue('hideOcean',                                             false);                                                                 //ISSM shader uniform controlling ocean masking
+        this.lineWidth = options.getfieldvalue('lineWidth',                                             1.0);                                                                   //Controls width of gl lines. No reliable support across windows platforms.
+        this.lightingBias = options.getfieldvalue('lightingBias',                                       0.0);                                                                   //Controls width of gl lines. No reliable support across windows platforms.
+        this.log = options.getfieldvalue('log',                                                                         false);                                                                 //Controls logarithmic color axis scaling for texturing.
+        this.maskColor = options.getfieldvalue('maskColor',                                             vec4.fromValues(0.0, 0.0, 1.0, 1.0));   //ISSM shader uniform controlling ocean masking color.
+        this.maskEnabled = options.getfieldvalue('maskEnabled',                                         false);                                                                 //ISSM shader uniform toggling ocean masking.
+        this.maskHeight = options.getfieldvalue('maskHeight',                                           150.0);                                                                 //ISSM shader uniform controlling height at which ocean masking is cut off.
+        this.maskZerosColor = options.getfieldvalue('maskZerosColor',                           [1.0, 1.0, 1.0, 1.0]);                                  //ISSM shader uniform controlling value masking color.
+        this.maskZerosEnabled = options.getfieldvalue('maskZerosEnabled',                       false);                                                                 //ISSM shader uniform toggling value masking.
+        this.maskZerosTolerance = options.getfieldvalue('maskZerosTolerance',           1e-6);                                                                  //ISSM shader uniform controlling tolerance of value to zero value when masking.
+        this.maskZerosZeroValue = options.getfieldvalue('maskZerosZeroValue',           0.5);                                                                   //ISSM shader uniform controlling zero value masking offset.
+        this.mesh = options.getfieldvalue('mesh',                                                                       undefined);                                                             //Litegl GL.Mesh class used for drawing.
+        this.name = options.getfieldvalue('name',                                                                       'node');                                                                //Name of node.
+        this.nanIndices = options.getfieldvalue('nanIndices',                                           new Set());                                                             //Set of NaN indices to mask out of mesh.
+        this.octree = options.getfieldvalue('octree',                                                           undefined);                                                             //Fast raytracing octree object.
+        this.pointSize = options.getfieldvalue('pointSize',                                             15.0);                                                                  //Size of points when displaying GL.POINTS.
+        this.shaderName = options.getfieldvalue('shaderName',                                           'Colored');                                                             //Name of shader to use.
+        this.shader = options.getfieldvalue('shader',                                                           this.gl.shaders[this.shaderName]);              //Compiled shader object.
+        this.specularColor = options.getfieldvalue('specularColor',                             [1.0, 1.0, 1.0, 1.0]);                                  //Specular reflection color used in lighting.
+        this.specularStrength = options.getfieldvalue('specularStrength',                       1.0);                                                                   //Specular reflection power - represents specular highlight sharpness.
+        this.specularPower = options.getfieldvalue('specularPower',                             5);                                                                             //Specular reflection power - represents specular highlight sharpness.
+        this.texture = options.getfieldvalue('texture',                                                         undefined);                                                             //GL texture object.
+        this.scale = options.getfieldvalue('scale',                                                             vec3.fromValues(1, 1, 1));                              //XYZ scaling of the node.
+        this.renderObject = options.getfieldvalue('renderObject',                                       {});                                                                    //Field for additional render object state information not necessarily related to node display.
+        this.rotation = options.getfieldvalue('rotation',                                                       vec3.create());                                                 //XYZ rotation of the node.
+        this.rotationQuaternion = options.getfieldvalue('rotationQuaternion',           quat.create());                                                 //Quaternion rotation of the node. Not currently in use.
+        this.translation = options.getfieldvalue('translation',                                         vec3.create());                                                 //XYZ translation of the node.
+        this.modelMatrix = options.getfieldvalue('modelMatrix',                                         mat4.create());                                                 //Model matrix computed from updateModelMatrix function.
+        this.translationMatrix = options.getfieldvalue('translationMatrix',             mat4.create());                                                 //Intermediate translation matrix computed from updateModelMatrix function.
+        this.rotationMatrix = options.getfieldvalue('rotationMatrix',                           mat4.create());                                                 //Intermediate rotation matrix computed from updateModelMatrix function.
+        this.scaleMatrix = options.getfieldvalue('scaleMatrix',                                         mat4.create());                                                 //Intermediate scale matrix computed from updateModelMatrix function.
+        this.inverseModelMatrix = options.getfieldvalue('inverseModelMatrix',           mat4.create());                                                 //Inverse model matrix.
+        this.inverseRotationMatrix = options.getfieldvalue('inverseRotationMatrix', mat4.create());                                                     //Inverse rotation matrix.
         //}}}
         //initialize {{{
-        //if (this.name in canvas.nodes) abort? 
+        //if (this.name in canvas.nodes) abort?
         this.updateModelMatrix();
         this.updateDiffuseColor();
         canvas.nodes[this.name] = this;
         //}}}
+} //}}}
+Node.prototype.eulerToQuaternion = function(pitch, roll, yaw) { //{{{
+        var t0 = Math.cos(yaw * 0.5);
+        var t1 = Math.sin(yaw * 0.5);
+        var t2 = Math.cos(roll * 0.5);
+        var t3 = Math.sin(roll * 0.5);
+        var t4 = Math.cos(pitch * 0.5);
+        var t5 = Math.sin(pitch * 0.5);
+
+        var w = t0 * t2 * t4 + t1 * t3 * t5;
+        var x = t0 * t3 * t4 - t1 * t2 * t5;
+        var y = t0 * t2 * t5 + t1 * t3 * t4;
+        var z = t1 * t2 * t4 - t0 * t3 * t5;
+        return quat.fromValues(x, y, z, w);
+} //}}}
+Node.prototype.quaternionToEuler = function(q) { //{{{
+        var ysqr = q[1] * q[1];
+
+        // roll (x-axis rotation)
+        var t0 = +2.0 * (q[3] * q[0] + q[1] * q[2]);
+        var t1 = +1.0 - 2.0 * (q[0] * q[0] + ysqr);
+        var roll = Math.atan2(t0, t1);
+
+        // pitch (y-axis rotation)
+        var t2 = +2.0 * (q[3] * q[1] - q[2] * q[0]);
+        t2 = t2 > 1.0 ? 1.0 : t2;
+        t2 = t2 < -1.0 ? -1.0 : t2;
+        var pitch = Math.asin(t2);
+
+        // yaw (z-axis rotation)
+        var t3 = +2.0 * (q[3] * q[2] + q[0] * q[1]);
+        var t4 = +1.0 - 2.0 * (ysqr + q[2] * q[2]);
+        var yaw = Math.atan2(t3, t4);
+        
+        return [pitch * RAD2DEG, roll * RAD2DEG, yaw * RAD2DEG];
 } //}}}
 Node.prototype.updateModelMatrix = function() { //{{{
@@ -83 +127 @@
         mat4.rotate(xRotationMatrix, xRotationMatrix, DEG2RAD * this.rotation[0], [1.0, 0.0, 0.0]);
         mat4.multiply(rotationMatrix, xRotationMatrix, rotationMatrix);
-        mat4.multiply(modelMatrix, rotationMatrix, modelMatrix);        
+        mat4.multiply(modelMatrix, rotationMatrix, modelMatrix);
+
+        //var rotationQuaternionX = this.eulerToQuaternion(0, -DEG2RAD * this.rotation[0], 0);
+        //var rotationQuaternionY = this.eulerToQuaternion(DEG2RAD * this.rotation[1], 0, 0);
+        //mat4.fromQuat(this.rotationMatrix, quat.multiply(quat.create(), rotationQuaternionY, rotationQuaternionX));
+
+        //mat4.multiply(this.modelMatrix, this.rotationMatrix, this.modelMatrix);       
+                
         
         mat4.identity(translationMatrix);
@@ -124 +175 @@
 Node.prototype.patch = function() { //{{{
         //Emulates the behavior of MATLAB patch function by constructing a mesh from arguments.
-        //Limitations: 
+        //Limitations:
         //      -Expects pair labeled arguments ('FaceColor','none',...).
         //      -Only handles Face/Vertices/FaceVertexCData element/node plots.
@@ -149 +200 @@
 
         this.mesh = GL.Mesh.load(this.arrays, null, null, this.gl);
-        //this.mesh.computeNormals();
+        this.mesh.computeNormals();
         this.computeOctree();
 } //}}}
@@ -239 +290 @@
         if (this.log !== false && this.log !== 'off') { 
                 caxis = [
-                        Math.log10(caxis[0]) / Math.log10(this.log), 
+                        Math.log10(caxis[0]) / Math.log10(this.log),
                         Math.log10(caxis[1]) / Math.log10(this.log)
                 ];
@@ -389 +440 @@
                         var j = 0;
                         if (isEmptyOrUndefined(indices)) {
-                                for (var key in object) {
+                                for (var key in coordinateObject) {
+                                        console.log(key);
                                         array[j++] = coordinateObject[key];
                                 }
@@ -407 +459 @@
         var meshVertices = mesh.getBuffer('vertices').data;
         var meshIndicies = mesh.getIndexBuffer('triangles').data;
-        var indicies = new Uint16Array(meshIndicies.length * x.length);
+        var indices = new Uint16Array(meshIndicies.length * x.length);
         var size = meshVertices.length * x.length / 3;
         newX = new Float32Array(size);
@@ -423 +475 @@
                 var offset = i * meshVertices.length / 3;
                 for (var j = 0; j < meshIndicies.length;) {
-                        indicies[e++] = meshIndicies[j++] + offset;
-                }
-        }
-        
-        this.patch('Faces', indicies, 'Vertices', [newX, newY, newZ], 'FaceColor', 'interp');
-} //}}}
-Node.prototype.scaleVertices = function(md, x, y, z, scale) { //{{{
+                        indices[e++] = meshIndicies[j++] + offset;
+                }
+        }
+        
+        this.patch('Faces', indices, 'Vertices', [newX, newY, newZ], 'FaceColor', 'interp');
+} //}}}
+Node.prototype.scaleVertices = function(md, x, y, z, elements, scale, maskObject) { //{{{
         //Scales and returns vertices x, y, and z by factor scale. Uses md.geometry.scale for heightscaling in 3d meshes.
         if (md.mesh.classname() === 'mesh3dsurface') {
-                var xyz, magnitude;
-                x = x.slice();
-                y = y.slice();
-                z = z.slice();
-                for(var i = 0; i < x.length; i++) {
-                        xyz = vec3.fromValues(x[i], y[i], z[i]);
-                        magnitude = 1 + md.geometry.surface[i] * scale / vec3.length(xyz);
-                        vec3.scale(xyz, xyz, magnitude);
-                        x[i] = xyz[0];
-                        y[i] = xyz[1];
-                        z[i] = xyz[2];
+                if (!maskObject.enabled) {
+                        var xyz, magnitude;
+                        x = x.slice();
+                        y = y.slice();
+                        z = z.slice();
+                        for(var i = 0; i < x.length; i++) {
+                                xyz = vec3.fromValues(x[i], y[i], z[i]);
+                                magnitude = 1 + md.geometry.surface[i] * scale / vec3.length(xyz);
+                                vec3.scale(xyz, xyz, magnitude);
+                                x[i] = xyz[0];
+                                y[i] = xyz[1];
+                                z[i] = xyz[2];
+                        }
+                }
+                else {
+                        var mask = maskObject.mask;
+                        var maskScale = maskObject.scale;
+                        var element;
+                        for (var i = 0; i < mask.length; i++) {
+                                if (mask[i] === 1) {
+                                        element = elements[i];
+                                        for (var j = 0; j < 3; j++) {
+                                                xyz = vec3.fromValues(x[element[j] - 1], y[element[j] - 1], z[element[j] - 1]);
+                                                magnitude = 1 + md.geometry.surface[element[j] - 1] * scale * maskScale / vec3.length(xyz);
+                                                vec3.scale(xyz, xyz, magnitude);
+                                                x[element[j] - 1] = xyz[0];
+                                                y[element[j] - 1] = xyz[1];
+                                                z[element[j] - 1] = xyz[2];
+                                        }
+                                        
+                                }
+                        }
                 }
         }

issm/trunk-jpl/src/m/solve/WriteData.js

@@ -60 +60 @@
                 else{
                         if (!IsArray(data)) data=data*scale;
-                        else ArrayScale(data,scale);
+                        else data=ArrayScale(data,scale);
                 }
         }