From 07c48708a99b94a220c043ad5951a331bbd4fc2d Mon Sep 17 00:00:00 2001
From: hwc487
Date: Wed, 29 Feb 2012 15:23:28 -0800
Subject: WebGL file I/O

---
 js/document/html-document.js                       |  2 +-
 js/helper-classes/RDGE/GLRectangle.js              |  8 +-
 js/helper-classes/RDGE/GLWorld.js                  |  5 +-
 .../RDGE/runtime/CanvasDataManager.js              | 10 ++-
 js/helper-classes/RDGE/runtime/GLRuntime.js        | 87 ++++++++++++++--------
 5 files changed, 70 insertions(+), 42 deletions(-)

diff --git a/js/document/html-document.js b/js/document/html-document.js
index 76436732..7dd28385 100755
--- a/js/document/html-document.js
+++ b/js/document/html-document.js
@@ -185,7 +185,7 @@ exports.HTMLDocument = Montage.create(TextDocument, {
 			var elt = this.documentRoot;
 			if (elt)
 			{
-				console.log( "load canvas data: " , value );
+				//console.log( "load canvas data: " , value );
 				var cdm = new CanvasDataManager();
 				cdm.loadGLData(elt,  value);
 			}
diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js
index a801d3c4..f44350df 100755
--- a/js/helper-classes/RDGE/GLRectangle.js
+++ b/js/helper-classes/RDGE/GLRectangle.js
@@ -274,10 +274,10 @@ 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/helper-classes/RDGE/GLWorld.js b/js/helper-classes/RDGE/GLWorld.js
index 8017207f..0ab3c242 100755
--- a/js/helper-classes/RDGE/GLWorld.js
+++ b/js/helper-classes/RDGE/GLWorld.js
@@ -811,7 +811,7 @@ GLWorld.prototype.getShapeFromPoint = function( offsetX, offsetY )
 	}
 }
 
-GLWorld.prototype.export = function()
+GLWorld.prototype.export = function( exportForPublish )
 {
 	var exportStr = "GLWorld 1.0\n";
 	var id = this.getCanvas().getAttribute( "data-RDGE-id" );
@@ -824,7 +824,8 @@ GLWorld.prototype.export = function()
 
 	// we need 2 export modes:  One for save/restore, one for publish.
 	// hardcoding for now
-	var exportForPublish = false;
+	//var exportForPublish = false;
+	if (!exportForPublish)  exportForPublish = false;
 	exportStr += "publish: " + exportForPublish + "\n";
 
 	if (exportForPublish)
diff --git a/js/helper-classes/RDGE/runtime/CanvasDataManager.js b/js/helper-classes/RDGE/runtime/CanvasDataManager.js
index 4985fc9a..46d944a1 100644
--- a/js/helper-classes/RDGE/runtime/CanvasDataManager.js
+++ b/js/helper-classes/RDGE/runtime/CanvasDataManager.js
@@ -29,9 +29,10 @@ function CanvasDataManager()
 					var canvas = this.findCanvasWithID( id, root );
 					if (canvas)
 					{
-						var loadForAuthoring = true;
+						//var loadForAuthoring = true;
 						var index = importStr.indexOf( "scenedata: " );
-						if (index >= 0)  loadForAuthoring = false;
+						//if (index >= 0)  loadForAuthoring = false;
+						var loadForAuthoring = false;
 
 						if (loadForAuthoring)
 						{
@@ -64,7 +65,7 @@ function CanvasDataManager()
 	{
 		if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld)
 		{
-			var data = elt.elementModel.shapeModel.GLWorld.export();
+			var data = elt.elementModel.shapeModel.GLWorld.export( true );
 			dataArray.push( data );
 		}
 
@@ -90,7 +91,8 @@ function CanvasDataManager()
 			for (var i=0;  i<nKids;  i++)
 			{
 				var child = elt.children[i];
-				this.findCanvasWithID( id, child );
+				var foundElt = this.findCanvasWithID( id, child );
+				if (foundElt)  return foundElt;
 			}
 		}
 	}
diff --git a/js/helper-classes/RDGE/runtime/GLRuntime.js b/js/helper-classes/RDGE/runtime/GLRuntime.js
index 5c99be02..33186174 100644
--- a/js/helper-classes/RDGE/runtime/GLRuntime.js
+++ b/js/helper-classes/RDGE/runtime/GLRuntime.js
@@ -25,14 +25,24 @@ function GLRuntime( canvas, importStr )
 	this._rootNode		= null;
 
 	this._firstRender	= true;
+	this._initialized	= false;
+
+	// view parameters
+	this._fov = 45.0;
+	this._zNear = 0.1;
+	this._zFar = 100.0;
+	this._viewDist = 5.0;
+
+	this._aspect = canvas.width/canvas.height;
 
     ///////////////////////////////////////////////////////////////////////
-	// initialization code
+	// accessors
     ///////////////////////////////////////////////////////////////////////
-	var id = canvas.getAttribute( "data-RDGE-id" ); 
-	canvas.rdgeid = id;
-	g_Engine.registerCanvas(canvas, this);
-	RDGEStart( canvas );
+	this.getZNear			= function()		{  return this._zNear;			}
+	this.getZFar			= function()		{  return this._zFar;			}
+	this.getFOV				= function()		{  return this._fov;			}
+	this.getAspect			= function()		{  return this._aspect;			}
+	this.getViewDistance	= function()		{  return this._viewDist;		}
 
 	this.loadScene = function()
 	{
@@ -72,8 +82,7 @@ function GLRuntime( canvas, importStr )
         
 		// create an empty scene graph
 		this.myScene = new SceneGraph();
- 		this.loadScene();
-       
+		
 		/*
 		// create some lights
 		// light 1
@@ -104,54 +113,70 @@ function GLRuntime( canvas, importStr )
 		*/
 
 		// load the scene graph data
+		this.loadScene();
         
 		// Add the scene to the engine - necessary if you want the engine to draw for you
-		var name = "myScene" + this._canvas.getAttribute( "data-RDGE-id" ); 
-		g_Engine.AddScene(name, this.myScene);
+		//var name = "myScene" + this._canvas.getAttribute( "data-RDGE-id" ); 
+		//g_Engine.AddScene(name, this.myScene);
+
+		this._initialized = true;
 	}
     
 	// main code for handling user interaction and updating the scene   
 	this.update = function(dt)
     {
-		if (!dt)  dt = 0.2;
+		if (this._initialized)
+		{
+			if (!dt)  dt = 0.2;
         
-		dt = 0.01;	// use our own internal throttle
-		this.elapsed += dt;
+			dt = 0.01;	// use our own internal throttle
+			this.elapsed += dt;
         
-		// changed the global position uniform of light 0, another way to change behavior of a light
-		rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]);
+			// changed the global position uniform of light 0, another way to change behavior of a light
+			//rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]);
         
-		// orbit the light nodes around the boxes
-		this.light.setPosition([1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), 1.2*Math.cos(this.elapsed*2.0)]);
-		this.light2.setPosition([-1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), -1.2*Math.cos(this.elapsed)]);
+			// orbit the light nodes around the boxes
+			//this.light.setPosition([1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), 1.2*Math.cos(this.elapsed*2.0)]);
+			//this.light2.setPosition([-1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), -1.2*Math.cos(this.elapsed)]);
 
-		// now update all the nodes in the scene
-		this.myScene.update(dt);
+			// now update all the nodes in the scene
+			this.myScene.update(dt);
+		}
     }
 
     // defining the draw function to control how the scene is rendered      
 	this.draw = function()
     {
-		g_Engine.setContext( this._canvas.rdgeid );
-
-		var ctx = g_Engine.getContext();
-		var renderer = ctx.renderer;
-		if (renderer.unloadedTextureCount <= 0)
+		if (this._initialized)
 		{
-			renderer.disableCulling();
-			renderer._clear();
-			this.myScene.render();
+			g_Engine.setContext( this._canvas.rdgeid );
 
-			if (this._firstRender)
+			var ctx = g_Engine.getContext();
+			var renderer = ctx.renderer;
+			if (renderer.unloadedTextureCount <= 0)
 			{
-				if (this._canvas.task)
+				renderer.disableCulling();
+				renderer._clear();
+				this.myScene.render();
+
+				if (this._firstRender)
 				{
-					this._firstRender = false;
-					this._canvas.task.stop();
+					if (this._canvas.task)
+					{
+						this._firstRender = false;
+						//this._canvas.task.stop();
+					}
 				}
 			}
 		}
     }
