From 22cbc9644b79df60b3f6336f9563debd47fb3ea1 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Thu, 28 Jun 2012 11:44:15 -0700
Subject: Added capability to split a mesh into multiiple parts to avoid buffer
 overflow situations.

---
 js/lib/geom/rectangle.js | 284 +++++++++++++++++++++++++++++------------------
 1 file changed, 179 insertions(+), 105 deletions(-)

(limited to 'js/lib/geom/rectangle.js')

diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 81a8556d..ac8e6c70 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -314,98 +314,105 @@ exports.Rectangle = Object.create(GeomObj, {
         }
     },
 
-    buildBuffers: {
-        value: function() {
-            // get the world
-            var world = this.getWorld();
-            if (!world)  throw( "null world in buildBuffers" );
-            //console.log( "GLRectangle.buildBuffers " + world._worldCount );
-            if (!world._useWebGL)  return;
-
-            // make sure RDGE has the correct context
-            RDGE.globals.engine.setContext( world.getCanvas().rdgeid );
-
-            // create the gl buffer
-            var gl = world.getGLContext();
-
-            var tlRadius = this._tlRadius; //top-left radius
-            var trRadius = this._trRadius;
-            var blRadius = this._blRadius;
-            var brRadius = this._brRadius;
-
-            // declare the arrays to hold the parts
-            this._primArray = [];
-            this._materialArray = [];
-            this._materialTypeArray = [];
-            this._materialNodeArray = [];
-
-            // get the normalized device coordinates (NDC) for
-            // all position and dimensions.
-            var vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
-            var xNDC = 2*this._xOffset/vpw,  yNDC = 2*this._yOffset/vph,
-                xFillNDC = this._width/vpw,  yFillNDC = this._height/vph,
-                strokeSizeNDC = 2*this._strokeWidth/vpw,
-                tlRadiusNDC = 2*tlRadius/vpw,  yTLRadiusNDC = 2*tlRadius/vph,
-                trRadiusNDC = 2*trRadius/vpw,  yTRRadiusNDC = 2*trRadius/vph,
-                blRadiusNDC = 2*blRadius/vpw,  yBLRadiusNDC = 2*blRadius/vph,
-                brRadiusNDC = 2*brRadius/vpw,  yBRRadiusNDC = 2*brRadius/vph;
-
-            var aspect = world.getAspect();
-            var zn = world.getZNear(),  zf = world.getZFar();
-            var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0),
-                b = -t,
-                r = aspect*t,
-                l = -r;
+	buildBuffers: {
+		value: function() {
+			// get the world
+			var world = this.getWorld();
+			if (!world)  throw( "null world in buildBuffers" );
+			//console.log( "GLRectangle.buildBuffers " + world._worldCount );
+			if (!world._useWebGL)  return;
+
+			// make sure RDGE has the correct context
+			RDGE.globals.engine.setContext( world.getCanvas().rdgeid );
+
+			// create the gl buffer
+			var gl = world.getGLContext();
+
+			var tlRadius = this._tlRadius; //top-left radius
+			var trRadius = this._trRadius;
+			var blRadius = this._blRadius;
+			var brRadius = this._brRadius;
+
+			// declare the arrays to hold the parts
+			this._primArray = [];
+			this._materialArray = [];
+			this._materialTypeArray = [];
+			this._materialNodeArray = [];
+
+			// get the normalized device coordinates (NDC) for
+			// all position and dimensions.
+			var vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
+			var xNDC = 2*this._xOffset/vpw,  yNDC = 2*this._yOffset/vph,
+				xFillNDC = this._width/vpw,  yFillNDC = this._height/vph,
+				strokeSizeNDC = 2*this._strokeWidth/vpw,
+				tlRadiusNDC = 2*tlRadius/vpw,  yTLRadiusNDC = 2*tlRadius/vph,
+				trRadiusNDC = 2*trRadius/vpw,  yTRRadiusNDC = 2*trRadius/vph,
+				blRadiusNDC = 2*blRadius/vpw,  yBLRadiusNDC = 2*blRadius/vph,
+				brRadiusNDC = 2*brRadius/vpw,  yBRRadiusNDC = 2*brRadius/vph;
+
+			var aspect = world.getAspect();
+			var zn = world.getZNear(),  zf = world.getZFar();
+			var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0),
+				b = -t,
+				r = aspect*t,
+				l = -r;
+
+			// calculate the object coordinates from their NDC coordinates
+			var z = -world.getViewDistance();
+
+			// get the position of the origin
+			var x = -z*(r-l)/(2.0*zn)*xNDC,
+				y = -z*(t-b)/(2.0*zn)*yNDC;
+
+			// get the x and y fill
+			var xFill = -z*(r-l)/(2.0*zn)*xFillNDC,
+				yFill = -z*(t-b)/(2.0*zn)*yFillNDC;
+
+			// keep some variables giving the overall dimensions of the
+			// rectangle. These values are used to calculate consistent
+			// texture map coordinates across all pieces.
+			this._rectWidth = xFill;  this._rectHeight = yFill;
+
+			// get the stroke size
+			var strokeSize = -z*(r-l)/(2.0*zn)*strokeSizeNDC;
+
+			// get the absolute corner radii
+			tlRadius = -z*(r-l)/(2.0*zn)*tlRadiusNDC,
+			trRadius = -z*(r-l)/(2.0*zn)*trRadiusNDC,
+			blRadius = -z*(r-l)/(2.0*zn)*blRadiusNDC,
+			brRadius = -z*(r-l)/(2.0*zn)*brRadiusNDC;
+
+			// stroke
+			var i;
+			var strokeMaterial = this.makeStrokeMaterial();
+			var strokePrimArray = this.createStroke([x,y],  2*xFill,  2*yFill,  strokeSize,  tlRadius, blRadius, brRadius, trRadius, strokeMaterial);
+			strokeMaterial.fitToPrimitiveArray( strokePrimArray );
+			for (i=0;  i<strokePrimArray.length;  i++)
+			{
+				this._primArray.push( strokePrimArray[i] );
+				this._materialNodeArray.push( strokeMaterial.getMaterialNode() );
+			}
 
-            // calculate the object coordinates from their NDC coordinates
-            var z = -world.getViewDistance();
+			// fill
+			tlRadius -= strokeSize;  if (tlRadius < 0)  tlRadius = 0.0;
+			blRadius -= strokeSize;  if (blRadius < 0)  blRadius = 0.0;
+			brRadius -= strokeSize;  if (brRadius < 0)  brRadius = 0.0;
+			trRadius -= strokeSize;  if (trRadius < 0)  trRadius = 0.0;
+			xFill -= strokeSize;
+			yFill -= strokeSize;
+			var fillMaterial = this.makeFillMaterial();
+			//console.log( "fillMaterial: " + fillMaterial.getName() );
+			var fillPrimArray = this.createFill([x,y],  2*xFill,  2*yFill,  tlRadius, blRadius, brRadius, trRadius, fillMaterial);
+			fillMaterial.fitToPrimitiveArray( fillPrimArray );
+			for (i=0;  i<fillPrimArray.length;  i++)
+			{
+				this._primArray.push( fillPrimArray[i] );
+				this._materialNodeArray.push( fillMaterial.getMaterialNode() );
+			}
 
-            // get the position of the origin
-            var x = -z*(r-l)/(2.0*zn)*xNDC,
-                y = -z*(t-b)/(2.0*zn)*yNDC;
-
-            // get the x and y fill
-            var xFill = -z*(r-l)/(2.0*zn)*xFillNDC,
-                yFill = -z*(t-b)/(2.0*zn)*yFillNDC;
-
-            // keep some variables giving the overall dimensions of the
-            // rectangle. These values are used to calculate consistent
-            // texture map coordinates across all pieces.
-            this._rectWidth = xFill;  this._rectHeight = yFill;
-
-            // get the stroke size
-            var strokeSize = -z*(r-l)/(2.0*zn)*strokeSizeNDC;
-
-            // get the absolute corner radii
-            tlRadius = -z*(r-l)/(2.0*zn)*tlRadiusNDC,
-            trRadius = -z*(r-l)/(2.0*zn)*trRadiusNDC,
-            blRadius = -z*(r-l)/(2.0*zn)*blRadiusNDC,
-            brRadius = -z*(r-l)/(2.0*zn)*brRadiusNDC;
-
-            // stroke
-            var strokeMaterial = this.makeStrokeMaterial();
-            var strokePrim = this.createStroke([x,y],  2*xFill,  2*yFill,  strokeSize,  tlRadius, blRadius, brRadius, trRadius, strokeMaterial);
-		strokeMaterial.fitToPrimitive( strokePrim );
-            this._primArray.push( strokePrim );
-            this._materialNodeArray.push( strokeMaterial.getMaterialNode() );
-
-            // fill
-            tlRadius -= strokeSize;  if (tlRadius < 0)  tlRadius = 0.0;
-            blRadius -= strokeSize;  if (blRadius < 0)  blRadius = 0.0;
-            brRadius -= strokeSize;  if (brRadius < 0)  brRadius = 0.0;
-            trRadius -= strokeSize;  if (trRadius < 0)  trRadius = 0.0;
-            xFill -= strokeSize;
-            yFill -= strokeSize;
-            var fillMaterial = this.makeFillMaterial();
-            //console.log( "fillMaterial: " + fillMaterial.getName() );
-            var fillPrim = this.createFill([x,y],  2*xFill,  2*yFill,  tlRadius, blRadius, brRadius, trRadius, fillMaterial);
-		fillMaterial.fitToPrimitive( fillPrim );
-            this._primArray.push( fillPrim );
-            this._materialNodeArray.push( fillMaterial.getMaterialNode() );
-
-            world.updateObject(this);
-        }
-    },
+			world.updateObject(this);
+		}
+	},
 
     renderQuadraticBezier: {
         value: function(bPts, ctx) {
@@ -621,15 +628,17 @@ exports.Rectangle = Object.create(GeomObj, {
         value: function(ctr,  width,  height,  tlRad, blRad, brRad, trRad, material) {
             // create the geometry
             // special the (common) case of no rounded corners
-            var prim;
+            var primArray;
 
             if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) {
-                prim = RectangleGeometry.create( ctr, width, height, material );
+                primArray = RectangleGeometry.create( ctr, width, height, material );
             } else {
-                prim = RectangleFill.create( ctr,  width, height,  tlRad, blRad,  brRad, trRad, material);
+                primArray = RectangleFill.create( ctr,  width, height,  tlRad, blRad,  brRad, trRad, material);
             }
 
-            return prim;
+			console.log( "rectangle produced " + primArray.length + " fill primitives" );
+
+            return primArray;
         }
     },
 
@@ -951,17 +960,44 @@ RectangleFill.create = function( rectCtr,  width, height, tlRad, blRad,  brRad,
 		j++;
 	}
 
-	//refine the mesh for vertex deformations
-	if (material) {
-		if (material.hasVertexDeformation()) {
+	// refine the mesh for vertex deformations
+	var rtnArray;
+	if (material)
+	{
+		if (material.hasVertexDeformation())
+		{
 			var paramRange = material.getVertexDeformationRange();
 			var tolerance = material.getVertexDeformationTolerance();
 			nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices,  paramRange,  tolerance );
+
+			var subdividedParts = ShapePrimitive.subdivideOversizedMesh( this.vertices, this.normals, this.uvs, this.indices );
+
+			rtnArray = [];
+			if (subdividedParts)
+			{
+				for (var i=0;  i<subdividedParts.length;  i++)
+				{
+					var obj = subdividedParts[i];
+					rtnArray.push( ShapePrimitive.create(obj.vertices, obj.normals, obj.uvs, obj.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, obj.vertices.length/3) );
+				}
+			}
+			else
+				rtnArray = [ ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices) ];
+			
+//			var vertsOut = [],  normsOut = [], uvsOut = [],  indicesOut = [];
+//			ShapePrimitive.convertTrianglesToLines( this.vertices, this.normals, this.uvs, this.indices,   vertsOut, normsOut,  uvsOut, indicesOut );
+//			nVertices = vertsOut.length;
+//			return ShapePrimitive.create(vertsOut, normsOut, uvsOut, indicesOut, RDGE.globals.engine.getContext().renderer.LINES, nVertices);
+
+		}
+		else
+		{
+			// create the RDGE primitive
+			rtnArray = [ ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices) ];
 		}
 	}
 
-	// create the RDGE primitive
-	return ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices);
+	return rtnArray;
 };
 
 RectangleFill.pushVertex = function( x, y, z ) {
@@ -1183,7 +1219,8 @@ RectangleStroke.create = function( rectCtr,  width, height, strokeWidth,  tlRad,
 		k++;
 	}
 
-	//refine the mesh for vertex deformations
+	// refine the mesh for vertex deformations
+	var rtnArray;
 	if (material)
 	{
 		if (material.hasVertexDeformation())
@@ -1191,11 +1228,29 @@ RectangleStroke.create = function( rectCtr,  width, height, strokeWidth,  tlRad,
 			var paramRange = material.getVertexDeformationRange();
 			var tolerance = material.getVertexDeformationTolerance();
 			nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices,  paramRange,  tolerance );
+
+			var subdividedParts = ShapePrimitive.subdivideOversizedMesh( this.vertices, this.normals, this.uvs, this.indices );
+
+			rtnArray = [];
+			if (subdividedParts)
+			{
+				for (var i=0;  i<subdividedParts.length;  i++)
+				{
+					var obj = subdividedParts[i];
+					rtnArray.push( ShapePrimitive.create(obj.vertices, obj.normals, obj.uvs, obj.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, obj.vertices.length/3) );
+				}
+			}
+			else
+				rtnArray = [ ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices) ];
+		}
+		else
+		{
+			// create the RDGE primitive
+			rtnArray = [ ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices) ];
 		}
 	}
 
