From fdeed8051c3af538d28ca3bc599121cea483c22c Mon Sep 17 00:00:00 2001
From: Valerio Virgillito
Date: Thu, 22 Mar 2012 15:47:56 -0700
Subject: Squashed commit of the following GL integration

Signed-off-by: Valerio Virgillito <valerio@motorola.com>
---
 assets/canvas-runtime.js       | 529 +++++++++++++++++++++++------------------
 assets/descriptor.json         |   4 +
 assets/images/paris.png        | Bin 0 -> 4108 bytes
 assets/images/powderblue.png   | Bin 0 -> 176 bytes
 assets/images/raiders.png      | Bin 0 -> 5674 bytes
 assets/rdge-compiled.js        |   6 +-
 assets/shaders/Paris.frag.glsl |  68 ++++++
 7 files changed, 374 insertions(+), 233 deletions(-)
 create mode 100644 assets/images/paris.png
 create mode 100644 assets/images/powderblue.png
 create mode 100644 assets/images/raiders.png
 create mode 100644 assets/shaders/Paris.frag.glsl

(limited to 'assets')

diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index fd823f35..dd909e26 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -37,17 +37,24 @@ function CanvasDataManager()
 		for (var i=0;  i<nWorlds;  i++)
 		{
 			var importStr = value[i];
-			var startIndex = importStr.indexOf( "id: " );
-			if (startIndex >= 0)
+
+			// 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))
 			{
-				var endIndex = importStr.indexOf( "\n", startIndex );
-				if (endIndex > 0)
+				// JSON format.  pull off the version info
+				importStr = importStr.substr( index+1 );
+
+				var jObj = JSON.parse( importStr );
+				var id = jObj.id;
+				if (id)
 				{
-					var id = importStr.substring( startIndex+4, endIndex );
 					var canvas = this.findCanvasWithID( id, root );
 					if (canvas)
 					{
-						var rt = new GLRuntime( canvas, importStr,  assetPath );
+						new GLRuntime( canvas, jObj,  assetPath );
 					}
 				}
 			}
@@ -95,14 +102,15 @@ function CanvasDataManager()
 // Class GLRuntime
 //      Manages runtime fora WebGL canvas
 ///////////////////////////////////////////////////////////////////////
-function GLRuntime( canvas, importStr,  assetPath )
+function GLRuntime( canvas, jObj,  assetPath )
 {
     ///////////////////////////////////////////////////////////////////////
     // Instance variables
     ///////////////////////////////////////////////////////////////////////
 	this._canvas		= canvas;
 	this._context		= null;
-	this._importStr		= importStr;
+	//this._importStr		= importStr;
+	this._jObj			= jObj;
 
 	this.renderer		= null;
 	this.myScene		= null;
@@ -157,21 +165,19 @@ function GLRuntime( canvas, importStr,  assetPath )
     ///////////////////////////////////////////////////////////////////////
 	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 root = jObj.children[0];
+
 		// parse the data
-		// the GL runtime must start with a "sceneData: "
-		var index = importStr.indexOf( "scenedata: " );
-		if (index >= 0)
+		if (jObj.scenedata)
 		{
 			this._useWebGL = true;
 
-			var rdgeStr = importStr.substr( index+11 );
-			var endIndex = rdgeStr.indexOf( "endscene\n" );
-			if (endIndex < 0)  throw new Error( "ill-formed WebGL data" );
-			var len = endIndex - index + 11;
-			rdgeStr = rdgeStr.substr( 0, endIndex );
-
+			var rdgeStr = jObj.scenedata;
 			this.myScene.importJSON( rdgeStr );
-			this.importObjects( importStr );
+			this.importObjects( root );
 			this.linkMaterials( this._geomRoot );
 			this.initMaterials();
 			this.linkLights();
@@ -179,7 +185,7 @@ function GLRuntime( canvas, importStr,  assetPath )
 		else
 		{
 			this._context = this._canvas.getContext( "2d" );
-			this.importObjects( importStr );
+			this.importObjects( root );
 			this.render();
 		}
 	}
@@ -277,58 +283,42 @@ function GLRuntime( canvas, importStr,  assetPath )
 		}
     }
 
