source: issm/oecreview/Archive/21724-22754/ISSM-21767-21768.diff@ 22755

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

@@ -5 +5 @@
         canvas = document.getElementById(options.getfieldvalue('canvasid'));
         //var canvas = document.getElementById(options.getfieldvalue('canvasid'));
         if (!canvas.initialized) {
-                typedArraySliceSupport();
                 if (!isEmptyOrUndefined(canvas.draw) && canvas.draw.handler !== 0)      { window.cancelAnimationFrame(canvas.draw.handler); }
                 if (!isEmptyOrUndefined(canvas.animation) && canvas.animation.handler !== 0) { clearInterval(canvas.animation.handler); }
                 initWebGL(canvas, options);
                 initializeMarker(canvas);
-                canvas.nodes = [];
                 draw(canvas);
                 canvas.initialized = true;
         }
@@ -18 +16 @@
 }
 function initWebGL(canvas, options) { //{{{
         //Initialize canvas.gl on page load, reusing gl context on additional runs
-        var gl;
-        if (!canvas.gl) {
+        var gl = canvas.gl;
+        if (isEmptyOrUndefined(gl)) {
                 gl = GL.create({canvas: canvas});
                 gl.enable(gl.DEPTH_TEST); // Enable depth testing
                 gl.depthFunc(gl.LEQUAL); // Near things obscure far things
@@ -30 +28 @@
                 gl.textures = {};
                 
                 // Add event listeners for canvas
-                var displayview = options.getfieldvalue('displayview', 'off') == 'on';
-                var displayzoom = options.getfieldvalue('displayzoom', 'off') == 'on';
-                var mc = new Hammer.Manager(canvas);
-                
-                mc.add( new Hammer.Tap({event: 'singletap' }) );
+                var displayview = options.getfieldvalue('displayview', 'off') === 'on';
+                var displayzoom = options.getfieldvalue('displayzoom', 'off') === 'on';
+                var mc = new Hammer(canvas);    
                 mc.add(new Hammer.Pan({threshold: 0, pointers: 0}));
                 mc.add(new Hammer.Pinch({threshold: 0})).recognizeWith(mc.get('pan'));
-                mc.on('singletap', function (ev) {onTap(ev, canvas);});
+                mc.on('tap press', 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);
+                
+                //Add persistent state variables
+                canvas.nodes = {};
+                canvas.octrees = {};
+                canvas.unitNode = {};
+                canvas.unitData = {};
+                canvas.unitMovieData = {};
+                canvas.gl = gl;
+                canvas.rootPath = options.getfieldvalue('rootpath', '../../../js/');
+                canvas.id = options.getfieldvalue('canvasid', '.sim-canvas');
+                canvas.selector = $('#' + canvas.id);
+                canvas.textcanvas = null;
+                canvas.overlaycanvas = null;
+                
+                typedArraySliceSupport();
         }
-        else {
-                gl = canvas.gl;
-        }
         
-        // Add context state variables
-        canvas.gl = gl;
-        canvas.textcanvas = null;
-        canvas.overlaycanvas = null;
-        canvas.unitNode = {};
-        canvas.unitData = {};
+        //Add context state variables
         canvas.controlSensitivity = options.getfieldvalue('controlsensitivity', 1);
-        canvas.id = options.getfieldvalue('canvasid', '.sim-canvas');
-        canvas.rootPath = options.getfieldvalue('rootpath', '../../../js/');
-        canvas.selector = $('#' + canvas.id);
         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]; }
         else { throw Error(sprintf('s%s%s\n','initWebGL error message: cound not find out background color for curent canvas ', canvas)); }
@@ -69 +68 @@
                 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)
         }
@@ -98 +98 @@
         canvas.clouds = {
                 enabled: defaultFor(clouds.enabled, false),
                 height: defaultFor(clouds.height, 7500),
-                quantity: defaultFor(clouds.quantity, 10)
+                quantity: defaultFor(clouds.quantity, 10),
+                hit: defaultFor(clouds.hit, {})
         };
         var dataMarkers = options.getfieldvalue('datamarkers', {});
         canvas.dataMarkers = {
@@ -110 +111 @@
                 animated: defaultFor(dataMarkers.animated, false),
                 labels: defaultFor(dataMarkers.labels, []),
                 font: defaultFor(dataMarkers.font, ''),
-                marker: defaultFor(dataMarkers.marker, document.getElementById('sim-data-marker-' + canvas.id))
+                marker: defaultFor(dataMarkers.marker, document.getElementById('sim-data-marker-' + canvas.id)),
+                reposition: defaultFor(dataMarkers.reposition, true)
         };
         var draw = options.getfieldvalue('draw', {});
         canvas.draw = {
@@ -133 +135 @@
         //Override with parameters from URL, if any
         //TODO: Make permalinks more robust and less interdependent on UI
         if (!canvas.usedparemters) {
-                function getJsonFromUrl() {
-                        var query = location.search.substr(1);
-                        var result = {};
-                        query.split('&').forEach(function(part) {
-                                var item = part.split('=');
-                                result[item[0]] = decodeURIComponent(item[1]);
-                        });
-                        return result;
-                }
-                parameters = getJsonFromUrl();
-                
-                if (parameters['view']) {
-                        canvas.view = JSON.parse(parameters['view']);
-                }
+                var parameters = {};
+                location.search.substr(1).split('&').forEach(function(part) {
+                        var item = part.split('=');
+                        parameters[item[0]] = decodeURIComponent(item[1]);
+                });
+
+                if (parameters['pos']) { canvas.view.position = JSON.parse(parameters['pos']); }
+                if (parameters['rot']) { canvas.view.rotation = JSON.parse(parameters['rot']); }
+                if (parameters['zoom']) { canvas.view.zoom = JSON.parse(parameters['zoom']); }
+                if (parameters['twod']) { canvas.view.twod = JSON.parse(parameters['twod']); }
                 if (parameters['initial']) {
                         initial = JSON.parse(parameters['initial']);
                         if (!initial) {
-                                if (typeof SolveGlacier == 'function') {
+                                if (typeof SolveGlacier === 'function') {
                                         SolveGlacier();
                                 }
-                                if (typeof SolveSlr == 'function') {
+                                if (typeof SolveSlr === 'function') {
                                         SolveSlr();
                                 }
                         }
@@ -162 +160 @@
         }
 } //}}}
 function generatePermalink() { //{{{
-        var permalink = window.location.origin + window.location.pathname + '&view=' + JSON.stringify(canvas.view) + '&initial=' + JSON.stringify(initial);
+        var permalink = window.location.origin + window.location.pathname + '?'
+        + '&pos=' + encodeURIComponent(JSON.stringify(canvas.view.position))
+        + '&rot=' + encodeURIComponent(JSON.stringify(canvas.view.rotation)) 
+        + '&zoom=' + encodeURIComponent(JSON.stringify(canvas.view.zoom))
+        + '&twod=' + encodeURIComponent(JSON.stringify(canvas.view.twod));
         window.prompt('Share this simulation: ', permalink);
 } //}}}
 function loadShaders(gl, rootPath) { //{{{
@@ -181 +183 @@
         }
         return gl.textures[imageSource];
 } //}}}
-function Node(gl) { //{{{
-        //Returns a Node object that contains default display states for webgl object. center represents pivot point of rotation.
-        return {
-                alpha: 1.0,
-                buffers: [],
-                cullFace: gl.BACK,
-                disableDepthTest: false, 
-                drawMode: gl.TRIANGLES,
-                drawOrder: 0,
-                enabled: true,
-                enableCullFace: true,
-                hideOcean: false,
-                lineWidth: 1.0,
-                maskEnabled: false,
-                maskHeight: 150.0,
-                maskColor: vec4.fromValues(0.0, 0.0, 1.0, 1.0),
-                mesh: null,
-                name: 'node',
-                shaderName: 'Colored',
-                shader: gl.shaders.Colored,
-                texture: null,
-                useIndexBuffer: true,
-                center: vec3.create(), 
-                scale: vec3.fromValues(1, 1, 1),
-                rotation: vec3.create(),
-                translation: vec3.create(),
-                modelMatrix: mat4.create(),
-                rotationMatrix: mat4.create(),
-                inverseModelMatrix: mat4.create(),
-                inverseRotationMatrix: mat4.create()
-        };
-} //}}}
-function debugNodes(canvasid) { //{{{
-        var canvasid = canvasid || '.sim-canvas';
-        var nodes = document.getElementById(canvasid).nodes;
-        console.log(canvasid, 'Nodes:');
-        for (var node in nodes) {
-                console.log('name: ', nodes[node].name, ' node: ', nodes[node], ' mesh: ', nodes[node].mesh, ' translation: ', nodes[node].translation, ' center:', nodes[node].center, ' rotation:', nodes[node].rotation);
-        }
-        return nodes;
-} //}}}
-function updateModelMatrix(node) { //{{{
-        var modelMatrix = mat4.create();
-
-        var translationMatrix = mat4.create();
-        mat4.translate(translationMatrix, translationMatrix, vec3.negate(vec3.create(), node.center)); //scale/rotation centering
-        mat4.multiply(modelMatrix, translationMatrix, modelMatrix);
-        
-        var scaleMatrix = mat4.create();
-        mat4.scale(scaleMatrix, scaleMatrix, node.scale);
-        mat4.multiply(modelMatrix, scaleMatrix, modelMatrix);
-        
-        var rotationMatrix = mat4.create();
-        var zRotationMatrix = mat4.create();    
-        mat4.rotate(zRotationMatrix, zRotationMatrix, DEG2RAD * node.rotation[2], [0.0, 0.0, 1.0]);
-        mat4.multiply(rotationMatrix, zRotationMatrix, rotationMatrix);
-        var yRotationMatrix = mat4.create();    
-        mat4.rotate(yRotationMatrix, yRotationMatrix, DEG2RAD * node.rotation[1], [0.0, 1.0, 0.0]);
-        mat4.multiply(rotationMatrix, yRotationMatrix, rotationMatrix);
-        var xRotationMatrix = mat4.create();    
-        mat4.rotate(xRotationMatrix, xRotationMatrix, DEG2RAD * node.rotation[0], [1.0, 0.0, 0.0]);
-        mat4.multiply(rotationMatrix, xRotationMatrix, rotationMatrix);
-        mat4.multiply(modelMatrix, rotationMatrix, modelMatrix);        
-        
-        mat4.identity(translationMatrix);
-        mat4.translate(translationMatrix, translationMatrix, node.center); //relative translation
-        mat4.multiply(modelMatrix, translationMatrix, modelMatrix);
-        
-        mat4.identity(translationMatrix);
-        mat4.translate(translationMatrix, translationMatrix, node.translation); //absolute translation
-        mat4.multiply(modelMatrix, translationMatrix, modelMatrix);
-        
-        node.modelMatrix = modelMatrix;
-        node.inverseModelMatrix = mat4.invert(mat4.create(), modelMatrix);
-        node.rotationMatrix = rotationMatrix;
-        node.inverseRotationMatrix = mat4.invert(mat4.create(), rotationMatrix);
-} //}}}
 function clamp(value, min, max) { //{{{
         return Math.max(min, Math.min(value, max));
 } //}}}
@@ -265 +190 @@
         return typeof name !== 'undefined' ? name : value;
 } //}}}
 function isEmptyOrUndefined(object) { //{{{
-        return object === undefined || Object.getOwnPropertyNames(object).length === 0;
+        return object === undefined || isEmpty(object);
 } //}}}
+function isEmpty(object) { //{{{
+        for (var key in object) {
+                return false;
+        }
+        return true;
+} //}}}
 function recover(canvasid, name, value) { //{{{
         //Traverse canvas object tree for property defined by dot delimited string, returning it, or a default value if it is not found.
         var object = document.getElementById(canvasid);
         var properties = name.split('.');
-        for (var i = 0; i < properties.length; ++i) {
+        for (var i = 0; i < properties.length; i++) {
                 object = object[properties[i]];
-                if (typeof object === 'undefined') { break; }
+                if (isEmptyOrUndefined(object)) { break; }
     }
         return defaultFor(object, value);
 } //}}}
@@ -325 +256 @@
 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.dataMarkers.enabled) { return; }
-        var hit = raycast(canvas, ev.srcEvent.layerX, ev.srcEvent.layerY);
-        canvas.dataMarkers.marker.hit = hit;
+        
+        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;
-        updateMarker(canvas, true);
+        
+        if (canvas.dataMarkers.enabled) {
+                canvas.dataMarkers.marker.selector.closed = false;
+                canvas.dataMarkers.marker.hit = hit;
+                updateMarker(canvas, true);
+        }
+        
         brushModify(canvas);
 } //}}}
 function onPan(ev, canvas, displaylog) { //{{{
         ev.preventDefault();
         
-        if (canvas.dataMarkers.enabled == 'on') {
-                canvas.brush.hit = raycast(canvas, ev.srcEvent.layerX, ev.srcEvent.layerY);
-                brushModify(canvas);
+        if (canvas.dataMarkers.enabled) {
+                if (!isEmptyOrUndefined(canvas.unitNode)) {
+                        canvas.brush.hit = raycast(canvas, ev.srcEvent.layerX, ev.srcEvent.layerY, canvas.unitNode);
+                        brushModify(canvas);
+                }
         }
         
-        if (ev.type == 'panstart') {
+        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') {
                 canvas.lastDeltaX = 0;
                 canvas.lastDeltaY = 0;
         }
-        if (ev.srcEvent.shiftKey || ev.pointers.length == 2) {
+        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;
@@ -360 +316 @@
         }
         
         else {
-                canvas.view.rotation[0] += (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * -2 * canvas.controlSensitivity * RAD2DEG;
+                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; };
@@ -374 +330 @@
         canvas.lastDeltaX = ev.deltaX;
         canvas.lastDeltaY = ev.deltaY;
         
-        repositionMarker(canvas);
+        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; }
+        if (ev.type === 'pinchstart') { canvas.view.lastZoom = canvas.view.zoom; }
         else { modifyZoom(ev.scale * canvas.view.lastZoom, canvas, displaylog); }
 } //}}}
 function onZoom(ev, canvas, displaylog) { //{{{
@@ -390 +346 @@
 } //}}}
 function modifyZoom(value, canvas, displaylog) { //{{{
         canvas.view.zoom = clamp(value, canvas.view.zoomLimits[0], canvas.view.zoomLimits[1]);
-        repositionMarker(canvas);
+        canvas.dataMarkers.reposition = true;
         if (displaylog) { console.log(canvas.view.zoom); }
 } //}}}
 function modifyDataMarkersEnabled(value, canvas) { //{{{
@@ -407 +363 @@
                 canvas.playButton.find('span').addClass('fa-play');
         }
 } //}}}
-function onSlideStart(canvas, progressBar) { //{{{
-        if (!isEmptyOrUndefined(canvas.animation)) {
-                canvas.animation.increment = false;     
-                canvas.animation.frame = parseInt($(progressBar).val());
-                //console.log(canvas.animation.frame);
-                //updateMarker(canvas, false);
-        }
-} //}}}
-function onSlideChange(canvas, progressBar) { //{{{
-        if (!isEmptyOrUndefined(canvas.animation)) {
-                canvas.animation.frame = parseInt($(progressBar).val());
-                //console.log("change");
-                updateMarker(canvas, false);
-        }
-} //}}}
-function onSlideStop(canvas, progressBar) { //{{{
-        if (!isEmptyOrUndefined(canvas.animation)) {
-                canvas.animation.increment = true;      
-                canvas.animation.frame = parseInt($(progressBar).val());
-                //console.log(canvas.animation.frame);
-                //updateMarker(canvas, false);
-        }
-} //}}}
 //}}}
 //{{{ Interaction Functions
