Changeset 19853


Ignore:
Timestamp:
12/03/15 21:57:22 (9 years ago)
Author:
dlcheng
Message:

CHG: Refining js colorbar behavior to include smooth mesh color interpolation. Improved colorbar positioning.

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

Legend:

Unmodified
Added
Removed

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

    r19852 r19853  
    1 function applyoptions(md,data,options){
     1function applyoptions(md,data,options,canvas,gl,node){
    22        //APPLYOPTIONS - apply the options to current plot
    33        //
    … …  
    143143                        var color;
    144144                        var cheightoffset = options.getfieldvalue('colorbarfontsize',16);
    145                         var ccontext,ccanvas,ccanvasid;
     145                        var ccontext,ccanvas,ccanvasid,ccanvashtml;
    146146                        ccanvasid = options.getfieldvalue('colorbarcanvasid',options.getfieldvalue('canvasid')+'_colorbar');
    147147                        ccanvashtml = document.getElementById(ccanvasid);
    148                         if(ccanvashtml==null){
     148                        if (ccanvashtml==null) {
    149149                                ccanvas = $('<canvas id="'+ccanvasid+'" width="'+String(cwidth+cheightoffset*4)+'" height="'+String(cheight+cheightoffset)+'"></canvas>').insertAfter('#'+options.getfieldvalue('canvasid'));
    150150                                ccanvas.css({'position':'relative','top':((canvassize-cheight-cheightoffset)/-2).toFixed(2)+'px'});
    … …  
    159159                                        //get html object instead of jqurey object to modify height/width to accomodate labels
    160160                                        ccanvashtml.width = ccanvas.width()+cheightoffset*6;
    161                                         ccanvas.css({'display':'inline-block'});
    162                                         ccanvashtml.height = canvassize;
     161                                        ccanvashtml.height = cheight+cheightoffset;
    163162                                        ccanvashtml.cwidth = cwidth;
    164163                                        ccanvashtml.cheight = cheight;
    … …  
    175174                        }
    176175                        var cgradient = ccontext.createLinearGradient(0,cheightoffset/2,0,cheight);
     176                        var tgradient = ccontext.createLinearGradient(0,0,0,256);
     177                        var cmap = options.getfieldvalue('cmap','jet');
     178                        var colorbar = colorbars[cmap];
    177179                        for (var i = 0; i < colorbar.length; i++) {
    178180                                color = colorbar[colorbar.length-i-1];
    179181                                color = [Math.round(color[0]*255),Math.round(color[1]*255),Math.round(color[2]*255)];   
    180182                                cgradient.addColorStop(i/colorbar.length,'rgba('+color.toString()+',1.0)');
     183                                tgradient.addColorStop(i/colorbar.length,'rgba('+color.toString()+',1.0)');
    181184                        }
    182185                        ccontext.fillStyle=cgradient;
    183186                        ccontext.fillRect(0,cheightoffset/2,cwidth,cheight);
     187                        //Make texture canvas
     188                        var tcontext,tcanvas,tcanvasid,tcanvashtml,tURL;
     189                        tcanvasid = 'texturecanvas';
     190                        var tcanvashtml = document.getElementById(tcanvasid);
     191                        if (tcanvashtml == null) {
     192                                tcanvas = $('<canvas id="texturecanvas" width="256" height="256"></canvas>').insertAfter(ccanvas);
     193                                tcanvas.css({'display':'none'});
     194                                tcanvashtml = document.getElementById(tcanvasid);
     195                        }
     196                        else {
     197                                tcanvas = $('#' + tcanvasid);
     198                        }
     199                        tcontext = tcanvashtml.getContext('2d');
     200                        tcontext.fillStyle = tgradient;
     201                        tcontext.fillRect(0,0,256,256);
     202                        tURL = tcanvashtml.toDataURL();
     203                        node["texture"] = initTexture(gl,tURL);
    184204                        //Draw colorbar border
    185205                        ccontext.beginPath();

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

    r19844 r19853  
    2828        }
    2929       
     30        //Initialize the buffer structure:
     31        var node = Node(gl,options);
     32       
    3033        //figure out if this is a special plot
    3134        if (typeof data === 'string'){
    … …  
    9295                        case 'mesh':
    9396                                //plot_mesh(md,options,nlines,ncols,i);
    94                                 plot_mesh(md,options,canvas,gl);
     97                                plot_mesh(md,options,canvas,gl,node);
    9598                                break;
    9699                        case 'none':
    … …  
    215218        if (typeof data !== 'string'){
    216219                //plot unit
    217                 plot_unit(md,data,options,canvas,gl);
     220                plot_unit(md,data,options,canvas,gl,node);
    218221        }
    219222
    220223        //applyoptions(md,data2,options);
    221         applyoptions(md,data,options);
     224        applyoptions(md,data,options,canvas,gl,node);
     225       
     226        /*Draw into the canvas:*/
     227        draw(gl,options,canvas,node);
    222228}

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

    r19779 r19853  
    1 function plot_mesh(md,options,canvas,gl) {
     1function plot_mesh(md,options,canvas,gl,node) {
    22        //   Usage:
    33        //      plot_mesh(md,options,canvas,gl);
    … …  
    66
    77        //declare variables:  {{{
    8         var node;
    98        var vertices = [];
    109        var indices = [];
    … …  
    2221        //}}}
    2322
    24         //Initialize the buffer structure:
    25         node = Node(gl,options);
    26 
    2723        //Compute coordinates and data range:
    2824        xmin = ArrayMin(x);
    … …  
    3531        //Compute scaling:
    3632        var scale = 1 / (xmax - xmin);
     33        node["shaderName"] = "colored";
    3734        node["scale"] = [scale, scale, scale];
    3835        node["translation"] = [(xmin + xmax) / (-2 / scale), (ymin + ymax) / (-2 / scale), (zmin + zmax) / (-2 / scale)];
    … …  
    107104        node["arrays"] = [vertices, colors, indices];
    108105        node["buffers"] = initBuffers(gl, node["arrays"]);
    109        
    110         /*Draw into the canvas:*/
    111         draw(gl,options,canvas,node);
    112106}

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

    r19845 r19853  
    1 function plot_unit(md,data,options,canvas,gl) {
     1function plot_unit(md,data,options,canvas,gl,node) {
    22        //PLOT_UNIT - unit plot, display data
    33        //
    … …  
    88
    99        //declare variables:  {{{
    10         var node;
    1110        var vertices = [];
    1211        var indices = [];
    13         var colors = [];
     12        var texcoords = [];
    1413        var rgbcolor = [];
    1514        var xmin,xmax;
    … …  
    3332        //}}}
    3433
    35         //Initialize the buffer structure:
    36         node = Node(gl,options);
    37 
    38 
    3934        //Compute coordinates and data range:
    4035        xmin = ArrayMin(x);
    … …  
    5550                               
    5651        //some defaults:
    57         colors.itemSize = 4;
     52        texcoords.itemSize = 2;
    5853
    5954        switch(datatype){
    … …  
    109104                                vertices.itemSize = 3;
    110105                                var cmap=options.getfieldvalue('cmap','jet');
    111                                 console.log(z[0]);
     106                               
    112107                                for(var i = 0; i < x.length; i++){
    113108                                        vertices[vertices.length] = x[i];
    … …  
    115110                                        vertices[vertices.length] = z[i];
    116111
    117                                         //handle mesh/qinterest size mismatch
    118                                         rgbcolor = rgb(data[i], datamin, datamax,cmap);
    119                                         colors[colors.length] = rgbcolor[0];
    120                                         colors[colors.length] = rgbcolor[1];
    121                                         colors[colors.length] = rgbcolor[2];
    122                                         colors[colors.length] = 1.0;
     112                                        texcoords[texcoords.length] = 0.5;
     113                                        texcoords[texcoords.length] = (data[i] - datamin) / (datamax - datamin);
    123114                                }
    124 
     115                               
    125116                                //linearize the elements array:
    126117                                indices = indices.concat.apply(indices, elements);
    … …  
    147138       
    148139        /*Initalize buffers: */
    149         node["buffers"] = initBuffers(gl,[vertices, colors, indices]);
    150        
    151         /*Draw into the canvas:*/
    152         draw(gl,options,canvas,node);
     140        node["buffers"] = initBuffers(gl,[vertices, texcoords, indices]);
    153141}

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

    r19839 r19853  
    6666        return bufferArray;
    6767} //}}}
     68function createSolidTexture(gl, r, g, b, a) {
     69    var data = new Uint8Array([r, g, b, a]);
     70    var texture = gl.createTexture();
     71    gl.bindTexture(gl.TEXTURE_2D, texture);
     72    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
     73    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
     74    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
     75        gl.bindTexture(gl.TEXTURE_2D, null);
     76    return texture;
     77}
     78function initTexture(gl,imageSource) { //{{{
     79        var texture = gl.createTexture();
     80        texture.image = new Image();
     81        texture.image.onload = function () {
     82                handleLoadedTexture(gl,texture);
     83        }
     84        texture.image.src = imageSource;
     85        texture.isLoaded = true;
     86        return texture;
     87} //}}}
     88function handleLoadedTexture(gl,texture) { //{{{
     89        gl.activeTexture(gl.TEXTURE0);
     90        gl.bindTexture(gl.TEXTURE_2D, texture);
     91        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
     92        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
     93        gl.generateMipmap(gl.TEXTURE_2D);
     94        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR);
     95        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
     96        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     97        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     98        gl.bindTexture(gl.TEXTURE_2D, null);
     99} //}}}
    68100function Node(gl,options) { //{{{
    69101       
    … …  
    71103
    72104        node= {buffers:[],
    73                 shader:gl.shaders["colored"]["program"],
     105                shader:gl.shaders["unlit_textured"]["program"],
    74106                draw:null,
    75107                hideOcean:false,
    … …  
    87119                scale:vec3.fromValues(1, 1, 1),
    88120                modelMatrix:mat4.create(),
    89                 shaderName:"colored",
     121                shaderName:"unlit_textured",
    90122        };
    91123       
    … …  
    120152        var normalizedValue;
    121153                                       
    122         colorbar=colorbars[cmap];
     154        var colorbar=colorbars[cmap];
    123155
    124156        value = clamp(value, min, max);
    … …  
    135167//{{{ Shader Loading
    136168function loadShaders(gl) { //{{{
    137         // TODO: Subsitute shaders["colored"] with shaderColored
    138         shaderName = "colored";
     169        var shaderNames = ["colored", "unlit_textured"];
    139170        shaders = {};
    140         shaders[shaderName] = {loaded:false, vsh:{}, fsh:{}};
     171        shaders["colored"] = {loaded:false, vsh:{}, fsh:{}};
    141172        shaders["colored"]["vsh"]["string"] =
    142173                ['attribute vec3 aVertexPosition;',
    … …  
    160191                '       gl_FragColor = vColor;',
    161192                '}'].join('\n');
    162 
    163         shaders[shaderName]["vsh"]["shader"] = getShaderByString(gl, shaders[shaderName]["vsh"]["string"], "vsh");
    164         shaders[shaderName]["fsh"]["shader"] = getShaderByString(gl, shaders[shaderName]["fsh"]["string"], "fsh");
    165 
    166         shaders[shaderName]["program"] = gl.createProgram();
    167         gl.attachShader(shaders[shaderName]["program"], shaders[shaderName]["vsh"]["shader"]);
    168         gl.attachShader(shaders[shaderName]["program"], shaders[shaderName]["fsh"]["shader"]);
    169         gl.linkProgram(shaders[shaderName]["program"]);
    170 
    171         if (!gl.getProgramParameter(shaders[shaderName]["program"], gl.LINK_STATUS)) {
    172                 alert("Could not initialise shaders");
    173         }
    174 
    175         var vshStringArray = shaders[shaderName]["vsh"]["string"].split("\n");
    176         var fshStringArray = shaders[shaderName]["fsh"]["string"].split("\n");
    177         var line = "";
    178         var property = "";
    179         for (var i = 0; i < vshStringArray.length; i++) {
    180                 line = vshStringArray[i];
    181                 if (line.search("attribute") != -1) {
    182                         property = nameFromLine(line);
    183                         shaders[shaderName]["program"][property] = gl.getAttribLocation(shaders[shaderName]["program"], property);
    184                 }
    185                 else if (line.search("uniform") != -1) {
    186                         property = nameFromLine(line);
    187                         shaders[shaderName]["program"][property] = gl.getUniformLocation(shaders[shaderName]["program"], property);
    188                 }
    189                 else if (line.search("void main") != -1) {
    190                         break;
    191                 }
    192         }
    193         for (var i = 0; i < fshStringArray.length; i++) {
    194                 line = fshStringArray[i];
    195                 if (line.search("uniform") != -1) {
    196                         property = nameFromLine(line);
    197                         shaders[shaderName]["program"][property] = gl.getUniformLocation(shaders[shaderName]["program"], property);
    198                 }
    199                 else if (line.search("void main") != -1) {
    200                         break;
    201                 }
    202         }
    203         shaders[shaderName]["loaded"] = true;
     193        shaders["unlit_textured"] = {loaded:false, vsh:{}, fsh:{}};
     194        shaders["unlit_textured"]["vsh"]["string"] =
     195                ['attribute vec3 aVertexPosition;',
     196                'attribute vec2 aTextureCoord;',
     197                '',
     198                'uniform mat4 uMVPMatrix;',
     199                '',
     200                'varying vec2 vTextureCoord;',
     201                '',
     202                'void main(void) {',
     203                '       gl_Position = uMVPMatrix * vec4(aVertexPosition.xyz, 1.0);',
     204                '       vTextureCoord = aTextureCoord;',
     205                '}'].join('\n');
     206        shaders["unlit_textured"]["fsh"]["string"] =
     207                ['precision mediump float;',
     208                '',
     209                'varying vec2 vTextureCoord;',
     210                '',
     211                'uniform sampler2D uColorSampler;',
     212                '',
     213                'void main(void) {',
     214                '       gl_FragColor = texture2D(uColorSampler, vec2(vTextureCoord.s, vTextureCoord.t));',
     215                '}'].join('\n');
     216        shaderNames.forEach(function(shaderName){
     217                shaders[shaderName]["vsh"]["shader"] = getShaderByString(gl, shaders[shaderName]["vsh"]["string"], "vsh");
     218                shaders[shaderName]["fsh"]["shader"] = getShaderByString(gl, shaders[shaderName]["fsh"]["string"], "fsh");
     219
     220                shaders[shaderName]["program"] = gl.createProgram();
     221                gl.attachShader(shaders[shaderName]["program"], shaders[shaderName]["vsh"]["shader"]);
     222                gl.attachShader(shaders[shaderName]["program"], shaders[shaderName]["fsh"]["shader"]);
     223                gl.linkProgram(shaders[shaderName]["program"]);
     224
     225                if (!gl.getProgramParameter(shaders[shaderName]["program"], gl.LINK_STATUS)) {
     226                        alert("Could not initialise shaders");
     227                }
     228
     229                var vshStringArray = shaders[shaderName]["vsh"]["string"].split("\n");
     230                var fshStringArray = shaders[shaderName]["fsh"]["string"].split("\n");
     231                var line = "";
     232                var property = "";
     233                for (var i = 0; i < vshStringArray.length; i++) {
     234                        line = vshStringArray[i];
     235                        if (line.search("attribute") != -1) {
     236                                property = nameFromLine(line);
     237                                shaders[shaderName]["program"][property] = gl.getAttribLocation(shaders[shaderName]["program"], property);
     238                        }
     239                        else if (line.search("uniform") != -1) {
     240                                property = nameFromLine(line);
     241                                shaders[shaderName]["program"][property] = gl.getUniformLocation(shaders[shaderName]["program"], property);
     242                        }
     243                        else if (line.search("void main") != -1) {
     244                                break;
     245                        }
     246                }
     247                for (var i = 0; i < fshStringArray.length; i++) {
     248                        line = fshStringArray[i];
     249                        if (line.search("uniform") != -1) {
     250                                property = nameFromLine(line);
     251                                shaders[shaderName]["program"][property] = gl.getUniformLocation(shaders[shaderName]["program"], property);
     252                        }
     253                        else if (line.search("void main") != -1) {
     254                                break;
     255                        }
     256                }
     257                shaders[shaderName]["loaded"] = true;
     258        });
    204259        return shaders;
    205260} //}}}
    … …  
    269324        gl.uniformMatrix4fv(node["shader"]["uMVPMatrix"], false, mvpMatrix);
    270325        gl.uniform1f(node["shader"]["uAlpha"], node["transparency"]);
     326        if (node["texture"]) {
     327                gl.activeTexture(gl.TEXTURE0);
     328                gl.bindTexture(gl.TEXTURE_2D, node["texture"]);
     329                gl.uniform1i(node["shader"]["uColorSampler"], 0);       
     330        }
    271331        if  (node["useIndexBuffer"]) {
    272332                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, node["buffers"][node["buffers"].length - 1]);
    … …  
    304364        window.requestAnimationFrame(function(time) {draw(gl,options,canvas,node)});
    305365        updateCameraMatrix(canvas);
     366
    306367        drawSceneGraphNode(gl, canvas, node);
    307 
    308368} //}}}
    309369//}}}
Note: See TracChangeset for help on using the changeset viewer.