From 2f66a9ab38f761b7796800bb37f8146f140db40b Mon Sep 17 00:00:00 2001
From: hwc487
Date: Mon, 26 Mar 2012 11:31:23 -0700
Subject: WebGL & Canvas as data for texture maps.

---
 js/lib/drawing/world.js                      |   1 +
 js/lib/rdge/materials/bump-metal-material.js |  25 +-
 js/lib/rdge/materials/material.js            |  23 ++
 js/lib/rdge/materials/pulse-material.js      |  42 ++-
 js/lib/rdge/texture.js                       | 377 +++++++++++----------------
 5 files changed, 211 insertions(+), 257 deletions(-)

(limited to 'js/lib')

diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index d314760b..e3818178 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -327,6 +327,7 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) {
 		var rtnVal = false;
 		if (root) {
 			rtnVal = this.hHasAnimatedMaterials( root );
+            this._hasAnimatedMaterials = rtnVal;
         }
 
 		return rtnVal;
diff --git a/js/lib/rdge/materials/bump-metal-material.js b/js/lib/rdge/materials/bump-metal-material.js
index 9c9a189a..a3ef9d37 100755
--- a/js/lib/rdge/materials/bump-metal-material.js
+++ b/js/lib/rdge/materials/bump-metal-material.js
@@ -146,33 +146,10 @@ var BumpMetalMaterial = function BumpMetalMaterial() {
             var world = this.getWorld();
             var tex = new Texture( world );
             this._diffuseTextureObj = tex;
-            tex.loadFromCanvas( world.getCanvas() );
+            tex.loadFromCanvas( this._diffuseWorld.getCanvas() );
         }
     }
 
