Changeset 19912

Timestamp:

12/23/15 13:39:09 (9 years ago)

Author:

dlcheng

Message:

CHG (javascript): Implementing 3d mesh support for overlay, mesh, and unit plots. Preventing webgl from drawing unloaded textures.

Location:

issm/trunk-jpl/src/m/plot

Files:

• plot_manager.js (modified) (1 diff)
• plot_mesh.js (modified) (6 diffs)
• plot_overlay.js (modified) (3 diffs)
• plot_unit.js (modified) (5 diffs)
• webgl.js (modified) (8 diffs)

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

@@ -95 +95 @@
                                 break;
                         case 'mesh':
-                                //plot_mesh(md,options,nlines,ncols,i);
+                                console.log('hello');
                                 plot_mesh(md,options,canvas,gl,nodes["main"]);
                                 break;

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

@@ -14 +14 @@
         var zmin,zmax;
         var scale;
+        
         //Process data and model
         var x = md.mesh.x;
         var y = md.mesh.y;
-        var z = [0.0];
+        var z = [].fill(md.mesh.x.length);
         var elements = md.mesh.elements;
+        
+        if (md.geometry.surface) {
+                z = md.geometry.surface;
+        }
         //}}}
 
@@ -43 +48 @@
         node["modelMatrix"] = recalculateModelMatrix(node);
         node["drawMode"] = gl.LINES;
-        //node["alpha"] = options.getfieldvalue('alpha',1.0);
         node["overlay"] = false;
         node["drawOrder"] = 0;
@@ -54 +58 @@
         var edgecolor=options.getfieldvalue('edgecolor','black');
 
