From a0d23354802ebc6b437698acb4b18d3395d47cd1 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Fri, 16 Mar 2012 12:26:30 -0700
Subject: Conversion to JSON based file IO for canvas2D and WebGL rendering

---
 js/document/html-document.js                      |  43 +++--
 js/lib/drawing/world.js                           | 128 +++++++++++++++
 js/lib/geom/circle.js                             |  72 ++++++++-
 js/lib/geom/geom-obj.js                           |  79 +++++++++
 js/lib/geom/line.js                               |  53 ++++++-
 js/lib/geom/rectangle.js                          |  87 ++++++++--
 js/lib/rdge/materials/bump-metal-material.js      |  44 +++++
 js/lib/rdge/materials/flat-material.js            |  21 +++
 js/lib/rdge/materials/linear-gradient-material.js |  53 +++++++
 js/lib/rdge/materials/pulse-material.js           |  32 ++++
 js/lib/rdge/materials/radial-blur-material.js     |  36 +++++
 js/lib/rdge/materials/radial-gradient-material.js |  54 ++++++-
 js/lib/rdge/materials/taper-material.js           |  27 ++++
 js/lib/rdge/materials/twist-vert-material.js      |  28 ++++
 js/lib/rdge/materials/uber-material.js            | 185 +++++++++++++++++++++-
 js/models/materials-model.js                      |  32 +++-
 16 files changed, 923 insertions(+), 51 deletions(-)

(limited to 'js')

diff --git a/js/document/html-document.js b/js/document/html-document.js
index d4db6e2f..bf03e38b 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -194,11 +194,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 			//
 			if (elt) {
 				this._glData = [];
-				//if (path) {
-					//this.collectGLData(elt, this._glData, path);
-				//} else {
-					this.collectGLData(elt, this._glData );
-				//}
+				this.collectGLData(elt, this._glData );
 			} else {
 				this._glData = null
 			}
@@ -220,25 +216,26 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 
 					// /*
 					var importStr = value[i];
