Cloud Material

5 files changed, 89 insertions, 50 deletions

diff --git a/assets/shaders/Cloud.frag.glsl b/assets/shaders/Cloud.frag.glsl
index 522e17bb..b07bb627 100644
--- a/assets/shaders/Cloud.frag.glsl
+++ b/assets/shaders/Cloud.frag.glsl
@@ -12,12 +12,12 @@ precision highp float;
 uniform sampler2D u_tex0;
 uniform float u_surfaceAlpha;
 
-varying vec4    v_Colors; 
 varying vec2    v_texCoord0;
 
 
 void main()
 {
-    gl_FragColor = texture2D(u_tex0, v_texCoord0) * u_surfaceAlpha;
+   // gl_FragColor = texture2D(u_tex0, v_texCoord0) * u_surfaceAlpha;
+   gl_FragColor = vec4(1,0,0,1);
 }    
   
\ No newline at end of file
diff --git a/assets/shaders/Cloud.vert.glsl b/assets/shaders/Cloud.vert.glsl
index c673e40c..9a235349 100644
--- a/assets/shaders/Cloud.vert.glsl
+++ b/assets/shaders/Cloud.vert.glsl
@@ -35,7 +35,7 @@ void main()
 {
     // Transform position
         vec4 pos = vec4(a_pos,1);
-        pos.z += u_time*zSpeed;
+        //pos.z += u_time*zSpeed;
         gl_Position = u_projMatrix * u_mvMatrix * pos;
             
     v_texCoord0 = texcoord;
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index da8a26ad..5eca26b8 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -333,6 +333,15 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) {
                         rtnVal = this.hHasAnimatedMaterials( root );
             this._hasAnimatedMaterials = rtnVal;
         }
+                else
+                {
+                        // currently...
+                        // we set this case to true - cloud materials create a
+                        // world with no objects but cloud materials animate.
+                        // TODO - find a better way to do this
+                        rtnVal = true;
+                        this._hasAnimatedMaterials = true;
+                }
 
                 return rtnVal;
         };
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index f41c27f6..d4dd8033 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -12,7 +12,11 @@ var MaterialsModel = require("js/models/materials-model").MaterialsModel;
 //      GL representation of a rectangle.
 //      Derived from class GeomObj
 ///////////////////////////////////////////////////////////////////////
