From 91a9e02bff0397ec9b1f55fdf61cef72eb0d8a0f Mon Sep 17 00:00:00 2001
From: hwc487
Date: Tue, 8 May 2012 15:53:35 -0700
Subject: Radial gradients to match CSS

---
 assets/shaders/radialGradient.vert.glsl | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'assets')

diff --git a/assets/shaders/radialGradient.vert.glsl b/assets/shaders/radialGradient.vert.glsl
index c3e1b50a..7994ac12 100644
--- a/assets/shaders/radialGradient.vert.glsl
+++ b/assets/shaders/radialGradient.vert.glsl
@@ -18,11 +18,13 @@ attribute vec2 texcoord;
 // matrix uniforms
 uniform mat4 u_mvMatrix;
 uniform mat4 u_projMatrix;
+uniform mat3 u_texTransform;
 
 varying		vec2	v_uv;
 
 void main(void)
 {
 	gl_Position = u_projMatrix * u_mvMatrix * vec4(vert,1.0) ;
-	v_uv = texcoord;
+	vec3 tmp = u_texTransform * vec3( texcoord, 1.0);
+	v_uv = tmp.xy;
 }
\ No newline at end of file
-- 
cgit v1.2.3


From 24417212f9fad7e992697e9370047fcf2f037913 Mon Sep 17 00:00:00 2001
From: hwc487
Date: Tue, 8 May 2012 16:14:28 -0700
Subject: WebGL linear gradients to match CSS

---
 assets/shaders/linearGradient.vert.glsl | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'assets')

diff --git a/assets/shaders/linearGradient.vert.glsl b/assets/shaders/linearGradient.vert.glsl
index aac9cbee..f0800812 100755
--- a/assets/shaders/linearGradient.vert.glsl
+++ b/assets/shaders/linearGradient.vert.glsl
@@ -37,6 +37,7 @@ uniform float	u_colorStop3;
 uniform float	u_colorStop4;									
 uniform vec2	u_cos_sin_angle;
 //uniform int		u_colorCount;	// currently using 4
+uniform mat3 u_texTransform;
 
 varying		vec2 v_uv;
 
@@ -44,5 +45,7 @@ varying		vec2 v_uv;
 void main(void)
 {
 	gl_Position = u_projMatrix * u_mvMatrix * vec4(vert,1.0) ;
-	v_uv = texcoord;
+	//v_uv = texcoord;
+	vec3 tmp = u_texTransform * vec3( texcoord, 1.0);
+	v_uv = tmp.xy;
 }
-- 
cgit v1.2.3


From f9f8fdc3000042ba5b4504d91870dc9a32ef25eb Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Wed, 16 May 2012 01:00:22 -0700
Subject: Squashed master into dom-architecture

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 assets/canvas-runtime.js | 3028 +++++++++++++++++++++++-----------------------
 1 file changed, 1532 insertions(+), 1496 deletions(-)

(limited to 'assets')

diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index 104c22cc..eeafaab6 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -17,7 +17,7 @@ NinjaCvsRt.initWebGl = function (rootElement, directory) {
 		}
 	}
 	//Creating data manager
-	cvsDataMngr = new NinjaCvsRt.CanvasDataManager();
+	cvsDataMngr = Object.create(NinjaCvsRt.CanvasDataManager, {});
 	//Loading data to canvas(es)
 	cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory);
 };