+
+	// start RDGE
+	var id = canvas.getAttribute( "data-RDGE-id" ); 
+	canvas.rdgeid = id;
+	g_Engine.registerCanvas(canvas, this);
+	RDGEStart( canvas );
+
 }
 
 
-- 
cgit v1.2.3


From d044b6d9755d8ca686501fc3dd5644180e2ffbf0 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Fri, 2 Mar 2012 09:36:31 -0800
Subject: WebGL File IO

---
 js/helper-classes/RDGE/GLGeomObj.js                |  46 ++++
 js/helper-classes/RDGE/GLRectangle.js              |  10 +-
 js/helper-classes/RDGE/GLWorld.js                  |  33 ++-
 .../RDGE/Materials/BumpMetalMaterial.js            |  37 +--
 js/helper-classes/RDGE/Materials/DeformMaterial.js |   2 +-
 js/helper-classes/RDGE/Materials/FlatMaterial.js   |  34 +--
 js/helper-classes/RDGE/Materials/FlyMaterial.js    |   2 +-
 js/helper-classes/RDGE/Materials/JuliaMaterial.js  |   2 +-
 .../RDGE/Materials/KeleidoscopeMaterial.js         |   2 +-
 .../RDGE/Materials/LinearGradientMaterial.js       |   2 +-
 js/helper-classes/RDGE/Materials/MandelMaterial.js |   2 +-
 js/helper-classes/RDGE/Materials/PlasmaMaterial.js |   2 +-
 js/helper-classes/RDGE/Materials/PulseMaterial.js  |   2 +-
 .../RDGE/Materials/RadialBlurMaterial.js           |   2 +-
 .../RDGE/Materials/RadialGradientMaterial.js       |   2 +-
 .../RDGE/Materials/ReliefTunnelMaterial.js         |   2 +-
 .../RDGE/Materials/SquareTunnelMaterial.js         |   2 +-
 js/helper-classes/RDGE/Materials/StarMaterial.js   |   2 +-
 js/helper-classes/RDGE/Materials/TaperMaterial.js  |   4 +-
 js/helper-classes/RDGE/Materials/TunnelMaterial.js |   2 +-
 js/helper-classes/RDGE/Materials/TwistMaterial.js  |   2 +-
 .../RDGE/Materials/TwistVertMaterial.js            |   2 +-
 js/helper-classes/RDGE/Materials/UberMaterial.js   |   2 +-
 js/helper-classes/RDGE/Materials/WaterMaterial.js  |   2 +-
 .../RDGE/Materials/ZInvertMaterial.js              |   2 +-
 js/helper-classes/RDGE/runtime/GLRuntime.js        | 182 +++++++++++---
 js/helper-classes/RDGE/runtime/RuntimeGeomObj.js   | 274 +++++++++++++++++++++
 js/helper-classes/RDGE/runtime/RuntimeMaterial.js  | 140 +++++++++++
 js/preloader/Preloader.js                          |   2 +
 29 files changed, 705 insertions(+), 95 deletions(-)
 create mode 100644 js/helper-classes/RDGE/runtime/RuntimeGeomObj.js
 create mode 100644 js/helper-classes/RDGE/runtime/RuntimeMaterial.js

diff --git a/js/helper-classes/RDGE/GLGeomObj.js b/js/helper-classes/RDGE/GLGeomObj.js
index c1ee01ba..955f0f39 100755
--- a/js/helper-classes/RDGE/GLGeomObj.js
+++ b/js/helper-classes/RDGE/GLGeomObj.js
@@ -158,6 +158,52 @@ function GLGeomObj()
         return fillMaterial;
     }
 
+	this.exportMaterials = function()
+	{
+		var rtnStr = "";
+		if (this._materialArray && this._materialNodeArray)
+		{
+			var nMats = this._materialArray.length;
+			rtnStr += "nMaterials: " + nMats + "\n";
+			for (var i=0;  i<nMats;  i++)
+			{
+				var matNode  = this._materialNodeArray[i];
+				rtnStr += "materialNodeName: " + matNode.name + "\n";
+
+				var material = this._materialArray[i];
+				rtnStr += material.export();
+			}
+		}
+		else
+			rtnStr += "nMaterials: 0\n" ;
+
+		return rtnStr;
+	}
+
+	this.importMaterials = function(importStr)
+	{
+		var nMaterials = Number( this.getPropertyFromString( "nMaterials: ", importStr )  );
+		for (var i=0;  i<nMaterials;  i++)
+		{
+			var mat;
+			var materialType = this.getPropertyFromString( "material: ",	importStr );
+			switch (materialType)
+			{
+				case "flat":		mat = new FlatMaterial();		break;
+
+				default:
+					console.log( "material type: " + materialType + " is not supported" );
+					break;
+			}
+
+			if (mat)
+				mat.import( importStr );
+
+			var endIndex = importStr.indexOf( "endMaterial\n" );
+			if (endIndex < 0)  break;
+			importStr = importStr.substr( endIndex );
+		}
+	}
 
     this.translate   = function(v)
     {
diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js
index f44350df..2caa7080 100755
--- a/js/helper-classes/RDGE/GLRectangle.js
+++ b/js/helper-classes/RDGE/GLRectangle.js
@@ -166,6 +166,8 @@ function GLRectangle()
 			rtnStr += "flatMaterial";
 		rtnStr += "\n";
 
+		rtnStr += this.exportMaterials();
+
 		return rtnStr;
 	}
 
@@ -274,10 +276,10 @@ 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/helper-classes/RDGE/GLWorld.js b/js/helper-classes/RDGE/GLWorld.js
index 0ab3c242..d9e91404 100755
--- a/js/helper-classes/RDGE/GLWorld.js
+++ b/js/helper-classes/RDGE/GLWorld.js
@@ -13,7 +13,6 @@ var fragmentShaderSource = "";
 
 var rdgeStarted = false;
 
-var nodeCounter = 0;
 var worldCounter = 0;
 
 
@@ -74,6 +73,10 @@ function GLWorld( canvas, use3D )
 	this._worldCount = worldCounter;
 	worldCounter++;
 
+	// keep a counter for generating node names
+	this._nodeCounter = 0;
+
+
     ///////////////////////////////////////////////////////////////////////
     // Property accessors
     ///////////////////////////////////////////////////////////////////////
@@ -392,6 +395,13 @@ function GLWorld( canvas, use3D )
 		RDGEStart( this._canvas );
 		this._canvas.task.stop()
 	}
+
+	this.generateUniqueNodeID = function()
+	{
+		var str = String( this._nodeCounter );
+		this._nodeCounter++;
+		return str;
+	}
 }
 
 
@@ -418,7 +428,7 @@ GLWorld.prototype.updateObject = function (obj)
         ctrTrNode = obj.getTransformNode();
 		if (ctrTrNode == null)
 		{
-			ctrTrNode = createTransformNode("objRootNode_" + nodeCounter++);
+			ctrTrNode = createTransformNode("objRootNode_" + this._nodeCounter++);
 			this._rootNode.insertAsChild( ctrTrNode );
 			obj.setTransformNode( ctrTrNode );
 		}
@@ -428,7 +438,7 @@ GLWorld.prototype.updateObject = function (obj)
 		});
 		ctrTrNode.meshes = [];
 
-        ctrTrNode.attachMeshNode(this.renderer.id + "_prim_" + nodeCounter++, prims[0]);
+        ctrTrNode.attachMeshNode(this.renderer.id + "_prim_" + this._nodeCounter++, prims[0]);
         ctrTrNode.attachMaterial(materialNodes[0]);
     }
 	
@@ -451,12 +461,12 @@ GLWorld.prototype.updateObject = function (obj)
 		}
 		else
 		{
-			childTrNode = createTransformNode("objNode_" + nodeCounter++);
+			childTrNode = createTransformNode("objNode_" + this._nodeCounter++);
 			ctrTrNode.insertAsChild(childTrNode);
 		}
 
         // attach the instanced box goe
-        childTrNode.attachMeshNode(this.renderer.id + "_prim_" + nodeCounter++, prim);
+        childTrNode.attachMeshNode(this.renderer.id + "_prim_" + this._nodeCounter++, prim);
         childTrNode.attachMaterial(materialNodes[i]);
     }
 }
@@ -821,6 +831,8 @@ GLWorld.prototype.export = function( exportForPublish )
 	exportStr += "zNear: " + this._zNear + "\n";
 	exportStr += "zFar: " + this._zFar + "\n";
 	exportStr += "viewDist: " + this._viewDist + "\n";
