Changeset 19915

Timestamp:

12/28/15 21:32:43 (9 years ago)

Author:

dlcheng

Message:

CHG (javascript): Preliminary implementation of mouse/touch camera rotation interaction for js plots.

Location:

issm/trunk-jpl

Files:

• externalpackages/javascript/src/hammer.min.js (added)
• src/m/plot/plot_mesh.js (modified) (1 diff)
• src/m/plot/plot_overlay.js (modified) (1 diff)
• src/m/plot/plot_unit.js (modified) (1 diff)
• src/m/plot/webgl.js (modified) (3 diffs)

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

@@ -44 +44 @@
         node["shaderName"] = "colored";
         node["shader"] = gl["shaders"][node["shaderName"]]["program"];
-        node["scale"] = [scale, scale, scale];
+        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"] = recalculateModelMatrix(node);

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

@@ -48 +48 @@
         node["shaderName"] = "unlit_textured";
         node["shader"] = gl["shaders"][node["shaderName"]]["program"];
-        node["scale"] = [scale, scale, scale];
+        node["scale"] = [scale, scale, scale*options.getfieldvalue('heightscale',1)];
         node["rotation"] = options.getfieldvalue('view',[0,0,0]);
         node["translation"] = [(xmin + xmax) / (-2 / scale), (ymin + ymax) / (-2 / scale), (zmax) / (-1 / scale)];

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

@@ -55 +55 @@
         node["shaderName"] = "unlit_textured";
         node["shader"] = gl["shaders"][node["shaderName"]]["program"];
-        node["scale"] = [scale, scale, scale];
+        node["scale"] = [scale, scale, scale*options.getfieldvalue('heightscale',1)];
         node["rotation"] = options.getfieldvalue('view',[0,0,0]);
         node["translation"] = [(xmin + xmax) / (-2 / scale), (ymin + ymax) / (-2 / scale), (zmax) / (-1 / scale)];

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

@@ -37 +37 @@
         canvas.cameraMatrix = mat4.create();
         canvas.translation = [0,0];
+        canvas.rotation = [0,0,0];
         canvas.controlsensitivity = 1;
 
         // Add event listeners for canvas
-        if (canvas.addEventListener) {
-                // IE9, Chrome, Safari, Opera
-                canvas.addEventListener("mousewheel", function (e) {handleZoom(e,canvas)}, false);
-                // Firefox
-                canvas.addEventListener("DOMMouseScroll", function (e) {handleZoom(e,canvas)}, false);
-                // Mobile
-                canvas.addEventListener("gesturechange", handleZoom, false);
-        }
-
+        canvas.addEventListener("mousewheel", function (ev) {onZoom(ev,canvas)}, false);
+        canvas.addEventListener("DOMMouseScroll", function (ev) {onZoom(ev,canvas)}, false);
+
+        var mc = new Hammer.Manager(canvas);
+
+    mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
+    mc.add(new Hammer.Pinch({ threshold: 0})).recognizeWith(mc.get('pan'));
+
+    mc.on("panstart panmove", function (ev) {onPan(ev,canvas);});
+    mc.on("pinchstart pinchmove", function (ev) {onPinch(ev,canvas);});
+        //mc.on("mousewheel DOMMouseScroll", function (ev) {onZoom(ev,canvas);});
+        
         return gl;
 } //}}}
@@ -265 +269 @@
 //}}}
 //{{{ Interface Functions
-function handleZoom(e,canvas) { //{{{
+function onPan(ev,canvas) {
+        if (ev.type == 'panstart') {
+                canvas.lastDeltaX = 0;
+                canvas.lastDeltaY = 0;
+        }
+        // if single finger/pan without modifier key, rotate around center
+        //canvas.translation[0] += (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * canvas.zoomFactor * 2;
+        //canvas.translation[1] -= (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * canvas.zoomFactor * 2;
+        // else if double finger/pan with modifier key, move camera center
+        canvas.rotation[0] += (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * canvas.zoomFactor * 2;
+        canvas.rotation[1] += (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * canvas.zoomFactor * 2;
+        canvas.lastDeltaX = ev.deltaX;
+        canvas.lastDeltaY = ev.deltaY;
+}
+function onPinch(ev,canvas) {
+        if (ev.type == 'pinchstart') {
+                canvas.lastScale = 1;
+        }
+        canvas.zoomFactor = Math.max(canvas.zoomBounds[1], Math.min(-ev.scale * canvas.lastScale, canvas.zoomBounds[0]));
+        canvas.lastScale = ev.scale;
+}
+function onZoom(ev,canvas) {
         // prevent scrolling when over canvas
-        e.preventDefault();
-        var e = window.event || e; // old IE support
-        var delta = 1/10 * Math.max(-1, Math.min(e.scale || e.wheelDelta || -e.detail, 1));
+        ev.preventDefault();
+        var delta = 1/10 * Math.max(-1, Math.min(ev.scale || ev.wheelDelta || -ev.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);
-} //}}}
+}
 //}}}
 //{{{ Drawing Functions
@@ -296 +302 @@
         var vMatrix = mat4.create();
         var pMatrix = mat4.create();
+        var rotationMatrix = mat4.create();
+        var traversalRotationMatrix = mat4.create();
+        var elevationRotationMatrix = mat4.create();
 
         mat4.perspective(pMatrix, 90 * Math.PI / 180, canvas.clientWidth / canvas.clientHeight, 0.001, 10000.0);
+        
+        //Calculate rotation around camera focal point about worldspace origin
+        mat4.rotate(traversalRotationMatrix, traversalRotationMatrix, canvas.rotation[0], [0, 1, 0]);
+        mat4.rotate(elevationRotationMatrix, elevationRotationMatrix, canvas.rotation[1], [1, 0, 0]);
+        mat4.multiply(rotationMatrix, elevationRotationMatrix, traversalRotationMatrix);
+        
+        //Apply rotation and scaling transform
+        mat4.multiply(vMatrix, rotationMatrix, vMatrix);
+        
         //Apply screenspace relative translation
         var translateMatrix = mat4.create();