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 d7d78d4a4e8cf82c56379d25efbe679b3b823abc Mon Sep 17 00:00:00 2001
From: Pushkar Joshi
Date: Thu, 1 Mar 2012 11:22:46 -0800
Subject: show feedback on mouseover on a part of the path where a new anchor
 will be added if clicked

---
 images/cursors/penAdd.png           | Bin 0 -> 3043 bytes
 js/helper-classes/RDGE/GLSubpath.js | 147 ++++++++++++++++++++++++++++++------
 js/tools/PenTool.js                 |  12 ++-
 3 files changed, 135 insertions(+), 24 deletions(-)
 create mode 100644 images/cursors/penAdd.png

diff --git a/images/cursors/penAdd.png b/images/cursors/penAdd.png
new file mode 100644
index 00000000..c306cc85
Binary files /dev/null and b/images/cursors/penAdd.png differ
diff --git a/js/helper-classes/RDGE/GLSubpath.js b/js/helper-classes/RDGE/GLSubpath.js
index f3d8ad36..2fb91d33 100755
--- a/js/helper-classes/RDGE/GLSubpath.js
+++ b/js/helper-classes/RDGE/GLSubpath.js
@@ -505,7 +505,6 @@ GLSubpath.prototype._isWithinBoundingBox = function(point, ctrlPts, radius) {
 GLSubpath.prototype.pickAnchor = function (pickX, pickY, pickZ, radius) {
     var numAnchors = this._Anchors.length;
     var selAnchorIndex = -1;
-    var retCode = this.SEL_NONE;
     var radSq = radius * radius;
     var minDistance = Infinity;
     //check if the clicked location is close to the currently selected anchor position
@@ -515,9 +514,23 @@ GLSubpath.prototype.pickAnchor = function (pickX, pickY, pickZ, radius) {
         if (distSq < minDistance && distSq < radSq) {
             selAnchorIndex = this._selectedAnchorIndex;
             minDistance = distSq;
-            retCode = retCode | this.SEL_ANCHOR;
+        } else {
+            //check the prev and next of the selected anchor if the above did not register a hit
+            distSq = this._Anchors[this._selectedAnchorIndex].getPrevDistanceSq(pickX, pickY, pickZ);
+            if (distSq < minDistance && distSq < radSq){
+                selAnchorIndex = this._selectedAnchorIndex;
+                minDistance = distSq;
+            } else {
+                //check the next for this anchor point
+                distSq = this._Anchors[this._selectedAnchorIndex].getNextDistanceSq(pickX, pickY, pickZ);
+                if (distSq<minDistance && distSq<radSq){
+                    selAnchorIndex = this._selectedAnchorIndex;
+                    minDistance = distSq;
+                }
+            }
         }
     }
+    
     //now check if the click location is close to any anchor position
     if (selAnchorIndex===-1) {
         for (var i = 0; i < numAnchors; i++) {
@@ -532,12 +545,97 @@ GLSubpath.prototype.pickAnchor = function (pickX, pickY, pickZ, radius) {
     return selAnchorIndex;
 }
 
+GLSubpath.prototype.isWithinBBox =function(x,y,z){
+    if (this._BBoxMin[0]>x || this._BBoxMin[1]>y || this._BBoxMin[2]>z){
+        return false;
+    }
+    if (this._BBoxMax[0]<x || this._BBoxMax[1]<y || this._BBoxMax[2]<z){
+        return false;
+    }
+    return true;
+}
+
+//pick the path point closest to the specified location, return null if some anchor point (or its handles) is within radius, else return the parameter distance
+GLSubpath.prototype.pathHitTest = function (pickX, pickY, pickZ, radius) {
+    var numAnchors = this._Anchors.length;
+    var selAnchorIndex = -1;
+    var retParam = null;
+    var radSq = radius * radius;
+    var minDistance = Infinity;
+    
+    //check if the location is close to the currently selected anchor position
+    if (this._selectedAnchorIndex>=0 && this._selectedAnchorIndex<this._Anchors.length){
+        var distSq = this._Anchors[this._selectedAnchorIndex].getDistanceSq(pickX, pickY, pickZ);
+        //check the anchor point
+        if (distSq < minDistance && distSq < radSq) {
+            selAnchorIndex = this._selectedAnchorIndex;
+            minDistance = distSq;
+        }
+    }
+    //check the prev and next of the selected anchor if the above did not register a hit
+    if (this._selectedAnchorIndex>=0 && selAnchorIndex === -1) {
+        var distSq = this._Anchors[this._selectedAnchorIndex].getPrevDistanceSq(pickX, pickY, pickZ);
+        if (distSq < minDistance && distSq < radSq){
+            selAnchorIndex = this._selectedAnchorIndex;
+            minDistance = distSq;
+        } else {
+            //check the next for this anchor point
+            distSq = this._Anchors[this._selectedAnchorIndex].getNextDistanceSq(pickX, pickY, pickZ);
+            if (distSq<minDistance && distSq<radSq){
+                selAnchorIndex = this._selectedAnchorIndex;
+                minDistance = distSq;
+            }
+        }
+    }
+
+    //now check if the location is close to any anchor position
+    if (selAnchorIndex===-1) {
+        for (var i = 0; i < numAnchors; i++) {
+            var distSq = this._Anchors[i].getDistanceSq(pickX, pickY, pickZ);
+            //check the anchor point
+            if (distSq < minDistance && distSq < radSq) {
+                selAnchorIndex = i;
+                minDistance = distSq;
+            }
+        }//for every anchor i
+    }
+
+    //finally check if the location is close to the curve itself
+    if (selAnchorIndex===-1) {
+        //first check if the input location is within the bounding box
+        if (this.isWithinBBox(pickX,pickY,pickZ)){
+            var numSegments = this._isClosed ? numAnchors : numAnchors-1;
+            for (var i = 0; i < numSegments; i++) {
+                var nextIndex = (i+1)%numAnchors;
+                //check if the point is close to the bezier segment between anchor i and anchor nextIndex
+                var controlPoints = Vector.create([Vector.create([this._Anchors[i].getPosX(),this._Anchors[i].getPosY(),this._Anchors[i].getPosZ()]),
+                    Vector.create([this._Anchors[i].getNextX(),this._Anchors[i].getNextY(),this._Anchors[i].getNextZ()]),
+                    Vector.create([this._Anchors[nextIndex].getPrevX(),this._Anchors[nextIndex].getPrevY(),this._Anchors[nextIndex].getPrevZ()]),
+                    Vector.create([this._Anchors[nextIndex].getPosX(),this._Anchors[nextIndex].getPosY(),this._Anchors[nextIndex].getPosZ()])]);
+                var point = Vector.create([pickX, pickY, pickZ]);
+                if (this._isWithinBoundingBox(point, controlPoints, radius)) {
+                    //var intersectParam = this._checkIntersection(controlPoints, 0.0, 1.0, point, radius);
+                    var intersectParam = this._checkIntersectionWithSamples(this._anchorSampleIndex[i], this._anchorSampleIndex[nextIndex], point, radius);
+                    console.log("intersectParam:"+intersectParam);
+                    if (intersectParam){
+                        selAnchorIndex=i;
+                        retParam = intersectParam-i; //make the retParam go from 0 to 1
+                        break;
+                    }
+                }
+            }//for every anchor i
+        }//if is within bbox
+    }
+    return [selAnchorIndex,retParam];
+}     //GLSubpath.pathHitTest function
+
 
 //pick the path point closest to the specified location, return null if some anchor point (or its handles) is within radius, else return the parameter distance
 GLSubpath.prototype.pickPath = function (pickX, pickY, pickZ, radius) {
     var numAnchors = this._Anchors.length;
     var selAnchorIndex = -1;
     var retCode = this.SEL_NONE;
+    var retParam = null;
     var radSq = radius * radius;
     var minDistance = Infinity;
     //check if the clicked location is close to the currently selected anchor position
@@ -580,33 +678,36 @@ GLSubpath.prototype.pickPath = function (pickX, pickY, pickZ, radius) {
             }
         }
     }
-    var retParam = null;
+
     if (retCode !== this.SEL_NONE) {
         retCode = retCode | this.SEL_PATH; //ensure that path is also selected if anything else is selected
         this._selectedAnchorIndex = selAnchorIndex;
     } else {
         this._selectedAnchorIndex = -1;
-        var numSegments = this._isClosed ? numAnchors : numAnchors-1;
-        for (var i = 0; i < numSegments; i++) {
-            var nextIndex = (i+1)%numAnchors;
-            //check if the point is close to the bezier segment between anchor i and anchor nextIndex
-            var controlPoints = Vector.create([Vector.create([this._Anchors[i].getPosX(),this._Anchors[i].getPosY(),this._Anchors[i].getPosZ()]),
-                Vector.create([this._Anchors[i].getNextX(),this._Anchors[i].getNextY(),this._Anchors[i].getNextZ()]),
-                Vector.create([this._Anchors[nextIndex].getPrevX(),this._Anchors[nextIndex].getPrevY(),this._Anchors[nextIndex].getPrevZ()]),
-                Vector.create([this._Anchors[nextIndex].getPosX(),this._Anchors[nextIndex].getPosY(),this._Anchors[nextIndex].getPosZ()])]);
-            var point = Vector.create([pickX, pickY, pickZ]);
-            if (this._isWithinBoundingBox(point, controlPoints, radius)) {
-                //var intersectParam = this._checkIntersection(controlPoints, 0.0, 1.0, point, radius);
-                var intersectParam = this._checkIntersectionWithSamples(this._anchorSampleIndex[i], this._anchorSampleIndex[nextIndex], point, radius);
-                console.log("intersectParam:"+intersectParam);
-                if (intersectParam){
-                    retCode = retCode | this.SEL_PATH;
-                    retParam = intersectParam-i; //make the retParam go from 0 to 1
-                    this._selectedAnchorIndex = i;
-                    break;
+        //first check if the input location is within the bounding box
+        if (this.isWithinBBox(pickX,pickY,pickZ)){
+            var numSegments = this._isClosed ? numAnchors : numAnchors-1;
+            for (var i = 0; i < numSegments; i++) {
+                var nextIndex = (i+1)%numAnchors;
+                //check if the point is close to the bezier segment between anchor i and anchor nextIndex
+                var controlPoints = Vector.create([Vector.create([this._Anchors[i].getPosX(),this._Anchors[i].getPosY(),this._Anchors[i].getPosZ()]),
+                    Vector.create([this._Anchors[i].getNextX(),this._Anchors[i].getNextY(),this._Anchors[i].getNextZ()]),
+                    Vector.create([this._Anchors[nextIndex].getPrevX(),this._Anchors[nextIndex].getPrevY(),this._Anchors[nextIndex].getPrevZ()]),
+                    Vector.create([this._Anchors[nextIndex].getPosX(),this._Anchors[nextIndex].getPosY(),this._Anchors[nextIndex].getPosZ()])]);
+                var point = Vector.create([pickX, pickY, pickZ]);
+                if (this._isWithinBoundingBox(point, controlPoints, radius)) {
+                    //var intersectParam = this._checkIntersection(controlPoints, 0.0, 1.0, point, radius);
+                    var intersectParam = this._checkIntersectionWithSamples(this._anchorSampleIndex[i], this._anchorSampleIndex[nextIndex], point, radius);
+                    console.log("intersectParam:"+intersectParam);
+                    if (intersectParam){
+                        retCode = retCode | this.SEL_PATH;
+                        retParam = intersectParam-i; //make the retParam go from 0 to 1
+                        this._selectedAnchorIndex = i;
+                        break;
+                    }
                 }
-            }
-        }//for every anchor i
+            }//for every anchor i
+        }//is within bounding box
     }
     this._selectMode = retCode;
     return retParam;
diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js
index ddc8bc04..02367328 100755
--- a/js/tools/PenTool.js
+++ b/js/tools/PenTool.js
@@ -275,6 +275,9 @@ exports.PenTool = Montage.create(ShapeTool, {
             this.application.ninja.stage.clearDrawingCanvas();
             this._hoveredAnchorIndex = -1;
 
+            //set the cursor to be the default cursor
+            this.application.ninja.stage.drawingCanvas.style.cursor = "auto";
+
             if (this._isDrawing) {
                 var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY));
                 //go through the drawing toolbase to get the position of the mouse 
@@ -345,6 +348,14 @@ exports.PenTool = Montage.create(ShapeTool, {
                     var selAnchor = this._selectedSubpath.pickAnchor(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS);
                     if (selAnchor >=0) {
                         this._hoveredAnchorIndex = selAnchor;
+                    } else {
+                        //detect if the current mouse position will hit the path
+                        var pathHitTestData = this._selectedSubpath.pathHitTest(currMousePos[0], currMousePos[1], currMousePos[2], this._PICK_POINT_RADIUS);
+                        if (pathHitTestData[0]!==-1){
+                            //change the cursor
+                            var cursor = "url('images/cursors/penAdd.png') 10 10,default";
+                            this.application.ninja.stage.drawingCanvas.style.cursor = cursor;
+                        }
                     }
                 }
             } //else of if (this._isDrawing) {
@@ -353,7 +364,6 @@ exports.PenTool = Montage.create(ShapeTool, {
             if (this._selectedSubpath){
                 this.DrawSubpathAnchors(this._selectedSubpath);
             }
-
         }//value: function(event)
     },//HandleMouseMove
 
-- 
cgit v1.2.3


From 0b7f2f54738d2c1ea480b9bac7d3a750b1ef4df6 Mon Sep 17 00:00:00 2001
From: Pushkar Joshi
Date: Thu, 1 Mar 2012 15:29:17 -0800
Subject: first attempt at rendering the brush stroke as a collection of
 polylines (number of polylines equals the stroke width)

---
 js/helper-classes/RDGE/GLBrushStroke.js | 47 +++++++++++++++++++++++++++++++--
 js/tools/BrushTool.js                   |  4 +--
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js
index 5d773c2d..f5b0bce1 100755
--- a/js/helper-classes/RDGE/GLBrushStroke.js
+++ b/js/helper-classes/RDGE/GLBrushStroke.js
@@ -139,7 +139,8 @@ function GLBrushStroke() {
             var numPoints = this._Points.length;
 
             //**** add samples to the path if needed...linear interpolation for now
-            if (numPoints>1) {
+            //if (numPoints>1) {
+            if (0){
                 var threshold = this._WETNESS_FACTOR*this._strokeWidth;
                 var prevPt = this._Points[0];
                 var prevIndex = 0;
@@ -331,7 +332,7 @@ function GLBrushStroke() {
         }
         */
 
-
+        /*
         var R2 = this._strokeWidth;
         var R = R2*0.5;
         var hardness = 0; //for a pencil, this is always 1 //TODO get hardness parameter from user interface
@@ -359,6 +360,48 @@ function GLBrushStroke() {
             //ctx.globalCompositeOperation = 'source-in';
             //ctx.rect(x-R, y-R, R2, R2);
         }
+        */
+
+        //todo test how to render the path as a bunch of moveTo and lineTos (for calligraphic brush styles)
+        var numTraces = this._strokeWidth;
+        var halfNumTraces = numTraces/2;
+        var deltaDisplacement = [1,0];//[this._strokeWidth/numTraces, 0]; //a horizontal line brush
+        var startPos = [-this._strokeWidth/2,0];
+        for (var t=0;t<numTraces;t++){
+            var disp = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]];
+            //ctx.globalCompositeOperation = 'source-over';
+            var distFromMiddle = Math.abs(halfNumTraces-t);
+            var alphaVal = 1.0 - (distFromMiddle/halfNumTraces);
+            ctx.save();
+            ctx.lineWidth=this._strokeWidth/10;//4;
+            if (ctx.lineWidth<2)
+                ctx.lineWidth=2;
+            ctx.lineJoin="bevel";
+            ctx.lineCap="butt";
+            if (t<numTraces/2)
+                ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
+            else
+                ctx.strokeStyle="rgba("+255+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
+            ctx.translate(disp[0],disp[1]);
+            ctx.beginPath();
+            ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]);
+            for (var i=0;i<numPoints;i++){
+                ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]);
+            }
+            ctx.stroke();
+            ctx.restore();
+        }
+
+        /*
+        ctx.beginPath();
+        ctx.moveTo(this._Points[0][0]-bboxMin[0], this._Points[0][1]-bboxMin[1]);
+        for (var i=1;i<numPoints;i++){
+            ctx.lineTo(this._Points[i][0]-bboxMin[0], this._Points[i][1]-bboxMin[1]);
+        }
+        ctx.lineWidth=1.0;
+        ctx.strokeStyle = "black";
+        ctx.stroke();
+        */
 
         ctx.restore();
     } //render()
diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js
index fec89eb2..dc9e022e 100644
--- a/js/tools/BrushTool.js
+++ b/js/tools/BrushTool.js
@@ -72,7 +72,7 @@ exports.BrushTool = Montage.create(ShapeTool, {
                     this._selectedBrushStroke.addPoint(currMousePos);
 
                     //TODO get these values from the options
-                    this._selectedBrushStroke.setStrokeWidth(20);
+                    this._selectedBrushStroke.setStrokeWidth(10);
                 }
                 NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove();
             } //value: function (event) {
@@ -112,7 +112,7 @@ exports.BrushTool = Montage.create(ShapeTool, {
 
                 if (this._isDrawing) {
                     var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY);
-                    if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<100){
+                    if (this._selectedBrushStroke && this._selectedBrushStroke.getNumPoints()<1000){
                        this._selectedBrushStroke.addPoint(currMousePos);
                     }
                     this.ShowCurrentBrushStrokeOnStage();
-- 
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*thi