From 486842239c71e7964f38a09aacda4970f2a82e1a Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 7 Feb 2012 10:58:14 -0800 Subject: Updated tools and PI to get/set materials by binding to appModel's materials property. This requires us to add FlatMaterial to the list of materials in the MaterialsLibrary. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/RDGE/MaterialsLibrary.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'js/helper-classes/RDGE') diff --git a/js/helper-classes/RDGE/MaterialsLibrary.js b/js/helper-classes/RDGE/MaterialsLibrary.js index edc4f7da..9616b525 100644 --- a/js/helper-classes/RDGE/MaterialsLibrary.js +++ b/js/helper-classes/RDGE/MaterialsLibrary.js @@ -169,6 +169,7 @@ var MaterialsLibrary = Object.create(Object.prototype, { // create the library of stroke and fill materials +var flatMaterial = new FlatMaterial(); var uberMaterial = new UberMaterial(); //var linearGradientMaterial = new LinearGradientMaterial(); //var radialGradientMaterial = new RadialGradientMaterial(); @@ -182,6 +183,7 @@ var uberMaterial = new UberMaterial(); //var plasmaMaterial = new PlasmaMaterial(); var bumpMetalMaterial = new BumpMetalMaterial(); +MaterialsLibrary.addMaterial(flatMaterial); //MaterialsLibrary.addMaterial(linearGradientMaterial); //MaterialsLibrary.addMaterial(radialGradientMaterial); //MaterialsLibrary.addMaterial(radialBlurMaterial); -- cgit v1.2.3 From 3a8875c288049b466bfeb8b7f0510fd8cbfb970d Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 7 Feb 2012 13:30:08 -0800 Subject: Supporting switching materials in the PI. Also, moved makeFillMaterial and makeStrokeMaterial functions into GLGeomObj so shapes other than GLRectangle can use these routines. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/RDGE/GLCircle.js | 79 ++++++----------------------------- js/helper-classes/RDGE/GLGeomObj.js | 51 ++++++++++++++++++++++ js/helper-classes/RDGE/GLLine.js | 27 ++---------- js/helper-classes/RDGE/GLRectangle.js | 57 +------------------------ 4 files changed, 68 insertions(+), 146 deletions(-) (limited to 'js/helper-classes/RDGE') diff --git a/js/helper-classes/RDGE/GLCircle.js b/js/helper-classes/RDGE/GLCircle.js index fc2e6460..e6bcba89 100644 --- a/js/helper-classes/RDGE/GLCircle.js +++ b/js/helper-classes/RDGE/GLCircle.js @@ -33,14 +33,6 @@ function GLCircle() this._ovalHeight = this._ovalHeight = 2.0*this.radius; - // stroke and fill colors - this._strokeColor = [0.4, 0.4, 0.4, 1.0]; - this._fillColor = [0.0, 0.6, 0.0, 1.0]; - - // stroke and fill materials - this._fillMaterial; - this._strokeMaterial; - this._strokeStyle = "Solid"; this._aspectRatio = 1.0; @@ -189,19 +181,19 @@ function GLCircle() var reverseRotMat = Matrix.RotationZ( -angle ); // calculate matrices to scale the circle and stroke to fit the bounds of the ellipse - strokeScaleMat = Matrix.I(4); + var strokeScaleMat = Matrix.I(4); strokeScaleMat[0] = xRad; strokeScaleMat[5] = yRad; - fillScaleMat = Matrix.I(4); + var fillScaleMat = Matrix.I(4); fillScaleMat[0] = xRad - xStroke; fillScaleMat[5] = yRad - yStroke; - innerRadiusScaleMat = Matrix.I(4); + var innerRadiusScaleMat = Matrix.I(4); innerRadiusScaleMat[0] = xInnRad; innerRadiusScaleMat[5] = yInnRad; - innerStrokeScaleMat = Matrix.I(4); + var innerStrokeScaleMat = Matrix.I(4); innerStrokeScaleMat[0] = xInnRad - xStroke; innerStrokeScaleMat[5] = yInnRad - yStroke; @@ -233,69 +225,24 @@ function GLCircle() if (fillPrim) { - this._primArray.push( fillPrim ); - - if (this.getFillMaterial()) - fillMaterial = this.getFillMaterial().dup(); - else - fillMaterial = new FlatMaterial(); + fillMaterial = this.makeFillMaterial(); - if (fillMaterial) - { - fillMaterial.init( this.getWorld() ); - if(!this.getFillMaterial() && this._fillColor) - { - fillMaterial.setProperty("color", this._fillColor); - } - this._materialArray.push( fillMaterial ); - this._materialTypeArray.push( "fill" ); - var matNode = fillMaterial.getMaterialNode(); - this._materialNodeArray.push( matNode ); - } + this._primArray.push( fillPrim ); + this._materialNodeArray.push( fillMaterial.getMaterialNode() ); } if (strokePrim0) { - if (this.getStrokeMaterial()) - strokeMaterial = this.getStrokeMaterial().dup(); - else - strokeMaterial = new FlatMaterial(); + strokeMaterial0 = this.makeStrokeMaterial(); - if (strokeMaterial) - { - strokeMaterial.init( this.getWorld() ); - if(!this.getStrokeMaterial() && this._strokeColor) - { - strokeMaterial.setProperty("color", this._strokeColor); - } - this._primArray.push( strokePrim0 ); - - var materialNode = createMaterialNode("ovalFillMaterial"); - this._materialArray.push( strokeMaterial ); - this._materialTypeArray.push( "stroke" ); - this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); - } + this._primArray.push( strokePrim0 ); + this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); } if (strokePrim1) { - if (this.getStrokeMaterial()) - strokeMaterial = this.getStrokeMaterial().dup(); - else - strokeMaterial = new FlatMaterial(); + strokeMaterial2 = this.makeStrokeMaterial(); - if (strokeMaterial) - { - strokeMaterial.init( this.getWorld() ); - if(!this.getStrokeMaterial() && this._strokeColor) - { - strokeMaterial.setProperty("color", this._strokeColor); - } - this._primArray.push( strokePrim1 ); - - var materialNode = createMaterialNode("ovalFillMaterial"); - this._materialArray.push( strokeMaterial ); - this._materialTypeArray.push( "stroke" ); - this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); - } + this._primArray.push( strokePrim1 ); + this._materialNodeArray.push( strokeMaterial2.getMaterialNode() ); } world.updateObject(this); diff --git a/js/helper-classes/RDGE/GLGeomObj.js b/js/helper-classes/RDGE/GLGeomObj.js index 72019703..62fbf562 100644 --- a/js/helper-classes/RDGE/GLGeomObj.js +++ b/js/helper-classes/RDGE/GLGeomObj.js @@ -37,6 +37,10 @@ function GLGeomObj() this.m_world = null; + // stroke and fill colors + this._strokeColor; + this._fillColor; + // stroke and fill materials this._fillMaterial; this._strokeMaterial; @@ -104,6 +108,53 @@ function GLGeomObj() this.setFillColor = function(c) { this.setMaterialColor(c, "fill"); } this.setStrokeColor = function(c) { this.setMaterialColor(c, "stroke"); } + this.makeStrokeMaterial = function() + { + var strokeMaterial; + if (this.getStrokeMaterial()) + strokeMaterial = this.getStrokeMaterial().dup(); + else + strokeMaterial = new FlatMaterial(); + + if (strokeMaterial) + { + strokeMaterial.init( this.getWorld() ); + if(this._strokeColor) + { + strokeMaterial.setProperty("color", this._strokeColor); + } + } + + this._materialArray.push( strokeMaterial ); + this._materialTypeArray.push( "stroke" ); + + return strokeMaterial; + } + + this.makeFillMaterial = function() + { + var fillMaterial; + if (this.getFillMaterial()) + fillMaterial = this.getFillMaterial().dup(); + else + fillMaterial = new FlatMaterial(); + + if (fillMaterial) + { + fillMaterial.init( this.getWorld() ); + //if(!this.getFillMaterial() && this._fillColor) + if (this._fillColor) + { + fillMaterial.setProperty("color", this._fillColor); + } + } + + this._materialArray.push( fillMaterial ); + this._materialTypeArray.push( "fill" ); + + return fillMaterial; + } + this.translate = function(v) { diff --git a/js/helper-classes/RDGE/GLLine.js b/js/helper-classes/RDGE/GLLine.js index 9eaa69d1..bd3cbc26 100644 --- a/js/helper-classes/RDGE/GLLine.js +++ b/js/helper-classes/RDGE/GLLine.js @@ -27,12 +27,6 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro this._strokeWidth = 0.25; - // stroke colors - this._strokeColor = [0.4, 0.4, 0.4, 1.0]; - - // stroke materials - this._strokeMaterial; - this._strokeStyle = "Solid"; if (arguments.length > 0) @@ -267,26 +261,11 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro } var prim = ShapePrimitive.create(strokeVertices, strokeNormals, strokeTextures, indices, g_Engine.getContext().renderer.TRIANGLES, indices.length); - this._primArray.push( prim ); - var strokeMaterial; - if (this.getStrokeMaterial()) - strokeMaterial = this.getStrokeMaterial().dup(); - else - strokeMaterial = new FlatMaterial(); + var strokeMaterial = this.makeStrokeMaterial(); - if (strokeMaterial) - { - strokeMaterial.init( this.getWorld() ); - if(!this.getStrokeMaterial() && this._strokeColor) - { - strokeMaterial.setProperty("color", this._strokeColor); - } - } - - this._materialArray.push( strokeMaterial ); - this._materialTypeArray.push( "stroke" ); - this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); + this._primArray.push( prim ); + this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); world.updateObject(this); } diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js index 1334d7e6..151b15a3 100644 --- a/js/helper-classes/RDGE/GLRectangle.js +++ b/js/helper-classes/RDGE/GLRectangle.js @@ -33,14 +33,6 @@ function GLRectangle() this._strokeWidth = 0.25; - // stroke and fill colors - this._strokeColor; - this._fillColor; - - // stroke and fill materials - this._fillMaterial; - this._strokeMaterial; - this._strokeStyle = "Solid"; this.init = function(world, xOffset, yOffset, width, height, strokeSize, strokeColor, fillColor, tlRadius, trRadius, blRadius, brRadius, strokeMaterial, fillMaterial, strokeStyle) @@ -298,53 +290,6 @@ function GLRectangle() world.updateObject(this); } - this.makeStrokeMaterial = function() - { - var strokeMaterial; - if (this.getStrokeMaterial()) - strokeMaterial = this.getStrokeMaterial().dup(); - else - strokeMaterial = new FlatMaterial(); - - if (strokeMaterial) - { - strokeMaterial.init( this.getWorld() ); - if(this._strokeColor) - { - strokeMaterial.setProperty("color", this._strokeColor); - } - } - - this._materialArray.push( strokeMaterial ); - this._materialTypeArray.push( "stroke" ); - - return strokeMaterial; - } - - this.makeFillMaterial = function() - { - var fillMaterial; - if (this.getFillMaterial()) - fillMaterial = this.getFillMaterial().dup(); - else - fillMaterial = new FlatMaterial(); - - if (fillMaterial) - { - fillMaterial.init( this.getWorld() ); - //if(!this.getFillMaterial() && this._fillColor) - if (this._fillColor) - { - fillMaterial.setProperty("color", this._fillColor); - } - } - - this._materialArray.push( fillMaterial ); - this._materialTypeArray.push( "fill" ); - - return fillMaterial; - } - this.renderQuadraticBezier = function( bPts, ctx ) { if (!bPts) return; @@ -1217,7 +1162,7 @@ ShapePrimitive.create = function(coords, normals, uvs, indices, primType, ver "a_normal":{'type':renderer.VS_ELEMENT_FLOAT3, 'bufferIndex':1, 'bufferUsage': renderer.BUFFER_STATIC}, "texcoord":{'type':renderer.VS_ELEMENT_FLOAT2, 'bufferIndex':2, 'bufferUsage': renderer.BUFFER_STATIC}, - "a_texcoord":{'type':renderer.VS_ELEMENT_FLOAT2, 'bufferIndex':2, 'bufferUsage': renderer.BUFFER_STATIC}, + "a_texcoord":{'type':renderer.VS_ELEMENT_FLOAT2, 'bufferIndex':2, 'bufferUsage': renderer.BUFFER_STATIC} }; -- cgit v1.2.3 From e8e21367e59bb521801fe2e843f42ad5bca5ea9f Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 7 Feb 2012 13:52:54 -0800 Subject: Fixing some typos and undeclared variables in GLRectangle and ShapesController. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/RDGE/GLRectangle.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/helper-classes/RDGE') diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js index 151b15a3..8535a683 100644 --- a/js/helper-classes/RDGE/GLRectangle.js +++ b/js/helper-classes/RDGE/GLRectangle.js @@ -271,8 +271,8 @@ function GLRectangle() // stroke var strokeMaterial = this.makeStrokeMaterial(); - prim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial) - this._primArray.push( prim ); + var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); + this._primArray.push( strokePrim ); this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); // fill @@ -283,8 +283,8 @@ function GLRectangle() xFill -= strokeSize; yFill -= strokeSize; var fillMaterial = this.makeFillMaterial(); - prim = this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial) - this._primArray.push( prim ); + var fillPrim = this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); + this._primArray.push( fillPrim ); this._materialNodeArray.push( fillMaterial.getMaterialNode() ); world.updateObject(this); -- cgit v1.2.3 From aec849d91e4b697d496b9ede28b5d89cf2283781 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 7 Feb 2012 14:18:13 -0800 Subject: id's must start with a letter, so our workaround for using uuid for RDGE canvas id's won't work because they often start with a number. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/RDGE/GLWorld.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/helper-classes/RDGE') diff --git a/js/helper-classes/RDGE/GLWorld.js b/js/helper-classes/RDGE/GLWorld.js index cc44da50..59f0bda0 100644 --- a/js/helper-classes/RDGE/GLWorld.js +++ b/js/helper-classes/RDGE/GLWorld.js @@ -240,7 +240,7 @@ function GLWorld( canvas, use3D ) rdgeStarted = true; // TODO - temporary fix for RDGE id's - this._canvas.id = this._canvas.uuid; + this._canvas.id = "rdge_" + this._canvas.uuid; g_Engine.registerCanvas(this._canvas, this); RDGEStart( this._canvas ); -- cgit v1.2.3