Changeset 20584

Timestamp:

04/30/16 12:16:16 (9 years ago)

Author:

dlcheng

Message:

CHG (javascript): Resolving framerate issues.

Location:

issm/trunk-jpl/src/m/plot

Files:

• plot_manager.js (modified) (1 diff)
• plot_mesh.js (modified) (1 diff)
• plot_overlay.js (modified) (1 diff)
• plot_quiver.js (modified) (2 diffs)
• plot_unit.js (modified) (1 diff)
• plotmodel.js (modified) (1 diff)
• webgl.js (modified) (11 diffs)

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

@@ -10 +10 @@
         checkplotoptions(md,options);
         //get data to be displayed
-        var data=options.getfieldvalue('data');
-        
-        //TODO: Move into webgl.js? 
-        function initCanvas() {
-                //standard plot: initialize open Gl for each canvas, if needed: 
-                var canvas = $('<div><canvas id="'+options.getfieldvalue('canvasid')+'" width="'+options.getfieldvalue('canvassize',480)+'" height="'+options.getfieldvalue('canvassize',480)+'"></canvas></div>)')
-                canvas.css({'height':String(options.getfieldvalue('canvassize',480)+'px')});
-                if ($('#'+options.getfieldvalue('canvasid')).length == 0) {
-                        canvas.appendTo('body');
-                }
-                canvas=document.getElementById(options.getfieldvalue('canvasid'));
-                //Initialize the buffer structure when first data is drawn to mesh:
-                canvas.requestDrawing = false;
-                var gl = canvas.gl;
-                if (!canvas.hasOwnProperty("nodes")) {
-                        canvas.nodes = {};
-                        canvas.datalength = 0;
-                        canvas.requestDrawing = true;
-                        //Initialize the GL context: 
-                        gl = initWebGL(canvas,options);
-                        if (!gl) {
-                                throw Error("plotmodel error message: could not initialize open Gl!");
-                        }
-                        canvas.gl = gl;
-                }
-                canvas.nodes["data"+String(++canvas.datalength)] = Node(gl,options);
-                return canvas;
-        }
-        var canvas = initCanvas();
+        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

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

@@ -135 +135 @@
         node["arrays"] = [vertices, colors, indices];
         node["buffers"] = initBuffers(gl, node["arrays"]);
-        if (canvas.requestDrawing)      draw(gl,options,canvas);
 }

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

@@ -164 +164 @@
         /*Initalize buffers: */
         node["arrays"] = [vertices, texcoords, indices];
-        node["buffers"] = initBuffers(gl,node["arrays"]);
-        if (canvas.requestDrawing)      draw(gl,options,canvas);
+        node["buffers"] = initBuffers(gl,node["arrays"]);       
 }

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

@@ -105 +105 @@
                         
                         xyz2 = vec3.fromValues(vx[i], vy[i], 0.0);
-                        magnitude = 100.0; //mesh resolution
+                        magnitude = 100000.0; //mesh resolution
                         vec3.normalize(direction, xyz2);
                         vec3.scale(direction, direction, magnitude);
@@ -128 +128 @@
         node["arrays"] = [vertices, colors];
         node["buffers"] = initBuffers(gl, node["arrays"]);
-        if (canvas.requestDrawing)      draw(gl,options,canvas);
 }

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

@@ -273 +273 @@
                         throw Error(sprintf("%s%i%s\n",'case ',datatype,' not supported'));
         }
-        
-        if (canvas.requestDrawing) draw(gl,options,canvas);
 }

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