-	// create the RDGE primitive
-	return ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices);
+	return rtnArray;
 };
 
 RectangleStroke.getRoundedCorner = function( ctr, insidePt, outsidePt ) {
@@ -1269,7 +1324,8 @@ RectangleGeometry.create = function( ctr,  width, height, material ) {
 	RectangleGeometry.pushIndices( 2, 1, 0 );
 	RectangleGeometry.pushIndices( 0, 3, 2 );
 
-	//refine the mesh for vertex deformations
+	// refine the mesh for vertex deformations
+	var rtnArray;
 	if (material)
 	{
 		if (material.hasVertexDeformation())
@@ -1277,11 +1333,29 @@ RectangleGeometry.create = function( ctr,  width, height, material ) {
 			var paramRange = material.getVertexDeformationRange();
 			var tolerance = material.getVertexDeformationTolerance();
 			nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices,  paramRange,  tolerance );
+
+			var subdividedParts = ShapePrimitive.subdivideOversizedMesh( this.vertices, this.normals, this.uvs, this.indices );
+
+			rtnArray = [];
+			if (subdividedParts)
+			{
+				for (var i=0;  i<subdividedParts.length;  i++)
+				{
+					var obj = subdividedParts[i];
+					rtnArray.push( ShapePrimitive.create(obj.vertices, obj.normals, obj.uvs, obj.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, obj.vertices.length/3) );
+				}
+			}
+			else
+				rtnArray = [ ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices) ];
+		}
+		else
+		{
+			// create the RDGE primitive
+			rtnArray = [ ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices) ];
 		}
 	}
 
-	// create the RDGE primitive
-	return ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices);
+	return rtnArray;
 };
 
 RectangleGeometry.pushVertex	= RectangleFill.pushVertex;
-- 
cgit v1.2.3


From ab80aa9c7da912db384ec48c656f84fd673b5253 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Fri, 29 Jun 2012 15:13:14 -0700
Subject: 'V' texture map coordinate was inverted in some cases.

---
 js/lib/geom/rectangle.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'js/lib/geom/rectangle.js')

diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index ac8e6c70..91729c8e 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -1030,7 +1030,7 @@ RectangleFill.getVertex = function( index ) {
 
 RectangleFill.getUV = function( x, y, xMin, w, yMin, h) {
 	var u = (x - xMin)/w,
-		v = (y - yMin)/h;
+		v = 1.0 - (y - yMin)/h;
 
 	var uv = [ u, v ];
 	return uv;
-- 
cgit v1.2.3


From 648ee61ae84216d0236e0dbc211addc13b2cfa3a Mon Sep 17 00:00:00 2001
From: Kris Kowal
Date: Fri, 6 Jul 2012 11:52:06 -0700
Subject: Expand tabs

---
 js/lib/geom/rectangle.js | 1132 +++++++++++++++++++++++-----------------------
 1 file changed, 566 insertions(+), 566 deletions(-)

(limited to 'js/lib/geom/rectangle.js')

diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 0d302d50..ec3e25b2 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -38,15 +38,15 @@ var MaterialsModel = require("js/models/materials-model").MaterialsModel;
 //      Derived from class GeomObj
 ///////////////////////////////////////////////////////////////////////
 exports.Rectangle = Object.create(GeomObj, {
-	// CONSTANTS
-	N_TRIANGLES: { value : 15, writable: false },       // TODO - This is not being used anywhere. Remove?
+    // CONSTANTS
+    N_TRIANGLES: { value : 15, writable: false },       // TODO - This is not being used anywhere. Remove?
 
-	//if (!MaterialsModel)
-	//	MaterialsModel = require("js/models/materials-model").MaterialsModel;
+    //if (!MaterialsModel)
+    //  MaterialsModel = require("js/models/materials-model").MaterialsModel;
 
-	///////////////////////////////////////////////////////////////////////
-	// Instance variables
-	///////////////////////////////////////////////////////////////////////
+    ///////////////////////////////////////////////////////////////////////
+    // Instance variables
+    ///////////////////////////////////////////////////////////////////////
     _width: { value : 2.0, writable: true },
     _height: { value : 2.0, writable: true },
     _xOffset: { value : 0, writable: true },
@@ -82,7 +82,7 @@ exports.Rectangle = Object.create(GeomObj, {
 
                 this._strokeStyle = strokeStyle;
 
-			this._matrix = Matrix.I(4);
+            this._matrix = Matrix.I(4);
             }
 
             // the overall radius includes the fill and the stroke.  separate the two based on the stroke width
@@ -101,7 +101,7 @@ exports.Rectangle = Object.create(GeomObj, {
             } else {
                 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
             }
-			if (strokeColor && this._strokeMaterial.hasProperty( "color" ))  this._strokeMaterial.setProperty( "color",  this._strokeColor );
+            if (strokeColor && this._strokeMaterial.hasProperty( "color" ))  this._strokeMaterial.setProperty( "color",  this._strokeColor );
 
 
             if(fillMaterial) {
@@ -109,11 +109,11 @@ exports.Rectangle = Object.create(GeomObj, {
             } else {
                 this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
             }
-			if (fillColor && this._fillMaterial.hasProperty( "color" ))  this._fillMaterial.setProperty( "color",  this._fillColor );
+            if (fillColor && this._fillMaterial.hasProperty( "color" ))  this._fillMaterial.setProperty( "color",  this._fillColor );
         }
     },
 
-	///////////////////////////////////////////////////////////////////////
+    ///////////////////////////////////////////////////////////////////////
     // Property Accessors
     ///////////////////////////////////////////////////////////////////////
     // TODO - Use getters/setters in the future
@@ -152,7 +152,7 @@ exports.Rectangle = Object.create(GeomObj, {
             this._fillMaterial = m;
         }
     },
-	///////////////////////////////////////////////////////////////////////
+    ///////////////////////////////////////////////////////////////////////
     // update the "color of the material
     getFillColor: {
         value: function() {
@@ -267,31 +267,31 @@ exports.Rectangle = Object.create(GeomObj, {
         }
     },
 
-	///////////////////////////////////////////////////////////////////////
-	// Methods
-	///////////////////////////////////////////////////////////////////////
-	// JSON export
+    ///////////////////////////////////////////////////////////////////////
+    // Methods
+    ///////////////////////////////////////////////////////////////////////
+    // JSON export
     exportJSON: {
         value: function() {
             var jObj =
             {
-                'type'			: this.geomType(),
-                'xoff'			: this._xOffset,
-                'yoff'			: this._yOffset,
-                'width'			: this._width,
-                'height'		: this._height,
-                'strokeWidth'	: this._strokeWidth,
-                'strokeColor'	: this._strokeColor,
-                'fillColor'		: this._fillColor,
-                'tlRadius'		: this._tlRadius,
-                'trRadius'		: this._trRadius,
-                'blRadius'		: this._blRadius,
-                'brRadius'		: this._brRadius,
-                'innerRadius'	: this._innerRadius,
-                'strokeStyle'	: this._strokeStyle,
-                'strokeMat'		: this._strokeMaterial ? this._strokeMaterial.getName() :  MaterialsModel.getDefaultMaterialName(),
-                'fillMat'		: this._fillMaterial ?  this._fillMaterial.getName() :  MaterialsModel.getDefaultMaterialName(),
-                'materials'		: this.exportMaterialsJSON()
+                'type'          : this.geomType(),
+                'xoff'          : this._xOffset,
+                'yoff'          : this._yOffset,
+                'width'         : this._width,
+                'height'        : this._height,
+                'strokeWidth'   : this._strokeWidth,
+                'strokeColor'   : this._strokeColor,
+                'fillColor'     : this._fillColor,
+                'tlRadius'      : this._tlRadius,
+                'trRadius'      : this._trRadius,
+                'blRadius'      : this._blRadius,
+                'brRadius'      : this._brRadius,
+                'innerRadius'   : this._innerRadius,
+                'strokeStyle'   : this._strokeStyle,
+                'strokeMat'     : this._strokeMaterial ? this._strokeMaterial.getName() :  MaterialsModel.getDefaultMaterialName(),
+                'fillMat'       : this._fillMaterial ?  this._fillMaterial.getName() :  MaterialsModel.getDefaultMaterialName(),
+                'materials'     : this.exportMaterialsJSON()
             };
 
             return jObj;
@@ -300,21 +300,21 @@ exports.Rectangle = Object.create(GeomObj, {
 
     importJSON: {
         value: function(jObj) {
-            this._xOffset			= jObj.xoff;
-            this._yOffset			= jObj.yoff;
-            this._width				= jObj.width;
-            this._height			= jObj.height;
-            this._strokeWidth		= jObj.strokeWidth;
-            this._strokeColor		= jObj.strokeColor;
-            this._fillColor			= jObj.fillColor;
-            this._tlRadius			= jObj.tlRadius;
-            this._trRadius			= jObj.trRadius;
-            this._blRadius			= jObj.blRadius;
-            this._brRadius			= jObj.brRadius;
-            this._innerRadius		= jObj.innerRadius;
-            this._strokeStyle		= jObj.strokeStyle;
-            var strokeMaterialName	= jObj.strokeMat;
-            var fillMaterialName	= jObj.fillMat;
+            this._xOffset           = jObj.xoff;
+            this._yOffset           = jObj.yoff;
+            this._width             = jObj.width;
+            this._height            = jObj.height;
+            this._strokeWidth       = jObj.strokeWidth;
+            this._strokeColor       = jObj.strokeColor;
+            this._fillColor         = jObj.fillColor;
+            this._tlRadius          = jObj.tlRadius;
+            this._trRadius          = jObj.trRadius;
+            this._blRadius          = jObj.blRadius;
+            this._brRadius          = jObj.brRadius;
+            this._innerRadius       = jObj.innerRadius;
+            this._strokeStyle       = jObj.strokeStyle;
+            var strokeMaterialName  = jObj.strokeMat;
+            var fillMaterialName    = jObj.fillMat;
 
             var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ).dup();
             if (!strokeMat) {
@@ -322,8 +322,8 @@ exports.Rectangle = Object.create(GeomObj, {
                 strokeMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() ).dup();
             }
             this._strokeMaterial = strokeMat;
-			if (this._strokeMaterial.hasProperty( 'color' ))
-				this._strokeMaterial.setProperty( 'color', this._strokeColor );
+            if (this._strokeMaterial.hasProperty( 'color' ))
+                this._strokeMaterial.setProperty( 'color', this._strokeColor );
 
             var fillMat = MaterialsModel.getMaterial( fillMaterialName ).dup();
             if (!fillMat) {
@@ -331,8 +331,8 @@ exports.Rectangle = Object.create(GeomObj, {
                 fillMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() ).dup();
             }
             this._fillMaterial = fillMat;
-			if (this._fillMaterial.hasProperty( 'color' ))
-				this._fillMaterial.setProperty( 'color', this._fillColor );
+            if (this._fillMaterial.hasProperty( 'color' ))
+                this._fillMaterial.setProperty( 'color', this._fillColor );
 
             this.importMaterialsJSON( jObj.materials );
         }
@@ -409,7 +409,7 @@ exports.Rectangle = Object.create(GeomObj, {
             // stroke
             var strokeMaterial = this.makeStrokeMaterial();
             var strokePrim = this.createStroke([x,y],  2*xFill,  2*yFill,  strokeSize,  tlRadius, blRadius, brRadius, trRadius, strokeMaterial);
-		strokeMaterial.fitToPrimitive( strokePrim );
+        strokeMaterial.fitToPrimitive( strokePrim );
             this._primArray.push( strokePrim );
             this._materialNodeArray.push( strokeMaterial.getMaterialNode() );
 
@@ -423,7 +423,7 @@ exports.Rectangle = Object.create(GeomObj, {
             var fillMaterial = this.makeFillMaterial();
             //console.log( "fillMaterial: " + fillMaterial.getName() );
             var fillPrim = this.createFill([x,y],  2*xFill,  2*yFill,  tlRadius, blRadius, brRadius, trRadius, fillMaterial);
-		fillMaterial.fitToPrimitive( fillPrim );
+        fillMaterial.fitToPrimitive( fillPrim );
             this._primArray.push( fillPrim );
             this._materialNodeArray.push( fillMaterial.getMaterialNode() );
 
@@ -443,7 +443,7 @@ exports.Rectangle = Object.create(GeomObj, {
                 ctx.quadraticCurveTo(  bPts[index][0],  bPts[index][1],    bPts[index+1][0], bPts[index+1][1] );
                 index += 2;
             }
-	    }
+        }
     },
 
     renderPath: {
@@ -455,7 +455,7 @@ exports.Rectangle = Object.create(GeomObj, {
                 hw = 0.5*width,
                 hh = 0.5*height;
 
-            pt = [inset, inset];	// top left corner
+            pt = [inset, inset];    // top left corner
 
             var tlRad = this._tlRadius; //top-left radius
             var trRad = this._trRadius;
@@ -468,36 +468,36 @@ exports.Rectangle = Object.create(GeomObj, {
             if (brRad > minDimen)  brRad = minDimen;
             if (trRad > minDimen)  trRad = minDimen;
 
-		var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
-		var world = this.getWorld();
-		viewUtils.pushViewportObj( world.getCanvas() );
-		var cop = viewUtils.getCenterOfProjection();
-		viewUtils.popViewportObj();
-		var xCtr = cop[0] + this._xOffset,					yCtr = cop[1] - this._yOffset;
-		var xLeft = xCtr - 0.5*this.getWidth(),				yTop = yCtr - 0.5*this.getHeight();
-		var xDist = cop[0] - xLeft,							yDist = cop[1] - yTop;
-		var xOff = 0.5*world.getViewportWidth() - xDist,	yOff  = 0.5*world.getViewportHeight() - yDist;
+        var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
+        var world = this.getWorld();
+        viewUtils.pushViewportObj( world.getCanvas() );
+        var cop = viewUtils.getCenterOfProjection();
+        viewUtils.popViewportObj();
+        var xCtr = cop[0] + this._xOffset,                  yCtr = cop[1] - this._yOffset;
+        var xLeft = xCtr - 0.5*this.getWidth(),             yTop = yCtr - 0.5*this.getHeight();
+        var xDist = cop[0] - xLeft,                         yDist = cop[1] - yTop;
+        var xOff = 0.5*world.getViewportWidth() - xDist,    yOff  = 0.5*world.getViewportHeight() - yDist;
 
             if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) {
-			ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset);
+            ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset);
             } else {
                 // 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]+xOff,  pt[1]+yOff );
+            ctx.moveTo( pt[0]+xOff,  pt[1]+yOff );
 
                 // get the bottom left point
                 pt = [inset, height - inset];
                 rad = blRad - inset;
                 if (rad < 0)  rad = 0;
                 pt[1] -= rad;
-			ctx.lineTo( pt[0]+xOff,  pt[1]+yOff );
+            ctx.lineTo( pt[0]+xOff,  pt[1]+yOff );
 
                 // get the bottom left curve
                 if (MathUtils.fpSign(rad) > 0) {
-				ctx.quadraticCurveTo( inset+xOff, height-inset+yOff,  inset+rad+xOff, height-inset+yOff );
+                ctx.quadraticCurveTo( inset+xOff, height-inset+yOff,  inset+rad+xOff, height-inset+yOff );
                 }
 
                 // do the bottom of the rectangle
@@ -505,11 +505,11 @@ exports.Rectangle = Object.create(GeomObj, {
                 rad = brRad - inset;
                 if (rad < 0)  rad = 0;
                 pt[0] -= rad;
-			ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
+            ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
 
                 // get the bottom right arc
                 if (MathUtils.fpSign(rad) > 0) {
-				ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff,  width-inset+xOff, height-inset-rad+yOff );
+                ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff,  width-inset+xOff, height-inset-rad+yOff );
                 }
 
                 // get the right of the rectangle
@@ -517,11 +517,11 @@ exports.Rectangle = Object.create(GeomObj, {
                 rad = trRad - inset;
                 if (rad < 0)  rad = 0;
                 pt[1] += rad;
-			ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
+            ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
 
                 // do the top right corner
                 if (MathUtils.fpSign(rad) > 0) {
-				ctx.quadraticCurveTo( width-inset+xOff, inset+yOff,  width-inset-rad+xOff, inset+yOff );
+                ctx.quadraticCurveTo( width-inset+xOff, inset+yOff,  width-inset-rad+xOff, inset+yOff );
                 }
 
                 // do the top of the rectangle
@@ -529,116 +529,116 @@ exports.Rectangle = Object.create(GeomObj, {
                 rad = tlRad - inset;
                 if (rad < 0)  rad = 0;
                 pt[0] += rad;
-			ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
+            ctx.lineTo( pt[0]+xOff, pt[1]+yOff );
 
                 // do the top left corner
                 if (MathUtils.fpSign(rad) > 0) {
-				ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff );
+                ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff );
                 } else {
-				ctx.lineTo( inset+xOff, 2*inset+yOff );
+                ctx.lineTo( inset+xOff, 2*inset+yOff );
                 }
             }
         }
     },
 
-	render: {
-		value: function() {
-			// get the world
-			var world = this.getWorld();
-			if (!world)  throw( "null world in rectangle render" );
-
-			 // get the context
-			var ctx = world.get2DContext();
-			if (!ctx)  return;
-
-			// get some dimensions
-			var lw = this._strokeWidth;
-			var	w = world.getViewportWidth(),
-				h = world.getViewportHeight();
-
-			var c,
-				inset,
-				gradient,
-				colors,
-				len,
-				n,
-				position,
-				cs;
-			// render the fill
-			ctx.beginPath();
-			if (this._fillColor) {
-				inset = Math.ceil( lw ) - 0.5;
-
-				if(this._fillColor.gradientMode) {
-					if(this._fillColor.gradientMode === "radial") {
-						var ww = w - 2*lw,  hh = h - 2*lw;
-						gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
-					} else {
-						gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2);
-					}
-					colors = this._fillColor.color;
-
-					len = colors.length;
-
-					for(n=0; n<len; n++) {
-						position = colors[n].position/100;
-						cs = colors[n].value;
-						gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-					}
-
-					ctx.fillStyle = gradient;
-
-				} else {
-					c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
-					ctx.fillStyle = c;
-				}
-
-				ctx.lineWidth	= lw;
-				this.renderPath( inset, ctx );
-				ctx.fill();
-				ctx.closePath();
-			}
-
-			// render the stroke
-			ctx.beginPath();
-			if (this._strokeColor) {
-				inset = Math.ceil( 0.5*lw ) - 0.5;
-
-				if(this._strokeColor.gradientMode) {
-					if(this._strokeColor.gradientMode === "radial")
-						gradient = ctx.createRadialGradient(w/2, h/2, 0,  w/2, h/2, Math.max(h, w)/2);
-					else
-						gradient = ctx.createLinearGradient(0, h/2, w, h/2);
-					colors = this._strokeColor.color;
-
-					len = colors.length;
-
-					for(n=0; n<len; n++) {
-						position = colors[n].position/100;
-						cs = colors[n].value;
-						gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-					}
-
-					ctx.strokeStyle = gradient;
-
-				} else {
-					c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
-					ctx.strokeStyle = c;
-				}
-
-				ctx.lineWidth	= lw;
-				this.renderPath( inset, ctx );
-				ctx.stroke();
-				ctx.closePath();
-			}
-		}
-	},
+    render: {
+        value: function() {
+            // get the world
+            var world = this.getWorld();
+            if (!world)  throw( "null world in rectangle render" );
+
+             // get the context
+            var ctx = world.get2DContext();
+            if (!ctx)  return;
+
+            // get some dimensions
+            var lw = this._strokeWidth;
+            var w = world.getViewportWidth(),
+                h = world.getViewportHeight();
+
+            var c,
+                inset,
+                gradient,
+                colors,
+                len,
+                n,
+                position,
+                cs;
+            // render the fill
+            ctx.beginPath();
+            if (this._fillColor) {
+                inset = Math.ceil( lw ) - 0.5;
+
+                if(this._fillColor.gradientMode) {
+                    if(this._fillColor.gradientMode === "radial") {
+                        var ww = w - 2*lw,  hh = h - 2*lw;
+                        gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
+                    } else {
+                        gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2);
+                    }
+                    colors = this._fillColor.color;
+
+                    len = colors.length;
+
+                    for(n=0; n<len; n++) {
+                        position = colors[n].position/100;
+                        cs = colors[n].value;
+                        gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                    }
+
+                    ctx.fillStyle = gradient;
+
+                } else {
+                    c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
+                    ctx.fillStyle = c;
+                }
+
+                ctx.lineWidth   = lw;
+                this.renderPath( inset, ctx );
+                ctx.fill();
+                ctx.closePath();
+            }
+
+            // render the stroke
+            ctx.beginPath();
+            if (this._strokeColor) {
+                inset = Math.ceil( 0.5*lw ) - 0.5;
+
+                if(this._strokeColor.gradientMode) {
+                    if(this._strokeColor.gradientMode === "radial")
+                        gradient = ctx.createRadialGradient(w/2, h/2, 0,  w/2, h/2, Math.max(h, w)/2);
+                    else
+                        gradient = ctx.createLinearGradient(0, h/2, w, h/2);
+                    colors = this._strokeColor.color;
+
+                    len = colors.length;
+
+                    for(n=0; n<len; n++) {
+                        position = colors[n].position/100;
+                        cs = colors[n].value;
+                        gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                    }
+
+                    ctx.strokeStyle = gradient;
+
+                } else {
+                    c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
+                    ctx.strokeStyle = c;
+                }
+
+                ctx.lineWidth   = lw;
+                this.renderPath( inset, ctx );
+                ctx.stroke();
+                ctx.closePath();
+            }
+        }
+    },
 
     createStroke: {
         value: function(ctr,  width,  height,  strokeWidth,  tlRad, blRad, brRad, trRad, material) {
             // create the geometry
             return RectangleStroke.create( ctr,  width, height, strokeWidth,  tlRad, blRad,  brRad, trRad, material);
-	    }
+        }
     },
 
     createFill: {
@@ -665,7 +665,7 @@ exports.Rectangle = Object.create(GeomObj, {
             if(y > (this._yOffset + this._height)) return false;
 
             return true;
-	    }
+        }
     },
 
     containsPoint: {
@@ -687,8 +687,8 @@ exports.Rectangle = Object.create(GeomObj, {
 
             // get the normalized device coordinates (NDC) for
             // the position and radii.
-            var	vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
-            var	xNDC = 2*this._xOffset/vpw,  yNDC = 2*this._yOffset/vph,
+            var vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
+            var xNDC = 2*this._xOffset/vpw,  yNDC = 2*this._yOffset/vph,
                 xRadNDC = this._width/vpw,  yRadNDC = this._height/vph;
             var projMat = world.makePerspectiveMatrix();
             var z = -world.getViewDistance();
@@ -731,8 +731,8 @@ exports.Rectangle = Object.create(GeomObj, {
 
             // get the normalized device coordinates (NDC) for
             // the position and radii.
-            var	vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
-            var	xNDC = 2*this._xOffset/vpw,  yNDC = 2*this._yOffset/vph,
+            var vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
+            var xNDC = 2*this._xOffset/vpw,  yNDC = 2*this._yOffset/vph,
                 hwNDC = this._width/vpw,  hhNDC = this._height/vph;
             var projMat = world.makePerspectiveMatrix();
             var z = -world.getViewDistance();
@@ -777,7 +777,7 @@ exports.Rectangle = Object.create(GeomObj, {
             x = minPt[0];  y = minPt[1];
             var aspect = world.getAspect();
             var zn = world.getZNear(),  zf = world.getZFar();
-            var	t = zn * Math.tan(world.getFOV() * Math.PI / 360.0),
+            var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0),
                 b = -t,
                 r = aspect*t,
                 l = -r;
@@ -810,8 +810,8 @@ exports.Rectangle = Object.create(GeomObj, {
 
             // get the normalized device coordinates (NDC) for
             // the position and radii.
-            var	vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
-            var	xNDC = 2*this._xOffset/vpw,  yNDC = 2*this._yOffset/vph,
+            var vpw = world.getViewportWidth(),  vph = world.getViewportHeight();
+            var xNDC = 2*this._xOffset/vpw,  yNDC = 2*this._yOffset/vph,
                 hwNDC = this._width/vpw,  hhNDC = this._height/vph;
             var projMat = world.makePerspectiveMatrix();
             var z = -world.getViewDistance();
@@ -864,7 +864,7 @@ exports.Rectangle = Object.create(GeomObj, {
             x = minPt[0];  y = minPt[1];
             var aspect = world.getAspect();
             var zn = world.getZNear(),  zf = world.getZFar();
-            var	t = zn * Math.tan(world.getFOV() * Math.PI / 360.0),
+            var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0),
                 b = -t,
                 r = aspect*t,
                 l = -r;
@@ -896,455 +896,455 @@ exports.Rectangle = Object.create(GeomObj, {
 
 var RectangleFill = {};
 RectangleFill.create = function( rectCtr,  width, height, tlRad, blRad,  brRad, trRad,  material) {
-	var x = rectCtr[0],  y = rectCtr[1],  z = 0.0;
-	var	hw = 0.5*width,  hh = 0.5*height;
-
-	// limit the radii to half the rectangle dimension
-	var minDimen = hw < hh ? hw : hh;
-	if (tlRad > minDimen)  tlRad = minDimen;
-	if (blRad > minDimen)  blRad = minDimen;
-	if (brRad > minDimen)  brRad = minDimen;
-	if (trRad > minDimen)  trRad = minDimen;
-
-	// define some local variables
-	this.vertices	= [];
-	this.normals	= [];
-	this.uvs		= [];
-	this.indices	= [];
-
-	// the center of the rectangle is the first vertex
-	RectangleFill.pushVertex( x, y, z );
-
-	// traverse the perimiter of the rectangle
-
-	// push the starting point
-	RectangleFill.pushVertex( x-hw, y+hh-tlRad,  z);
-
-	// do the left side
-	var ctr;
-	if (blRad <= 0){
-		RectangleFill.pushVertex( x-hw, y-hh, z);
+    var x = rectCtr[0],  y = rectCtr[1],  z = 0.0;
+    var hw = 0.5*width,  hh = 0.5*height;
+
+    // limit the radii to half the rectangle dimension
+    var minDimen = hw < hh ? hw : hh;
+    if (tlRad > minDimen)  tlRad = minDimen;
+    if (blRad > minDimen)  blRad = minDimen;
+    if (brRad > minDimen)  brRad = minDimen;
+    if (trRad > minDimen)  trRad = minDimen;
+
+    // define some local variables
+    this.vertices   = [];
+    this.normals    = [];
+    this.uvs        = [];
+    this.indices    = [];
+
+    // the center of the rectangle is the first vertex
+    RectangleFill.pushVertex( x, y, z );
+
+    // traverse the perimiter of the rectangle
+
+    // push the starting point
+    RectangleFill.pushVertex( x-hw, y+hh-tlRad,  z);
+
+    // do the left side
+    var ctr;
+    if (blRad <= 0){
+        RectangleFill.pushVertex( x-hw, y-hh, z);
     } else {
-		ctr = [x - hw + blRad,  y - hh + blRad, z];
-		RectangleFill.getRoundedCorner( ctr,  [x-hw, y-hh+blRad, z],  this.vertices );
-	}
+        ctr = [x - hw + blRad,  y - hh + blRad, z];
+        RectangleFill.getRoundedCorner( ctr,  [x-hw, y-hh+blRad, z],  this.vertices );
+    }
 
-	// do the bottom
-	if (brRad <= 0) {
-		RectangleFill.pushVertex( x+hw, y-hh, z);
+    // do the bottom
+    if (brRad <= 0) {
+        RectangleFill.pushVertex( x+hw, y-hh, z);
     } else {
-		ctr = [x + hw - brRad,  y - hh + brRad, z];
-		RectangleFill.getRoundedCorner( ctr,  [x+hw-brRad, y-hh, z],  this.vertices );
-	}
+        ctr = [x + hw - brRad,  y - hh + brRad, z];
+        RectangleFill.getRoundedCorner( ctr,  [x+hw-brRad, y-hh, z],  this.vertices );
+    }
 
-	// do the right
-	if (trRad <= 0) {
-		RectangleFill.pushVertex( x+hw, y+hh, z);
+    // do the right
+    if (trRad <= 0) {
+        RectangleFill.pushVertex( x+hw, y+hh, z);
     } else {
-		ctr = [x + hw - trRad,  y + hh - trRad, z];
-		RectangleFill.getRoundedCorner( ctr,  [x+hw, y+hh-trRad, z],  this.vertices );
-	}
+        ctr = [x + hw - trRad,  y + hh - trRad, z];
+        RectangleFill.getRoundedCorner( ctr,  [x+hw, y+hh-trRad, z],  this.vertices );
+    }
 
-	// do the top
-	if (tlRad <= 0) {
-		RectangleFill.pushVertex( x-hw, y+hh, z);
+    // do the top
+    if (tlRad <= 0) {
+        RectangleFill.pushVertex( x-hw, y+hh, z);
     } else {
-		ctr = [x - hw + tlRad,  y + hh - tlRad, z];
-		RectangleFill.getRoundedCorner( ctr,  [x-hw+tlRad, y+hh, z],  this.vertices );
-	}
-
-	// get the normals and uvs
-	var vrt, uv;
-	var xMin = x - hw,
-		yMin = y - hh;
-	var n = [0, 0, 1];
-	var nVertices = this.vertices.length / 3;
-	for (var i=0;  i<nVertices;  i++) {
-		vrt = RectangleFill.getVertex(i);
-		RectangleFill.pushNormal( n );
-		uv  = RectangleFill.getUV(vrt[0], vrt[1], xMin, width, yMin, height);
-		RectangleFill.pushUV( uv );
-	}
-
-	// build the triangles
-	var nTriangles = nVertices - 2;
-	var i = 1,  j = 2;
-	for (var iTri=0;  iTri<nTriangles;  iTri++) {
-		RectangleFill.pushIndices( 0, j, i );
-		i++;
-		j++;
-	}
-
-	//refine the mesh for vertex deformations
-	if (material) {
-		if (material.hasVertexDeformation()) {
-			var paramRange = material.getVertexDeformationRange();
-			var tolerance = material.getVertexDeformationTolerance();
-			nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices,  paramRange,  tolerance );
-		}
-	}
-
-	// create the RDGE primitive
-	return ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices);
+        ctr = [x - hw + tlRad,  y + hh - tlRad, z];
+        RectangleFill.getRoundedCorner( ctr,  [x-hw+tlRad, y+hh, z],  this.vertices );
+    }
+
+    // get the normals and uvs
+    var vrt, uv;
+    var xMin = x - hw,
+        yMin = y - hh;
+    var n = [0, 0, 1];
+    var nVertices = this.vertices.length / 3;
+    for (var i=0;  i<nVertices;  i++) {
+        vrt = RectangleFill.getVertex(i);
+        RectangleFill.pushNormal( n );
+        uv  = RectangleFill.getUV(vrt[0], vrt[1], xMin, width, yMin, height);
+        RectangleFill.pushUV( uv );
+    }
+
+    // build the triangles
+    var nTriangles = nVertices - 2;
+    var i = 1,  j = 2;
+    for (var iTri=0;  iTri<nTriangles;  iTri++) {
+        RectangleFill.pushIndices( 0, j, i );
+        i++;
+        j++;
+    }
+
+    //refine the mesh for vertex deformations
+    if (material) {
+        if (material.hasVertexDeformation()) {
+            var paramRange = material.getVertexDeformationRange();
+            var tolerance = material.getVertexDeformationTolerance();
+            nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices,  paramRange,  tolerance );
+        }
+    }
+
+    // create the RDGE primitive
+    return ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices);
 };
 
 RectangleFill.pushVertex = function( x, y, z ) {
-	this.vertices.push( x );
-	this.vertices.push( y );
-	this.vertices.push( z );
+    this.vertices.push( x );
+    this.vertices.push( y );
+    this.vertices.push( z );
 };
 
 RectangleFill.pushNormal = function( n ) {
-	this.normals.push( n[0] );
-	this.normals.push( n[1] );
-	this.normals.push( n[2] );
+    this.normals.push( n[0] );
+    this.normals.push( n[1] );
+    this.normals.push( n[2] );
 };
 
 RectangleFill.pushUV = function( uv ) {
-	this.uvs.push( uv[0] );
-	this.uvs.push( uv[1] );
+    this.uvs.push( uv[0] );
+    this.uvs.push( uv[1] );
 };
 
 RectangleFill.pushIndices = function( i, j, k ) {
-	this.indices.push( i );
-	this.indices.push( j );
-	this.indices.push( k );
+    this.indices.push( i );
+    this.indices.push( j );
+    this.indices.push( k );
 };
 
 RectangleFill.getVertex = function( index ) {
-	var i = 3*index;
-	return [ this.vertices[i],  this.vertices[i+1],  this.vertices[i+2] ];
+    var i = 3*index;
+    return [ this.vertices[i],  this.vertices[i+1],  this.vertices[i+2] ];
 };
 
 RectangleFill.getUV = function( x, y, xMin, w, yMin, h) {
-	var u = (x - xMin)/w,
-		v = (y - yMin)/h;
+    var u = (x - xMin)/w,
+        v = (y - yMin)/h;
 
-	var uv = [ u, v ];
-	return uv;
+    var uv = [ u, v ];
+    return uv;
 };
 
 RectangleFill.getRoundedCorner = function(ctr, startPt,  vertices) {
-	var pt0 = startPt.slice();
-
-	// create a matrix to rotate about the center
-	var nSegs = 16;
-	var angle = 0.5*Math.PI/nSegs;
-	var ctrNeg = ctr.slice();
-	VecUtils.vecNegate(3, ctrNeg);
-	var tNeg  = Matrix.Translation( ctrNeg ),
-		rot   = Matrix.RotationZ( angle ),
-		trans = Matrix.Translation( ctr );
-	var mat = glmat4.multiply( rot, tNeg, [] );
-	glmat4.multiply(trans, mat, mat );
-
-	RectangleFill.pushVertex(pt0[0], pt0[1], 0.0 );
-	for (var i=0;  i<nSegs;  i++) {
-		pt0 = MathUtils.transformPoint( pt0, mat );
-		RectangleFill.pushVertex(pt0[0], pt0[1], 0.0 );
-	}
+    var pt0 = startPt.slice();
+
+    // create a matrix to rotate about the center
+    var nSegs = 16;
+    var angle = 0.5*Math.PI/nSegs;
+    var ctrNeg = ctr.slice();
+    VecUtils.vecNegate(3, ctrNeg);
+    var tNeg  = Matrix.Translation( ctrNeg ),
+        rot   = Matrix.RotationZ( angle ),
+        trans = Matrix.Translation( ctr );
+    var mat = glmat4.multiply( rot, tNeg, [] );
+    glmat4.multiply(trans, mat, mat );
+
+    RectangleFill.pushVertex(pt0[0], pt0[1], 0.0 );
+    for (var i=0;  i<nSegs;  i++) {
+        pt0 = MathUtils.transformPoint( pt0, mat );
+        RectangleFill.pushVertex(pt0[0], pt0[1], 0.0 );
+    }
 };
 
 
 var RectangleStroke = {};
 RectangleStroke.create = function( rectCtr,  width, height, strokeWidth,  tlRad, blRad,  brRad, trRad, material) {
-	var x = rectCtr[0],  y = rectCtr[1],  z = 0.0;
-	var	hw = 0.5*width,  hh = 0.5*height,  sw = strokeWidth;
-
-	// limit the radii to half the rectangle dimension
-	var minDimen = hw < hh ? hw : hh;
-	if (tlRad > minDimen)  tlRad = minDimen;
-	if (blRad > minDimen)  blRad = minDimen;
-	if (brRad > minDimen)  brRad = minDimen;
-	if (trRad > minDimen)  trRad = minDimen;
-
-	// define some local variables
-	this.vertices	= [];
-	this.normals	= [];
-	this.uvs		= [];
-	this.indices	= [];
-
-	// get the starting points
-	if (tlRad == 0) {
-		RectangleStroke.pushVertex( x-hw+sw, y+hh-sw, z);
-		RectangleStroke.pushVertex( x-hw,    y+hh,    z);
-	} else {
-		if (tlRad > sw) {
-			RectangleStroke.pushVertex( x-hw+sw, y+hh-tlRad, z);
-			RectangleStroke.pushVertex( x-hw,    y+hh-tlRad, z);
-		} else {
-			RectangleStroke.pushVertex( x-hw+tlRad, y+hh-tlRad, z);
-			RectangleStroke.pushVertex( x-hw,       y+hh-tlRad, z);
-			RectangleStroke.pushVertex( x-hw+sw,    y+hh-sw,    z);
-			RectangleStroke.pushVertex( x-hw,       y+hh-sw,    z);
-		}
-	}
-
-	// get the left side
-	if (blRad == 0) {
-		RectangleStroke.pushVertex( x-hw+sw, y-hh+sw, z);
-		RectangleStroke.pushVertex( x-hw,    y-hh,    z);
-	} else {
-		if (blRad >= sw) {
-			RectangleStroke.pushVertex( x-hw+sw, y-hh+blRad, z);
-			RectangleStroke.pushVertex( x-hw,    y-hh+blRad, z);
-			var ctr		 =	[x-hw+blRad,  y-hh+blRad, z],
-				insidePt =	[x-hw+sw,     y-hh+blRad, z],
-				outsidePt = [x-hw,        y-hh+blRad, z];
-			RectangleStroke.getRoundedCorner( ctr, insidePt,  outsidePt,  this.vertices );
-		} else {
-			RectangleStroke.pushVertex( x-hw+sw,  y-hh+sw,    z);
-			RectangleStroke.pushVertex( x-hw,     y-hh+blRad, z);
-			var ctr		 =	[x-hw+blRad,  y-hh+blRad, z],
-				insidePt =	[x-hw+blRad,  y-hh+blRad, z],
-				outsidePt = [x-hw,        y-hh+blRad, z];
-			RectangleStroke.getRoundedCorner( ctr, insidePt, outsidePt, this.vertices  );
-
-			RectangleStroke.pushVertex( x-hw+sw,  y-hh+sw, z);
-			RectangleStroke.pushVertex( x-hw+sw,  y-hh,    z);
-		}
-	}
-
-	// get the bottom
-	if (brRad == 0) {
-		RectangleStroke.pushVertex( x+hw-sw, y-hh+sw, z);
-		RectangleStroke.pushVertex( x+hw,    y-hh,    z);
-	} else {
-		RectangleStroke.pushVertex( x+hw-brRad,    y-hh+sw, z);
-		RectangleStroke.pushVertex( x+hw-brRad,    y-hh,    z);
-		if (brRad >= sw) {
-			var ctr		 =	[x+hw-brRad,  y-hh+brRad, z],
-				insidePt =	[x+hw-brRad,  y-hh+sw,    z],
-				outsidePt = [x+hw-brRad,  y-hh,       z];
-			RectangleStroke.getRoundedCorner( ctr, insidePt,  outsidePt,  this.vertices );
-		} else {
-			RectangleStroke.pushVertex( x+hw-sw,    y-hh+sw, z);
-			RectangleStroke.pushVertex( x+hw-brRad,    y-hh, z);
-			var ctr		 =	[x+hw-brRad,  y-hh+brRad, z],
-				insidePt =	[x+hw-brRad,  y-hh+brRad, z],
-				outsidePt = [x+hw-brRad,  y-hh,       z];
-			RectangleStroke.getRoundedCorner( ctr, insidePt, outsidePt,  this.vertices );
-			RectangleStroke.pushVertex( x+hw-sw,    y-hh+sw, z);
-			RectangleStroke.pushVertex( x+hw,       y-hh+sw, z);
-		}
-	}
-
-	// get the right
-	if (trRad == 0) {
-		RectangleStroke.pushVertex( x+hw-sw, y+hh-sw, z);
-		RectangleStroke.pushVertex(    x+hw,    y+hh, z);
-	} else {
-		if (trRad >= sw) {
-			RectangleStroke.pushVertex( x+hw-sw,  y+hh-trRad, z);
-			RectangleStroke.pushVertex( x+hw,     y+hh-trRad, z);
-			var ctr		 =	[x+hw-trRad,  y+hh-trRad, z],
-				insidePt =	[x+hw-sw,     y+hh-trRad, z],
-				outsidePt = [x+hw,        y+hh-trRad, z];
-			RectangleStroke.getRoundedCorner( ctr, insidePt,  outsidePt,  this.vertices );
-		} else {
-			RectangleStroke.pushVertex( x+hw-sw,  y+hh-sw,    z);
-			RectangleStroke.pushVertex( x+hw,     y+hh-trRad, z);
-			var ctr		 =	[x+hw-trRad,  y+hh-trRad, z],
-				insidePt =	[x+hw-trRad,  y+hh-trRad, z],
-				outsidePt = [x+hw,        y+hh-trRad, z];
-			RectangleStroke.getRoundedCorner( ctr, insidePt, outsidePt,  this.vertices );
-			RectangleStroke.pushVertex( x+hw-sw,  y+hh-sw, z);
-			RectangleStroke.pushVertex( x+hw-sw,  y+hh,    z);
-		}
-	}
-
-	// get the top
-	if (tlRad == 0) {
-		RectangleStroke.pushVertex( x-hw+sw,  y+hh-sw, z);
-		RectangleStroke.pushVertex( x-hw,     y+hh,    z);
-	} else {
-		if (tlRad >= sw) {
-			RectangleStroke.pushVertex( x-hw+tlRad,  y+hh-sw, z);
-			RectangleStroke.pushVertex( x-hw+tlRad,  y+hh,    z);
-			var ctr		 =	[x-hw+tlRad,  y+hh-tlRad, z],
-				insidePt =	[x-hw+tlRad,  y+hh-sw, z],
-				outsidePt = [x-hw+tlRad,  y+hh, z];
-			RectangleStroke.getRoundedCorner( ctr, insidePt,  outsidePt,  this.vertices );
-		} else {
-			RectangleStroke.pushVertex( x-hw+sw,     y+hh-sw, z);
-			RectangleStroke.pushVertex( x-hw+tlRad,  y+hh,    z);
-			var ctr		 =	[x-hw+tlRad,  y+hh-tlRad, z],
-				insidePt =	[x-hw+tlRad,  y+hh-tlRad, z],
-				outsidePt = [x-hw+tlRad,  y+hh, z];
-			RectangleStroke.getRoundedCorner( ctr, insidePt, outsidePt,  this.vertices );
-		}
-	}
-
-	// get the normals and uvs
-	var vrt, uv;
-	var xMin = x - hw,
-		yMin = y - hh;
-	var n = [0, 0, 1];
-	var nVertices = this.vertices.length / 3;
-	for (var i=0;  i<nVertices;  i++) {
-		vrt = RectangleStroke.getVertex(i);
-		RectangleStroke.pushNormal( n );
-		uv  = RectangleStroke.getUV(vrt[0], vrt[1], xMin, width, yMin, height);
-		RectangleStroke.pushUV( uv );
-	}
-
-	// build the triangles
-	var nTriangles = nVertices - 2;
-	var i = 0,  j = 1, k = 2;
-	var reverse = false;
-	for (var iTri=0;  iTri<nTriangles;  iTri++) {
-		// we created a triangle strip, so each sequential triangle has the opposite orientation than its predecessor
-		if (!reverse) {
-			RectangleStroke.pushIndices( k, j, i );
+    var x = rectCtr[0],  y = rectCtr[1],  z = 0.0;
+    var hw = 0.5*width,  hh = 0.5*height,  sw = strokeWidth;
+
+    // limit the radii to half the rectangle dimension
+    var minDimen = hw < hh ? hw : hh;
+    if (tlRad > minDimen)  tlRad = minDimen;
+    if (blRad > minDimen)  blRad = minDimen;
+    if (brRad > minDimen)  brRad = minDimen;
+    if (trRad > minDimen)  trRad = minDimen;
+
+    // define some local variables
+    this.vertices   = [];
+    this.normals    = [];
+    this.uvs        = [];
+    this.indices    = [];
+
+    // get the starting points
+    if (tlRad == 0) {
+        RectangleStroke.pushVertex( x-hw+sw, y+hh-sw, z);
+        RectangleStroke.pushVertex( x-hw,    y+hh,    z);
+    } else {
+        if (tlRad > sw) {
+            RectangleStroke.pushVertex( x-hw+sw, y+hh-tlRad, z);
+            RectangleStroke.pushVertex( x-hw,    y+hh-tlRad, z);
+        } else {
+            RectangleStroke.pushVertex( x-hw+tlRad, y+hh-tlRad, z);
+            RectangleStroke.pushVertex( x-hw,       y+hh-tlRad, z);
+            RectangleStroke.pushVertex( x-hw+sw,    y+hh-sw,    z);
+            RectangleStroke.pushVertex( x-hw,       y+hh-sw,    z);
+        }
+    }
+
+    // get the left side
+    if (blRad == 0) {
+        RectangleStroke.pushVertex( x-hw+sw, y-hh+sw, z);
+        RectangleStroke.pushVertex( x-hw,    y-hh,    z);
+    } else {
+        if (blRad >= sw) {
+            RectangleStroke.pushVertex( x-hw+sw, y-hh+blRad, z);
+            RectangleStroke.pushVertex( x-hw,    y-hh+blRad, z);
+            var ctr      =  [x-hw+blRad,  y-hh+blRad, z],
+                insidePt =  [x-hw+sw,     y-hh+blRad, z],
+                outsidePt = [x-hw,        y-hh+blRad, z];
+            RectangleStroke.getRoundedCorner( ctr, insidePt,  outsidePt,  this.vertices );
+        } else {
+            RectangleStroke.pushVertex( x-hw+sw,  y-hh+sw,    z);
+            RectangleStroke.pushVertex( x-hw,     y-hh+blRad, z);
+            var ctr      =  [x-hw+blRad,  y-hh+blRad, z],
+                insidePt =  [x-hw+blRad,  y-hh+blRad, z],
+                outsidePt = [x-hw,        y-hh+blRad, z];
+            RectangleStroke.getRoundedCorner( ctr, insidePt, outsidePt, this.vertices  );
+
+            RectangleStroke.pushVertex( x-hw+sw,  y-hh+sw, z);
+            RectangleStroke.pushVertex( x-hw+sw,  y-hh,    z);
+        }
+    }
+
+    // get the bottom
+    if (brRad == 0) {
+        RectangleStroke.pushVertex( x+hw-sw, y-hh+sw, z);
+        RectangleStroke.pushVertex( x+hw,    y-hh,    z);
+    } else {
+        RectangleStroke.pushVertex( x+hw-brRad,    y-hh+sw, z);
+        RectangleStroke.pushVertex( x+hw-brRad,    y-hh,    z);
+        if (brRad >= sw) {
+            var ctr      =  [x+hw-brRad,  y-hh+brRad, z],
+                insidePt =  [x+hw-brRad,  y-hh+sw,    z],
+                outsidePt = [x+hw-brRad,  y-hh,       z];
+            RectangleStroke.getRoundedCorner( ctr, insidePt,  outsidePt,  this.vertices );
+        } else {
+            RectangleStroke.pushVertex( x+hw-sw,    y-hh+sw, z);
+            RectangleStroke.pushVertex( x+hw-brRad,    y-hh, z);
+            var ctr      =  [x+hw-brRad,  y-hh+brRad, z],
+                insidePt =  [x+hw-brRad,  y-hh+brRad, z],
+                outsidePt = [x+hw-brRad,  y-hh,       z];
+            RectangleStroke.getRoundedCorner( ctr, insidePt, outsidePt,  this.vertices );
+            RectangleStroke.pushVertex( x+hw-sw,    y-hh+sw, z);
+            RectangleStroke.pushVertex( x+hw,       y-hh+sw, z);
+        }
+    }
+
+    // get the right
+    if (trRad == 0) {
+        RectangleStroke.pushVertex( x+hw-sw, y+hh-sw, z);
+        RectangleStroke.pushVertex(    x+hw,    y+hh, z);
+    } else {
+        if (trRad >= sw) {
+            RectangleStroke.pushVertex( x+hw-sw,  y+hh-trRad, z);
+            RectangleStroke.pushVertex( x+hw,     y+hh-trRad, z);
+            var ctr      =  [x+hw-trRad,  y+hh-trRad, z],
+                insidePt =  [x+hw-sw,     y+hh-trRad, z],
+                outsidePt = [x+hw,        y+hh-trRad, z];
+            RectangleStroke.getRoundedCorner( ctr, insidePt,  outsidePt,  this.vertices );
+        } else {
+            RectangleStroke.pushVertex( x+hw-sw,  y+hh-sw,    z);
+            RectangleStroke.pushVertex( x+hw,     y+hh-trRad, z);
+            var ctr      =  [x+hw-trRad,  y+hh-trRad, z],
+                insidePt =  [x+hw-trRad,  y+hh-trRad, z],
+                outsidePt = [x+hw,        y+hh-trRad, z];
+            RectangleStroke.getRoundedCorner( ctr, insidePt, outsidePt,  this.vertices );
+            RectangleStroke.pushVertex( x+hw-sw,  y+hh-sw, z);
+            RectangleStroke.pushVertex( x+hw-sw,  y+hh,    z);
+        }
+    }
+
+    // get the top
+    if (tlRad == 0) {
+        RectangleStroke.pushVertex( x-hw+sw,  y+hh-sw, z);
+        RectangleStroke.pushVertex( x-hw,     y+hh,    z);
+    } else {
+        if (tlRad >= sw) {
+            RectangleStroke.pushVertex( x-hw+tlRad,  y+hh-sw, z);
+            RectangleStroke.pushVertex( x-hw+tlRad,  y+hh,    z);
+            var ctr      =  [x-hw+tlRad,  y+hh-tlRad, z],
+                insidePt =  [x-hw+tlRad,  y+hh-sw, z],
+                outsidePt = [x-hw+tlRad,  y+hh, z];
+            RectangleStroke.getRoundedCorner( ctr, insidePt,  outsidePt,  this.vertices );
         } else {
-			RectangleStroke.pushIndices( i, j, k );
+            RectangleStroke.pushVertex( x-hw+sw,     y+hh-sw, z);
+            RectangleStroke.pushVertex( x-hw+tlRad,  y+hh,    z);
+            var ctr      =  [x-hw+tlRad,  y+hh-tlRad, z],
+                insidePt =  [x-hw+tlRad,  y+hh-tlRad, z],
+                outsidePt = [x-hw+tlRad,  y+hh, z];
+            RectangleStroke.getRoundedCorner( ctr, insidePt, outsidePt,  this.vertices );
+        }
+    }
+
+    // get the normals and uvs
+    var vrt, uv;
+    var xMin = x - hw,
+        yMin = y - hh;
+    var n = [0, 0, 1];
+    var nVertices = this.vertices.length / 3;
+    for (var i=0;  i<nVertices;  i++) {
+        vrt = RectangleStroke.getVertex(i);
+        RectangleStroke.pushNormal( n );
+        uv  = RectangleStroke.getUV(vrt[0], vrt[1], xMin, width, yMin, height);
+        RectangleStroke.pushUV( uv );
+    }
+
+    // build the triangles
+    var nTriangles = nVertices - 2;
+    var i = 0,  j = 1, k = 2;
+    var reverse = false;
+    for (var iTri=0;  iTri<nTriangles;  iTri++) {
+        // we created a triangle strip, so each sequential triangle has the opposite orientation than its predecessor
+        if (!reverse) {
+            RectangleStroke.pushIndices( k, j, i );
+        } else {
+            RectangleStroke.pushIndices( i, j, k );
+        }
+
+        reverse = !reverse;
+
+        i++;
+        j++;
+        k++;
+    }
+
+    //refine the mesh for vertex deformations
+    if (material)
+    {
+        if (material.hasVertexDeformation())
+        {
+            var paramRange = material.getVertexDeformationRange();
+            var tolerance = material.getVertexDeformationTolerance();
+            nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices,  paramRange,  tolerance );
         }
+    }
 
-		reverse = !reverse;
-
-		i++;
-		j++;
-		k++;
-	}
-
-	//refine the mesh for vertex deformations
-	if (material)
-	{
-		if (material.hasVertexDeformation())
-		{
-			var paramRange = material.getVertexDeformationRange();
-			var tolerance = material.getVertexDeformationTolerance();
-			nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices,  paramRange,  tolerance );
-		}
-	}
-
-	// create the RDGE primitive
-	return ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices);
+    // create the RDGE primitive
+    return ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, RDGE.globals.engine.getContext().renderer.TRIANGLES, nVertices);
 };
 
 RectangleStroke.getRoundedCorner = function( ctr, insidePt, outsidePt ) {
-	var pt0 = insidePt.slice(),
-		pt1 = outsidePt.slice();
-
-	// create a matrix to rotate about the center
-	var nSegs = 16;
-	var angle = 0.5*Math.PI/nSegs;
-	var ctrNeg = ctr.slice();
-	VecUtils.vecNegate(3, ctrNeg);
-	var tNeg  = Matrix.Translation( ctrNeg ),
-		rot   = Matrix.RotationZ( angle ),
-		trans = Matrix.Translation( ctr );
-	var mat = glmat4.multiply( rot, tNeg, [] );
-	glmat4.multiply(trans, mat, mat );
-
-	RectangleStroke.pushVertex(pt0[0], pt0[1], 0.0 );
-	RectangleStroke.pushVertex(pt1[0], pt1[1], 0.0 );
-	for (var i=0;  i<nSegs;  i++) {
-		pt0 = MathUtils.transformPoint( pt0, mat );
-		pt1 = MathUtils.transformPoint( pt1, mat );
-
-		RectangleStroke.pushVertex(pt0[0], pt0[1], 0.0 );
-		RectangleStroke.pushVertex(pt1[0], pt1[1], 0.0 );
-	}
+    var pt0 = insidePt.slice(),
+        pt1 = outsidePt.slice();
+
+    // create a matrix to rotate about the center
+    var nSegs = 16;
+    var angle = 0.5*Math.PI/nSegs;
+    var ctrNeg = ctr.slice();
+    VecUtils.vecNegate(3, ctrNeg);
+    var tNeg  = Matrix.Translation( ctrNeg ),
+        rot   = Matrix.RotationZ( angle ),
+        trans = Matrix.Translation( ctr );
+    var mat = glmat4.multiply( rot, tNeg, [] );
+    glmat4.multiply(trans, mat, mat );
+
+    RectangleStroke.pushVertex(pt0[0], pt0[1], 0.0 );
+    RectangleStroke.pushVertex(pt1[0], pt1[1], 0.0 );
+    for (var i=0;  i<nSegs;  i++) {
+        pt0 = MathUtils.transformPoint( pt0, mat );
+        pt1 = MathUtils.transformPoint( pt1, mat );
+
+        RectangleStroke.pushVertex(pt0[0], pt0[1], 0.0 );
+        RectangleStroke.pushVertex(pt1[0], pt1[1], 0.0 );
+    }
 };
 
-RectangleStroke.pushVertex	= RectangleFill.pushVertex;
-RectangleStroke.pushNormal	= RectangleFill.pushNormal;
-RectangleStroke.pushUV		= RectangleFill.pushUV;
-RectangleStroke.pushIndices	= RectangleFill.pushIndices;
-RectangleStroke.getVertex	= RectangleFill.getVertex;
-RectangleStroke.