path: root/js/lib/rdge/texture.js

/* <copyright>
This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
(c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
</copyright> */

var Material = require("js/lib/rdge/materials/material").Material;

///////////////////////////////////////////////////////////////////////
// Class GLTexture
//      GL representation of a texture.
///////////////////////////////////////////////////////////////////////
function Texture( dstWorld )
{
    ///////////////////////////////////////////////////////////////////////
    // Instance variables
    ///////////////////////////////////////////////////////////////////////
	this._texture;

	// 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;

    ///////////////////////////////////////////////////////////////////////
    // Property Accessors
    ///////////////////////////////////////////////////////////////////////
	this.getTexture		= function()	{  return this._texture;	}

	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;	}

    ///////////////////////////////////////////////////////////////////////
    // 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;
	}

    var __texCounter = 0;

    /*
	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();

		// 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] );
                }

                dstCtx.drawImage(srcCanvas, 0, 0);
			}
		}


		/////////////////
		tex.image = dstCanvas;

		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.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 );
		}

		// 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];
			}
		}
		renderCtx.putImageData( imageData, 0, 0 );

		/////////////////
		tex.image = renderCanvas;
		renderer.commitTexture( tex );

		return tex;
    }

 
	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;
	}
}

if (typeof exports === "object") {
    exports.Texture = Texture;
}