From dc92188fef67d7a2032173d7746fbc16a951a366 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 17 May 2012 15:15:43 -0700 Subject: Exposing parameters for pulse and plasma materials --- assets/shaders/Pulse.frag.glsl | 12 +- assets/shaders/plasma.frag.glsl | 16 ++- js/lib/rdge/materials/plasma-material.js | 98 ++++++++++++++- js/lib/rdge/materials/pulse-material.js | 208 ++++++++++++++++++++----------- 4 files changed, 251 insertions(+), 83 deletions(-) diff --git a/assets/shaders/Pulse.frag.glsl b/assets/shaders/Pulse.frag.glsl index b24c9bef..9aeb05c9 100644 --- a/assets/shaders/Pulse.frag.glsl +++ b/assets/shaders/Pulse.frag.glsl @@ -6,16 +6,22 @@ uniform float u_time; uniform vec2 u_resolution; uniform sampler2D u_tex0; +uniform float u_speed; +uniform float u_xscale; +uniform float u_yscale; + void main(void) { vec2 halfres = u_resolution.xy/2.0; vec2 cPos = gl_FragCoord.xy; - cPos.x -= 0.5*halfres.x*sin(u_time/2.0)+0.3*halfres.x*cos(u_time)+halfres.x; - cPos.y -= 0.4*halfres.y*sin(u_time/5.0)+0.3*halfres.y*cos(u_time)+halfres.y; + float time = u_time * u_speed; + + cPos.x -= u_xscale*halfres.x*sin(time/2.0)+0.3*halfres.x*cos(time)+halfres.x; + cPos.y -= u_yscale*halfres.y*sin(time/5.0)+0.3*halfres.y*cos(time)+halfres.y; float cLength = length(cPos); - vec2 uv = gl_FragCoord.xy/u_resolution.xy+(cPos/cLength)*sin(cLength/30.0-u_time*10.0)/25.0; + vec2 uv = gl_FragCoord.xy/u_resolution.xy+(cPos/cLength)*sin(cLength/30.0-time*10.0)/25.0; vec3 col = texture2D(u_tex0,uv).xyz*50.0/cLength; gl_FragColor = vec4(col,1.0); diff --git a/assets/shaders/plasma.frag.glsl b/assets/shaders/plasma.frag.glsl index 248288a6..4a5ac3da 100644 --- a/assets/shaders/plasma.frag.glsl +++ b/assets/shaders/plasma.frag.glsl @@ -16,15 +16,21 @@ precision highp float; varying vec2 v_uv; uniform float u_time; -uniform vec4 color; + +uniform float u_wave; +uniform float u_wave1; +uniform float u_wave2; +uniform float u_speed; void main(void) { float x = v_uv.x ; float y = v_uv.y ; - float time = u_time; - float wave = (cos(time + y / 0.2 + cos(x / 0.3 + cos((y / 0.1))))); - float wave1 = (sin(abs(wave + y/0.6))); - float wave2 = (sin(abs(wave1 + y/0.8))); + float time = u_time*u_speed; + + float wave = (cos(time + y / (u_wave+0.2) + cos(x / (u_wave+0.3) + cos((y / (u_wave+0.1)))))); + float wave1 = (sin(abs(wave + y/u_wave1))); + float wave2 = (sin(abs(wave1 + y/u_wave2))); + gl_FragColor = vec4( abs(vec3(wave2,wave1,wave)),1.0); } diff --git a/js/lib/rdge/materials/plasma-material.js b/js/lib/rdge/materials/plasma-material.js index 02172a6b..1db207d6 100644 --- a/js/lib/rdge/materials/plasma-material.js +++ b/js/lib/rdge/materials/plasma-material.js @@ -17,6 +17,23 @@ var PlasmaMaterial = function PlasmaMaterial() { this._dTime = 0.01; this._speed = 1.0; + this._wave = 0.0; + this._wave1 = 0.6; + this._wave2 = 0.8; + + /////////////////////////////////////////////////////////////////////// + // Properties + /////////////////////////////////////////////////////////////////////// + this._propNames = ["wave", "wave1", "wave2", "speed"]; + this._propLabels = ["Wave", "Wave 1", "Wave 2", "Speed"]; + this._propTypes = ["float", "float", "float", "float"]; + + this._propValues = []; + 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; + /////////////////////////////////////////////////////////////////////// // Property Accessors @@ -28,10 +45,51 @@ var PlasmaMaterial = function PlasmaMaterial() { /////////////////////////////////////////////////////////////////////// // 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 ) { - // plasma has no properties + // 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(); }; /////////////////////////////////////////////////////////////////////// @@ -56,12 +114,37 @@ 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.update = function( time ) { this._shader['default'].u_time.set( [this._time] ); this._time += this._dTime; @@ -74,7 +157,10 @@ var PlasmaMaterial = function PlasmaMaterial() { 'material' : this.getShaderName(), 'name' : this.getName(), 'speed' : this._speed, - 'dTime' : this._dTime + 'dTime' : this._dTime, + 'wave' : this._wave, + 'wave1' : this._wave1, + 'wave2' : this._wave2 }; return jObj; @@ -84,6 +170,10 @@ var PlasmaMaterial = function PlasmaMaterial() { { this._speed = jObj.speed; this._dTime = jObj.dTime; + + this._wave = jObj.wave; + this._wave1 = jObj.wave1; + this._wave2 = jObj.wave2; }; }; @@ -115,6 +205,10 @@ var plasmaShaderDef = 'params' : { 'u_time' : { 'type' : 'float' }, + 'u_speed': { 'type' : 'float' }, + 'u_wave' : { 'type' : 'float' }, + 'u_wave1': { 'type' : 'float' }, + 'u_wave2': { 'type' : 'float' } }, // render states diff --git a/js/lib/rdge/materials/pulse-material.js b/js/lib/rdge/materials/pulse-material.js index c2969501..56c10f21 100644 --- a/js/lib/rdge/materials/pulse-material.js +++ b/js/lib/rdge/materials/pulse-material.js @@ -13,28 +13,30 @@ var Texture = require("js/lib/rdge/texture").Texture; /////////////////////////////////////////////////////////////////////// var PulseMaterial = function PulseMaterial() { - var MaterialLibrary = require("js/models/materials-model").MaterialsModel; + var MaterialLibrary = require("js/models/materials-model").MaterialsModel; // initialize the inherited members - this.inheritedFrom = Material; - this.inheritedFrom(); + this.inheritedFrom = Material; + this.inheritedFrom(); - /////////////////////////////////////////////////////////////////////// - // Instance variables - /////////////////////////////////////////////////////////////////////// + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// this._name = "PulseMaterial"; this._shaderName = "pulse"; this._texMap = 'assets/images/cubelight.png'; - //this._texMap = 'assets/images/cloud10.png'; - //this._texMap = 'texture'; this._time = 0.0; this._dTime = 0.01; - /////////////////////////////////////////////////////////////////////// - // Property Accessors - /////////////////////////////////////////////////////////////////////// + this._xScale = 0.5; + this._yScale = 0.4; + this._speed = 1.0; + + /////////////////////////////////////////////////////////////////////// + // Property Accessors + /////////////////////////////////////////////////////////////////////// this.getName = function() { return this._name; }; this.getShaderName = function() { return this._shaderName; }; @@ -43,22 +45,25 @@ var PulseMaterial = function PulseMaterial() this.isAnimated = function() { return true; }; - /////////////////////////////////////////////////////////////////////// - // Material Property Accessors - /////////////////////////////////////////////////////////////////////// - this._propNames = ["texmap"]; - this._propLabels = ["Texture map"]; - this._propTypes = ["file"]; + /////////////////////////////////////////////////////////////////////// + // Material Property Accessors + /////////////////////////////////////////////////////////////////////// + this._propNames = ["texmap", "xscale", "yscale", "speed" ]; + this._propLabels = ["Texture map", "X Range", "Y Range", "Speed" ]; + this._propTypes = ["file", "float", "float", "float"]; this._propValues = []; this._propValues[ this._propNames[0] ] = this._texMap.slice(0); + this._propValues[ this._propNames[1] ] = this._xScale; + this._propValues[ this._propNames[2] ] = this._yScale; + this._propValues[ this._propNames[3] ] = this._speed; - this.setProperty = function( prop, value ) { + 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) { @@ -66,34 +71,52 @@ var PulseMaterial = function PulseMaterial() this.setTextureMap(value); break; + case "speed": + this._speed = value; + this._propValues[ this._propNames[3] ] = this._speed; + this.updateParameters(); + break; + + case "xscale": + this._xScale = value; + this._propValues[ this._propNames[1] ] = this._xScale; + this.updateParameters(); + break; + + case "yscale": + this._yScale = value; + this._propValues[ this._propNames[2] ] = this._yScale; + this.updateParameters(); + break; + case "color": break; } }; - /////////////////////////////////////////////////////////////////////// + /////////////////////////////////////////////////////////////////////// - /////////////////////////////////////////////////////////////////////// - // Methods - /////////////////////////////////////////////////////////////////////// + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// // duplicate method required this.dup = function( world ) { // save the world if (world) this.setWorld( world ); - // get the current values; - var propNames = [], propValues = [], propTypes = [], propLabels = []; - this.getAllProperties(propNames, propValues, propTypes, propLabels); - - // allocate a new material - var newMat = new PulseMaterial(); + // get the current values; + var propNames = [], propValues = [], propTypes = [], propLabels = []; + this.getAllProperties(propNames, propValues, propTypes, propLabels); + + // allocate a new material + var newMat = new PulseMaterial(); // copy over the current values; - var n = propNames.length; - for (var i = 0; i < n; i++) - newMat.setProperty(propNames[i], propValues[i]); + var n = propNames.length; + for (var i = 0; i < n; i++) + newMat.setProperty(propNames[i], propValues[i]); - return newMat; + return newMat; }; this.init = function( world ) { @@ -116,11 +139,12 @@ var PulseMaterial = function PulseMaterial() this._time = 0; if (this._shader && this._shader['default']) { this._shader['default'].u_time.set( [this._time] ); - } + } + this.updateParameters(); - // set up the texture - var texMapName = this._propValues[this._propNames[0]]; - this._glTex = new Texture( world, texMapName ); + // 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(); @@ -128,24 +152,51 @@ var PulseMaterial = function PulseMaterial() this.update( 0 ); }; + this.updateParameters = function() + { + this._propValues[ this._propNames[1] ] = this._xScale; + this._propValues[ this._propNames[2] ] = this._yScale; + 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_xscale.set( [this._xScale] ); + this._shader['default'].u_yscale.set( [this._yScale] ); + } + } + } + } + this.updateTexture = function() { + + var texMapName = this._propValues[this._propNames[0]]; + this._glTex = new Texture( this.getWorld(), texMapName ); + var material = this._materialNode; if (material) { var technique = material.shaderProgram['default']; var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { var wrap = 'REPEAT', mips = true; - var tex; - if (this._glTex) - { - if (this._glTex.isAnimated()) - this._glTex.render(); - tex = this._glTex.getTexture(); - } + var tex; + if (this._glTex) + { + if (this._glTex.isAnimated()) + this._glTex.render(); + tex = this._glTex.getTexture(); + } if (tex) { technique.u_tex0.set( tex ); - } + } } } }; @@ -158,23 +209,23 @@ var PulseMaterial = function PulseMaterial() var technique = material.shaderProgram['default']; var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) - { - if (this._glTex) - { - //this.updateTexture(); - if (this._glTex.isAnimated()) - this._glTex.render(); - tex = this._glTex.getTexture(); - if (tex) - technique.u_tex0.set( tex ); - } + { + if (this._glTex) + { + //this.updateTexture(); + if (this._glTex.isAnimated()) + this._glTex.render(); + tex = this._glTex.getTexture(); + if (tex) + technique.u_tex0.set( tex ); + } if (this._shader && this._shader['default']) { this._shader['default'].u_time.set( [this._time] ); - } + } this._time += this._dTime; - if (this._time > 200.0) this._time = 0.0; + if (this._time > 200.0) this._time = 0.0; } } }; @@ -198,27 +249,35 @@ var PulseMaterial = function PulseMaterial() 'material' : this.getShaderName(), 'name' : this.getName(), 'texture' : this._propValues[this._propNames[0]], - 'dTime' : this._dTime + 'dTime' : this._dTime, + 'speed' : this._speed, + 'xScale' : this._xScale, + 'yScale' : this._yScale }; return jObj; }; this.importJSON = function( jObj ) { - if (this.getShaderName() != jObj.material) throw new Error( "ill-formed material" ); - this.setName( jObj.name ); + if (this.getShaderName() != jObj.material) throw new Error( "ill-formed material" ); + this.setName( jObj.name ); - try { + try { this._propValues[this._propNames[0]] = jObj.texture; this._texMap = jObj.texture; - if (jObj.dTime) { - this._dTime = jObj.dTime; - } - } - catch (e) - { - throw new Error( "could not import material: " + jObj ); - } + if (jObj.dTime) { + this._dTime = jObj.dTime; + } + + this._speed = jObj.speed; + this._xScale = jObj.xScale; + this._yScale = jObj.yScale; + this.updateParameters(); + } + catch (e) + { + throw new Error( "could not import material: " + jObj ); + } }; }; @@ -249,9 +308,12 @@ var pulseMaterialDef = // parameters 'params' : { - 'u_tex0': { 'type' : 'tex2d' }, - 'u_time' : { 'type' : 'float' }, - 'u_resolution' : { 'type' : 'vec2' }, + 'u_tex0' : { 'type' : 'tex2d' }, + 'u_time' : { 'type' : 'float' }, + 'u_speed' : { 'type' : 'float' }, + 'u_xscale' : { 'type' : 'float' }, + 'u_yscale' : { 'type' : 'float' }, + 'u_resolution' : { 'type' : 'vec2' } }, // render states @@ -268,6 +330,6 @@ var pulseMaterialDef = //PulseMaterial.prototype = new Material(); if (typeof exports === "object") { - exports.PulseMaterial = PulseMaterial; + exports.PulseMaterial = PulseMaterial; } -- cgit v1.2.3