From d4ca478ad313c6c20834e410ba14ad3a5e7b20bf Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 12 Jun 2012 10:28:26 -0700 Subject: Material cleanup & bug fixes. --- js/lib/rdge/materials/fly-material.js | 2 +- js/lib/rdge/materials/mandel-material.js | 48 +--- js/lib/rdge/materials/plasma-material.js | 109 +-------- js/lib/rdge/materials/pulse-material.js | 2 + js/lib/rdge/materials/radial-blur-material.js | 119 +--------- js/lib/rdge/materials/radial-gradient-material.js | 274 ++-------------------- js/lib/rdge/materials/relief-tunnel-material.js | 44 ++-- js/lib/rdge/materials/square-tunnel-material.js | 44 ++-- js/lib/rdge/materials/star-material.js | 44 ++-- js/lib/rdge/materials/taper-material.js | 74 +----- js/lib/rdge/materials/tunnel-material.js | 44 ++-- js/lib/rdge/materials/twist-material.js | 57 ++--- js/lib/rdge/materials/twist-vert-material.js | 197 +++------------- js/lib/rdge/materials/z-invert-material.js | 49 ++-- 14 files changed, 211 insertions(+), 896 deletions(-) (limited to 'js/lib/rdge/materials') diff --git a/js/lib/rdge/materials/fly-material.js b/js/lib/rdge/materials/fly-material.js index 12e18f7f..7b880a2e 100644 --- a/js/lib/rdge/materials/fly-material.js +++ b/js/lib/rdge/materials/fly-material.js @@ -36,7 +36,7 @@ var FlyMaterial = function FlyMaterial() { // Material Property Accessors /////////////////////////////////////////////////////////////////////// this.isAnimated = function() { return true; }; - this.getShaderDef = function() { return flyMaterialDef; } + this.getShaderDef = function() { return flyMaterialDef; }; /////////////////////////////////////////////////////////////////////// // Methods diff --git a/js/lib/rdge/materials/mandel-material.js b/js/lib/rdge/materials/mandel-material.js index e75d74ba..e1c19145 100644 --- a/js/lib/rdge/materials/mandel-material.js +++ b/js/lib/rdge/materials/mandel-material.js @@ -14,7 +14,7 @@ var MandelMaterial = function MandelMaterial() { this._name = "MandelMaterial"; this._shaderName = "mandel"; - this._texMap = 'assets/images/rocky-normal.jpg'; + this._defaultTexMap = 'assets/images/rocky-normal.jpg'; this._time = 0.0; this._dTime = 0.01; @@ -27,32 +27,23 @@ var MandelMaterial = function MandelMaterial() { /////////////////////////////////////////////////////////////////////// // Material Property Accessors /////////////////////////////////////////////////////////////////////// + var u_tex0_index = 0, u_speed_index = 1; + this._propNames = ["u_tex0", "u_speed" ]; + this._propLabels = ["Texture map", "Speed" ]; + this._propTypes = ["file", "float" ]; + this._propValues = []; + this._propValues[this._propNames[u_tex0_index]] = this._defaultTexMap.slice(0); + this._propValues[this._propNames[u_speed_index]] = 1.0; /////////////////////////////////////////////////////////////////////// - this.isAnimated = function() { - return true; - }; + this.isAnimated = function() { return true; }; + this.getShaderDef = function() { return MandelMaterialDef; } /////////////////////////////////////////////////////////////////////// // Methods /////////////////////////////////////////////////////////////////////// // duplcate method requirde - this.dup = function( world ) { - // get the current values; - var propNames = [], propValues = [], propTypes = [], propLabels = []; - this.getAllProperties(propNames, propValues, propTypes, propLabels); - - // allocate a new material - var newMat = new MandelMaterial(); - - // copy over the current values; - var n = propNames.length; - for (var i = 0; i < n; i++) - newMat.setProperty(propNames[i], propValues[i]); - - return newMat; - }; this.init = function( world ) { // save the world @@ -72,27 +63,11 @@ var MandelMaterial = function MandelMaterial() { this._shader['default'].u_time.set( [this._time] ); } - // set up the texture - var texMapName = this._propValues[this._propNames[0]]; - this._glTex = new Texture( world, texMapName ); - // set the shader values in the shader + this.setShaderValues(); this.setResolution( [world.getViewportWidth(),world.getViewportHeight()] ); this.update( 0 ); }; - - this.update = function( time ) { - 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_time.set( [this._time] ); - this._time = time; - } - } - }; }; /////////////////////////////////////////////////////////////////////////////////////// @@ -124,6 +99,7 @@ var MandelMaterialDef = { 'u_tex0': { 'type' : 'tex2d' }, 'u_time' : { 'type' : 'float' }, + 'u_speed' : { 'type' : 'float' }, 'u_resolution' : { 'type' : 'vec2' }, }, diff --git a/js/lib/rdge/materials/plasma-material.js b/js/lib/rdge/materials/plasma-material.js index 1db207d6..c1e5524c 100644 --- a/js/lib/rdge/materials/plasma-material.js +++ b/js/lib/rdge/materials/plasma-material.js @@ -24,7 +24,7 @@ var PlasmaMaterial = function PlasmaMaterial() { /////////////////////////////////////////////////////////////////////// // Properties /////////////////////////////////////////////////////////////////////// - this._propNames = ["wave", "wave1", "wave2", "speed"]; + this._propNames = ["u_wave", "u_wave1", "u_wave2", "u_speed"]; this._propLabels = ["Wave", "Wave 1", "Wave 2", "Speed"]; this._propTypes = ["float", "float", "float", "float"]; @@ -39,68 +39,17 @@ var PlasmaMaterial = function PlasmaMaterial() { // Property Accessors /////////////////////////////////////////////////////////////////////// this.getShaderName = function() { return this._shaderName; }; - this.isAnimated = function() { return true; }; + this.getShaderDef = function() { return plasmaShaderDef; }; /////////////////////////////////////////////////////////////////////// // Material Property Accessors /////////////////////////////////////////////////////////////////////// - // duplcate method requirde - this.dup = function (world) { - // get the current values; - var propNames = [], propValues = [], propTypes = [], propLabels = []; - this.getAllProperties(propNames, propValues, propTypes, propLabels); - - // allocate a new material - var newMat = new PlasmaMaterial(); - - // copy over the current values; - var n = propNames.length; - for (var i = 0; i < n; i++) - newMat.setProperty(propNames[i], propValues[i]); - - 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 "wave": - this._wave = value; - break; - - case "wave1": - this._wave1 = value; - break; - - case "wave2": - this._wave2 = value; - break; - - case "speed": - this._speed = value; - break; - } - - this.updateParameters(); - }; - - /////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////// // Methods /////////////////////////////////////////////////////////////////////// // duplcate method requirde - this.dup = function() { - return new PlasmaMaterial(); - }; this.init = function( world) { @@ -114,67 +63,23 @@ var PlasmaMaterial = function PlasmaMaterial() { // set the default value this._time = 0; this._shader['default'].u_time.set( [this._time] ); - this._shader['default'].u_speed.set( [this._speed] ); - - this._shader['default'].u_wave.set( [this._wave] ); - this._shader['default'].u_wave1.set( [this._wave1] ); - this._shader['default'].u_wave2.set( [this._wave2] ); // set up the material node this._materialNode = RDGE.createMaterialNode("plasmaMaterial" + "_" + world.generateUniqueNodeID()); this._materialNode.setShader(this._shader); - }; - this.updateParameters = function() - { - this._propValues[ this._propNames[0] ] = this._wave; - this._propValues[ this._propNames[1] ] = this._wave1; - this._propValues[ this._propNames[2] ] = this._wave2; - 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) { - technique.u_wave.set( [this._wave] ); - technique.u_wave1.set( [this._wave1] ); - technique.u_wave2.set( [this._wave2] ); - technique.u_speed.set( [this._speed] ); - } + this._time = 0; + if (this._shader && this._shader['default']) { + this._shader['default'].u_time.set( [this._time] ); } + + this.setShaderValues(); }; this.update = function( time ) { this._shader['default'].u_time.set( [this._time] ); this._time += this._dTime; }; - - this.exportJSON = function() - { - var jObj = - { - 'material' : this.getShaderName(), - 'name' : this.getName(), - 'speed' : this._speed, - 'dTime' : this._dTime, - 'wave' : this._wave, - 'wave1' : this._wave1, - 'wave2' : this._wave2 - }; - - return jObj; - }; - - this.importJSON = function( jObj ) - { - this._speed = jObj.speed; - this._dTime = jObj.dTime; - - this._wave = jObj.wave; - this._wave1 = jObj.wave1; - this._wave2 = jObj.wave2; - }; }; /////////////////////////////////////////////////////////////////////////////////////// diff --git a/js/lib/rdge/materials/pulse-material.js b/js/lib/rdge/materials/pulse-material.js index ca4b940b..2c0fc04c 100644 --- a/js/lib/rdge/materials/pulse-material.js +++ b/js/lib/rdge/materials/pulse-material.js @@ -30,6 +30,8 @@ var PulseMaterial = function PulseMaterial() this._time = 0.0; this._dTime = 0.01; + this._glTextures = []; + /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// diff --git a/js/lib/rdge/materials/radial-blur-material.js b/js/lib/rdge/materials/radial-blur-material.js index 61ae0017..57f4a6e0 100644 --- a/js/lib/rdge/materials/radial-blur-material.js +++ b/js/lib/rdge/materials/radial-blur-material.js @@ -4,7 +4,6 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ -var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; var Material = require("js/lib/rdge/materials/material").Material; var RadialBlurMaterial = function RadialBlurMaterial() { @@ -14,8 +13,8 @@ var RadialBlurMaterial = function RadialBlurMaterial() { this._name = "RadialBlurMaterial"; this._shaderName = "radialBlur"; - this._texMap = 'assets/images/cubelight.png'; - this._color = [1, 0, 0, 1]; + this._defaultTexMap = 'assets/images/cubelight.png'; + this._defaultColor = [1, 0, 0, 1]; this._time = 0.0; this._dTime = 0.01; @@ -23,68 +22,27 @@ var RadialBlurMaterial = function RadialBlurMaterial() { /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// - this.getName = function () { return this._name; }; - this.getShaderName = function () { return this._shaderName; }; - - this.getTextureMap = function () { return this._texMap.slice(0); }; - this.setTextureMap = function (m) { this._propValues[this._propNames[0]] = m.slice(0); this.updateTexture(); }; - - this.isAnimated = function () { return true; }; + this.getName = function () { return this._name; }; + this.getShaderName = function () { return this._shaderName; }; + this.getShaderDef = function() { return radialBlurMaterialDef; }; + this.isAnimated = function () { return true; }; /////////////////////////////////////////////////////////////////////// // Material Property Accessors /////////////////////////////////////////////////////////////////////// - this._propNames = ["texmap", "color"]; - this._propLabels = ["Texture map", "Color"]; - this._propTypes = ["file", "color"]; + this._propNames = ["u_tex0", "u_speed"]; + this._propLabels = ["Texture map", "Speed" ]; + this._propTypes = ["file", "float" ]; this._propValues = []; - this._propValues[this._propNames[0]] = this._texMap.slice(0); - this._propValues[this._propNames[1]] = this._color.slice(0); - - 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 "color": - this._propValues[prop] = value.slice(0); - if (this._shader && this._shader['default']) { - this._shader['default'][prop].set(value); - } - break; - } - }; + this._propValues[this._propNames[0]] = this._defaultTexMap.slice(0); + this._propValues[this._propNames[1]] = 1.0; /////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////// // Methods /////////////////////////////////////////////////////////////////////// - // duplicate method required - this.dup = function () { - // get the current values; - var propNames = [], propValues = [], propTypes = [], propLabels = []; - this.getAllProperties(propNames, propValues, propTypes, propLabels); - - // allocate a new material - var newMat = new RadialBlurMaterial(); - - // copy over the current values; - var n = propNames.length; - for (var i = 0; i < n; i++) - newMat.setProperty(propNames[i], propValues[i]); - - return newMat; - }; - this.init = function (world) { // save the world if (world) this.setWorld(world); @@ -101,31 +59,13 @@ var RadialBlurMaterial = function RadialBlurMaterial() { this._time = 0; if (this._shader && this._shader['default']) this._shader['default'].u_time.set([this._time]); - this.setProperty("color", [this._time, 0, 0, 1]); // set the shader values in the shader - this.updateTexture(); + this.setShaderValues(); this.setResolution([world.getViewportWidth(), world.getViewportHeight()]); this.update(0); }; - this.updateTexture = function () { - var material = this._materialNode; - if (material) { - var technique = material.shaderProgram['default']; - var renderer = RDGE.globals.engine.getContext().renderer; - if (renderer && technique) { - var texMapName = this._propValues[this._propNames[0]]; - var tex = renderer.getTextureByName(texMapName, 'REPEAT'); - // if (tex) - // { - // var res = [tex.image.naturalWidth, tex.image.naturalHeight]; - // this.setResoloution( res ); - // } - technique.u_tex0.set(tex); - } - } - }; this.update = function () { var material = this._materialNode; @@ -136,11 +76,6 @@ var RadialBlurMaterial = function RadialBlurMaterial() { if (this._shader && this._shader['default']) { this._shader['default'].u_time.set([this._time]); } - - var color = this.getProperty("color"); - color[0] = this._time; - this.setProperty("color", color); - //console.log( "update color to: " + color ); this._time += this._dTime; } } @@ -156,34 +91,6 @@ var RadialBlurMaterial = function RadialBlurMaterial() { } } }; - - this.exportJSON = function () { - var jObj = - { - 'material': this.getShaderName(), - 'name': this.getName(), - 'color': this._propValues["color"], - 'texture': this._propValues[this._propNames[0]] - }; - - return jObj; - }; - - this.importJSON = function (jObj) { - if (this.getShaderName() != jObj.material) throw new Error("ill-formed material"); - this.setName(jObj.name); - - var rtnStr; - try { - this._propValues[this._propNames[0]] = jObj.texture; - this.updateTexture(); - } - catch (e) { - throw new Error("could not import material: " + importStr); - } - - return rtnStr; - }; }; /////////////////////////////////////////////////////////////////////////////////////// @@ -215,8 +122,8 @@ var radialBlurMaterialDef = { 'u_tex0': { 'type': 'tex2d' }, 'u_time': { 'type': 'float' }, + 'u_speed': { 'type': 'float' }, 'u_resolution': { 'type': 'vec2' }, - 'color': { 'type': 'vec4' } }, // render states diff --git a/js/lib/rdge/materials/radial-gradient-material.js b/js/lib/rdge/materials/radial-gradient-material.js index 67a85041..b5ffd01a 100755 --- a/js/lib/rdge/materials/radial-gradient-material.js +++ b/js/lib/rdge/materials/radial-gradient-material.js @@ -15,201 +15,49 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this._name = "RadialGradientMaterial"; this._shaderName = "radialGradient"; - this._color1 = [1, 0, 0, 1]; - this._color2 = [0, 1, 0, 1]; - this._color3 = [0, 0, 1, 1]; - this._color4 = [0, 1, 1, 1]; - this._colorStop1 = 0.0; - this._colorStop2 = 0.3; - this._colorStop3 = 0.6; - this._colorStop4 = 1.0; - // this._colorCount = 4; + this._defaultColor1 = [1, 0, 0, 1]; + this._defaultColor2 = [0, 1, 0, 1]; + this._defaultColor3 = [0, 0, 1, 1]; + this._defaultColor4 = [0, 1, 1, 1]; + this._defaultColorStop1 = 0.0; + this._defaultColorStop2 = 0.3; + this._defaultColorStop3 = 0.6; + this._defaultColorStop4 = 1.0; + // this._defaultColorCount = 4; this._textureTransform = [1,0,0, 0,1,0, 0,0,1]; /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// - this.getName = function () { - return this._name; - }; - - this.getShaderName = function () { - return this._shaderName; - }; - - this.getColor1 = function () { - return this._color1; - }; - - this.setColor1 = function (c) { - this._color1 = c.slice(); - this._propValues[this._propNames[0]] = this._color1.slice(0); - if (this._shader && this._shader['default']) { - this._shader['default'].u_color1.set(c); - } - }; - - this.getColor2 = function () { - return this._color2; - }; - - this.setColor2 = function (c) { - this._color2 = c.slice(); - this._propValues[this._propNames[1]] = this._color2.slice(0); - if (this._shader && this._shader['default']) { - this._shader['default'].u_color2.set(c); - } - - }; - - this.getColor3 = function () { - return this._color3; - }; - - this.setColor3 = function (c) { - this._color3 = c.slice(); - this._propValues[this._propNames[2]] = this._color3.slice(0); - if (this._shader && this._shader['default']) { - this._shader['default'].u_color3.set(c); - } - }; - - this.getColor4 = function () { - return this._color4; - }; - - this.setColor4 = function (c) { - this._color4 = c.slice(); - this._propValues[this._propNames[3]] = this._color4.slice(0); - if (this._shader && this._shader['default']) { - this._shader['default'].u_color4.set(c); - } - }; - - this.getColorStop1 = function () { - return this._colorStop1; - }; - - this.setColorStop1 = function (s) { - this._colorStop1 = s; - if (this._shader && this._shader['default']) { - this._shader['default'].u_colorStop1.set([s]); - } - }; - - this.getColorStop2 = function () { - return this._colorStop2; - }; - - this.setColorStop2 = function (s) { - this._colorStop2 = s; - if (this._shader && this._shader['default']) { - this._shader['default'].u_colorStop2.set([s]); - } - }; - - this.getColorStop3 = function () { - return this._colorStop3; - }; - - this.setColorStop3 = function (s) { - this._colorStop3 = s; - if (this._shader && this._shader['default']) { - this._shader['default'].u_colorStop3.set([s]); - } - }; - - this.getColorStop4 = function () { - return this._colorStop4; - }; - - this.setColorStop4 = function (s) { - this._colorStop4 = s; - if (this._shader && this._shader['default']) { - this._shader['default'].u_colorStop4.set([s]); - } - }; - - this.getColorCount = function () { - return this._colorCount; - }; - - this.setColorCount = function (c) { - this._colorCount = c; - if (this._shader && this._shader['default']) { - this._shader['default'].u_colorCount.set([c]); - } - }; - - this.isAnimated = function () { - return false; - }; + + this.isAnimated = function () { return false; }; + this.getShaderDef = function() { return radialGradientMaterialDef; }; /////////////////////////////////////////////////////////////////////// // Material Property Accessors /////////////////////////////////////////////////////////////////////// - this._propNames = ["color1", "color2", "color3", "color4", "colorStop1", "colorStop2", "colorStop3", "colorStop4" ]; + this._propNames = ["u_color1", "u_color2", "u_color3", "u_color4", "u_colorStop1", "u_colorStop2", "u_colorStop3", "u_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); - this._propValues[this._propNames[1]] = this._color2.slice(0); - this._propValues[this._propNames[2]] = this._color3.slice(0); - this._propValues[this._propNames[3]] = this._color4.slice(0); + this._propValues[this._propNames[0]] = this._defaultColor1.slice(0); + this._propValues[this._propNames[1]] = this._defaultColor2.slice(0); + this._propValues[this._propNames[2]] = this._defaultColor3.slice(0); + this._propValues[this._propNames[3]] = this._defaultColor4.slice(0); - this._propValues[this._propNames[4]] = this._colorStop1; - this._propValues[this._propNames[5]] = this._colorStop2; - this._propValues[this._propNames[6]] = this._colorStop3; - this._propValues[this._propNames[7]] = this._colorStop4; - - this.setProperty = function (prop, value) { - if (prop === "color") prop = "color1"; - - // 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 "color1": this.setColor1(value); break; - case "color2": this.setColor2(value); break; - case "color3": this.setColor3(value); break; - case "color4": this.setColor4(value); break; - case "colorStop1": this.setColorStop1(value); break; - case "colorStop2": this.setColorStop2(value); break; - case "colorStop3": this.setColorStop3(value); break; - case "colorStop4": this.setColorStop4(value); break; - } - - //this.updateValuesInShader(); - }; + this._propValues[this._propNames[4]] = this._defaultColorStop1; + this._propValues[this._propNames[5]] = this._defaultColorStop2; + this._propValues[this._propNames[6]] = this._defaultColorStop3; + this._propValues[this._propNames[7]] = this._defaultColorStop4; /////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////// // Methods /////////////////////////////////////////////////////////////////////// - // duplcate method requirde - this.dup = function () { - // allocate a new material - var newMat = new RadialGradientMaterial(); - - // copy over the current values; - var propNames = [], propValues = [], propTypes = [], propLabels = []; - this.getAllProperties( propNames, propValues, propTypes, propLabels); - var n = propNames.length; - for (var i=0; i