Create texture from result of a FileReader

Babylon/Materials/textures/babylon.texture.js

@@ -8,7 +8,7 @@ var BABYLON;
 (function (BABYLON) {
     var Texture = (function (_super) {
         __extends(Texture, _super);
-        function Texture(url, scene, noMipmap, invertY, samplingMode) {
+        function Texture(url, scene, noMipmap, invertY, samplingMode, buffer, deleteBuffer) {
             if (typeof samplingMode === "undefined") { samplingMode = Texture.TRILINEAR_SAMPLINGMODE; }
             _super.call(this, scene);
             this.uOffset = 0;
@@ -24,6 +24,8 @@ var BABYLON;
             this._noMipmap = noMipmap;
             this._invertY = invertY;
             this._samplingMode = samplingMode;
+            this._buffer = buffer;
+            this._deleteBuffer = deleteBuffer;
 
             if (!url) {
                 return;
@@ -33,7 +35,10 @@ var BABYLON;
 
             if (!this._texture) {
                 if (!scene.useDelayedTextureLoading) {
-                    this._texture = scene.getEngine().createTexture(url, noMipmap, invertY, scene, this._samplingMode);
+                    this._texture = scene.getEngine().createTexture(url, noMipmap, invertY, scene, this._samplingMode, this._buffer);
+                    if (deleteBuffer) {
+                        delete this._buffer;
+                    }
                 } else {
                     this.delayLoadState = BABYLON.Engine.DELAYLOADSTATE_NOTLOADED;
                 }
@@ -48,7 +53,10 @@ var BABYLON;
             this._texture = this._getFromCache(this.url, this._noMipmap);
 
             if (!this._texture) {
-                this._texture = this.getScene().getEngine().createTexture(this.url, this._noMipmap, this._invertY, this.getScene(), this._samplingMode);
+                this._texture = this.getScene().getEngine().createTexture(this.url, this._noMipmap, this._invertY, this.getScene(), this._samplingMode, this._buffer);
+                if (this._deleteBuffer) {
+                    delete this._buffer;
+                }
             }
         };
 
@@ -157,7 +165,7 @@ var BABYLON;
         };
 
         Texture.prototype.clone = function () {
-            var newTexture = new BABYLON.Texture(this._texture.url, this.getScene(), this._noMipmap, this._invertY);
+            var newTexture = new BABYLON.Texture(this._texture.url, this.getScene(), this._noMipmap, this._invertY, this._samplingMode, this._buffer, this._deleteBuffer);
 
             // Base texture
             newTexture.hasAlpha = this.hasAlpha;

Babylon/Tools/babylon.tools.js

@@ -253,6 +253,15 @@
                 }
             }
         };
+		
+		Tools.ReadFileAsDataURL = function (fileToLoad, callback, progressCallback) {
+            var reader = new FileReader();
+            reader.onload = function (e) {
+                callback(e.target.result);
+            };
+            reader.onprogress = progressCallback;
+            reader.readAsDataURL(fileToLoad);
+        };
 
         Tools.ReadFile = function (fileToLoad, callback, progressCallBack, useArrayBuffer) {
             var reader = new FileReader();

Babylon/babylon.engine.js

@@ -1170,12 +1170,27 @@
             gl.bindTexture(gl.TEXTURE_2D, null);
         };
 
-        Engine.prototype.createTexture = function (url, noMipmap, invertY, scene, samplingMode) {
+        Engine.prototype.createTexture = function (url, noMipmap, invertY, scene, samplingMode, buffer) {
             var _this = this;
             if (typeof samplingMode === "undefined") { samplingMode = BABYLON.Texture.TRILINEAR_SAMPLINGMODE; }
             var texture = this._gl.createTexture();
+            var extension;
+            var fromData = false;
+
+            if (url.substr(0, 5) === "data:") {
+                // data: -- name
+                fromData = true;
+            }
+
+            if (!fromData)
+                extension = url.substr(url.length - 4, 4).toLowerCase();
+            else {
+                var oldUrl = url;
+                fromData = oldUrl.split(':');
+                url = oldUrl;
+                extension = fromData[1].substr(fromData[1].length - 4, 4).toLowerCase();
+            }
 
-            var extension = url.substr(url.length - 4, 4).toLowerCase();
             var isDDS = this.getCaps().s3tc && (extension === ".dds");
             var isTGA = (extension === ".tga");
 
@@ -1186,7 +1201,7 @@
             this._loadedTexturesCache.push(texture);
 
             if (isTGA) {
-                BABYLON.Tools.LoadFile(url, function (arrayBuffer) {
+                var callback = function (arrayBuffer) {
                     var data = new Uint8Array(arrayBuffer);
 
                     var header = BABYLON.Internals.TGATools.GetTGAHeader(data);
@@ -1194,9 +1209,15 @@
                     prepareWebGLTexture(texture, _this._gl, scene, header.width, header.height, invertY, noMipmap, false, function () {
                         BABYLON.Internals.TGATools.UploadContent(_this._gl, data);
                     }, samplingMode);
-                }, null, scene.database, true);
+                };
+
+                if (!(fromData instanceof Array))
+                    BABYLON.Tools.LoadFile(url, callback, null, scene.database, true);
+                else
+                    callback(buffer);
+
             } else if (isDDS) {
-                BABYLON.Tools.LoadFile(url, function (data) {
+                var callback = function (data) {
                     var info = BABYLON.Internals.DDSTools.GetDDSInfo(data);
 
                     var loadMipmap = (info.isRGB || info.isLuminance || info.mipmapCount > 1) && !noMipmap && ((info.width >> (info.mipmapCount - 1)) == 1);
@@ -1204,7 +1225,13 @@
                         console.log("loading " + url);
                         BABYLON.Internals.DDSTools.UploadDDSLevels(_this._gl, _this.getCaps().s3tc, data, info, loadMipmap, 1);
                     }, samplingMode);
-                }, null, scene.database, true);
+                };
+
+                if (!(fromData instanceof Array))
+                    BABYLON.Tools.LoadFile(url, callback, null, scene.database, true);
+                else
+                    callback(buffer);
+
             } else {
                 var onload = function (img) {
                     prepareWebGLTexture(texture, _this._gl, scene, img.width, img.height, invertY, noMipmap, false, function (potWidth, potHeight) {
@@ -1224,7 +1251,10 @@
                     scene._removePendingData(texture);
                 };
 
-                BABYLON.Tools.LoadImage(url, onload, onerror, scene.database);
+                if (!(fromData instanceof Array))
+                    BABYLON.Tools.LoadImage(url, onload, onerror, scene.database);
+                else
+                    BABYLON.Tools.LoadImage(buffer, onload, onerror, scene.database);
             }
 
             return texture;