-var Rectangle = function GLRectangle() {
+var Rectangle = function GLRectangle()
+{
+        if (!MaterialsModel)
+                MaterialsModel = require("js/models/materials-model").MaterialsModel;
+
         // CONSTANTS
         this.N_TRIANGLES = 15;
 
diff --git a/js/lib/rdge/materials/cloud-material.js b/js/lib/rdge/materials/cloud-material.js
index cec00696..126751c6 100644
--- a/js/lib/rdge/materials/cloud-material.js
+++ b/js/lib/rdge/materials/cloud-material.js
@@ -121,14 +121,21 @@ var CloudMaterial = function CloudMaterial() {
                 var canvasID = "__canvas__";
                 //this._srcCanvas = doc.createElement(canvasID);
                 this._srcCanvas = NJUtils.makeNJElement("canvas", canvasID, "shape", {"data-RDGE-id": NJUtils.generateRandom()}, true);
+                var dstCanvas = this.getWorld().getCanvas(),
+                        srcCanvas = this._srcCanvas;
+                srcCanvas.width  = dstCanvas.width;
+                srcCanvas.height = dstCanvas.height;
+
+                // save the current RDGE context
+                var saveContext = g_Engine.getContext();        
 
                 // build a world to do the rendering
-                this._srcWorld = new GLWorld( this._srcCanvas, true );
+                this._srcWorld = new GLWorld( this._srcCanvas, true, true );
                 var srcWorld = this._srcWorld;
                 this._srcCanvas.__GLWorld = srcWorld;
 
                 // build the geometry
-                var prim = this.buildGeometry();
+                var prim = this.buildGeometry( srcWorld,  srcCanvas.width, srcCanvas.height );
 
                 // set up the shader
                 this._shader = new jshader();
@@ -149,6 +156,12 @@ var CloudMaterial = function CloudMaterial() {
                                 t.u_surfaceAlpha.set( [this._surfaceAlpha] );
                                 t.u_zmin.set( [this._zmin] );
                                 t.u_zmax.set( [this._zmax] );
+
+                                var wrap = 'REPEAT',  mips = true;
+                                var texMapName = this._propValues[this._propNames[0]];
+                                var tex = srcWorld.renderer.getTextureByName(texMapName, wrap, mips );
+                                if (tex)
+                                        srcWorld.textureToLoad( tex );
                         }
         }
 
@@ -160,16 +173,25 @@ var CloudMaterial = function CloudMaterial() {
 
                 // create the texture
                 var wrap = 'REPEAT',  mips = true;
+                this._srcWorld._hasAnimatedMaterials = true;    // hack to make the texture think this world is animated
                 this._glTex = new Texture( world, this._srcCanvas,  wrap, mips );
 
                 // set the shader values in the shader
                 this.updateTexture();
                 this.update( 0 );
+
+                // restore the previous RDGE context
+                g_Engine.setContext( saveContext.id );
         };
 
         this.updateTexture = function() {
                 var material = this._materialNode;
-                if (material) {
+                if (material) 
+                {
+                        // save the current context
+                        var saveContext = g_Engine.getContext();
+                        g_Engine.setContext( this._srcCanvas.rdgeid );
+
                         var technique = material.shaderProgram['default'];
                         var renderer = g_Engine.getContext().renderer;
                         if (renderer && technique) {
@@ -185,8 +207,22 @@ var CloudMaterial = function CloudMaterial() {
                 }
 
                         }
+
+                        g_Engine.setContext( saveContext.id );
                 }
         };
+                
+        this.updateTextures = function()
+        {
+                if (this._glTex)
+                {
+                        if (!this._glTex.isAnimated())
+                        {
+                                this._glTex.render();
+                                this.updateTexture();
+                        }
+                }
+        }
 
         this.update = function( time )
         {
@@ -215,12 +251,43 @@ var CloudMaterial = function CloudMaterial() {
                 }
         };
 
-        this.buildGeometry = function()
+        this.buildGeometry = function(world,  canvasWidth,  canvasHeight)
         {
                 var RectangleGeometry   = require("js/lib/geom/rectangle").RectangleGeometry;
 
                 RectangleGeometry.init();
 
+                // get the normalized device coordinates (NDC) for
+                // all position and dimensions.
+                var vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
+                var xNDC = 0.0/vpw,  yNDC = 0.0/vph,
+                        xFillNDC = canvasWidth/vpw,  yFillNDC = canvasHeight/vph;
+
+                var aspect = world.getAspect();
+                var zn = world.getZNear(),  zf = world.getZFar();
+                var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0),
+                        b = -t,
+                        r = aspect*t,
+                        l = -r;
+
+                // calculate the object coordinates from their NDC coordinates
+                var z = -world.getViewDistance();
+
+                // get the position of the origin
+                var x = -z*(r-l)/(2.0*zn)*xNDC,
+                        y = -z*(t-b)/(2.0*zn)*yNDC;
+
+                // get the x and y fill
+                var xFill = -z*(r-l)/(2.0*zn)*xFillNDC,
+                        yFill = -z*(t-b)/(2.0*zn)*yFillNDC;
+
+                
+                //this.createFill([x,y],  2*xFill,  2*yFill,  tlRadius, blRadius, brRadius, trRadius, fillMaterial);
+                var ctr = [x,y],  width = 2*xFill,  height = 2*yFill;
+                var prim = RectangleGeometry.create( ctr,  width, height );
+                return prim;
+