@@ -26,1062 +26,870 @@ NinjaCvsRt.initWebGl = function (rootElement, directory) {
 // Class ShapeRuntime
 //      Manages runtime shape display
 ///////////////////////////////////////////////////////////////////////
-NinjaCvsRt.CanvasDataManager = function () 
-{
-	this.loadGLData = function(root,  valueArray,  assetPath )
-	{
-		if (assetPath)
-			this._assetPath = assetPath.slice();
-
-		var value = valueArray;
-		var nWorlds = value.length;
-		for (var i=0;  i<nWorlds;  i++)
-		{
-			var importStr = value[i];
-
-			// there should be some version information in
-			// the form of 'v0.0;'  Pull that off.  (the trailing ';' should
-			// be in the first 24 characters).
-			var index = importStr.indexOf( ';' );
-			if ((importStr[0] === 'v') && (index < 24))
-			{
-				// JSON format.  pull off the version info
-				importStr = importStr.substr( index+1 );
-
-				var jObj = JSON.parse( importStr );
-				var id = jObj.id;
-				if (id)
-				{
-					var canvas = this.findCanvasWithID( id, root );
-					if (canvas)
-					{
-						new NinjaCvsRt.GLRuntime( canvas, jObj,  assetPath );
-					}
-				}
-			}
-		}
-	};
-
-	this.findCanvasWithID = function( id,  elt )
-	{
-		var cid = elt.getAttribute( "data-RDGE-id" );
-		if (cid == id)  return elt;
-
-		if (elt.children)
-		{
-			var nKids = elt.children.length;
-			for (var i=0;  i<nKids;  i++)
-			{
-				var child = elt.children[i];
-				var foundElt = this.findCanvasWithID( id, child );
-				if (foundElt)  return foundElt;
-			}
-		}
-	};
-};
+NinjaCvsRt.CanvasDataManager = Object.create(Object.prototype, {
+
+    loadGLData: {
+        value: function(root, valueArray, assetPath) {
+            if (assetPath)
+                this._assetPath = assetPath.slice();
+
+            var value = valueArray;
+            var nWorlds = value.length;
+            for (var i=0;  i<nWorlds;  i++)
+            {
+                var importStr = value[i];
+
+                // there should be some version information in
+                // the form of 'v0.0;'  Pull that off.  (the trailing ';' should
+                // be in the first 24 characters).
+                var index = importStr.indexOf( ';' );
+                if ((importStr[0] === 'v') && (index < 24))
+                {
+                    // JSON format.  pull off the version info
+                    importStr = importStr.substr( index+1 );
+
+                    var jObj = JSON.parse( importStr );
+                    var id = jObj.id;
+                    if (id)
+                    {
+                        var canvas = this.findCanvasWithID( id, root );
+                        if (canvas)
+                        {
+//                            new NinjaCvsRt.GLRuntime( canvas, jObj,  assetPath );
+                            var glRt = Object.create(NinjaCvsRt.GLRuntime, {});
+                            glRt.renderWorld(canvas, jObj, this._assetPath);
+                        }
+                    }
+                }
+            }
+	    }
+    },
+
+    findCanvasWithID: {
+        value: function(id, elt) {
+            var cid = elt.getAttribute( "data-RDGE-id" );
+            if (cid == id)  return elt;
+
+            if (elt.children)
+            {
+                var nKids = elt.children.length;
+                for (var i=0;  i<nKids;  i++)
+                {
+                    var child = elt.children[i];
+                    var foundElt = this.findCanvasWithID( id, child );
+                    if (foundElt)  return foundElt;
+                }
+            }
+        }
+    }
+});
 
 ///////////////////////////////////////////////////////////////////////
 // Class GLRuntime
 //      Manages runtime fora WebGL canvas
 ///////////////////////////////////////////////////////////////////////
-NinjaCvsRt.GLRuntime = function ( canvas, jObj,  assetPath )
-{
+NinjaCvsRt.GLRuntime = Object.create(Object.prototype, {
     ///////////////////////////////////////////////////////////////////////
     // Instance variables
     ///////////////////////////////////////////////////////////////////////
-	this._canvas		= canvas;
-	this._context		= null;
+    _canvas: { value: null, writable: true },
+    _context : { value: null, writable: true },
 	//this._importStr		= importStr;
-	this._jObj			= jObj;
+    _jObj: { value: null, writable: true },
 
-	this.renderer		= null;
-	this.myScene		= null;
-	this.light			= null;
-	this.light2			= null;
-	this._rootNode		= null;
+    _renderer: { value: null, writable: true },
+    myScene: { value: null, writable: true },
+    light: { value: null, writable: true },
+    light2: { value: null, writable: true },
+    _rootNode: { value: null, writable: true },
 
-	this._firstRender	= true;
-	this._initialized	= false;
+    _firstRender: { value: true, writable: true },
+    _renderCount: { value: -1, writable: true },
+    _initialized: { value: false, writable: true },
 
-	this._useWebGL		= false;
-	this._assetPath     = undefined;
+    _useWebGL: { value: false, writable: true },
+    _assetPath: { value: undefined, writable: true },
 
-	// view parameters
-	this._fov = 45.0;
-	this._zNear = 0.1;
-	this._zFar = 100.0;
-	this._viewDist = 5.0;
+    // view parameters
+    _fov: { value: 45.0, writable: true },
+    _zNear: { value: 0.1, writable: true },
+    _zFar: { value: 100.0, writable: true },
+    _viewDist: { value: 5.0, writable: true },
 
-	this.elapsed = 0;
+    elapsed: { value: 0, writable: true },
 
-	this._aspect = canvas.width/canvas.height;
+    _aspect: { value: 1, writable: true },
 
 	//this._geomRoot = null;
-	this._rootChildren = [];
+    _rootChildren: { value: [], writable: true },
 
 	// all "live" materials
-	this._materials = [];
+    _materials: { value: [], writable: true },
+
+    renderWorld: {
+        value: function(canvas, jObj, assetPath) {
+            this._materials = [];
+            this._rootChildren = [];
+            this._canvas = canvas;
+            this._aspect = this._canvas.width/this._canvas.height;
+
+            this._jObj= jObj;
+
+            // provide the mapping for the asset directory
+            if (assetPath) {
+                this._assetPath = assetPath.slice();
+                if (this._assetPath[this._assetPath.length - 1] != '/')
+                    this._assetPath += '/';
+            }
 
-    // provide the mapping for the asset directory
-    if (assetPath) {
-        this._assetPath = assetPath.slice();
-        if (this._assetPath[this._assetPath.length - 1] != '/')
-            this._assetPath += '/';
-    }
+            if(this._assetPath !== undefined) {
+                RDGE.globals.engine.setAssetPath(this._assetPath);
+            }
 
-	if(this._assetPath !== undefined) {
-		RDGE.globals.engine.setAssetPath(this._assetPath);
-	}
+            // start RDGE or load Canvas 2D objects
+            if (jObj.scenedata)  this._useWebGL = true;
+            if (this._useWebGL)
+            {
+                var id = this._canvas.getAttribute( "data-RDGE-id" );
+                this._canvas.rdgeid = id;
+                RDGE.globals.engine.registerCanvas(this._canvas, this);
+                RDGE.RDGEStart( this._canvas );
+            }
+            else
+            {
+                this.loadScene();
+            }
+        }
+    },
 
     ///////////////////////////////////////////////////////////////////////
 	// accessors
     ///////////////////////////////////////////////////////////////////////
-	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;		};
+    getZNear: { value: function() { return this._zNear; }},
+    getZFar: { value: function() { return this._zFar; }},
+    getFOV: { value: function() { return this._fov; }},
+    getAspect: { value: function() { return this._aspect; }},
+    getViewDistance: { value: function() { return this._viewDist; }},
+
+    get2DContext: { value: function() { return this._context; }},
+
+    getViewportWidth: { value: function() { return this._canvas.width; }},
+    getViewportHeight: { value: function() { return this._canvas.height; }},
+
+    loadScene: {
+        value: function() {
+            var jObj = this._jObj;
+            if (!jObj.children)	// || (jObj.children.length != 1))
+                throw new Error( "ill-formed JSON for runtime load: " + jObj );
+            var nChildren = jObj.children.length;
+
+            // parse the data
+            var child;
+            if (jObj.scenedata)
+            {
+                this._useWebGL = true;
+
+                var rdgeStr = jObj.scenedata;
+                this.myScene.importJSON( rdgeStr );
+                for (var i=0;  i<nChildren;  i++)
+                {
+                    child = jObj.children[i];
+                    this.importObjects( child );
+                }
+                //this.linkMaterials( this._geomRoot );
+                this.linkMaterials( this._rootChildren );
+                this.initMaterials();
+                this.linkLights();
+            }
+            else
+            {
+                this._context = this._canvas.getContext( "2d" );
+                for (var i=0;  i<nChildren;  i++)
+                {
+                    child = jObj.children[i];
+                    this.importObjects( child );
+                }
+                this.render();
+            }
+        }
+    },
 
-	this.get2DContext		= function()		{  return this._context;		};
+    init: {
+        value: function() {
+            var ctx1 = RDGE.globals.engine.ctxMan.handleToObject(this._canvas.rdgeCtxHandle),
+                ctx2 = RDGE.globals.engine.getContext();
+            if (ctx1 != ctx2)  console.log( "***** different contexts *****" );
+            this.renderer = ctx1.renderer;
 
-	this.getViewportWidth	= function()		{  return this._canvas.width;	};
-	this.getViewportHeight	= function()		{  return this._canvas.height;	};
+            // create a camera, set its perspective, and then point it at the origin
+            var cam = new RDGE.camera();
+            this._camera = cam;
+            cam.setPerspective(this.getFOV(), this.getAspect(), this.getZNear(), this.getZFar());
+            cam.setLookAt([0, 0, this.getViewDistance()], [0, 0, 0], RDGE.vec3.up());
 
-    ///////////////////////////////////////////////////////////////////////
-	// accessors
-    ///////////////////////////////////////////////////////////////////////
-	this.loadScene = function()
-	{
-		var jObj = this._jObj;
-		if (!jObj.children)	// || (jObj.children.length != 1))
-			throw new Error( "ill-formed JSON for runtime load: " + jObj );
-		var nChildren = jObj.children.length;
-
-		// parse the data
-		var child;
-		if (jObj.scenedata)
-		{
-			this._useWebGL = true;
-
-			var rdgeStr = jObj.scenedata;
-			this.myScene.importJSON( rdgeStr );
-			for (var i=0;  i<nChildren;  i++)
-			{
-				child = jObj.children[i];
-				this.importObjects( child );
-			}
-			//this.linkMaterials( this._geomRoot );
-			this.linkMaterials( this._rootChildren );
-			this.initMaterials();
-			this.linkLights();
-		}
-		else
-		{
-			this._context = this._canvas.getContext( "2d" );
-			for (var i=0;  i<nChildren;  i++)
-			{
-				child = jObj.children[i];
-				this.importObjects( child );
-			}
-			this.render();
-		}
-	};
-
-	this.init = function()
-    { 
-		var ctx1 = RDGE.globals.engine.ctxMan.handleToObject(this._canvas.rdgeCtxHandle),
-			ctx2 = RDGE.globals.engine.getContext();
-		if (ctx1 != ctx2)  console.log( "***** different contexts *****" );
-		this.renderer = ctx1.renderer;
-      
-		// create a camera, set its perspective, and then point it at the origin
-		var cam = new RDGE.camera();
-		this._camera = cam;
-		cam.setPerspective(this.getFOV(), this.getAspect(), this.getZNear(), this.getZFar());
-		cam.setLookAt([0, 0, this.getViewDistance()], [0, 0, 0], RDGE.vec3.up());
-        
-		// make this camera the active camera
-		this.renderer.cameraManager().setActiveCamera(cam);
-
-		// change clear color
-		this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]);
-        
-		// create an empty scene graph
-		this.myScene = new RDGE.SceneGraph();
-
-		// 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" ); 
-		RDGE.globals.engine.AddScene(name, this.myScene);
-
-		this._initialized = true;
-	};
-    
-	// main code for handling user interaction and updating the scene   
-	this.update = function(dt)
-    {
-		if (this._initialized)
-		{
-			if (!dt)  dt = 0.2;
-        
-			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
-			RDGE.rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]);
-        
-			// orbit the light nodes around the boxes
-			if (this.light )  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)]);
-			if (this.light2)  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()
-    {
-		if (this._initialized)
-		{
-			RDGE.globals.engine.setContext( this._canvas.rdgeid );
-
-			var ctx = RDGE.globals.engine.getContext();
-			var renderer = ctx.renderer;
-			if (renderer.unloadedTextureCount <= 0)
-			{
-				renderer.disableCulling();
-				renderer._clear();
-				this.myScene.render();
-
-				if (this._firstRender)
-				{
-					if (this._canvas.task)
-					{
-						this._firstRender = false;
-						//this._canvas.task.stop();
-					}
-				}
-			}
-		}
-    };
-
-	this.importObjects = function( jObj,  parent )
-	{
-		// read the next object
-		var gObj = this.importObject( jObj, parent );
-
-		// load the children
-		if (jObj.children)
-		{
-			var nKids = jObj.children.length;
-			for (var i=0;  i<nKids;  i++)
-			{
-				var child = jObj.children[i];
-				this.importObjects( child, gObj );
-			}
-		}
-	};
-
-	this.importObject = function( jObj,  parent )
-	{
-		var type = jObj.type;
-		var obj;
-		switch (type)
-		{
-			case 1:
-				obj = new NinjaCvsRt.RuntimeRectangle();
-				obj.importJSON( jObj );
-				break;
-
-			case 2:		// circle
-				obj = new NinjaCvsRt.RuntimeOval();
-				obj.importJSON( jObj );
-				break;
-
-			case 3:		// line
-				obj = new NinjaCvsRt.RuntimeLine();
-				obj.importJSON( jObj );
-				break;
-
-			default:
-				throw new Error( "Attempting to load unrecognized object type: " + type );
-				break;
-		}
+            // make this camera the active camera
+            this.renderer.cameraManager().setActiveCamera(cam);
 
-		if (obj)
-			this.addObject( obj, parent );
+            // change clear color
+            this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]);
 
