From 50ede4afa801f53caff7939dad0408f9a0a8b744 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 22 May 2012 15:44:51 -0700 Subject: Editable parameters for flag, pulse, uber, and radial gradient materials. --- assets/shaders/Flag.vert.glsl | 12 ++-- js/lib/rdge/materials/flag-material.js | 81 +++++++++++++++++++++-- js/lib/rdge/materials/pulse-material.js | 2 - js/lib/rdge/materials/radial-gradient-material.js | 7 +- js/lib/rdge/materials/uber-material.js | 12 ++-- 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/js/lib/rdge/materials/uber-material.js @@ -247,9 +247,9 @@ var UberMaterial = function UberMaterial() { var technique = material.shaderProgram.defaultTechnique; var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { - var tex = renderer.getTextureByName(value, caps.environmentMap.wrap); + var tex = renderer.getTextureByName(value, this._ubershaderCaps.environmentMap.wrap); this.registerTexture(tex); - technique.s_environmentMap.set(tex); + technique.s_envMap.set(tex); } } } @@ -276,7 +276,7 @@ var UberMaterial = function UberMaterial() { var technique = material.shaderProgram.defaultTechnique; var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { - this._diffuseTexture = new Texture( this.getWorld(), value, caps.diffuseMap.wrap ); + this._diffuseTexture = new Texture( this.getWorld(), value, this._ubershaderCaps.diffuseMap.wrap ); var tex = this._diffuseTexture.getTexture(); technique.s_diffuseMap.set( tex ); } @@ -304,7 +304,7 @@ var UberMaterial = function UberMaterial() { var technique = material.shaderProgram.defaultTechnique; var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { - var tex = renderer.getTextureByName(value, caps.specularMap.wrap); + var tex = renderer.getTextureByName(value, this._ubershaderCaps.specularMap.wrap); this.registerTexture(tex); technique.s_specularMap.set(tex); } @@ -332,7 +332,7 @@ var UberMaterial = function UberMaterial() { var technique = material.shaderProgram.defaultTechnique; var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { - var tex = renderer.getTextureByName(value, caps.normalMap.wrap); + var tex = renderer.getTextureByName(value, this._ubershaderCaps.normalMap.wrap); this.registerTexture(tex); technique.s_normalMap.set(tex); } @@ -798,7 +798,7 @@ var UberMaterial = function UberMaterial() { var material = this._materialNode; if (material) { - material.setShader(buildUbershader(this._ubershaderCaps)); + material.setShader( this.buildUberShader(this._ubershaderCaps) ); } }; }; -- cgit v1.2.3