Changeset 19729

Timestamp:

11/17/15 08:45:56 (9 years ago)

Author:

dlcheng

Message:

CHG:Fixing drawing methods and zoom behavior for test101.html

Location:

issm/trunk-jpl/src/m/plot

Files:

• plot_unit.js (modified) (1 diff)
• webgl.js (modified) (4 diffs)

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

@@ -21 +21 @@
                 loadShaders(gl);
                 var node=loadModel(gl,x,y,z,elements,data);
-                drawSceneGraphNode(gl,node);
-        }
+                draw(gl,canvas,node);}
 
         switch(datatype){

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

@@ -32 +32 @@
 
         // Add context state variables
-        //gl.zoomFactor = 1.0;
-        //gl.cameraMatrix = mat4.create();
+        canvas.zoomFactor = -1.0;
+        canvas.cameraMatrix = mat4.create();
 
         // Add event listeners for canvas
         if (canvas.addEventListener) {
                 // IE9, Chrome, Safari, Opera
-                canvas.addEventListener("mousewheel", function (e) {MouseWheelHandler(e,gl)}, false);
+                canvas.addEventListener("mousewheel", function (e) {MouseWheelHandler(e,canvas)}, false);
                 // Firefox
-                canvas.addEventListener("DOMMouseScroll", function (e) {MouseWheelHandler(e,gl)}, false);
+                canvas.addEventListener("DOMMouseScroll", function (e) {MouseWheelHandler(e,canvas)}, false);
                 // Mobile
                 //canvas.addEventListener("gesturechange", MousePinchHandler, false);
@@ -286 +286 @@
 //}}}
 //{{{ Interface Functions
-function MouseWheelHandler(e,gl) { //{{{
+function MouseWheelHandler(e,canvas) { //{{{
         // prevent scrolling when over canvas
         e.preventDefault();
-        var delta = clamp((e.wheelDelta || -e.detail), -1, 1);
-        //gl.zoomFactor = gl.zoomFactor + delta;
-        updateCameraMatrix(gl);
+        var delta = 1/10 * clamp((e.wheelDelta || -e.detail), -1, 1);
+        canvas.zoomFactor = canvas.zoomFactor + -delta * canvas.zoomFactor;
 } //}}}
 //}}}
 //{{{ Drawing Functions
-function updateCameraMatrix(gl) { //{{{
+function updateCameraMatrix(canvas) { //{{{
         //Update view matrix and multiply with projection matrix to get the view-projection (camera) matrix.
         var vMatrix = mat4.create();
         var pMatrix = mat4.create();
 
-        mat4.perspective(pMatrix, 45 * Math.PI / 180, gl.canvas.width / gl.canvas.height, 0.001, 10000.0);
-
-        var scaleMatrix= mat4.create();
-        mat4.scale(scaleMatrix, scaleMatrix, [1/100000000000000, 1/100000000000000, 1/100000000000000]);        
-        mat4.multiply(vMatrix, scaleMatrix, vMatrix);
+        mat4.perspective(pMatrix, 90 * Math.PI / 180, canvas.width / canvas.height, 0.001, 10000.0);
 
         //Apply screenspace relative translation
         var translateMatrix = mat4.create();
-        mat4.translate(translateMatrix, translateMatrix, [0.0, 0.0, gl.zoomFactor]);
+        mat4.translate(translateMatrix, translateMatrix, [0.0, 0.0, canvas.zoomFactor]);
         mat4.multiply(vMatrix, translateMatrix, vMatrix);
 
         //Apply projection matrix to get camera matrix
-        mat4.multiply(gl.cameraMatrix, pMatrix, vMatrix);
+        mat4.multiply(canvas.cameraMatrix, pMatrix, vMatrix);
+//      canvas.cameraMatrix = mat4.create();
 }//}}}
-function drawSceneGraphNode(gl,node) { //{{{
+function drawSceneGraphNode(gl,canvas,node) { //{{{
         bindAttributes(gl, node["shader"], node["buffers"]);
         var mvpMatrix = mat4.create();
-        var cameraMatrix = mat4.create();
-        //var cameraMatrix = gl.cameraMatrix;
         if (node["useOrthographic"] == true) {
                 mat4.ortho(mvpMatrix, -1.0, 1.0, -1.0, 1.0, -1.0, 1.0);
         }
         else {
-                mat4.multiply(mvpMatrix, cameraMatrix, node["modelMatrix"]);
+                mat4.multiply(mvpMatrix, canvas.cameraMatrix, node["modelMatrix"]);
         }
         gl.uniformMatrix4fv(node["shader"]["uMVPMatrix"], false, mvpMatrix);
@@ -334 +328 @@
                 gl.drawArrays(node["drawMode"], 0, node["buffers"][0].numItems);
         }       
-        gl.enable(gl.DEPTH_TEST);
-        gl.disable(gl.CULL_FACE);
 } //}}}
 function bindAttributes(gl,shaderProgram,bufferArray) { //{{{
@@ -350 +342 @@
         }
 } //}}}
+function draw(gl,canvas,node) { //{{{
+        window.requestAnimationFrame(function(time) {draw(gl,canvas,node)});
+        gl.viewport(0, 0, canvas.width, canvas.height);
+        gl.clearColor(0.0, 0.0, 0.0, 1.0);      
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        updateCameraMatrix(canvas);
+        
+        drawSceneGraphNode(gl, canvas, node);
+} //}}}
 //}}}