-	this.importObjects = function( importStr,  parent )
+	this.importObjects = function( jObj,  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 );
+		// read the next object
+		var gObj = this.importObject( jObj, 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))
+		// load the children
+		if (jObj.children)
+		{
+			var nKids = jObj.children.length;
+			for (var i=0;  i<nKids;  i++)
 			{
-				importStr = importStr.substr( childIndex + 7 );
-				importStr = this.importObjects( importStr, obj );
-				endIndex = importStr.indexOf( "ENDOBJECT\n" )
+				var child = jObj.children[i];
+				this.importObjects( child, gObj );
 			}
-
-			// 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 )
+	this.importObject = function( jObj,  parent )
 	{
-		var type = Number( getPropertyFromString( "type: ", objStr ) );
-
+		var type = jObj.type
 		var obj;
 		switch (type)
 		{
 			case 1:
 				obj = new RuntimeRectangle();
-				obj.import( objStr, parent );
+				obj.import( jObj, parent );
 				break;
 
 			case 2:		// circle
 				obj = new RuntimeOval();
-				obj.import( objStr, parent );
+				obj.import( jObj, parent );
 				break;
 
 			case 3:		// line
 				obj = new RuntimeLine();
-				obj.import( objStr, parent );
+				obj.import( jObj, parent );
 				break;
 
 			default:
@@ -337,7 +327,7 @@ function GLRuntime( canvas, importStr,  assetPath )
 		}
 
 		if (obj)
-			this.addObject( obj );
+			this.addObject( obj, parent );
 
 		return obj;
 	}
@@ -396,17 +386,16 @@ function GLRuntime( canvas, importStr,  assetPath )
 
 	this.remapAssetFolder = function( url )
 	{
-		/*
-		var searchStr = "assets/";
-		var index = url.indexOf( searchStr );
-		var rtnPath = url;
-		if (index >= 0)
-		{
-			rtnPath = url.substr( index + searchStr.length );
-			rtnPath = this._assetPath + rtnPath;
-		}
-		return rtnPath;
-		*/
+//		var searchStr = "assets/";
+//		var index = url.indexOf( searchStr );
+//		var rtnPath = url;
+//		if (index >= 0)
+//		{
+//			rtnPath = url.substr( index + searchStr.length );
+//			rtnPath = this._assetPath + rtnPath;
+//		}
+//		return rtnPath;
+		
 		return url;
 	}
 
@@ -450,8 +439,7 @@ function GLRuntime( canvas, importStr,  assetPath )
 	}
 
 	// start RDGE or load Canvas 2D objects
-	var index = importStr.indexOf( "scenedata: " );
-	this._useWebGL = (index >= 0);
+	if (jObj.scenedata)  this._useWebGL = true;
 	if (this._useWebGL)
 	{
 		var id = canvas.getAttribute( "data-RDGE-id" ); 
@@ -515,16 +503,19 @@ function RuntimeGeomObj()
     {
 	}
 
-	this.importMaterials = function(importStr)
+	this.importMaterials = function(jObj)
 	{
-		var nMaterials = Number( getPropertyFromString( "nMaterials: ", importStr )  );
+		if (!jObj || !jObj.materials)  return;
+
+		var nMaterials = jObj.nMaterials;
+		var matArray = jObj.materials;
 		for (var i=0;  i<nMaterials;  i++)
 		{
-			var matNodeName = getPropertyFromString( "materialNodeName: ",	importStr );
-
 			var mat;
-			var materialType = getPropertyFromString( "material: ",	importStr );
-			switch (materialType)
+			var matObj = matArray[i].material;
+			var matNodeName = matArray[i].materialNodeName;
+			var shaderName = matObj.material;
+			switch (shaderName)
 			{
 				case "flat":			mat = new RuntimeFlatMaterial();				break;
 				case "radialGradient":  mat = new RuntimeRadialGradientMaterial();		break;
@@ -535,6 +526,7 @@ function RuntimeGeomObj()
 
 				case "deform":
 				case "water":
+				case "paris":
 				case "tunnel":
 				case "reliefTunnel":
 				case "squareTunnel":
@@ -555,15 +547,10 @@ function RuntimeGeomObj()
 
 			if (mat)
 			{
-				mat.import( importStr );
+				mat.import( matObj );
 				mat._materialNodeName = matNodeName;
 				this._materials.push( mat );
 			}
-
-			var endKey = "endMaterial\n";
-			var endIndex = importStr.indexOf( endKey );
-			if (endIndex < 0)  break;
-			importStr = importStr.substr( endIndex + endKey.length );
 		}
 	}
 
@@ -661,19 +648,37 @@ function RuntimeGeomObj()
 
         return [x, y, z];
     }
-}
+	
+	this.MatrixIdentity = function(dimen)
+	{
+		var mat = [];
 
-function getPropertyFromString( prop, str )
-{
-	var index = str.indexOf( prop );
-	if (index < 0)  throw new Error( "property " + prop + " not found in string: " + str);
+		for (var i = 0; i<dimen*dimen; i++)  {
+			mat.push(0);
+		}
+
+		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;
 
-	var rtnStr = str.substr( index+prop.length );
-	index = rtnStr.indexOf( "\n" );
-	if (index >= 0)
-		rtnStr = rtnStr.substr(0, index);
+		return mat;
+	};
 
-	return rtnStr;
 }
 
 ///////////////////////////////////////////////////////////////////////