-		return obj;
-	};
+            // create an empty scene graph
+            this.myScene = new RDGE.SceneGraph();
 
-	this.addObject = function( obj, parent )
-	{
-		if (!obj)  return;
-		obj.setWorld( this );
+            // load the scene graph data
+            this.loadScene();
 
-		if (parent == null)
-		{
-			//this._geomRoot = obj;
-			this._rootChildren.push( obj );
-		}
-		else
-			parent.addChild( obj );
-	};
-
-	this.linkLights = function()
-	{
-		var matNode = this.findMaterialNode( "lights", this.myScene.scene );
-		if (matNode)
-		{
-			this.light = matNode.lightChannel[1];
-			this.light2 = matNode.lightChannel[2];
-		}
-	};
-
-	this.linkMaterials = function( objArray )
-	{
-		if (!objArray)  return;
-
-		for (var i=0;  i<objArray.length;  i++)
-		{
-			var obj = objArray[i];
-
-			// get the array of materials from the object
-			var matArray = obj._materials;
-			var nMats = matArray.length;
-			for (var j=0;  j<nMats;  j++)
-			{
-				var mat = matArray[j];
-				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.linkMaterials( obj.children );
-		}
-	};
-
-	this.initMaterials = function()
-	{
-		var nMats = this._materials.length;
-		for (var i=0;  i<nMats;  i++)
-		{
-			var mat = this._materials[i];
-			mat.init( this );
-		}
-	};
+            // 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" );
+            RDGE.globals.engine.AddScene(name, this.myScene);
 
-	this.findMaterialNode = function( nodeName,  node )
-	{
-		if (node.transformNode)
-			node = node.transformNode;
+            this._initialized = true;
+        }
+    },
 
-		if (node.materialNode)
-		{
-			if (nodeName === node.materialNode.name)  return node.materialNode;
-		}
+	// main code for handling user interaction and updating the scene
+    update: {
+        value: function(dt) {
+            if (this._initialized)
+            {
+                if (!dt)  dt = 0.2;
 
-		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;
-			}
-		}
-	};
-
-	this.render = function( obj )
-	{
-		//if (!obj)  obj = this._geomRoot;
-		//obj.render();
-
-		var children;
-		if (obj)
-		{
-			obj.render();
-			children = obj.children;
-		}
-		else
-			children = this._rootChildren;
-
-		if (children)
-		{
-			var nKids = children.length;
-			for (var i=0;  i<nKids;  i++)
-			{
-				var child = children[i];
-				if (child)
-					this.render( child );
-			}
-		}
-	};
-
-	// start RDGE or load Canvas 2D objects
-	if (jObj.scenedata)  this._useWebGL = true;
-	if (this._useWebGL)
-	{
-		var id = canvas.getAttribute( "data-RDGE-id" ); 
-		canvas.rdgeid = id;
-		RDGE.globals.engine.registerCanvas(canvas, this);
-		RDGE.RDGEStart( canvas );
-	}
-	else
-	{
-		this.loadScene();
-	}
-};
+                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
+                RDGE.rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]);
+
+                // orbit the light nodes around the boxes
+                if (this.light )  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)]);
+                if (this.light2)  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);
+            }
+        }
+    },
+
+    updateMaterials: {
+        value: 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
+    draw: {
+        value: function() {
+            if (this._initialized)
+            {
+                RDGE.globals.engine.setContext( this._canvas.rdgeid );
+
+                var ctx = RDGE.globals.engine.getContext();
+                var renderer = ctx.renderer;
+                if (renderer.unloadedTextureCount <= 0)
+                {
+                    renderer.disableCulling();
+                    renderer._clear();
+                    this.myScene.render();
+
+                    if (this._firstRender)
+                    {
+                        if (this._canvas.task)
+                        {
+                            this._firstRender = false;
+                            //this._canvas.task.stop();
+                        }
+                    }
+                }
+            }
+        }
+    },
+
+    importObjects: {
+        value: function(jObj, parent) {
+            // read the next object
+            var gObj = this.importObject( jObj, parent );
+
+            // load the children
+            if (jObj.children)
+            {
+                var nKids = jObj.children.length;
+                for (var i=0;  i<nKids;  i++)
+                {
+                    var child = jObj.children[i];
+                    this.importObjects( child, gObj );
+                }
+            }
+        }
+    },
+
+    importObject: {
+        value: function(jObj, parent) {
+            var type = jObj.type;
+            var obj;
+            switch (type)
+            {
+                case 1:
+                    obj = Object.create(NinjaCvsRt.RuntimeRectangle, {_materials: { value:[], writable:true}});
+                    obj.importJSON( jObj );
+                    break;
+
+                case 2:		// circle
+                    obj = Object.create(NinjaCvsRt.RuntimeOval, {_materials: { value:[], writable:true}});
+                    obj.importJSON( jObj );
+                    break;
+
+                case 3:		// line
+                    obj = Object.create(NinjaCvsRt.RuntimeLine, {_materials: { value:[], writable:true}});
+                    obj.importJSON( jObj );
+                    break;
+
+                default:
+                    throw new Error( "Attempting to load unrecognized object type: " + type );
+                    break;
+            }
+
+            if (obj)
+                this.addObject( obj, parent );
+
+            return obj;
+        }
+    },
+
+    addObject: {
+        value: function(obj, parent) {
+            if (!obj)  return;
+            obj.setWorld( this );
+
+            if (parent == null)
+            {
+                //this._geomRoot = obj;
+                this._rootChildren.push( obj );
+            }
+            else
+                parent.addChild( obj );
+        }
+    },
+
+    linkLights: {
+        value: function() {
+            var matNode = this.findMaterialNode( "lights", this.myScene.scene );
+            if (matNode)
+            {
+                this.light = matNode.lightChannel[1];
+                this.light2 = matNode.lightChannel[2];
+            }
+        }
+    },
+
+    linkMaterials: {
+        value: function(objArray) {
+            if (!objArray)  return;
+
+            for (var i=0;  i<objArray.length;  i++)
+            {
+                var obj = objArray[i];
+
+                // get the array of materials from the object
+                var matArray = obj._materials;
+                var nMats = matArray.length;
+                for (var j=0;  j<nMats;  j++)
+                {
+                    var mat = matArray[j];
+                    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.linkMaterials( obj.children );
+            }
+        }
+    },
+
+    initMaterials: {
+        value: function() {
+            var nMats = this._materials.length;
+            for (var i=0;  i<nMats;  i++)
+            {
+                var mat = this._materials[i];
+                mat.init( this );
+            }
+        }
+    },
+
+    findMaterialNode: {
+        value: 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;
+                }
+            }
+        }
+    },
+
+    render: {
+        value: function(obj) {
+            //if (!obj)  obj = this._geomRoot;
+            //obj.render();
+
+            var children;
+            if (obj)
+            {
+                obj.render();
+                children = obj.children;
+            }
+            else
+                children = this._rootChildren;
+
+            if (children)
+            {
+                var nKids = children.length;
+                for (var i=0;  i<nKids;  i++)
+                {
+                    var child = children[i];
+                    if (child)
+                        this.render( child );
+                }
+            }
+        }
+    }
+});
 
 ///////////////////////////////////////////////////////////////////////
 // Class RuntimeGeomObj
 //      Super class for all geometry classes
 ///////////////////////////////////////////////////////////////////////