+	if (this._useWebGL)
+		exportStr += "webGL: true\n";
 
 	// we need 2 export modes:  One for save/restore, one for publish.
 	// hardcoding for now
@@ -831,11 +843,16 @@ GLWorld.prototype.export = function( exportForPublish )
 	if (exportForPublish)
 	{
 		exportStr += "scenedata: " + this.myScene.exportJSON() + "endscene\n";
+
+		// write out all of the objects
+		exportStr += "tree\n";
+		exportStr += this.exportObjects( this._geomRoot );
+		exportStr += "endtree\n";
 	}
 	else
 	{
 		// output the material library
-		exportStr += MaterialsLibrary.export();
+		//exportStr += MaterialsLibrary.export();	// THIS NEEDS TO BE DONE AT THE DOC LEVEL
 
 		// write out all of the objects
 		exportStr += "tree\n";
@@ -903,11 +920,13 @@ GLWorld.prototype.import = function( importStr )
 		rdgeStr = rdgeStr.substr( 0, endIndex );
 
 		this.myScene.importJSON( rdgeStr );
+
+		this.importObjects( importStr, this._rootNode );
 	}
 	else
 	{
 		// load the material library
-		importStr = MaterialsLibrary.import( importStr );
+		//importStr = MaterialsLibrary.import( importStr );
 
 		// import the objects
 		this.importObjects( importStr, this._rootNode );
diff --git a/js/helper-classes/RDGE/Materials/BumpMetalMaterial.js b/js/helper-classes/RDGE/Materials/BumpMetalMaterial.js
index a7a3724e..1a6c54c9 100755
--- a/js/helper-classes/RDGE/Materials/BumpMetalMaterial.js
+++ b/js/helper-classes/RDGE/Materials/BumpMetalMaterial.js
@@ -97,22 +97,27 @@ function BumpMetalMaterial()
 	this.init = function( world )
 	{
 		// save the world
-		if (world)  this.setWorld( world );
-
-		// set up the shader
-		this._shader = new jshader();
-		this._shader.def = bumpMetalMaterialDef;
-		this._shader.init();
-		this._shader.default.u_light0Diff.set( this.getLightDiff() );
-
-		// set up the material node
-		this._materialNode = createMaterialNode( this.getShaderName() );
-		this._materialNode.setShader(this._shader);
-
-		// set some image maps
-		this.updateTexture(1);
-        this.updateTexture(2);
-        this.updateTexture(3);
+		if (world)  
+		{
+			this.setWorld( world );
+
+			// set up the shader
+			this._shader = new jshader();
+			this._shader.def = bumpMetalMaterialDef;
+			this._shader.init();
+			this._shader.default.u_light0Diff.set( this.getLightDiff() );
+
+			// set up the material node
+			this._materialNode = createMaterialNode( this.getShaderName() + "_" + world.generateUniqueNodeID() );
+			this._materialNode.setShader(this._shader);
+
+			// set some image maps
+			this.updateTexture(1);
+			this.updateTexture(2);
+			this.updateTexture(3);
+		}
+		else
+			throw new Error( "GLWorld not supplied to material initialization" );
 	};
 
 	this.updateTexture = function( index )
diff --git a/js/helper-classes/RDGE/Materials/DeformMaterial.js b/js/helper-classes/RDGE/Materials/DeformMaterial.js
index ddc97383..b7101227 100644
--- a/js/helper-classes/RDGE/Materials/DeformMaterial.js
+++ b/js/helper-classes/RDGE/Materials/DeformMaterial.js
@@ -71,7 +71,7 @@ function DeformMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("deformMaterial");
+		this._materialNode = createMaterialNode("deformMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/Materials/FlatMaterial.js b/js/helper-classes/RDGE/Materials/FlatMaterial.js
index 570e7f9e..eb8970b8 100755
--- a/js/helper-classes/RDGE/Materials/FlatMaterial.js
+++ b/js/helper-classes/RDGE/Materials/FlatMaterial.js
@@ -40,19 +40,27 @@ function FlatMaterial()
 	// duplcate method requirde
 	this.dup = function()	{  return new FlatMaterial();	} ;
 
-	this.init = function()
+	this.init = function( world )
 	{
-		// set up the shader
-		this._shader = new jshader();
-		this._shader.def = flatShaderDef;
-		this._shader.init();
+		// save the world
+		if (world)
+		{
+			this.setWorld( world );
+
+			// set up the shader
+			this._shader = new jshader();
+			this._shader.def = flatShaderDef;
+			this._shader.init();
 
-        // set the defaults
-		this._shader.colorMe.color.set( this.getColor() );
+			// set the defaults
+			this._shader.colorMe.color.set( this.getColor() );
 
-		// set up the material node
-		this._materialNode = createMaterialNode("flatMaterial");
-		this._materialNode.setShader(this._shader);
+			// set up the material node
+			this._materialNode = createMaterialNode("flatMaterial_" + world.generateUniqueNodeID() );
+			this._materialNode.setShader(this._shader);
+		}
+		else
+			throw new Error( "GLWorld not supplied to material initialization" );
 	};
 
 
@@ -83,11 +91,7 @@ function FlatMaterial()
 		// this function should be overridden by subclasses
 		var exportStr = "material: " + this.getShaderName() + "\n";
 		exportStr += "name: " + this.getName() + "\n";
-		
-		if (this._shader)
-			exportStr += "color: " + String(this._shader.colorMe.color) + "\n";
-		else
-			exportStr += "color: " + this.getColor() + "\n";
+		exportStr += "color: " + String(this._propValues["color"]) + "\n";
 		exportStr += "endMaterial\n";
 
 		return exportStr;
diff --git a/js/helper-classes/RDGE/Materials/FlyMaterial.js b/js/helper-classes/RDGE/Materials/FlyMaterial.js
index 4a44e2e5..a70b53e8 100644
--- a/js/helper-classes/RDGE/Materials/FlyMaterial.js
+++ b/js/helper-classes/RDGE/Materials/FlyMaterial.js
@@ -71,7 +71,7 @@ function FlyMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("flyMaterial");
+		this._materialNode = createMaterialNode("flyMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/Materials/JuliaMaterial.js b/js/helper-classes/RDGE/Materials/JuliaMaterial.js
index f95263f4..9b5d588c 100644
--- a/js/helper-classes/RDGE/Materials/JuliaMaterial.js
+++ b/js/helper-classes/RDGE/Materials/JuliaMaterial.js
@@ -73,7 +73,7 @@ function JuliaMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("juliaMaterial");
+		this._materialNode = createMaterialNode("juliaMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/Materials/KeleidoscopeMaterial.js b/js/helper-classes/RDGE/Materials/KeleidoscopeMaterial.js
index 1547aca9..af7ce97c 100644
--- a/js/helper-classes/RDGE/Materials/KeleidoscopeMaterial.js
+++ b/js/helper-classes/RDGE/Materials/KeleidoscopeMaterial.js
@@ -71,7 +71,7 @@ function KeleidoscopeMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("keleidoscopeMaterial");
+		this._materialNode = createMaterialNode("keleidoscopeMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/Materials/LinearGradientMaterial.js b/js/helper-classes/RDGE/Materials/LinearGradientMaterial.js
index 7fe2be0c..2f900894 100755
--- a/js/helper-classes/RDGE/Materials/LinearGradientMaterial.js
+++ b/js/helper-classes/RDGE/Materials/LinearGradientMaterial.js
@@ -159,7 +159,7 @@ function LinearGradientMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode( this.getShaderName() );
+		this._materialNode = createMaterialNode( this.getShaderName() + world.generateUniqueNodeID() );
 		this._materialNode.setShader(this._shader);
 
 		// send the current values to the shader
diff --git a/js/helper-classes/RDGE/Materials/MandelMaterial.js b/js/helper-classes/RDGE/Materials/MandelMaterial.js
index 25b08404..df732ed2 100644
--- a/js/helper-classes/RDGE/Materials/MandelMaterial.js
+++ b/js/helper-classes/RDGE/Materials/MandelMaterial.js
@@ -74,7 +74,7 @@ function MandelMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("mandelMaterial");
+		this._materialNode = createMaterialNode("mandelMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/Materials/PlasmaMaterial.js b/js/helper-classes/RDGE/Materials/PlasmaMaterial.js
index a65f3a33..4e60df9f 100644
--- a/js/helper-classes/RDGE/Materials/PlasmaMaterial.js
+++ b/js/helper-classes/RDGE/Materials/PlasmaMaterial.js
@@ -74,7 +74,7 @@ function PlasmaMaterial()
 		this.setProperty( "color", [this._time, 0, 0,  1] );
 
 		// set up the material node
-		this._materialNode = createMaterialNode("plasmaMaterial");
+		this._materialNode = createMaterialNode("plasmaMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 	}
 
diff --git a/js/helper-classes/RDGE/Materials/PulseMaterial.js b/js/helper-classes/RDGE/Materials/PulseMaterial.js
index d76b9966..28f2a430 100644
--- a/js/helper-classes/RDGE/Materials/PulseMaterial.js
+++ b/js/helper-classes/RDGE/Materials/PulseMaterial.js
@@ -105,7 +105,7 @@ function PulseMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("pulseMaterial");
+		this._materialNode = createMaterialNode("pulseMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/Materials/RadialBlurMaterial.js b/js/helper-classes/RDGE/Materials/RadialBlurMaterial.js
index a5fb134c..471ff3c3 100644
--- a/js/helper-classes/RDGE/Materials/RadialBlurMaterial.js
+++ b/js/helper-classes/RDGE/Materials/RadialBlurMaterial.js
@@ -103,7 +103,7 @@ function RadialBlurMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("radialBlurMaterial");
+		this._materialNode = createMaterialNode("radialBlurMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js b/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js
index 12842798..4ebb1f30 100755
--- a/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js
+++ b/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js
@@ -154,7 +154,7 @@ function RadialGradientMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("radialGradientMaterial");
+		this._materialNode = createMaterialNode("radialGradientMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		// set the shader values in the shader
diff --git a/js/helper-classes/RDGE/Materials/ReliefTunnelMaterial.js b/js/helper-classes/RDGE/Materials/ReliefTunnelMaterial.js
index 6540c3e9..ba938806 100644
--- a/js/helper-classes/RDGE/Materials/ReliefTunnelMaterial.js
+++ b/js/helper-classes/RDGE/Materials/ReliefTunnelMaterial.js
@@ -71,7 +71,7 @@ function ReliefTunnelMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("reliefTunnelMaterial");
+		this._materialNode = createMaterialNode("reliefTunnelMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/Materials/SquareTunnelMaterial.js b/js/helper-classes/RDGE/Materials/SquareTunnelMaterial.js
index 8238b651..3a8afd18 100644
--- a/js/helper-classes/RDGE/Materials/SquareTunnelMaterial.js
+++ b/js/helper-classes/RDGE/Materials/SquareTunnelMaterial.js
@@ -71,7 +71,7 @@ function SquareTunnelMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("squareTunnelMaterial");
+		this._materialNode = createMaterialNode("squareTunnelMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/Materials/StarMaterial.js b/js/helper-classes/RDGE/Materials/StarMaterial.js
index a5f188a1..ea8e4edb 100644
--- a/js/helper-classes/RDGE/Materials/StarMaterial.js
+++ b/js/helper-classes/RDGE/Materials/StarMaterial.js
@@ -71,7 +71,7 @@ function StarMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("starMaterial");
+		this._materialNode = createMaterialNode("starMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/Materials/TaperMaterial.js b/js/helper-classes/RDGE/Materials/TaperMaterial.js
index e8cc7a49..eea3f699 100644
--- a/js/helper-classes/RDGE/Materials/TaperMaterial.js
+++ b/js/helper-classes/RDGE/Materials/TaperMaterial.js
@@ -42,7 +42,7 @@ function TaperMaterial()
 	// duplcate method requirde
 	this.dup = function()	{  return new TaperMaterial();	} 
 
-	this.init = function()
+	this.init = function( world )
 	{
 		// set up the shader
 		this._shader = new jshader();
@@ -53,7 +53,7 @@ function TaperMaterial()
 		this._shader.colorMe.color.set( this.getColor() );
 
 		// set up the material node
-		this._materialNode = createMaterialNode("taperMaterial");
+		this._materialNode = createMaterialNode("taperMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		// initialize the taper properties
diff --git a/js/helper-classes/RDGE/Materials/TunnelMaterial.js b/js/helper-classes/RDGE/Materials/TunnelMaterial.js
index 853a6a8d..ab69fec0 100644
--- a/js/helper-classes/RDGE/Materials/TunnelMaterial.js
+++ b/js/helper-classes/RDGE/Materials/TunnelMaterial.js
@@ -71,7 +71,7 @@ function TunnelMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("tunnelMaterial");
+		this._materialNode = createMaterialNode("tunnelMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/Materials/TwistMaterial.js b/js/helper-classes/RDGE/Materials/TwistMaterial.js
index b113965b..a52440e9 100644
--- a/js/helper-classes/RDGE/Materials/TwistMaterial.js
+++ b/js/helper-classes/RDGE/Materials/TwistMaterial.js
@@ -71,7 +71,7 @@ function TwistMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("twistMaterial");
+		this._materialNode = createMaterialNode("twistMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/Materials/TwistVertMaterial.js b/js/helper-classes/RDGE/Materials/TwistVertMaterial.js
index 853e895c..dd49555c 100644
--- a/js/helper-classes/RDGE/Materials/TwistVertMaterial.js
+++ b/js/helper-classes/RDGE/Materials/TwistVertMaterial.js
@@ -57,7 +57,7 @@ function TwistVertMaterial()
 		this._shader.twistMe.color.set( this.getColor() );
 
 		// set up the material node
-		this._materialNode = createMaterialNode("twistVertMaterial");
+		this._materialNode = createMaterialNode("twistVertMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		// initialize the twist vert properties
diff --git a/js/helper-classes/RDGE/Materials/UberMaterial.js b/js/helper-classes/RDGE/Materials/UberMaterial.js
index c7855c95..825f88ca 100755
--- a/js/helper-classes/RDGE/Materials/UberMaterial.js
+++ b/js/helper-classes/RDGE/Materials/UberMaterial.js
@@ -424,7 +424,7 @@ function UberMaterial()
 		this._shader = this.buildUberShader( this._ubershaderCaps );
 
 		// set up the material node
-		this._materialNode = createMaterialNode("uberMaterial");
+		this._materialNode = createMaterialNode("uberMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 	};
 
diff --git a/js/helper-classes/RDGE/Materials/WaterMaterial.js b/js/helper-classes/RDGE/Materials/WaterMaterial.js
index 101a8c0c..9ece3b45 100644
--- a/js/helper-classes/RDGE/Materials/WaterMaterial.js
+++ b/js/helper-classes/RDGE/Materials/WaterMaterial.js
@@ -71,7 +71,7 @@ function WaterMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("waterMaterial");
+		this._materialNode = createMaterialNode("waterMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/Materials/ZInvertMaterial.js b/js/helper-classes/RDGE/Materials/ZInvertMaterial.js
index 2ac8920f..c25290e3 100644
--- a/js/helper-classes/RDGE/Materials/ZInvertMaterial.js
+++ b/js/helper-classes/RDGE/Materials/ZInvertMaterial.js
@@ -71,7 +71,7 @@ function ZInvertMaterial()
 		this._shader.init();
 
 		// set up the material node
-		this._materialNode = createMaterialNode("zInvertMaterial");
+		this._materialNode = createMaterialNode("zInvertMaterial_" + world.generateUniqueNodeID());
 		this._materialNode.setShader(this._shader);
 
 		this._time = 0;
diff --git a/js/helper-classes/RDGE/runtime/GLRuntime.js b/js/helper-classes/RDGE/runtime/GLRuntime.js
index 33186174..d86506ad 100644
--- a/js/helper-classes/RDGE/runtime/GLRuntime.js
+++ b/js/helper-classes/RDGE/runtime/GLRuntime.js
@@ -35,6 +35,11 @@ function GLRuntime( canvas, importStr )
 
 	this._aspect = canvas.width/canvas.height;
 
+	this._geomRoot;
+
+	// all "live" materials
+	this._materials = [];
+
     ///////////////////////////////////////////////////////////////////////
 	// accessors
     ///////////////////////////////////////////////////////////////////////
@@ -58,6 +63,9 @@ function GLRuntime( canvas, importStr )
 			rdgeStr = rdgeStr.substr( 0, endIndex );
 
 			this.myScene.importJSON( rdgeStr );
+			this.importObjects( importStr );
+			this.linkMaterials( this._geomRoot );
+			this.initMaterials();
 		}
 	}
 
@@ -82,42 +90,13 @@ function GLRuntime( canvas, importStr )
         
 		// create an empty scene graph
 		this.myScene = new SceneGraph();
-		
-		/*
-		// create some lights
-		// light 1
-		this.light = createLightNode("myLight");
-		this.light.setPosition([0,0,1.2]);
-		this.light.setDiffuseColor([0.75,0.9,1.0,1.0]);
-        
-		// light 2
-		this.light2 = createLightNode("myLight2");
-		this.light2.setPosition([-0.5,0,1.2]);
-		this.light2.setDiffuseColor([1.0,0.9,0.75,1.0]);
-        
-		// create a light transform
-		var lightTr = createTransformNode("lightTr");
-        
-		// create and attach a material - materials hold the light data
-		lightTr.attachMaterial(createMaterialNode("lights"));
-        
-		// enable light channels 1, 2 - channel 0 is used by the default shader
-		lightTr.materialNode.enableLightChannel(1, this.light);
-		lightTr.materialNode.enableLightChannel(2, this.light2);
-     
-		// all added objects are parented to the light node
-		this._rootNode = lightTr;
-        
-		// add the light node to the scene
-		this.myScene.addNode(lightTr);
-		*/
 
 		// load the scene graph data
 		this.loadScene();
         
 		// Add the scene to the engine - necessary if you want the engine to draw for you
-		//var name = "myScene" + this._canvas.getAttribute( "data-RDGE-id" ); 
-		//g_Engine.AddScene(name, this.myScene);
+		var name = "myScene" + this._canvas.getAttribute( "data-RDGE-id" ); 
+		g_Engine.AddScene(name, this.myScene);
 
 		this._initialized = true;
 	}
@@ -139,11 +118,23 @@ function GLRuntime( canvas, importStr )
 			//this.light.setPosition([1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), 1.2*Math.cos(this.elapsed*2.0)]);
 			//this.light2.setPosition([-1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), -1.2*Math.cos(this.elapsed)]);
 
+			this.updateMaterials();
+
 			// now update all the nodes in the scene
 			this.myScene.update(dt);
 		}
     }
 
+	this.updateMaterials = function()
+	{
+		var nMats = this._materials.length;
+		for (var i=0;  i<nMats;  i++)
+		{
+			var mat = this._materials[i];
+			mat.update();
+		}
+	}
+
     // defining the draw function to control how the scene is rendered      
 	this.draw = function()
     {
@@ -171,12 +162,139 @@ function GLRuntime( canvas, importStr )
 		}
     }
 
+	this.importObjects = function( importStr,  parent )
+	{
+		var index = importStr.indexOf( "OBJECT\n", 0 );
+		while (index >= 0)
+		{
+			// update the string to the current object
+			importStr = importStr.substr( index+7 );
+
+			// read the next object
+			var obj = this.importObject( importStr, parent );
+
+			// determine if we have children
+			var endIndex = importStr.indexOf( "ENDOBJECT\n" ),
+				childIndex = importStr.indexOf( "OBJECT\n" );
+			if (endIndex < 0)  throw new Error( "ill-formed object data" );
+			if ((childIndex >= 0) && (childIndex < endIndex))
+			{
+				importStr = importStr.substr( childIndex + 7 );
+				importStr = this.importObjects( importStr, obj );
+				endIndex = importStr.indexOf( "ENDOBJECT\n" )
+			}
+
+			// remove the string for the object(s) just created
+			importStr = importStr.substr( endIndex );
+
+			// get the location of the next object
+			index = importStr.indexOf( "OBJECT\n", endIndex );
+		}
+
+		return importStr;
+	}
+
+	this.importObject = function( objStr,  parent )
+	{
+		var type = Number( getPropertyFromString( "type: ", objStr ) );
+
+		var obj;
+		switch (type)
+		{
+			case 1:
+				obj = new RuntimeRectangle();
+				obj.import( objStr, parent );
+				break;
+
+			case 2:		// circle
+				obj = new RuntimeOval();
+				obj.import( objStr, parent );
+				break;
+
+			case 3:		// line
+				obj = new RuntimeLine();
+				obj.import( objStr, parent );
+				break;
+
+			default:
+				throw new Error( "Attempting to load unrecognized object type: " + type );
+				break;
+		}
+
+		if (obj)
+			this.addObject( obj );
+
+		return obj;
+	}
+
+	this.addObject = function( obj, parent )
+	{
+		if (!obj)  return;
+
+		if (parent == null)
+			this._geomRoot = obj;
+		else
+			parent.addChild( obj );
+	}
+
+	this.linkMaterials = function( obj )
+	{
+		if (!obj)  return;
+
+		// get the array of materials from the object
+		var matArray = obj._materials;
+		var nMats = matArray.length;
+		for (var i=0;  i<nMats;  i++)
+		{
+			var mat = matArray[i];
+			var nodeName = mat._materialNodeName;
+			var matNode = this.findMaterialNode( nodeName, this.myScene.scene );
+			if (matNode)
+			{
+				mat._materialNode = matNode;
+				mat._shader = matNode.shaderProgram;
+				this._materials.push( mat );
+			}
+		}
+	}
+
+	this.initMaterials = function()
+	{
+		var nMats = this._materials.length;
+		for (var i=0;  i<nMats;  i++)
+		{
+			var mat = this._materials[i];
+			mat.init();
+		}
+	}
+
+	this.findMaterialNode = function( nodeName,  node )
+	{
+		if (node.transformNode)
+			node = node.transformNode;
+
+		if (node.materialNode)
+		{
+			if (nodeName === node.materialNode.name)  return node.materialNode;
+		}
+
+		if (node.children)
+		{
+			var nKids = node.children.length;
+			for (var i=0;  i<nKids;  i++)
+			{
+				var child = node.children[i];
+				var rtnNode = this.findMaterialNode( nodeName, child );
+				if (rtnNode)  return rtnNode;
+			}
+		}
+	}
+
 	// start RDGE
 	var id = canvas.getAttribute( "data-RDGE-id" ); 
 	canvas.rdgeid = id;
 	g_Engine.registerCanvas(canvas, this);
 	RDGEStart( canvas );
-
 }
 
 
diff --git a/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js b/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js
new file mode 100644
index 00000000..da941b56
--- /dev/null
+++ b/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js
@@ -0,0 +1,274 @@
+
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+///////////////////////////////////////////////////////////////////////
+// Class RuntimeGeomObj
+//      Super class for all geometry classes
+///////////////////////////////////////////////////////////////////////
+function RuntimeGeomObj()
+{
+    ///////////////////////////////////////////////////////////////////////
+    // Constants
+    ///////////////////////////////////////////////////////////////////////
+	this.GEOM_TYPE_RECTANGLE		=  1;
+	this.GEOM_TYPE_CIRCLE			=  2;
+	this.GEOM_TYPE_LINE             =  3;
+	this.GEOM_TYPE_PATH			    =  4;
+	this.GEOM_TYPE_CUBIC_BEZIER     =  5;
+	this.GEOM_TYPE_UNDEFINED		= -1;
+	
+    ///////////////////////////////////////////////////////////////////////
+    // Instance variables
+    ///////////////////////////////////////////////////////////////////////
+    this._children;
+
+    // stroke and fill colors
+    this._strokeColor	= [0,0,0,0];
+    this._fillColor		= [0,0,0,0];
+
+	// array of materials
+	this._materials = [];
+
+    ///////////////////////////////////////////////////////////////////////
+    // Property accessors
+    ///////////////////////////////////////////////////////////////////////
+
+	this.geomType	= function()				 {  return this.GEOM_TYPE_UNDEFINED;	}
+
+    ///////////////////////////////////////////////////////////////////////
+    // Methods
+    ///////////////////////////////////////////////////////////////////////
+    this.makeStrokeMaterial = function()
+    {
+    }
+
+    this.makeFillMaterial = function()
+    {
+    }
+
+
+    this.render = function()
+    {
+    }
+    
+	this.addChild = function( child )
+	{
+		if (!this._children)  this._children = [];
+		this._children.push( child );
+	}
+
+    this.import = function()
+    {
+	}
+
+	this.importMaterials = function(importStr)
+	{
+		var nMaterials = Number( getPropertyFromString( "nMaterials: ", importStr )  );
+		for (var i=0;  i<nMaterials;  i++)
+		{
+			var matNodeName = getPropertyFromString( "materialNodeName: ",	importStr );
+
+			var mat;
+			var materialType = getPropertyFromString( "material: ",	importStr );
+			switch (materialType)
+			{
+				case "flat":	mat = new RuntimeFlatMaterial();		break;
+				case "pulse":	mat = new RuntimePulseMaterial();		break;
+
+				default:
+					console.log( "material type: " + materialType + " is not supported" );
+					break;
+			}
+
+			if (mat)
+			{
+				mat.import( importStr );
+				mat._materialNodeName = matNodeName;
+				this._materials.push( mat );
+			}
+
+			var endIndex = importStr.indexOf( "endMaterial\n" );
+			if (endIndex < 0)  break;
+			importStr = importStr.substr( endIndex );
+		}
+	}
+}
+
+function getPropertyFromString( prop, str )
+{
+	var index = str.indexOf( prop );
+	if (index < 0)  throw new Error( "property " + prop + " not found in string: " + str);
+
+	var rtnStr = str.substr( index+prop.length );
+	index = rtnStr.indexOf( "\n" );
+	if (index >= 0)
+		rtnStr = rtnStr.substr(0, index);
+
+	return rtnStr;
+}
+
+///////////////////////////////////////////////////////////////////////
+// Class RuntimeRectangle
+///////////////////////////////////////////////////////////////////////
+function RuntimeRectangle()
+{
+	// inherit the members of RuntimeGeomObj
+	this.inheritedFrom = RuntimeGeomObj;
+	this.inheritedFrom();
+
+	this.import = function( importStr )
+	{
+		this._xOffset			= Number( getPropertyFromString( "xoff: ",			importStr )  );
+		this._yOffset			= Number( getPropertyFromString( "yoff: ",			importStr )  );
+		this._width				= Number( getPropertyFromString( "width: ",		importStr )  );
+		this._height			= Number( getPropertyFromString( "height: ",		importStr )  );
+		this._strokeWidth		= Number( getPropertyFromString( "strokeWidth: ",	importStr )  );
+		this._innerRadius		= Number( getPropertyFromString( "innerRadius: ",	importStr )  );
+		this._strokeStyle		= Number( getPropertyFromString( "strokeStyle: ",	importStr )  );
+		var strokeMaterialName	= getPropertyFromString( "strokeMat: ",	importStr );
+		var fillMaterialName	= getPropertyFromString( "fillMat: ",		importStr );
+		this._strokeStyle		=  getPropertyFromString( "strokeStyle: ",	importStr );
+		this._fillColor			=  eval( "[" + getPropertyFromString( "fillColor: ",	importStr ) + "]" );
+		this._strokeColor		=  eval( "[" + getPropertyFromString( "strokeColor: ",	importStr ) + "]" );
+		this._tlRadius			=  Number( getPropertyFromString( "tlRadius: ",	importStr )  );
+		this._trRadius			=  Number( getPropertyFromString( "trRadius: ",	importStr )  );
+		this._blRadius			=  Number( getPropertyFromString( "blRadius: ",	importStr )  );
+		this._brRadius			=  Number( getPropertyFromString( "brRadius: ",	importStr )  );
+
+		this.importMaterials( importStr );
+	}
+
+	this.renderPath = function( inset, ctx )
+	{
+		// various declarations
+		var pt,  rad,  ctr,  startPt, bPts;
+		var width  = Math.round(this.getWidth()),
+			height = Math.round(this.getHeight());
+
+		pt = [inset, inset];	// top left corner
+
+		var tlRad = this._tlRadius; //top-left radius
+		var trRad = this._trRadius;
+		var blRad = this._blRadius;
+		var brRad = this._brRadius;
+
+		if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0))
+		{
+			ctx.rect(pt[0], pt[1], 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],  pt[1] );
+
+			// get the bottom left point
+			pt = [inset, height - inset];
+			rad = blRad - inset;
+			if (rad < 0)  rad = 0;
+			pt[1] -= rad;
+			ctx.lineTo( pt[0],  pt[1] );
+
+			// get the bottom left curve
+			if (MathUtils.fpSign(rad) > 0)
+				ctx.quadraticCurveTo( inset, height-inset,  inset+rad, height-inset );
+
+			// do the bottom of the rectangle
+			pt = [width - inset,  height - inset];
+			rad = brRad - inset;
+			if (rad < 0)  rad = 0;
+			pt[0] -= rad;
+			ctx.lineTo( pt[0], pt[1] );
+
+			// get the bottom right arc
+			if (MathUtils.fpSign(rad) > 0)
+				ctx.quadraticCurveTo( width-inset, height-inset,  width-inset, height-inset-rad );
+
+			// get the right of the rectangle
+			pt = [width - inset,  inset];
+			rad = trRad - inset;
+			if (rad < 0)  rad = 0;
+			pt[1] += rad;
+			ctx.lineTo( pt[0], pt[1] );
+
+			// do the top right corner
+			if (MathUtils.fpSign(rad) > 0)
+				ctx.quadraticCurveTo( width-inset, inset,  width-inset-rad, inset );
+
+			// do the top of the rectangle
+			pt = [inset, inset]
+			rad = tlRad - inset;
+			if (rad < 0)  rad = 0;
+			pt[0] += rad;
+			ctx.lineTo( pt[0], pt[1] );
+
+			// do the top left corner
+			if (MathUtils.fpSign(rad) > 0)
+				ctx.quadraticCurveTo( inset, inset, inset, inset+rad );
+			else
+				ctx.lineTo( inset, 2*inset );
+		}
+	}
+
+    this.render = 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();
+		
+		// render the fill
+		ctx.beginPath();
+		if (this._fillColor)
+		{
+			var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";  
+			ctx.fillStyle = c;
+
+			ctx.lineWidth	= lw;
+			var inset = Math.ceil( lw ) + 0.5;
+			this.renderPath( inset, ctx );
+			ctx.fill();
+			ctx.closePath();
+		}
+
+		// render the stroke
+		ctx.beginPath();
+		if (this._strokeColor)
+		{
+			var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";  
+			ctx.strokeStyle = c;
+
+			ctx.lineWidth	= lw;
+			var inset = Math.ceil( 0.5*lw ) + 0.5;
+			this.renderPath( inset, ctx );
+			ctx.stroke();
+			ctx.closePath();
+		}
+    }
+}
+
+///////////////////////////////////////////////////////////////////////
+// Class RuntimeOval
+///////////////////////////////////////////////////////////////////////
+function RuntimeOval()
+{
+	// inherit the members of RuntimeGeomObj
+	this.inheritedFrom = RuntimeGeomObj;
+	this.inheritedFrom();
+}
+
diff --git a/js/helper-classes/RDGE/runtime/RuntimeMaterial.js b/js/helper-classes/RDGE/runtime/RuntimeMaterial.js
new file mode 100644
index 00000000..2ba3006e
--- /dev/null
+++ b/js/helper-classes/RDGE/runtime/RuntimeMaterial.js
@@ -0,0 +1,140 @@
+/* <copyright>
+This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+</copyright> */
+
+///////////////////////////////////////////////////////////////////////
+// Class RuntimeMaterial
+//      Runtime representation of a material.
+///////////////////////////////////////////////////////////////////////
+function RuntimeMaterial( world )
+{
+    ///////////////////////////////////////////////////////////////////////
+    // Instance variables
+    ///////////////////////////////////////////////////////////////////////
+	this._name = "GLMaterial";
+	this._shaderName = "undefined";
+
+	// variables for animation speed
+	this._time = 0.0;
+	this._dTime = 0.01;
+
+	// RDGE variables
+	this._shader;
+	this._materialNode;
+
+    ///////////////////////////////////////////////////////////////////////
+    // Property Accessors
+    ///////////////////////////////////////////////////////////////////////
+
+	// a material can be animated or not. default is not.  
+	// Any material needing continuous rendering should override this method
+	this.isAnimated			= function()	{  return false;	}
+
+    ///////////////////////////////////////////////////////////////////////
+    // Methods
+    ///////////////////////////////////////////////////////////////////////
+	this.init = function()
+	{
+	}
+
+	this.update = function( time )
+	{
+	}
+}
+
+
+function RuntimeFlatMaterial()
+{
+	// inherit the members of RuntimeMaterial
+	this.inheritedFrom = RuntimeMaterial;
+	this.inheritedFrom();
+
+	this._name = "FlatMaterial";
+	this._shaderName = "flat";
+
+	// assign a default color
+	this._color = [1,0,0,1];
+
+    this.import = function( importStr )
+    {
+		var colorStr = getPropertyFromString( "color: ",	importStr );
+		if (colorStr)
+			this._color  = eval( "[" + colorStr + "]" );
+    };
+
+
+	this.init = function()
+	{
+		if (this._shader)
+		{
+			 this._shader.colorMe["color"].set( this._color );
+		}
+	}
+}
+
+function RuntimePulseMaterial()
+{
+	// inherit the members of RuntimeMaterial
+	this.inheritedFrom = RuntimeMaterial;
+	this.inheritedFrom();
+
+	this._name = "PulseMaterial";
+	this._shaderName = "pulse";
+
+	this._texMap = 'assets/images/cubelight.png';
+
+	this.isAnimated			= function()	{  return true;	}
+
+
+	this.import = function( importStr )
+	{
+	}
+
+	this.init = function()
+	{
+		var material = this._materialNode;
+		if (material)
+		{
+			var technique = material.shaderProgram.default;
+			var renderer = g_Engine.getContext().renderer;
+			if (renderer && technique)
+			{
+				if (this._shader && this._shader.default)
+				{
+					var res = [ renderer.vpWidth,  renderer.vpHeight ];
+					technique.u_resolution.set( res );
+
+					var wrap = 'REPEAT',  mips = true;
+					var tex = renderer.getTextureByName(this._texMap, wrap, mips );
+					if (tex)
+						technique.u_tex0.set( tex );
+
+					this._shader.default.u_time.set( [this._time] );
+				}
+			}
+		}
+	}
+
+	// several materials inherit from pulse.
+	// they may share this update method
+	this.update = function( time )
+	{
+		var material = this._materialNode;
+		if (material)
+		{
+			var technique = material.shaderProgram.default;
+			var renderer = g_Engine.getContext().renderer;
+			if (renderer && technique)
+			{
+				if (this._shader && this._shader.default)
+					this._shader.default.u_time.set( [this._time] );
+				this._time += this._dTime;
+				if (this._time > 200.0)  this._time = 0.0;
+			}
+		}
+	}
+}
+
+
diff --git a/js/preloader/Preloader.js b/js/preloader/Preloader.js
index 5b806909..63db0a93 100755
--- a/js/preloader/Preloader.js
+++ b/js/preloader/Preloader.js
@@ -67,6 +67,8 @@ exports.Preloader = Montage.create(Component, {
 
                 {"type":"js", "url":"js/helper-classes/RDGE/runtime/CanvasDataManager.js"},
                 {"type":"js", "url":"js/helper-classes/RDGE/runtime/GLRuntime.js"},
+                {"type":"js", "url":"js/helper-classes/RDGE/runtime/RuntimeGeomObj.js"},
+                {"type":"js", "url":"js/helper-classes/RDGE/runtime/RuntimeMaterial.js"},
 
                 {"type":"js", "url":"js/helper-classes/RDGE/Materials/FlatMaterial.js"},
                 {"type":"js", "url":"js/helper-classes/RDGE/Materials/TaperMaterial.js"},
-- 
cgit v1.2.3


From 14258d1cb3400680ba821d94251defe55714b728 Mon Sep 17 00:00:00 2001
From: Nivesh Rajbhandari
Date: Fri, 2 Mar 2012 14:27:44 -0800
Subject: We should show snap marker on mouse move even if user hasn't moused
 down yet.

Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
---
 js/tools/SelectionTool.js      | 10 +++++-----
 js/tools/modifier-tool-base.js | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js
index 6d8ff175..a2d8510e 100755
--- a/js/tools/SelectionTool.js
+++ b/js/tools/SelectionTool.js
@@ -123,14 +123,14 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, {
                     this.doDraw(event);
                 } else {
                     this._showFeedbackOnMouseMove(event);
-    //                if(this._canSnap)
-    //                {
-    //                    this.doSnap(event);
-    //                }
+                    if(this._canSnap)
+                    {
+                        this.doSnap(event);
+                    }
                 }
 
                 this.DrawHandles(this._delta);
-                if(this._canSnap && this._isDrawing)
+                if(this._canSnap)
                 {
                     this.application.ninja.stage.stageDeps.snapManager.drawLastHit();
                 }
diff --git a/js/tools/modifier-tool-base.js b/js/tools/modifier-tool-base.js
index 7892d015..7e950b03 100755
--- a/js/tools/modifier-tool-base.js
+++ b/js/tools/modifier-tool-base.js
@@ -828,14 +828,14 @@ exports.ModifierToolBase = Montage.create(DrawingTool, {
                 this.doDraw(event);
             } else {
                 this._showFeedbackOnMouseMove(event);
-//                if(this._canSnap)
-//                {
-//                    this.doSnap(event);
-//                }
+                if(this._canSnap)
+                {
+                    this.doSnap(event);
+                }
             }
 
             this.DrawHandles(this._delta);
-            if(this._canSnap && this._isDrawing)
+            if(this._canSnap)
             {
                 snapManager.drawLastHit();
             }
-- 
cgit v1.2.3


From cad4d6cb3f667f6174ec05cecead675b244285b9 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Mon, 5 Mar 2012 04:51:31 -0800
Subject: Added more materials/canvas2D drawing to runtime.

---
 js/helper-classes/RDGE/GLWorld.js                 |  5 +-
 js/helper-classes/RDGE/Materials/PulseMaterial.js |  3 +
 js/helper-classes/RDGE/Materials/WaterMaterial.js |  2 +-
 js/helper-classes/RDGE/runtime/GLRuntime.js       | 54 +++++++++++++++--
 js/helper-classes/RDGE/runtime/RuntimeGeomObj.js  | 27 +++++++--
 js/helper-classes/RDGE/runtime/RuntimeMaterial.js | 74 +++++++++++++++++++++++
 6 files changed, 153 insertions(+), 12 deletions(-)

diff --git a/js/helper-classes/RDGE/GLWorld.js b/js/helper-classes/RDGE/GLWorld.js
index d9e91404..3a779b92 100755
--- a/js/helper-classes/RDGE/GLWorld.js
+++ b/js/helper-classes/RDGE/GLWorld.js
@@ -840,7 +840,7 @@ GLWorld.prototype.export = function( exportForPublish )
 	if (!exportForPublish)  exportForPublish = false;
 	exportStr += "publish: " + exportForPublish + "\n";
 
-	if (exportForPublish)
+	if (exportForPublish && this._useWebGL)
 	{
 		exportStr += "scenedata: " + this.myScene.exportJSON() + "endscene\n";
 
@@ -930,6 +930,9 @@ GLWorld.prototype.import = function( importStr )
 
 		// import the objects
 		this.importObjects( importStr, this._rootNode );
+
+		// render using canvas 2D
+		this.render();
 	}
 }
 
diff --git a/js/helper-classes/RDGE/Materials/PulseMaterial.js b/js/helper-classes/RDGE/Materials/PulseMaterial.js
index 28f2a430..b0fbd998 100644
--- a/js/helper-classes/RDGE/Materials/PulseMaterial.js
+++ b/js/helper-classes/RDGE/Materials/PulseMaterial.js
@@ -185,6 +185,9 @@ function PulseMaterial()
 		// every material needs the base type and instance name
 		var exportStr = "material: " + this.getShaderName() + "\n";
 		exportStr += "name: " + this.getName() + "\n";
+
+		var texMapName = this._propValues[this._propNames[0]];
+		exportStr += "texture: " + texMapName;
 		
 		// every material needs to terminate like this
 		exportStr += "endMaterial\n";
diff --git a/js/helper-classes/RDGE/Materials/WaterMaterial.js b/js/helper-classes/RDGE/Materials/WaterMaterial.js
index 9ece3b45..49761c58 100644
--- a/js/helper-classes/RDGE/Materials/WaterMaterial.js
+++ b/js/helper-classes/RDGE/Materials/WaterMaterial.js
@@ -22,7 +22,7 @@ function WaterMaterial()
 	this._name = "WaterMaterial";
 	this._shaderName = "water";
 
-	this._texMap = 'assets/images/rocky-normal.jpg';
+	this._texMap = 'assets/images/rocky-normal.jpg\n';
 
 	this._time = 0.0;
 	this._dTime = 0.01;
diff --git a/js/helper-classes/RDGE/runtime/GLRuntime.js b/js/helper-classes/RDGE/runtime/GLRuntime.js
index d86506ad..e0fff4a8 100644
--- a/js/helper-classes/RDGE/runtime/GLRuntime.js
+++ b/js/helper-classes/RDGE/runtime/GLRuntime.js
@@ -16,6 +16,7 @@ function GLRuntime( canvas, importStr )
     // Instance variables
     ///////////////////////////////////////////////////////////////////////
 	this._canvas		= canvas;
+	this._context		= null;
 	this._importStr		= importStr;
 
 	this.renderer		= null;
@@ -27,6 +28,8 @@ function GLRuntime( canvas, importStr )
 	this._firstRender	= true;
 	this._initialized	= false;
 
+	this._useWebGL		= false;
+
 	// view parameters
 	this._fov = 45.0;
 	this._zNear = 0.1;
@@ -49,6 +52,14 @@ function GLRuntime( canvas, importStr )
 	this.getAspect			= function()		{  return this._aspect;			}
 	this.getViewDistance	= function()		{  return this._viewDist;		}
 
+	this.get2DContext		= function()		{  return this._context;		}
+
+	this.getViewportWidth	= function()		{  return this._canvas.width;	}
+	this.getViewportHeight	= function()		{  return this._canvas.height;	}
+
+    ///////////////////////////////////////////////////////////////////////
+	// accessors
+    ///////////////////////////////////////////////////////////////////////
 	this.loadScene = function()
 	{
 		// parse the data
@@ -56,6 +67,8 @@ function GLRuntime( canvas, importStr )
 		var index = importStr.indexOf( "scenedata: " );
 		if (index >= 0)
 		{
+			this._useWebGL = true;
+
 			var rdgeStr = importStr.substr( index+11 );
 			var endIndex = rdgeStr.indexOf( "endscene\n" );
 			if (endIndex < 0)  throw new Error( "ill-formed WebGL data" );
@@ -67,6 +80,12 @@ function GLRuntime( canvas, importStr )
 			this.linkMaterials( this._geomRoot );
 			this.initMaterials();
 		}
+		else
+		{
+			this._context = this._canvas.getContext( "2d" );
+			this.importObjects( importStr );
+			this.render();
+		}
 	}
 
 	this.init = function()
@@ -230,6 +249,7 @@ function GLRuntime( canvas, importStr )
 	this.addObject = function( obj, parent )
 	{
 		if (!obj)  return;
+		obj.setWorld( this );
 
 		if (parent == null)
 			this._geomRoot = obj;
@@ -290,11 +310,35 @@ function GLRuntime( canvas, importStr )
 		}
 	}
 
-	// start RDGE
-	var id = canvas.getAttribute( "data-RDGE-id" ); 
-	canvas.rdgeid = id;
-	g_Engine.registerCanvas(canvas, this);
-	RDGEStart( canvas );
+	this.render = function( obj )
+	{
+		if (!obj)  obj = this._geomRoot;
+		obj.render();
+
+		if (obj.children)
+		{
+			var nKids = obj.children.length;
+			for (var i=0;  i<nKids;  i++)
+			{
+				var child = obj.children[i];
+				if (child)
+					this.render( child );
+			}
+		}
+	}
+
+	// start RDGE or load Canvas 2D objects
+	if (this._useWebGL)
+	{
+		var id = canvas.getAttribute( "data-RDGE-id" ); 
+		canvas.rdgeid = id;
+		g_Engine.registerCanvas(canvas, this);
+		RDGEStart( canvas );
+	}
+	else
+	{
+		this.loadScene();
+	}
 }
 
 
diff --git a/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js b/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js
index da941b56..2539abc1 100644
--- a/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js
+++ b/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js
@@ -37,7 +37,10 @@ function RuntimeGeomObj()
     // Property accessors
     ///////////////////////////////////////////////////////////////////////
 
-	this.geomType	= function()				 {  return this.GEOM_TYPE_UNDEFINED;	}
+	this.geomType	= function()		{  return this.GEOM_TYPE_UNDEFINED;	}
+
+	this.setWorld	= function(w)		{  this._world = w;					}
+	this.getWorld	= function()		{  return this._world;				}
 
     ///////////////////////////////////////////////////////////////////////
     // Methods
@@ -76,8 +79,22 @@ function RuntimeGeomObj()
 			var materialType = getPropertyFromString( "material: ",	importStr );
 			switch (materialType)
 			{
-				case "flat":	mat = new RuntimeFlatMaterial();		break;
-				case "pulse":	mat = new RuntimePulseMaterial();		break;
+				case "flat":			mat = new RuntimeFlatMaterial();				break;
+
+				case "radialGradient":
+				case "linearGradient":  mat = new RuntimeLinearGradientMaterial();		break;
+
+				case "water":
+				case "tunnel":
+				case "reliefTunnel":
+				case "squareTunnel":
+				case "twist":
+				case "fly":
+				case "julia":
+				case "mandel":
+				case "star":
+				case "zinvert":
+				case "pulse":			mat = new RuntimePulseMaterial();				break;
 
 				default:
 					console.log( "material type: " + materialType + " is not supported" );
@@ -146,8 +163,8 @@ function RuntimeRectangle()
 	{
 		// various declarations
 		var pt,  rad,  ctr,  startPt, bPts;
-		var width  = Math.round(this.getWidth()),
-			height = Math.round(this.getHeight());
+		var width  = Math.round(this._width),
+			height = Math.round(this._height);
 
 		pt = [inset, inset];	// top left corner
 
diff --git a/js/helper-classes/RDGE/runtime/RuntimeMaterial.js b/js/helper-classes/RDGE/runtime/RuntimeMaterial.js
index 2ba3006e..5fe29f93 100644
--- a/js/helper-classes/RDGE/runtime/RuntimeMaterial.js
+++ b/js/helper-classes/RDGE/runtime/RuntimeMaterial.js
@@ -90,6 +90,7 @@ function RuntimePulseMaterial()
 
 	this.import = function( importStr )
 	{
+		this._texMap = getPropertyFromString( "texture: ",	importStr );
 	}
 
 	this.init = function()
@@ -137,4 +138,77 @@ function RuntimePulseMaterial()
 	}
 }
 
+function RuntimeRadialGradientMaterial()
+{
+	// inherit the members of RuntimeMaterial
+	this.inheritedFrom = RuntimeMaterial;
+	this.inheritedFrom();
+
+	// setup default values
+	this._color1 = [0.25,0,0,1];  this._colorStop1 = 0.0;
+	this._color2 = [0,0.25,0,1];  this._colorStop2 = 0.3;
+	this._color3 = [0,0.25,0,1];  this._colorStop3 = 0.6;
+	this._color4 = [0,0.25,0,1];  this._colorStop4 = 1.0;
+
+	this.init = function()
+	{
+		var material = this._materialNode;
+		if (material)
+		{
+			var technique = material.shaderProgram.default;
+			var renderer = g_Engine.getContext().renderer;
+			if (renderer && technique)
+			{
+				if (this._shader && this._shader.default)
+				{
+					this._shader.default.u_color1.set( this._color1 );
+					this._shader.default.u_color2.set( this._color2 );
+					this._shader.default.u_color3.set( this._color3 );
+					this._shader.default.u_color4.set( this._color4 );
+
+					this._shader.default.u_colorStop1.set( [this._colorStop1] );
+					this._shader.default.u_colorStop2.set( [this._colorStop2] );
+					this._shader.default.u_colorStop3.set( [this._colorStop3] );
+					this._shader.default.u_colorStop4.set( [this._colorStop4] );
+
+					if (this._angle)
+						this._shader.default.u_cos_sin_angle.set([Math.cos(this._angle), Math.sin(this._angle)]);
+				}
+			}
+		}
+	}
+
+	this.import = function( importStr )
+	{
+		var colorStr;
+		colorStr = getPropertyFromString( "color1: ",	importStr );
+		this._color1  = eval( "[" + colorStr + "]" );
+		colorStr = getPropertyFromString( "color2: ",	importStr );
+		this._color2  = eval( "[" + colorStr + "]" );
+		colorStr = getPropertyFromString( "color3: ",	importStr );
+		this._color3  = eval( "[" + colorStr + "]" );
+		colorStr = getPropertyFromString( "color4: ",	importStr );
+		this._color4  = eval( "[" + colorStr + "]" );
+
+		this._colorStop1 = Number( getPropertyFromString( "colorStop1: ",	importStr ) );
+		this._colorStop1 = Number( getPropertyFromString( "colorStop2: ",	importStr ) );
+		this._colorStop1 = Number( getPropertyFromString( "colorStop3: ",	importStr ) );
+		this._colorStop1 = Number( getPropertyFromString( "colorStop4: ",	importStr ) );
+
+		if (this._angle)
+			this._angle = getPropertyFromString( "angle: ",	importStr );
+	}
+
+}
+
+function RuntimeLinearGradientMaterial()
+{
+	// inherit the members of RuntimeMaterial
+	this.inheritedFrom = RuntimeRadialGradientMaterial;
+	this.inheritedFrom();
+
+	// the only difference between linear & r