@@ -685,26 +690,24 @@ function RuntimeRectangle()
 	this.inheritedFrom = RuntimeGeomObj;
 	this.inheritedFrom();
 
-	this.import = function( importStr )
+	this.import = function( jObj )
 	{
-		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._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 )
@@ -827,6 +830,103 @@ function RuntimeRectangle()
     }
 }
 
+///////////////////////////////////////////////////////////////////////
+// Class RuntimeLine
+///////////////////////////////////////////////////////////////////////
+function RuntimeLine()
+{
+	this.inheritedFrom = RuntimeGeomObj;
+	this.inheritedFrom();
+
+	this.import = 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;
+            }
+
+			// 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
 ///////////////////////////////////////////////////////////////////////
@@ -836,21 +936,20 @@ function RuntimeOval()
 	this.inheritedFrom = RuntimeGeomObj;
 	this.inheritedFrom();
 
-	this.import = function( importStr )
+	this.import = function( jObj )
 	{
-		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		= getPropertyFromString( "strokeStyle: ",	importStr );
-		var strokeMaterialName	= getPropertyFromString( "strokeMat: ",	importStr );
-		var fillMaterialName	= getPropertyFromString( "fillMat: ",		importStr );
-		this._fillColor			=  eval( "[" + getPropertyFromString( "fillColor: ",	importStr ) + "]" );
-		this._strokeColor		=  eval( "[" + getPropertyFromString( "strokeColor: ",	importStr ) + "]" );
-		
-		this.importMaterials( importStr );
+		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()
@@ -876,12 +975,17 @@ function RuntimeOval()
 		// 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 );
@@ -1037,7 +1141,7 @@ function RuntimeOval()
         var  d = rad*cs + h;
 
         var rtnPts = [ this.vecAdd(dimen, pt, ctr) ];
-        var rotMat = Matrix.RotationZ( dAngle );
+        var rotMat = this.MatrixRotationZ( dAngle );
         for ( var i=0;  i<nSegs;  i++)
         {
             // get the next end point
@@ -1098,23 +1202,9 @@ function RuntimeMaterial( world )
 	{
 	}
 
-	this.import = function( importStr )
+	this.import = function( jObj )
 	{
 	}
-
-	this.getPropertyFromString = function( 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;
-	}
-
 }
 
 function RuntimeFlatMaterial()
@@ -1129,14 +1219,11 @@ function RuntimeFlatMaterial()
 	// assign a default color
 	this._color = [1,0,0,1];
 
-    this.import = function( importStr )
+    this.import = function( jObj )
     {
-		var colorStr = this.getPropertyFromString( "color: ",	importStr );
-		if (colorStr)
-			this._color  = eval( "[" + colorStr + "]" );
+		this._color = jObj.color;
     };
 
-
 	this.init = function( world )
 	{
 		if (this._shader)
@@ -1160,9 +1247,10 @@ function RuntimePulseMaterial()
 	this.isAnimated			= function()	{  return true;	}
 
 
-	this.import = function( importStr )
+	this.import = function( jObj )
 	{
-		this._texMap = this.getPropertyFromString( "texture: ",	importStr );
+		this._texMap = jObj.texture;
+        if (jObj.dTime)  this._dTime = jObj.dTime;
 	}
 
 	this.init = function( world )
@@ -1254,25 +1342,19 @@ function RuntimeRadialGradientMaterial()
 		}
 	}
 
