Added more materials/canvas2D drawing to runtime.

3 files changed, 145 insertions, 10 deletions

diff --git a/js/helper-classes/RDGE/runtime/GLRuntime.js b/js/helper-classes/RDGE/runtime/GLRuntime.js
index d86506ad..e0fff4a8 100644
--- a/js/helper-classes/RDGE/runtime/GLRuntime.js
+++ b/js/helper-classes/RDGE/runtime/GLRuntime.js
@@ -16,6 +16,7 @@ function GLRuntime( canvas, importStr )
     // Instance variables
     ///////////////////////////////////////////////////////////////////////
         this._canvas            = canvas;
+        this._context           = null;
         this._importStr         = importStr;
 
         this.renderer           = null;
@@ -27,6 +28,8 @@ function GLRuntime( canvas, importStr )
         this._firstRender       = true;
         this._initialized       = false;
 
+        this._useWebGL          = false;
+
         // view parameters
         this._fov = 45.0;
         this._zNear = 0.1;
@@ -49,6 +52,14 @@ function GLRuntime( canvas, importStr )
         this.getAspect                  = function()            {  return this._aspect;                 }
         this.getViewDistance    = function()            {  return this._viewDist;               }
 
+        this.get2DContext               = function()            {  return this._context;                }
+
+        this.getViewportWidth   = function()            {  return this._canvas.width;   }
+        this.getViewportHeight  = function()            {  return this._canvas.height;  }
+
+    ///////////////////////////////////////////////////////////////////////
+        // accessors
+    ///////////////////////////////////////////////////////////////////////
         this.loadScene = function()
         {
                 // parse the data
@@ -56,6 +67,8 @@ function GLRuntime( canvas, importStr )
                 var index = importStr.indexOf( "scenedata: " );
                 if (index >= 0)
                 {
+                        this._useWebGL = true;
+
                         var rdgeStr = importStr.substr( index+11 );
                         var endIndex = rdgeStr.indexOf( "endscene\n" );
                         if (endIndex < 0)  throw new Error( "ill-formed WebGL data" );
@@ -67,6 +80,12 @@ function GLRuntime( canvas, importStr )
                         this.linkMaterials( this._geomRoot );
                         this.initMaterials();
                 }
+                else
+                {
+                        this._context = this._canvas.getContext( "2d" );
+                        this.importObjects( importStr );
+                        this.render();
+                }
         }
 
         this.init = function()
@@ -230,6 +249,7 @@ function GLRuntime( canvas, importStr )
         this.addObject = function( obj, parent )
         {
                 if (!obj)  return;
+                obj.setWorld( this );
 
                 if (parent == null)
                         this._geomRoot = obj;
@@ -290,11 +310,35 @@ function GLRuntime( canvas, importStr )
                 }
         }
 
-        // start RDGE
-        var id = canvas.getAttribute( "data-RDGE-id" ); 
-        canvas.rdgeid = id;
-        g_Engine.registerCanvas(canvas, this);
-        RDGEStart( canvas );
+        this.render = function( obj )
+        {
+                if (!obj)  obj = this._geomRoot;
+                obj.render();
+
+                if (obj.children)
+                {
+                        var nKids = obj.children.length;
+                        for (var i=0;  i<nKids;  i++)
+                        {
+                                var child = obj.children[i];
+                                if (child)
+                                        this.render( child );
+                        }
+                }
+        }
+
+        // start RDGE or load Canvas 2D objects
+        if (this._useWebGL)
+        {
+                var id = canvas.getAttribute( "data-RDGE-id" ); 
+                canvas.rdgeid = id;
+                g_Engine.registerCanvas(canvas, this);
+                RDGEStart( canvas );
+        }
+        else
+        {
+                this.loadScene();
+        }
 }
 
 
diff --git a/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js b/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js
index da941b56..2539abc1 100644
--- a/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js
+++ b/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js
@@ -37,7 +37,10 @@ function RuntimeGeomObj()
     // Property accessors
     ///////////////////////////////////////////////////////////////////////
 
-        this.geomType   = function()                             {  return this.GEOM_TYPE_UNDEFINED;    }
+        this.geomType   = function()            {  return this.GEOM_TYPE_UNDEFINED;     }
+
+        this.setWorld   = function(w)           {  this._world = w;                                     }
+        this.getWorld   = function()            {  return this._world;                          }
 
     ///////////////////////////////////////////////////////////////////////
     // Methods
@@ -76,8 +79,22 @@ function RuntimeGeomObj()
                         var materialType = getPropertyFromString( "material: ", importStr );
                         switch (materialType)
                         {
-                                case "flat":    mat = new RuntimeFlatMaterial();                break;
-                                case "pulse":   mat = new RuntimePulseMaterial();               break;
+                                case "flat":                    mat = new RuntimeFlatMaterial();                                break;
+
+                                case "radialGradient":
+                                case "linearGradient":  mat = new RuntimeLinearGradientMaterial();              break;
+
+                                case "water":
+                                case "tunnel":
+                                case "reliefTunnel":
+                                case "squareTunnel":
+                                case "twist":
+                                case "fly":
+                                case "julia":
+                                case "mandel":
+                                case "star":
+                                case "zinvert":
+                                case "pulse":                   mat = new RuntimePulseMaterial();                               break;
 
                                 default:
                                         console.log( "material type: " + materialType + " is not supported" );
@@ -146,8 +163,8 @@ function RuntimeRectangle()
         {
                 // various declarations
                 var pt,  rad,  ctr,  startPt, bPts;
-                var width  = Math.round(this.getWidth()),
-                        height = Math.round(this.getHeight());
+                var width  = Math.round(this._width),
+                        height = Math.round(this._height);
 
                 pt = [inset, inset];    // top left corner
 
diff --git a/js/helper-classes/RDGE/runtime/RuntimeMaterial.js b/js/helper-classes/RDGE/runtime/RuntimeMaterial.js
index 2ba3006e..5fe29f93 100644
--- a/js/helper-classes/RDGE/runtime/RuntimeMaterial.js
+++ b/js/helper-classes/RDGE/runtime/RuntimeMaterial.js
@@ -90,6 +90,7 @@ function RuntimePulseMaterial()
 
         this.import = function( importStr )
         {
+                this._texMap = getPropertyFromString( "texture: ",      importStr );
         }
 
         this.init = function()
@@ -137,4 +138,77 @@ function RuntimePulseMaterial()
         }
 }
 
+function RuntimeRadialGradientMaterial()
+{
+        // inherit the members of RuntimeMaterial
+        this.inheritedFrom = RuntimeMaterial;
+        this.inheritedFrom();
+
+        // setup default values
+        this._color1 = [0.25,0,0,1];  this._colorStop1 = 0.0;
+        this._color2 = [0,0.25,0,1];  this._colorStop2 = 0.3;
+        this._color3 = [0,0.25,0,1];  this._colorStop3 = 0.6;
+        this._color4 = [0,0.25,0,1];  this._colorStop4 = 1.0;
+
+        this.init = function()
+        {
+                var material = this._materialNode;