-NinjaCvsRt.RuntimeGeomObj = function ()
-{
+NinjaCvsRt.RuntimeGeomObj = Object.create(Object.prototype, {
     ///////////////////////////////////////////////////////////////////////
     // 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;
-	
+    GEOM_TYPE_RECTANGLE: { value: 1, writable: false },
+    GEOM_TYPE_CIRCLE: { value: 2, writable: false },
+    GEOM_TYPE_LINE: { value: 3, writable: false },
+    GEOM_TYPE_PATH: { value: 4, writable: false },
+    GEOM_TYPE_CUBIC_BEZIER: { value: 5, writable: false },
+    GEOM_TYPE_UNDEFINED: { value: -1, writable: false },
+
     ///////////////////////////////////////////////////////////////////////
     // Instance variables
     ///////////////////////////////////////////////////////////////////////
-    this._children;
+    _world: { value: null, writable: true },
+    _children: { value: null, writable: true },
 
     // stroke and fill colors
-    this._strokeColor	= [0,0,0,0];
-    this._fillColor		= [0,0,0,0];
+    _strokeColor: { value: [0,0,0,0], writable: true },
+    _fillColor: { value: [0,0,0,0], writable: true },
 
 	// array of materials
-	this._materials = [];
+    _materials : { value: null, writable: true },
 
     ///////////////////////////////////////////////////////////////////////
     // Property accessors
     ///////////////////////////////////////////////////////////////////////
+    geomType: {
+        value: function() {
+            return this.GEOM_TYPE_UNDEFINED;
+        }
+    },
 
-	this.geomType	= function()		{  return this.GEOM_TYPE_UNDEFINED;	};
+    setWorld: {
+        value: function(w) {
+            this._world = w;
+        }
+    },
 
-	this.setWorld	= function(w)		{  this._world = w;					};
-	this.getWorld	= function()		{  return this._world;				};
+    getWorld: {
+        value: function() {
+            return this._world;
+        }
+    },
 
     ///////////////////////////////////////////////////////////////////////
     // Methods
-    ///////////////////////////////////////////////////////////////////////    
-	this.addChild = function( child )
-	{
-		if (!this._children)  this._children = [];
-		this._children.push( child );
-	};
-
-    this.importJSON = function()
-    {
-	};
-
-	this.importMaterials = function(jObj)
-	{
-		if (!jObj || !jObj.materials)  return;
-
-		var nMaterials = jObj.nMaterials;
-		var matArray = jObj.materials;
-		for (var i=0;  i<nMaterials;  i++)
-		{
-			var mat;
-			var matObj = matArray[i].material;
-			var matNodeName = matArray[i].materialNodeName;
-			var shaderName = matObj.material;
-			switch (shaderName)
-			{
-				case "flat":			mat = new NinjaCvsRt.RuntimeFlatMaterial();				break;
-				case "radialGradient":  mat = new NinjaCvsRt.RuntimeRadialGradientMaterial();		break;
-				case "linearGradient":  mat = new NinjaCvsRt.RuntimeLinearGradientMaterial();		break;
-				case "bumpMetal":		mat = new NinjaCvsRt.RuntimeBumpMetalMaterial();			break;
-				case "uber":			mat = new NinjaCvsRt.RuntimeUberMaterial();				break;
-				case "plasma":			mat = new NinjaCvsRt.RuntimePlasmaMaterial();				break;
-
-				case "deform":
-				case "water":
-				case "paris":
-				case "raiders":
-				case "tunnel":
-				case "reliefTunnel":
-				case "squareTunnel":
-				case "twist":
-				case "fly":
-				case "julia":
-				case "mandel":
-				case "star":
-				case "zinvert":
-				case "keleidoscope":
-				case "radialBlur":
-				case "pulse":			mat = new NinjaCvsRt.RuntimePulseMaterial();				break;
-
-				default:
-					console.log( "material type: " + shaderName + " is not supported" );
-					break;
-			}
-
-			if (mat)
-			{
-				mat.importJSON( matObj );
-				mat._materialNodeName = matNodeName;
-				this._materials.push( mat );
-			}
-		}
-	};
-
-	////////////////////////////////////////////////////////////////////
-	// vector function
+    ///////////////////////////////////////////////////////////////////////
+    addChild: {
+        value: function(child) {
+            if (!this._children)  this._children = [];
 
-	this.vecAdd = function( dimen,  a, b )
-	{
-        var rtnVec;
-        if ((a.length < dimen) || (b.length < dimen))
-        {
-            throw new Error( "dimension error in vecAdd" );
+            this._children.push( child );
         }
+    },
 
-        rtnVec = [];
-        for (var i=0;  i<dimen;  i++)
-            rtnVec[i] = a[i] + b[i];
-
-        return rtnVec;
-    };
-
+    importJSON: {
+        value: function() {
+        }
+    },
+
+    importMaterials: {
+        value: function(jObj) {
+            if (!jObj || !jObj.materials)  return;
+
+            var nMaterials = jObj.nMaterials;
+            var matArray = jObj.materials;
+            for (var i=0;  i<nMaterials;  i++)
+            {
+                var mat;
+                var matObj = matArray[i].material;
+                var matNodeName = matArray[i].materialNodeName;
+                var shaderName = matObj.material;
+                switch (shaderName)
+                {
+                    case "flat":			mat = Object.create(NinjaCvsRt.RuntimeFlatMaterial, {});			break;
+                    case "radialGradient":  mat = Object.create(NinjaCvsRt.RuntimeRadialGradientMaterial, {});	break;
+                    case "linearGradient":  mat = Object.create(NinjaCvsRt.RuntimeLinearGradientMaterial, {});  break;
+                    case "bumpMetal":		mat = Object.create(NinjaCvsRt.RuntimeBumpMetalMaterial, {});		break;
+                    case "uber":			mat = Object.create(NinjaCvsRt.RuntimeUberMaterial, {});			break;
+                    case "plasma":			mat = Object.create(NinjaCvsRt.RuntimePlasmaMaterial, {});			break;
+
+                    case "deform":
+                    case "water":
+                    case "paris":
+                    case "raiders":
+                    case "tunnel":
+                    case "reliefTunnel":
+                    case "squareTunnel":
+                    case "twist":
+                    case "fly":
+                    case "julia":
+                    case "mandel":
+                    case "star":
+                    case "zinvert":
+                    case "keleidoscope":
+                    case "radialBlur":
+                    case "pulse":			mat = Object.create(NinjaCvsRt.RuntimePulseMaterial, {});			break;
+
+                    default:
+                        console.log( "material type: " + shaderName + " is not supported" );
+                        break;
+                }
 
-	this.vecSubtract =  function( dimen, a, b )
-	{
-        var rtnVec;
-        if ((a.length < dimen) || (b.length < dimen))
-        {
-            throw new Error( "dimension error in vecSubtract" );
+                if (mat)
+                {
+                    mat.importJSON( matObj );
+                    mat._materialNodeName = matNodeName;
+                    this._materials.push( mat );
+                }
+            }
         }
+    },
 
-        rtnVec = [];
-        for (var i=0;  i<dimen;  i++)
-            rtnVec[i] = a[i] - b[i];
 
-        return rtnVec;
-    };
+    ////////////////////////////////////////////////////////////////////
+    // TODO - vector functions should be moved to their own class
+    vecAdd: {
+        value: function(dimen, a, b) {
+            var rtnVec;
+            if ((a.length < dimen) || (b.length < dimen))
+            {
+                throw new Error( "dimension error in vecAdd" );
+            }
 
-    this.vecDot = function( dimen,  v0, v1 )
-	{
-        if ((v0.length < dimen) || (v1.length < dimen))
-        {
-            throw new Error( "dimension error in vecDot" );
+            rtnVec = [];
+            for (var i=0;  i<dimen;  i++)
+                rtnVec[i] = a[i] + b[i];
+
+            return rtnVec;
         }
+    },
+
+    vecSubtract: {
+        value: function(dimen, a, b) {
+            var rtnVec;
+            if ((a.length < dimen) || (b.length < dimen))
+            {
+                throw new Error( "dimension error in vecSubtract" );
+            }
 
-        var sum = 0.0;
-        for (var i=0;  i<dimen;  i++)
-            sum += v0[i] * v1[i];
-
-        return sum;
-    };
-
-	this.vecMag = function( dimen, vec )
-	{
-        var sum = 0.0;
-        for (var i=0;  i<dimen;  i++)
-            sum += vec[i]*vec[i];
-        return Math.sqrt( sum );
-    };
-
-	this.vecScale = function(dimen, vec, scale)
-	{
-        for (var i=0;  i<dimen;  i++)
-            vec[i] *= scale;
-
-        return vec;
-    };
-
-    this.vecNormalize = function(dimen, vec, len)
-	{
-        var rtnVec;
-		if (!len)  len = 1.0;
-
-        var sum = 0.0, i = 0;
-        for (i = 0;  i<dimen;  i++)
-            sum += vec[i]*vec[i];
-        sum = Math.sqrt( sum );
-
-        if (Math.abs(sum) >= 0.001)
-        {
-            var scale = len/sum;
             rtnVec = [];
-            for (i = 0;  i<dimen;  i++)
-                rtnVec[i] = vec[i]*scale;
+            for (var i=0;  i<dimen;  i++)
+                rtnVec[i] = a[i] - b[i];
+
+            return rtnVec;
         }
+    },
 
-        return rtnVec;
-    };
-
-	this.transformPoint = function( srcPt, mat )
-    {
-        var pt = srcPt.slice(0);
-        var	x = this.vecDot(3,  pt, [mat[0], mat[4], mat[ 8]] ) + mat[12],
-            y = this.vecDot(3,  pt, [mat[1], mat[5], mat[ 9]] ) + mat[13],
-            z = this.vecDot(3,  pt, [mat[2], mat[6], mat[10]] ) + mat[14];
-
-        return [x, y, z];
-    };
-	
-	this.MatrixIdentity = function(dimen)
-	{
-		var mat = [];
-
-		for (var i = 0; i<dimen*dimen; i++)  {
-			mat.push(0);
-		}
+    vecDot: {
+        value: function(dimen, v0, v1) {
+            if ((v0.length < dimen) || (v1.length < dimen))
+            {
+                throw new Error( "dimension error in vecDot" );
+            }
 
-		var index = 0;
-		for (var j = 0; j<dimen; j++) {
-			mat[index] = 1.0;
-			index += dimen + 1;
-		}
-	
-		return mat;	
-	};
-
-	this.MatrixRotationZ = function( angle )
-	{
-		var mat = this.MatrixIdentity(4);
-		//glmat4.rotateZ(mat, angle);
-		var sn = Math.sin(angle),
-			cs = Math.cos(angle);
-		mat[0] = cs;	mat[4] = -sn;
-		mat[1] = sn;	mat[5] =  cs;
-
-		return mat;
-	};
-};
+            var sum = 0.0;
+            for (var i=0;  i<dimen;  i++)
+                sum += v0[i] * v1[i];
 
-///////////////////////////////////////////////////////////////////////
-// Class RuntimeRectangle
-///////////////////////////////////////////////////////////////////////
-NinjaCvsRt.RuntimeRectangle = function ()
-{
-	// inherit the members of NinjaCvsRt.RuntimeGeomObj
-	this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj;
-	this.inheritedFrom();
-
-	this.importJSON = function( jObj )
-	{
-		this._xOffset			= jObj.xoff;
-		this._yOffset			= jObj.yoff;
-		this._width				= jObj.width;
-		this._height			= jObj.height;
-		this._strokeWidth		= jObj.strokeWidth;
-		this._strokeColor		= jObj.strokeColor;
-		this._fillColor			= jObj.fillColor;
-		this._tlRadius			= jObj.tlRadius;
-		this._trRadius			= jObj.trRadius;
-		this._blRadius			= jObj.blRadius;
-		this._brRadius			= jObj.brRadius;
-		this._innerRadius		= jObj.innerRadius;
-		this._strokeStyle		= jObj.strokeStyle;
-		var strokeMaterialName	= jObj.strokeMat;
-		var fillMaterialName	= jObj.fillMat;
-		this.importMaterials( jObj.materials );
-	};
-
-	this.renderPath = function( inset, ctx )
-	{
-		// various declarations
-		var pt,  rad,  ctr,  startPt, bPts;
-		var width  = Math.round(this._width),
-			height = Math.round(this._height),
-            hw = 0.5*width,
-            hh = 0.5*height;
-
-        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;
-        // limit the radii to half the rectangle dimension
-        var minDimen = hw < hh ? hw : hh;
-        if (tlRad > minDimen)  tlRad = minDimen;
-        if (blRad > minDimen)  blRad = minDimen;
-        if (brRad > minDimen)  brRad = minDimen;
-        if (trRad > minDimen)  trRad = minDimen;
-
-		var world = this.getWorld();
-		var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
-		var cop = [0.5*vpw, 0.5*vph, 0.0];
-		var xCtr = cop[0] + this._xOffset,					yCtr = cop[1] - this._yOffset;
-		var xLeft = xCtr - 0.5*this._width,					yTop = yCtr - 0.5*this._height;
-		var xDist = cop[0] - xLeft,							yDist = cop[1] - yTop;
-		var xOff = 0.5*vpw - xDist,							yOff  = 0.5*vph - yDist;
-
-		if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0))
-		{
-			ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset);
-		}
-		else
-		{
-			// get the top left point
-			rad = tlRad - inset;
-			if (rad < 0)  rad = 0;
-			pt[1] += rad;
-			if (Math.abs(rad) < 0.001)  pt[1] = inset;
-			ctx.moveTo( pt[0]+xOff,  pt[1]+yOff );
-
-			// get the bottom left point
-			pt = [inset, height - inset];
-			rad = blRad - inset;
-			if (rad < 0)  rad = 0;
-			pt[1] -= rad;
-			ctx.lineTo( pt[0]+xOff,  pt[1]+yOff );
-
-			// get the bottom left curve
-			if (rad > 0.001)
-				ctx.quadraticCurveTo( inset+xOff, height-inset+yOff,  inset+rad+xOff, height-inset+yOff );
-
-			// 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]+xOff, pt[1]+yOff );
-
-			// get the bottom right arc
-			if (rad > 0.001)
-				ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff,  width-inset+xOff, height-inset-rad+yOff );
-
-			// 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]+xOff, pt[1]+yOff );
-
-			// do the top right corner
-			if (rad > 0.001)
-				ctx.quadraticCurveTo( width-inset+xOff, inset+yOff,  width-inset-rad+xOff, inset+yOff );
-
-			// do the top of the rectangle
-			pt = [inset, inset];
-			rad = tlRad - inset;
-			if (rad < 0)  rad = 0;
-			pt[0] += rad;
-			ctx.lineTo( pt[0]+xOff, pt[1]+yOff);
-
-			// do the top left corner
-			if (rad > 0.001)
-				ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff );
-			else
-				ctx.lineTo( inset+xOff, 2*inset+yOff );
-		}
-	};
-
-    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();
-
-        var c,
-            inset,
-            gradient,
-            colors,
-            len,
-            n,
-            position,
-            cs;
-        // render the fill
-        ctx.beginPath();
-        if (this._fillColor) {
-            inset = Math.ceil( lw ) - 0.5;
-
-            if(this._fillColor.gradientMode) {
-                if(this._fillColor.gradientMode === "radial") {
-                    gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2);
-                } else {
-                    gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
-                }
-                colors = this._fillColor.color;
+            return sum;
+        }
+    },
+
+    vecMag: {
+            value: function(dimen, vec) {
+            var sum = 0.0;
+            for (var i=0;  i<dimen;  i++)
+                sum += vec[i]*vec[i];
+            return Math.sqrt( sum );
+        }
+    },
 
-                len = colors.length;
+    vecScale: {
+        value: function(dimen, vec, scale) {
+            for (var i=0;  i<dimen;  i++)
+                vec[i] *= scale;
 
-                for(n=0; n<len; n++) {
-                    position = colors[n].position/100;
-                    cs = colors[n].value;
-                    gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-                }
+            return vec;
+        }
+    },
 
-                ctx.fillStyle = gradient;
+    vecNormalize: {
+        value: function(dimen, vec, len) {
+            var rtnVec;
+            if (!len)  len = 1.0;
 
-            } else {
-                c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
-                ctx.fillStyle = c;
+            var sum = 0.0, i = 0;
+            for (i = 0;  i<dimen;  i++)
+                sum += vec[i]*vec[i];
+            sum = Math.sqrt( sum );
+
+            if (Math.abs(sum) >= 0.001)
+            {
+                var scale = len/sum;
+                rtnVec = [];
+                for (i = 0;  i<dimen;  i++)
+                    rtnVec[i] = vec[i]*scale;
             }
 
-            ctx.lineWidth	= lw;
-            this.renderPath( inset, ctx );
-            ctx.fill();
-            ctx.closePath();
+            return rtnVec;
         }
+    },
 
-        // render the stroke
-        ctx.beginPath();
-        if (this._strokeColor) {
-            inset = Math.ceil( 0.5*lw ) - 0.5;
+    transformPoint: {
+        value: function(srcPt, mat) {
+            var pt = srcPt.slice(0);
+            var	x = this.vecDot(3,  pt, [mat[0], mat[4], mat[ 8]] ) + mat[12],
+                y = this.vecDot(3,  pt, [mat[1], mat[5], mat[ 9]] ) + mat[13],
+                z = this.vecDot(3,  pt, [mat[2], mat[6], mat[10]] ) + mat[14];
 
-            if(this._strokeColor.gradientMode) {
-                if(this._strokeColor.gradientMode === "radial") {
-                    gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
-                } else {
-                    gradient = ctx.createLinearGradient(0, h/2, w, h/2);
-                }
-                colors = this._strokeColor.color;
-
-                len = colors.length;
+            return [x, y, z];
+        }
+    },
 
-                for(n=0; n<len; n++) {
-                    position = colors[n].position/100;
-                    cs = colors[n].value;
-                    gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-                }
+    MatrixIdentity: {
+        value: function(dimen) {
+            var mat = [];
 
-                ctx.strokeStyle = gradient;
+            for (var i = 0; i<dimen*dimen; i++)  {
+                mat.push(0);
+            }
 
-            } else {
-                c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
-                ctx.strokeStyle = c;
+            var index = 0;
+            for (var j = 0; j<dimen; j++) {
+                mat[index] = 1.0;
+                index += dimen + 1;
             }
 
-            ctx.lineWidth	= lw;
-            this.renderPath( inset, ctx );
-            ctx.stroke();
-            ctx.closePath();
+            return mat;
         }
-    };
-};
-
-///////////////////////////////////////////////////////////////////////
-// Class RuntimeLine
-///////////////////////////////////////////////////////////////////////
-NinjaCvsRt.RuntimeLine = function ()
-{
-	this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj;
-	this.inheritedFrom();
-
-	this.importJSON = function( jObj )
-	{
-		this._xOffset			= jObj.xoff;
-		this._yOffset			= jObj.yoff;
-		this._width				= jObj.width;
-		this._height			= jObj.height;
-		this._xAdj			    = jObj.xAdj;
-		this._yAdj			    = jObj.yAdj;
-		this._strokeWidth		= jObj.strokeWidth;
-		this._slope 		    = jObj.slope;
-		this._strokeStyle		= jObj.strokeStyle;
-		this._strokeColor		= jObj.strokeColor;
-		var strokeMaterialName	= jObj.strokeMat;
-        this.importMaterials( jObj.materials );
-    };
-
-	this.render = function()
-	{
-		// get the world
-		var world = this.getWorld();
-		if (!world)  throw( "null world in buildBuffers" );
-
-		 // get the context
-		var ctx = world.get2DContext();
-		if (!ctx)  return;
- 	
-		// set up the stroke style
-		var lineWidth = this._strokeWidth,
-            w = this._width,
-            h = this._height;
-
-        var c,
-            gradient,
-            colors,
-            len,
-            n,
-            position,
-            cs;
-
-		ctx.beginPath();
-		ctx.lineWidth	= lineWidth;
-		if (this._strokeColor) {
-            if(this._strokeColor.gradientMode) {
-                if(this._strokeColor.gradientMode === "radial") {
-                    gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2));
-                } else {
-                    gradient = ctx.createLinearGradient(0, h/2, w, h/2);
-                }
-                colors = this._strokeColor.color;
-
-                len = colors.length;
-
-                for(n=0; n<len; n++) {
-                    position = colors[n].position/100;
-                    cs = colors[n].value;
-                    gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
-                }
-
-                ctx.strokeStyle = gradient;
-
-            } else {
-                c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
-                ctx.strokeStyle = c;
-            }
+    },
+
+    MatrixRotationZ: {
+        value: function(angle) {
+            var mat = this.MatrixIdentity(4);
+            //glmat4.rotateZ(mat, angle);
+            var sn = Math.sin(angle),
+                cs = Math.cos(angle);
+            mat[0] = cs;	mat[4] = -sn;
+            mat[1] = sn;	mat[5] =  cs;
+
+            return mat;
+        }
+    }
+});
 
-			// get the points
-			var p0,  p1;
-			if(this._slope === "vertical") {
-				p0 = [0.5*w, 0];
-				p1 = [0.5*w, h];
-			} else if(this._slope === "horizontal") {
-				p0 = [0, 0.5*h];
-				p1 = [w, 0.5*h];
-			} else if(this._slope > 0) {
-				p0 = [this._xAdj, this._yAdj];
-				p1 = [w - this._xAdj,  h - this._yAdj];
-			} else {
-				p0 = [this._xAdj, h - this._yAdj];
-				p1 = [w - this._xAdj,  this._yAdj];
-			}
-			
-			// draw the line
-			ctx.moveTo( p0[0],  p0[1] );
-			ctx.lineTo( p1[0],  p1[1] );
-			ctx.stroke();
-		}
-    };
-};
 
 ///////////////////////////////////////////////////////////////////////