-    this.findWorld = function( id,  elt )
-    {
-        if (elt.id && elt.id === id)
-        {
-            if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld)
-            {
-                var world = elt.elementModel.shapeModel.GLWorld;
-                return world;
-            }
-        }
- 
-		if (elt.children)
-		{
-			var nKids = elt.children.length;
-			for (var i=0;  i<nKids;  i++)
-			{
-				var child = elt.children[i];
-				var world = this.findWorld( id, child );
-                if (world)  return world;
-			}
-		}
-   }
-
 	this.updateTexture = function( index )
 	{
 		var material = this._materialNode;
diff --git a/js/lib/rdge/materials/material.js b/js/lib/rdge/materials/material.js
index c1d13b15..157fa7db 100755
--- a/js/lib/rdge/materials/material.js
+++ b/js/lib/rdge/materials/material.js
@@ -252,6 +252,29 @@ var Material = function GLMaterial( world ) {
 		return tex;
 	};
 
+    this.findWorld = function( id,  elt )
+    {
+        if (elt.id && elt.id === id)
+        {
+            if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld)
+            {
+                var world = elt.elementModel.shapeModel.GLWorld;
+                return world;
+            }
+        }
+ 
+		if (elt.children)
+		{
+			var nKids = elt.children.length;
+			for (var i=0;  i<nKids;  i++)
+			{
+				var child = elt.children[i];
+				var world = this.findWorld( id, child );
+                if (world)  return world;
+			}
+		}
+   }
+
 	this.export = function() {
 		// this function should be overridden by subclasses
 		var exportStr = "material: " + this.getShaderName() + "\n" + "endMaterial\n";
diff --git a/js/lib/rdge/materials/pulse-material.js b/js/lib/rdge/materials/pulse-material.js
index 2075d1ff..5461c5fb 100644
--- a/js/lib/rdge/materials/pulse-material.js
+++ b/js/lib/rdge/materials/pulse-material.js
@@ -5,19 +5,28 @@
  </copyright> */
 
 var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser;
+var Texture = require("js/lib/rdge/texture").Texture;
 var Material = require("js/lib/rdge/materials/material").Material;
 ///////////////////////////////////////////////////////////////////////
 // Class GLMaterial
 //      RDGE representation of a material.
 ///////////////////////////////////////////////////////////////////////
-var PulseMaterial = function PulseMaterial() {
+var PulseMaterial = function PulseMaterial()
+{
+    var MaterialLibrary = require("js/models/materials-model").MaterialsModel;
+
+   // initialize the inherited members
+    this.inheritedFrom = Material;
+    this.inheritedFrom();
+   
     ///////////////////////////////////////////////////////////////////////
     // Instance variables
     ///////////////////////////////////////////////////////////////////////
 	this._name = "PulseMaterial";
 	this._shaderName = "pulse";
 
-	this._texMap = 'assets/images/cubelight.png';
+	//this._texMap = 'assets/images/cubelight.png';
+	this._texMap = 'texture';
 
 	this._time = 0.0;
 	this._dTime = 0.01;
@@ -109,6 +118,16 @@ var PulseMaterial = function PulseMaterial() {
 			this._shader['default'].u_time.set( [this._time] );
         }
 
+        // check if the texture uses a canvas as the source
+        var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
+        var root = viewUtils.application.ninja.currentDocument.documentRoot;
+        var texMapName = this._propValues[this._propNames[0]];
+        var texWorld = this.findWorld( texMapName, root );
+        if (texWorld)
+        {
+            this._glTex = new Texture( this.getWorld() );
+            this._glTex.loadFromCanvas( texWorld.getCanvas() );
+        }
 
 		// set the shader values in the shader
 		this.updateTexture();
@@ -122,9 +141,18 @@ var PulseMaterial = function PulseMaterial() {
 			var technique = material.shaderProgram['default'];
 			var renderer = g_Engine.getContext().renderer;
 			if (renderer && technique) {
-				var texMapName = this._propValues[this._propNames[0]];
 				var wrap = 'REPEAT',  mips = true;
-				var tex = this.loadTexture( texMapName, wrap, mips );
+                var tex;
+                if (this._glTex)
+                {
+                    this._glTex.rerender();
+                    tex = this._glTex.getTexture();
+                }
+                else
+                {
+                    var texMapName = this._propValues[this._propNames[0]];
+				    tex = this.loadTexture( texMapName, wrap, mips );
+                }
 
 				if (tex) {
 					technique.u_tex0.set( tex );
@@ -138,6 +166,9 @@ var PulseMaterial = function PulseMaterial() {
 		var material = this._materialNode;
 		if (material)
 		{
+            if (this._glTex && this._glTex.isAnimated())
+                this.updateTexture();
+
 			var technique = material.shaderProgram['default'];
 			var renderer = g_Engine.getContext().renderer;
 			if (renderer && technique) {
@@ -279,7 +310,8 @@ var pulseMaterialDef =
 	}
 };
 
-PulseMaterial.prototype = new Material();
+// doing the inheritance here introtudes bugs.  Local instance variables are overwritten in the base class
+//PulseMaterial.prototype = new Material();
 
 if (typeof exports === "object") {
     exports.PulseMaterial = PulseMaterial;
diff --git a/js/lib/rdge/texture.js b/js/lib/rdge/texture.js
index c72864b8..b349ee62 100644
--- a/js/lib/rdge/texture.js
+++ b/js/lib/rdge/texture.js
@@ -15,267 +15,188 @@ function Texture( dstWorld )
     ///////////////////////////////////////////////////////////////////////
     // Instance variables
     ///////////////////////////////////////////////////////////////////////
-	this._texture;
+    this._texture;
 
-	// texture attributes
-	this._texMapName;
-	this._wrap;
-	this._mips;
+    // texture attributes
+    this._texMapName;
+    this._wrap;
+    this._mips;
 
-	this._srcCanvas;	// the canvas generating the texture map.
-	this._dstWorld;		// the world that will use the texture map
-	this._dstWorld = dstWorld;
+    this._srcCanvas;	// the canvas generating the texture map.
+    this._dstWorld;		// the world that will use the texture map
+    this._dstWorld = dstWorld;
 
     ///////////////////////////////////////////////////////////////////////
     // Property Accessors
     ///////////////////////////////////////////////////////////////////////
-	this.getTexture		= function()	{  return this._texture;	}
+    this.getTexture		= function()	{  return this._texture;	}
 
-	this.setSrcWorld	= function(w)	{  this._srcWorld = w;		}
-	this.getSrcWorld	= function()	{  return this._srcWorld;	}
+    this.setSrcWorld	= function(w)	{  this._srcWorld = w;		}
+    this.getSrcWorld	= function()	{  return this._srcWorld;	}
 
-	this.setDstWorld	= function(w)	{  this._dstWorld = w;		}
-	this.getDstWorld	= function()	{  return this._dstWorld;	}
+    this.setDstWorld	= function(w)	{  this._dstWorld = w;		}
+    this.getDstWorld	= function()	{  return this._dstWorld;	}
+
+    this.isAnimated     = function()    {  return this._isAnimated; }
 
     ///////////////////////////////////////////////////////////////////////
     // Methods
     ///////////////////////////////////////////////////////////////////////
 
-	this.loadFromFile = function( texMapName,  wrap,  mips )
-	{
-		var tex = this._texture;
-		this._srcCanvas = null;
-
-		// only load if something has changed
-		if (this._texMapName !== texMapName)	// does RDGE allow us to change wrap or mips?
-		{
-			this._texMapName = texMapName.slice();
-			this._wrap = wrap;
-			this._mips = mips;
-
-			var dstWorld = this.getDstWorld();
-			if (dstWorld)
-			{
-				var renderer = dstWorld.getRenderer();
-				tex = renderer.getTextureByName(texMapName, wrap, mips );
-				this._texture = tex;
-				dstWorld.textureToLoad( tex );
-			}
-		}
-
-		return tex;
-	}
+    this.loadFromFile = function( texMapName,  wrap,  mips )
+    {
+        var tex = this._texture;
+        this._srcCanvas = null;
+
+        // only load if something has changed
+        if (this._texMapName !== texMapName)	// does RDGE allow us to change wrap or mips?
+        {
+            this._texMapName = texMapName.slice();
+            this._wrap = wrap;
+            this._mips = mips;
+
+            var dstWorld = this.getDstWorld();
+            if (dstWorld)
+            {
+                var renderer = dstWorld.getRenderer();
+                tex = renderer.getTextureByName(texMapName, wrap, mips );
+                this._texture = tex;
+                dstWorld.textureToLoad( tex );
+            }
+        }
+
+        return tex;
+    }
 
     var __texCounter = 0;
+    this.loadFromCanvas = function( srcCanvas,  wrap, mips )
+    {
+        this._srcCanvas = srcCanvas;
 
-    /*
-	this.loadFromCanvas = function( srcCanvas,  wrap, mips )
-	{
-		this._texMapName = "GLTexture_" + __texCounter;
-		__texCounter++;
-
-		//if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld)
-		var world = this.getDstWorld();
-		var renderer = world.getRenderer();
+        this._texMapName = "GLTexture_" + __texCounter;
+        __texCounter++;
 
-		// set default values for wrap and mips
+        // 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 = 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;
-		var dstCanvas = doc.createElement("canvas");
-		dstCanvas.width = width;
-		dstCanvas.height = height;
-		var dstCtx = dstCanvas.getContext("2d");
-
-		var tex;
-		var srcCtx = srcCanvas.getContext("2d");
-		if (srcCtx)
-		{
-			tex = renderer.getTextureByName(this._texMapName, wrap, mips );
-			imageData = srcCtx.getImageData( 0, 0, width, height );
-		    dstCtx.putImageData( imageData, 0, 0 );
-		}
-		else
-		{
-			tex = renderer.getTextureByName(this._texMapName, wrap, mips );
-			//tex = world.getGLContext().createTexture();
-			tex.image = new Image;
-			tex.wrap = wrap;
-			tex.mips = mips;
-
-			srcCtx = srcCanvas.getContext("experimental-webgl");
-			if (srcCtx)
-			{
-//				var data = new Uint8Array(width * height * 4);
-//				srcCtx.readPixels(0, 0, width, height, srcCtx.RGBA, srcCtx.UNSIGNED_BYTE, data);
-//				console.log( "pixel 0: " + data[width+0] + ", " + data[width+1] + ", " + data[width+2] + ", " + data[width+3] );
-//						
-//				//imageData.data = data;
-//				imageData = dstCtx.createImageData(width, height);
-//				var nBytes = width*height*4;
-//				for (var i=0;  i<nBytes;  i++)
-//					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] );
-                }
+        // 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;
 
-                dstCtx.drawImage(srcCanvas, 0, 0);
-			}
-		}
+        // 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");
 
-		/////////////////
-		tex.image = dstCanvas;
+        // cache whether this is a 2D canvas or 3D canvas
+        var srcCtx = srcCanvas.getContext("2d");
+        this._is3D = false;
+        if (!srcCtx)  this._is3D = true;
 
-		this._texture = tex;
-		return tex;
-	}
-    */
+        this.rerender();
 
-    this.loadFromCanvas = function( srcCanvas,  wrap, mips )
-	{
-		this._srcCanvas = srcCanvas;
+        return tex;
+    }
 
-		this._texMapName = "GLTexture_" + __texCounter;
-		__texCounter++;
+    this.rerender = function()
+    {
+        if (!this._srcCanvas)
+        {
+            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 );
+            //width = 64;  height = 64;
+        }
+
+        // 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 );
+            renderCtx.putImageData( imageData, 0, 0 );
+        }
+        else
+        {
+            srcCtx = srcCanvas.getContext("experimental-webgl");
+            if (srcCtx)
+            {
+                renderCtx.drawImage(srcCanvas, 0, 0);
+//				var data = new Uint8Array(width * height * 4);
+//				srcCtx.readPixels(0, 0, width, height, srcCtx.RGBA, srcCtx.UNSIGNED_BYTE, data);
+//				imageData = renderCtx.createImageData(width, height);
+//				var nBytes = width*height*4;
+//				for (var i=0;  i<nBytes;  i++)
+//					imageData.data[i] = data[i];
+//		        renderCtx.putImageData( imageData, 0, 0 );
 
-		// 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.rerender = function()
-	{
-		if (!this._srcCanvas)
-		{
-			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 );
-		}
-        width = 64;  height = 64;
-
-		// 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)
-			{
-				var data = new Uint8Array(width * height * 4);
-				srcCtx.readPixels(0, 0, width, height, srcCtx.RGBA, srcCtx.UNSIGNED_BYTE, data);
-						
-				imageData = renderCtx.createImageData(width, height);
-				var nBytes = width*height*4;
-				for (var i=0;  i<nBytes;  i++)
-					imageData.data[i] = data[i];
-                var nPrint = nBytes;
-                if (nPrint > 1000)  nPrint = 1000;
-                for (var i=0; i<nPrint;  i++)
-                    console.log( " " + data[i] );
-			}
-		}
-		renderCtx.putImageData( imageData, 0, 0 );
-
-		/////////////////
-		tex.image = renderCanvas;
-		renderer.commitTexture( tex );
-
-		return tex;
-    }
+        /////////////////
+        tex.image = renderCanvas;
+        renderer.commitTexture( tex );
 
+        return tex;
+}
  
-	this.isPowerOfTwo = function(x)
-	{
-		return (x & (x - 1)) == 0;
-	}
+    this.isPowerOfTwo = function(x)
+    {
+        return (x & (x - 1)) == 0;
+    }
  
-	this.nextHighestPowerOfTwo = function(x)
-	{
-		--x;
-		for (var i = 1; i < 32; i <<= 1) {
-			x = x | x >> i;
-		}
-		return x + 1;
-	}
+    this.nextHighestPowerOfTwo = function(x)
+    {
+        --x;
+        for (var i = 1; i < 32; i <<= 1) {
+            x = x | x >> i;
+        }
+        return x + 1;
+    }
 }
 
 if (typeof exports === "object") {
-- 
cgit v1.2.3