From db2bb0ab5d2747f0d07878e3b8a7d2d10c755110 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 7 Jun 2012 17:07:21 -0700 Subject: Material cleanup --- assets/shaders/Deform.frag.glsl | 3 +- assets/shaders/Fly.frag.glsl | 5 +- assets/shaders/Julia.frag.glsl | 3 +- assets/shaders/Keleidoscope.frag.glsl | 8 +- js/lib/rdge/materials/bump-metal-material.js | 187 +---------- js/lib/rdge/materials/deform-material.js | 21 +- js/lib/rdge/materials/flag-material.js | 110 +----- js/lib/rdge/materials/flat-material.js | 113 ++----- js/lib/rdge/materials/fly-material.js | 38 +-- js/lib/rdge/materials/julia-material.js | 52 +-- js/lib/rdge/materials/keleidoscope-material.js | 52 +-- js/lib/rdge/materials/linear-gradient-material.js | 252 +------------- js/lib/rdge/materials/pulse-material.js | 4 - js/lib/rdge/materials/water-material.js | 387 ++++++---------------- 14 files changed, 222 insertions(+), 1013 deletions(-) diff --git a/assets/shaders/Deform.frag.glsl b/assets/shaders/Deform.frag.glsl index 1dbe45a0..a2bb4fa0 100644 --- a/assets/shaders/Deform.frag.glsl +++ b/assets/shaders/Deform.frag.glsl @@ -3,6 +3,7 @@ precision highp float; #endif uniform float u_time; +uniform float u_speed; uniform vec2 u_resolution; //uniform vec4 mouse; uniform sampler2D u_tex0; @@ -19,7 +20,7 @@ void main(void) float r2 = sqrt(dot(p+m,p+m)); vec2 uv; - uv.x = 0.2*u_time + (r1-r2)*0.25; + uv.x = 0.2*u_time*u_speed + (r1-r2)*0.25; uv.y = sin(2.0*(a1-a2)); float w = r1*r2*0.8; diff --git a/assets/shaders/Fly.frag.glsl b/assets/shaders/Fly.frag.glsl index f99b5ab8..d36928a1 100644 --- a/assets/shaders/Fly.frag.glsl +++ b/assets/shaders/Fly.frag.glsl @@ -4,6 +4,7 @@ precision highp float; uniform vec2 u_resolution; uniform float u_time; +uniform float u_speed; uniform sampler2D u_tex0; void main(void) @@ -11,13 +12,13 @@ void main(void) vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / u_resolution.xy; vec2 uv; - float an = u_time*.25; + float an = u_time*u_speed*.25; float x = p.x*cos(an)-p.y*sin(an); float y = p.x*sin(an)+p.y*cos(an); uv.x = .25*x/abs(y); - uv.y = .20*u_time + .25/abs(y); + uv.y = .20*u_time*u_speed + .25/abs(y); gl_FragColor = vec4(texture2D(u_tex0,uv).xyz * y*y, 1.0); } diff --git a/assets/shaders/Julia.frag.glsl b/assets/shaders/Julia.frag.glsl index 68cda703..7e616c40 100644 --- a/assets/shaders/Julia.frag.glsl +++ b/assets/shaders/Julia.frag.glsl @@ -4,11 +4,12 @@ precision highp float; uniform vec2 u_resolution; uniform float u_time; +uniform float u_speed; void main(void) { vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / u_resolution.xy; - vec2 cc = vec2( cos(.25*u_time), sin(.25*u_time*1.423) ); + vec2 cc = vec2( cos(.25*u_time*u_speed), sin(.25*u_time*u_speed*1.423) ); float dmin = 1000.0; vec2 z = p*vec2(1.33,1.0); diff --git a/assets/shaders/Keleidoscope.frag.glsl b/assets/shaders/Keleidoscope.frag.glsl index 7d1bdb17..7d95a95b 100644 --- a/assets/shaders/Keleidoscope.frag.glsl +++ b/assets/shaders/Keleidoscope.frag.glsl @@ -4,20 +4,24 @@ precision highp float; uniform vec2 u_resolution; uniform float u_time; +uniform float u_speed; uniform sampler2D u_tex0; void main(void) { vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / u_resolution.xy; vec2 uv; + + float time = u_time * u_speed; float a = atan(p.y,p.x); float r = sqrt(dot(p,p)); uv.x = 7.0*a/3.1416; - uv.y = -u_time+ sin(7.0*r+u_time) + .7*cos(u_time+7.0*a); + uv.y = -time + sin(7.0*r+time) + .7*cos( + +7.0*a); - float w = .5+.5*(sin(u_time+7.0*r)+ .7*cos(u_time+7.0*a)); + float w = .5+.5*(sin(time+7.0*r)+ .7*cos(time+7.0*a)); vec3 col = texture2D(u_tex0,uv*.5).xyz; diff --git a/js/lib/rdge/materials/bump-metal-material.js b/js/lib/rdge/materials/bump-metal-material.js index 30624f7b..f73f1d34 100755 --- a/js/lib/rdge/materials/bump-metal-material.js +++ b/js/lib/rdge/materials/bump-metal-material.js @@ -19,11 +19,10 @@ var BumpMetalMaterial = function BumpMetalMaterial() { this._name = "BumpMetalMaterial"; this._shaderName = "bumpMetal"; - this._lightDiff = [0.3, 0.3, 0.3, 1.0]; - - this._diffuseTexture = "assets/images/metal.png"; - this._specularTexture = "assets/images/silver.png"; - this._normalTexture = "assets/images/normalMap.png"; + + this._defaultDiffuseTexture = "assets/images/metal.png"; + this._defaultSpecularTexture = "assets/images/silver.png"; + this._defaultNormalTexture = "assets/images/normalMap.png"; // keep the array of initialized textures this._textures = []; @@ -33,77 +32,22 @@ var BumpMetalMaterial = function BumpMetalMaterial() { /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// - this.getName = function() { - return this._name; - }; - - this.getShaderName = function() { - return this._shaderName; - }; - - this.getLightDiff = function() { - return this._lightDiff; - }; - - this.setLightDiff = function(ld) { - this._lightDiff = ld; - // Bad property name. Commenting for now - - if (this._shader && this._shader['default']){ - this._shader['default'].u_light0Diff.set( ld ); - } - - }; - - this.getDiffuseTexture = function() { return this._propValues[this._propNames[1]] ? this._propValues[this._propNames[1]].slice() : null }; - this.setDiffuseTexture = function(m) { this._propValues[this._propNames[1]] = m ? m.slice(0) : null; this.initTexture(1); }; - - this.getNormalTexture = function() { return this._propValues[this._propNames[2]] ? this._propValues[this._propNames[2]].slice() : null }; - this.setNormalTexture = function(m) { this._propValues[this._propNames[2]] = m ? m.slice(0) : null; this.initTexture(2); }; - - this.getSpecularTexture = function() { return this._propValues[this._propNames[3]] ? this._propValues[this._propNames[3]].slice() : null }; - this.setSpecularTexture = function(m) { this._propValues[this._propNames[3]] = m ? m.slice(0) : null; this.initTexture(3); }; - this.isAnimated = function() { return true; }; + this.getShaderDef = function() { return bumpMetalMaterialDef; }; /////////////////////////////////////////////////////////////////////// // Material Property Accessors /////////////////////////////////////////////////////////////////////// - this._propNames = ["lightDiff", "diffuseTexture", "normalMap" ]; - this._propLabels = ["Diffuse Color", "Diffuse Map", "Bump Map" ]; - this._propTypes = ["color", "file", "file" ]; + this._propNames = ["u_light0Diff", "u_colMap", "u_normalMap", "u_glowMap" ]; + this._propLabels = ["Diffuse Color", "Diffuse Map", "Bump Map", "Specular Map" ]; + this._propTypes = ["color", "file", "file", "file" ]; this._propValues = []; - this._propValues[ this._propNames[0] ] = this._lightDiff.slice(0); - this._propValues[ this._propNames[1] ] = this._diffuseTexture.slice(0); - this._propValues[ this._propNames[2] ] = this._normalTexture.slice(0); - - // TODO - shader techniques are not all named the same, i.e., FlatMaterial uses "colorMe" and BrickMaterial uses "default" - this.setProperty = function( prop, value ) - { - // every material should do something with the "color" property - if (prop === "color") return; + this._propValues[ this._propNames[0] ] = [0.3, 0.3, 0.3, 1.0]; + this._propValues[ this._propNames[1] ] = this._defaultDiffuseTexture.slice(0); + this._propValues[ this._propNames[2] ] = this._defaultNormalTexture.slice(0); + this._propValues[ this._propNames[3] ] = this._defaultSpecularTexture.slice(0); - // make sure we have legitimate imput - var ok = this.validateProperty( prop, value ); - if (!ok) - { - console.log( "invalid property in Bump Metal Materia;" + prop + " : " + value ); - return; - } - - switch (prop) - { - case "lightDiff": this.setLightDiff( value ); break; - case "diffuseTexture": this.setDiffuseTexture( value ); break; - case "specularTexture": this.setSpecularTexture( value ); break; - case "normalMap": this.setNormalTexture( value ); break; - - default: - console.log( "invalid property to Bump Metal Material: " + prop + ", value: " + value ); - break; - } - }; /////////////////////////////////////////////////////////////////////// // Methods @@ -120,116 +64,13 @@ var BumpMetalMaterial = function BumpMetalMaterial() { this._shader = new RDGE.jshader(); this._shader.def = bumpMetalMaterialDef; this._shader.init(); - this._shader['default'].u_light0Diff.set( this.getLightDiff() ); // set up the material node this._materialNode = RDGE.createMaterialNode( this.getShaderName() + "_" + world.generateUniqueNodeID() ); this._materialNode.setShader(this._shader); - this.initTextures(); - }; - - this.initTexture = function( index ) - { - var dstWorld = this.getWorld(); - if (dstWorld) - { - var texMapName = this._propValues[this._propNames[index]]; - if (texMapName) - { - var texture = new Texture( dstWorld, texMapName ); - this._textures[index] = texture; - } - else - this._textures[index] = null; - - this.updateTexture( index ); - } - } - - this.initTextures = function() - { - var dstWorld = this.getWorld(); - if (dstWorld) - { - // find the world with the given id - for (var i=1; i<=3; i++) - { - this.initTexture( i ); - } - } - } - - this.updateTexture = function( index ) - { - var material = this._materialNode; - if (material) - { - var technique = material.shaderProgram['default']; - var renderer = RDGE.globals.engine.getContext().renderer; - if (renderer && technique) - { - var glTex = this._textures[ index ]; - var tex; - if (glTex) - { - if (glTex.isAnimated()) - glTex.render(); - - tex = glTex.getTexture(); - } - - { - switch (index) - { - case 1: technique.u_colMap.set( tex ); break; - case 2: technique.u_normalMap.set( tex ); break; - case 3: technique.u_glowMap.set( tex ); break; - default: console.log( "invalid map index in BumpMetalMaterial, " + index ); - } - } - } - } - }; - - this.exportJSON = function() - { - var jObj = - { - 'material' : this.getShaderName(), - 'name' : this.getName(), - 'lightDiff' : this.getLightDiff(), - 'diffuseTexture' : this.getDiffuseTexture(), - 'specularTexture' : this.getSpecularTexture(), - 'normalMap' : this.getNormalTexture() - }; - - return jObj; - }; - - this.importJSON = function( jObj ) - { - if (this.getShaderName() != jObj.material) throw new Error( "ill-formed material" ); - this.setName( jObj.name ); - - try - { - var lightDiff = jObj.lightDiff, - dt = jObj.diffuseTexture, - st = jObj.specularTexture, - nt = jObj.normalMap; - - this.setProperty( "lightDiff", lightDiff); - this.setProperty( "diffuseTexture", dt ); - this.setProperty( "specularTexture", st ); - this.setProperty( "normalMap", nt ); - } - catch (e) - { - throw new Error( "could not import BumpMetal material: " + jObj ); - } - - return; + this.setShaderValues(); + this.update(0); }; }; diff --git a/js/lib/rdge/materials/deform-material.js b/js/lib/rdge/materials/deform-material.js index 70742c77..91202b24 100644 --- a/js/lib/rdge/materials/deform-material.js +++ b/js/lib/rdge/materials/deform-material.js @@ -14,7 +14,7 @@ var DeformMaterial = function DeformMaterial() { this._name = "DeformMaterial"; this._shaderName = "deform"; - this._texMap = 'assets/images/rocky-normal.jpg'; + this._defaultTexMap = 'assets/images/rocky-normal.jpg'; this._time = 0.0; this._dTime = 0.01; @@ -24,11 +24,21 @@ var DeformMaterial = function DeformMaterial() { /////////////////////////////////////////////////////////////////////// // all defined in parent PulseMaterial.js // load the local default value - this._propValues[this._propNames[0]] = this._texMap.slice(0); + var u_tex0_index = 0; + this._propNames = ["u_tex0", "u_speed" ]; + this._propLabels = ["Texture map", "Speed" ]; + this._propTypes = ["file", "float" ]; + this._propValues = []; + this._propValues[this._propNames[0]] = this._defaultTexMap.slice(0); + this._propValues[this._propNames[1]] = 1.0; + + this._propValues[ this._propNames[ u_tex0_index] ] = this._defaultTexMap.slice(0); /////////////////////////////////////////////////////////////////////// // Material Property Accessors /////////////////////////////////////////////////////////////////////// + this.isAnimated = function() { return true; }; + this.getShaderDef = function() { return pulseMaterialDef; } /////////////////////////////////////////////////////////////////////// @@ -56,12 +66,8 @@ var DeformMaterial = function DeformMaterial() { 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.updateTexture(); + this.setShaderValues(); this.setResolution([world.getViewportWidth(), world.getViewportHeight()]); this.update(0); }; @@ -96,6 +102,7 @@ var deformMaterialDef = { 'u_tex0': { 'type' : 'tex2d' }, 'u_time' : { 'type' : 'float' }, + 'u_speed' : { 'type' : 'float' }, 'u_resolution' : { 'type' : 'vec2' } }, diff --git a/js/lib/rdge/materials/flag-material.js b/js/lib/rdge/materials/flag-material.js index aaf36ebf..a8c319e4 100644 --- a/js/lib/rdge/materials/flag-material.js +++ b/js/lib/rdge/materials/flag-material.js @@ -32,7 +32,7 @@ var FlagMaterial = function FlagMaterial() { /////////////////////////////////////////////////////////////////////// // all defined in parent PulseMaterial.js // load the local default value - this._propNames = ["texmap", "wavewidth", "waveheight", "speed" ]; + this._propNames = ["u_tex0", "u_waveWidth", "u_waveHeight", "u_speed" ]; this._propLabels = ["Texture map", "Wave Width", "Wave Height", "Speed" ]; this._propTypes = ["file", "float", "float", "float" ]; this._propValues = []; @@ -45,75 +45,14 @@ var FlagMaterial = function FlagMaterial() { // a material can be animated or not. default is not. // Any material needing continuous rendering should override this method - this.isAnimated = function() { return true; }; + this.isAnimated = function() { return true; }; + this.getShaderDef = function() { return flagMaterialDef; } /////////////////////////////////////////////////////////////////////// // Methods /////////////////////////////////////////////////////////////////////// // duplcate method requirde - 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 @@ -129,52 +68,13 @@ var FlagMaterial = function FlagMaterial() { this._materialNode.setShader(this._shader); this._time = 0; - if (this._shader && this._shader['default']) { + if (this._shader && this._shader['default']) this._shader['default'].u_time.set( [this._time] ); - this._shader['default'].u_waveWidth.set( [this._propValues[ this._propNames[1] ]] ); - this._shader['default'].u_waveHeight.set( [this._propValues[ this._propNames[2] ]] ); - } - - // 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.updateParameters(); - this.updateTexture(); + this.setShaderValues(); this.update( 0 ); } - - this.exportJSON = function () { - var jObj = - { - 'material' : this.getShaderName(), - 'name' : this.getName(), - - 'texMap' : this._propValues[this._propNames[0]], - 'waveWidth' : this._propValues[this._propNames[1]], - 'waveHeight' : this._propValues[this._propNames[2]], - 'speed' : this._propValues[this._propNames[3]] - }; - - return jObj; - }; - - this.importJSON = function (jObj) { - if (this.getShaderName() != jObj.material) throw new Error("ill-formed material"); - this.setName(jObj.name); - - try { - - this._texMap = this._propValues[this._propNames[0]] = jObj.texMap; - this._waveWidth = this._propValues[this._propNames[1]] = jObj.waveWidth; - this._waveHeight = this._propValues[this._propNames[2]] = jObj.waveHeight; - this._speed = this._propValues[this._propNames[3]] = jObj.speed; - } - catch (e) { - throw new Error("could not import material: " + importStr); - } - }; }; /////////////////////////////////////////////////////////////////////////////////////// diff --git a/js/lib/rdge/materials/flat-material.js b/js/lib/rdge/materials/flat-material.js index e5498b65..579813b8 100755 --- a/js/lib/rdge/materials/flat-material.js +++ b/js/lib/rdge/materials/flat-material.js @@ -4,13 +4,14 @@ (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; + /////////////////////////////////////////////////////////////////////// // Class GLMaterial // RDGE representation of a material. /////////////////////////////////////////////////////////////////////// -var FlatMaterial = function FlatMaterial() { +var FlatMaterial = function FlatMaterial() +{ /////////////////////////////////////////////////////////////////////// // Instance variables /////////////////////////////////////////////////////////////////////// @@ -22,36 +23,17 @@ var FlatMaterial = function FlatMaterial() { /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// - this.getColor = function () { return this._color; }; this.getShaderName = function () { return this._shaderName; }; + this.isAnimated = function () { return false; }; + this.getTechniqueName = function() { return 'colorMe' }; - this.isAnimated = function () { return false; }; - this.hasVertexDeformation = function() { return false; }; - this._hasVertexDeformation = true; - this._vertexDeformationTolerance = 0.2; - - //////////////////////////////////s///////////////////////////////////// + /////////////////////////////////////////////////////////////////////// // 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 FlatMaterial(); - - // 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) { + this.init = function (world) + { // save the world if (world) { this.setWorld(world); @@ -61,12 +43,11 @@ var FlatMaterial = function FlatMaterial() { this._shader.def = flatShaderDef; this._shader.init(); - // set the defaults - this._shader.colorMe.color.set(this.getColor()); - // set up the material node this._materialNode = RDGE.createMaterialNode("flatMaterial_" + world.generateUniqueNodeID()); this._materialNode.setShader(this._shader); + + this.setShaderValues(); } else throw new Error("GLWorld not supplied to material initialization"); @@ -82,40 +63,6 @@ var FlatMaterial = function FlatMaterial() { this._propValues = []; this._propValues[this._propNames[0]] = this._color; - - this.setProperty = function (prop, value) { - // make sure we have legitimate input - if (this.validateProperty(prop, value)) { - this._propValues[prop] = value; - if (prop === 'color') this._color = value.slice(); - if (this._shader && this._shader.colorMe) { - this._shader.colorMe[prop].set(value); - } - } - }; - /////////////////////////////////////////////////////////////////////// - - this.exportJSON = function () { - var jObj = - { - 'material': this.getShaderName(), - 'name': this.getName(), - 'color': this._propValues["color"] - }; - - return jObj; - }; - - this.importJSON = function (jObj) { - if (this.getShaderName() != jObj.material) throw new Error("ill-formed material"); - this.setName(jObj.name); - - var color = jObj.color; - this.setProperty("color", color); - }; - - this.update = function (time) { - }; }; /////////////////////////////////////////////////////////////////////////////////////// @@ -124,31 +71,31 @@ var FlatMaterial = function FlatMaterial() { // shader spec (can also be loaded from a .JSON file, or constructed at runtime) flatShaderDef = { - 'shaders': { // shader files + 'shaders': { // shader files 'defaultVShader':"assets/shaders/Basic.vert.glsl", 'defaultFShader':"assets/shaders/Basic.frag.glsl" - }, - 'techniques': { // rendering control - 'colorMe':[ // simple color pass - { - 'vshader' : 'defaultVShader', - 'fshader' : 'defaultFShader', - - // attributes - 'attributes' : - { + }, + 'techniques': { // rendering control + 'colorMe':[ // simple color pass + { + 'vshader' : 'defaultVShader', + 'fshader' : 'defaultFShader', + + // attributes + 'attributes' : + { 'vert' : { 'type' : 'vec3' }, 'normal' : { 'type' : 'vec3' }, 'texcoord' : { 'type' : 'vec2' } - }, - // attributes - 'params' : - { - 'color' : { 'type' : 'vec4' } - } - } - ] - } + }, + // attributes + 'params' : + { + 'color' : { 'type' : 'vec4' } + } + } + ] + } }; FlatMaterial.prototype = new Material(); diff --git a/js/lib/rdge/materials/fly-material.js b/js/lib/rdge/materials/fly-material.js index 5e14f3af..12e18f7f 100644 --- a/js/lib/rdge/materials/fly-material.js +++ b/js/lib/rdge/materials/fly-material.js @@ -14,7 +14,7 @@ var FlyMaterial = function FlyMaterial() { this._name = "FlyMaterial"; this._shaderName = "fly"; - this._texMap = 'assets/images/rocky-normal.jpg'; + this._defaultTexMap = 'assets/images/rocky-normal.jpg'; this._time = 0.0; this._dTime = 0.01; @@ -24,28 +24,24 @@ var FlyMaterial = function FlyMaterial() { /////////////////////////////////////////////////////////////////////// // all defined in parent PulseMaterial.js // load the local default value - this._propValues[ this._propNames[0] ] = this._texMap.slice(0); + 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; + + /////////////////////////////////////////////////////////////////////// + // Material Property Accessors + /////////////////////////////////////////////////////////////////////// + this.isAnimated = function() { return true; }; + this.getShaderDef = function() { return flyMaterialDef; } /////////////////////////////////////////////////////////////////////// // 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 FlyMaterial(); - - // 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 @@ -65,12 +61,8 @@ var FlyMaterial = function FlyMaterial() { 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.updateTexture(); + this.setShaderValues(); this.setResolution( [world.getViewportWidth(),world.getViewportHeight()] ); this.update( 0 ); }; diff --git a/js/lib/rdge/materials/julia-material.js b/js/lib/rdge/materials/julia-material.js index a06b1771..63367e16 100644 --- a/js/lib/rdge/materials/julia-material.js +++ b/js/lib/rdge/materials/julia-material.js @@ -14,7 +14,7 @@ var JuliaMaterial = function JuliaMaterial() { this._name = "JuliaMaterial"; this._shaderName = "julia"; - this._texMap = 'assets/images/rocky-normal.jpg'; + this._defaultTexMap = 'assets/images/rocky-normal.jpg'; this._time = 0.0; this._dTime = 0.01; @@ -22,27 +22,22 @@ var JuliaMaterial = function JuliaMaterial() { /////////////////////////////////////////////////////////////////////// // Properties /////////////////////////////////////////////////////////////////////// - // properties inherited from PulseMaterial + var u_speed_index = 0; + this._propNames = [ "u_speed" ]; + this._propLabels = [ "Speed" ]; + this._propTypes = [ "float" ]; + this._propValues = []; + this._propValues[this._propNames[u_speed_index]] = 1.0; + + /////////////////////////////////////////////////////////////////////// + // Material Property Accessors + /////////////////////////////////////////////////////////////////////// + this.isAnimated = function() { return true; }; + this.getShaderDef = function() { return JuliaMaterialDef; } /////////////////////////////////////////////////////////////////////// // 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 JuliaMaterial(); - - // 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 @@ -62,28 +57,11 @@ var JuliaMaterial = function JuliaMaterial() { 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; - } - } - }; } /////////////////////////////////////////////////////////////////////////////////////// @@ -113,8 +91,8 @@ var JuliaMaterialDef = // parameters 'params' : { - 'u_tex0': { 'type' : 'tex2d' }, 'u_time' : { 'type' : 'float' }, + 'u_speed' : { 'type' : 'float' }, 'u_resolution' : { 'type' : 'vec2' }, }, diff --git a/js/lib/rdge/materials/keleidoscope-material.js b/js/lib/rdge/materials/keleidoscope-material.js index e9f1b10e..2754420f 100644 --- a/js/lib/rdge/materials/keleidoscope-material.js +++ b/js/lib/rdge/materials/keleidoscope-material.js @@ -14,7 +14,7 @@ var KeleidoscopeMaterial = function KeleidoscopeMaterial() { this._name = "KeleidoscopeMaterial"; this._shaderName = "keleidoscope"; - this._texMap = 'assets/images/rocky-normal.jpg'; + this._defaultTexMap = 'assets/images/rocky-normal.jpg'; this._time = 0.0; this._dTime = 0.01; @@ -24,11 +24,19 @@ var KeleidoscopeMaterial = function KeleidoscopeMaterial() { /////////////////////////////////////////////////////////////////////// // all defined in parent PulseMaterial.js // load the local default value - this._propValues[ this._propNames[0] ] = this._texMap.slice(0); + 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; /////////////////////////////////////////////////////////////////////// // Material Property Accessors /////////////////////////////////////////////////////////////////////// + this.isAnimated = function() { return true; }; + this.getShaderDef = function() { return keleidoscopeMaterialDef; } /////////////////////////////////////////////////////////////////////// @@ -37,21 +45,6 @@ var KeleidoscopeMaterial = function KeleidoscopeMaterial() { // 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 KeleidoscopeMaterial(); - - // 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 @@ -71,33 +64,11 @@ var KeleidoscopeMaterial = function KeleidoscopeMaterial() { 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.updateTexture(); + 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; - } - } - }; }; /////////////////////////////////////////////////////////////////////////////////////// @@ -128,6 +99,7 @@ var keleidoscopeMaterialDef = 'params' : { 'u_tex0': { 'type' : 'tex2d' }, + 'u_speed' : { 'type' : 'float' }, 'u_time' : { 'type' : 'float' }, 'u_resolution' : { 'type' : 'vec2' }, }, diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js index 2df76d61..80824ee3 100755 --- a/js/lib/rdge/materials/linear-gradient-material.js +++ b/js/lib/rdge/materials/linear-gradient-material.js @@ -31,136 +31,14 @@ var LinearGradientMaterial = function LinearGradientMaterial() { /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// - this.getShaderName = function () { - return this._shaderName; - }; - - this.getName = function () { - return this._name; - }; - - 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.getAngle = function () { - return this._angle; - }; - - this.setAngle = function (a) { - this._angle = a; - - if (this._shader && this._shader['default']) { - this._shader['default'].u_cos_sin_angle.set([Math.cos(a), Math.sin(a)]); - } - }; - - this.isAnimated = function () { - return false; - }; + this.getShaderDef = function() { return linearGradientMaterialDef; } /////////////////////////////////////////////////////////////////////// // Material Property Accessors /////////////////////////////////////////////////////////////////////// - this._propNames = ["color1", "color2", "color3", "color4", "colorStop1", "colorStop2", "colorStop3", "colorStop4", "angle"]; + this._propNames = ["u_color1", "u_color2", "u_color3", "u_color4", "u_colorStop1", "u_colorStop2", "u_colorStop3", "u_colorStop4", "u_cos_sin_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._propTypes = ["color", "color", "color", "color", "float", "float", "float", "float", "vector2d"]; this._propValues = []; this._propValues[this._propNames[0]] = this._color1.slice(0); @@ -173,49 +51,12 @@ var LinearGradientMaterial = function LinearGradientMaterial() { this._propValues[this._propNames[6]] = this._colorStop3; this._propValues[this._propNames[7]] = this._colorStop4; - this._propValues[this._propNames[8]] = this._angle; - - 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 Linear 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; - case "angle": this.setAngle(value); break; - } - }; + this._propValues[this._propNames[8]] = [ Math.cos(this._angle), Math.sin(this._angle) ]; /////////////////////////////////////////////////////////////////////// // Methods /////////////////////////////////////////////////////////////////////// // duplcate method requirde - this.dup = function () { - // allocate a new material - var newMat = new LinearGradientMaterial(); - - // 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