-function raycast(canvas, x, y) { //{{{
+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.
         //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, canvas.unitNode.modelMatrix));
+        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 = canvas.unitNode.mesh;
+        var mesh = node.mesh;
+
         if (!mesh) { return; }
-        if (!mesh.octree) { mesh.octree = new GL.Octree(mesh); }
+        if (!node.octree) { node.octree = new GL.Octree(mesh); }
         
-        var hit = mesh.octree.testRay(origin, ray, 1e3, 1e10);
+        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); }
+
         hit.modelPos = vec3.copy(vec3.create(), hit.pos);
-        vec3.transformMat4(hit.pos, hit.pos, canvas.unitNode.modelMatrix);
-        vec3.transformMat4(hit.normal, hit.normal, canvas.unitNode.modelMatrix);
+        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.
@@ -506 +454 @@
                 //Update mesh on GPU
                 bufferVertices.upload(canvas.gl.DYNAMIC_DRAW);
                 bufferCoords.upload(canvas.gl.DYNAMIC_DRAW);
-                canvas.unitNode.mesh.octree = new GL.Octree(canvas.unitNode.mesh);      
-                
-                //Update clouds if rendered
-                //TODO: Steven, once you update the cloud generation in applyoptions.js, modify this code block to move the clouds as well. We'll want to move them individually later, but moving them all is ok for now.
-                for (var i = 0; i < canvas.clouds.quantity; i++) {
-                        if (canvas.nodes['clouds' + i]) {
-                                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);
-                                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['clouds' + i].translation = [x, y + canvas.clouds.height, z];
-                                updateModelMatrix(canvas.nodes['clouds' + i]);
-                        }
-                }
+                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);
@@ -562 +509 @@
                 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);
@@ -569 +518 @@
 } //}}}
 function repositionMarker(canvas) { //{{{
         //Mover marker to point to mouse position, offset in y by 1 to enable immediate clicking.
-        if (isEmptyOrUndefined(canvas.dataMarkers.marker.hit) || !canvas.camera.ready) { return; }
+        //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);
-        //console.log(canvas, canvas.selector, $(canvas.id)
         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({
@@ -579 +528 @@
                 '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 (isEmptyOrUndefined(canvas.dataMarkers.marker.hit)) { return; }
-        if (isEmptyOrUndefined(canvas.unitNode)) { setTimeout( function(){ updateMarker(canvas, reset); }, 750); return; }
+        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;
         
@@ -605 +554 @@
                 velocity = md.initialization.vel;
         }
         
-        //Determine data values at hit position.
-        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 hitLatitude = [latitude[hit.indices[0]], latitude[hit.indices[1]], latitude[hit.indices[2]]];
-        var hitLongitude = [longitude[hit.indices[0]], longitude[hit.indices[1]], longitude[hit.indices[2]]];
-        var hitThickness = [thickness[hit.indices[0]], thickness[hit.indices[1]], thickness[hit.indices[2]]];
-        var hitVelocity = [velocity[hit.indices[0]], velocity[hit.indices[1]], velocity[hit.indices[2]]];
-        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;
-        var valueLatitude = Math.abs(hitLatitude[0] * hit.uvw[0] + hitLatitude[1] * hit.uvw[1] + hitLatitude[2] * hit.uvw[2]);
-        var valueLongitude = Math.abs(hitLongitude[0] * hit.uvw[0] + hitLongitude[1] * hit.uvw[1] + hitLongitude[2] * hit.uvw[2]);
-        var valueThickness = hitThickness[0] * hit.uvw[0] + hitThickness[1] * hit.uvw[1] + hitThickness[2] * hit.uvw[2];
-        var valueVelocity = hitVelocity[0] * hit.uvw[0] + hitVelocity[1] * hit.uvw[1] + hitVelocity[2] * hit.uvw[2];    
-
         //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 format = canvas.dataMarkers.format.slice();
-        for (var i = 1; i < format.length; i++) {
-                if (format[i].toLowerCase() == 'x') { format[i] = hit.modelPos[0]; }
-                else if (format[i].toLowerCase() == 'y') { format[i] = hit.modelPos[1]; }
-                else if (format[i].toLowerCase() == 'z') { format[i] = hit.modelPos[2]; }
-                else if (format[i].toLowerCase() == 'lat') { format[i] = valueLatitude; }
-                else if (format[i].toLowerCase() == 'long') { format[i] = valueLongitude; }
-                else if (format[i].toLowerCase() == 'thickness') { format[i] = valueThickness; }
-                else if (format[i].toLowerCase() == 'vel') { format[i] = valueVelocity; }
-                else if (format[i].toLowerCase() == 'value') { format[i] = value; }
+        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, format));
+        $('#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 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) {
@@ -646 +603 @@
                         canvas.dataMarkers.values = [];
                         newMovieFrame = true;
                         for (var currentFrame = 0; currentFrame < (canvas.unitNode.movieLength); currentFrame++) {
-                                coords = canvas.unitNode.texcoords[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];
@@ -655 +612 @@
                         }
                 }
                 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]);
                         }
                 }
@@ -663 +626 @@
                 //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);                                 
+                        var dataDisplay = canvas.dataMarkers.values.slice(0, canvas.animation.frame + 1);               
                         plot(
                                 'id', '#sim-plot', 
                                 'type', 'bar', 
@@ -679 +642 @@
                         );
                 }
         }
-        repositionMarker(canvas);
-        if (reset) {
+        canvas.dataMarkers.reposition = true;
+        if (reset && !canvas.dataMarkers.marker.selector.closed) {
                 canvas.dataMarkers.marker.selector.fadeIn(175);
                 canvas.dataMarkers.marker.selector.tooltipster('open');
         }
 } //}}}
+function animateValue(current, target, duration, stepCallback, doneCallback) { //{{{
+        //Animates scalar value for length duration, calling callback each step.
+        //TODO: Specify lerp easing as option (cubic, linear, cosine).
+        $({'value':current}).animate({'value':target}, {
+                duration: duration,
+                step: stepCallback,
+                done: doneCallback
+        });
+} //}}}
 //}}}
 //{{{ Drawing Functions
 function updateCameraMatrix(canvas) { //{{{
@@ -706 +678 @@
         
         //Calculate rotation around camera focal point about worldspace origin
         if (canvas.view.twod) {
-                mat4.rotate(azimuthRotationMatrix, azimuthRotationMatrix, DEG2RAD * 0, [0, 1, 0]);
+                mat4.rotate(azimuthRotationMatrix, azimuthRotationMatrix, -DEG2RAD * 0, [0, 1, 0]);
                 mat4.rotate(elevationRotationMatrix, elevationRotationMatrix, DEG2RAD * 90, [1, 0, 0]);
                 mat4.multiply(rotationMatrix, elevationRotationMatrix, azimuthRotationMatrix);
         }
         else {
-                mat4.rotate(azimuthRotationMatrix, azimuthRotationMatrix, DEG2RAD * canvas.view.rotation[0], [0, 1, 0]);
+                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.multiply(rotationMatrix, elevationRotationMatrix, azimuthRotationMatrix);
         }
@@ -734 +706 @@
         
         vec3.transformMat4(canvas.camera.position, cameraPosition, canvas.camera.vpInverseMatrix);
         canvas.camera.ready = true;
+        repositionMarker(canvas);
 }//}}}
 function drawSceneGraphNode(canvas, node) { //{{{
         if (!node.enabled) { return; }
@@ -748 +721 @@
         mat4.multiply(mvMatrix, canvas.camera.vMatrix, node.modelMatrix);
         
         var normalMatrix = mat4.create();
-        mat4.invert(normalMatrix, mvMatrix);
+        mat4.invert(normalMatrix, node.modelMatrix);
         mat4.transpose(normalMatrix, normalMatrix);
         
         if (node.texture) { node.texture.bind(0); }
@@ -768 +741 @@
         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 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)];
@@ -797 +770 @@
                 m4MVP: mvpMatrix,
                 m4Normal: normalMatrix,
                 m4Model: node.modelMatrix,
