aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorhwc4872012-05-22 15:44:51 -0700
committerhwc4872012-05-22 15:44:51 -0700
commit50ede4afa801f53caff7939dad0408f9a0a8b744 (patch)
tree9dc0adff9d4f46316db95fe80d9f9deddad28025
parentcc3b66f817c9d72ca247d5ff789a08ec5b57a2b5 (diff)
downloadninja-50ede4afa801f53caff7939dad0408f9a0a8b744.tar.gz
Editable parameters for flag, pulse, uber, and radial gradient materials.
-rw-r--r--assets/shaders/Flag.vert.glsl12
-rw-r--r--js/lib/rdge/materials/flag-material.js81
-rw-r--r--js/lib/rdge/materials/pulse-material.js2
-rwxr-xr-xjs/lib/rdge/materials/radial-gradient-material.js7
-rwxr-xr-xjs/lib/rdge/materials/uber-material.js12
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;
16 16
17// scalar uniforms 17// scalar uniforms
18uniform float u_time; 18uniform float u_time;
19uniform float u_speed;
19uniform float u_waveWidth; 20uniform float u_waveWidth;
20uniform float u_waveHeight; 21uniform float u_waveHeight;
21 22
@@ -30,8 +31,9 @@ varying vec2 v_uv;
30 31
31void main() 32void main()
32{ 33{
33 float pi = 3.14159; 34 float time = u_time * u_speed;
34 float angle = u_time; 35 const float pi = 3.14159;
36 float angle = time;
35 37
36 v_uv = texcoord; 38 v_uv = texcoord;
37 39
@@ -39,9 +41,11 @@ void main()
39 float y = 2.0*pi*texcoord.y; 41 float y = 2.0*pi*texcoord.y;
40 42
41 vec3 v = a_pos; 43 vec3 v = a_pos;
42 v.z = sin( x + angle ) - 2.0*u_waveHeight; 44 v.z = sin( x + angle );
43 v.z += sin( 0.2*y + angle); 45 v.z += sin( 0.2*y + angle);
44 v.z *= x * 0.09 * u_waveHeight; 46 v.z *= u_waveHeight;
47 v.z -= 2.0*u_waveHeight;
48 v.z *= x * 0.09;
45 49
46 gl_Position = u_projMatrix * u_mvMatrix * vec4(v,1.0) ; 50 gl_Position = u_projMatrix * u_mvMatrix * vec4(v,1.0) ;
47} 51}
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() {
21 this._time = 0.0; 21 this._time = 0.0;
22 this._dTime = 0.1; 22 this._dTime = 0.1;
23 23
24 this._defaultWaveWidth = 1.0; 24 this._speed = 1.0;
25 this._defaultWaveHeight = 1.0; 25 this._waveWidth = 1.0;
26 this._waveHeight = 1.0;
26 27
27 this._hasVertexDeformation = true; 28 this._hasVertexDeformation = true;
28 29
@@ -31,14 +32,16 @@ var FlagMaterial = function FlagMaterial() {
31 /////////////////////////////////////////////////////////////////////// 32 ///////////////////////////////////////////////////////////////////////
32 // all defined in parent PulseMaterial.js 33 // all defined in parent PulseMaterial.js
33 // load the local default value 34 // load the local default value
34 this._propNames = ["texmap", "wavewidth", "waveheight" ]; 35 this._propNames = ["texmap", "wavewidth", "waveheight", "speed" ];
35 this._propLabels = ["Texture map", "Wave Width", "Wave Height" ]; 36 this._propLabels = ["Texture map", "Wave Width", "Wave Height", "Speed" ];
36 this._propTypes = ["file", "float", "float" ]; 37 this._propTypes = ["file", "float", "float", "float" ];
37 this._propValues = []; 38 this._propValues = [];
38 39
39 this._propValues[ this._propNames[0] ] = this._texMap.slice(0); 40 this._propValues[ this._propNames[0] ] = this._texMap.slice(0);
40 this._propValues[ this._propNames[1] ] = this._defaultWaveWidth; 41 this._propValues[ this._propNames[1] ] = this._waveWidth;
41 this._propValues[ this._propNames[2] ] = this._defaultWaveHeight; 42 this._propValues[ this._propNames[2] ] = this._waveHeight;
43 this._propValues[ this._propNames[3] ] = this._speed;
44
42 45
43 // a material can be animated or not. default is not. 46 // a material can be animated or not. default is not.
44 // Any material needing continuous rendering should override this method 47 // Any material needing continuous rendering should override this method
@@ -65,6 +68,68 @@ var FlagMaterial = function FlagMaterial() {
65 return newMat; 68 return newMat;
66 }; 69 };
67 70
71 this.setProperty = function( prop, value )
72 {
73 // make sure we have legitimate imput
74 var ok = this.validateProperty( prop, value );
75 if (!ok) {
76 console.log( "invalid property in Radial Gradient Material:" + prop + " : " + value );
77 }
78
79 switch (prop)
80 {
81 case "texmap":
82 this.setTextureMap(value);
83 break;
84
85 case "wavewidth":
86 this._waveWidth = value;
87 this._propValues[ this._propNames[1] ] = this._waveWidth;
88 this.updateParameters();
89 break;
90
91 case "waveheight":
92 this._waveHeight = value;
93 this._propValues[ this._propNames[2] ] = this._waveHeight;
94 this.updateParameters();
95 break;
96
97 case "speed":
98 this._speed = value;
99 this._propValues[ this._propNames[3] ] = this._speed;
100 this.updateParameters();
101 break;
102
103 case "color":
104 break;
105 }
106 };
107
108
109 this.updateParameters = function()
110 {
111 this._propValues[ this._propNames[1] ] = this._waveWidth;
112 this._propValues[ this._propNames[2] ] = this._waveHeight;
113 this._propValues[ this._propNames[3] ] = this._speed;
114
115 var material = this._materialNode;
116 if (material)
117 {
118 var technique = material.shaderProgram['default'];
119 var renderer = RDGE.globals.engine.getContext().renderer;
120 if (renderer && technique)
121 {
122
123 if (this._shader && this._shader['default']) {
124 this._shader['default'].u_speed.set( [this._speed] );
125 this._shader['default'].u_waveWidth.set( [this._waveWidth] );
126 this._shader['default'].u_waveHeight.set( [this._waveHeight] );
127 }
128 }
129 }
130 };
131
132
68 this.init = function( world ) 133 this.init = function( world )
69 { 134 {
70 // save the world 135 // save the world
@@ -91,6 +156,7 @@ var FlagMaterial = function FlagMaterial() {
91 this._glTex = new Texture( world, texMapName ); 156 this._glTex = new Texture( world, texMapName );
92 157
93 // set the shader values in the shader 158 // set the shader values in the shader
159 this.updateParameters();
94 this.updateTexture(); 160 this.updateTexture();
95 this.update( 0 ); 161 this.update( 0 );
96 } 162 }
@@ -125,6 +191,7 @@ var flagMaterialDef =
125 { 191 {
126 'u_tex0': { 'type' : 'tex2d' }, 192 'u_tex0': { 'type' : 'tex2d' },
127 'u_time' : { 'type' : 'float' }, 193 'u_time' : { 'type' : 'float' },
194 'u_speed' : { 'type' : 'float' },
128 'u_waveWidth' : { 'type' : 'float' }, 195 'u_waveWidth' : { 'type' : 'float' },
129 'u_waveHeight' : { 'type' : 'float' } 196 'u_waveHeight' : { 'type' : 'float' }
130 }, 197 },
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()
224 this._shader['default'].u_time.set( [this._time] ); 224 this._shader['default'].u_time.set( [this._time] );
225 } 225 }
226 this._time += this._dTime; 226 this._time += this._dTime;
227
228 if (this._time > 200.0) this._time = 0.0;
229 } 227 }
230 } 228 }
231 }; 229 };
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() {
147 /////////////////////////////////////////////////////////////////////// 147 ///////////////////////////////////////////////////////////////////////
148 // Material Property Accessors 148 // Material Property Accessors
149 /////////////////////////////////////////////////////////////////////// 149 ///////////////////////////////////////////////////////////////////////
150 this._propNames = ["color1", "color2", "color3", "color4", "colorStop1", "colorStop2", "colorStop3", "colorStop4", "angle"]; 150 this._propNames = ["color1", "color2", "color3", "color4", "colorStop1", "colorStop2", "colorStop3", "colorStop4" ];
151 this._propLabels = ["Color 1", "Color 2", "Color 3", "Color 4", "Color Stop 1", "Color Stop 2", "Color Stop 3", "Color Stop 4", "Angle"]; 151 this._propLabels = ["Color 1", "Color 2", "Color 3", "Color 4", "Color Stop 1", "Color Stop 2", "Color Stop 3", "Color Stop 4" ];
152 this._propTypes = ["color", "color", "color", "color", "float", "float", "float", "float", "float"]; 152 this._propTypes = ["color", "color", "color", "color", "float", "float", "float", "float" ];
153 this._propValues = []; 153 this._propValues = [];
154 154
155 this._propValues[this._propNames[0]] = this._color1.slice(0); 155 this._propValues[this._propNames[0]] = this._color1.slice(0);
@@ -180,7 +180,6 @@ var RadialGradientMaterial = function RadialGradientMaterial() {
180 case "colorStop2": this.setColorStop2(value); break; 180 case "colorStop2": this.setColorStop2(value); break;
181 case "colorStop3": this.setColorStop3(value); break; 181 case "colorStop3": this.setColorStop3(value); break;
182 case "colorStop4": this.setColorStop4(value); break; 182 case "colorStop4": this.setColorStop4(value); break;
183 case "angle": this.setAngle(value); break;
184 } 183 }
185 184
186 //this.updateValuesInShader(); 185 //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/