From 2d68f944e93b201deb46015392e706b7a24201c9 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 8 Feb 2012 14:24:48 -0800 Subject: Fixed several typos in Materials import/export code to support toggling between 2d and 3d shape modes. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/RDGE/GLMaterial.js | 2 +- js/helper-classes/RDGE/GLRectangle.js | 4 +- .../RDGE/Materials/BumpMetalMaterial.js | 10 ++--- js/helper-classes/RDGE/Materials/FlatMaterial.js | 48 ++++++++++++++-------- js/helper-classes/RDGE/Materials/UberMaterial.js | 6 +-- js/helper-classes/RDGE/MaterialsLibrary.js | 2 +- 6 files changed, 43 insertions(+), 29 deletions(-) (limited to 'js/helper-classes/RDGE') diff --git a/js/helper-classes/RDGE/GLMaterial.js b/js/helper-classes/RDGE/GLMaterial.js index 51c27ace..e1a68abd 100644 --- a/js/helper-classes/RDGE/GLMaterial.js +++ b/js/helper-classes/RDGE/GLMaterial.js @@ -186,7 +186,7 @@ function GLMaterial( world ) var endKey = "endMaterial\n"; var index = importStr.indexOf( endKey ); index += endKey.length; - rtnStr = importStr.substr( index ); + var rtnStr = importStr.substr( index ); return rtnStr; } diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js index 8535a683..b88ecc71 100644 --- a/js/helper-classes/RDGE/GLRectangle.js +++ b/js/helper-classes/RDGE/GLRectangle.js @@ -177,8 +177,8 @@ function GLRectangle() this._strokeWidth = Number( this.getPropertyFromString( "strokeWidth: ", importStr ) ); this._innerRadius = Number( this.getPropertyFromString( "innerRadius: ", importStr ) ); this._strokeStyle = Number( this.getPropertyFromString( "strokeStyle: ", importStr ) ); - var strokeMaterialName = Number( this.getPropertyFromString( "strokeMat: ", importStr ) ); - var fillMaterialName = Number( this.getPropertyFromString( "fillMat: ", importStr ) ); + var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); + var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); this._strokeStyle = Number( this.getPropertyFromString( "strokeColor: ", importStr ) ); this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); diff --git a/js/helper-classes/RDGE/Materials/BumpMetalMaterial.js b/js/helper-classes/RDGE/Materials/BumpMetalMaterial.js index 0aa3ee78..59720611 100644 --- a/js/helper-classes/RDGE/Materials/BumpMetalMaterial.js +++ b/js/helper-classes/RDGE/Materials/BumpMetalMaterial.js @@ -52,7 +52,7 @@ function BumpMetalMaterial() /////////////////////////////////////////////////////////////////////// // Material Property Accessors /////////////////////////////////////////////////////////////////////// - this._propNames = ["lightDiff", "diffuseMap", "normalMap", "specularMap"]; + this._propNames = ["lightDiff", "diffuseTexture", "normalMap", "specularTexture"]; this._propLabels = ["Diffuse Color", "Diffuse Map", "Bump Map", "Specular Map"]; this._propTypes = ["color", "file", "file", "file"]; this._propValues = []; @@ -122,7 +122,7 @@ function BumpMetalMaterial() exportStr += "lightDiff: " + this.getLightDiff() + "\n"; exportStr += "diffuseTexture: " + this.getDiffuseTexture() + "\n"; exportStr += "specularTexture: " + this.getSpecularTexture() + "\n"; - exportStr += "normalTexture: " + this.getNormalTexture() + "\n"; + exportStr += "normalMap: " + this.getNormalTexture() + "\n"; // every material needs to terminate like this exportStr += "endMaterial\n"; @@ -143,12 +143,12 @@ function BumpMetalMaterial() var lightDiff = eval( "[" + pu.nextValue( "lightDiff: " ) + "]" ), dt = pu.nextValue( "diffuseTexture: " ), st = pu.nextValue( "specularTexture: " ), - nt = pu.nextValue( "normalTexture: " ); + nt = pu.nextValue( "normalMap: " ); - this.setProperty( "lightDiff", lightDif); + this.setProperty( "lightDiff", lightDiff); this.setProperty( "diffuseTexture", dt ); this.setProperty( "specularTexture", st ); - this.setProperty( "normalTexture", nt ); + this.setProperty( "normalMap", nt ); var endKey = "endMaterial\n"; var index = importStr.indexOf( endKey ); diff --git a/js/helper-classes/RDGE/Materials/FlatMaterial.js b/js/helper-classes/RDGE/Materials/FlatMaterial.js index 5177a8a0..a5c079a8 100644 --- a/js/helper-classes/RDGE/Materials/FlatMaterial.js +++ b/js/helper-classes/RDGE/Materials/FlatMaterial.js @@ -63,11 +63,12 @@ function FlatMaterial() this.setProperty = function( prop, value ) { - // make sure we have legitimate imput + // make sure we have legitimate input if (this.validateProperty( prop, value )) { - this._color = value.slice(0); - this._shader.colorMe[prop].set(value); + this._propValues[prop] = value; + if (this._shader && this._shader.colorMe) + this._shader.colorMe[prop].set(value); } } /////////////////////////////////////////////////////////////////////// @@ -76,7 +77,7 @@ function FlatMaterial() { // this function should be overridden by subclasses var exportStr = "material: " + this.getShaderName() + "\n"; - exportStr = "name: " + this.getName() + "\n"; + exportStr += "name: " + this.getName() + "\n"; if (this._shader) exportStr += "color: " + String(this._shader.colorMe.color) + "\n"; @@ -87,19 +88,32 @@ function FlatMaterial() return exportStr; } - this.import = function( importStr ) - { - var pu = new ParseUtils( importStr ); - var material = pu.nextValue( "material: " ); - if (material != this.getShaderName()) throw new Error( "ill-formed material" ); - this.setName( pu.nextValue( "material: ") ); - var color = pu.nextValue( "color: " ); - - var endKey = "endMaterial\n"; - var index = importStr.indexOf( endKey ) + endKey.len; - var rtnStr = importStr.substr( index ); - return rtnStr; - } + this.import = function( importStr ) + { + var pu = new ParseUtils( importStr ); + var material = pu.nextValue( "material: " ); + if (material != this.getShaderName()) throw new Error( "ill-formed material" ); + this.setName( pu.nextValue( "name: ") ); + + var rtnStr; + try + { + var color = eval( "[" + pu.nextValue( "color: " ) + "]" ); + + this.setProperty( "color", color); + + var endKey = "endMaterial\n"; + var index = importStr.indexOf( endKey ); + index += endKey.length; + rtnStr = importStr.substr( index ); + } + catch (e) + { + throw new Error( "could not import material: " + importStr ); + } + + return rtnStr; + } } // used to create unique names diff --git a/js/helper-classes/RDGE/Materials/UberMaterial.js b/js/helper-classes/RDGE/Materials/UberMaterial.js index a8254465..f3acdaa6 100644 --- a/js/helper-classes/RDGE/Materials/UberMaterial.js +++ b/js/helper-classes/RDGE/Materials/UberMaterial.js @@ -45,9 +45,9 @@ function UberMaterial() /////////////////////////////////////////////////////////////////////// // Material Property Accessors /////////////////////////////////////////////////////////////////////// - this._propNames = ["ambientColor", "diffuseColor", "specularColor", "specularPower" , "diffuseMap", "normalMap", "specularMap", "environmentMap", "environmentAmount", "dummy" ]; - this._propLabels = ["Ambient Color", "Diffuse Color", "Specular Color", "Specular Power", "Texture Map", "Bump Map", "Specular Map", "Environment Map", "Environment Map Amount", "Dummy" ]; - this._propTypes = ["color", "color", "color", "float", "file", "file", "file", "file", "float", "checkbox"]; + this._propNames = ["ambientColor", "diffuseColor", "specularColor", "specularPower" , "diffuseMap", "normalMap", "specularMap", "environmentMap", "environmentAmount" ]; + this._propLabels = ["Ambient Color", "Diffuse Color", "Specular Color", "Specular Power", "Texture Map", "Bump Map", "Specular Map", "Environment Map", "Environment Map Amount" ]; + this._propTypes = ["color", "color", "color", "float", "file", "file", "file", "file", "float" ]; this._propValues = []; this._propValues[ this._propNames[0] ] = this._ambientColor.slice(0); diff --git a/js/helper-classes/RDGE/MaterialsLibrary.js b/js/helper-classes/RDGE/MaterialsLibrary.js index 9616b525..e7fc51ac 100644 --- a/js/helper-classes/RDGE/MaterialsLibrary.js +++ b/js/helper-classes/RDGE/MaterialsLibrary.js @@ -141,7 +141,7 @@ var MaterialsLibrary = Object.create(Object.prototype, { case "julia": mat = new JuliaMaterial(); break; case "mandel": mat = new MandelMaterial(); break; case "plasma": mat = new PlasmaMaterial(); break; - case "bumpMetal": mat = new PlasmaMaterial(); break; + case "bumpMetal": mat = new BumpMetalMaterial(); break; case "uber": mat = new UberMaterial(); break; default: -- cgit v1.2.3 From 09030b2230631961e972bd3ee8537239741b243d Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 9 Feb 2012 08:50:42 -0800 Subject: Reversed the orientation of one of the triangles for WebGL rendering. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/RDGE/GLLine.js | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) (limited to 'js/helper-classes/RDGE') diff --git a/js/helper-classes/RDGE/GLLine.js b/js/helper-classes/RDGE/GLLine.js index bd3cbc26..67379b52 100644 --- a/js/helper-classes/RDGE/GLLine.js +++ b/js/helper-classes/RDGE/GLLine.js @@ -77,11 +77,16 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro this.getStrokeMaterial = function() { return this._strokeMaterial; } this.setStrokeMaterial = function(m) { this._strokeMaterial = m; } - this.getStrokeColor = function() { return this._strokeColor; } + this.getStrokeColor = function() { return this._strokeColor; } //this.setStrokeColor = function(c) { this._strokeColor = c; } - this.getStrokeStyle = function() { return this._strokeStyle; } - this.setStrokeStyle = function(s) { this._strokeStyle = s; } + this.getStrokeStyle = function() { return this._strokeStyle; } + this.setStrokeStyle = function(s) { this._strokeStyle = s; } + + this.getFillMaterial = function() { return null; } + + this.setStrokeMaterial = function(m) { this._strokeMaterial = m; } + this.getStrokeMaterial = function() { return this._strokeMaterial; } this.getWidth = function() { return this._width; } this.setWidth = function(w) { this._width = w; } @@ -184,9 +189,9 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro xFill+x, yFill+y, 0.0, -xFill+x, -yFill+y, 0.0, - xFill+x, yFill+y, 0.0, + xFill+x, -yFill+y, 0.0, -xFill+x, -yFill+y, 0.0, - xFill+x, -yFill+y, 0.0 + xFill+x, yFill+y, 0.0 ]; } else if(this._slope === "horizontal") @@ -199,10 +204,10 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro xFill+x, yFill+y, 0.0, -xFill+x, -yFill+y, 0.0, - xFill+x, yFill+y, 0.0, + xFill+x, -yFill+y, 0.0, -xFill+x, -yFill+y, 0.0, - xFill+x, -yFill+y, 0.0 - ]; + xFill+x, yFill+y, 0.0 + ]; } else if(this._slope > 0) { @@ -212,9 +217,9 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro -xFill+2*xAdj+x, yFill+y, 0.0, xFill-2*xAdj+x, -yFill+y, 0.0, - -xFill+2*xAdj+x, yFill+y, 0.0, + xFill+x, -yFill+2*yAdj+y, 0.0, xFill-2*xAdj+x, -yFill+y, 0.0, - xFill+x, -yFill+2*yAdj+y, 0.0 + -xFill+2*xAdj+x, yFill+y, 0.0 ]; } else @@ -225,9 +230,9 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro -xFill+2*xAdj+x, -yFill+y, 0.0, xFill-2*xAdj+x, yFill+y, 0.0, - -xFill+2*xAdj+x, -yFill+y, 0.0, + xFill+x, yFill-2*yAdj+y, 0.0, xFill-2*xAdj+x, yFill+y, 0.0, - xFill+x, yFill-2*yAdj+y, 0.0 + -xFill+2*xAdj+x, -yFill+y, 0.0 ]; } } -- cgit v1.2.3 From 8b1c3431be14b12ea5f66fe940f579c740784724 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 9 Feb 2012 08:51:04 -0800 Subject: Changed the rendering for canvas 2D rectangle. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/RDGE/GLRectangle.js | 137 +++++++++++++++------------------- 1 file changed, 62 insertions(+), 75 deletions(-) (limited to 'js/helper-classes/RDGE') diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js index b88ecc71..2f242414 100644 --- a/js/helper-classes/RDGE/GLRectangle.js +++ b/js/helper-classes/RDGE/GLRectangle.js @@ -312,72 +312,71 @@ function GLRectangle() var width = Math.round(this.getWidth()), height = Math.round(this.getHeight()); - // get the top left point pt = [inset, inset]; // top left corner - rad = this.getTLRadius() - inset; - if (rad < 0) rad = 0; - pt[1] += rad; - if (MathUtils.fpSign(rad) == 0) pt[1] = 0; - ctx.moveTo( pt[0], pt[1] ); - - // get the bottom left point - pt = [inset, height - inset]; - rad = this.getBLRadius() - inset; - if (rad < 0) rad = 0; - pt[1] -= rad; - ctx.lineTo( pt[0], pt[1] ); - - // get the bottom left arc - if (MathUtils.fpSign(rad) > 0) - { - ctr = [ this.getBLRadius(), height - this.getBLRadius() ]; - //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); - ctx.arc( ctr[0], ctr[1], rad, Math.PI, 0.5*Math.PI, true ); - } - - // do the bottom of the rectangle - pt = [width - inset, height - inset]; - rad = this.getBRRadius() - inset; - if (rad < 0) rad = 0; - pt[0] -= rad; - ctx.lineTo( pt[0], pt[1] ); - - // get the bottom right arc - if (MathUtils.fpSign(rad) > 0) - { - ctr = [width - this.getBRRadius(), height - this.getBRRadius()]; - //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); - ctx.arc( ctr[0], ctr[1], rad, 0.5*Math.PI, 0.0, true ); - } - // get the right of the rectangle - pt = [width - inset, inset]; - rad = this.getTRRadius() - inset; - if (rad < 0) rad = 0; - pt[1] += rad; - ctx.lineTo( pt[0], pt[1] ); + var tlRad = this._tlRadius; //top-left radius + var trRad = this._trRadius; + var blRad = this._blRadius; + var brRad = this._brRadius; - // do the top right corner - if (MathUtils.fpSign(rad) > 0) + if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) { - ctr = [width - this.getTRRadius(), this.getTRRadius()]; - //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); - ctx.arc( ctr[0], ctr[1], rad, 0.0, -0.5*Math.PI, true ); + ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); } - - // do the top of the rectangle - pt = [inset, inset] - rad = this.getTLRadius() - inset; - if (rad < 0) rad = 0; - pt[0] += rad; - ctx.lineTo( pt[0], pt[1] ); - - // do the top left corner - if (MathUtils.fpSign(rad) > 0) + else { - ctr = [this.getTLRadius(), this.getTLRadius()]; - //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); - ctx.arc( ctr[0], ctr[1], rad, -0.5*Math.PI, Math.PI, true ); + // get the top left point + rad = tlRad - inset; + if (rad < 0) rad = 0; + pt[1] += rad; + if (MathUtils.fpSign(rad) == 0) pt[1] = inset; + ctx.moveTo( pt[0], pt[1] ); + + // get the bottom left point + pt = [inset, height - inset]; + rad = blRad - inset; + if (rad < 0) rad = 0; + pt[1] -= rad; + ctx.lineTo( pt[0], pt[1] ); + + // get the bottom left curve + if (MathUtils.fpSign(rad) > 0) + ctx.quadraticCurveTo( inset, height-inset, inset+rad, height-inset ); + + // do the bottom of the rectangle + pt = [width - inset, height - inset]; + rad = brRad - inset; + if (rad < 0) rad = 0; + pt[0] -= rad; + ctx.lineTo( pt[0], pt[1] ); + + // get the bottom right arc + if (MathUtils.fpSign(rad) > 0) + ctx.quadraticCurveTo( width-inset, height-inset, width-inset, height-inset-rad ); + + // get the right of the rectangle + pt = [width - inset, inset]; + rad = trRad - inset; + if (rad < 0) rad = 0; + pt[1] += rad; + ctx.lineTo( pt[0], pt[1] ); + + // do the top right corner + if (MathUtils.fpSign(rad) > 0) + ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); + + // do the top of the rectangle + pt = [inset, inset] + rad = tlRad - inset; + if (rad < 0) rad = 0; + pt[0] += rad; + ctx.lineTo( pt[0], pt[1] ); + + // do the top left corner + if (MathUtils.fpSign(rad) > 0) + ctx.quadraticCurveTo( inset, inset, inset, inset+rad ); + else + ctx.lineTo( inset, 2*inset ); } } @@ -396,32 +395,20 @@ function GLRectangle() var w = world.getViewportWidth(), h = world.getViewportHeight(); - // draw the fill + // set the fill ctx.beginPath(); ctx.fillStyle = "#990000"; - //ctx.strokeStyle = "#0000ff"; if (this._fillColor) ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); - //ctx.lineWidth = 0; - //ctx.rect( lw, lw, w - 2*lw, h- 2*lw ); - //this.renderPath( lw, ctx ) - //ctx.fill(); - //ctx.closePath(); - - // draw the stroke - //ctx.beginPath(); - //ctx.fillStyle = "#990000"; + // set the stroke ctx.strokeStyle = "#0000ff"; if (this._strokeColor) ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); ctx.lineWidth = lw; - //ctx.rect( 0.5*lw, 0.5*lw, w-lw, h-lw ); var inset = Math.ceil( 0.5*lw ) + 0.5; -// console.log( "linewidth: " + lw + ", inset: " + inset+ ", width: " + Math.round(this.getWidth()) + ", height: " + Math.round(this.getHeight()) ); this.renderPath( inset, ctx ); - //this.renderPath( lw, ctx ); ctx.fill(); ctx.stroke(); ctx.closePath(); @@ -1193,4 +1180,4 @@ ShapePrimitive.create = function(coords, normals, uvs, indices, primType, ver renderer.createPrimitive(prim, vertexCount); return prim; -} \ No newline at end of file +} -- cgit v1.2.3 From d83fb1180aee8b046074b27ebd01aae378363a46 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 9 Feb 2012 12:19:16 -0800 Subject: Fixed bad merge in FlatMaterials. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/RDGE/Materials/FlatMaterial.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/helper-classes/RDGE') diff --git a/js/helper-classes/RDGE/Materials/FlatMaterial.js b/js/helper-classes/RDGE/Materials/FlatMaterial.js index 83da145e..e2f23d75 100644 --- a/js/helper-classes/RDGE/Materials/FlatMaterial.js +++ b/js/helper-classes/RDGE/Materials/FlatMaterial.js @@ -127,6 +127,7 @@ function FlatMaterial() { } +} // used to create unique names var flatMaterialCounter = 0; -- cgit v1.2.3