-                //u_lightPosition: [-lightOrigin[0], -lightOrigin[1], -lightOrigin[2]],
-                u_lightPosition: [1.0, 1.0, 1.0],
-                u_diffuseColor: [1.0, 0.9, 0.9],
+                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,
@@ -840 +818 @@
         //TODO: Come up with better way to check if shaders are ready, or move outside of main draw function
         var nodes = canvas.nodes;
         if (!canvas.draw.ready) {
-                if (nodes.length !== 0) {
+                if (Object.keys(nodes).length !== 0) {
                         canvas.draw.ready = true;
                         for (var node in nodes) {
-                                if (nodes[node].shader.ready == false) {
+                                if (nodes[node].shader.ready === false) {
                                         canvas.draw.ready = false;
                                         break;
                                 }
@@ -854 +832 @@
         
         //Begin rendering nodes
         if (canvas.draw.ready) {
-                if (canvas.textcanvas) { canvas.textcanvas.draw(canvas); }
-                if (canvas.overlaycanvas) { canvas.overlaycanvas.draw(canvas); }
-        
                 var rect = canvas.getBoundingClientRect();
                 canvas.width  = rect.width;
                 canvas.height = rect.height;
@@ -869 +844 @@
                 
                 updateCameraMatrix(canvas);
                 
+                if (canvas.textcanvas) { canvas.textcanvas.draw(canvas); }
+                if (canvas.overlaycanvas) { canvas.overlaycanvas.draw(canvas); }
+                
                 var drawPassNumber = 3;
-                for (var i = drawPassNumber - 1; i >= 0; i--) {
+                for (var i = drawPassNumber - 1; i >= 0; --i) {
                         for (var node in nodes) {
-                                if (nodes[node].drawOrder == i) { drawSceneGraphNode(canvas, nodes[node]); }
+                                if (nodes[node].drawOrder === i) { drawSceneGraphNode(canvas, nodes[node]); }
                         }
                 }
         }

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

@@ -1 @@
-function applyoptions(md, data, datatype, options, canvas, gl, node){ //{{{
+function applyoptions(md, data, options, canvas){ //{{{
         //APPLYOPTIONS - apply colobar, text, cloud, and expdisp options to current plot
         //
         //   Usage:
@@ -7 +7 @@
         //   See also: PLOTMODEL, PARSE_OPTIONS
         
         //{{{ colorbar
+        var gl = canvas.gl;
         if (options.exist('colorbar')) {
                 if (options.getfieldvalue('colorbar')==1) {
-                        //{{{ Handle movie data
-                        if (datatype == 5) {
-                                data = data[0];
-                        } //}}}
                         //{{{ Variable options initialization
-                        var caxis = options.getfieldvalue('caxis',[ArrayMin(data), ArrayMax(data)]);
+                        var caxis = options.getfieldvalue('caxis');
                         var colorbarinnerlabels = options.getfieldvalue('colorbarinnerlabels','off');
                         var ccanvasid, ctitleid, clabelsid, ccanvas, ctitle, clabels, ccontext, cmap, colorbar, cwidth, cheight, cgradient, color, y, x;
                         //}}}
@@ -23 +20 @@
                         var cdivisions = options.getfieldvalue('colorbarnticks', 6);
                         var caxisdelta = caxis[1] - caxis[0];
                         var precision = options.getfieldvalue('colorbarprecision', 3);
+                        var format = options.getfieldvalue('colorbarformat', 'f').toLowerCase();
                         if (options.getfieldvalue('log','off')!='off') {
                                 for (var i=cdivisions; i >= 0; i--) {
                                         var scale = (Math.log10(caxis[1])-Math.log10(caxis[0]))/Math.log10(options.getfieldvalue('log', 10));
-                                        labels[i] = (Math.pow(options.getfieldvalue('log', 10), Math.log10(caxis[0])/Math.log10(options.getfieldvalue('log', 10))+scale*(cdivisions-i)/cdivisions)).toFixed(precision);
+                                        if (format === 'f') {
+                                                labels[i] = (Math.pow(options.getfieldvalue('log', 10), Math.log10(caxis[0])/Math.log10(options.getfieldvalue('log', 10))+scale*(cdivisions-i)/cdivisions)).toFixed(precision);
+                                        }
+                                        else if (format === 'e') {
+                                                labels[i] = (Math.pow(options.getfieldvalue('log', 10), Math.log10(caxis[0])/Math.log10(options.getfieldvalue('log', 10))+scale*(cdivisions-i)/cdivisions)).toPrecision(precision);
+                                        }
+                                        else {
+                                                labels[i] = (Math.pow(options.getfieldvalue('log', 10), Math.log10(caxis[0])/Math.log10(options.getfieldvalue('log', 10))+scale*(cdivisions-i)/cdivisions)).toFixed(precision);
+                                        }
                                 }
                         } else {
                                 for (var i=cdivisions; i >= 0; i--) {
-                                        labels[i] = (caxisdelta*(cdivisions-i)/cdivisions+caxis[0]).toFixed(precision);
+                                        if (format === 'f') {
+                                                labels[i] = (caxisdelta*(cdivisions-i)/cdivisions+caxis[0]).toFixed(precision);
+                                        }
+                                        else if (format === 'e') {
+                                                labels[i] = (caxisdelta*(cdivisions-i)/cdivisions+caxis[0]).toPrecision(precision);
+                                        }
+                                        else {
+                                                labels[i] = (caxisdelta*(cdivisions-i)/cdivisions+caxis[0]).toFixed(precision);
+                                        }
                                 }
                         } //}}}
                         //{{{ Initialize colorbar canvas
@@ -116 +130 @@
         tcontext.fillStyle = tgradient;
         tcontext.fillRect(0, 0, 256, 256);
         tURL = tcanvas.toDataURL();
-        node.texture = initTexture(gl, tURL);
-        node.textureCanvas = tcanvas;
-        node.caxis = options.getfieldvalue('caxis',[ArrayMin(data), ArrayMax(data)]);
+        canvas.unitNode.texture = initTexture(canvas.gl, tURL);
         //}}}
-        //{{{ expdisp contours
-        if (options.exist('expdisp')) {
-                canvas.nodes.expdisp = Node(gl, options);
-                var node = canvas.nodes.expdisp;
-                
-                //declare variables:  {{{
-                var vertices = [];
-                var indices = [];
-                var colors = [];
-                var rgbcolor = [];
-                var xmin, xmax;
-                var ymin, ymax;
-                var zmin, zmax;
-                var scale;
-                
-                //Process data and model
-                var x = options.getfieldvalue('expdisp').x;
-                var y = options.getfieldvalue('expdisp').y;
-                var z = Array.apply(null, Array(x.length)).map(Number.prototype.valueOf, 0);
-                
-                if (options.getfieldvalue('expdisp').z) {
-                        z = options.getfieldvalue('expdisp').z;
-                }
-                //}}}
-
-                //Compute coordinates and data range: //{{{
-                var modelxlim = [ArrayMin(x), ArrayMax(x)];
-                var modelylim = [ArrayMin(y), ArrayMax(y)];
-                var modelzlim = [ArrayMin(z), ArrayMax(z)];
-                var xlim = options.getfieldvalue('xlim', modelxlim);
-                var ylim = options.getfieldvalue('ylim', modelylim);
-                var zlim = options.getfieldvalue('zlim', modelzlim);
-                xmin = xlim[0];
-                xmax = xlim[1];
-                ymin = ylim[0];
-                ymax = ylim[1];
-                zmin = zlim[0];
-                zmax = zlim[1];
-                //}}}
-
-                //Compute scaling: //{{{
-                var scale = 1 / (xmax - xmin);
-                node.shaderName = 'colored';
-                node.shader = gl.shaders[node.shaderName].program;
-                node.scale = [scale, scale, scale*options.getfieldvalue('heightscale', 1)];
-                node.translation = [(xmin + xmax) / (-2 / scale), (ymin + ymax) / (-2 / scale), (zmin + zmax) / (-2 / scale)];
-                node.modelMatrix = updateModelMatrix(node);
-                node.drawMode = gl.LINE_LOOP;
-                node.drawOrder = 0;
-                node.useIndexBuffer = false;
-                node.disableDepthTest = true;
-                //}}}
-
-                //some defaults:
-                colors.itemSize = 4;
-
-                //retrieve some options
-                var linewidth=options.getfieldvalue('linewidth', 1);
-                var edgecolor=options.getfieldvalue('edgecolor','black'); //RGBCOLOR?
-
-                vertices.itemSize = 3;
-                for(var i=0; i < x.length; i++){
-                        vertices[vertices.length] = x[i];
-                        vertices[vertices.length] = y[i];
-                        vertices[vertices.length] = z[i];
-
-                        //edgecolor
-                        rgbcolor = [0.0, 0.0, 0.0];
-                        colors[colors.length] = rgbcolor[0];
-                        colors[colors.length] = rgbcolor[1];
-                        colors[colors.length] = rgbcolor[2];
-                        colors[colors.length] = 1.0;
-                }
-
-                //Initalize buffers:
-                node.arrays = [vertices, colors];
-                node.buffers = initBuffers(gl, node.arrays);
-        } //}}}
-        //{{{ cloud of points
-        if (options.exist('cloud')) {
-                canvas.nodes.cloud = Node(gl, options);
-                var node = canvas.nodes.cloud;
-
-                //declare variables:  {{{
-                var vertices = [];
-                var indices = [];
-                var colors = [];
-                var rgbcolor = [];
-                var xmin, xmax;
-                var ymin, ymax;
-                var zmin, zmax;
-                var scale;
-                
-                //Process data and model
-                var x = options.getfieldvalue('cloud').x;
-                var y = options.getfieldvalue('cloud').y;
-                var z = Array.apply(null, Array(x.length)).map(Number.prototype.valueOf, 0);
-                
-                if (options.getfieldvalue('cloud').z) {
-                        z = options.getfieldvalue('cloud').z;
-                }
-                //}}}
-
-                //Compute coordinates and data range: //{{{
-                var modelxlim = [ArrayMin(x), ArrayMax(x)];
-                var modelylim = [ArrayMin(y), ArrayMax(y)];
-                var modelzlim = [ArrayMin(z), ArrayMax(z)];
-                var xlim = options.getfieldvalue('xlim', modelxlim);
-                var ylim = options.getfieldvalue('ylim', modelylim);
-                var zlim = options.getfieldvalue('zlim', modelzlim);
-                xmin = xlim[0];
-                xmax = xlim[1];
-                ymin = ylim[0];
-                ymax = ylim[1];
-                zmin = zlim[0];
-                zmax = zlim[1];
-                //}}}
-
-                //Compute scaling: //{{{
-                var scale = 1 / (xmax - xmin);
-                node.shaderName = 'colored';
-                node.shader = gl.shaders[node.shaderName].program;
-                node.scale = [scale, scale, scale*options.getfieldvalue('heightscale', 1)];
-                node.translation = [(xmin + xmax) / (-2 / scale), (ymin + ymax) / (-2 / scale), (zmin + zmax) / (-2 / scale)];
-                node.modelMatrix = updateModelMatrix(node);
-                node.drawMode = gl.POINTS;
-                node.drawOrder = 0;
-                node.useIndexBuffer = false;
-                node.disableDepthTest = true;
-                //}}}
-
-                //some defaults:
-                colors.itemSize = 4;
-
-                //retrieve some options
-                var linewidth=options.getfieldvalue('linewidth', 1);
-                var edgecolor=options.getfieldvalue('edgecolor','black'); //RGBCOLOR?
-
-                vertices.itemSize = 3;
-                for(var i=0; i < x.length; i++){
-                        vertices[vertices.length] = x[i];
-                        vertices[vertices.length] = y[i];
-                        vertices[vertices.length] = z[i];
-
-                        //edgecolor
-                        rgbcolor = [0.0, 0.0, 0.0];
-                        colors[colors.length] = rgbcolor[0];
-                        colors[colors.length] = rgbcolor[1];
-                        colors[colors.length] = rgbcolor[2];
-                        colors[colors.length] = 1.0;
-                }
-
-                //Initalize buffers:
-                node.arrays = [vertices, colors];
-                node.buffers = initBuffers(gl, node.arrays);
-        } //}}}
         //{{{ text display
         if (options.exist('textlabels')) {
                 var textcanvas, textcanvasid;   
@@ -324 +180 @@
                 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,
+                        //'-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) {
@@ -400 +256 @@
                 var is2d = meshresults[4]; 
                 var isplanet = meshresults[5];
                 
-                var modelxlim = [ArrayMin(x), ArrayMax(x)];
-                var modelylim = [ArrayMin(y), ArrayMax(y)];
-                var modelzlim = [ArrayMin(z), ArrayMax(z)];
-                var xlim = options.getfieldvalue('xlim', modelxlim);
-                var ylim = options.getfieldvalue('ylim', modelylim);
-                var zlim = options.getfieldvalue('zlim', modelzlim);
-                xmin = xlim[0];
-                xmax = xlim[1];
-                ymin = ylim[0];
-                ymax = ylim[1];
-                zmin = zlim[0];
-                zmax = zlim[1];
+                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([(xmin + xmax) / 2, (ymin + ymax) / 2, (zmin + zmax) / 2]) < 6371000/10; //tolerance for global models = center is 637100 meters away from center of earth
-                var atmosphereScale = 1.25;
-                var translation = global ? [(xmin + xmax) / 2, (ymin + ymax) / 2, (zmin + zmax) / 2] : [(xmin + xmax) / 2, (ymin + ymax) - 6371000, (zmin + zmax) / 2];
-                
-                if (options.getfieldvalue('render',[]).indexOf('sky')!=-1) {    
-                        //atmosphere
-                        var node = Node(gl);
-                        node.name = "atmosphere";
-                        node.shaderName = "SkyFromSpace";
-                        node.shader = gl.shaders[node.shaderName];
-                        node.drawOrder = 1;
-                        node.cullFace = gl.FRONT;
-                        node.enableCullFace = true;
-                        node.mesh = GL.Mesh.icosahedron({size: 6371000*atmosphereScale, subdivisions: 6});
-                        node.rotation = [0, 0, 0];
-                        node.translation = translation;
-                        node.center = [0, 0, 0];
-                        updateModelMatrix(node);
-                        canvas.nodes[node.name] = node;
+                var renderObjects = options.getfieldvalue('render',{});
+                if ('sky' in renderObjects && !('sky' in canvas.nodes)) {
+                        var object = renderObjects.sky;
+                        object = {
+                                enabled: defaultFor(object.enabled, true),
+                                scale: defaultFor(object.scale, 1),
+                        };
+                        if (object.enabled) {
+                                var atmosphereScale = 1.25;
+                                var mesh = GL.Mesh.icosahedron({size: 6371000 * atmosphereScale, subdivisions: 5});
+                                var texture = initTexture(gl, canvas.rootPath + 'textures/TychoSkymapII_t4_2k.jpg');
+                                node = new Node(
+                                        'canvas', canvas,
+                                        'options', options,
+                                        'name', 'sky',
+                                        'shaderName', 'SkyFromSpace',
+                                        'cullFace', gl.FRONT,
+                                        'mesh', mesh,
+                                        'texture',texture,
+                                        'translation',translation
+                                );
+                        }
                 }
-                if (options.getfieldvalue('render',[]).indexOf('space')!=-1) {  
-                        //skysphere
-                        node = Node(gl);
-                        node.name = "skysphere";
-                        node.shaderName = "Textured";
-                        node.shader = gl.shaders[node.shaderName];
-                        node.drawOrder = 2;
-                        node.cullFace = gl.FRONT;
-                        node.enableCullFace = true;
-                        node.mesh = GL.Mesh.sphere({size: 6371000*20});
-                        node.texture = initTexture(gl, canvas.rootPath+'textures/TychoSkymapII_t4_2k.jpg');
-                        node.rotation = [0, 0, 0];
-                        node.translation = translation;
-                        node.center = [0, 0, 0];
-                        updateModelMatrix(node);
-                        canvas.nodes[node.name] = node;
+                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) {
+                                var mesh = GL.Mesh.sphere({size: 6371000 * 20});
+                                var texture = initTexture(gl, canvas.rootPath + 'textures/TychoSkymapII_t4_2k.jpg');
+                                node = new Node(
+                                        'canvas', canvas,
+                                        'options', options,
+                                        'name', 'space',
+                                        'shaderName', 'Textured',
+                                        'cullFace', gl.FRONT,
+                                        'drawOrder', 2,
+                                        'mesh', mesh,
+                                        'texture',texture,
+                                        'translation',translation
+                                );
+                        }
                 }
+                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,
+                                        'name', 'coastlines',
+                                        'shaderName', 'Colored',
+                                        'drawMode', gl.LINE_STRIP,
+                                        'lineWidth', options.getfieldvalue('linewidth', 1),
+                                        'scale', [object.scale, object.scale, object.scale],
+                                        'rotation', [-90, 0, 0]
+                                );
+                                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,
+                                        'name', 'graticule',
+                                        'shaderName', 'Colored',
+                                        'drawMode', gl.LINE_STRIP,
+                                        'lineWidth', options.getfieldvalue('linewidth', 1),
+                                        'scale', [object.scale, object.scale, object.scale],
+                                        'rotation', [-90, 0, 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) {
+                                var mesh = GL.Mesh.icosahedron({size: object.size, subdivisions: 1});
+                                node = new Node(
+                                        'canvas', canvas,
+                                        'options', options,
+                                        'name', 'cities',
+                                        'shaderName', 'Colored',
+                                        'diffuseColor', object.color,
+                                        'lineWidth', options.getfieldvalue('linewidth', 1),
+                                        'scale', [object.scale, object.scale, object.scale],
+                                        'rotation', [-90, 0, 0]
+                                );
+                                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) {
+                                //city
+                                var mesh = GL.Mesh.sphere({size: object.size});
+                                node = new Node(
+                                        'canvas', canvas,
+                                        'options', options,
+                                        'name', 'city',
+                                        'shaderName', 'Colored',
+                                        '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');
+                                        var node = canvas.nodes['city'];
+                                        node.translation = [object.x, object.z, -object.y];
+                                        node.updateModelMatrix();
+                                        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.fillStyle = options.getfieldvalue('colorbarfontcolor','black');
+                                        ctx.strokeStyle = 'white';
+                                        ctx.textAlign = 'center';
+                                        ctx.textBaseline = 'middle';
+                                        ctx.fillText(object.name, x, y);
+                                        ctx.strokeText(object.name, x, y);
+                                }
+                                canvas.overlaycanvas = overlaycanvas;
+                        }
+                }
                 if (canvas.clouds.enabled) {
                         //clouds
                         for (var i = 0; i < canvas.clouds.quantity; i++) {
-                                node = Node(gl);
-                                node.name = "clouds" + i;
-                                node.shaderName = "Clouds";
-                                node.shader = gl.shaders[node.shaderName];
-                                node.drawOrder = 2;
-                                node.cullFace = gl.BACK;
-                                node.enableCullFace = true;
-                                node.mesh = GL.Mesh.fromURL(canvas.rootPath+'obj/cloud.obj');
-                                node.rotation = [0, 0, 0];
-                                node.scale = [2500, 2500, 2500];
-                                node.translation = [translation[0], translation[1] - 405000, translation[2]];
-                                node.center = [0, 0, 0];
-                                node.animation = {"time": Date.now(),"target": node.translation,"current": node.translation};
-                                updateModelMatrix(node);
-                                canvas.nodes[node.name] = node;
-                                //canvas.clouds.list
+                                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
+                                );
                         }
-                        //TODO: Steven, please add <canvas.clouds.quantity> total cloud nodes, randomly spread over the mesh, giving each one a new name and adding them to the canvas.clouds.list so that we can track them later.
-                        
                 }
-                if (options.getfieldvalue('render',[]).indexOf('latlong')!=-1) {        
-                        //latlong
-                        node = Node(gl);
-                        node.name = "clouds";
-                        node.shaderName = "Clouds";
-                        node.shader = gl.shaders[node.shaderName];
-                        node.drawOrder = 2;
-                        node.cullFace = gl.BACK;
-                        node.enableCullFace = true;
-                        node.mesh = GL.Mesh.fromURL(canvas.rootPath+'obj/cloud.obj');
-                        node.rotation = [0, 0, 0];
-                        node.scale = [2500, 2500, 2500];
-                        node.translation = [translation[0], translation[1] - 405000, translation[2]];
-                        node.center = [0, 0, 0];
-                        node.animation = {"time": Date.now(),"target": node.translation,"current": node.translation};
-                        updateModelMatrix(node);
-                        canvas.nodes[node.name] = node;
-                }
         } //}}}
 } //}}}

../trunk-jpl/src/m/plot/plot_transient_movie.m

@@ -6 +6 @@
 %   See also: PLOTMODEL, PLOT_UNIT, PLOT_MANAGER
 
         %prepare subplot
-        subplot(width,width,i); 
+        subplot(width,width,i);
 
         %xlim
         if exist(options,'transient_movie_field'),

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

@@ +1 @@
+//NODE class definition //{{{
+//      Description:
+//              Contains all information for rendering an object in WebGL, including mesh, materials, shaders, and other attributes.    
+//      Usage:
+//              node=new Node('canvas', canvas);
+
+function Node() { //{{{
+        //properties 
+        // {{{
+        var args = Array.prototype.slice.call(arguments);
+        var options = new pairoptions(args.slice(0,args.length));
+
+        this.canvas = options.getfieldvalue('canvas',                                                           null),
+        this.options = options.getfieldvalue('options',                                                         null),
+        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())
+        //}}}
+        //initialize {{{
+        //if (this.name in canvas.nodes) abort? 
+        this.updateModelMatrix();
+        this.updateDiffuseColor();
+        canvas.nodes[this.name] = this;
+        //}}}
+} //}}}
+Node.prototype.updateModelMatrix = function() { //{{{
+        //Update the model matrix if rotation, scale, or translation have been manually modified.
+        var modelMatrix = mat4.create();
+
+        var translationMatrix = mat4.create();
+        mat4.translate(translationMatrix, translationMatrix, vec3.negate(vec3.create(), this.center)); //scale/rotation centering
+        mat4.multiply(modelMatrix, translationMatrix, modelMatrix);
+        
+        var scaleMatrix = mat4.create();
+        mat4.scale(scaleMatrix, scaleMatrix, this.scale);
+        mat4.multiply(modelMatrix, scaleMatrix, modelMatrix);
+        
+        var rotationMatrix = mat4.create();
+        var zRotationMatrix = mat4.create();    
+        mat4.rotate(zRotationMatrix, zRotationMatrix, DEG2RAD * this.rotation[2], [0.0, 0.0, 1.0]);
+        mat4.multiply(rotationMatrix, zRotationMatrix, rotationMatrix);
+        var yRotationMatrix = mat4.create();    
+        mat4.rotate(yRotationMatrix, yRotationMatrix, DEG2RAD * this.rotation[1], [0.0, 1.0, 0.0]);
+        mat4.multiply(rotationMatrix, yRotationMatrix, rotationMatrix);
+        var xRotationMatrix = mat4.create();    
+        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.identity(translationMatrix);
+        mat4.translate(translationMatrix, translationMatrix, this.center); //relative translation
+        mat4.multiply(modelMatrix, translationMatrix, modelMatrix);
+        
+        mat4.identity(translationMatrix);
+        mat4.translate(translationMatrix, translationMatrix, this.translation); //absolute translation
+        mat4.multiply(modelMatrix, translationMatrix, modelMatrix);
+        
+        this.modelMatrix = modelMatrix;
+        this.inverseModelMatrix = mat4.invert(mat4.create(), modelMatrix);
+        this.rotationMatrix = rotationMatrix;
+        this.inverseRotationMatrix = mat4.invert(mat4.create(), rotationMatrix);
+} //}}}
+Node.prototype.updateDiffuseColor = function() { //{{{
+        //Update the diffuse color with an RGB color name or vec4 containing r, g, b, and alpha values from 0.0 to 1.0
+        var color = this.diffuseColor;
+        if (typeof color === 'string') {
+                color = new RGBColor(color);
+                if (color.ok) color = [color.r/255.0, color.g/255.0, color.b/255.0, 1.0];
+                else throw Error(sprintf("s%s%s\n","initWebGL error message: cound not find out edgecolor color for curent canvas ", canvas));
+        }
+        this.diffuseColor = color;
+} //}}}
+Node.prototype.transform = function() { //{{{
+        //Transforms the translation, rotation, or scle fo the node and updates the model matrix.
+        var args = Array.prototype.slice.call(arguments);
+        var options = new pairoptions(args.slice(0,args.length));
+        
+        var translation = options.getfieldvalue('translation', undefined);
+        var rotation = options.getfieldvalue('rotation', undefined);
+        var scale = options.getfieldvalue('scale', undefined);
+        
+        if (!isEmptyOrUndefined(translation)) this.translation = translation;
+        if (!isEmptyOrUndefined(rotation)) this.rotation = rotation;
+        if (!isEmptyOrUndefined(scale)) this.scale = scale;
+        this.updateModelMatrix();
+} //}}}
+Node.prototype.patch = function() { //{{{
+        //Emulates the behavior of MATLAB patch function by constructing a mesh from arguments.
+        //Limitations: 
+        //      -Expects pair labeled arguments ('FaceColor','none',...).
+        //      -Only handles Face/Vertices/FaceVertexCData element/node plots.
+        //      -Only supports FaceColor 'interp' and 'none'.
+        
+        var args = Array.prototype.slice.call(arguments);
+        var options = new pairoptions(args.slice(0,args.length));
+
+        var faces = options.getfieldvalue('Faces', undefined);
+        var vertices = options.getfieldvalue('Vertices', undefined);
+        var faceVertexCData = options.getfieldvalue('FaceVertexCData', undefined);
+        var faceColor = options.getfieldvalue('FaceColor', 'interp');
+        var edgeColor = options.getfieldvalue('EdgeColor', this.diffuseColor);
+        var lineWidth = options.getfieldvalue('linewidth', 1);
+        
+        this.faces = faces;
+        this.vertices = vertices;
+        this.diffuseColor = edgeColor;
+        this.updateDiffuseColor();
+        
+        this.patchVertices(faceVertexCData, faces, vertices);
+        this.patchCoords(faceVertexCData, faces, vertices);
+        this.patchIndices(faces, faceColor);
+
+        this.mesh = GL.Mesh.load(this.arrays, null, null, this.gl);
+        //this.mesh.computeNormals();
+        this.computeOctree();
+} //}}}
+Node.prototype.patchVertices = function(faceVertexCData, faces, vertices) { //{{{
+        //Patch subfunction for processing xyz vertices.
+        var vertexArray;
+        var face;
+        
+        if (isEmptyOrUndefined(faceVertexCData)) {
+                vertexArray = new Float32Array(vertices[0].length * 3);
+                for(var i = 0, v = 0; i < vertices[0].length; i++) {    
+                        vertexArray[v++] = vertices[0][i];
+                        vertexArray[v++] = vertices[1][i];
+                        vertexArray[v++] = vertices[2][i];
+                }
+        }
+        else if (!Array.isArray(faceVertexCData[0])) { //indexed plot - faceVertexCData = [0, 2.32, 231.1, ...]
+                if (faceVertexCData.length === faces.length) { //element plot
+                        vertexArray = new Float32Array(faces.length * 3 * 3);
+                        for(var i = 0, v = 0, t = 0; i < faces.length; i++) {
+                                face = [faces[i][0] - 1, faces[i][1] - 1, faces[i][2] - 1];
+                                for(var j = 0; j < face.length; j++) {
+                                        if (isNaN(faceVertexCData[i])) {
+                                                this.nanIndices.add(i);
+                                                vertexArray[v++] = 0.0;
+                                                vertexArray[v++] = 0.0;
+                                                vertexArray[v++] = 0.0;
+                                        }
+                                        else {
+                                                vertexArray[v++] = vertices[0][face[j]];
+                                                vertexArray[v++] = vertices[1][face[j]];
+                                                vertexArray[v++] = vertices[2][face[j]];
+                                        }
+                                }
+                        }
+                        this.computeIndices = false;
+                }
+                else if (faceVertexCData.length === vertices[0].length) { //node plot
+                        vertexArray = new Float32Array(vertices[0].length * 3);
+                        for(var i = 0, v = 0, t = 0; i < vertices[0].length; i++) {
+                                if (isNaN(faceVertexCData[i])) {
+                                        this.nanIndices.add(i);
+                                        vertexArray[v++] = 0.0;
+                                        vertexArray[v++] = 0.0;
+                                        vertexArray[v++] = 0.0;
+                                }
+                                else {
+                                        vertexArray[v++] = vertices[0][i];
+                                        vertexArray[v++] = vertices[1][i];
+                                        vertexArray[v++] = vertices[2][i];
+                                }
+                        }
+                }
+        }
+        else if (Array.isArray(faceVertexCData[0])) { //JS specific: precomputed UV coord plot - faceVertexCData = [[0, 0.99, 0.4, ...],[0, 0.99, 0.4, ...]]
+                if (faceVertexCData[0].length === faces.length) { //element plot
+                        vertexArray = new Float32Array(faces.length * 3 * 3);
+                        for(var i = 0, v = 0, t = 0; i < faces.length; i++) {
+                                face = [faces[i][0] - 1, faces[i][1] - 1, faces[i][2] - 1];
+                                for(var j = 0; j < face.length; j++) {                                  
+                                        vertexArray[v++] = vertices[0][face[j]];
+                                        vertexArray[v++] = vertices[1][face[j]];
+                                        vertexArray[v++] = vertices[2][face[j]];
+                                }
+                        }
+                        this.computeIndices = false;
+                }
+                else if (faceVertexCData[0].length === vertices[0].length) { //node plot
+                        vertexArray = new Float32Array(vertices[0].length * 3);
+                        for(var i = 0, v = 0, t = 0; i < vertices[0].length; i++) {
+                                vertexArray[v++] = vertices[0][i];
+                                vertexArray[v++] = vertices[1][i];
+                                vertexArray[v++] = vertices[2][i];
+                        }
+                }
+        }
+        this.arrays.vertices = vertexArray;
+} //}}}
+Node.prototype.patchCoords = function(faceVertexCData, faces, vertices) { //{{{
+        //Patch subfunction for processing texture coords/UVs.
+        var coordArray;
+        var cramge;
+        var caxis = this.caxis;
+        var face;
+        
+        if (isEmptyOrUndefined(faceVertexCData)) { return; }
+        
+        //Use logarithmic scaling if it is valid
+        if (this.log !== false && this.log !== 'off') { 
+                caxis = [
+                        Math.log10(caxis[0]) / Math.log10(this.log), 
+                        Math.log10(caxis[1]) / Math.log10(this.log)
+                ];
+        }
+        
+        if (!Array.isArray(faceVertexCData[0])) { //indexed plot - faceVertexCData = [0, 2.32, 231.1, ...]
+                if (faceVertexCData.length === faces.length) { //element plot
+                        coordArray = new Float32Array(faces.length * 3 * 2);
+                        crange = caxis[1] - caxis[0];
+                        for(var i = 0, v = 0, t = 0; i < faces.length; i++) {
+                                face = [faces[i][0] - 1, faces[i][1] - 1, faces[i][2] - 1];
+                                for(var j = 0; j < face.length; j++) {
+                                        if (isNaN(faceVertexCData[i])) {
+                                                this.nanIndices.add(i);
+                                                coordArray[t++] = 0.0;
+                                                coordArray[t++] = 0.0;
+                                        }
+                                        else {
+                                                coordArray[t++] = 0.5;
+                                                coordArray[t++] = clamp((faceVertexCData[i] - caxis[0]) / crange, 0.0, 1.0);
+                                        }
+                                }
+                        }
+                        this.computeIndices = false;
+                }
+                else if (faceVertexCData.length === vertices[0].length) { //node plot
+                        coordArray = new Float32Array(vertices[0].length * 2);
+                        crange = caxis[1] - caxis[0];
+                        for(var i = 0, v = 0, t = 0; i < vertices[0].length; i++) {
+                                if (isNaN(faceVertexCData[i])) {
+                                        this.nanIndices.add(i);
+                                        coordArray[t++] = 0.0;
+                                        coordArray[t++] = 0.0;
+                                }
+                                else {
+                                        coordArray[t++] = 0.5;
+                                        coordArray[t++] = clamp((faceVertexCData[i] - caxis[0]) / crange, 0.0, 1.0);
+                                }
+                        }
+                }
+        }
+        else if (Array.isArray(faceVertexCData[0])) { //JS specific: precomputed UV coord plot - faceVertexCData = [[0, 0.99, 0.4, ...],[0, 0.99, 0.4, ...]]
+                if (faceVertexCData[0].length === faces.length) { //element plot
+                        coordArray = new Float32Array(faces.length * 3 * 2);
+                        for(var i = 0, v = 0, t = 0; i < faces.length; i++) {
+                                face = [faces[i][0] - 1, faces[i][1] - 1, faces[i][2] - 1];
+                                for(var j = 0; j < face.length; j++) {                                  
+                                        coordArray[t++] = faceVertexCData[0][i];
+                                        coordArray[t++] = faceVertexCData[1][i];
+                                }
+                        }
+                        this.computeIndices = false;
+                }
+                else if (faceVertexCData[0].length === vertices[0].length) { //node plot
+                        coordArray = new Float32Array(vertices[0].length * 2);
+                        for(var i = 0, v = 0, t = 0; i < vertices[0].length; i++) {
+                                coordArray[t++] = faceVertexCData[0][i];
+                                coordArray[t++] = faceVertexCData[1][i];
+                        }
+                }
+        }
+        this.arrays.coords = coordArray;
+} //}}}
+Node.prototype.patchIndices = function(faces, faceColor) { //{{{
+        //Patch subfunction for processing faces/elements/triangles/indices.
+        var indexArray;
+        var face;
+        
+        if (faceColor === 'none') { //Check for wireframe mesh rendering
+                if (this.drawMode === this.gl.TRIANGLES) { //NOTE: Stopgap to allow gl.LINE_STRIP nodes render normally. Only use case for faceColor === 'none' is for plot_mesh
+                        this.drawMode = this.gl.LINES;
+                }
+        }
+        
+        if (this.computeIndices === true && !isEmptyOrUndefined(faces)) {
+                if (!isEmptyOrUndefined(faces[0])) { //Check for 2D format and process if needed
+                        if (faceColor !== 'none') { //Check for triangle rendering
+                                indexArray = new Uint16Array(faces.length * 3);
+                                for(var i = 0, f = 0; i < faces.length; i++) {
+                                        face = [faces[i][0] - 1, faces[i][1] - 1, faces[i][2] - 1];
+                                        if (this.nanIndices.has(face[0]) || this.nanIndices.has(face[1]) || this.nanIndices.has(face[2])) continue; //Skip triangle if contains NaN value.
+                                        indexArray[f++] = faces[i][0] - 1;
+                                        indexArray[f++] = faces[i][1] - 1;
+                                        indexArray[f++] = faces[i][2] - 1;
+                                }
+                        }
+                        else { //Check for wireframe mesh rendering
+                                indexArray = new Uint16Array(faces.length * 6);
+                                for(var i = 0, f = 0; i < faces.length; i++) {
+                                        indexArray[f++] = faces[i][0] - 1;
+                                        indexArray[f++] = faces[i][1] - 1;
+                                        indexArray[f++] = faces[i][1] - 1;
+                                        indexArray[f++] = faces[i][2] - 1;
+                                        indexArray[f++] = faces[i][2] - 1;
+                                        indexArray[f++] = faces[i][0] - 1;
+                                }
+                        }
+                }
+                else { //Else, assume face indices have already been processed
+                        indexArray = faces;
+                }
+                this.arrays.triangles = indexArray;
+        }
+} //}}}
+Node.prototype.updateBuffer = function() { //{{{
+        //Updates the mesh buffers provided in place.
+        //NOTE: Only support coord buffers currently.
+        var args = Array.prototype.slice.call(arguments);
+        var options = new pairoptions(args.slice(0,args.length));
+
+        var coords = options.getfieldvalue('Coords', undefined);
+        var cacheIndex = options.getfieldvalue('CacheIndex', false);
+        
+        if (!isEmptyOrUndefined(coords)) {
+                this.patchCoords(coords, this.faces, this.vertices);
+                var buffer = this.mesh.getBuffer("coords");
+                buffer.data = this.arrays.coords;
+                buffer.upload(this.gl.DYNAMIC_DRAW);
+        }
+} //}}}
+Node.prototype.computeOctree = function() { //{{{
+        //Computes and caches octrees for a node.
+        var octree = this.canvas.octrees[this.name];
+        if (isEmptyOrUndefined(octree)) {
+                octree = new GL.Octree(this.mesh);
+        }
+        this.canvas.octrees[this.name] = octree;
+        this.octree = octree;
+} //}}}
+Node.prototype.geometryShader = function() { //{{{
+        //Emulates OpenGL geometry shaders by rendering each point as a mesh.
+        //Parameters:
+        //      Mesh - the geometry to duplicate for each point.
+        //      Vertices - the list of points to shade.
+        //      Indices - (optional) ordered list for non-ordered Vertices objects.
+        
+        var args = Array.prototype.slice.call(arguments);
+        var options = new pairoptions(args.slice(0,args.length));
+
+        var mesh = options.getfieldvalue('Mesh', undefined);
+        var vertices = options.getfieldvalue('Vertices', undefined);
+        var indices = options.getfieldvalue('Indices', undefined);
+        
+        //For handling key-value object arrays, like xcity
+        for (var i = 0; i < vertices.length; i++) {
+                if (!Array.isArray(vertices[i])) {
+                        var array = [];
+                        var coordinateObject = vertices[i];
+                        var j = 0;
+                        if (isEmptyOrUndefined(indices)) {
+                                for (var key in object) {
+                                        array[j++] = coordinateObject[key];
+                                }
+                        }
+                        else {
+                                for (var k = 0; k < indices.length; k++) {
+                                        array[j++] = coordinateObject[indices[k]];
+                                }
+                        }
+                        vertices[i] = array;
+                }
+        }
+        
+        var x = vertices[0];
+        var y = vertices[1];
+        var z = vertices[2];
+        var meshVertices = mesh.getBuffer('vertices').data;
+        var meshIndicies = mesh.getIndexBuffer('triangles').data;
+        var indicies = new Uint16Array(meshIndicies.length * x.length);
+        var size = meshVertices.length * x.length / 3;
+        newX = new Float32Array(size);
+        newY = new Float32Array(size);
+        newZ = new Float32Array(size);
+        
+        //For each vertex in vertices, instantiate mesh geomtry centered around that point.
+        for(var i = 0, v = 0, e = 0; i < x.length; i++){
+                var vector = [x[i], y[i], z[i]];
+                for (var j = 0; j < meshVertices.length;) {
+                        newX[v] = meshVertices[j++] + x[i];
+                        newY[v] = meshVertices[j++] + y[i];
+                        newZ[v++] = meshVertices[j++] + z[i];
+                }
+                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) { //{{{
+        //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];
+                }
+        }
+        else {
+                z = z.slice();
+                var zMin = ArrayMin(md.geometry.surface);
+                for(var i = 0; i < z.length; i++) {
+                        z[i] = (z[i] - zMin) * scale + zMin;
+                }
+        }
+        return [x, y, z];
+} //}}}
+Node.prototype.mergeVertices = function(x1, y1, z1, elements1, x2, y2, z2, elements2) { //{{{
+        //Merges and returns two sets of indexed xyz vertices.
+        elements2 = elements2.slice();
+        for (var i = 0, offset = x1.length; i < elements2.length; i++) {
+                elements2[i] = [elements2[i][0] + offset, elements2[i][1] + offset, elements2[i][2] + offset];
+        }
+        return {x:x1.concat(x2), y:y1.concat(y2), z:z1.concat(z2), elements:elements1.concat(elements2)};
+} //}}}
+//}}}

../trunk-jpl/src/m/plot/plot_manager.js

@@ -13 +13 @@
         var data = options.getfieldvalue('data');
         var canvas = initCanvas(options);
         var gl = canvas.gl;
-        //TODO: each plot_ should add their node to the canvas.node array
+
         //figure out if this is a special plot
         if (typeof data === 'string'){
                 
@@ -80 +80 @@
                                 plot_mesh(md,options,canvas);
                                 return;
                         case 'none':
-                                if (!(options.exist('overlay'))){
-                                        plot_none(md,options,nlines,ncols,i);
-                                }
+                                //if (!(options.exist('overlay'))){
+                                //      plot_none(md,options,nlines,ncols,i);
+                                //}
                                 return;
                         case 'penalties':
                                 plot_penalties(md,options,subplotwidth,i);
@@ -150 +150 @@
                                 plot_thermaltransient_results(md,options,subplotwidth,i);
                                 return;
                         case 'transient_movie':
-                                plot_transient_movie(md,options,subplotwidth,i);
+                                plot_transient_movie(md,options,canvas);
                                 return;
                         case 'transient_results':
                                 plot_transient_results(md,options,subplotwidth,i);
@@ -204 +204 @@
         //plot unit
         plot_unit(md,data2,datatype,options,canvas);
 
-        applyoptions(md,data2,datatype,options,canvas,gl,canvas.nodes[canvas.nodes.length-1]);
+        applyoptions(md,data2,options,canvas);
 } //}}}

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

@@ -6 +6 @@
         //
         //   See also: PLOTMODEL, PLOT_MANAGER
 
-        //{{{ declare variables: 
+        //if ('unit' in canvas.nodes) {
+        //      if (
+        //      canvas.nodes.unit.updateBuffer('Coords', data);
+        //      return;
+        //}
+        //else {
+                
+        //{{{ declare variables:
         //Process data and model
         var meshresults = processmesh(md, data, options);
         var x = meshresults[0]; 
@@ -15 +22 @@
         var elements = meshresults[3];
         var is2d = meshresults[4]; 
         var isplanet = meshresults[5];
+        if (md.mesh.classname() !== 'mesh3dsurface') z = md.geometry.surface;
         
-        var vertices = new Float32Array(x.length * 3);
-        var texcoords = new Float32Array(x.length * 2);
-        var indices = new Uint16Array(elements.length * 3);
-        var nanindices = {};
-        var xmin, xmax;
-        var ymin, ymax;
-        var zmin, zmax;
-        var datamin, datamax, datadelta;
-        var matrixscale, vertexscale;
-        //Compue scaling through matrices for 2d meshes and vertices for 3d meshes
-        if (!md.geometry.surface) {
-                md.geometry.surface=NewArrayFill(md.mesh.x.length, 0);
+        //Compute coordinates and data range:
+        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)]);
+        
+        //Handle heightscale
+        var vertices, scale;
+        if (md.mesh.classname() !== 'mesh3dsurface') {
+                vertices = [x, y, z];
+                scale = [1, 1, options.getfieldvalue('heightscale', 1)];
         }
-        if (md.mesh.classname() == 'mesh3dsurface') {
-                matrixscale = 1;
-                vertexscale = options.getfieldvalue('heightscale', 1);
-        }
         else {
-                if (md.geometry.surface) {
-                        z=md.geometry.surface;
-                }       
-                matrixscale = options.getfieldvalue('heightscale', 1);
-                vertexscale = 0;
+                vertices = Node.prototype.scaleVertices(md, x, y, z, options.getfieldvalue('heightscale', 1));
+                scale = [1, 1, 1];
         }
-        //}}}
-
-        //Compute coordinates and data range:
-        var modelxlim = [ArrayMin(x), ArrayMax(x)];
-        var modelylim = [ArrayMin(y), ArrayMax(y)];
-        var modelzlim = [ArrayMin(z), ArrayMax(z)];
-        var xlim = options.getfieldvalue('xlim', modelxlim);
-        var ylim = options.getfieldvalue('ylim', modelylim);
-        var zlim = options.getfieldvalue('zlim', modelzlim);
-        xmin = xlim[0];
-        xmax = xlim[1];
-        ymin = ylim[0];
-        ymax = ylim[1];
-        zmin = zlim[0];
-        zmax = zlim[1];
-        var caxis;
-
+        
         //Compute gl variables:
-        var gl = canvas.gl;
-        var node = Node(gl);
-        canvas.nodes[canvas.nodes.length] = node;
+        var edgecolor = options.getfieldvalue('edgecolor', 'black');
+        var maskzeros = options.getfieldvalue('maskzeros', {});
+        var node = new Node(
+                'canvas', canvas,
+                'options', options,
+                'name', 'unit',
+                'shaderName', 'Textured',
+                '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],
+                'diffuseColor', edgecolor,
+                'enabled', options.getfieldvalue('nodata','off') == 'off',
+                'log', options.getfieldvalue('log',false),
+                'maskEnabled', options.getfieldvalue('innermask','off') == 'on',
+                'maskHeight', options.getfieldvalue('innermaskheight', 150.0) / options.getfieldvalue('heightscale', 1),
+                'maskColor', options.getfieldvalue('innermaskcolor',[0.0, 0.0, 1.0, 1.0]),
+                'maskZerosColor', defaultFor(maskzeros.color,[1.0, 1.0, 1.0, 1.0]),
+                'maskZerosEnabled', defaultFor(maskzeros.enabled,false),
+                'maskZerosTolerance', defaultFor(maskzeros.tolerance,1e-3),
+                'maskZerosZeroValue', defaultFor(maskzeros.zeroValue,0.5),
+                'rotation', [-90, 0, 0],
+                'scale', scale
+        );
+        //}
         canvas.unitNode = node;
         canvas.unitData = data;
-        node.name = "unit";
-        node.shaderName = "Textured";
-        node.shader = gl.shaders[node.shaderName];
-        node.scale = [1, 1, matrixscale];
-        node.rotation = [-90, 0, 0];
-        node.translation = [0, 0, 0];
-        node.center = [(xmin + xmax) / 2, (ymin + ymax) / 2, (zmin + zmax) / 2];
-        node.alpha = options.getfieldvalue('alpha', 1.0);
-        node.drawOrder = 1;
-        node.maskEnabled = options.getfieldvalue('innermask','off') == 'on';
-        node.maskHeight = options.getfieldvalue('innermaskheight', 150.0);
-        node.maskColor = options.getfieldvalue('innermaskcolor',[0.0, 0.0, 1.0, 1.0]);
-        node.enabled = options.getfieldvalue('nodata','off') == 'off';
-        updateModelMatrix(node);
-
+        //}}}
         switch(datatype){
                 //{{{ element plot
                 case 1:
+                        //WARNING: NaN are not properly found (NaN != NaN = true)
                         pos=ArrayFindNot(data, NaN); //needed for element on water
                         if (elements[0].length==6){ //prisms
                         }
                         else if (elements[0].length==4){ //tetras
                         }
-                        else{ //2D triangular elements
+                        else{ //triangular elements
+                                node.patch('Faces', elements, 'Vertices', vertices, 'FaceVertexCData', data, 'FaceColor', 'flat', 'EdgeColor', edgecolor);
                         }
                         break;
                 //}}}
@@ -97 +90 @@
                         else if (elements[0].length==4){ //tetras
                         }
                         else{ //triangular elements     
-                                caxis = options.getfieldvalue('caxis',[ArrayMin(data), ArrayMax(data)]);
-                                if (options.getfieldvalue('log','off')!='off') caxis = [Math.log10(caxis[0])/Math.log10(options.getfieldvalue('log', 10)), Math.log10(caxis[1])/Math.log10(options.getfieldvalue('log', 10))];
-                                datamin = caxis[0];
-                                datamax = caxis[1];
-                                datadelta = datamax - datamin;
-
-                                var xyz = vec3.create();
-                                var direction = vec3.create();
-                                var vertex = vec3.create();
-                                var magnitude;
-
-                                for(var i = 0, vindex = 0, tindex = 0; i < x.length; i++){
-                                        //Check for NaN values and remove from indices array as necessary, but preserve vertex array spacing
-                                        if (isNaN(x[i]) || isNaN(y[i]) || isNaN(z[i]) || isNaN(data[i])) {
-                                                nanindices[i] = i;
-                                                vertices[vindex++] = vertex[0];
-                                                vertices[vindex++] = vertex[1];
-                                                vertices[vindex++] = vertex[2];
-                                                
-                                                texcoords[tindex++] = 0.5;
-                                                texcoords[tindex++] = 0.0;
-                                                continue;
-                                        }
-
-                                        //Scale vertices
-                                        xyz = vec3.fromValues(x[i], y[i], z[i]);
-                                        magnitude = vec3.length(xyz) + md.geometry.surface[i] * vertexscale;
-                                        vec3.normalize(direction, xyz);
-                                        vec3.scale(vertex, direction, magnitude);
-                                        vertices[vindex++] = vertex[0];
-                                        vertices[vindex++] = vertex[1];
-                                        vertices[vindex++] = vertex[2];
-
-                                        texcoords[tindex++] = 0.5;
-                                        texcoords[tindex++] = clamp((data[i] - datamin) / datadelta, 0.0, 1.0);
-                                }
-
-                                //linearize the elements array: 
-                                var element;
-                                for(var i = 0, iindex = 0; i < elements.length; i++){
-                                        element = [elements[i][0] - 1, elements[i][1] - 1, elements[i][2] - 1];
-                                        if (element[0] in nanindices || element[1] in nanindices || element[2] in nanindices) continue;
-                                        indices[iindex++] = element[0];
-                                        indices[iindex++] = element[1];
-                                        indices[iindex++] = element[2];
-                                }
+                                node.patch('Faces', elements, 'Vertices', vertices, 'FaceVertexCData', data, 'FaceColor', 'interp', 'EdgeColor', edgecolor);
                         }
-                        node.mesh = GL.Mesh.load({vertices: vertices, coords: texcoords, triangles: indices}, null, null, gl);
-                        node.mesh.octree = new GL.Octree(node.mesh);
                         break;
                 //}}}
                 //{{{ quiver plot 
@@ -158 +104 @@
                         }
                         break;
                 //}}}
-                //{{{ node transient plot
-                case 5:
-                        if (elements[0].length==6){ //prisms
-                        }
-                        else if (elements[0].length==4){//tetras
-                        }
-                        else{ //triangular elements
-                                var xyz = vec3.create();
-                                var direction = vec3.create();
-                                var vertex = vec3.create();
-                                var magnitude;
-                                var timestamps = data[data.length-1];
-                                for(var i = 0, vindex = 0, tindex = 0; i < x.length; i++){
-                                        //Check for NaN values and remove from indices array as necessary, but preserve vertex array spacing
-                                        if (isNaN(x[i]) || isNaN(y[i]) || isNaN(z[i]) || isNaN(data[i][0])) {
-                                                nanindices[i] = i;
-                                        }
-                                        else {
-                                                //Scale vertices
-                                                xyz = vec3.fromValues(x[i], y[i], z[i]);
-                                                magnitude = vec3.length(xyz) + md.geometry.surface[i] * vertexscale;
-                                                vec3.normalize(direction, xyz);
-                                                vec3.scale(vertex, direction, magnitude);
-                                        }
-                                        vertices[vindex++] = vertex[0];
-                                        vertices[vindex++] = vertex[1];
-                                        vertices[vindex++] = vertex[2];
-                                }       
-                                //Transpose data to obtain column addressable data matrix
-                                data = data[0].map(function(col, i) { 
-                                        return data.map(function(row) { 
-                                                return row[i]
-                                        })
-                                });
-                                //Prevent evaluation of datasubarray min/max if caxis exists
-                                if (options.exist('caxis')) caxis = options.getfieldvalue('caxis');
-                                else caxis = [ArrayMin(data[0]), ArrayMax(data[0].slice(0,-1))];
-                                if (options.getfieldvalue('log','off')!='off') caxis = [Math.log10(caxis[0])/Math.log10(options.getfieldvalue('log', 10)), Math.log10(caxis[1])/Math.log10(options.getfieldvalue('log', 10))];
-                                //Prepare texcoords to hold array of data values
-                                texcoords = [];
-                                for(var i = 0; i < data.length; i++){                                   
-                                        datamin = caxis[0];
-                                        datamax = caxis[1];
-                                        datadelta = datamax - datamin;
-                                        //Precalculate arrays for each datasubarray, trimming off timestamp value by using x.length instead of data[i].length
-                                        texcoords[i] = new Float32Array(x.length * 2);
-                                        for(var j = 0, index = 0; j < x.length; j++){
-                                                texcoords[i][index++] = 0.5;
-                                                texcoords[i][index++] = clamp((data[i][j] - datamin) / datadelta, 0.0, 1.0);
-                                        }
-                                }
-                                
-                                //linearize the elements array:
-                                var element;
-                                for(var i = 0, iindex = 0; i < elements.length; i++){
-                                        element = [elements[i][0] - 1, elements[i][1] - 1, elements[i][2] - 1];
-                                        if (element[0] in nanindices || element[1] in nanindices || element[2] in nanindices) continue;
-                                        indices[iindex++] = element[0];
-                                        indices[iindex++] = element[1];
-                                        indices[iindex++] = element[2];
-                                }
-                        
-                                //Initialize movie loop
-                                node.movieLoop = canvas.animation.loop;
-                                node.movieInterval = 1000 / canvas.animation.fps;
-                                node.movieTimestamps = timestamps;
-                                node.movieLength = timestamps.length;
-                                node.movieFrame = 0;
-                                canvas.dataMarkers.values = [];
-                                var quiverVelFrames = {};
-                                for(var i=0; i < md.results.length; i++){
-                                        quiverVelFrames[Math.floor(md.results[i].time)] = md.results[i];
-                                }
-
-                                if (canvas.animation.handler !== 0) {
-                                        console.log("clearing...");
-                                        clearInterval(canvas.animation.handler)
-                                }
-                                //TODO: Move this into webgl.js
-                                canvas.animation.handler = setInterval(function () {
-                                        node.movieFrame = canvas.animation.frame;
-                                        if (canvas.animation.play && canvas.animation.increment) {
-                                                if (node.movieFrame == node.movieLength - 1) {
-                                                        if (node.movieLoop) {
-                                                                node.movieFrame = 0;
-                                                        }
-                                                        else { 
-                                                                toggleMoviePlay(canvas);
-                                                        }
-                                                }
-                                                else {
-                                                        node.movieFrame = node.movieFrame + 1;
-                                                }
-                                                if (canvas.animation.lastFrame != canvas.animation.frame) {
-                                                        updateMarker(canvas, false);
-                                                }
-                                        }
-                                        
-                                        if (canvas.progressBar) {
-                                                canvas.progressBar.val(node.movieFrame);
-                                                canvas.progressBar.slider('refresh');
-                                        }
-                                        if (canvas.timeLabel) { canvas.timeLabel.html(node.movieTimestamps[node.movieFrame].toFixed(0) + " " + options.getfieldvalue("movietimeunit","yr")); }
-                                        
-                                        var buffer = node.mesh.getBuffer("coords");
-                                        buffer.data = texcoords[node.movieFrame];
-                                        buffer.upload(canvas.gl.DYNAMIC_DRAW);
-                                        node.mesh.octree = new GL.Octree(node.mesh);
-                                        node.texcoords = texcoords;
-                                        if(options.getfieldvalue('quiver') == 'on'){
-                                                plot_quiver(md, options, canvas, {vel: quiverVelFrames[node.movieFrame].Vel, vx: quiverVelFrames[node.movieFrame].Vx, vy: quiverVelFrames[node.movieFrame].Vy});
-                                        }
-                                        canvas.animation.lastFrame = canvas.animation.frame;
-                                        canvas.animation.frame = node.movieFrame;                                       
-                                }, node.movieInterval);
-                                
-                                if (canvas.progressBar) {
-                                        canvas.animation.frame = 0;
-                                        canvas.progressBar.val(0);
-                                        canvas.progressBar.attr('max', node.movieLength-1);
-                                        canvas.progressBar.slider('refresh');
-                                }
-                                
-                        }
-                        node.mesh = GL.Mesh.load({vertices: vertices, coords: texcoords[0], triangles: indices}, null, null, gl);
-                        node.mesh.octree = new GL.Octree(node.mesh);
-                        break;
-                //}}}
                 default:
-                        throw Error(sprintf("%s%i%s\n",'case ', datatype,' not supported'));
+                        throw Error(sprintf('%s%i%s\n','case ', datatype,' not supported'));
         }
 } //}}}

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

