Changeset 19922

Timestamp:

01/02/16 23:24:06 (9 years ago)

Author:

dlcheng

Message:

CHG (javascript): Fixing low canvas resolution and adding in explicit canvas persistence handling for camera.

File:

• issm/trunk-jpl/src/m/plot/webgl.js (modified) (6 diffs)

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

@@ -15 +15 @@
                 gl = null;
         }
-
+                
         // Enable depth testing
         gl.enable(gl.DEPTH_TEST);
@@ -31 +31 @@
         // Load shaders and store them in gl object
         gl.shaders = loadShaders(gl);
+        
+
 
         // Add context state variables
@@ -38 +40 @@
         canvas.zoomLast = canvas.zoomFactor;
         canvas.cameraMatrix = mat4.create();
-        canvas.translation = [0,0,options.getfieldvalue('centeroffset',0.25)];
+        canvas.translation = options.getfieldvalue('centeroffset',[0,0,0.25]);
         canvas.rotationAzimuthBounds = options.getfieldvalue('azimuthbounds',[0,360]);
         canvas.rotationElevationBounds = options.getfieldvalue('elevationbounds',[-180,180]);
         canvas.rotationDefault = options.getfieldvalue('view',[0,90]); //0 azimuth - up is north, 90 elevation - looking straight down
-        canvas.rotation = queryView(canvas);
+        canvas.rotation = canvas.rotationDefault;
         canvas.controlsensitivity = 1;
 
@@ -163 +165 @@
         return Math.max(min, Math.min(value, max));
 } //}}}
-function queryView(canvas) { //{{{
-        if (canvas.rotation) {
+function recoverview(canvasid,defaultview) { //{{{
+        var canvas  = document.getElementById(canvasid);
+        if (canvas && canvas.hasOwnProperty("rotation")) {
                 return canvas.rotation;
         }
-        return canvas.rotationDefault;
+        return defaultview;
+} //}}}
+function recovercenteroffset(canvasid,defaultcenter) { //{{{
+        var canvas  = document.getElementById(canvasid);
+        if (canvas && canvas.hasOwnProperty("translation")) {
+                return canvas.translation;
+        }
+        return defaultcenter;
 } //}}}
 //}}}
@@ -441 +451 @@
 } //}}}
 function draw(gl,options,canvas,nodes) { //{{{
+        // Ensure canvas and gl viewport sizes are the same
+        var displayWidth  = canvas.clientWidth;
+        var displayHeight = canvas.clientHeight;
+        if (canvas.width  != displayWidth || canvas.height != displayHeight) {
+                canvas.width  = displayWidth;
+                canvas.height = displayHeight;
+                gl.viewport(0, 0, canvas.width, canvas.height);
+        }
+        
         // Set clear color to black, fully opaque
         var backgroundcolor=new RGBColor(options.getfieldvalue('backgroundcolor','lightcyan'));
@@ -457 +476 @@
         // 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)});