-	this.import = function( importStr )
+	this.import = function( jObj )
 	{
-		var colorStr;
-		colorStr = this.getPropertyFromString( "color1: ",	importStr );
-		this._color1  = eval( "[" + colorStr + "]" );
-		colorStr = this.getPropertyFromString( "color2: ",	importStr );
-		this._color2  = eval( "[" + colorStr + "]" );
-		colorStr = this.getPropertyFromString( "color3: ",	importStr );
-		this._color3  = eval( "[" + colorStr + "]" );
-		colorStr = this.getPropertyFromString( "color4: ",	importStr );
-		this._color4  = eval( "[" + colorStr + "]" );
-
-		this._colorStop1 = Number( this.getPropertyFromString( "colorStop1: ",	importStr ) );
-		this._colorStop2 = Number( this.getPropertyFromString( "colorStop2: ",	importStr ) );
-		this._colorStop3 = Number( this.getPropertyFromString( "colorStop3: ",	importStr ) );
-		this._colorStop4 = Number( this.getPropertyFromString( "colorStop4: ",	importStr ) );
+		this._color1	= jObj.color1,
+		this._color2	= jObj.color2,
+		this._color3	= jObj.color3,
+		this._color4	= jObj.color4,
+		this._colorStop1	= jObj.colorStop1,
+		this._colorStop2	= jObj.colorStop2,
+		this._colorStop3	= jObj.colorStop3,
+		this._colorStop4	= jObj.colorStop4;
 
 		if (this._angle !== undefined)
-			this._angle = this.getPropertyFromString( "angle: ",	importStr );
+			this._angle = jObj.angle;
 	}
 
 }
@@ -1304,12 +1386,12 @@ function RuntimeBumpMetalMaterial()
 	this._specularTexture = "assets/images/silver.png";
 	this._normalTexture = "assets/images/normalMap.png";
 
-	this.import = function( importStr )
+	this.import = function( jObj )
 	{
-		this._lightDiff  = eval( "[" + this.getPropertyFromString( "lightDiff: ",	importStr ) + "]" );
-		this._diffuseTexture = this.getPropertyFromString( "diffuseTexture: ",	importStr );
-		this._specularTexture = this.getPropertyFromString( "specularTexture: ",	importStr );
-		this._normalTexture = this.getPropertyFromString( "normalMap: ",	importStr );
+		this._lightDiff			= jObj.lightDiff;
+		this._diffuseTexture	= jObj.diffuseTexture;
+		this._specularTexture	= jObj.specularTexture;
+		this._normalTexture		= jObj.normalMap;
 	}
 
 	this.init = function( world )
@@ -1445,91 +1527,70 @@ function RuntimeUberMaterial()
 	{
 	}
 
