From 725c2175f20b5e0829518f725fd26cc077748bdf Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 25 May 2012 13:35:10 -0700 Subject: Parameters for twistVertex material --- assets/shaders/Cloud.frag.glsl | 2 - assets/shaders/TwistVert.frag.glsl | 1 - assets/shaders/TwistVert.vert.glsl | 11 +- js/lib/rdge/materials/material.js | 1 + js/lib/rdge/materials/twist-vert-material.js | 362 ++++++++++----------- .../materials-popup.reel/materials-popup.js | 8 + 6 files changed, 187 insertions(+), 198 deletions(-) diff --git a/assets/shaders/Cloud.frag.glsl b/assets/shaders/Cloud.frag.glsl index 2447fd79..cd70d1a0 100644 --- a/assets/shaders/Cloud.frag.glsl +++ b/assets/shaders/Cloud.frag.glsl @@ -18,8 +18,6 @@ varying vec2 v_texCoord0; void main() { vec4 c = texture2D(u_tex0, v_texCoord0); - //c.a *= u_surfaceAlpha; - //if ((c.r == 0.0) && (c.b == 0.0) && (c.g == 0.0) && (c.a == 1.0)) c = vec4( 0.0, 0.0, 1.0, 1.0 ); gl_FragColor = c; } \ No newline at end of file diff --git a/assets/shaders/TwistVert.frag.glsl b/assets/shaders/TwistVert.frag.glsl index f8490615..01c32c42 100644 --- a/assets/shaders/TwistVert.frag.glsl +++ b/assets/shaders/TwistVert.frag.glsl @@ -28,5 +28,4 @@ void main() col = texture2D(u_tex1, v_texcoord).xyz; gl_FragColor = vec4(col, 1.0); - //gl_FragColor = v_color; } diff --git a/assets/shaders/TwistVert.vert.glsl b/assets/shaders/TwistVert.vert.glsl index 29cb30ea..9734063d 100644 --- a/assets/shaders/TwistVert.vert.glsl +++ b/assets/shaders/TwistVert.vert.glsl @@ -19,7 +19,7 @@ attribute vec2 texcoord; uniform float u_limit1; uniform float u_limit2; uniform float u_twistAmount; -uniform float u_center; +//uniform float u_center; // texture sampler uniforms uniform sampler2D u_tex0; @@ -63,17 +63,14 @@ void main(void) vec2 uv = texcoord; v_texcoord = texcoord; - //v_color = vec4(texcoord.x, texcoord.y, 0, 1); - v_zNormal = 1.0; if (uv.x < u_limit2) { float angle = GetAngle( uv.x ); float cs = cos(angle), sn = sin(angle); - pos.y -= u_center; vec3 ctrPt = pos; - float y = pos.y*cs - pos.z*sn + u_center; + float y = pos.y*cs - pos.z*sn; // + u_center; pos.z = pos.y*sn + pos.z*cs; pos.y = y; @@ -85,11 +82,7 @@ void main(void) cs = cos(angle); sn = sin(angle); rotMat = mat3( vec3( 1.0, 0.0, 0.0 ), vec3( 0.0, cs, sn ), vec3( 0.0, -sn, cs ) ); pt2 = rotMat * pt2; - pt0.y += u_center; pt1.y += u_center; pt2.y += u_center; - //vec4 nrm = u_projMatrix * u_mvMatrix * vec4( cross(pt1-pt0, pt2-pt0), 1.0 ); vec4 nrm = vec4( cross(pt1-pt0, pt2-pt0), 1.0 ); - - //v_zNormal = normal.y*sn + normal.z*cs; v_zNormal = -nrm.z; } diff --git a/js/lib/rdge/materials/material.js b/js/lib/rdge/materials/material.js index 9f0ae6f1..b9de9988 100755 --- a/js/lib/rdge/materials/material.js +++ b/js/lib/rdge/materials/material.js @@ -192,6 +192,7 @@ var Material = function GLMaterial( world ) { rtnVal = ((valType == "object") && (value.length >= 3)); break; + case "angle": case "float": rtnVal = (valType == "number"); break; diff --git a/js/lib/rdge/materials/twist-vert-material.js b/js/lib/rdge/materials/twist-vert-material.js index 7d9dd6d6..4d5ab88d 100644 --- a/js/lib/rdge/materials/twist-vert-material.js +++ b/js/lib/rdge/materials/twist-vert-material.js @@ -13,235 +13,227 @@ var Texture = require("js/lib/rdge/texture").Texture; /////////////////////////////////////////////////////////////////////// var TwistVertMaterial = function TwistVertMaterial() { - // initialize the inherited members + // initialize the inherited members this.inheritedFrom = Material; - this.inheritedFrom(); + this.inheritedFrom(); - /////////////////////////////////////////////////////////////////////// - // Instance variables - /////////////////////////////////////////////////////////////////////// - this._name = "TwistVertMaterial"; - this._shaderName = "twistVert"; + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + this._name = "TwistVertMaterial"; + this._shaderName = "twistVert"; - this._color = [1, 0, 0, 1]; - - this._tex0 = 'assets/images/rocky-normal.jpg'; - this._tex1 = 'assets/images/metal.png'; + this._tex0 = 'assets/images/rocky-normal.jpg'; + this._tex1 = 'assets/images/metal.png'; this._glTex0; this._glTex1; - this._angle = 0.0; - this._deltaTime = 0.01; + this._angle = 0.0; + this._deltaTime = 0.01; + this._speed = 1.0; - /////////////////////////////////////////////////////////////////////// - // Property Accessors - /////////////////////////////////////////////////////////////////////// - this.getColor = function () { return this._color; }; - this.getShaderName = function () { return this._shaderName; }; + /////////////////////////////////////////////////////////////////////// + // Property Accessors + /////////////////////////////////////////////////////////////////////// + this.getShaderName = function () { return this._shaderName; }; - this.isAnimated = function () { return true; }; + this.isAnimated = function () { return true; }; - this.hasVertexDeformation = function () { return this._hasVertexDeformation; }; - this._hasVertexDeformation = true; - this._vertexDeformationTolerance = 0.02; // should be a property - - /////////////////////////////////////////////////////////////////////// - // Methods - /////////////////////////////////////////////////////////////////////// - // duplcate method requirde + this.hasVertexDeformation = function () { return this._hasVertexDeformation; }; + this._hasVertexDeformation = true; + this._vertexDeformationTolerance = 0.02; // should be a property + + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + // duplcate method requirde 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 TwistVertMaterial(); + // get the current values; + var propNames = [], propValues = [], propTypes = [], propLabels = []; + this.getAllProperties(propNames, propValues, propTypes, propLabels); + + // allocate a new material + var newMat = new TwistVertMaterial(); // 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) + this.init = function (world) { - this.setWorld(world); - - // set up the shader - this._shader = new RDGE.jshader(); - this._shader.def = twistVertShaderDef; - this._shader.init(); + this.setWorld(world); - // set the defaults - this._shader.twistMe.color.set(this.getColor()); + // set up the shader + this._shader = new RDGE.jshader(); + this._shader.def = twistVertShaderDef; + this._shader.init(); - // set up the material node - this._materialNode = RDGE.createMaterialNode("twistVertMaterial" + "_" + world.generateUniqueNodeID()); - this._materialNode.setShader(this._shader); + // set up the material node + this._materialNode = RDGE.createMaterialNode("twistVertMaterial" + "_" + world.generateUniqueNodeID()); + this._materialNode.setShader(this._shader); // set up the texture maps this.updateTextures(); - // initialize the twist vert properties - this.updateShaderValues(); - }; - - - /////////////////////////////////////////////////////////////////////// - // Material Property Accessors - /////////////////////////////////////////////////////////////////////// - this._propNames = ["color", "u_limit1", "u_limit2", "u_center", "u_twistAmount", "u_tex0", "u_tex1"]; - this._propLabels = ["Color", "Minimum Parameter Value", "Center Paramater Value", "Center", "Twist Amount", "Front facing texture map", "Back facing texture map"]; - this._propTypes = ["color", "float", "float", "float", "float", "file", "file"]; - this._propValues = []; - - // initialize the property values - this._propValues[this._propNames[0]] = this._color.slice(); - this._propValues[this._propNames[1]] = 0.25; - this._propValues[this._propNames[2]] = 0.75; - this._propValues[this._propNames[3]] = 0.0; - this._propValues[this._propNames[4]] = 2.0 * Math.PI; - this._propValues[this._propNames[5]] = this._tex0.slice(); - this._propValues[this._propNames[6]] = this._tex1.slice(); - - this.setProperty = function (prop, value) + // initialize the twist vert properties + this.updateShaderValues(); + }; + + + /////////////////////////////////////////////////////////////////////// + // Material Property Accessors + /////////////////////////////////////////////////////////////////////// + this._propNames = [ "u_limit1", "u_limit2", "u_twistAmount", "speed", "u_tex0", "u_tex1"]; + this._propLabels = [ "Start Parameter", "End Paramater", "Twist Amount", "Speed", "Front facing texture map", "Back facing texture map"]; + this._propTypes = [ "float", "float", "angle", "float", "file", "file"]; + this._propValues = []; + + // initialize the property values + this._propValues[this._propNames[0]] = 0.0; + this._propValues[this._propNames[1]] = 1.0; + this._propValues[this._propNames[2]] = 2.0 * Math.PI; + this._propValues[this._propNames[3]] = this._speed; + this._propValues[this._propNames[4]] = this._tex0.slice(); + this._propValues[this._propNames[5]] = this._tex1.slice(); + + this.setProperty = function (prop, value) { - // make sure we have legitimate input - if (this.validateProperty(prop, value)) + // make sure we have legitimate input + if (this.validateProperty(prop, value)) { - switch (prop) { - case "color": - case "u_tex1": - case "u_tex0": this._propValues[prop] = value.slice(); break; - default: this._propValues[prop] = value; break; - } - - this.updateShaderValues(); - } - }; - /////////////////////////////////////////////////////////////////////// - - this.exportJSON = function () { - var jObj = + switch (prop) { + case "u_tex1": + case "u_tex0": this._propValues[prop] = value ? value.slice() : null; + this.updateTextures(); + break; + + default: + this._propValues[prop] = value; + break; + } + + this.updateShaderValues(); + } + }; + /////////////////////////////////////////////////////////////////////// + + this.exportJSON = function () { + var jObj = { - 'material': this.getShaderName(), - 'name': this.getName(), - 'color': this._propValues["color"] + 'material': this.getShaderName(), + 'name': this.getName(), } - return jObj; - }; + return jObj; + }; - this.importJSON = function (jObj) { - if (this.getShaderName() != jObj.material) throw new Error("ill-formed material"); - this.setName(jObj.name); + this.importJSON = function (jObj) { + if (this.getShaderName() != jObj.material) throw new Error("ill-formed material"); + this.setName(jObj.name); - try { - var color = jObj.color; - this.setProperty("color", color); - } - catch (e) { - throw new Error("could not import material: " + importStr); - } - }; + try { + } + catch (e) { + throw new Error("could not import material: " + importStr); + } + }; - this.update = function (time) + this.update = function (time) { - if (this._shader && this._shader.twistMe) + if (this._shader && this._shader.twistMe) { var technique = this._shader.twistMe; - - var angle = this._angle; - angle += this._deltaTime; - if (angle > this._propValues["u_twistAmount"]) + + var angle = this._angle; + angle += this._deltaTime * this._propValues["speed"]; + if (angle > this._propValues["u_twistAmount"]) { - angle = this._propValues["u_twistAmount"]; - this._deltaTime = -this._deltaTime; - } - else if (angle < 0.0) + angle = this._propValues["u_twistAmount"]; + this._deltaTime = -this._deltaTime; + } + else if (angle < 0.0) { - angle = 0; - this._deltaTime = -this._deltaTime; - } - this._angle = angle; - this._shader.twistMe["u_twistAmount"].set([angle]); + angle = 0; + this._deltaTime = -this._deltaTime; + } + this._angle = angle; + this._shader.twistMe["u_twistAmount"].set([angle]); var tex; if (this._glTex0) - { - if (this._glTex0.isAnimated()) - this._glTex0.render(); - tex = this._glTex0.getTexture(); + { + if (this._glTex0.isAnimated()) + this._glTex0.render(); + tex = this._glTex0.getTexture(); if (tex) technique.u_tex0.set( tex ); - } + } if (this._glTex1) - { - if (this._glTex1.isAnimated()) - this._glTex1.render(); - tex = this._glTex1.getTexture(); + { + if (this._glTex1.isAnimated()) + this._glTex1.render(); + tex = this._glTex1.getTexture(); if (tex) technique.u_tex1.set( tex ); - } + } - } - }; + } + }; - this.updateShaderValues = function () + this.updateShaderValues = function () { - if (this._shader && this._shader.twistMe) + if (this._shader && this._shader.twistMe) { - var nProps = this._propNames.length; - for (var i = 0; i < nProps; i++) + var nProps = this._propNames.length; + for (var i = 0; i < nProps; i++) { - var propName = this._propNames[i]; - var propValue = this._propValues[propName]; - switch (propName) + var propName = this._propNames[i]; + var propValue = this._propValues[propName]; + switch (propName) { - case "u_tex0": - case "u_tex1": - break; - - case "color": - this._shader.twistMe[propName].set(propValue); + case "u_tex0": + case "u_tex1": break; - default: - this._shader.twistMe[propName].set([propValue]); + default: + if (this._shader.twistMe[propName]) + this._shader.twistMe[propName].set([propValue]); break; - } - } - } - }; + } + } + } + }; - this.updateTextures = function () + this.updateTextures = function () { - var material = this._materialNode; - if (material) + var material = this._materialNode; + if (material) { - var technique = material.shaderProgram['twistMe']; - var renderer = RDGE.globals.engine.getContext().renderer; - if (renderer && technique) + var technique = material.shaderProgram['twistMe']; + var renderer = RDGE.globals.engine.getContext().renderer; + if (renderer && technique) { var texMapName; - texMapName = this._propValues[this._propNames[5]]; - var wrap = 'REPEAT', mips = true; - //var tex = this.loadTexture(texMapName, wrap, mips); + texMapName = this._propValues[this._propNames[4]]; + var wrap = 'REPEAT', mips = true; this._glTex0 = new Texture( this.getWorld(), texMapName, wrap, mips ); tex = this._glTex0.getTexture(); - if (tex) technique.u_tex0.set(tex); + //if (tex) + technique.u_tex0.set(tex); - texMapName = this._propValues[this._propNames[6]]; - //tex = this.loadTexture(texMapName, wrap, mips); + texMapName = this._propValues[this._propNames[5]]; this._glTex1 = new Texture( this.getWorld(), texMapName, wrap, mips ); tex = this._glTex1.getTexture(); - if (tex) technique.u_tex1.set(tex); - } - } - } + //if (tex) + technique.u_tex1.set(tex); + } + } + } }; /////////////////////////////////////////////////////////////////////////////////////// @@ -250,12 +242,12 @@ var TwistVertMaterial = function TwistVertMaterial() // shader spec (can also be loaded from a .JSON file, or constructed at runtime) twistVertShaderDef = { - 'shaders': { // shader files - 'defaultVShader': "assets/shaders/TwistVert.vert.glsl", - 'defaultFShader': "assets/shaders/TwistVert.frag.glsl" - }, - 'techniques': { // rendering control - 'twistMe': [ // simple color pass + 'shaders': { // shader files + 'defaultVShader': "assets/shaders/TwistVert.vert.glsl", + 'defaultFShader': "assets/shaders/TwistVert.frag.glsl" + }, + 'techniques': { // rendering control + 'twistMe': [ // simple color pass { 'vshader': 'defaultVShader', 'fshader': 'defaultFShader', @@ -263,28 +255,26 @@ twistVertShaderDef = // attributes 'attributes': { - 'vert': { 'type': 'vec3' }, - 'normal': { 'type': 'vec3' }, - 'texcoord': { 'type': 'vec2' } + 'vert': { 'type': 'vec3' }, + 'normal': { 'type': 'vec3' }, + 'texcoord': { 'type': 'vec2' } }, // attributes 'params': { - 'color': { 'type': 'vec4' }, - - 'u_limit1': { 'type': 'float' }, - 'u_limit2': { 'type': 'float' }, - 'u_minVal': { 'type': 'float' }, - 'u_maxVal': { 'type': 'float' }, - 'u_center': { 'type': 'float' }, - 'u_twistAmount': { 'type': 'float' } + 'u_limit1': { 'type': 'float' }, + 'u_limit2': { 'type': 'float' }, + 'u_minVal': { 'type': 'float' }, + 'u_maxVal': { 'type': 'float' }, + 'u_center': { 'type': 'float' }, + 'u_twistAmount': { 'type': 'float' } } - } + } ] - } + } }; if (typeof exports === "object") { - exports.TwistVertMaterial = TwistVertMaterial; + exports.TwistVertMaterial = TwistVertMaterial; } diff --git a/js/panels/Materials/materials-popup.reel/materials-popup.js b/js/panels/Materials/materials-popup.reel/materials-popup.js index 1e92e144..1237e602 100755 --- a/js/panels/Materials/materials-popup.reel/materials-popup.js +++ b/js/panels/Materials/materials-popup.reel/materials-popup.js @@ -166,6 +166,10 @@ exports.MaterialsPopup = Montage.create(Component, { rtnValue = value; break; + case "angle": + rtnValue = value*3.14159/180.0; + break; + case "file": if (value && (value.length > 0)) { @@ -324,6 +328,10 @@ exports.MaterialsPopup = Montage.create(Component, { obj = this.createFloatData( propLabels[i], propValues[i] ); break; + case "angle": + obj = this.createFloatData( propLabels[i], propValues[i]*180.0/3.14159 ); + break; + case "file": obj = this.createFileData( propLabels[i], propValues[i] ); break; -- cgit v1.2.3