Editable parameters for flag, pulse, uber, and radial gradient materials.

5 files changed, 91 insertions, 23 deletions

diff --git a/assets/shaders/Flag.vert.glsl b/assets/shaders/Flag.vert.glsl
index a5e8b2f7..1c842cb0 100644
--- a/assets/shaders/Flag.vert.glsl
+++ b/assets/shaders/Flag.vert.glsl
@@ -16,6 +16,7 @@ attribute vec2 texcoord;
 
 // scalar uniforms
 uniform float u_time;
+uniform float u_speed;
 uniform float u_waveWidth;
 uniform float u_waveHeight;
 
@@ -30,8 +31,9 @@ varying vec2 v_uv;
 
 void main()
 {
-        float pi = 3.14159;
-        float angle = u_time;
+        float time = u_time * u_speed;
+        const float pi = 3.14159;
+        float angle = time;
 
     v_uv = texcoord;
 
@@ -39,9 +41,11 @@ void main()
         float y = 2.0*pi*texcoord.y;
 
     vec3 v = a_pos;
-        v.z  = sin( x + angle ) - 2.0*u_waveHeight;
+        v.z  = sin( x + angle );
         v.z += sin( 0.2*y + angle);
-        v.z *= x * 0.09 * u_waveHeight;
+        v.z *= u_waveHeight;
+        v.z -=  2.0*u_waveHeight;
+        v.z *= x * 0.09;
         
     gl_Position = u_projMatrix * u_mvMatrix * vec4(v,1.0) ;
 }
diff --git a/js/lib/rdge/materials/flag-material.js b/js/lib/rdge/materials/flag-material.js
index 312ca1c1..fa844cc3 100644
--- a/js/lib/rdge/materials/flag-material.js
+++ b/js/lib/rdge/materials/flag-material.js
@@ -21,8 +21,9 @@ var FlagMaterial = function FlagMaterial() {
         this._time = 0.0;
         this._dTime = 0.1;
 
-    this._defaultWaveWidth = 1.0;
-    this._defaultWaveHeight = 1.0;
+        this._speed = 1.0;
+    this._waveWidth = 1.0;
+    this._waveHeight = 1.0;
 
         this._hasVertexDeformation = true;
 
@@ -31,14 +32,16 @@ var FlagMaterial = function FlagMaterial() {
     ///////////////////////////////////////////////////////////////////////
         // all defined in parent PulseMaterial.js
         // load the local default value
-        this._propNames                 = ["texmap",        "wavewidth",        "waveheight" ];
-        this._propLabels                = ["Texture map",   "Wave Width",       "Wave Height" ];
-        this._propTypes                 = ["file",          "float",            "float" ];
+        this._propNames                 = ["texmap",        "wavewidth",        "waveheight",           "speed" ];
+        this._propLabels                = ["Texture map",   "Wave Width",       "Wave Height",          "Speed" ];
+        this._propTypes                 = ["file",          "float",            "float",                        "float" ];
         this._propValues                = [];
 
         this._propValues[ this._propNames[0] ] = this._texMap.slice(0);
-    this._propValues[ this._propNames[1] ] = this._defaultWaveWidth;
-    this._propValues[ this._propNames[2] ] = this._defaultWaveHeight;
+    this._propValues[ this._propNames[1] ] = this._waveWidth;
+    this._propValues[ this._propNames[2] ] = this._waveHeight;
+    this._propValues[ this._propNames[3] ] = this._speed;
+
 
         // a material can be animated or not. default is not.  
         // Any material needing continuous rendering should override this method
@@ -65,6 +68,68 @@ var FlagMaterial = function FlagMaterial() {
         return newMat;
         };
 
+        this.setProperty = function( prop, value )
+        {
+                // make sure we have legitimate imput
+                var ok = this.validateProperty( prop, value );
+                if (!ok) {
+                        console.log( "invalid property in Radial Gradient Material:" + prop + " : " + value );
+                }
+
+                switch (prop)
+                {
+                        case "texmap":
+                                this.setTextureMap(value);
+                                break;
+
+                        case "wavewidth":
+                                this._waveWidth = value;
+                                this._propValues[ this._propNames[1] ] = this._waveWidth;
+                                this.updateParameters();
+                                break;
+
+                        case "waveheight":
+                                this._waveHeight = value;
+                                this._propValues[ this._propNames[2] ] = this._waveHeight;
+                                this.updateParameters();
+                                break;
+
+                        case "speed":
+                                this._speed = value;
+                                this._propValues[ this._propNames[3] ] = this._speed;
+                                this.updateParameters();
+                                break;
+
+                        case "color":
+                                break;
+                }
+        };
+
+
+        this.updateParameters = function()
+        {
+                this._propValues[ this._propNames[1] ] = this._waveWidth;
+                this._propValues[ this._propNames[2] ] = this._waveHeight;
+                this._propValues[ this._propNames[3] ] = this._speed;
+
+                var material = this._materialNode;
+                if (material)
+                {
+                        var technique = material.shaderProgram['default'];
+                        var renderer = RDGE.globals.engine.getContext().renderer;
+                        if (renderer && technique)
+                        {
+
+                                if (this._shader && this._shader['default']) {
+                                        this._shader['default'].u_speed.set( [this._speed] );
+                                        this._shader['default'].u_waveWidth.set( [this._waveWidth] );
+                                        this._shader['default'].u_waveHeight.set( [this._waveHeight] );
+                                }
+                        }
+                }
+        };
+
+
         this.init = function( world )
         {
                 // save the world
@@ -91,6 +156,7 @@ var FlagMaterial = function FlagMaterial() {
         this._glTex = new Texture( world, texMapName );
 
                 // set the shader values in the shader
+                this.updateParameters();
                 this.updateTexture();
                 this.update( 0 );
         }
@@ -125,6 +191,7 @@ var flagMaterialDef =
                                 {
                                         'u_tex0': { 'type' : 'tex2d' },
                                         'u_time' : { 'type' : 'float' },
+                                        'u_speed' : { 'type' : 'float' },
                                         'u_waveWidth'  :   { 'type' : 'float' },
                                         'u_waveHeight'  :   { 'type' : 'float' }
                                 },
diff --git a/js/lib/rdge/materials/pulse-material.js b/js/lib/rdge/materials/pulse-material.js
index 56c10f21..28f3ee5e 100644
--- a/js/lib/rdge/materials/pulse-material.js
+++ b/js/lib/rdge/materials/pulse-material.js
@@ -224,8 +224,6 @@ var PulseMaterial = function PulseMaterial()
                                         this._shader['default'].u_time.set( [this._time] );
                                 }
                                 this._time += this._dTime;
-
-                                if (this._time > 200.0)  this._time = 0.0;
                         }
                 }
         };
