Exposing parameters in Water Material

3 files changed, 169 insertions, 35 deletions

diff --git a/assets/shaders/Water2.frag.glsl b/assets/shaders/Water2.frag.glsl
index 39b6aa55..49b2b647 100644
--- a/assets/shaders/Water2.frag.glsl
+++ b/assets/shaders/Water2.frag.glsl
@@ -8,20 +8,27 @@ uniform vec2 u_resolution;
 const float PI = 3.1415926535897932;
 
 //speed
-const float speed = 0.2;
+//const float speed = 0.2;
 const float speed_x = 0.3;
 const float speed_y = 0.3;
 
 // geometry
-const float intensity = 3.;
+//const float intensity = 3.;
 const int steps = 8;
 const float frequency = 4.0;
 const int angle = 7; // better when a prime
 
 // reflection and emboss
-const float delta = 20.;
+//const float delta = 20.;
 const float intence = 400.;
-const float emboss = 0.3;
+//const float emboss = 0.3;
+
+// uniforms
+uniform float u_emboss;
+uniform float u_delta;
+//uniform float u_intence;
+uniform float u_intensity;
+uniform float u_speed;
 
 //---------- crystals effect
 
@@ -34,9 +41,9 @@ const float emboss = 0.3;
     {
       vec2 adjc = coord;
       theta = delta_theta*float(i);
-      adjc.x += cos(theta)*u_time*speed + u_time * speed_x;
-      adjc.y -= sin(theta)*u_time*speed - u_time * speed_y;
-      col = col + cos( (adjc.x*cos(theta) - adjc.y*sin(theta))*frequency)*intensity;
+      adjc.x += cos(theta)*u_time*u_speed + u_time * speed_x;
+      adjc.y -= sin(theta)*u_time*u_speed - u_time * speed_y;
+      col = col + cos( (adjc.x*cos(theta) - adjc.y*sin(theta))*frequency)*u_intensity;
     }
 
     return cos(col);
@@ -49,18 +56,17 @@ void main(void)
 vec2 p = (gl_FragCoord.xy) / u_resolution.xy, c1 = p, c2 = p;
 float cc1 = col(c1);
 
-c2.x += u_resolution.x/delta;
-float dx = emboss*(cc1-col(c2))/delta;
+c2.x += u_resolution.x/u_delta;
+float dx = u_emboss*(cc1-col(c2))/u_delta;
 
 c2.x = p.x;
-c2.y += u_resolution.y/delta;
-float dy = emboss*(cc1-col(c2))/delta;
+c2.y += u_resolution.y/u_delta;
+float dy = u_emboss*(cc1-col(c2))/u_delta;
 
 c1.x += dx;
 c1.y = -(c1.y+dy);
 
 float alpha = 1.+dot(dx,dy)*intence;
 gl_FragColor = texture2D(u_tex0,c1)*(alpha);
-// gl_FragColor = vec4(col(p),0,0,1);
 
 }
diff --git a/js/lib/rdge/materials/water-material.js b/js/lib/rdge/materials/water-material.js
index 18a73915..1f0aa46e 100644
--- a/js/lib/rdge/materials/water-material.js
+++ b/js/lib/rdge/materials/water-material.js
@@ -23,14 +23,29 @@ var WaterMaterial = function WaterMaterial() {
 
     this._time = 0.0;
     this._dTime = 0.01;
+        this._emboss = 0.3;
+        this._delta = 20.0;
+        this._intensity = 3.0;
+
+        this._speed = 0.2;
 
     ///////////////////////////////////////////////////////////////////////
     // Properties
     ///////////////////////////////////////////////////////////////////////
     // all defined in parent PulseMaterial.js
     // load the local default value
-    this._propValues = [];
-    this._propValues[this._propNames[0]] = this._texMap.slice(0);
+    //this._propValues = [];
+    //this._propValues[this._propNames[0]] = this._texMap.slice(0);
+        this._propNames                 = ["texmap",            "emboss",       "delta",                  "intensity",          "speed"];
+        this._propLabels                = ["Texture map",       "Emboss",       "Delta",                "Intensity",            "Speed"];
+        this._propTypes                 = ["file",                      "float",        "float",                        "float",                "float"];
+
+        this._propValues                = [];
+        this._propValues[ this._propNames[0] ] = this._texMap.slice(0);
+        this._propValues[ this._propNames[1] ] = this._emboss;
+        this._propValues[ this._propNames[2] ] = this._delta;
+        this._propValues[ this._propNames[3] ] = this._intensity;
+        this._propValues[ this._propNames[4] ] = this._speed;
 
     ///////////////////////////////////////////////////////////////////////
     // Methods
@@ -52,32 +67,141 @@ var WaterMaterial = function WaterMaterial() {
         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 Water Material:" + prop + " : " + value );
+                }
+
+                switch (prop)
+                {
+                        case "texmap":
+                                this.setTextureMap(value);
+                                break;
+
+                        case "emboss":
+                                this.setEmboss( value );
+                                break;
+
+                        case "delta":
+                                this.setDelta( value );
+                                break;
+
+                        case "intensity":
+                                this.setIntensity( value );
+                                break;
+
+                        case "speed":
+                                this.setSpeed( value );
+                                break;
+
+                        case "color":
+                                break;
+                }
+        };
+
     this.init = function (world) {
-        // save the world
-        if (world) this.setWorld(world);
+                // save the world
+                if (world) this.setWorld(world);
+
+                // set up the shader
+                this._shader = new RDGE.jshader();
+                this._shader.def = waterMaterialDef;
+                this._shader.init();
+
+                // set up the material node
+                this._materialNode = RDGE.createMaterialNode("waterMaterial" + "_" + world.generateUniqueNodeID());
+                this._materialNode.setShader(this._shader);
+
+                this._time = 0;
+                if (this._shader && this._shader['default']) {
+                        this._shader['default'].u_time.set([this._time]);
+
+                        this._shader['default'].u_emboss.set( [this._emboss] );
+                        this._shader['default'].u_delta.set( [this._delta] );
+                        this._shader['default'].u_intensity.set( [this._intensity] );
+                        this._shader['default'].u_speed.set( [this._speed] );
+                }
+
+                var texMapName = this._propValues[this._propNames[0]];
+                this._glTex = new Texture( world, texMapName );
+
+                // set the shader values in the shader
+                this.updateTexture();
+                this.setResolution([world.getViewportWidth(), world.getViewportHeight()]);
+                this.update(0);
+        };
+
+        this.setTextureMap = function( texMapName )
+        {
+                this._texMap = texMapName.slice();
+                this._propValues[ this._propNames[0] ] = this._texMap.slice(0);
 
-        // set up the shader
-        this._shader = new RDGE.jshader();
-        this._shader.def = waterMaterialDef;
-        this._shader.init();
+                this._glTex = new Texture( this.getWorld(), texMapName );
+                this.updateTexture();
+        }
 
-        // set up the material node
-        this._materialNode = RDGE.createMaterialNode("waterMaterial" + "_" + world.generateUniqueNodeID());
-        this._materialNode.setShader(this._shader);
+        this.setEmboss = function( value )
+        {
+                this._emboss = value;
+                this._propValues[ "emboss" ] = value;
+
+                var material = this._materialNode;
+                if (material) {
+                        var technique = material.shaderProgram['default'];
+                        var renderer = RDGE.globals.engine.getContext().renderer;
+                        if (renderer && technique) {
+                                        technique.u_emboss.set( [value] );
+                        }
+                }
+        }
 
-        this._time = 0;
-        if (this._shader && this._shader['default']) {
+        this.setIntensity = function( value )
+        {