Changeset 19864

Timestamp:

12/07/15 23:23:47 (9 years ago)

Author:

dlcheng

Message:

ADD: javascript: plot_overlay functionality.

Location:

issm/trunk-jpl/src/m/plot

Files:

• plot_manager.js (modified) (4 diffs)
• plot_overlay.js (added)
• plot_unit.js (modified) (1 diff)
• webgl.js (modified) (9 diffs)

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

@@ -29 +29 @@
         
         //Initialize the buffer structure: 
-        var node = Node(gl,options);
+        var nodes = {};
+        nodes["main"] = Node(gl,options);
         
         //figure out if this is a special plot
@@ -95 +96 @@
                         case 'mesh':
                                 //plot_mesh(md,options,nlines,ncols,i);
-                                plot_mesh(md,options,canvas,gl,node);
+                                plot_mesh(md,options,canvas,gl,nodes["main"]);
                                 break;
                         case 'none':
@@ -187 +188 @@
 
         //Figure out if this is a semi-transparent plot.
-        if (options.exist('overlay')){
-                plot_overlay(md,data,options,nlines,ncols,i);
-                return;
+        if (options.getfieldvalue('overlay','off')=='on'){
+                nodes["overlay"] = Node(gl,options);
+                plot_overlay(md,data,options,canvas,gl,nodes["overlay"]);
         }
 
@@ -218 +219 @@
         if (typeof data !== 'string'){
                 //plot unit
-                plot_unit(md,data,options,canvas,gl,node);
+                plot_unit(md,data,options,canvas,gl,nodes["main"]);
         }
 
         //applyoptions(md,data2,options); 
-        applyoptions(md,data,options,canvas,gl,node);
+        applyoptions(md,data,options,canvas,gl,nodes["main"]);
         
         /*Draw into the canvas:*/
-        draw(gl,options,canvas,node);
+        draw(gl,options,canvas,nodes);
 }

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

@@ -140 +140 @@
         /*Initalize buffers: */
         node["buffers"] = initBuffers(gl,[vertices, texcoords, indices]);
+        node["overlay"] = false;
 }

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

@@ -22 +22 @@
         // Clear the color as well as the depth buffer.
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        // Enable color blending/overlay
+        gl.enable(gl.BLEND);
 
         // Allocate arrays equal to maximium number of attributes used by any one shader
@@ -99 +101 @@
 } //}}}
 function Node(gl,options) { //{{{
-        
-        var node;
-
-        node= {buffers:[],
+        //Returns a Node object that contains default display states for webgl object
+        return {buffers:[],
                 shader:gl.shaders["unlit_textured"]["program"],
                 draw:null,
@@ -109 +109 @@
                 useIndexBuffer:true,
                 useOrthographic:false,
-                transparency:1.0,
+                alpha:1.0,
                 disableDepthTest:false, 
                 enableCullFace:false,
@@ -120 +120 @@
                 modelMatrix:mat4.create(),
                 shaderName:"unlit_textured",
+                overlay:false,
         };
-        
-        return node;
-
 } //}}}
 function recalculateModelMatrix(node) { //{{{
@@ -210 +208 @@
                 '',
                 'uniform sampler2D uColorSampler;',
+                'uniform float uAlpha;',
                 '',
                 'void main(void) {',
-                '       gl_FragColor = texture2D(uColorSampler, vec2(vTextureCoord.s, vTextureCoord.t));',
+                '       gl_FragColor = vec4(texture2D(uColorSampler, vec2(vTextureCoord.s, vTextureCoord.t)).rgb, uAlpha);',
                 '}'].join('\n');
         shaderNames.forEach(function(shaderName){
@@ -323 +322 @@
         }
         gl.uniformMatrix4fv(node["shader"]["uMVPMatrix"], false, mvpMatrix);
-        gl.uniform1f(node["shader"]["uAlpha"], node["transparency"]);
+        gl.uniform1f(node["shader"]["uAlpha"], node["alpha"]);
         if (node["texture"]) {
                 gl.activeTexture(gl.TEXTURE0);
@@ -329 +328 @@
                 gl.uniform1i(node["shader"]["uColorSampler"], 0);       
         }
-        if  (node["useIndexBuffer"]) {
+        if (node["overlay"] == true) {
+                gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
+        }
+        else {
+                gl.blendFunc (gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        }
+        if  (node["useIndexBuffer"] == true) {
                 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, node["buffers"][node["buffers"].length - 1]);
                 gl.drawElements(node["drawMode"], node["buffers"][node["buffers"].length - 1].numItems, gl.UNSIGNED_SHORT, 0);
@@ -350 +355 @@
         }
 } //}}}
-function draw(gl,options,canvas,node) { //{{{
+function draw(gl,options,canvas,nodes) { //{{{
 
         // Set clear color to black, fully opaque
@@ -358 +363 @@
         }
         else throw Error(sprintf("s%s%s\n","initWebGL error message: cound not find out background color for curent canvas ",canvas));
-        
+                
         // Clear the color as well as the depth buffer.
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-        window.requestAnimationFrame(function(time) {draw(gl,options,canvas,node)});
+        window.requestAnimationFrame(function(time) {draw(gl,options,canvas,nodes)});
         updateCameraMatrix(canvas);
-
-        drawSceneGraphNode(gl, canvas, node);
+        for (var node in nodes) {
+                drawSceneGraphNode(gl, canvas, nodes[node]);
+        }
 } //}}}
 //}}}