Changeset 19864 for issm/trunk-jpl/src/m/plot/webgl.js

Timestamp:

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

Author:

dlcheng

Message:

ADD: javascript: plot_overlay functionality.

File:

• issm/trunk-jpl/src/m/plot/webgl.js (modified) (9 diffs)

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]);
+        }
 } //}}}
 //}}}