-	this.import = function( importStr )
+	this.import = function( jObj )
 	{
-		// limit the key searches to this material
-        var endKey = "endMaterial\n";
-        var index = importStr.indexOf( endKey );
-        index += endKey.length;
-        importStr = importStr.slice( 0, index );
-
-		var matProps = getPropertyFromString( "materialProps: ", importStr );
-		if (matProps)
+		if (jObj.materialProps)
 		{
-			this._ambientColor  = eval( "[" + getPropertyFromString("ambientColor: ", importStr)   + ']' );
-			this._diffuseColor  = eval( "[" + getPropertyFromString( "diffuseColor: ", importStr)  + ']' );
-			this._specularColor = eval( "[" + getPropertyFromString( "specularColor: ", importStr) + ']' );
-			this._specularPower = Number(  getPropertyFromString( "specularPower: ", importStr) );
+			this._ambientColor  = jObj.materialProps.ambientColor;
+			this._diffuseColor  = jObj.materialProps.diffuseColor;
+			this._specularColor = jObj.materialProps.specularColor;
+			this._specularPower = jObj.materialProps.specularPower;
 		}
 
-		var lightProps = getPropertyFromString( "lightProps: ", importStr );
-		if (lightProps)
+		var lightArray = jObj.lights;
+		if (lightArray)
 		{
 			this._lights = [];
-			var lightStr;
 			for (var i=0;  i<this._MAX_LIGHTS;  i++)
 			{
-				var type = getPropertyFromString( "light" + i + ": ", importStr );
-				if (type)
+				var lightObj = lightArray[i];
+				if (lightObj)
 				{
-					var light = new Object;
-					light.type = type;
-					switch (type)
+					var type = lightObj['light'+i];
+					if (type)
 					{
-						case "directional":
-							lightStr = getPropertyFromString( 'light' + i + 'Dir: ', importStr);
-							light.direction = eval( "[" + lightStr + "]" );
-							break;
-
-						case "spot":
-							lightStr = getPropertyFromString( 'light' + i + 'Pos: ', importStr );
-							light.position =  eval( "[" + lightStr + "]" );
-
-							lightStr = getPropertyFromString( 'light' + i + 'OuterSpotCutoff: ', importStr );
-							light['spotInnerCutoff'] = Number( lightStr );
-
-							lightStr = getPropertyFromString( 'light' + i + 'InnerSpotCutoff: ', importStr );
-							light['spotOuterCutoff'] = Number( lightStr );
-							break;
-
-						case "point":
-							lightStr = getPropertyFromString( 'light' + i + 'Pos: ', importStr );
-							light.position =  eval( "[" + lightStr + "]" );
+						var light = new Object;
+						switch (type)
+						{
+							case "directional":
+								light.direction = lightObj['light' + i + 'Dir'];
+								break;
+
+							case "spot":
+								light.position = lightObj['light' + i + 'Pos'];
+								light['spotInnerCutoff'] = lightObj['light' + i + 'OuterSpotCutoff'];
+								light['spotOuterCutoff'] = lightObj['light' + i + 'InnerSpotCutoff'];
+								break;
+
+							case "point":
+								light.position = lightObj['light' + i + 'Pos'];
+								light.attenuation = lightObj['light' + i + 'Attenuation'];
+								break;
+
+							default:
+								throw new Error( "unrecognized light type on import: " + type );
+								break;
+						}
 
-							lightStr = getPropertyFromString( 'light' + i + 'Attenuation: ', importStr );
-							light.attenuation =  eval( "[" + lightStr + "]" );
-							break;
+						// common to all lights
+						light.diffuseColor  = lightObj['light' + i + 'Color'];
+						light.specularColor = lightObj['light' + i + 'SpecularColor'];
 
-						default:
-							throw new Error( "unrecognized light type on import: " + type );
-							break;
+						// push the light
+						this._lights.push( light );
 					}
-
-					// common to all lights
-					light.diffuseColor = eval( "[" + getPropertyFromString( 'light' + i + 'Color: ', importStr) + "]" );
-					light.specularColor = eval( "[" + getPropertyFromString( 'light' + i + 'SpecularColor: ', importStr) + "]" );
-
-					// push the light
-					this._lights.push( light );
+					else
+						this._lights[i] = 'undefined';
 				}
-				else
-					this._lights[i] = 'undefined';
-
-				// advance to the next light
-				var endLightKey = "endMaterial\n";
-				index = importStr.indexOf( endLightKey );
-				if (index < 0)  throw new Error( "ill-formed light encountered in import" );
-				index += endLightKey.length;
-				importStr = importStr.slice( 0, index );
 			}
 		}
 
-		this._diffuseMap = getPropertyFromString( "diffuseMap: ", importStr  )
-		this._normalMap = getPropertyFromString( "normalMap: ", importStr  );
-		this._specularMap = getPropertyFromString( "specularMap: ", importStr  );
-		this._environmentMap = getPropertyFromString( "environmentMap: ", importStr  );
+		this._diffuseMap		= jObj['diffuseMap'];
+		this._normalMap			= jObj['normalMap'];
+		this._specularMap		= jObj['specularMap'];
+		this._environmentMap	= jObj['environmentMap'];
 		if (this._environmentMap)
-			this._environmentAmount = Number( getPropertyFromString( "environmentAmount", importStr ) );
+			this._environmentAmount = jObj['environmentAmount'];
 	}
 }
 
@@ -1544,6 +1605,12 @@ function RuntimePlasmaMaterial()
 		this.update();
 	}
 
+	this.importJSON = function( jObj )
+	{
+		this._speed = jObj.speed;
+		this._dTime = jObj.dTime;
+	}
+
 	this.update = function( time )
 	{
 		var material = this._materialNode;
@@ -1561,3 +1628,5 @@ function RuntimePlasmaMaterial()
 		}
 	}
 }
+
+
diff --git a/assets/descriptor.json b/assets/descriptor.json
index af0520dd..85fbc996 100644
--- a/assets/descriptor.json
+++ b/assets/descriptor.json
@@ -21,6 +21,9 @@
 		"images/cubelight.png",
 		"images/random_normal.png",
 		"images/white.png",
+        "images/paris.png",
+        "images/powderblue.png",
+        "images/raiders.png",
 		"shaders/Basic.frag.glsl",
 		"shaders/TwistVert.vert.glsl",
 		"shaders/Basic.vert.glsl",
@@ -36,6 +39,7 @@
 		"shaders/Keleidoscope.frag.glsl",
 		"shaders/plasma.frag.glsl",
 		"shaders/Mandel.frag.glsl",