-					var startIndex = importStr.indexOf( "id: " );
-					if (startIndex >= 0) {
-						var endIndex = importStr.indexOf( "\n", startIndex );
-						if (endIndex > 0) {
-							var id = importStr.substring( startIndex+4, endIndex );
-							if (id) {
-								var canvas = this.findCanvasWithID( id, elt );
-								if (canvas) {
-									if (!canvas.elementModel) {
-										NJUtils.makeElementModel(canvas, "Canvas", "shape", true);
+					var jObj = JSON.parse( importStr );
+					if (jObj)
+					{
+						var id = jObj.id;
+						if (id)
+						{
+							var canvas = this.findCanvasWithID( id, elt );
+							if (canvas) {
+								if (!canvas.elementModel) {
+									NJUtils.makeElementModel(canvas, "Canvas", "shape", true);
+								}
+								if (canvas.elementModel) {
+									if (canvas.elementModel.shapeModel.GLWorld) {
+										canvas.elementModel.shapeModel.GLWorld.clearTree();
 									}
-									if (canvas.elementModel) {
-										if (canvas.elementModel.shapeModel.GLWorld) {
-											canvas.elementModel.shapeModel.GLWorld.clearTree();
-										}
-										var index = importStr.indexOf( "webGL: " );
-										var useWebGL = (index >= 0)
+									if (jObj)
+									{
+										var useWebGL = jObj.webGL;
 										var world = new GLWorld( canvas, useWebGL );
-										world.import( importStr );
+										world.importJSON( jObj );
 										this.buildShapeModel( canvas.elementModel, world );
 									}
 								}
@@ -382,7 +379,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 		{
 			if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld)
 			{
-				var data = elt.elementModel.shapeModel.GLWorld.export();
+				var data = elt.elementModel.shapeModel.GLWorld.exportJSON();
 				dataArray.push( data );
 			}
 
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index 44c9e37d..9e502c3e 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -727,6 +727,57 @@ World.prototype.getShapeFromPoint = function( offsetX, offsetY ) {
 	}
 };
 
+World.prototype.exportJSON = function()
+{
+	// world properties
+	var worldObj = 
+	{
+		'version'	: 1.1,
+		'id'		: this.getCanvas().getAttribute( "data-RDGE-id" ),
+		'fov'		: this._fov,
+		'zNear'		: this._zNear,
+		'zFar'		: this._zFar,
+		'viewDist'	: this._viewDist,
+		'webGL'		: this._useWebGL
+	};
+
+	// RDGE scenegraph
+	if (this._useWebGL)
+		worldObj.scenedata = this.myScene.exportJSON();
+
+	// object data
+	var strArray = [];
+	this.exportObjectsJSON( this._geomRoot, worldObj );
+
+	// convert the object to a string
+	var jStr = JSON.stringify( worldObj );
+
+	// the RDGE export function corrupts the data.
+	// rebuild the tree
+	var root = this._rootNode;
+	root.children = new Array();
+	if (worldObj.children && (worldObj.children.length === 1))
+		this.importObjectsJSON( worldObj.children[0] );
+	
+	return jStr;
+}
+
+World.prototype.exportObjectsJSON = function( obj,  parentObj )
+{
+	if (!obj)  return;
+
+	var jObj = obj.exportJSON();
+	if (!parentObj.children)  parentObj.children = [];
+	parentObj.children.push( jObj );
+
+	if (obj.getChild()) {
+		 this.exportObjects( obj.getChild (), jObj  );
+    }
+
+	if (obj.getNext())
+		this.exportObjects( obj.getNext(), parentObj );
+}
+
 World.prototype.export = function()
 {
 	var exportStr = "GLWorld 1.0\n";
@@ -808,6 +859,83 @@ World.prototype.findTransformNodeByMaterial = function( materialNode,  trNode )
 	return rtnNode;
 };
 
+World.prototype.importJSON = function( jObj )
+{
+	if (jObj.webGL)
+	{
+		// start RDGE
+		rdgeStarted = true;
+		var id = this._canvas.getAttribute( "data-RDGE-id" ); 
+		this._canvas.rdgeid = id;
+		g_Engine.registerCanvas(this._canvas, this);
+		RDGEStart( this._canvas );
+		this._canvas.task.stop()
+	}
+
+	// import the objects
+	// there should be exactly one child of the parent object
+	if (jObj.children && (jObj.children.length === 1))
+		this.importObjectsJSON( jObj.children[0] );
+	else
+		throw new Error ("unrecoverable canvas import error - inconsistent root object: " + jObj.children );
+
+	if (!this._useWebGL)
+	{
+		// render using canvas 2D
+		this.render();
+	}
+}
+
+World.prototype.importObjectsJSON = function( jObj,  parentGeomObj )
+{
+	// read the next object
+	var gObj = this.importObjectJSON( jObj,  parentGeomObj );
+
+	// determine if we have children
+	if (jObj.children)
+	{
+		var nKids = ojObjbj.chilodren.length;
+		for (var i=0;  i<nKids;  i++)
+		{
+			var child = jObj.children[i];
+			this.importObjectsJSON( child, gObj );
+		}
+	}
+}
+
+World.prototype.importObjectJSON = function( jObj, parentGeomObj )
+{
+	var type = jObj.type;
+
+	var obj;
+	switch (type)
+	{
+		case 1:
+			obj = new Rectangle();
+			obj.importJSON( jObj );
+			break;
+
+		case 2:		// circle
+			obj = new Circle();
+			obj.importJSON( jObj );
+			break;
+
+		case 3:		// line
+            obj = new Line();
+            obj.importJSON( jObj );
+            break;
+
+		default:
+			throw new Error( "Unrecognized object type: " + type );
+			break;
+	}
+
+	if (obj)
+		this.addObject( obj,  parentGeomObj );
+
+	return obj;
+};
+
 World.prototype.import = function( importStr ) {
 	// import the worldattributes - not currently used
 
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index f94d4e6b..7d1a3452 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -53,13 +53,13 @@ var Circle = function GLCircle() {
 		if(strokeMaterial){
 			this._strokeMaterial = strokeMaterial;
         } else {
-			this._strokeMaterial = MaterialsModel.exportFlatMaterial();
+			this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
         }
 
 		if(fillMaterial) {
 			this._fillMaterial = fillMaterial;
         } else {
-			this._fillMaterial = MaterialsModel.exportFlatMaterial();
+			this._fillMaterial = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
         }
 
 		this.exportMaterials();
@@ -551,7 +551,65 @@ var Circle = function GLCircle() {
 		}
     };
 
-	this.export = function() {
+	this.exportJSON = 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,
+			'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;
+	};
+
+	this.importJSON = 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._innerRadius		= jObj.innerRadius;
+		this._strokeStyle		= jObj.strokeStyle;
+		var strokeMaterialName	= jObj.strokeMat;
+		var fillMaterialName	= jObj.fillMat;
+		this.importMaterialsJSON( jObj.materials );
+
+		var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
+		if (!strokeMat) {
+			console.log( "object material not found in library: " + strokeMaterialName );
+			strokeMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+		}
+		else
+			strokeMat = strokeMat.dup();
+		this._strokeMaterial = strokeMat;
+
+		var fillMat = MaterialsModel.getMaterial( fillMaterialName );
+		if (!fillMat) {
+			console.log( "object material not found in library: " + fillMaterialName );
+			fillMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+		}
+		else
+			fillMat = fillMat.dup();
+		this._fillMaterial = fillMat;
+	};
+
+
+	this.export = function()
+	{
 		var rtnStr = "type: " + this.geomType() + "\n";
 
 		rtnStr += "xoff: "			+ this._xOffset		+ "\n";
@@ -568,7 +626,7 @@ var Circle = function GLCircle() {
 		if (this._strokeMaterial) {
 			rtnStr += this._strokeMaterial.getName();
         } else {
-			rtnStr += "flatMaterial";
+			rtnStr +=  MaterialsModel.getDefaultMaterialName();
         }
 
 		rtnStr += "\n";
@@ -577,7 +635,7 @@ var Circle = function GLCircle() {
 		if (this._fillMaterial) {
 			rtnStr += this._fillMaterial.getName();
         } else {
-			rtnStr += "flatMaterial";
+			rtnStr +=  MaterialsModel.getDefaultMaterialName();
         }
 		rtnStr += "\n";
 
@@ -602,7 +660,7 @@ var Circle = function GLCircle() {
 		var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
 		if (!strokeMat) {
 			console.log( "object material not found in library: " + strokeMaterialName );
-			strokeMat = MaterialsModel.exportFlatMaterial();
+			strokeMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
 		}
 
 		this._strokeMaterial = strokeMat;
@@ -610,7 +668,7 @@ var Circle = function GLCircle() {
 		var fillMat = MaterialsModel.getMaterial( fillMaterialName );
 		if (!fillMat) {
 			console.log( "object material not found in library: " + fillMaterialName );
-			fillMat = MaterialsModel.exportFlatMaterial();
+			fillMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
 		}
 		this._fillMaterial = fillMat;
 
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js
index 35ebadb9..2a5b0641 100755
--- a/js/lib/geom/geom-obj.js
+++ b/js/lib/geom/geom-obj.js
@@ -5,6 +5,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 
 var MaterialsModel = require("js/models/materials-model").MaterialsModel;
+/*
 var FlatMaterial = require("js/lib/rdge/materials/flat-material").FlatMaterial;
 var LinearGradientMaterial = require("js/lib/rdge/materials/linear-gradient-material").LinearGradientMaterial;
 var RadialGradientMaterial = require("js/lib/rdge/materials/radial-gradient-material").RadialGradientMaterial;
@@ -25,6 +26,7 @@ var TwistMaterial = require("js/lib/rdge/materials/twist-material").TwistMateria
 var JuliaMaterial = require("js/lib/rdge/materials/julia-material").JuliaMaterial;
 var KeleidoscopeMaterial = require("js/lib/rdge/materials/keleidoscope-material").KeleidoscopeMaterial;
 var MandelMaterial = require("js/lib/rdge/materials/mandel-material").MandelMaterial;
+*/
 
 ///////////////////////////////////////////////////////////////////////
 // Class GLGeomObj
@@ -225,6 +227,83 @@ var GeomObj = function GLGeomObj() {
         return fillMaterial;
     };
 
+	this.exportMaterialsJSON = function()
+	{
+		var jObj;
+		if (this._materialArray && this._materialNodeArray)
+		{
+			var nMats = this._materialArray.length;
+			if (nMats > 0)
+			{
+				var arr = [];
+
+				for (var i=0;  i<nMats;  i++)
+				{
+					var matObj = 
+					{
+						'materialNodeName'	: this._materialNodeArray[i].name,
+						'material'			: this._materialArray[i].exportJSON(),
+						'type'				: this._materialTypeArray[i]
+					}
+					arr.push( matObj );
+				}
+
+				jObj =
+				{
+					'nMaterials'	: nMats,
+					'materials'		: arr
+				};
+			}
+		}
+
+		return jObj;
+	}
+
+	this.importMaterialsJSON = function( jObj )
+	{
+		var nMaterials = jObj.nMaterials;
+		var matArray = jObj.materials;
+		for (var i=0;  i<nMaterials;  i++)
+		{
+			var mat;
+			var matObj = matArray[i].material;
+			var shaderName = matObj.material;
+			switch (shaderName)
+			{
+				case "flat":
+				case "radialGradient":
+				case "linearGradient":
+				case "bumpMetal":
+				case "uber":
+				case "plasma":
+				case "deform":
+				case "water":
+				case "tunnel":
+				case "reliefTunnel":
+				case "squareTunnel":
+				case "twist":
+				case "fly":
+				case "julia":
+				case "mandel":
+				case "star":
+				case "zinvert":
+				case "keleidoscope":
+				case "radialBlur":
+				case "pulse":
+					mat = MaterialsModel.getMaterialByShader( shaderName );
+					if (mat)  mat = mat.dup();
+					break;
+
+				default:
+					console.log( "material type: " + materialType + " is not supported" );
+					break;
+			}
+
+			if (mat)
+				mat.importJSON( matObj );
+		}
+	}
+
 	this.exportMaterials = function()
 	{
 		var rtnStr = "";
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index da63b21c..aa27fa87 100755
--- a/js/lib/geom/line.js
+++ b/js/lib/geom/line.js
@@ -99,9 +99,56 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
 
 	this.geomType	= function()				{  return this.GEOM_TYPE_LINE;	}
 
-		///////////////////////////////////////////////////////////////////////
+	///////////////////////////////////////////////////////////////////////
 	// Methods
 	///////////////////////////////////////////////////////////////////////
+	this.exportJSON = function()
+	{
+		var jObj = 
+		{
+			'type'			: this.geomType(),
+			'xoff'			: this._xOffset,
+			'yoff'			: this._yOffset,
+			'width'			: this._width,
+			'height'		: this._height,
+			'xAdj'		    : this._xAdj,
+			'yAdj'		    : this._yAdj,
+			'slope'	        : this._slope,
+			'strokeWidth'	: this._strokeWidth,
+			'strokeColor'	: this._strokeColor,
+			'strokeStyle'	: this._strokeStyle,
+			'strokeMat'		: this._strokeMaterial ? this._strokeMaterial.getName() : MaterialsModel.getDefaultMaterialName(),
+			'materials'		: this.exportMaterialsJSON()
+		};
+
+		return jObj;
+	};
+
+	this.importJSON = function( jObj )
+	{
+		this._xOffset			= jObj.xoff;
+		this._yOffset			= jObj.yoff;
+		this._width				= jObj.width;
+		this._height			= jObj.height;
+		this._xAdj			    = jObj.xAdj;
+		this._yAdj			    = jObj.yAdj;
+		this._strokeWidth		= jObj.strokeWidth;
+		this._slope 		    = jObj.slope;
+		this._strokeStyle		= jObj.strokeStyle;
+		this._strokeColor		= jObj.strokeColor;
+		var strokeMaterialName	= jObj.strokeMat;
+
+		var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
+		if (!strokeMat) {
+			console.log( "object material not found in library: " + strokeMaterialName );
+			strokeMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+		}
+		else
+			strokeMat = strokeMat.dup();
+		this._strokeMaterial = strokeMat;
+
+	};
+
 	this.export = function() {
 		var rtnStr = "type: " + this.geomType() + "\n";
 
@@ -120,7 +167,7 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
 		if (this._strokeMaterial) {
 			rtnStr += this._strokeMaterial.getName();
         } else {
-			rtnStr += "flatMaterial";
+			rtnStr +=  MaterialsModel.getDefaultMaterialName();
         }
 
 		rtnStr += "\n";
@@ -150,7 +197,7 @@ var Line = function GLLine( world, xOffset, yOffset, width, height, slope, strok
 		var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
 		if (!strokeMat) {
 			console.log( "object material not found in library: " + strokeMaterialName );
-			strokeMat = MaterialsModel.exportFlatMaterial();
+			strokeMat = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
 		}
 
 		this._strokeMaterial = strokeMat;
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 370bb257..51fa3fd6 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -7,7 +7,6 @@
 var GeomObj = require("js/lib/geom/geom-obj").GeomObj;
 var ShapePrimitive =    require("js/lib/geom/shape-primitive").ShapePrimitive;
 var MaterialsModel = require("js/models/materials-model").MaterialsModel;
-var FlatMaterial = require("js/lib/rdge/materials/flat-material").FlatMaterial;
  ///////////////////////////////////////////////////////////////////////
 // Class GLRectangle
 //      GL representation of a rectangle.
@@ -71,13 +70,13 @@ var Rectangle = function GLRectangle() {
 		if(strokeMaterial) {
 			this._strokeMaterial = strokeMaterial;
         } else {
-			this._strokeMaterial = MaterialsModel.exportFlatMaterial();
+			this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
         }
 
 		if(fillMaterial) {
 			this._fillMaterial = fillMaterial;
         } else {
-			this._fillMaterial = MaterialsModel.exportFlatMaterial();
+			this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() );
         }
 
 		this.exportMaterials();
@@ -218,7 +217,7 @@ var Rectangle = function GLRectangle() {
 		if (this._strokeMaterial) {
 			rtnStr += this._strokeMaterial.getName();
         } else {
-			rtnStr += "flatMaterial";
+			rtnStr +=  MaterialsModel.getDefaultMaterialName();
         }
 		rtnStr += "\n";
 
@@ -226,7 +225,7 @@ var Rectangle = function GLRectangle() {
 		if (this._fillMaterial) {
 			rtnStr += this._fillMaterial.getName();
         } else {
-			rtnStr += "flatMaterial";
+			rtnStr +=  MaterialsModel.getDefaultMaterialName();
         }
 		rtnStr += "\n";
 
@@ -235,6 +234,71 @@ var Rectangle = function GLRectangle() {
 		return rtnStr;
 	};
 
+	// JSON export
+	this.exportJSON = 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()
+		};
+
+		return jObj;
+	};
+
+	this.importJSON = 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.importMaterialsJSON( jObj.materials );
+
+		var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
+		if (!strokeMat) {
+			console.log( "object material not found in library: " + strokeMaterialName );
+			strokeMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+		}
+		else
+			strokeMat = strokeMat.dup();
+		this._strokeMaterial = strokeMat;
+
+		var fillMat = MaterialsModel.getMaterial( fillMaterialName );
+		if (!fillMat) {
+			console.log( "object material not found in library: " + fillMaterialName );
+			fillMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
+		}
+		else
+			fillMat = fillMat.dup();
+		this._fillMaterial = fillMat;
+	};
+
 	this.import = function( importStr ) {
 		this._xOffset			= Number( this.getPropertyFromString( "xoff: ",			importStr )  );
 		this._yOffset			= Number( this.getPropertyFromString( "yoff: ",			importStr )  );
@@ -256,15 +320,14 @@ var Rectangle = function GLRectangle() {
 		var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
 		if (!strokeMat) {
 			console.log( "object material not found in library: " + strokeMaterialName );
-			strokeMat = MaterialsModel.exportFlatMaterial();
+			strokeMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
 		}
-
 		this._strokeMaterial = strokeMat;
 
 		var fillMat = MaterialsModel.getMaterial( fillMaterialName );
 		if (!fillMat) {
 			console.log( "object material not found in library: " + fillMaterialName );
-			fillMat = MaterialsModel.exportFlatMaterial();
+			fillMat = MaterialsModel.getMaterial(  MaterialsModel.getDefaultMaterialName() );
 		}
 		this._fillMaterial = fillMat;
 
@@ -339,10 +402,10 @@ var Rectangle = function GLRectangle() {
 		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);
-        this._primArray.push( strokePrim );
-		this._materialNodeArray.push( strokeMaterial.getMaterialNode() );
+//		var strokeMaterial = this.makeStrokeMaterial();
+//		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
 		tlRadius -= strokeSize;  if (tlRadius < 0)  tlRadius = 0.0;
diff --git a/js/lib/rdge/materials/bump-metal-material.js b/js/lib/rdge/materials/bump-metal-material.js
index fa6f5300..4a6e9ab8 100755
--- a/js/lib/rdge/materials/bump-metal-material.js
+++ b/js/lib/rdge/materials/bump-metal-material.js
@@ -152,6 +152,50 @@ var BumpMetalMaterial = function BumpMetalMaterial() {
 		}
 	};
 
+	this.exportJSON = function()
+	{
+		var world = this.getWorld();
+		if (!world)
+			throw new Error( "no world in material.export, " + this.getName() );
+
+		var jObj =
+		{
+			'material'			: this.getShaderName(),
+			'name'				: this.getName(),
+			'lightDiff'			: this.getLightDiff(),
+			'diffuseTexture'	: this.getDiffuseTexture(),
+			'specularTexture'	: this.getSpecularTexture(),
+			'normalMap'			: this.getNormalTexture()
+		};
+
+		return jObj;
+	};
+
+	this.importJSON = function( jObj )
+	{
+		if (this.getShaderName() != jObj.material)  throw new Error( "ill-formed material" );
+		this.setName( jObj.name );
+
+		try
+		{
+			var lightDiff  = jObj.lightDiff,
+				dt = jObj.diffuseTexture,
+				st = jObj.specularTexture,
+				nt = jObj.normalMap;
+		
+			this.setProperty( "lightDiff",  lightDiff);
+			this.setProperty( "diffuseTexture", dt );
+			this.setProperty( "specularTexture", st );
+			this.setProperty( "normalMap", nt );
+		}
+		catch (e)
+		{
+			throw new Error( "could not import BumpMetal material: " + jObj );
+		}
+		
+		return;
+	};
+
 	this.export = function()
 	{
 		// every material needs the base type and instance name
diff --git a/js/lib/rdge/materials/flat-material.js b/js/lib/rdge/materials/flat-material.js
index fff0e68e..5030cc88 100755
--- a/js/lib/rdge/materials/flat-material.js
+++ b/js/lib/rdge/materials/flat-material.js
@@ -112,6 +112,27 @@ var FlatMaterial = function FlatMaterial() {
         return rtnStr;
     };
 
+	this.exportJSON = function()
+	{
+		var jObj =
+		{
+			'material'		: this.getShaderName(),
+			'name'			: this.getName(),
+			'color'			: this._propValues["color"]
+		};
+
+		return jObj;
+	}
+
+	this.importJSON = function( jObj )
+	{
+        if (this.getShaderName() != jObj.material)  throw new Error( "ill-formed material" );
+        this.setName(  jObj.name );
+        
+		var color  = jObj.color;
+		this.setProperty( "color",  color);
+	}
+
 	this.update = function( time )
 	{
 	};
diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js
index 8e05e23d..0db6fc90 100755
--- a/js/lib/rdge/materials/linear-gradient-material.js
+++ b/js/lib/rdge/materials/linear-gradient-material.js
@@ -249,6 +249,59 @@ var LinearGradientMaterial = function LinearGradientMaterial() {
 		}
 	};
 
+	this.exportJSON = function()
+	{
+		var jObj =
+		{
+			'material'		: this.getShaderName(),
+			'name'			: this.getName(),
+			'color1'		: this.getColor1(),
+			'color2'		: this.getColor2(),
+			'color3'		: this.getColor3(),
+			'color4'		: this.getColor4(),
+			'colorStop1'	: this.getColorStop1(),
+			'colorStop2'	: this.getColorStop2(),
+			'colorStop3'	: this.getColorStop3(),
+			'colorStop4'	: this.getColorStop4(),
+			'angle'			: this.getAngle()
+		};
+
+		return jObj;
+	};
+
+	this.importJSON = function( jObj )
+	{
+        if (this.getShaderName() != jObj.material)  throw new Error( "ill-formed material" );
+        this.setName(  jObj.name );
+
+		try
+		{
+			var color1	= jObj.color1,
+				color2	= jObj.color2,
+				color3	= jObj.color3,
+				color4	= jObj.color4,
+				colorStop1	= jObj.colorStop1,
+				colorStop2	= jObj.colorStop2,
+				colorStop3	= jObj.colorStop3,
+				colorStop4	= jObj.colorStop4,
+				angle = jObj.angle;
+
+			this.setProperty( "color1", color1 );
+			this.setProperty( "color2", color2 );
+			this.setProperty( "color3", color3 );
+			this.setProperty( "color4", color4 );
+			this.setProperty( "colorStop1", colorStop1 );
+			this.setProperty( "colorStop2", colorStop2 );
+			this.setProperty( "colorStop3", colorStop3 );
+			this.setProperty( "colorStop4", colorStop4 );
+			this.setProperty( "angle", angle );
+		}
+		catch (e)
+		{
+			throw new Error( "could not import material: " + importStr );
+		}
+	};
+
 	this.export = function() {
 		// every material needs the base type and instance name
 		var exportStr = "material: " + this.getShaderName() + "\n";
diff --git a/js/lib/rdge/materials/pulse-material.js b/js/lib/rdge/materials/pulse-material.js
index 81db36c6..1e2cd2a9 100644
--- a/js/lib/rdge/materials/pulse-material.js
+++ b/js/lib/rdge/materials/pulse-material.js
@@ -174,6 +174,38 @@ var PulseMaterial = function PulseMaterial() {
 		}
 	};
 
+	// JSON export
+	this.exportJSON = function()
+	{
+		var world = this.getWorld();
+		if (!world)
+			throw new Error( "no world in material.export, " + this.getName() );
+
+		var jObj =
+		{
+			'material'		: this.getShaderName(),
+			'name'			: this.getName(),
+			'texture'		: this._propValues[this._propNames[0]]
+		};
+
+		return jObj;
+	};
+
+	this.importJSON = function( jObj )
+	{
+        if (this.getShaderName() != jObj.material)  throw new Error( "ill-formed material" );
+        this.setName(  jObj.name );
+
+        try {
+			this._propValues[this._propNames[0]] = jObj.texture;
+        }
+        catch (e)
+        {
+            throw new Error( "could not import material: " + jObj );
+        }
+	}
+
+
 	this.export = function() {
 		// every material needs the base type and instance name
 		var exportStr = "material: " + this.getShaderName() + "\n";
diff --git a/js/lib/rdge/materials/radial-blur-material.js b/js/lib/rdge/materials/radial-blur-material.js
index 46cdda74..e76b302f 100644
--- a/js/lib/rdge/materials/radial-blur-material.js
+++ b/js/lib/rdge/materials/radial-blur-material.js
@@ -157,6 +157,42 @@ var RadialBlurMaterial = function RadialBlurMaterial() {
 		}
 	};
 
+	this.exportJSON = function()
+	{
+		var world = this.getWorld();
+		if (!world)
+			throw new Error( "no world in material.export, " + this.getName() );
+
+		var jObj =
+		{
+			'material'		: this.getShaderName(),
+			'name'			: this.getName(),
+			'color'			: this._propValues["color"],
+			'texture'		: this._propValues[this._propNames[0]]
+		};
+
+		return jObj;
+	};
+
+	this.importJSON = function( importStr )
+	{
+        if (this.getShaderName() != jObj.material)  throw new Error( "ill-formed material" );
+        this.setName( jObj.name );
+
+		var rtnStr;
+        try
+        {
+            this._propValues[this._propNames[0]] = jObj.texture;
+			this.updateTexture();
+        }
+        catch (e)
+        {
+            throw new Error( "could not import material: " + importStr );
+        }
+		
+		return rtnStr;
+	}
+
 	this.export = function() {
 		// every material needs the base type and instance name
 		var exportStr = "material: " + this.getShaderName() + "\n";
diff --git a/js/lib/rdge/materials/radial-gradient-material.js b/js/lib/rdge/materials/radial-gradient-material.js
index d19b44b7..87e20ad4 100755
--- a/js/lib/rdge/materials/radial-gradient-material.js
+++ b/js/lib/rdge/materials/radial-gradient-material.js
@@ -158,7 +158,8 @@ var RadialGradientMaterial = function RadialGradientMaterial() {
     this._propValues[ this._propNames[6] ] = this._colorStop3;
     this._propValues[ this._propNames[7] ] = this._colorStop4;
 
-    this.setProperty = function( prop, value ) {
+    this.setProperty = function( prop, value )
+	{
 		if (prop === "color")  prop = "color1";
 
 		// make sure we have legitimate imput
@@ -236,6 +237,57 @@ var RadialGradientMaterial = function RadialGradientMaterial() {
 		}
 	};
 
+	this.exportJSON = function()
+	{
+		var jObj =
+		{
+			'material'		: this.getShaderName(),
+			'name'			: this.getName(),
+
+			'color1'		: this.getColor1(),
+			'color2'		: this.getColor2(),
+			'color3'		: this.getColor3(),
+			'color4'		: this.getColor4(),
+			'colorStop1'	: this.getColorStop1(),
+			'colorStop2'	: this.getColorStop2(),
+			'colorStop3'	: this.getColorStop3(),
+			'colorStop4'	: this.getColorStop4()
+		};
+
+		return jObj;
+	};
+
+	this.importJSON = function( jObj )
+	{
+        if (this.getShaderName() != jObj.material)  throw new Error( "ill-formed material" );
+        this.setName(  jObj.name );
+
+		try
+		{
+			var color1	= jObj.color1,
+				color2	= jObj.color2,
+				color3	= jObj.color3,
+				color4	= jObj.color4,
+				colorStop1	= jObj.colorStop1,
+				colorStop2	= jObj.colorStop2,
+				colorStop3	= jObj.colorStop3,
+				colorStop4	= jObj.colorStop4;
+
+			this.setProperty( "color1", color1 );
+			this.setProperty( "color2", color2 );
+			this.setProperty( "color3", color3 );
+			this.setProperty( "color4", color4 );
+			this.setProperty( "colorStop1", colorStop1 );
+			this.setProperty( "colorStop2", colorStop2 );
+			this.setProperty( "colorStop3", colorStop3 );
+			this.setProperty( "colorStop4", colorStop4 );
+		}
+		catch (e)
+		{
+			throw new Error( "could not import material: " + importStr );
+		}
+	};
+
 	this.export = function() {
 		// every material needs the base type and instance name
 		var exportStr = "material: " + this.getShaderName() + "\n";
diff --git a/js/lib/rdge/materials/taper-material.js b/js/lib/rdge/materials/taper-material.js
index 03a7ba9c..15b7b2b0 100644
--- a/js/lib/rdge/materials/taper-material.js
+++ b/js/lib/rdge/materials/taper-material.js
@@ -96,6 +96,33 @@ function TaperMaterial()
 		}
 	}
 	///////////////////////////////////////////////////////////////////////
+	this.exportJSON = function()
+	{
+		var jObj =
+		{
+			'material'		: this.getShaderName(),
+			'name'			: this.getName(),
+			'color'			: this._propValues["color"]
+		};
+
+		return jObj;
+	}
+
+	this.importJSON = function( jObj )
+	{
+        if (this.getShaderName() != jObj.material)  throw new Error( "ill-formed material" );
+        this.setName( jObj.name );
+
+		try
+		{
+			var color  = jObj.color;
+			this.setProperty( "color",  color);
+		}
+		catch (e)
+		{
+			throw new Error( "could not import material: " + jObj );
+		}
+	}
 
 	this.export = function()
 	{
diff --git a/js/lib/rdge/materials/twist-vert-material.js b/js/lib/rdge/materials/twist-vert-material.js
index 05172a1b..2d2cdcc5 100644
--- a/js/lib/rdge/materials/twist-vert-material.js
+++ b/js/lib/rdge/materials/twist-vert-material.js
@@ -102,6 +102,34 @@ function TwistVertMaterial()
 	}
 	///////////////////////////////////////////////////////////////////////
 
+	this.exportJSON = function()
+	{
+		var jObj =
+		{
+			'material'		: this.getShaderName(),
+			'name'			: this.getName(),
+			'color'			: this._propValues["color"]
+		};
+
+		return jObj;
+	}
+
+	this.importJSON = function( jObj )
+	{
+        if (this.getShaderName() != jObj.material)  throw new Error( "ill-formed material" );
+        this.setName(  jObj.name );
+        
+		try
+		{
+			var color  = jObj.color;
+			this.setProperty( "color",  color);
+		}
+		catch (e)
+		{
+			throw new Error( "could not import material: " + importStr );
+		}
+	}
+
 	this.export = function()
 	{
 		// this function should be overridden by subclasses
diff --git a/js/lib/rdge/materials/uber-material.js b/js/lib/rdge/materials/uber-material.js
index 91f43754..0868e3e9 100755
--- a/js/lib/rdge/materials/uber-material.js
+++ b/js/lib/rdge/materials/uber-material.js
@@ -483,6 +483,187 @@ var UberMaterial = function UberMaterial() {
 		this.rebuildShader();
 	}
 
+	this.importJSON = function( jObj )
+	{
+        if (this.getShaderName() != jObj.material)  throw new Error( "ill-formed material" );
+        this.setName(  jObj.name );
+
+		if (jObj.materialProps)
+		{
+			var ambientColor  = jObj.materialProps.ambientColor;	 this.setProperty( "ambientColor", ambientColor );
+			var diffuseColor  = jObj.materialProps.diffuseColor;	 this.setProperty( "diffuseColor", diffuseColor );
+			var specularColor = jObj.materialProps.specularColor;	 this.setProperty( "specularColor", specularColor );
+			var specularPower = jObj.materialProps.specularPower;    this.setProperty( "specularPower", specularPower );
+		}
+
+		var lightArray = jObj.lights;
+		if (lightArray)
+		{
+			this._lights = [];
+			for (var i=0;  i<this._MAX_LIGHTS;  i++)
+			{
+				var lightObj = lightArray[i];
+				if (lightObj)
+				{
+					var type = lightObj['light'+i];
+					if (type)
+					{
+						var light = new Object;
+						switch (type)
+						{
+							case "directional":
+								light.direction = lightObj['light' + i + 'Dir'];
+								break;
+
+							case "spot":
+								light.position = lightObj['light' + i + 'Pos'];
+								light['spotInnerCutoff'] = lightObj['light' + i + 'OuterSpotCutoff'];
+								light['spotOuterCutoff'] = lightObj['light' + i + 'InnerSpotCutoff'];
+								break;
+
+							case "point":
+								light.position = lightObj['light' + i + 'Pos'];
+								light.attenuation = lightObj['light' + i + 'Attenuation'];
+								break;
+
+							default:
+								throw new Error( "unrecognized light type on import: " + type );
+								break;
+						}
+
+						// common to all lights
+						light.diffuseColor  = lightObj['light' + i + 'Color'];
+						light.specularColor = lightObj['light' + i + 'SpecularColor'];
+
+						// push the light
+						this._lights.push( light );
+					}
+					else
+						this._lights[i] = 'undefined';
+				}
+			}
+
+			if (this._lights.length > 0)
+			{
+				this._ubershaderCaps.lighting =
+				{
+					'light0' : this._lights[0],
+					'light1' : this._lights[1],
+					'light2' : this._lights[2],        
+					'light3' : this._lights[3]                                     
+				}
+			}
+		}
+
+		var diffuseMap = jObj['diffuseMap'];
+		if(diffuseMap)
+			this.setProperty( "diffuseMap", diffuseMap );
+
+		var normalMap = jObj['normalMap'];
+		if(normalMap)
+			this.setProperty( "normalMap", normalMap );
+
+		var specularMap = jObj['specularMap'];
+		if(specularMap)
+			this.setProperty( "specularMap", specularMap );
+
+		var environmentMap = jObj['environmentMap'];
+		if(environmentMap)
+		{
+			this.setProperty( "environmentMap", environmentMap );
+			this.setProperty( "environmentAmount", jObj['environmentAmount'] );
+		}
+
+		this.rebuildShader();
+	}
+
+	this.exportJSON = function()
+	{
+		// we will be needing the world.  Make sure it is there
+		var world = this.getWorld();
+		if (!world)
+			throw new Error( "no world in material.export, " + this.getName() );
+
+		// every material needs the base type and instance name
+		var caps = this._ubershaderCaps;
+		var jObj =
+		{
+			'material'		: this.getShaderName(),
+			'name'			: this.getName()
+		};
+
+		// export the material properties
+		if (typeof caps.material != 'undefined')
+		{
+			jObj.materialProps =
+			{
+					'ambientColor'	: this._ambientColor,
+					'diffuseColor'	: this._diffuseColor,
+					'specularColor'	: this._specularColor,
+					'specularPower'	: this._specularPower
+			};
+						
+		}
+
+		if (typeof caps.lighting != 'undefined')
+		{
+			var lightArray = [];
+			for (var i=0;  i<this._MAX_LIGHTS;  i++)
+			{
+				var light = caps.lighting["light" + i];
+				if( typeof light != "undefined")
+				{
+					var lightObj = {}
+					lightObj['light'+i] = light.type;
+
+					// output the light secific data
+					if (light.type === 'directional')
+					{
+						lightObj['light' + i + 'Dir']	= light['direction'];
+					}
+					else if (light.type === 'spot')
+					{
+						lightObj['light' + i + 'Pos'] = light['position'];
+						lightObj['light' + i + 'SpotInnerCutoff'] = light['spotInnerCutoff'];
+						lightObj['light' + i + 'SpotOuterCutoff'] = light['spotOuterCutoff'];
+					}
+					else		// light.type === 'point'
+					{
+						lightObj['light' + i + 'Pos'] = (light['position'] || [ 0, 0, 0 ]);
+						lightObj['light' + i + 'Attenuation'] = (light['attenuation'] || [ 1, 0, 0 ]);
+					}
+
+					// common to all lights
+					lightObj['light' + i + 'Color'] = (light['diffuseColor'] || [ 1,1,1,1 ]);
+					lightObj['light' + i + 'SpecularColor'] = (light['specularColor'] || [ 1, 1, 1, 1 ]); 
+					
+					lightArray.push( lightObj );         
+				}
+			}
+
+			if (lightArray.length > 0)
+				jObj.lights = lightArray;
+		}
+
+		if(typeof caps.diffuseMap != 'undefined')
+			jObj['diffuseMap'] = caps.diffuseMap.texture;
+
+		if(typeof caps.normalMap != 'undefined')
+			jObj['normalMap'] = caps.normalMap.texture;
+
+		if(typeof caps.specularMap != 'undefined')
+			jObj['specularMap'] = caps.specularMap.texture;
+
+		if(typeof caps.environmentMap != 'undefined')
+		{
+			jObj['environmentMap'] = caps.environmentMap.texture;
+			jObj['environmentAmount'] = caps.environmentMap.envReflection;
+		}
+
+		return jObj;
+	}
+
+
 	this.export = function()
 	{
 		// every material needs the base type and instance name
@@ -539,10 +720,6 @@ var UberMaterial = function UberMaterial() {
 			}
 		}
 
-//	this._diffuseMapOb = { 'texture' : 'assets/images/rocky-diffuse.jpg', 'wrap' : 'REPEAT' };
-//	this._normalMapOb = { 'texture' : 'assets/images/rocky-normal.jpg', 'wrap' : 'REPEAT' };
-//	this._specularMapOb = { 'texture' : 'assets/images/rocky-spec.jpg', 'wrap' : 'REPEAT' };
-//	this._environmentMapOb = { 'texture' : 'assets/images/silver.png', 'wrap' : 'CLAMP', 'envReflection' : this._environmentAmount };
 		var world = this.getWorld();
 		if (!world)
 			throw new Error( "no world in material.export, " + this.getName() );
diff --git a/js/models/materials-model.js b/js/models/materials-model.js
index d8fb4016..a45b0c72 100755
--- a/js/models/materials-model.js
+++ b/js/models/materials-model.js
@@ -115,7 +115,31 @@ exports.MaterialsModel = Montage.create(Component, {
                 return this._materials[index];
             }
         }
-    },			
+    },
+	
+	getMaterialByShader: 
+	{
+		value: function( shaderName )
+		{
+			var index = this.getIndexOfMaterialByShader( shaderName );
+			if (index >= 0)
+				return this._materials[index];
+		}
+	},		
+
+    getIndexOfMaterialByShader: {
+        value: function (shaderName) {
+            var len = this._materials.length;
+            for(var i=0; i<len; i++) {
+                var material = this._materials[i];
+                if(material.getShaderName() === shaderName) {
+                    return i;
+                }
+            }
+
+            return -1;
+        }
+    },
 
     getIndexOfMaterial: {
         value: function (materialName) {
@@ -143,6 +167,12 @@ exports.MaterialsModel = Montage.create(Component, {
         }
     },
 
+	getDefaultMaterialName: {
+		value: function() {
+			return "FlatMaterial";
+		}
+	},
+
 	exportMaterials: {
 		value: function() {
 
-- 
cgit v1.2.3