-// Class RuntimeOval
+// Class RuntimeRectangle
 ///////////////////////////////////////////////////////////////////////
-NinjaCvsRt.RuntimeOval = function ()
-{
-	// inherit the members of NinjaCvsRt.RuntimeGeomObj
-	this.inheritedFrom = NinjaCvsRt.RuntimeGeomObj;
-	this.inheritedFrom();
-
-	this.importJSON = function( jObj )
-	{
-		this._xOffset			= jObj.xoff;
-		this._yOffset			= jObj.yoff;
-		this._width				= jObj.width;
-		this._height			= jObj.height;
-		this._strokeWidth		= jObj.strokeWidth;
-		this._strokeColor		= jObj.strokeColor;
-		this._fillColor			= jObj.fillColor;
-		this._innerRadius		= jObj.innerRadius;
-		this._strokeStyle		= jObj.strokeStyle;
-		var strokeMaterialName	= jObj.strokeMat;
-		var fillMaterialName	= jObj.fillMat;
-		this.importMaterials( jObj.materials );
-	};
-
-	this.render = function()
-	{
-		// get the world
-		var world = this.getWorld();
-		if (!world)  throw( "null world in buildBuffers" );
-
-		 // get the context
-		var ctx = world.get2DContext();
-		if (!ctx)  return;
-
-		// declare some variables
-		var p0, p1;
-		var x0, y0, x1, y1;
-
-		// create the matrix
-		var lineWidth = this._strokeWidth;
-		var innerRad  = this._innerRadius;
-		var xScale = 0.5*this._width - lineWidth,
-			yScale = 0.5*this._height - lineWidth;
-
-		// translate
-		var xCtr = 0.5*world.getViewportWidth() + this._xOffset,
-			yCtr = 0.5*world.getViewportHeight() + this._yOffset;
-		var mat = this.MatrixIdentity( 4 );
-		mat[0] = xScale;					mat[12] = xCtr;
-						mat[5] = yScale;	mat[13] = yCtr;
-		/*
-		var mat = [
-							[ xScale,     0.0,  0.0,  xCtr],
-							[    0.0,  yScale,  0.0,  yCtr],
-							[    0.0,     0.0,  1.0,   0.0],
-							[    0.0,     0.0,  0.0,   1.0]
-						];
-		*/
-
-		// get a bezier representation of the circle
-		var bezPts = this.circularArcToBezier( [0,0,0],  [1,0,0], 2.0*Math.PI );
-		if (bezPts)
-		{
-			var n = bezPts.length;
-            var gradient,
+NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, {
+
+    importJSON: {
+        value: function(jObj) {
+            this._xOffset			= jObj.xoff;
+            this._yOffset			= jObj.yoff;
+            this._width				= jObj.width;
+            this._height			= jObj.height;
+            this._strokeWidth		= jObj.strokeWidth;
+            this._strokeColor		= jObj.strokeColor;
+            this._fillColor			= jObj.fillColor;
+            this._tlRadius			= jObj.tlRadius;
+            this._trRadius			= jObj.trRadius;
+            this._blRadius			= jObj.blRadius;
+            this._brRadius			= jObj.brRadius;
+            this._innerRadius		= jObj.innerRadius;
+            this._strokeStyle		= jObj.strokeStyle;
+            var strokeMaterialName	= jObj.strokeMat;
+            var fillMaterialName	= jObj.fillMat;
+            this.importMaterials( jObj.materials );
+        }
+    },
+
+    renderPath: {
+        value: function(inset, ctx) {
+            // various declarations
+            var pt,  rad,  ctr,  startPt, bPts;
+            var width  = Math.round(this._width),
+                height = Math.round(this._height),
+                hw = 0.5*width,
+                hh = 0.5*height;
+
+            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;
+            // limit the radii to half the rectangle dimension
+            var minDimen = hw < hh ? hw : hh;
+            if (tlRad > minDimen)  tlRad = minDimen;
+            if (blRad > minDimen)  blRad = minDimen;
+            if (brRad > minDimen)  brRad = minDimen;
+            if (trRad > minDimen)  trRad = minDimen;
+
+            var world = this.getWorld();
+            var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
+            var cop = [0.5*vpw, 0.5*vph, 0.0];
+            var xCtr = cop[0] + this._xOffset,					yCtr = cop[1] - this._yOffset;
+            var xLeft = xCtr - 0.5*this._width,					yTop = yCtr - 0.5*this._height;
+            var xDist = cop[0] - xLeft,							yDist = cop[1] - yTop;
+            var xOff = 0.5*vpw - xDist,							yOff  = 0.5*vph - yDist;
+
+            if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0))
+            {
+                ctx.rect(pt[0]+xOff, pt[1]+yOff, width - 2*inset, height - 2*inset);
+            }
+            else
+            {
+                // get the top left point
+                rad = tlRad - inset;
+                if (rad < 0)  rad = 0;
+                pt[1] += rad;
+                if (Math.abs(rad) < 0.001)  pt[1] = inset;
+                ctx.moveTo( pt[0]+xOff,  pt[1]+yOff );
+
+                // get the bottom left point
+                pt = [inset, height - inset];
+                rad = blRad - inset;
+                if (rad < 0)  rad = 0;
+                pt[1] -= rad;
+                ctx.lineTo( pt[0]+xOff,  pt[1]+yOff );
+
+                // get the bottom left curve
+                if (rad > 0.001)
+                    ctx.quadraticCurveTo( inset+xOff, height-inset+yOff,  inset+rad+xOff, height-inset+yOff );
+
+                // 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]+xOff, pt[1]+yOff );
+
+                // get the bottom right arc
+                if (rad > 0.001)
+                    ctx.quadraticCurveTo( width-inset+xOff, height-inset+yOff,  width-inset+xOff, height-inset-rad+yOff );
+
+                // 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]+xOff, pt[1]+yOff );
+
+                // do the top right corner
+                if (rad > 0.001)
+                    ctx.quadraticCurveTo( width-inset+xOff, inset+yOff,  width-inset-rad+xOff, inset+yOff );
+
+                // do the top of the rectangle
+                pt = [inset, inset];
+                rad = tlRad - inset;
+                if (rad < 0)  rad = 0;
+                pt[0] += rad;
+                ctx.lineTo( pt[0]+xOff, pt[1]+yOff);
+
+                // do the top left corner
+                if (rad > 0.001)
+                    ctx.quadraticCurveTo( inset+xOff, inset+yOff, inset+xOff, inset+rad+yOff );
+                else
+                    ctx.lineTo( inset+xOff, 2*inset+yOff );
+            }
+        }
+    },
+
+    render: {
+        value: function() {
+            // get the world
+            var world = this.getWorld();
+            if (!world)  throw( "null world in rectangle render" );
+
+             // get the context
+            var ctx = world.get2DContext();
+            if (!ctx)  return;
+
+            // get some dimensions
+            var lw = this._strokeWidth;
+            var	w = world.getViewportWidth(),
+                h = world.getViewportHeight();
+
+            var c,
+                inset,
+                gradient,
                 colors,
                 len,
-                j,
+                n,
                 position,
-                cs,
-                c;
-
-            // set up the fill style
+                cs;
+            // render the fill
             ctx.beginPath();
-            ctx.lineWidth = 0;
             if (this._fillColor) {
+                inset = Math.ceil( lw ) - 0.5;
+
                 if(this._fillColor.gradientMode) {
                     if(this._fillColor.gradientMode === "radial") {
-                        gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
-                                                            xCtr, yCtr, Math.max(this._width, this._height)/2);
+                        gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2);
                     } else {
-                        gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2);
+                        gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
                     }
                     colors = this._fillColor.color;
 
                     len = colors.length;
 
-                    for(j=0; j<len; j++) {
-                        position = colors[j].position/100;
-                        cs = colors[j].value;
+                    for(n=0; n<len; n++) {
+                        position = colors[n].position/100;
+                        cs = colors[n].value;
                         gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
                     }
 
@@ -1091,76 +899,111 @@ NinjaCvsRt.RuntimeOval = function ()
                     c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
                     ctx.fillStyle = c;
                 }
-                // draw the fill
-//				ctx.beginPath();
-                var p = this.transformPoint( bezPts[0],   mat );
-                ctx.moveTo( p[0],  p[1] );
-                var index = 1;
-                while (index < n) {
-                    p0   = this.transformPoint( bezPts[index],  mat );
-                    p1 = this.transformPoint( bezPts[index+1],  mat );
-
-                    x0 = p0[0];  y0 = p0[1];
-                    x1 = p1[0];  y1 = p1[1];
-                    ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
-                    index += 2;
-                }
 
-                if (innerRad > 0.001) {
-                    xScale = 0.5*innerRad*this._width;
-                    yScale = 0.5*innerRad*this._height;
-                    mat[0] = xScale;
-                    mat[5] = yScale;
-
-                    // get the bezier points
-                    var bezPtsInside = this.circularArcToBezier( [0,0,0], [1,0,0], -2.0*Math.PI );
-                    if (bezPtsInside) {
-                        n = bezPtsInside.length;
-                        p = this.transformPoint( bezPtsInside[0],   mat );
-                        ctx.moveTo( p[0],  p[1] );
-                        index = 1;
-                        while (index < n) {
-                            p0 = this.transformPoint( bezPtsInside[index],    mat );
-                            p1 = this.transformPoint( bezPtsInside[index+1],  mat );
+                ctx.lineWidth	= lw;
+                this.renderPath( inset, ctx );
+                ctx.fill();
+                ctx.closePath();
+            }
 
-                            x0 = p0[0];
-                            y0 = p0[1];
-                            x1 = p1[0];
-                            y1 = p1[1];
-                            ctx.quadraticCurveTo( x0,  y0,  x1, y1 );
-                            index += 2;
-                        }
+            // render the stroke
+            ctx.beginPath();
+            if (this._strokeColor) {
+                inset = Math.ceil( 0.5*lw ) - 0.5;
+
+                if(this._strokeColor.gradientMode) {
+                    if(this._strokeColor.gradientMode === "radial") {
+                        gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
+                    } else {
+                        gradient = ctx.createLinearGradient(0, h/2, w, h/2);
                     }
+                    colors = this._strokeColor.color;
+
+                    len = colors.length;
+
+                    for(n=0; n<len; n++) {
+                        position = colors[n].position/100;
+                        cs = colors[n].value;
+                        gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                    }
+
+                    ctx.strokeStyle = gradient;
+
+                } else {
+                    c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
+                    ctx.strokeStyle = c;
                 }
 
-                // fill the path
-                ctx.fill();
+                ctx.lineWidth	= lw;
+                this.renderPath( inset, ctx );
+                ctx.stroke();
+                ctx.closePath();
             }
+        }
+    }
+});
 