@@ -34 +34 @@
         //go through subplots
         if (numberofplots){
-                //Clear all canvas nodes
+                //Reinitialize all canvases
                 for (var i=0;i<numberofplots;i++){
-                        var canvas=document.getElementById(options.list[i].getfieldvalue('canvasid'));
-                        if (canvas && canvas.nodes) {
-                                delete canvas.nodes;
-                        }
+                        document.getElementById(options.list[i].getfieldvalue('canvasid')).initialized = false;
                 }
                 //Go through all data plottable and close window if an error occurs

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

@@ -1 +1 @@
 /*This is where we have all our webgl relevant functionality for the plotting routines: */
-//{{{ GL Initialization
+//{{{ Canvas Initialization
+function initCanvas(options) {
+        //Initialize open Gl for each canvas, if needed: 
+        var canvas=document.getElementById(options.getfieldvalue('canvasid'));
+        if (!canvas) {
+                canvas = $('<div><canvas id="'+options.getfieldvalue('canvasid')+'" width="'+options.getfieldvalue('canvassize',480)+'" height="'+options.getfieldvalue('canvassize',480)+'"></canvas></div>)')
+                canvas.css({'height':String(options.getfieldvalue('canvassize',480)+'px')});
+                canvas.appendTo('body');
+        }
+        if (!canvas.initialized) {
+                canvas.gl = initWebGL(canvas,options);
+                canvas.nodes = {};
+                canvas.datalength = 0;
+                if (canvas.drawHandler) window.cancelAnimationFrame(canvas.drawHandler);
+                draw(canvas,options);
+                canvas.initialized = true;
+        }
+        canvas.nodes["data"+String(++canvas.datalength)] = Node(canvas.gl,options);
+        return canvas;
+}
 function initWebGL(canvas,options) { //{{{
-        gl = null;
+        var gl;
 
         try {
@@ -13 +32 @@
         if (!gl) {
                 alert("Unable to initialize WebGL. Your browser may not support it.");
-                gl = null;
         }
                 
@@ -34 +52 @@
         // Add context state variables
         //TODO:Group variables in objects for organization and naming
+        canvas.gl = gl;
         canvas.zoomBounds = options.getfieldvalue('zoombounds',[0.001,100.0]);
         canvas.zoomFactor = clamp(options.getfieldvalue('zoomfactor',1.0), canvas.zoomBounds[0], canvas.zoomBounds[1]);
@@ -408 +427 @@
         //Apply projection matrix to get camera matrix
         mat4.multiply(canvas.cameraMatrix, pMatrix, vMatrix);
-//      canvas.cameraMatrix = mat4.create();
 }//}}}
-function drawSceneGraphNode(gl,canvas,node) { //{{{
+function drawSceneGraphNode(canvas,node) { //{{{
         if (!node["enabled"]) {
                 return;
@@ -419 +437 @@
                 }
         }
+        var gl = canvas.gl;
         bindAttributes(gl, node["shader"], node["buffers"]);
         var mvpMatrix = mat4.create();
@@ -458 +477 @@
         }
 } //}}}
-function draw(gl,options,canvas,nodes) { //{{{
+function draw(canvas,options) { //{{{
+        if (!canvas.nodes) {
+                canvas.drawHandler = window.requestAnimationFrame(function(time) {draw(canvas,options)});
+                return;
+        }
         // Ensure canvas and gl viewport sizes are the same
         var displayWidth  = canvas.clientWidth;
@@ -465 +488 @@
                 canvas.width  = displayWidth;
                 canvas.height = displayHeight;
-                gl.viewport(0, 0, canvas.width, canvas.height);
+                canvas.gl.viewport(0, 0, canvas.width, canvas.height);
         }
         
@@ -473 +496 @@
 
         // Set clear color to black, fully opaque
-        var backgroundcolor=new RGBColor(options.getfieldvalue('backgroundcolor','lightcyan'));
+        var gl = canvas.gl;
+        var backgroundcolor = new RGBColor(options.getfieldvalue('backgroundcolor','lightcyan'));
         if(backgroundcolor.ok){
                 gl.clearColor(backgroundcolor.r/255.0, backgroundcolor.g/255.0, backgroundcolor.b/255.0, 1.0);
@@ -483 +507 @@
         for (var node in nodes) {
                 if (nodes[node]["texture"] && !nodes[node]["texture"]["isLoaded"]) {
-                        window.requestAnimationFrame(function(time) {draw(gl,options,canvas,nodes)});
+                        canvas.drawHandler = window.requestAnimationFrame(function(time) {draw(canvas,options)});
                         return;
                 }
@@ -489 +513 @@
         // 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);
@@ -498 +520 @@
                 for (var node in nodes) {
                         if (nodes[node]["drawOrder"] == i) {
-                                drawSceneGraphNode(gl, canvas, nodes[node]);
-                        }
-                }
-        }
+                                drawSceneGraphNode(canvas,nodes[node]);
+                        }
+                }
+        }
+        canvas.drawHandler = window.requestAnimationFrame(function(time) {draw(canvas,options)});
 } //}}}
 //}}}