+        "shaders/Paris.frag.glsl",
 		"shaders/plasma.vert.glsl",
 		"shaders/Pulse.frag.glsl",
 		"shaders/radialBlur.frag.glsl",
diff --git a/assets/images/paris.png b/assets/images/paris.png
new file mode 100644
index 00000000..b7ef6c7b
Binary files /dev/null and b/assets/images/paris.png differ
diff --git a/assets/images/powderblue.png b/assets/images/powderblue.png
new file mode 100644
index 00000000..a4ef33b4
Binary files /dev/null and b/assets/images/powderblue.png differ
diff --git a/assets/images/raiders.png b/assets/images/raiders.png
new file mode 100644
index 00000000..64c39c89
Binary files /dev/null and b/assets/images/raiders.png differ
diff --git a/assets/rdge-compiled.js b/assets/rdge-compiled.js
index d1040d73..caf58147 100755
--- a/assets/rdge-compiled.js
+++ b/assets/rdge-compiled.js
@@ -235,15 +235,15 @@ input.onMouseMove=function(a){for(var b=0,f=input.eventHandlers.length;b<f;){if(
 this.stateTop>0?this.stateTop-1:0;this.stateStack[this.stateTop]&&this.stateStack[this.stateTop].ReInit()};this.PopAll=function(){for(;this.stateStack[this.stateTop]!=null;)this.PopState()};this.tick=function(a){this.stateStack[this.stateTop]!=null&&(this.stateStack[this.stateTop].Update(a),this.stateStack[this.stateTop].Resize(),this.stateStack[this.stateTop].Draw())}};g_enableBenchmarks=!0;
 function Engine(){this._assetPath="assets/";this.sceneMap=[];this.stateTop=void 0;this.lastWindowWidth=window.innerWidth;this.lastWindowHeight=window.innerHeight;this.lightManager=this.defaultContext=null;clearColor=[0,0,0,0];panelObjectManager=new objectManager;this.initializeComplete=!1;this.RDGECanvas=null;this.canvasToRendererMap={};this.canvasNameToStateStack={};this.canvasCtxList=[];invalidObj=/([()]|function)/;isValidObj=function(a){return invalidObj.test(a)?(window.console.error("invalid object name passed to RDGE, "+
 a+" - looks like a function"),!1):!0};contextDef=function(){this.startUpState=this.ctxStateManager=this.renderer=this.id=null;this.sceneGraphMap=[];this.currentScene=null;this.getScene=function(){return this.sceneGraphMap[this.currentScene]};this.debug={frameCounter:0,mat4CallCount:0}};this.ctxMan=contextManager=new objectManager;contextManager.currentCtx=null;contextManager._addObject=contextManager.addObject;contextManager.contextMap={};contextManager.addObject=function(a){this.contextMap[a.id]=
-a;return this._addObject(a)};contextManager.start=function(){for(var a=this.objects.length,b=0;b<a;++b)contextManager.currentCtx=this.objects[b],this.objects[b].ctxStateManager.PushState(this.objects[b].startUpState)};contextManager.forEach=function(a){for(var b=this.objects.length,f=0;f<b;++f)a(this.objects[f])};this.getContext=function(a){return a?contextManager.contextMap[a]:contextManager.currentCtx};this.setContext=function(a){contextManager.currentCtx=contextManager.contextMap[a]};this.tickContext=
-function(a){var b=contextManager.currentCtx;contextManager.currentCtx=contextManager.contextMap[a];this.objects[i].ctxStateManager.tick(dt);contextManager.currentCtx=b};this.remapAssetFolder=function(a){var b=a.indexOf("assets/"),f=a;b>=0&&(f=a.substr(b+7),f=this._assetPath+f);return f}}
+a;return this._addObject(a)};contextManager.start=function(){for(var a=this.objects.length,b=0;b<a;++b)contextManager.currentCtx=this.objects[b],this.objects[b].ctxStateManager.PushState(this.objects[b].startUpState)};contextManager.forEach=function(a){for(var b=this.objects.length,f=0;f<b;++f)a(this.objects[f])};this.getContext=function(a){return a?contextManager.contextMap[a]:contextManager.currentCtx};this.clearContext=function(a){contextManager.contextMap[a]=void 0};this.setContext=function(a){contextManager.currentCtx=
+contextManager.contextMap[a]};this.tickContext=function(a){var b=contextManager.currentCtx;contextManager.currentCtx=contextManager.contextMap[a];this.objects[i].ctxStateManager.tick(dt);contextManager.currentCtx=b};this.remapAssetFolder=function(a){var b=a.indexOf("assets/"),f=a;b>=0&&(f=a.substr(b+7),f=this._assetPath+f);return f}}
 Engine.prototype.init=function(a,b,f){this.GlInit(f);globalParamFuncSet=function(a){this.data=a.data;this.type=a.type;this.set=function(a){for(var b=this.data?this.data.length:0,f=0;f<b;++f)this.data[f]=a[f]};this.get=function(){return this.data.length==void 0?this.data:this.data.slice()}};this.lightManager=new LightManager(rdgeGlobalParameters.rdge_lights);for(var g in rdgeGlobalParameters)if(g!="rdge_lights")rdgeGlobalParameters[g]=new globalParamFuncSet(rdgeGlobalParameters[g]);else{var a=rdgeGlobalParameters[g],
 h;for(h in a)rdgeGlobalParameters[h]=new globalParamFuncSet(a[h])}this.lastWindowWidth=window.innerWidth;this.lastWindowHeight=window.innerHeight;this.defaultContext=new RenderContext;this.defaultContext.uniforms=[{name:"u_matAmbient",value:[0.02,0.02,0.02,1]},{name:"u_matDiffuse",value:[1,1,1,1]},{name:"u_matSpecular",value:[1,1,1,1]},{name:"u_matShininess",value:[128]},{name:"u_matEmission",value:[0,0,0,1]}];contextManager.start();this.initializeComplete=!0};Engine.prototype.Shutdown=function(){this.PopAll()};
 Engine.prototype.GlInit=function(){for(var a=document.getElementsByTagName("canvas"),b=a.length,f=0;f<b;++f){var g;a[f].getAttribute("rdge")=="true"&&(g=a[f],this.registerCanvas(g))}};Engine.prototype.loadScene=function(a){var b="assets_web/mesh/"+a+".json";contextManager.currentCtx.stateMan.currentState().name=="RunState"&&(contextManager.currentCtx.stateMan.PushState(contextManager.currentCtx.stateMan.RDGEInitState),contextManager.currentCtx.loadScene(b,a))};Engine.prototype.getScene=function(a){return contextManager.currentCtx.sceneGraphMap[a]};
 Engine.prototype.AddScene=function(a,b){contextManager.currentCtx.sceneGraphMap[a]=b;contextManager.currentCtx.currentScene=a};Engine.prototype.createRDGEPanel=function(){var a=new utilDbgPanel("tools","WebGL Viewer Settings");a.appendLabel("","");return panelObjectManager.addObject(a)};Engine.prototype.getRDGEPanel=function(a){return panelObjectManager.handleToObject(a)};
 Engine.prototype.registerCanvas=function(a,b){if(!a||!this.getContext(a.rdgeid)){a.renderer=new _renderer(a);this.canvasToRendererMap[a.rdgeid]=a;a.renderer.id=a.rdgeid;var f=new stateManager,g=new contextDef;g.id=a.rdgeid;g.renderer=a.renderer;g.ctxStateManager=f;g.fpsTracker=new fpsTracker(a.rdgeid);g.renderer.mvMatrix=mat4.identity();g.renderer.invMvMatrix=mat4.identity();g.renderer.projectionMatrix=mat4.identity();g.renderer.normalMatrix=mat4.identity();a.rdgeCtxHandle=contextManager.addObject(g);
 contextManager.currentCtx=g;var h;if(b)h=b;else{var l=a.getAttribute("rdgerun");if(l){if(!isValidObj(l))return;try{h=new (eval(l))}catch(n){window.console.error('The provided RDGE state object "'+l+'" is not defined')}}else h={},validateUserState(h)}l=a.getAttribute("rdgescene");f.RDGEInitState=new LoadState(h,g);f.RDGERunState=new RunState(h,g);validateUserState(h);l?(f.RDGEInitState.sceneName=l,f.PushState(f.RDGERunState,"noInit"),g.startUpState=f.RDGEInitState):g.startUpState=f.RDGERunState;this.initializeComplete&&
-g.ctxStateManager.PushState(g.startUpState)}};Engine.prototype.unregisterCanvas=function(a){stat.closePage(a.rdgeid+"_fps");contextManager.removeObject(a.rdgeCtxHandle)};Engine.prototype.getCanvas=function(a){return this.canvasToRendererMap[a]};nodeIdGen={counter:0};nodeIdGen.getId=function(){return"gen_"+nodeIdGen.counter++};function createTransformNode(a){node={name:a};node.transformNodeTemplate=new transformNodeTemplate(node);return node}function createMaterialNode(a){node={name:a};node.materialNodeTemplate=new materialNodeTemplate(node);return node}
+g.ctxStateManager.PushState(g.startUpState)}};Engine.prototype.unregisterCanvas=function(a){stat.closePage(a.rdgeid+"_fps");contextManager.removeObject(a.rdgeCtxHandle);this.clearContext(a.rdgeid)};Engine.prototype.getCanvas=function(a){return this.canvasToRendererMap[a]};nodeIdGen={counter:0};nodeIdGen.getId=function(){return"gen_"+nodeIdGen.counter++};function createTransformNode(a){node={name:a};node.transformNodeTemplate=new transformNodeTemplate(node);return node}function createMaterialNode(a){node={name:a};node.materialNodeTemplate=new materialNodeTemplate(node);return node}
 function createMeshNode(a,b){meshNode={mesh:{},meshNodeTemplate:{}};var f=g_Engine.getContext().renderer;b.built||f.createPrimitive(b);var g=g_meshMan.getModelByName(a);if(g)f.buffers[g.primitive.buffersID]||f.createPrimitive(g.primitive);else return meshNode.mesh.meshNodeTemplate=new meshNodeTemplate(meshNode.mesh,b,a),g_meshMan.modelMap[a]=meshNode.mesh,meshNode;meshNode.mesh.meshNodeTemplate=new meshNodeTemplate(meshNode.mesh,g.primitive,a);return meshNode}
 function createLightNode(a){node={name:a};node.lightNodeTemplate=new lightNodeTemplate(node);return node}function createScreenQuadNode(){var a=createTransformNode();a.attachMeshNode("screenQuad",createScreenAlignedQuad());return a}function verifyTransformNode(a){if(a.transformNodeTemplate==void 0)a.transformNodeTemplate=new transformNodeTemplate(a)}function verifyMaterialNode(a){if(a.materialNodeTemplate==void 0)a.materialNodeTemplate=new materialNodeTemplate(a)}
 function verifyLightNode(a){if(a.lightNodeTemplate==void 0)a.lightNodeTemplate=new lightNodeTemplate(a)}
