textures

2 files changed, 160 insertions, 15 deletions

diff --git a/js/lib/rdge/materials/bump-metal-material.js b/js/lib/rdge/materials/bump-metal-material.js
index ccd8e3ca..9c9a189a 100755
--- a/js/lib/rdge/materials/bump-metal-material.js
+++ b/js/lib/rdge/materials/bump-metal-material.js
@@ -20,10 +20,13 @@ var BumpMetalMaterial = function BumpMetalMaterial() {
         this._shaderName = "bumpMetal";
 
         this._lightDiff = [0.3, 0.3, 0.3, 1.0];
-        //this._diffuseTexture = "assets/images/metal.png";
+        
+    //this._diffuseTexture = "assets/images/metal.png";
         this._diffuseTexture = "texture";
     this._diffuseWorld = null;      // the world that the texture is derived from (if there is one).
-        this._specularTexture = "assets/images/silver.png";
+    this._diffuseTextureObj = null;
+        
+    this._specularTexture = "assets/images/silver.png";
         this._normalTexture = "assets/images/normalMap.png";
 
     ///////////////////////////////////////////////////////////////////////
@@ -138,13 +141,20 @@ var BumpMetalMaterial = function BumpMetalMaterial() {
         var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
         var root = viewUtils.application.ninja.currentDocument.documentRoot;
         this._diffuseWorld = this.findWorld( this._diffuseTexture,  root );
+        if (this._diffuseWorld)
+        {
+            var world = this.getWorld();
+            var tex = new Texture( world );
+            this._diffuseTextureObj = tex;
+            tex.loadFromCanvas( world.getCanvas() );
+        }
     }
 
     this.findWorld = function( id,  elt )
     {
         if (elt.id && elt.id === id)
         {
-            if (elt.eltModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld)
+            if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld)
             {
                 var world = elt.elementModel.shapeModel.GLWorld;
                 return world;
@@ -174,7 +184,11 @@ var BumpMetalMaterial = function BumpMetalMaterial() {
                         {
                                 var texMapName = this._propValues[this._propNames[index]];
                                 var wrap = 'REPEAT',  mips = true;
-                                var tex = this.loadTexture( texMapName, wrap, mips );
+                                var tex;
+                if ((index === 1) && this._diffuseTextureObj)
+                    tex = this._diffuseTextureObj.getTexture();
+                else
+                    tex = this.loadTexture( texMapName, wrap, mips );
 
                                 if (tex)
                                 {
diff --git a/js/lib/rdge/texture.js b/js/lib/rdge/texture.js
index f9b3d4c3..28dc868a 100644
--- a/js/lib/rdge/texture.js
+++ b/js/lib/rdge/texture.js
@@ -66,18 +66,27 @@ function Texture( dstWorld )
                 return tex;
         }
 
+    var __texCounter = 0;
+
+    /*
         this.loadFromCanvas = function( srcCanvas,  wrap, mips )
         {
-                this._texMapName = "GLTexture_" + this.texCounter;
-                this.texCounter++;
+                this._texMapName = "GLTexture_" + __texCounter;
+                __texCounter++;
 
                 //if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld)
                 var world = this.getDstWorld();
                 var renderer = world.getRenderer();
 
+                // set default values for wrap and mips
+        if (wrap === undefined)
+            wrap = "REPEAT";
+        if (mips === undefined)
+            mips = true;
+
                 var imageData;
                 var width = srcCanvas.width,  height = srcCanvas.height;
-                width = 128;  height = 64;      // some even power of 2 for now...
+                width = 64;  height = 64;       // some even power of 2 for now...
 
                 // create a canvas to be used as the image for the texture map
                 var doc = srcCanvas.ownerDocument;
@@ -116,6 +125,13 @@ function Texture( dstWorld )
 //                                      imageData.data[i] = data[i];
 //                      dstCtx.putImageData( imageData, 0, 0 );
 
+                                var data = new Uint8Array(width * height * 4);
+                                srcCtx.readPixels(0, 0, width, height, srcCtx.RGBA, srcCtx.UNSIGNED_BYTE, data);
+                for (var i=1;  i<10;  i++)
+                {
+                                    console.log( "row " + i + ": " + data[i*4*width] + ", " + data[i*4*width+1] + ", " + data[i*4*width+2] + ", " + data[i*4*width+3] );
+                }
+
                 dstCtx.drawImage(srcCanvas, 0, 0);
                         }
                 }
@@ -127,19 +143,134 @@ function Texture( dstWorld )
                 this._texture = tex;
                 return tex;
         }
+    */
+
+    this.loadFromCanvas = function( srcCanvas,  wrap, mips )
+        {
+                this._srcCanvas = srcCanvas;
+
+                this._texMapName = "GLTexture_" + __texCounter;
+                __texCounter++;
+
+                // set default values for wrap and mips
+        if (wrap === undefined)
+            wrap = "REPEAT";
+        if (mips === undefined)
+            mips = true;
+
+                // we animate only if the source is an animated GLWorld
+                if (srcCanvas.elementModel && srcCanvas.elementModel.shapeModel  && srcCanvas.elementModel.shapeModel.GLWorld)
+                        this._isAnimated = srcCanvas.elementModel.shapeModel.GLWorld._hasAnimatedMaterials;
+
+                // create the texture
+                var world = this.getDstWorld();
+                tex = world.getGLContext().createTexture();
+                this._texture = tex;
+                tex.texparams = new _texparams(wrap, mips);     // defined in renderer.js
+                tex.image = new Image;
+
+                // create the canvas and context to render into
+                var doc = srcCanvas.ownerDocument;
+                this._renderCanvas = doc.createElement("canvas");
+
+                // cache whether this is a 2D canvas or 3D canvas
+                var srcCtx = srcCanvas.getContext("2d");
+                this._is3D = false;
+                if (!srcCtx)  this.is3D = true;
+
+                this.rerender();
+
+                return tex;
+        }
 
-        this.findPreviousWorld = function()
+        this.rerender = function()
         {
-                var prevWorld;
-                for ( var w in _worldStack )
+                if (!this._srcCanvas)
                 {
-                        world = _worldStack[w];
-                        if (world == this.getWorld())  return prevWorld;
-                        prevWorld = world;
+                        console.log( " no source canvas in GLTexture.rerender" );
+                        return;
+                }
+                var srcCanvas = this._srcCanvas;
+
+                var world = this.getDstWorld();
+                if (!world)
+                {
+                        console.log( "no world in GLTexture.rerender" );
+                        return;
+                }
+                var renderer = world.getRenderer();
+
+                var imageData;
+                var width = srcCanvas.width,  height = srcCanvas.height;
+                if (!this.isPowerOfTwo(width) || !this.isPowerOfTwo(height))
+                {
+                        width = this.nextHighestPowerOfTwo( width );
+                        height = this.nextHighestPowerOfTwo( height );
                 }
-        }
 
-        var texCounter = 0;
+                // create a canvas to be used as the image for the texture map
+                var doc = srcCanvas.ownerDocument;
+                var renderCanvas = this._renderCanvas;
+                if (!renderCanvas)
+                {
+                        console.log( "no render canvas in GLTexture.rerender" );
+                        return;
+                }
+                renderCanvas.width = width;
+                renderCanvas.height = height;
+                var renderCtx = renderCanvas.getContext("2d");
+
+                // create the texture
+                var tex = this._texture;
+                if (!tex)
+                {
+                        console.log( "no texture in GLTexture.rerender" );
+                        return;
+                }
+
+                var srcCtx;
+                if (!this.is3D)
+                {
+                        srcCtx = srcCanvas.getContext("2d");
+                        imageData = srcCtx.getImageData( 0, 0, width, height );
+                }
+                else
+                {
+                        srcCtx = srcCanvas.getContext("experimental-webgl");
+                        if (srcCtx)