Changeset 19919


Ignore:
Timestamp:
12/30/15 18:22:41 (9 years ago)
Author:
dlcheng
Message:

CHG (javascript): Implementing worldspace x/y camera panning and inner/outer ocean masking options.

Location:
issm/trunk-jpl/src/m/plot
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • issm/trunk-jpl/src/m/plot/plot_mesh.js

    r19915 r19919  
    5050        node["overlay"] = false;
    5151        node["drawOrder"] = 0;
     52        node["maskEnabled"] = options.exist('mask');
     53        node["maskHeight"] = options.getfieldvalue('maskheight',150.0)*options.getfieldvalue('heightscale',1);
     54        node["maskColor"] = options.getfieldvalue('maskcolor',[0.0,0.0,1.0,1.0]);
    5255                               
    5356        //some defaults:
  • issm/trunk-jpl/src/m/plot/plot_overlay.js

    r19917 r19919  
    5555        node["overlay"] = false;
    5656        node["drawOrder"] = 1;
     57        node["maskEnabled"] = options.getfieldvalue('outermask','off') == 'on';
     58        node["maskHeight"] = options.getfieldvalue('outermaskheight',150.0)*options.getfieldvalue('heightscale',1);
     59        node["maskColor"] = options.getfieldvalue('outermaskcolor',[0.0,0.0,1.0,1.0]);
    5760                               
    5861        //some defaults:
  • issm/trunk-jpl/src/m/plot/plot_unit.js

    r19917 r19919  
    6161        node["overlay"] = options.getfieldvalue('overlay','off') == 'on';
    6262        node["drawOrder"] = 0;
     63        node["maskEnabled"] = options.getfieldvalue('innermask','off') == 'on';
     64        node["maskHeight"] = options.getfieldvalue('innermaskheight',150.0)*options.getfieldvalue('heightscale',1);
     65        node["maskColor"] = options.getfieldvalue('innermaskcolor',[0.0,0.0,1.0,1.0]);
    6366       
    6467        switch(datatype){
  • issm/trunk-jpl/src/m/plot/webgl.js

    r19918 r19919  
    5151        var mc = new Hammer.Manager(canvas);
    5252
    53     mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
    54     mc.add(new Hammer.Pinch({ threshold: 0})).recognizeWith(mc.get('pan'));
     53    mc.add(new Hammer.Pan({threshold:0, pointers:0}));
     54    mc.add(new Hammer.Pinch({threshold:0})).recognizeWith(mc.get('pan'));
    5555
    5656    mc.on("panstart panmove", function (ev) {onPan(ev,canvas);});
     
    124124                overlay:false,
    125125                drawOrder:0,
     126                maskEnabled:false,
     127                maskHeight:150.0,
     128                maskColor:vec4.fromValues(0.0, 0.0, 1.0, 1.0),
    126129        };
    127130} //}}}
     
    194197                '',
    195198                'varying vec2 vTextureCoord;',
     199                'varying float vZCoord;',
    196200                '',
    197201                'void main(void) {',
    198202                '       gl_Position = uMVPMatrix * vec4(aVertexPosition.xyz, 1.0);',
    199203                '       vTextureCoord = aTextureCoord;',
     204                '       vZCoord = aVertexPosition.z;',
    200205                '}'].join('\n');
    201206        shaders["unlit_textured"]["fsh"]["string"] =
     
    203208                '',
    204209                'varying vec2 vTextureCoord;',
     210                'varying float vZCoord;',
    205211                '',
    206212                'uniform sampler2D uColorSampler;',
    207213                'uniform float uAlpha;',
     214                'uniform bool uMaskEnabled;',
     215                'uniform float uMaskHeight;',
     216                'uniform vec4 uMaskColor;',
    208217                '',
    209218                'void main(void) {',
    210                 '       gl_FragColor = vec4(texture2D(uColorSampler, vec2(vTextureCoord.s, vTextureCoord.t)).rgb, uAlpha);',
     219                '       if (uMaskEnabled && (vZCoord < uMaskHeight)) {',
     220                '               gl_FragColor = uMaskColor;',
     221                '       }',
     222                '       else {',
     223                '               gl_FragColor = vec4(texture2D(uColorSampler, vec2(vTextureCoord.s, vTextureCoord.t)).rgb, uAlpha);',
     224                '       }',
    211225                '}'].join('\n');
    212226        shaderNames.forEach(function(shaderName){
     
    290304                canvas.lastDeltaY = 0;
    291305        }
    292         // if single finger/pan without modifier key, rotate around center
    293         //canvas.translation[0] += (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * canvas.zoomFactor * 2;
    294         //canvas.translation[1] -= (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * canvas.zoomFactor * 2;
    295         // else if double finger/pan with modifier key, move camera center
    296         canvas.rotation[0] += degrees((canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * canvas.zoomFactor * 2);
    297         canvas.rotation[1] += degrees((canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * canvas.zoomFactor * 2);
    298        
    299         if (canvas.rotation[0] > 360) {canvas.rotation[0] -= 360};
    300         if (canvas.rotation[0] < 0) {canvas.rotation[0] += 360};
    301         if (canvas.rotation[1] > 180) {canvas.rotation[1] -= 360};
    302         if (canvas.rotation[1] < -180) {canvas.rotation[1] += 360};
    303        
    304         canvas.rotation[0] = clamp(canvas.rotation[0], canvas.rotationAzimuthBounds[0], canvas.rotationAzimuthBounds[1]);
    305         canvas.rotation[1] = clamp(canvas.rotation[1], canvas.rotationElevationBounds[0], canvas.rotationElevationBounds[1])
    306        
     306        if (ev.srcEvent.shiftKey || ev.pointers.length == 2) {
     307                var deltaX = (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * canvas.zoomFactor * 2;
     308                var deltaY = (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * canvas.zoomFactor * 2;
     309               
     310                canvas.translation[0] += Math.cos(radians(canvas.rotation[0])) * deltaX - Math.sin(radians(canvas.rotation[0])) * deltaY;
     311                //console.log(Math.cos(radians(canvas.rotation[0])) * deltaX, Math.sin(radians(canvas.rotation[0])) * deltaY);
     312                canvas.translation[1] += Math.sin(radians(canvas.rotation[0])) * deltaX + Math.cos(radians(canvas.rotation[0])) * deltaY;
     313        }
     314        else {
     315                canvas.rotation[0] += degrees((canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * canvas.zoomFactor * 2);
     316                canvas.rotation[1] += degrees((canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * canvas.zoomFactor * 2);
     317               
     318                if (canvas.rotation[0] > 360) {canvas.rotation[0] -= 360};
     319                if (canvas.rotation[0] < 0) {canvas.rotation[0] += 360};
     320                if (canvas.rotation[1] > 180) {canvas.rotation[1] -= 360};
     321                if (canvas.rotation[1] < -180) {canvas.rotation[1] += 360};
     322               
     323                canvas.rotation[0] = clamp(canvas.rotation[0], canvas.rotationAzimuthBounds[0], canvas.rotationAzimuthBounds[1]);
     324                canvas.rotation[1] = clamp(canvas.rotation[1], canvas.rotationElevationBounds[0], canvas.rotationElevationBounds[1])
     325        }
    307326        canvas.lastDeltaX = ev.deltaX;
    308327        canvas.lastDeltaY = ev.deltaY;
     
    329348//{{{ Drawing Functions
    330349function updateCameraMatrix(canvas) { //{{{
    331         //Update view matrix and multiply with projection matrix to get the view-projection (camera) matrix.
     350    //Update view matrix and multiply with projection matrix to get the view-projection (camera) matrix.
    332351        var vMatrix = mat4.create();
    333352        var pMatrix = mat4.create();
     353        var translateMatrix = mat4.create();
    334354        var rotationMatrix = mat4.create();
    335355        var azimuthRotationMatrix = mat4.create();
     
    337357
    338358        mat4.perspective(pMatrix, 90 * Math.PI / 180, canvas.clientWidth / canvas.clientHeight, 0.001, 10000.0);
     359       
     360        //Apply worldspace translation
     361        mat4.translate(translateMatrix, translateMatrix, [canvas.translation[0], 0.0, canvas.translation[1]]);
     362        mat4.multiply(vMatrix, translateMatrix, vMatrix);
    339363       
    340364        //Calculate rotation around camera focal point about worldspace origin
     
    346370        mat4.multiply(vMatrix, rotationMatrix, vMatrix);
    347371       
    348         //Apply screenspace relative translation
    349         var translateMatrix = mat4.create();
    350         mat4.translate(translateMatrix, translateMatrix, [canvas.translation[0], canvas.translation[1], canvas.zoomFactor]);
     372        //Apply screenspace translation
     373        mat4.identity(translateMatrix);
     374        mat4.translate(translateMatrix, translateMatrix, [0.0, 0.0, canvas.zoomFactor]);
    351375        mat4.multiply(vMatrix, translateMatrix, vMatrix);
    352376
     
    371395        gl.uniformMatrix4fv(node["shader"]["uMVPMatrix"], false, mvpMatrix);
    372396        gl.uniform1f(node["shader"]["uAlpha"], node["alpha"]);
     397        gl.uniform1i(node["shader"]["uMaskEnabled"], node["maskEnabled"]);
     398        gl.uniform1f(node["shader"]["uMaskHeight"], node["maskHeight"]);
     399        gl.uniform4fv(node["shader"]["uMaskColor"], node["maskColor"]);
    373400        if (node["texture"]) {
    374401                gl.activeTexture(gl.TEXTURE0);
Note: See TracChangeset for help on using the changeset viewer.