diff --git a/js/lib/rdge/materials/radial-gradient-material.js b/js/lib/rdge/materials/radial-gradient-material.js
index 65679429..083b7371 100755
--- a/js/lib/rdge/materials/radial-gradient-material.js
+++ b/js/lib/rdge/materials/radial-gradient-material.js
@@ -147,9 +147,9 @@ var RadialGradientMaterial = function RadialGradientMaterial() {
     ///////////////////////////////////////////////////////////////////////
     // Material Property Accessors
     ///////////////////////////////////////////////////////////////////////
-    this._propNames = ["color1", "color2", "color3", "color4", "colorStop1", "colorStop2", "colorStop3", "colorStop4", "angle"];
-    this._propLabels = ["Color 1", "Color 2", "Color 3", "Color 4", "Color Stop 1", "Color Stop 2", "Color Stop 3", "Color Stop 4", "Angle"];
-    this._propTypes = ["color", "color", "color", "color", "float", "float", "float", "float", "float"];
+    this._propNames = ["color1", "color2", "color3", "color4", "colorStop1", "colorStop2", "colorStop3", "colorStop4" ];
+    this._propLabels = ["Color 1", "Color 2", "Color 3", "Color 4", "Color Stop 1", "Color Stop 2", "Color Stop 3", "Color Stop 4" ];
+    this._propTypes = ["color", "color", "color", "color", "float", "float", "float", "float" ];
     this._propValues = [];
 
     this._propValues[this._propNames[0]] = this._color1.slice(0);
@@ -180,7 +180,6 @@ var RadialGradientMaterial = function RadialGradientMaterial() {
             case "colorStop2": this.setColorStop2(value); break;
             case "colorStop3": this.setColorStop3(value); break;
             case "colorStop4": this.setColorStop4(value); break;
-            case "angle": this.setAngle(value); break;
         }
 
         //this.updateValuesInShader();
diff --git a/js/lib/rdge/materials/uber-material.js b/js/lib/rdge/materials/uber-material.js
index 6de74495..0fef78f6 100755
--- a/js/lib/rdge/materials/uber-material.js
+++ b/