-            // calculate the stroke matrix
-            xScale = 0.5*this._width  - 0.5*lineWidth;
-            yScale = 0.5*this._height - 0.5*lineWidth;
-            mat[0] = xScale;
-            mat[5] = yScale;
+///////////////////////////////////////////////////////////////////////
+// Class RuntimeLine
+///////////////////////////////////////////////////////////////////////
+NinjaCvsRt.RuntimeLine = Object.create(NinjaCvsRt.RuntimeGeomObj, {
+
+    importJSON: {
+        value: function(jObj) {
+            this._xOffset			= jObj.xoff;
+            this._yOffset			= jObj.yoff;
+            this._width				= jObj.width;
+            this._height			= jObj.height;
+            this._xAdj			    = jObj.xAdj;
+            this._yAdj			    = jObj.yAdj;
+            this._strokeWidth		= jObj.strokeWidth;
+            this._slope 		    = jObj.slope;
+            this._strokeStyle		= jObj.strokeStyle;
+            this._strokeColor		= jObj.strokeColor;
+            var strokeMaterialName	= jObj.strokeMat;
+            this.importMaterials( jObj.materials );
+        }
+    },
+
+    render: {
+        value: function() {
+            // get the world
+            var world = this.getWorld();
+            if (!world)  throw( "null world in buildBuffers" );
+
+             // get the context
+            var ctx = world.get2DContext();
+            if (!ctx)  return;