Source: Core/Resources/Engine_Textures.js

  1. /*
  2.  * File: EngineCore_Texture.js 
  3.  * Provides support for loading and unloading of textures (images)
  4.  */
  6. /*jslint node: true, vars: true */
  7. /*global Image, Uint8Array, alert */
  8. /* find out more about jslint: http://www.jslint.com/help.html */
  10. "use strict";  // Operate in Strict mode such that variables must be declared before used!
  12. /**
  13.  * Static refrence to gEngine
  14.  * @type gEngine
  15.  */
  16. var gEngine = gEngine || { };
  18. /**
  19.  * Texture meta data
  20.  * @class TextureInfo
  21.  * @param {String} name Name of Texture
  22.  * @param {Number} w Width of Texture
  23.  * @param {Number} h Height of Texture
  24.  * @param {Number} id ID of Texture
  25.  * @returns {TextureInfo} New instance of TextureInfo
  26.  */
  27. function TextureInfo(name, w, h, id) {
  28.     this.mName = name;
  29.     this.mWidth = w;
  30.     this.mHeight = h;
  31.     this.mGLTexID = id;
  32.     this.mColorArray = null;
  33. }
  35. /**
  36.  * Provides support for loading and unloading of textures (images)
  37.  * @class gEngine.Textures
  38.  * @type gEngine.Textures
  39.  */
  40. gEngine.Textures = (function () {
  42.     /**
  43.      * This converts an image to the webGL texture format. <p>
  44.      * This should only be called once the texture is loaded.
  45.      * @memberOf gEngine.Textures
  46.      * @param {String} textureName name of the texture to be stored
  47.      * @param {String} image Image file path
  48.      * @returns {void}
  49.      */
  50.     var _processLoadedImage = function (textureName, image) {
  51.         var gl = gEngine.Core.getGL();
  53.         // Generate a texture reference to the webGL context
  54.         var textureID = gl.createTexture();
  56.         // bind the texture reference with the current texture functionality in the webGL
  57.         gl.bindTexture(gl.TEXTURE_2D, textureID);
  59.         // Load the texture into the texture data structure with descriptive info.
  60.         // Parameters:
  61.         //  1: Which "binding point" or target the texture is being loaded to.
  62.         //  2: Level of detail. Used for mipmapping. 0 is base texture level.
  63.         //  3: Internal format. The composition of each element. i.e. pixels.
  64.         //  4: Format of texel data. Must match internal format.
  65.         //  5: The data type of the texel data.
  66.         //  6: Texture Data.
  67.         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  69.         // Creates a mipmap for this texture.
  70.         gl.generateMipmap(gl.TEXTURE_2D);
  72.         // Tells WebGL that we are done manipulating data at the mGL.TEXTURE_2D target.
  73.         gl.bindTexture(gl.TEXTURE_2D, null);
  75.         var texInfo = new TextureInfo(textureName, image.naturalWidth, image.naturalHeight, textureID);
  76.         gEngine.ResourceMap.asyncLoadCompleted(textureName, texInfo);
  77.     };
  79.     /**
  80.      * Loads an texture so that it can be drawn.<p>
  81.      * If already in the map, will do nothing.
  82.      * @memberOf gEngine.Textures
  83.      * @param {String} textureName Texture to load from ResourceMap
  84.      * @returns {void}
  85.      */
  86.     var loadTexture = function (textureName) {
  87.         if (!(gEngine.ResourceMap.isAssetLoaded(textureName))) {
  88.             // Create new Texture object.
  89.             var img = new Image();
  91.             // Update resources in loading counter.
  92.             gEngine.ResourceMap.asyncLoadRequested(textureName);
  94.             // When the texture loads, convert it to the WebGL format then put
  95.             // it back into the mTextureMap.
  96.             img.onload = function () {
  97.                 _processLoadedImage(textureName, img);
  98.             };
  99.             img.src = textureName;
  100.         } else {
  101.             gEngine.ResourceMap.incAssetRefCount(textureName);
  102.         }
  103.     };
  105.     /**
  106.      * Remove the reference to allow associated memory <p>
  107.      * be available for subsequent garbage collection
  108.      * @memberOf gEngine.Textures
  109.      * @param {String} textureName Texture to unload from ResourceMap
  110.      * @returns {void}
  111.      */
  112.     var unloadTexture = function (textureName) {
  113.         var gl = gEngine.Core.getGL();
  114.         var texInfo = gEngine.ResourceMap.retrieveAsset(textureName);
  115.         gl.deleteTexture(texInfo.mGLTexID);
  116.         gEngine.ResourceMap.unloadAsset(textureName);
  117.     };
  119.     /**
  120.      * Activate gl.LINEAR_MIPMAP_LINEAR for texture <p>
  121.      * @memberOf gEngine.Textures
  122.      * @param {String} textureName Name of Texture
  123.      * @returns {void}
  124.      */
  125.     var activateTexture = function (textureName) {
  126.         var gl = gEngine.Core.getGL();
  127.         var texInfo = gEngine.ResourceMap.retrieveAsset(textureName);
  129.         // Binds our texture reference to the current webGL texture functionality
  130.         gl.activeTexture(gl.TEXTURE0);
  131.         gl.bindTexture(gl.TEXTURE_2D, texInfo.mGLTexID);
  132.         
  133.         // To prevent texture wrappings
  134.         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  135.         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  137.         // Handles how magnification and minimization filters will work.
  138.         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  139.         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
  141.         // For pixel-graphics where you want the texture to look "sharp" do the following:
  142.         // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  143.         // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  144.     };
  146.     /**
  147.      * Activate gl.LINEAR_MIPMAP_LINEAR for texture <p>
  148.      * texture 1 is always normal map for this game engine
  149.      * @memberOf gEngine.Textures
  150.      * @param {String} textureName Name of Texture
  151.      * @returns {void}
  152.      */
  153.     var activateNormalMap = function (textureName) {
  154.         var gl = gEngine.Core.getGL();
  155.         var texInfo = gEngine.ResourceMap.retrieveAsset(textureName);
  157.         // Binds our texture reference to the current webGL texture functionality
  158.         gl.activeTexture(gl.TEXTURE1);
  159.         gl.bindTexture(gl.TEXTURE_2D, texInfo.mGLTexID);
  160.         
  161.         // To prevent texture wrappings
  162.         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  163.         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  165.         // Handles how magnification and minimization filters will work.
  166.         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  167.         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
  168.     };
  170.     /**
  171.      * Deactivate the Textures and remove them from the GPU
  172.      * @memberOf gEngine.Textures
  173.      * @returns {void}
  174.      */
  175.     var deactivateTexture = function () {
  176.         var gl = gEngine.Core.getGL();
  177.         gl.bindTexture(gl.TEXTURE_2D, null);
  178.     };
  180.     /**
  181.      * Return the TextureInfo of Texture
  182.      * @memberOf gEngine.Textures
  183.      * @param {String} textureName Name of Texture
  184.      * @returns {TextureInfo} TextureInto of Texture to get TexttureInfo
  185.      */
  186.     var getTextureInfo = function (textureName) {
  187.         return gEngine.ResourceMap.retrieveAsset(textureName);
  188.     };
  190.     /**
  191.      * Return the Color Array of a texture
  192.      * @memberOf gEngine.Textures
  193.      * @param {String} textureName Name of Texture to get Color Array
  194.      * @returns {Float[]}
  195.      */
  196.     var getColorArray = function (textureName) {
  197.         var texInfo = getTextureInfo(textureName);
  198.         if (texInfo.mColorArray === null) {
  199.             // create a framebuffer bind it to the texture, and read the color content
  200.             // Hint from: http://stackoverflow.com/questions/13626606/read-pixels-from-a-webgl-texture 
  201.             var gl = gEngine.Core.getGL();
  202.             var fb = gl.createFramebuffer();
  203.             gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
  204.             gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texInfo.mGLTexID, 0);
  205.             if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
  206.                 var pixels = new Uint8Array(texInfo.mWidth * texInfo.mHeight * 4);
  207.                 gl.readPixels(0, 0, texInfo.mWidth, texInfo.mHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
  208.                 texInfo.mColorArray = pixels;
  209.             } else {
  210.                 alert("WARNING: Engine.Textures.getColorArray() failed!");
  211.             }
  212.             gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  213.             gl.deleteFramebuffer(fb);
  214.         }
  215.         return texInfo.mColorArray;
  216.     };
  218.     // Public interface for this object. Anything not in here will
  219.     // not be accessable.
  220.     var mPublic = {
  221.         loadTexture: loadTexture,
  222.         unloadTexture: unloadTexture,
  223.         activateTexture: activateTexture,
  224.         activateNormalMap: activateNormalMap,
  225.         deactivateTexture: deactivateTexture,
  226.         getTextureInfo: getTextureInfo,
  227.         getColorArray: getColorArray
  228.     };
  229.     return mPublic;
  230. }());