diff --git a/assets/shaders/Paris.frag.glsl b/assets/shaders/Paris.frag.glsl
new file mode 100644
index 00000000..690b1453
--- /dev/null
+++ b/assets/shaders/Paris.frag.glsl
@@ -0,0 +1,68 @@
+#ifdef GL_ES
+precision highp float;
+#endif
+
+uniform sampler2D u_tex0;
+uniform float u_time;
+uniform vec2 u_resolution;
+const float PI = 3.1415926535897932;
+
+//speed
+
+const float speed = 0.1;
+const float speed_x = 0.075;
+const float speed_y = 0.000;
+
+// geometry
+const float intensity = 1.5;
+const int steps = 8;
+//const float frequency = 4.0;
+const float frequency = 2.0;
+const int angle = 7; // better when a prime
+
+// reflection and emboss
+const float delta = 20.;
+const float intence = 400.;
+const float emboss = 0.3;
+
+//---------- crystals effect
+
+  float col(vec2 coord)
+  {
+    float delta_theta = 2.0 * PI / float(angle);
+    float col = 0.0;
+    float theta = 0.0;
+    for (int i = 0; i < steps; i++)
+    {
+      vec2 adjc = coord;
+      theta = delta_theta*float(i);
+      adjc.x += cos(theta)*u_time*speed + u_time * speed_x;
+      adjc.y -= sin(theta)*u_time*speed - u_time * speed_y;
+      col = col + cos( (adjc.x*cos(theta) - adjc.y*sin(theta))*frequency)*intensity;
+    }
+
+    return cos(col);
+  }
+
+//---------- main
+
+void main(void)
+{
+vec2 p = (gl_FragCoord.xy) / u_resolution.xy, c1 = p, c2 = p;
+float cc1 = col(c1);
+
+c2.x += u_resolution.x/delta;
+float dx = emboss*(cc1-col(c2))/delta;
+
+c2.x = p.x;
+c2.y += u_resolution.y/delta;
+float dy = emboss*(cc1-col(c2))/delta;
+
+c1.x += dx;
+c1.y = -(c1.y+dy);
+
+float alpha = 1.+dot(dx,dy)*intence;
+gl_FragColor = texture2D(u_tex0,c1)*(alpha);
+// gl_FragColor = vec4(col(p),0,0,1);
+
+}
-- 
cgit v1.2.3