Changeset 21205


Ignore:
Timestamp:
09/13/16 14:25:35 (9 years ago)
Author:
dlcheng
Message:

CHG (JS): Updating webgl plotting routines for multiple canvas compatibility.

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

Legend:

Unmodified
Added
Removed

  • issm/trunk-jpl/src/m/plot/applyoptions.js

    r21173 r21205  
    360360                if (options.getfieldvalue('render',[]).indexOf('sky')!=-1) {   
    361361                        //atmosphere
    362                         var node = Node(gl,options);
     362                        var node = Node(gl);
    363363                        canvas.nodes[canvas.nodes.length] = node;
    364364                        node["name"] = "atmosphere";
    … …  
    369369                        node["mesh"] = GL.Mesh.icosahedron({size:6371000*atmosphereScale,subdivisions:6});
    370370                        node["useIndexBuffer"] = false;
    371                         node["rotation"] = [0, 0, 0]
     371                        node["rotation"] = [0, 0, 0];
    372372                        node["translation"] = translation;
    373373                        node["center"] = [0, 0, 0];
    … …  
    376376                if (options.getfieldvalue('render',[]).indexOf('space')!=-1) { 
    377377                        //skysphere
    378                         node = Node(gl,options);
     378                        node = Node(gl);
    379379                        canvas.nodes[canvas.nodes.length] = node;
    380380                        node["name"] = "skysphere";
    … …  
    386386                        node["texture"] = initTexture(gl,'../../../js/textures/TychoSkymapII_t4_2k.jpg');
    387387                        node["useIndexBuffer"] = false;
    388                         node["rotation"] = [0, 0, 0]
     388                        node["rotation"] = [0, 0, 0];
    389389                        node["translation"] = translation;
    390390                        node["center"] = [0, 0, 0];

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

    r21173 r21205  
    5959        //Compute gl variables:
    6060        var gl = canvas.gl;
    61         var node = Node(gl,options);
     61        gl.makeCurrent();
     62        var node = Node(gl);
    6263        canvas.nodes[canvas.nodes.length] = node;
    6364        node["name"] = "mesh";
    … …  
    135136        }
    136137        //}}}
    137         node["mesh"] = GL.Mesh.load({vertices:vertices, colors:colors, indices:indices});
     138        node["mesh"] = GL.Mesh.load({vertices:vertices, colors:colors, indices:indices}, null, null, gl);
    138139}

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

    r21173 r21205  
    5959        //Compute gl variables:
    6060        var gl = canvas.gl;
    61         var node = Node(gl,options);
     61        var node = Node(gl);
    6262        canvas.nodes[canvas.nodes.length] = node;
    6363        node["name"] = "overlay";
    … …  
    159159                indices[indices.length] = element[2];
    160160        }
    161         node["mesh"] = GL.Mesh.load({vertices:vertices, coords:texcoords, indices:indices});
     161        node["mesh"] = GL.Mesh.load({vertices:vertices, coords:texcoords, indices:indices}, null, null, gl);
    162162}

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

    r21173 r21205  
    6161        //Compute gl variables:
    6262        var gl = canvas.gl;
    63         var node = Node(gl,options);
     63        var node = Node(gl);
    6464        canvas.nodes[canvas.nodes.length] = node;
    6565        node["name"] = "quiver";
    … …  
    134134        }
    135135        //}}}
    136         node["mesh"] = GL.Mesh.load({vertices:vertices, colors:colors});
     136        node["mesh"] = GL.Mesh.load({vertices:vertices, colors:colors}, null, null, gl);
    137137}

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

    r21173 r21205  
    6161        //Compute gl variables:
    6262        var gl = canvas.gl;
    63         var node = Node(gl,options);
     63        var node = Node(gl);
    6464        canvas.nodes[canvas.nodes.length] = node;
    6565        node["name"] = "unit";
    … …  
    117117                                                vertices[vindex++] = vertex[2];
    118118                                               
    119                                                 texcoords[tindex++] = 0.0;
     119                                                texcoords[tindex++] = 0.5;
    120120                                                texcoords[tindex++] = 0.0;
    121121                                                continue;
    122122                                        }
     123
    123124                                        //Scale vertices
    124125                                        xyz = vec3.fromValues(x[i], y[i], z[i]);
    … …  
    131132
    132133                                        texcoords[tindex++] = 0.5;
    133                                         texcoords[tindex++] = (data[i] - datamin) / datadelta;
     134                                        texcoords[tindex++] = clamp((data[i] - datamin) / datadelta, 0.0, 1.0);
     135                                       
    134136                                }
    135137
    … …  
    205207                                        for(var j = 0, index = 0; j < x.length; j++){
    206208                                                texcoords[i][index++] = 0.5;
    207                                                 texcoords[i][index++] = (data[i][j] - datamin) / datadelta;
     209                                                texcoords[i][index++] = clamp((data[i][j] - datamin) / datadelta, 0.0, 1.0);
    208210                                        }
    209211                                }
    … …  
    248250                                }
    249251                        }
    250                         node["mesh"] = GL.Mesh.load({vertices:vertices, coords:texcoords[0], indices:indices});
     252                        node["mesh"] = GL.Mesh.load({vertices:vertices, coords:texcoords[0], indices:indices}, null, null, gl);
    251253                        break;
    252254                //}}}

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

    r21173 r21205  
    11/*This is where we have all our webgl relevant functionality for the plotting routines: */
    2        
     2
    33//{{{ Canvas Initialization
    44function initCanvas(options) {
    … …  
    77        //var canvas = document.getElementById(options.getfieldvalue('canvasid'));
    88        if (!canvas.initialized) {
     9                typedArraySliceSupport();
    910                canvas.gl = initWebGL(canvas,options);
    1011                canvas.nodes = [];
    … …  
    1819        var gl;
    1920        try {
    20                 if (!canvas.gl) gl = GL.create({canvas:canvas});
    21                 else gl = canvas.gl;
     21                if (!canvas.gl) {
     22                        gl = GL.create({canvas:canvas});
     23                }
     24                else {
     25                        gl = canvas.gl;
     26                }
    2227        }
    2328        catch(e) {
    … …  
    2530                return;
    2631        }
    27 
     32       
    2833        // Enable depth testing
    2934        gl.enable(gl.DEPTH_TEST);
    … …  
    4550        canvas.zoom = clamp(options.getfieldvalue('zoom',1.0), canvas.zoomBounds[0], canvas.zoomBounds[1]);
    4651        canvas.zoomLast = canvas.zoom;
     52        canvas.cameraPosition = vec3.create();
    4753        canvas.cameraMatrix = mat4.create();
    4854        canvas.vInverseMatrix = mat4.create();
    49         canvas.translation = options.getfieldvalue('origin',[0,0,0.0]);
    50         canvas.viewPanning = options.getfieldvalue('viewpanning','off') == 'on';
     55        canvas.translation = options.getfieldvalue('origin',[0,0,0]);
     56        canvas.viewPanning = options.getfieldvalue('enablepanning','off') == 'on';
    5157        canvas.view = options.getfieldvalue('view',[0,90]); //0 azimuth - up is north, 90 elevation - looking straight down
    5258        canvas.rotation = canvas.view;
    … …  
    6874        var mc = new Hammer.Manager(canvas);
    6975       
     76        mc.add(new Hammer.Tap());
    7077    mc.add(new Hammer.Pan({threshold:0, pointers:0}));
    7178    mc.add(new Hammer.Pinch({threshold:0})).recognizeWith(mc.get('pan'));
     79        mc.on("tap", function (ev) {onTap(ev,canvas);});
    7280    mc.on("panstart panmove", function (ev) {onPan(ev,canvas,displayview);});
    7381    mc.on("pinchstart pinchmove", function (ev) {onPinch(ev,canvas,displayview);});
    74         //mc.on("mousewheel DOMMouseScroll", function (ev) {onZoom(ev,canvas,options);});
    7582       
    7683        canvas.addEventListener("mousewheel", function (ev) {onZoom(ev,canvas,displayzoom)}, false);
    … …  
    8087} //}}}
    8188function initTexture(gl,imageSource) { //{{{
    82         return GL.Texture.fromURL(imageSource, {minFilter:gl.LINEAR_MIPMAP_LINEAR, magFilter:gl.LINEAR});
    83 } //}}}
    84 function Node(gl,options) { //{{{
     89        return GL.Texture.fromURL(imageSource, {minFilter:gl.LINEAR_MIPMAP_LINEAR, magFilter:gl.LINEAR}, null, gl);
     90} //}}}
     91function Node(gl) { //{{{
    8592        //Returns a Node object that contains default display states for webgl object. center represents pivot point of rotation.
    8693        return {
     94                alpha:1.0,
    8795                buffers:[],
     96                cullFace:gl.FRONT,
     97                disableDepthTest:false,
     98                drawMode:gl.TRIANGLES,
     99                drawOrder:0,
     100                enabled:true,
     101                enableCullFace:false,
     102                hideOcean:false,
     103                lineWidth:1.0,
     104                maskEnabled:false,
     105                maskHeight:150.0,
     106                maskColor:vec4.fromValues(0.0, 0.0, 1.0, 1.0),
     107                mesh:null,
    88108                name:"node",
     109                shaderName:"Colored",
    89110                shader:gl.shaders["Colored"],
    90                 draw:null,
    91                 hideOcean:false,
    92                 level:0,
     111                texture:null,
    93112                useIndexBuffer:true,
    94                 alpha:1.0,
    95                 lineWidth:1.0,
    96                 disableDepthTest:false,
    97                 enableCullFace:false,
    98                 cullFace:gl.FRONT,
    99                 drawMode:gl.TRIANGLES,
    100                 texture:null,
     113                center:vec3.create(),
    101114                scale:vec3.fromValues(1, 1, 1),
    102115                rotation:vec3.create(),
    103116                translation:vec3.create(),
    104                 center:vec3.create(),
    105                 modelMatrix:mat4.create(),
    106                 shaderName:"Colored",
    107                 drawOrder:0,
    108                 maskEnabled:false,
    109                 maskHeight:150.0,
    110                 maskColor:vec4.fromValues(0.0, 0.0, 1.0, 1.0),
    111                 enabled:true
     117                modelMatrix:mat4.create()
    112118        };
    113119} //}}}
    114 function displayNodes() {
    115         var nodes = $('.sim-canvas')[0].nodes;
    116         console.log("Nodes:");
     120function debugNodes(canvasid) {
     121        var nodes = $(canvasid)[0].nodes;
     122        console.log(canvasid, "Nodes:");
    117123        for (var node in nodes) {
    118124                console.log("name", nodes[node]["name"], "translation", nodes[node]["translation"], "center", nodes[node]["center"], "rotation", nodes[node]["rotation"]);
    119125        }
     126        return nodes;
    120127}
    121128function recalculateModelMatrix(node) { //{{{
    122         //TODO: move to 0,0,0, rotate,move back to normal space, then apply transform
    123129        var modelMatrix = mat4.create();
    124130
    … …  
    145151        mat4.multiply(modelMatrix, translationMatrix, modelMatrix);
    146152       
    147         // mat4.identity(translationMatrix);
    148         // mat4.translate(translationMatrix, translationMatrix, [-node["translation"][0],-node["translation"][1],-node["translation"][2]]); //absolute translation
    149         // mat4.multiply(modelMatrix, translationMatrix, modelMatrix);
    150        
    151153        mat4.identity(translationMatrix);
    152154        mat4.translate(translationMatrix, translationMatrix, node["translation"]); //absolute translation
    … …  
    154156        return modelMatrix;
    155157} //}}}
     158function raycast(canvas,mesh,x,y) { //{{{
     159        var raytracer = new GL.Raytracer(canvas.cameraMatrix);
     160        var ray = raytracer.getRayForPixel(x, y);
     161        if(!mesh || mesh.ready == false) return;
     162        if(!mesh.octree) mesh.octree = new GL.Octree(mesh);
     163
     164        var hit = mesh.octree.testRay(canvas.cameraPosition, ray, 1e2, 1e10);
     165       
     166        if(!hit) return;
     167        return hit.pos;
     168}
    156169function radians (degrees) { //{{{
    157170  return degrees * Math.PI / 180;
    … …  
    170183        return defaultvalue;
    171184} //}}}
     185function typedArraySliceSupport() { //{{{
     186        //TypedArray compatibility for Safari/IE
     187        if (typeof Int8Array !== 'undefined') {
     188                if (!Int8Array.prototype.fill) Int8Array.prototype.fill = Array.prototype.fill;
     189                if (!Int8Array.prototype.slice) Int8Array.prototype.slice = Array.prototype.slice;
     190        }
     191        if (typeof Uint8Array !== 'undefined') {
     192                if (!Uint8Array.prototype.fill) Uint8Array.prototype.fill = Array.prototype.fill;
     193                if (!Uint8Array.prototype.slice) Uint8Array.prototype.slice = Array.prototype.slice;
     194        }
     195        if (typeof Uint8ClampedArray !== 'undefined') {
     196                if (!Uint8ClampedArray.prototype.fill) Uint8ClampedArray.prototype.fill = Array.prototype.fill;
     197                if (!Uint8ClampedArray.prototype.slice) Uint8ClampedArray.prototype.slice = Array.prototype.slice;
     198        }
     199        if (typeof Int16Array !== 'undefined') {
     200                if (!Int16Array.prototype.fill) Int16Array.prototype.fill = Array.prototype.fill;
     201                if (!Int16Array.prototype.slice) Int16Array.prototype.slice = Array.prototype.slice;
     202        }
     203        if (typeof Uint16Array !== 'undefined') {
     204                if (!Uint16Array.prototype.fill) Uint16Array.prototype.fill = Array.prototype.fill;
     205                if (!Uint16Array.prototype.slice) Uint16Array.prototype.slice = Array.prototype.slice;
     206        }
     207        if (typeof Int32Array !== 'undefined') {
     208                if (!Int32Array.prototype.fill) Int32Array.prototype.fill = Array.prototype.fill;
     209                if (!Int32Array.prototype.slice) Int32Array.prototype.slice = Array.prototype.slice;
     210        }
     211        if (typeof Uint32Array !== 'undefined') {
     212                if (!Uint32Array.prototype.fill) Uint32Array.prototype.fill = Array.prototype.fill;
     213                if (!Uint32Array.prototype.slice) Uint32Array.prototype.slice = Array.prototype.slice;
     214        }
     215        if (typeof Float32Array !== 'undefined') {
     216                if (!Float32Array.prototype.fill) Float32Array.prototype.fill = Array.prototype.fill;
     217                if (!Float32Array.prototype.slice) Float32Array.prototype.slice = Array.prototype.slice;
     218        }
     219        if (typeof Float64Array !== 'undefined') {
     220                if (!Float64Array.prototype.fill) Float64Array.prototype.fill = Array.prototype.fill;
     221                if (!Float64Array.prototype.slice) Float64Array.prototype.slice = Array.prototype.slice;
     222        }
     223        if (typeof TypedArray !== 'undefined') {
     224                if (!TypedArray.prototype.fill) TypedArray.prototype.fill = Array.prototype.fill;
     225                if (!TypedArray.prototype.slice) TypedArray.prototype.slice = Array.prototype.slice;
     226        }
     227} //}}}
    172228//}}}
    173229//{{{ Shader Loading
    174230function loadShaders(gl) { //{{{
    175         shaders = {};
    176         shaders["Colored"] = new Shader.fromURL("../../../js/shaders/Colored.vsh", "../../../js/shaders/Colored.fsh");
    177         shaders["Textured"] = new Shader.fromURL("../../../js/shaders/Textured.vsh", "../../../js/shaders/Textured.fsh");
    178         shaders["SkyFromSpace"] = new Shader.fromURL("../../../js/shaders/SkyFromSpace.vert", "../../../js/shaders/SkyFromSpace.frag");
    179         shaders["GroundFromSpace"] = new Shader.fromURL("../../../js/shaders/GroundFromSpace.vert", "../../../js/shaders/GroundFromSpace.frag");
     231        var shaders = {};
     232        shaders["Colored"] = new GL.Shader.fromURL("../../../js/shaders/Colored.vsh", "../../../js/shaders/Colored.fsh", null, gl);
     233        shaders["Textured"] = new GL.Shader.fromURL("../../../js/shaders/Textured.vsh", "../../../js/shaders/Textured.fsh", null, gl);
     234        shaders["SkyFromSpace"] = new GL.Shader.fromURL("../../../js/shaders/SkyFromSpace.vert", "../../../js/shaders/SkyFromSpace.frag", null, gl);
     235        shaders["GroundFromSpace"] = new GL.Shader.fromURL("../../../js/shaders/GroundFromSpace.vert", "../../../js/shaders/GroundFromSpace.frag", null, gl);
    180236        return shaders;
    181237} //}}}
    182238//{{{ Interface Functions
     239function onTap(ev,canvas) { //{{{
     240        ev.preventDefault();
     241        if (ev.type == 'panstart') {
     242                canvas.lastDeltaX = 0;
     243                canvas.lastDeltaY = 0;
     244        }
     245}
    183246function onPan(ev,canvas,displaylog) { //{{{
    184247        ev.preventDefault();
    … …  
    189252        if (ev.srcEvent.shiftKey || ev.pointers.length == 2) {
    190253                if (!canvas.viewPanning) return;
    191                 var deltaX = (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth / canvas.zoom * -2 * canvas.controlSensitivity * 6371000.0;
    192                 var deltaY = (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight / canvas.zoom * -2 * canvas.controlSensitivity * 6371000.0;
     254                var deltaX = (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth / canvas.zoom * 2 * canvas.controlSensitivity * 6.371e6;
     255                var deltaY = (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight / canvas.zoom * 2 * canvas.controlSensitivity * 6.371e6;
    193256               
    194257                if (canvas.twod) {
    … …  
    229292function onZoom(ev,canvas,displaylog) { //{{{
    230293        ev.preventDefault();
    231         var delta = clamp(ev.scale || ev.wheelDelta || -ev.detail, -1, 1) * canvas.controlSensitivity * canvas.zoom / 10;
     294        var delta = clamp(ev.scale || ev.wheelDelta || -ev.detail, -1, 1) * canvas.controlSensitivity * canvas.zoom / 20;
    232295        modifyZoom(canvas.zoom + delta, canvas, displaylog);
    233296} //}}}
    … …  
    247310        var elevationRotationMatrix = mat4.create();
    248311        var aspectRatio = canvas.clientWidth / canvas.clientHeight;
     312        var cameraPosition = vec3.create();
    249313
    250314        if (canvas.twod) {
    251                 mat4.ortho(pMatrix, -aspectRatio*6371000.0/canvas.zoom, aspectRatio*6371000.0/canvas.zoom, -6371000.0/canvas.zoom, 6371000.0/canvas.zoom, -1.0, 10000000000.0);
     315                mat4.ortho(pMatrix, -aspectRatio*6.371e6/canvas.zoom, aspectRatio*6.371e6/canvas.zoom, -6.371e6/canvas.zoom, 6.371e6/canvas.zoom, -1.0, 1e10);
    252316        }
    253317        else {
    254                 mat4.perspective(pMatrix, 60 * Math.PI / 180, aspectRatio, 100, 1000000000.0);
     318                mat4.perspective(pMatrix, 60 * Math.PI / 180, aspectRatio, 1e2, 1e10);
    255319        }
    256320       
    … …  
    276340        //Apply screenspace translation
    277341        mat4.identity(translateMatrix);
    278         mat4.translate(translateMatrix, translateMatrix, [0.0, 0.0, -6371000.0/canvas.zoom]);
     342        mat4.translate(translateMatrix, translateMatrix, [0.0, 0.0, -6.371e6/canvas.zoom]);
    279343        mat4.multiply(vMatrix, translateMatrix, vMatrix);
    280344       
    281         //Calculate inverse matrices for lighting
     345        //Calculate fields for lighting and raycasts
    282346        mat4.invert(canvas.vInverseMatrix, vMatrix);
     347        vec3.transformMat4(canvas.cameraPosition, cameraPosition, canvas.vInverseMatrix);
    283348
    284349        //Apply projection matrix to get camera matrix
    … …  
    287352function drawSceneGraphNode(canvas,node) { //{{{
    288353        if (!node["enabled"]) return;
     354
     355        var gl = canvas.gl;
     356        gl.makeCurrent();
    289357       
    290358        var mvpMatrix = mat4.create();
    … …  
    302370        var origin = vec3.fromValues(0, 0, 0);
    303371        var lightOrigin = vec3.fromValues(0, 0, 0);
    304         var cameraPosition = vec3.create();
     372        var cameraPositionRelative = vec3.create();
    305373        vec3.transformMat4(origin, origin, canvas.vInverseMatrix);
    306374        vec3.normalize(lightOrigin, lightOrigin);
    307         vec3.sub(cameraPosition, origin, node["translation"]);
    308         cameraHeight = vec3.length(cameraPosition);
     375        vec3.sub(cameraPositionRelative, origin, node["translation"]);
     376        cameraHeight = vec3.length(cameraPositionRelative);
    309377       
    310378        var atm = {                                                     //Default Values
    … …  
    328396                       
    329397        var inv_wavelength4 = [1.0 / Math.pow(atm.wavelength_r, 4), 1.0 / Math.pow(atm.wavelength_g, 4), 1.0 / Math.pow(atm.wavelength_b, 4)];
    330         var innerRadius = 6371000.0;
     398        var innerRadius = 6.371e6;
    331399        var outerRadius = innerRadius*atm.scale;
    332400        var scale = 1.0 / (outerRadius - innerRadius);
    … …  
    374442} //}}}
    375443function draw(canvas,options) { //{{{
     444
    376445        // Ensure canvas and gl viewport sizes are the same
    377446        if (canvas.width  != canvas.clientWidth || canvas.height != canvas.clientHeight) {
    … …  
    389458        }
    390459        for (var node in nodes) {
    391                 if (nodes[node]["texture"] && nodes[node]["texture"]["ready"] == false) {
     460                if (nodes[node]["texture"] && nodes[node]["texture"]["ready"] == false || nodes[node]["shader"]["ready"] == false) {
    392461                        canvas.drawHandler = window.requestAnimationFrame(function(time) {draw(canvas,options)});
    393462                        return;
    … …  
    398467        gl.clearColor(canvas.backgroundcolor[0], canvas.backgroundcolor[1], canvas.backgroundcolor[2], canvas.backgroundcolor[3]);
    399468        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
     469        gl.makeCurrent();
    400470       
    401471        updateCameraMatrix(canvas);
    … …  
    407477                }
    408478        }
     479
    409480        canvas.drawHandler = window.requestAnimationFrame(function(time) {draw(canvas,options)});
    410481} //}}}
Note: See TracChangeset for help on using the changeset viewer.