-        // populate arrays 
         //node plot {{{
         if (elements[0].length==6){ //prisms
-                /*A=elements(:,1); B=elements(:,2); C=elements(:,3); D=elements(:,4); E=elements(:,5); F=elements(:,6);
-                  patch( 'Faces', [A B C],  'Vertices', [x y z],'FaceVertexCData',zeros(size(x)),'FaceColor','none','EdgeColor',edgecolor,'linewidth',linewidth);
-                  patch( 'Faces', [D E F],  'Vertices', [x y z],'FaceVertexCData',zeros(size(x)),'FaceColor','none','EdgeColor',edgecolor,'linewidth',linewidth);
-                  patch( 'Faces', [A B E D],'Vertices', [x y z],'FaceVertexCData',zeros(size(x)),'FaceColor','none','EdgeColor',edgecolor,'linewidth',linewidth);
-                  patch( 'Faces', [B E F C],'Vertices', [x y z],'FaceVertexCData',zeros(size(x)),'FaceColor','none','EdgeColor',edgecolor,'linewidth',linewidth);
-                  patch( 'Faces', [C A D F],'Vertices', [x y z],'FaceVertexCData',zeros(size(x)),'FaceColor','none','EdgeColor',edgecolor,'linewidth',linewidth);
-                  */
         }
         else if (elements[0].length==4){ //tetras
-                /*A=elements(:,1); B=elements(:,2); C=elements(:,3); D=elements(:,4);
-                  patch( 'Faces',[A B C],'Vertices', [x y z],'FaceVertexCData',zeros(size(x)),'FaceColor','none','EdgeColor',edgecolor,'linewidth',linewidth);
-                  patch( 'Faces',[A B D],'Vertices', [x y z],'FaceVertexCData',zeros(size(x)),'FaceColor','none','EdgeColor',edgecolor,'linewidth',linewidth);
-                  patch( 'Faces',[B C D],'Vertices', [x y z],'FaceVertexCData',zeros(size(x)),'FaceColor','none','EdgeColor',edgecolor,'linewidth',linewidth);
-                  patch( 'Faces',[C A D],'Vertices', [x y z],'FaceVertexCData',zeros(size(x)),'FaceColor','none','EdgeColor',edgecolor,'linewidth',linewidth);
-                  */
         }
         else{ //2D triangular elements
@@ -78 +68 @@
                         vertices[vertices.length] = x[i];
                         vertices[vertices.length] = y[i];
-                        //vertices[vertices.length] = z[i];
-                        vertices[vertices.length] = 0;
+                        vertices[vertices.length] = z[i];
 
-                        //handle mesh/qinterest size mismatch
                         rgbcolor = [0.0, 0.0, 0.0];
                         colors[colors.length] = rgbcolor[0];
@@ -90 +78 @@
 
                 //linearize the elements array: 
-
                 for(var i = 0; i < elements.length; i++){
                         //convert tris to line edges; generates more edges than necessary, should optimize using node connectivity
@@ -105 +92 @@
         //}}}
 
-        /*//apply options
-        options=addfielddefault(options,'title','Mesh');
-        options=addfielddefault(options,'colorbar',0);
-        applyoptions(md,[],options);
-        */
-
         /*Initalize buffers: */
         node["arrays"] = [vertices, colors, indices];

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

@@ -24 +24 @@
         var is2d = meshresults[4]; 
         var isplanet = meshresults[5];
+        
+        if (md.geometry.surface) {
+                z = md.geometry.surface;
+        }
         //}}}
                 
@@ -46 +50 @@
         node["scale"] = [scale, scale, scale];
         node["rotation"] = options.getfieldvalue('view',[0,0,0]);
-        node["translation"] = [(xmin + xmax) / (-2 / scale), (ymin + ymax) / (-2 / scale), (zmin + zmax) / (-2 / scale)];
+        node["translation"] = [(xmin + xmax) / (-2 / scale), (ymin + ymax) / (-2 / scale), (zmax) / (-1 / scale)];
         node["modelMatrix"] = recalculateModelMatrix(node);
         node["texture"] = initTexture(gl,options.getfieldvalue('image'));
@@ -70 +74 @@
                 z = [].concat(z, md.radaroverlay.outerheight);
                 elements = [].concat(elements, newelements);
+                
+                node["translation"] = [node["translation"][0], node["translation"][1], (ArrayMax(z)) / (-1 / scale)];
         }
         

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

@@ -30 +30 @@
         var     data2 = dataresults[0]; 
         var     datatype = dataresults[1];
+        
+        if (md.geometry.surface) {
+                z = md.geometry.surface;
+        }
         //}}}
 
@@ -53 +57 @@
         node["scale"] = [scale, scale, scale];
         node["rotation"] = options.getfieldvalue('view',[0,0,0]);
-        node["translation"] = [(xmin + xmax) / (-2 / scale), (ymin + ymax) / (-2 / scale), (zmin + zmax) / (-2 / scale)];
+        node["translation"] = [(xmin + xmax) / (-2 / scale), (ymin + ymax) / (-2 / scale), (zmax) / (-1 / scale)];
         node["modelMatrix"] = recalculateModelMatrix(node);
         node["alpha"] = options.getfieldvalue('alpha',1.0);
         node["overlay"] = options.getfieldvalue('overlay','off') == 'on';
         node["drawOrder"] = 0;
+        
         switch(datatype){
-
                 //element plot {{{
                 case 1:
@@ -107 +111 @@
                 //quiver plot {{{
                 case 3:
-
                         if (is2d){
                                 //plot_quiver(x,y,data(:,1),data(:,2),options);
@@ -115 +118 @@
                         }
                         break;
-                        
                 //}}}
                 //node transient plot {{{
@@ -182 +184 @@
                         break;
                 //}}}
-                        
                 default:
                         throw Error(sprintf("%s%i%s\n",'case ',datatype,' not supported'));

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

@@ -36 +36 @@
         canvas.zoomFactor = Math.max(canvas.zoomBounds[1], Math.min(options.getfieldvalue('zoomfactor',canvas.zoomBounds[1]), canvas.zoomBounds[0]));
         canvas.cameraMatrix = mat4.create();
+        canvas.translation = [0,0];
+        canvas.controlsensitivity = 1;
 
         // Add event listeners for canvas
         if (canvas.addEventListener) {
                 // IE9, Chrome, Safari, Opera
-                canvas.addEventListener("mousewheel", function (e) {MouseWheelHandler(e,canvas)}, false);
+                canvas.addEventListener("mousewheel", function (e) {handleZoom(e,canvas)}, false);
                 // Firefox
-                canvas.addEventListener("DOMMouseScroll", function (e) {MouseWheelHandler(e,canvas)}, false);
+                canvas.addEventListener("DOMMouseScroll", function (e) {handleZoom(e,canvas)}, false);
                 // Mobile
-                canvas.addEventListener("gesturechange", MouseWheelHandler, false);
+                canvas.addEventListener("gesturechange", handleZoom, false);
         }
 
@@ -71 +73 @@
         var texture = gl.createTexture();
         texture.image = new Image();
+        texture.isLoaded = false;
         texture.image.onload = function () {
                 handleLoadedTexture(gl,texture);
         }
         texture.image.src = imageSource;
-        texture.isLoaded = true;
         return texture;
 } //}}}
@@ -89 +91 @@
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
         gl.bindTexture(gl.TEXTURE_2D, null);
+        texture.isLoaded = true;
 } //}}}
 function Node(gl,options) { //{{{
@@ -262 +265 @@
 //}}}
 //{{{ Interface Functions
-function MouseWheelHandler(e,canvas) { //{{{
+function handleZoom(e,canvas) { //{{{
         // prevent scrolling when over canvas
         e.preventDefault();
@@ -268 +271 @@
         var delta = 1/10 * Math.max(-1, Math.min(e.scale || e.wheelDelta || -e.detail, 1));
         canvas.zoomFactor = Math.max(canvas.zoomBounds[1], Math.min(canvas.zoomFactor - delta * canvas.zoomFactor, canvas.zoomBounds[0]));
+} //}}}
+function handlePointerDown(e,canvas) { //{{{
+        canvas.lastX = e.clientX;
+        canvas.lastY = e.clientY;
+} //}}} 
+function handlePointerUp(e,canvas) { //{{{
+} //}}}
+function handlePointerMove(e,canvas) { //{{{
+        var deltaX = canvas.controlsensitivity * (e.clientX - canvas.lastX);
+        var deltaY = canvas.controlsensitivity * (e.clientY - canvas.lastY);
+
+        lastMouseX =  e.clientX;
+        lastMouseY =  e.clientY;
+
+        canvas.translation[0] -= deltaX;
+        canvas.translation[0] += deltaY;
+        
+        updateCameraMatrix(canvas);
 } //}}}
 //}}}
@@ -276 +297 @@
         var pMatrix = mat4.create();
 
-        mat4.perspective(pMatrix, 90 * Math.PI / 180, canvas.width / canvas.height, 0.001, 10000.0);
-
+        mat4.perspective(pMatrix, 90 * Math.PI / 180, canvas.clientWidth / canvas.clientHeight, 0.001, 10000.0);
         //Apply screenspace relative translation
         var translateMatrix = mat4.create();
-        mat4.translate(translateMatrix, translateMatrix, [0.0, 0.0, canvas.zoomFactor]);
+        mat4.translate(translateMatrix, translateMatrix, [canvas.translation[0], canvas.translation[1], canvas.zoomFactor]);
         mat4.multiply(vMatrix, translateMatrix, vMatrix);
 
@@ -288 +308 @@
 }//}}}
 function drawSceneGraphNode(gl,canvas,node) { //{{{
+        if (node["texture"]) {
+                if (!node["texture"]["isLoaded"]) {
+                        return;
+                }
+        }
         bindAttributes(gl, node["shader"], node["buffers"]);
         var mvpMatrix = mat4.create();
@@ -338 +363 @@
         else throw Error(sprintf("s%s%s\n","initWebGL error message: cound not find out background color for curent canvas ",canvas));
                 
-        // Clear the color as well as the depth buffer.
+        // Skip drawing of new frame if any texture is not yet loaded
+        for (var node in nodes) {
+                if (nodes[node]["texture"] && !nodes[node]["texture"]["isLoaded"]) {
+                        window.requestAnimationFrame(function(time) {draw(gl,options,canvas,nodes)});
+                        return;
+                }
+        }
+        // Else, clear the color as well as the depth buffer for new frame
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
         window.requestAnimationFrame(function(time) {draw(gl,options,canvas,nodes)});
+        
         updateCameraMatrix(canvas);