@@ -6 +6 @@
         //
         //   See also: PLOTMODEL, PLOT_MANAGER
 
+        if ('overlay' in  canvas.nodes && options.getfieldvalue('cachenodes','on') === 'on') return;
+        
         //{{{ declare variables:
-        var vertices = [];
-        var indices = [];
-        var texcoords = [];
-        var nanindices = {};
-        var xmin, xmax;
-        var ymin, ymax;
-        var zmin, zmax;
-        var matrixscale, vertexscale;
-
         //Process data and model
-        var meshresults = processmesh(md, data, options);
+        var meshresults = processmesh(md, [], options);
         var x = meshresults[0]; 
         var y = meshresults[1]; 
         var z = meshresults[2]; 
@@ -24 +17 @@
         var elements = meshresults[3]; 
         var is2d = meshresults[4]; 
         var isplanet = meshresults[5];
-
-        //Compue scaling through matrices for 2d meshes and vertices for 3d meshes
-        if (!md.geometry.surface) {
-                md.geometry.surface=NewArrayFill(md.mesh.x.length, 0);
+        if (md.mesh.classname() !== 'mesh3dsurface') z = md.geometry.surface;
+        
+        //Compute coordinates and data range:
+        var xlim = options.getfieldvalue('xlim', [ArrayMin(x), ArrayMax(x)]);
+        var ylim = options.getfieldvalue('ylim', [ArrayMin(y), ArrayMax(y)]);
+        var zlim = options.getfieldvalue('zlim', [ArrayMin(md.geometry.surface), ArrayMax(md.geometry.surface)]);
+        
+        //Handle radaroverlay
+        if (md.radaroverlay.outerx) {
+                var result = Node.prototype.mergeVertices(x, y, z, elements, md.radaroverlay.outerx, md.radaroverlay.outery, md.radaroverlay.outerheight, md.radaroverlay.outerindex);
+                x = result.x;
+                y = result.y;
+                z = result.z;
+                elements = result.elements;
         }
-        if (md.mesh.classname() == 'mesh3dsurface') {
-                matrixscale = 1;
-                vertexscale = options.getfieldvalue('heightscale', 1);
+        
+        //Handle heightscale
+        var vertices, scale;
+        if (md.mesh.classname() !== 'mesh3dsurface') {
+                vertices = [x, y, z];
+                scale = [1, 1, options.getfieldvalue('heightscale', 1)];
         }
         else {
-                if (md.geometry.surface) {
-                        z=md.geometry.surface;
-                }       
-                matrixscale = options.getfieldvalue('heightscale', 1);
-                vertexscale = 0;
+                vertices = Node.prototype.scaleVertices(md, x, y, z, options.getfieldvalue('heightscale', 1));
+                scale = [1, 1, 1];
         }
-        //}}}
         
-        //Compute coordinates and data range:
-        var modelxlim = [ArrayMin(x), ArrayMax(x)];
-        var modelylim = [ArrayMin(y), ArrayMax(y)];
-        var modelzlim = [ArrayMin(z), ArrayMax(z)];
-        var xlim = options.getfieldvalue('xlim', modelxlim);
-        var ylim = options.getfieldvalue('ylim', modelylim);
-        var zlim = options.getfieldvalue('zlim', modelzlim);
-        xmin = xlim[0];
-        xmax = xlim[1];
-        ymin = ylim[0];
-        ymax = ylim[1];
-        zmin = zlim[0];
-        zmax = zlim[1];
-                
         //Compute gl variables:
-        var gl = canvas.gl;
-        var node = Node(gl);
-        canvas.nodes[canvas.nodes.length] = node;
-        node.name = "overlay";
-        node.shaderName = (options.getfieldvalue('render',[]).indexOf('ground')!=-1) ? "GroundFromSpace" : "Textured";
-        node.shader = gl.shaders[node.shaderName];
-        node.scale = [1, 1, matrixscale];
-        node.rotation = [-90, 0, 0];
-        node.translation = [0, 0, 0];
-        node.center = [(xmin + xmax) / 2, (ymin + ymax) / 2, (zmin + zmax) / 2];
-        node.texture = initTexture(gl, options.getfieldvalue('overlay_image'));
-        node.alpha = options.getfieldvalue('outeralpha', 1.0);
-        node.drawOrder = 1;
-        node.maskEnabled = options.getfieldvalue('outermask','off') == 'on';
-        node.maskHeight = options.getfieldvalue('outermaskheight', 150.0);
-        node.maskColor = options.getfieldvalue('outermaskcolor',[0.0, 0.0, 1.0, 1.0]);
-        updateModelMatrix(node);
+        var edgecolor = options.getfieldvalue('edgecolor', 'black');
+        var texture = initTexture(gl, options.getfieldvalue('overlay_image'));
+        var node = new Node(
+                'canvas', canvas,
+                'options', options,
+                'name', 'overlay',
+                'shaderName', 'ground' in options.getfieldvalue('render', {}) ? 'GroundFromSpace' : 'Textured',
+                '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',
+                'maskEnabled', options.getfieldvalue('outermask','off') == 'on',
+                'maskHeight', options.getfieldvalue('outermaskheight', 150.0),
+                'maskColor', options.getfieldvalue('outermaskcolor',[0.0, 0.0, 1.0, 1.0]),
+                'texture', texture,
+                'rotation', [-90, 0, 0],
+                'scale', scale
+        );
+        //}}}
         
-        //Handle outer radaroverlay
-        if (md.radaroverlay.outerx) {
-                var newelements = [];
-                for (var i = 0; i < md.radaroverlay.outerindex.length; i++) {
-                        newelements[newelements.length] = [md.radaroverlay.outerindex[i][0] + x.length, md.radaroverlay.outerindex[i][1] + y.length, md.radaroverlay.outerindex[i][2] + z.length];
-                }
-                x = [].concat(x, md.radaroverlay.outerx);
-                y = [].concat(y, md.radaroverlay.outery);
-                z = [].concat(z, md.radaroverlay.outerheight);
-                elements = [].concat(elements, newelements);
-                
-                //Reclaculate bounds based on otuer radaroverlay
-                modelxlim = [ArrayMin(x), ArrayMax(x)];
-                modelylim = [ArrayMin(y), ArrayMax(y)];
-                modelzlim = [ArrayMin(z), ArrayMax(z)];
-                xmin = xlim[0];
-                xmax = xlim[1];
-                ymin = ylim[0];
-                ymax = ylim[1];
-                zmin = zlim[0];
-                zmax = zlim[1];
-                
-                node.center = [node.center[0], node.center[1], -zmax];
-        }
+        var xRange = xlim[1] - xlim[0];
+        var yRange = ylim[1] - ylim[0];
+        var coordArray = [new Array(x.length), new Array(x.length)];
+        //generate mesh:
         
-        var xrange = modelxlim[1] - modelxlim[0];
-        var yrange = modelylim[1] - modelylim[0];
-        
-        var xyz = vec3.create();
-        var direction = vec3.create();
-        var vertex = vec3.create();
-        var magnitude;
-
-        //generate mesh:
-        for(var i = 0; i < x.length; i++){
-                //Check for NaN values and remove from indices array as necessary, but preserve vertex array spacing
-                if (isNaN(x[i]) || isNaN(y[i]) || isNaN(z[i])) {
-                        nanindices[i] = i;
-                        vertices[vertices.length] = vertex[0];
-                        vertices[vertices.length] = vertex[1];
-                        vertices[vertices.length] = vertex[2];
-                        
-                        texcoords[texcoords.length] = 0.0;
-                        texcoords[texcoords.length] = 0.0;
-                        continue;
-                }
-
-                if (md.mesh.classname() == 'mesh3dsurface') {
-                        //Scale vertices
-                        xyz = vec3.fromValues(x[i], y[i], z[i]);
-                        magnitude = vec3.length(xyz) + md.geometry.surface[i] * vertexscale;
-                        vec3.normalize(direction, xyz);
-                        vec3.scale(vertex, direction, magnitude);
-                        vertices[vertices.length] = vertex[0];
-                        vertices[vertices.length] = vertex[1];
-                        vertices[vertices.length] = vertex[2];
-                        
-                        texcoords[texcoords.length] = Math.atan2(vertex[1], vertex[0]) / (2 * Math.PI) + 0.5;
-                        texcoords[texcoords.length] = Math.asin(vertex[2] / magnitude) / Math.PI + 0.5;
-                }
-                else {
-                        //Scale vertices
-                        xyz = vec3.fromValues(x[i], y[i], z[i]);
+        if (md.mesh.classname() == 'mesh3dsurface') {
+                var xyz, magnitude;
+                for(var i = 0; i < x.length; i++){
+                        xyz = vec3.fromValues(vertices[0][i], vertices[1][i], vertices[2][i]);
                         magnitude = vec3.length(xyz);
-                        vec3.normalize(direction, xyz);
-                        vec3.scale(vertex, direction, magnitude);
-                        vertices[vertices.length] = vertex[0];
-                        vertices[vertices.length] = vertex[1];
-                        vertices[vertices.length] = vertex[2];
-                        
-                        texcoords[texcoords.length] = (x[i] - modelxlim[0]) / xrange;
-                        texcoords[texcoords.length] = (y[i] - modelylim[0]) / yrange;
+                
+                        coordArray[0][i] = Math.atan2(xyz[1], xyz[0]) / (2 * Math.PI) + 0.5;
+                        coordArray[1][i] = Math.asin(xyz[2] / magnitude) / Math.PI + 0.5;
                 }
         }
-        //linearize the elements array:
-        var element;
-        for(var i = 0; i < elements.length; i++){
-                element = [elements[i][0] - 1, elements[i][1] - 1, elements[i][2] - 1];
-                if (element[0] in nanindices || element[1] in nanindices || element[2] in nanindices) continue;
-                indices[indices.length] = element[0];
-                indices[indices.length] = element[1];
-                indices[indices.length] = element[2];
+        else {
+                for(var i = 0; i < x.length; i++){
+                        coordArray[0][i] = (vertices[0][i] - xlim[0]) / xRange;
+                        coordArray[1][i] = (vertices[1][i] - ylim[0]) / yRange;
+                }
         }
-        node.mesh = GL.Mesh.load({vertices: vertices, coords: texcoords, triangles: indices}, null, null, gl);
+        node.patch('Faces', elements, 'Vertices', vertices, 'FaceVertexCData', coordArray, 'FaceColor', 'interp', 'EdgeColor', edgecolor);
 } //}}}

../trunk-jpl/src/m/plot/plot_transient_movie.js

@@ +1 @@
+function plot_transient_movie(md, options, canvas) { //{{{
+        //PLOT_TRANSIENT_MOVIE - plot a transient result as a movie
+        //
+        //   Usage:
+        //      plot_transient_movie(md, options, canvas);
+        //
+        //   See also: PLOTMODEL, PLOT_MANAGER
+        
+        //loop over the time steps
+        var data = options.getfieldvalue('transient_field_data');
+        var datatype;
+        var steps = new Array(data.length); 
+        for (i = 0; i < steps.length; i++) {
+                steps[i] = i;
+        }
+        
+        //calculate caxis
+        if (!options.exist('caxis')) {
+                var range = [Infinity, -Infinity];
+                var     dataresults;
+                for (var i in steps) {
+                        dataresults = processdata(md, data[i], options);
+                        range[1] = Math.min(range[0], ArrayMin(dataresults[0]));
+                        range[2] = Math.max(range[1], ArrayMax(dataresults[0]));
+                }
+                datatype = dataresults[1];
+                options.addfielddefault('caxis', range);
+                
+        }
+        
+        //Create unit node if it does not already exist
+        if (!('unit' in canvas.nodes)) {
+                var     dataresults = processdata(md, data[i],options);
+                var     data2 = dataresults[0]; 
+                var     datatype = dataresults[1];
+        
+                //plot unit
+                plot_unit(md,data2,datatype,options,canvas);
+        }
+        
+        //display movie
+        var node = canvas.nodes.unit;
+        node.options = options;
+        node.alpha = options.getfieldvalue('alpha', 1.0);
+        node.caxis = options.getfieldvalue('caxis');
+        node.enabled = options.getfieldvalue('nodata', 'off') == 'off';
+        node.log = options.getfieldvalue('log', false);
+        canvas.unitMovieData = data;
+        canvas.animation.frame = 0;
+        canvas.animation.handler = setInterval(function () {
+                //Update current animation frame
+                var frame = canvas.animation.frame;
+                if (canvas.animation.play) {
+                        if (canvas.animation.increment) {
+                                if (frame > steps.length - 1) {
+                                        if (node.movieLoop) {
+                                                frame = 0;
+                                        }
+                                        else {
+                                                toggleMoviePlay(canvas);
+                                        }
+                                }
+                                else {
+                                        frame = (frame + 1) % steps.length;
+                                }
+                        }
+                }
+                
+                //If frame has changed, update unit node and data marker display.
+                if (frame !== canvas.animation.lastFrame) {
+                        node.updateBuffer('Coords', data[frame]);
+                        canvas.unitData = data[frame];
+                        if (canvas.dataMarkers.enabled) {
+                                updateMarker(canvas, false);
+                        }
+                        if (canvas.progressBar) {
+                                canvas.progressBar.val(frame).slider('refresh');
+                        }
+                        if (canvas.timeLabel) {
+                                canvas.timeLabel.html(steps[frame].toFixed(0) + " " + options.getfieldvalue("movietimeunit","yr"));
+                        }
+                        if (!isEmptyOrUndefined(canvas.nodes.quiver)) {
+                                plot_quiver(md,options,canvas,false);
+                        }
+                }
+                
+                //Save new frame info.
+                canvas.animation.lastFrame = canvas.animation.frame;
+                canvas.animation.frame = frame;
+        }, canvas.animation.interval);
+        
+        //Update progress bar with new frame info.
+        if (canvas.progressBar) {
+                canvas.progressBar.val(canvas.animation.frame);
+                canvas.progressBar.attr('max', steps.length - 1);
+                canvas.progressBar.slider('refresh');
+        }
+                                
+        applyoptions(md, [], options, canvas);
+} //}}}

../trunk-jpl/src/m/plot/plotdoc.js

@@ -4 +4 @@
         //   Usage:
         //      plotdoc()
         
-        //TODO: Standardize image to overlay_image, heightscale to scaling, colorbarfontsize/color, clarify innermask/outermask, edgecolor implementation, check colormap, 
+        //TODO: rename innermask/outermask/maskzero and combine
 
-        console.log(' WARNING: starred methods (*) are experimental and not guarenteed to be stable');
         console.log('   Plot usage: plotmodel(model,varargin)');
         console.log('   Options: ');
         console.log('       "canvasid": canvas id');
         console.log('       "data" : what we want to plot');
-        console.log('                Available values for "data" are: ');
-        console.log('                  - any field of the model structure. ex: plot(md,"data","vel"), or plot(md,"data",md.initialization.vel)');
-        console.log('                  - "mesh": draw mesh using trisurf');
-        console.log('                  - "quiver": quiver plot');
-        console.log('       "2d": renders orthographic camera with view set to [0, 90] (default "off", ex: "on", "off")');
+        console.log('           Available values for "data" are: ');
+        console.log('                   - any field of the model structure. ex: plot(md,"data","vel"), or plot(md,"data",md.initialization.vel)');
+        console.log('                   - "mesh": draw mesh using trisurf');
+        console.log('                   - "quiver": quiver plot');
         console.log('       "backgroundcolor": plot background color. (default "lightcyan", ex: "green","blue")');
         console.log('       "brush": specify brush options (default {"strength":0.075,"falloff":0.5})');
+        console.log('           "enabled": toggle brush (default false, ex: true)');
+        console.log('           "strength": value that brush will change data points by (ex: 0.075)');
+        console.log('           "falloff": multiplier that brush will decrease strength by for each successive point away from brush center (ex: 0.5)');
+        console.log('       "clouds": specify brush options (default {"strength":0.075,"falloff":0.5})');
+        console.log('           "enabled": toggle clouds (default false, ex: true)');
+        console.log('           "height": height to spawn clouds at (ex: 7500)');
+        console.log('           "quantity": quantity of clouds to spawn (ex: 10)');
         console.log('       "caxis": modify  colorbar range. (array of type [a, b] where b>=a)');
         console.log('       "colorbar": add colorbar (default "off", ex: "on", "off")');
         console.log('       "colorbarid": colorbar canvas id (string)');
@@ -31 +36 @@
         console.log('       "colorbarheight": multiplier (default 1) to the default height colorbar');
         console.log('       "colormap": same as standard matlab option (default "jet", ex: "hsv","cool","spring","gray","Ala","Rignot",...)');
         console.log('       "controlsensitivity": sensitivty of view/zoom changes as a percentage of default (default 1, ex: 0.5, 2.75)');
-        console.log('       "datamarkers": toggle data marker displays (default "on", ex: "on", "off")');
-        console.log('       "datamarkers_image": toggle data marker displays (default "on", ex: "on", "off")');
-        console.log('       "datamarkerssize": specifiy the width and height of the data markers (default [32,32], ex: [24,32], [105,10])');
-        console.log('       "datamarkersoptions": specifiy options for data markers (default {"enabled":"on","image":canvas.rootPath+"textures/data_marker.svg","size":[32,32],"format":["X: %.2e<br>Y: %.2e<br>Z: %.2e]<br>Value: %0.1f","x","y","z","value"]}');
+        console.log('       "datamarkers": object cotaining data marker parameters. See webgl.js for defaults. (ex: {"enabled":true,"format":["<div id="sim-plot"></div>"],"labels":["thickness","velocity","value"],"animated":true})');
+        console.log('           "enabled": toggle data marker displays (default true, ex: false)');
+        console.log('           "image": image used for marking the clicked point (ex: "/textures/data_marker.svg")');
+        console.log('           "labels": when displaying a sim-plot graph, display these model fields. (ex: ["thickness","velocity","value"])');
+        console.log('           "font": font to be used for display (ex: "24px "Comic Sans MS", cursive")');
+        console.log('           "format": an array compatible with sprintf that will be displayed as html (ex: ["X: %.2e<br>Y: %.2e<br>Z: %.2e]<br>Value: %0.1f","x","y","z","value"])');
+        console.log('                   "size": specifiy the width and height of the data markers (default [32,32], ex: [24,32], [105,10])');
         console.log('       "displayview": print view value to console (default "off", ex: "on", "off")');
         console.log('       "displayzoom": print zoom value to console (default "off", ex: "on", "off")');
         console.log('       "edgecolor": same as standard matlab option EdgeColor (default "black", ex: color name: "blue" or RGB array: [0.5, 0.2, 0.8])');
         console.log('       "heightscale": scaling factor to accentuate height. (default 1, ex: 0.5, 100)');
-        console.log('       "linewidth*": line width for mesh, quiver, and contour plots, currently limited by WebGL to 1. (default 1, ex: 2, 5)');
+        console.log('       "linewidth": line width for mesh, quiver, and contour plots, currently limited by WebGL to 1. (default 1, ex: 2, 5)');
         console.log('       "log": value of log (default 10, ex: 2, Math.E)');
         console.log('       "mask": list of flags of size numberofnodes or numberofelements. Only "true" values are plotted ');
-        console.log('       "movieoptions": specify movie options (default {"fps":4,"loop":true})');
+        console.log('       "movies": object cotaining transient plot animation options (ex: {"fps":4,"loop":true})');
+        console.log('       "maskzeros": object cotaining transient plot animation options (ex: "enabled":true,"color":[1.0, 1.0, 1.0, 1.0],"tolerance":1e-3,"zeroValue":0.5})');
+        console.log('           "enabled": toggle maskzeros (default false, ex: true)');
+        console.log('           "color": RGBA color value array with ranges 0.0 to 1.0 (ex: [1.0, 1.0, 1.0, 1.0])');
+        console.log('           "tolerance": values within this tolerance of the zeroValue will be masked. (default: 1e-3, ex: 2.5e-2)');
+        console.log('           "zeroValue": the percentage value with range 0.0, to 1.0 of the caxis value around which the data will be masked with the color. (default: 0.5, ex: 0, 1.0, 0.75)');
         console.log('       "innermask*": Special mask that colors all parts of a data mesh below a height a certain color. provide innermaskheight and innermaskcolor options also (default "off", ex: "on", "off")');
         console.log('       "outermask*": Special mask that colors all parts of a overlay mesh below a height a certain color. provide outermaskheight and outermaskcolor options also (default "off", ex: "on", "off")');
         console.log('       "overlay": overlay a radar amplitude image behind (default "off", ex: "on", "off")');
@@ -50 +63 @@
         console.log('       "quiver": add quiver plot overlay for velocities. (default "off", ex: "on", "off")');
         console.log('       "scaling": scaling factor used by quiver plots. Default is 0.4');
         console.log('       "alpha": transparency coefficient 0.0 to 1.0, the lower, the more transparent. (default 1.0, ex: 0.5, 0.25)');
-        console.log('       "azlim": azimuth view limits (ex: [0, 180])');
-        console.log('       "ellim": elevation view limits (ex: [-90, 90])');
-        console.log('       "origin": initial camera offset from model center (default [0,0,0.0], ex: [-2, 1.5, 0.01])');
-        console.log('       "render": toggle sky, ground, and space rendering. (default [], ex: ["sky", "space"], ["ground"])');
-        console.log('       "viewPanning": enable view origin panning with two-finger touch or shift+mouse drag. (default "off", ex: "on", "off")');
-        console.log('       "view": initial azimuth and elevation angles for camera (default [0,90], ex: [90, 180]');
+        console.log('       "render": a object containing a list of default object to render. (default {}, ex: {"sky", "space"})');
+        console.log('           "sky": render the atmosphere. (ex: {"enabled":true})');
+        console.log('                   "enabled": toggle sky (default false, ex: true)');
+        console.log('           "space": render space. (ex: {"enabled":true})');
+        console.log('                   "enabled": toggle space (default false, ex: true)');
+        console.log('           "coastlines": render coastlines. (ex: {"enabled":true})');
+        console.log('                   "enabled": toggle coastlines (default false, ex: true)');
+        console.log('                   "scale": scale coastlines factor (default 1.0, ex: 1.004)');
+        console.log('                   "x": x coordinate array. (ex: [0.0, 10.0, -25.0,...])');
+        console.log('                   "y": y coordinate array. (ex: [0.0, 10.0, -25.0,...])');
+        console.log('                   "z": z coordinate array. (ex: [0.0, 10.0, -25.0,...])');
+        console.log('           "city": render city. (ex: {"enabled":true})');
+        console.log('                   "enabled": toggle city (default false, ex: true)');
+        console.log('                   "size": radius of city sphere, in meters (default 1.0, ex: 150000)');
+        console.log('                   "color": color of city sphere (ex: "magenta")');
+        console.log('                   "x": x coordinate of city. (ex: 0.0)');
+        console.log('                   "y": y coordinate of city. (ex: 0.0)');
+        console.log('                   "z": z coordinate of city. (ex: 6356700.0)');
+        console.log('           "cities": render cities. (ex: {"enabled":true})');
+        console.log('                   "enabled": toggle cities (default false, ex: true)');
+        console.log('                   "size": radius of cities spheres, in meters (default 1.0, ex: 80000)');
+        console.log('                   "color": color of cities spheres (ex: "darkviolet")');
+        console.log('                   "x": x coordinate array of cities. (ex: [0.0, 10.0, -25.0,...])');
+        console.log('                   "y": y coordinate array of cities. (ex: [0.0, 10.0, -25.0,...])');
+        console.log('                   "z": z coordinate array of cities. (ex: [0.0, 10.0, -25.0,...])');
+        console.log('           "graticule": render graticule. (ex: {"enabled":true})');
+        console.log('                   "enabled": toggle graticule (default false, ex: true)');
+        console.log('                   "scale": scale graticule factor (default 1.0, ex: 1.004)');
+        console.log('                   "x": x coordinate array. (ex: [0.0, 10.0, -25.0,...])');
+        console.log('                   "y": y coordinate array. (ex: [0.0, 10.0, -25.0,...])');
+        console.log('                   "z": z coordinate array. (ex: [0.0, 10.0, -25.0,...])');
+        console.log('       "view": object cotaining view parameters. See webgl.js for defaults. (ex: {"position":[0.0,0.0,0.0],"rotation":[0.0,0.0,0.0],"zoom":1.0,"zoomLimits":[0.01,100.0],"azimuthLimits":[-180,180.0],"elevationLimits":[-90,90.0],"panningEnabled":false,"twod":false})');
+        console.log('           "position": camera position (ex: [0.0,0.0,0.0])');
+        console.log('           "rotation": camera rotation (ex: [0.0,0.0,0.0])');
+        console.log('           "zoom": initial camera zoom as a percentage of default (default 1, ex: 1.5, 0.01)');
+        console.log('           "zoomLimits": zoom view limits (ex: [0.05, 10])');
+        console.log('                   "azimuthLimits": zoom view limits (ex: [0.05, 10])');
+        console.log('           "elevationLimits": zoom view limits (ex: [0.05, 10])');
+        console.log('           "panningEnabled": controls panning with shift + drag mouse or pan gestures (default: false, ex: true)');
+        console.log('           "twod": controls twod orthographic view (default: false, ex: true)');
         console.log('       "xlim": x coordinates to fit inside camera (ex: [0, 500])');
         console.log('       "ylim": y coordinates to fit inside camera (ex: [0, 500])');
         console.log('       "zlim": z coordinates to fit inside camera (ex: [0, 500])');
-        console.log('       "zoomlim": zoom view limits (ex: [0.05, 10])');
-        console.log('       "zoom": initial camera zoom as a percentage of default (default 1, ex: 1.5, 0.01)');
-        console.log('       "cloud*": plot a cloud of points, given a flat array of 3d coordinates (ex: [0.0, 0.0, 0.0, 1.0, 1.0, 1.0])');
-        console.log('       "expdisp*": plot exp file on top of a data plot. provide exp file as an argument (use a cell of strings if more than one)');
-        console.log('       "textlabels*": plot text labels rendered in 3d space, using an array of text/coordinate pairs (ex: [{"pos":[0.0,0.0,0.0],"text":"origin"}])');
+        console.log('       "transient_field_data": array of data objects (ex: [[0.0,1.0, 2.5, 12.0...],[0.0,1.0, 2.5, 12.0...],...])');
+        console.log('       "textlabels": plot text labels rendered in 3d space, using an array of text/coordinate pairs (ex: [{"pos":[0.0,0.0,0.0],"text":"origin"}])');
         
         console.log('  ');
         console.log('   Examples:');

../trunk-jpl/src/m/plot/processdata.js

@@ -14 +14 @@
         //
         //   See also: PLOTMODEL, PROCESSMESH
 
-        //variables: 
-        var datatype;
-        
         //check format
         if ( data.length ==0 | data === [] | typeof data === 'number' | ArrayAnyNaN(data) ){
                 throw Error('plotmodel error message: data provided is empty');
@@ -34 +31 @@
         }
 
         //needed later on
+        var numberofvertices2d, numberofelements2d;
         if ('numberofvertices2d' in md.mesh){
                 numberofvertices2d=md.mesh.numberofvertices2d; 
                 numberofelements2d=md.mesh.numberofelements2d; 
@@ -44 +42 @@
         }
 
         //initialize datatype
-        datatype=0;
+        var datatype=0;
 
         //get datasize
-        datasize=data.length;
+        var datasize=data.length;
 
         //transpose data if necessary
         if (data[0].length > data.length){
@@ -63 +61 @@
 
 
         //quiver?
-        if (data[0].length>1){
+        if (Array.isArray(data[0])){
                 datatype=3;
 
                 //check number of columns, add zeros if necessary,
@@ -114 +112 @@
         }
 
         //element data
-        if (datasize==md.mesh.numberofelements & data[0].length==1){
+        if (datasize==md.mesh.numberofelements & !Array.isArray(data[0])){
 
                 //Initialize datatype if non patch
                 if(datatype!=4 & datatype!=5){
@@ -157 +155 @@
         }
 
         //node data
-        if (datasize==md.mesh.numberofvertices){
+        if (datasize==md.mesh.numberofvertices & !Array.isArray(data[0])){
                 datatype=2;
 
                 //Mask?

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

@@ -1 @@
-function plot_quiver(md, options, canvas, updateVel) { //{{{
+function plot_quiver(md, options, canvas, noCacheNodesOverride) { //{{{
         //PLOT_QUIVER - quiver plot with colors
         //
         //   Usage:
@@ -6 +6 @@
         //
         //   See also: PLOTMODEL, PLOT_MANAGER
 
+        if ('quiver' in  canvas.nodes && noCacheNodesOverride && options.getfieldvalue('cachenodes','on') === 'on') return;
+        
         //{{{ declare variables:
-        var vertices = [];
-        var indices = [];
-        var colors = [];
-        var xmin, xmax;
-        var ymin, ymax;
-        var zmin, zmax;
-        var scale, matrixscale, vertexscale;
-        
         //Process data and model
-        var meshresults = processmesh(md,[], options);
-
+        var meshresults = processmesh(md, [], options);
         var x = meshresults[0]; 
         var y = meshresults[1]; 
         var z = meshresults[2]; 
@@ -24 +17 @@
         var elements = meshresults[3]; 
         var is2d = meshresults[4]; 
         var isplanet = meshresults[5];
-        var v = updateVel != undefined ? updateVel.vel : md.initialization.vel;
-        var vx = updateVel != undefined ? updateVel.vx : md.initialization.vx;
-        var vy = updateVel != undefined ? updateVel.vy : md.initialization.vy;
+        if (md.mesh.classname() !== 'mesh3dsurface') z = md.geometry.surface;
                 
-        //Compue scaling through matrices for 2d meshes and vertices for 3d meshes
-        if (!md.geometry.surface) {
-                md.geometry.surface=NewArrayFill(md.mesh.x.length, 0);
+        //Compute coordinates and data range:
+        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)]);
+
+        //Only displaying velocity fields for now
+        var v = isEmptyOrUndefined(md.results) ?  md.initialization.vel : md.results[canvas.animation.frame].Vel;
+        var vx = isEmptyOrUndefined(md.results) ? md.initialization.vx : md.results[canvas.animation.frame].Vx;
+        var vy = isEmptyOrUndefined(md.results) ? md.initialization.vy : md.results[canvas.animation.frame].Vy;
+
+        //Handle heightscale
+        var vertices, scale;
+        if (md.mesh.classname() !== 'mesh3dsurface') {
+                vertices = [x, y, z];
+                scale = [1, 1, options.getfieldvalue('heightscale', 1)];
         }
-        if (md.mesh.classname() == 'mesh3dsurface') {
-                matrixscale = 1;
-                vertexscale = options.getfieldvalue('heightscale', 1);
-        }
         else {
-                if (md.geometry.surface) {
-                        z=md.geometry.surface;
-                }       
-                matrixscale = options.getfieldvalue('heightscale', 1);
-                vertexscale = 0;
+                vertices = Node.prototype.scaleVertices(md, x, y, z, options.getfieldvalue('heightscale', 1));
+                scale = [1, 1, 1];
         }
-        //}}}
-
-        //Compute coordinates and data range:
-        var modelxlim = [ArrayMin(x), ArrayMax(x)];
-        var modelylim = [ArrayMin(y), ArrayMax(y)];
-        var modelzlim = [ArrayMin(z), ArrayMax(z)];
-        var xlim = options.getfieldvalue('xlim', modelxlim);
-        var ylim = options.getfieldvalue('ylim', modelylim);
-        var zlim = options.getfieldvalue('zlim', modelzlim);
-        xmin = xlim[0];
-        xmax = xlim[1];
-        ymin = ylim[0];
-        ymax = ylim[1];
-        zmin = zlim[0];
-        zmax = zlim[1];
-
+        
         //Compute gl variables:
-        var gl = canvas.gl;
-        var node = Node(gl);
-        canvas.nodes["velocity"] = node;
-        node.name = "quiver";
-        node.shaderName = "Colored";
-        node.shader = gl.shaders[node.shaderName];
-        node.lineWidth = options.getfieldvalue('linewidth', 1);
-        node.scale = [1, 1, matrixscale];
-        node.rotation = [-90, 0, 0];
-        node.translation = [0, 0, 0];
-        node.center = [(xmin + xmax) / 2, (ymin + ymax) / 2, (zmin + zmax) / 2];
-        node.drawMode = gl.LINES;
-        node.useIndexBuffer = false;
-        node.drawOrder = 0;
-        node.maskEnabled = options.getfieldvalue('innermask','off') == 'on';
-        node.maskHeight = options.getfieldvalue('innermaskheight', 150.0)*options.getfieldvalue('heightscale', 1);
-        node.maskColor = options.getfieldvalue('innermaskcolor',[0.0, 0.0, 1.0, 1.0]);
-        updateModelMatrix(node);
-
-        //retrieve some options
-        var edgecolor=new RGBColor(options.getfieldvalue('edgecolor','black'));
-        if (edgecolor.ok) edgecolor = [edgecolor.r/255.0, edgecolor.g/255.0, edgecolor.b/255.0, 1.0];
-        else throw Error(sprintf("s%s%s\n","initWebGL error message: cound not find out edgecolor color for curent canvas ", canvas));
-
+        var edgecolor = options.getfieldvalue('edgecolor', 'black');
+        var node = new Node(
+                'canvas', canvas,
+                'options', options,
+                'name', 'quiver',
+                'shaderName', 'Colored',
+                'alpha', options.getfieldvalue('alpha', 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],
+                'drawMode', canvas.gl.LINES,
+                'diffuseColor', edgecolor,
+                'lineWidth', options.getfieldvalue('linewidth', 1),
+                'maskEnabled', options.getfieldvalue('innermask','off') == 'on',
+                'maskHeight', options.getfieldvalue('innermaskheight', 150.0) / options.getfieldvalue('heightscale', 1),
+                'maskColor', options.getfieldvalue('innermaskcolor',[0.0, 0.0, 1.0, 1.0]),
+                'rotation', [-90, 0, 0],
+                'scale', scale
+        );
+        
+        
         //{{{ node plot
         if (elements[0].length==6){ //prisms
         }
@@ -90 +67 @@
         else if (elements[0].length==4){ //tetras
         }
         else{ //2D triangular elements
+                //Create arow vertices, and use vx/vy to determine rotation before adding to quiver mesh.
+                var verticesArrow = [vec3.fromValues(0.0, 0.0, 0.0), vec3.fromValues(1.0, 0.0, 0.0), vec3.fromValues(0.667, -0.167, 0.0), vec3.fromValues(1.0, 0.0, 0.0), vec3.fromValues(0.667, 0.166, 0.0), vec3.fromValues(1.0, 0.0, 0.0)];
+                
+                var newX = [];
+                var newY = [];
+                var newZ = [];
                 var xyz = vec3.create();
-                var xyz = vec3.create();
-                var direction = vec3.create();
                 var vertex = vec3.create();
-                var vertexBase = vec3.create();
-                var verticesArrow = [vec3.fromValues(0.0, 0.0, 0.0), vec3.fromValues(1.0, 0.0, 0.0), vec3.fromValues(0.667, -0.167, 0.0), vec3.fromValues(1.0, 0.0, 0.0), vec3.fromValues(0.667, 0.166, 0.0), vec3.fromValues(1.0, 0.0, 0.0)];
-                var magnitude;
-                var color = edgecolor;
                 var scaling = options.getfieldvalue('scaling', 1);
-                var scale;
-                for(var i = 0; i < x.length; i++){
-                        //Check for NaN values and remove from indices array as necessary, but preserve vertex array spacing
-                        if (isNaN(x[i]) || isNaN(y[i]) || isNaN(z[i])) continue;
-                        //Scale vertices
+                var heightScale = options.getfieldvalue('heightscale', 1);
+                var arrowScale;
+                var modelMatrix = mat4.create();
+                var scaleMatrix = mat4.create();
+                var rotationMatrix = mat4.create();
+                
+                for(var i = 0, iX = 0, iY = 0, iZ = 0; i < x.length; i++){
                         xyz = vec3.fromValues(x[i], y[i], z[i]);
-                        magnitude = vec3.length(xyz) + md.geometry.surface[i] * vertexscale;
-                        vec3.normalize(direction, xyz);
-                        vec3.scale(vertex, direction, magnitude);
-                        vec3.copy(vertexBase, vertex);
-                        
-                        scale = scaling*v[i];
-                        var modelMatrix = mat4.create();
-                        var scaleMatrix = mat4.create();
-                        var rotationMatrix = mat4.create();
-                        mat4.scale(scaleMatrix, scaleMatrix, vec3.fromValues(scale, scale, scale));
-                        mat4.rotate(rotationMatrix, rotationMatrix, Math.atan2(vy[i], vx[i]), [0.0, 0.0, 1.0]);
+                        arrowScale = v[i] * scaling;
+                        scaleMatrix = mat4.create();
+                        mat4.scale(scaleMatrix, mat4.create(), vec3.fromValues(arrowScale, arrowScale, arrowScale));
+                        mat4.rotate(rotationMatrix, mat4.create(), Math.atan2(vy[i], vx[i]), [0.0, 0.0, 1.0]);
                         mat4.multiply(modelMatrix, rotationMatrix, scaleMatrix);
-
-                        var temp = vec3.fromValues(0.0, 0.0, 0.0);
                         for (var j = 0; j < 6; j++){
                                 vec3.transformMat4(vertex, verticesArrow[j], modelMatrix);
-                                vec3.add(vertex, vertex, vertexBase);
-                                vertices[vertices.length] = vertex[0];
-                                vertices[vertices.length] = vertex[1];
-                                vertices[vertices.length] = vertex[2];
-                                
-                                colors[colors.length] = color[0];
-                                colors[colors.length] = color[1];
-                                colors[colors.length] = color[2];
-                                colors[colors.length] = color[3];
+                                vec3.add(vertex, vertex, xyz);
+                                newX[iX++] = vertex[0];
+                                newY[iY++] = vertex[1];
+                                newZ[iZ++] = vertex[2];
                         }
                 }
+                node.patch('Vertices', [newX, newY, newZ], 'FaceColor', 'none');
         }
         //}}}
-        node.mesh = GL.Mesh.load({vertices: vertices, colors: colors}, null, null, gl);
 } //}}}

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

@@ -6 +6 @@
         //
         //   See also: PLOTMODEL, PLOT_MANAGER
 
+        if ('mesh' in  canvas.nodes && options.getfieldvalue('cachenodes','on') === 'on') return;
+        
         //{{{ declare variables:
-        var vertices = [];
-        var indices = [];
-        var colors = [];
-        var nanindices = {};
-        var xmin, xmax;
-        var ymin, ymax;
-        var zmin, zmax;
-        var scale, matrixscale, vertexscale;
-        
         //Process data and model
-        var meshresults = processmesh(md,[], options);
+        var meshresults = processmesh(md, [], options);
         var x = meshresults[0]; 
         var y = meshresults[1]; 
         var z = meshresults[2]; 
@@ -25 +18 @@
         var is2d = meshresults[4]; 
         var isplanet = meshresults[5];
                 
-        //Compue scaling through matrices for 2d meshes and vertices for 3d meshes
-        if (!md.geometry.surface) {
-                md.geometry.surface=NewArrayFill(md.mesh.x.length, 0);
+        //Compute coordinates and data range:
+        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)]);
+        
+        //Handle heightscale
+        var vertices, scale;
+        if (md.mesh.classname() !== 'mesh3dsurface') {
+                vertices = [x, y, z];
+                scale = [1, 1, options.getfieldvalue('heightscale', 1)];
         }
-        if (md.mesh.classname() == 'mesh3dsurface') {
-                matrixscale = 1;
-                vertexscale = options.getfieldvalue('heightscale', 1);
-        }
         else {
-                if (md.geometry.surface) {
-                        z=md.geometry.surface;
-                }       
-                matrixscale = options.getfieldvalue('heightscale', 1);
-                vertexscale = 0;
+                vertices = Node.prototype.scaleVertices(md, x, y, z, options.getfieldvalue('heightscale', 1));
+                scale = [1, 1, 1];
         }
+        
+        //Compute gl variables:
+        var edgecolor = options.getfieldvalue('edgecolor', 'black');
+        var node = new Node(
+                'canvas', canvas,
+                'options', options,
+                'name', 'mesh',
+                'shaderName', 'Colored',
+                'alpha', options.getfieldvalue('alpha', 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],
+                'drawMode', canvas.gl.LINES,
+                'diffuseColor', edgecolor,
+                'lineWidth', options.getfieldvalue('linewidth', 1),
+                'maskEnabled', options.getfieldvalue('innermask','off') == 'on',
+                'maskHeight', options.getfieldvalue('innermaskheight', 150.0) / options.getfieldvalue('heightscale', 1),
+                'maskColor', options.getfieldvalue('innermaskcolor',[0.0, 0.0, 1.0, 1.0]),
+                'rotation', [-90, 0, 0],
+                'scale', scale
+        );
         //}}}
-
-        //Compute coordinates and data range:
-        var modelxlim = [ArrayMin(x), ArrayMax(x)];
-        var modelylim = [ArrayMin(y), ArrayMax(y)];
-        var modelzlim = [ArrayMin(z), ArrayMax(z)];
-        var xlim = options.getfieldvalue('xlim', modelxlim);
-        var ylim = options.getfieldvalue('ylim', modelylim);
-        var zlim = options.getfieldvalue('zlim', modelzlim);
-        xmin = xlim[0];
-        xmax = xlim[1];
-        ymin = ylim[0];
-        ymax = ylim[1];
-        zmin = zlim[0];
-        zmax = zlim[1];
-
-        //Compute gl variables:
-        var gl = canvas.gl;
-        gl.makeCurrent();
-        var node = Node(gl);
-        canvas.nodes[canvas.nodes.length] = node;
-        node.name = "mesh";
-        node.shaderName = "Colored";
-        node.shader = gl.shaders[node.shaderName];
-        node.lineWidth = options.getfieldvalue('linewidth', 1);
-        node.scale = [1, 1, matrixscale];
-        node.rotation = [-90, 0, 0];
-        node.translation = [0, 0, 0];
-        node.center = [(xmin + xmax) / 2, (ymin + ymax) / 2, (zmin + zmax) / 2];
-        node.drawMode = gl.LINES;
-        node.drawOrder = 0;
-        node.maskEnabled = options.getfieldvalue('innermask','off') == 'on';
-        node.maskHeight = options.getfieldvalue('innermaskheight', 150.0)*options.getfieldvalue('heightscale', 1);
-        node.maskColor = options.getfieldvalue('innermaskcolor',[0.0, 0.0, 1.0, 1.0]);
-        updateModelMatrix(node);
-
-        //retrieve some options
-        var edgecolor = new RGBColor(options.getfieldvalue('edgecolor','black'));
-        if (edgecolor.ok) edgecolor = [edgecolor.r/255.0, edgecolor.g/255.0, edgecolor.b/255.0, 1.0];
-        else throw Error(sprintf("s%s%s\n","initWebGL error message: cound not find out edgecolor color for curent canvas ", canvas));
-
         //{{{ node plot
         if (elements[0].length==6){ //prisms
         }
@@ -87 +60 @@
         else if (elements[0].length==4){ //tetras
         }
         else{ //2D triangular elements
-                var xyz = vec3.create();
-                var direction = vec3.create();
-                var vertex = vec3.create();
-                var magnitude;
-                var color = edgecolor;
-                for(var i = 0; i < x.length; i++){
-                        //Check for NaN values and remove from indices array as necessary, but preserve vertex array spacing
-                        if (isNaN(x[i]) || isNaN(y[i]) || isNaN(z[i])) {
-                                nanindices[i] = i;
-                                vertices[vertices.length] = vertex[0];
-                                vertices[vertices.length] = vertex[1];
-                                vertices[vertices.length] = vertex[2];
-                                
-                                colors[colors.length] = color[0];
-                                colors[colors.length] = color[1];
-                                colors[colors.length] = color[2];
-                                colors[colors.length] = color[3];
-                                continue;
-                        }
-                        //Scale vertices
-                        xyz = vec3.fromValues(x[i], y[i], z[i]);
-                        magnitude = vec3.length(xyz) + md.geometry.surface[i] * vertexscale;
-                        vec3.normalize(direction, xyz);
-                        vec3.scale(vertex, direction, magnitude);
-                        vertices[vertices.length] = vertex[0];
-                        vertices[vertices.length] = vertex[1];
-                        vertices[vertices.length] = vertex[2];
-
-                        colors[colors.length] = color[0];
-                        colors[colors.length] = color[1];
-                        colors[colors.length] = color[2];
-                        colors[colors.length] = color[3];
-                }
-                
-                //linearize the elements array: 
-                var element;
-                for(var i = 0; i < elements.length; i++){
-                        element = [elements[i][0] - 1, elements[i][1] - 1, elements[i][2] - 1];
-                        if (element[0] in nanindices || element[1] in nanindices || element[2] in nanindices) continue;
-                        indices[indices.length] = element[0];
-                        indices[indices.length] = element[1];
-                        indices[indices.length] = element[1];
-                        indices[indices.length] = element[2];
-                        indices[indices.length] = element[2];
-                        indices[indices.length] = element[0];
-                }
+                node.patch('Faces', elements, 'Vertices', vertices, 'FaceColor', 'none', 'EdgeColor', edgecolor);
         }
         //}}}
-        node.mesh = GL.Mesh.load({vertices: vertices, colors: colors, triangles: indices}, null, null, gl);
+        //options=options.addfielddefault('title','Mesh');
+        //options=addfielddefault('colorbar','off');
+        //applyoptions(md,[],options,canvas);
 } //}}}

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

@@ -171 +171 @@
                 }
                 return buf;
         } //}}}
-}
+}