Merge pull request #292 from julien-moreau/master

(Removed conflicts) Added TS files for "Create texture from result of a FileReader"

Babylon/Materials/textures/babylon.texture.js

@@ -8,7 +8,9 @@ var BABYLON;
 (function (BABYLON) {
     var Texture = (function (_super) {
         __extends(Texture, _super);
-        function Texture(url, scene, noMipmap, invertY, samplingMode, onLoad, onError) {
+
+        function Texture(url, scene, noMipmap, invertY, samplingMode, onLoad, onError, buffer, deleteBuffer) {
+
             if (typeof samplingMode === "undefined") { samplingMode = Texture.TRILINEAR_SAMPLINGMODE; }
             if (typeof onLoad === "undefined") { onLoad = null; }
             if (typeof onError === "undefined") { onError = null; }
@@ -26,6 +28,8 @@ var BABYLON;
             this._noMipmap = noMipmap;
             this._invertY = invertY;
             this._samplingMode = samplingMode;
+            this._buffer = buffer;
+            this._deleteBuffer = deleteBuffer;
 
             if (!url) {
                 return;
@@ -35,7 +39,12 @@ var BABYLON;
 
             if (!this._texture) {
                 if (!scene.useDelayedTextureLoading) {
-                    this._texture = scene.getEngine().createTexture(url, noMipmap, invertY, scene, this._samplingMode, onLoad, onError);
+
+                    this._texture = scene.getEngine().createTexture(url, noMipmap, invertY, scene, this._samplingMode, onLoad, onError, this._buffer);
+					if (deleteBuffer) {
+                        delete this._buffer;
+                    }
+
                 } else {
                     this.delayLoadState = BABYLON.Engine.DELAYLOADSTATE_NOTLOADED;
                 }
@@ -50,7 +59,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, null, null, this._buffer);
+                if (this._deleteBuffer) {
+                    delete this._buffer;
+                }
             }
         };
 
@@ -159,7 +171,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/Materials/textures/babylon.texture.ts

@@ -44,8 +44,10 @@
         private _cachedWAng: number;
         private _cachedCoordinatesMode: number;
         private _samplingMode: number;
+        private _buffer: any;
+        private _deleteBuffer: boolean;
 
-        constructor(url: string, scene: Scene, noMipmap?: boolean, invertY?: boolean, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, onLoad: () => void = null, onError: () => void = null) {
+        constructor(url: string, scene: Scene, noMipmap?: boolean, invertY?: boolean, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, onLoad: () => void = null, onError: () => void = null, buffer: any = null, deleteBuffer: boolean = false) {
             super(scene);
 
             this.name = url;
@@ -53,6 +55,8 @@
             this._noMipmap = noMipmap;
             this._invertY = invertY;
             this._samplingMode = samplingMode;
+            this._buffer = buffer;
+            this._deleteBuffer = deleteBuffer;
 
             if (!url) {
                 return;
@@ -62,7 +66,10 @@
 
             if (!this._texture) {
                 if (!scene.useDelayedTextureLoading) {
-                    this._texture = scene.getEngine().createTexture(url, noMipmap, invertY, scene, this._samplingMode, onLoad, onError);
+                    this._texture = scene.getEngine().createTexture(url, noMipmap, invertY, scene, this._samplingMode, onLoad, onError, this._buffer);
+                    if (deleteBuffer) {
+                        delete this._buffer;
+                    }
                 } else {
                     this.delayLoadState = BABYLON.Engine.DELAYLOADSTATE_NOTLOADED;
                 }
@@ -78,7 +85,10 @@
             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, null, null, this._buffer);
+                if (this._deleteBuffer) {
+                    delete this._buffer;
+                }
             }
         }
 

Babylon/Tools/babylon.tools.js

@@ -160,7 +160,9 @@
             url = Tools.CleanUrl(url);
 
             var img = new Image();
-            img.crossOrigin = 'anonymous';
+            
+            if (url.substr(0, 5) != "data:")
+                img.crossOrigin = 'anonymous';
 
             img.onload = function () {
                 onload(img);
@@ -254,6 +256,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();
             reader.onload = function (e) {

Babylon/Tools/babylon.tools.ts

@@ -184,7 +184,9 @@
             url = Tools.CleanUrl(url);
 
             var img = new Image();
-            img.crossOrigin = 'anonymous';
+
+			if (url.substr(0, 5) != "data:")
+                img.crossOrigin = 'anonymous';
 
             img.onload = () => {
                 onload(img);
@@ -286,6 +288,15 @@
             }
         }
 
+        public static ReadFileAsDataURL(fileToLoad, callback, progressCallback): void {
+            var reader = new FileReader();
+            reader.onload = e => {
+                callback(e.target.result);
+            };
+            reader.onprogress = progressCallback;
+            reader.readAsDataURL(fileToLoad);
+        }
+
         public static ReadFile(fileToLoad, callback, progressCallBack, useArrayBuffer?: boolean): void {
             var reader = new FileReader();
             reader.onload = e => {

Babylon/babylon.engine.js

@@ -1172,15 +1172,30 @@
 
             gl.bindTexture(gl.TEXTURE_2D, null);
         };
-
-        Engine.prototype.createTexture = function (url, noMipmap, invertY, scene, samplingMode, onLoad, onError) {
+
+        Engine.prototype.createTexture = function (url, noMipmap, invertY, scene, samplingMode, onLoad, onError, buffer) {
             var _this = this;
             if (typeof samplingMode === "undefined") { samplingMode = BABYLON.Texture.TRILINEAR_SAMPLINGMODE; }
             if (typeof onLoad === "undefined") { onLoad = null; }
             if (typeof onError === "undefined") { onError = null; }
             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");
 
@@ -1199,7 +1214,7 @@
             };
 
             if (isTGA) {
-                BABYLON.Tools.LoadFile(url, function (arrayBuffer) {
+                var callback = function (arrayBuffer) {
                     var data = new Uint8Array(arrayBuffer);
 
                     var header = BABYLON.Internals.TGATools.GetTGAHeader(data);
@@ -1210,10 +1225,16 @@
                         if (onLoad) {
                             onLoad();
                         }
-                    }, samplingMode);
-                }, onerror, scene.database, true);
+                    }, samplingMode);
+                };
+
+                if (!(fromData instanceof Array))
+                    BABYLON.Tools.LoadFile(url, callback, onerror, 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);
@@ -1223,8 +1244,14 @@
                         if (onLoad) {
                             onLoad();
                         }
-                    }, samplingMode);
-                }, onerror, scene.database, true);
+                    }, samplingMode);
+                };
+
+                if (!(fromData instanceof Array))
+                    BABYLON.Tools.LoadFile(url, callback, onerror, 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) {
@@ -1244,7 +1271,10 @@
                     }, samplingMode);
                 };
 
-                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;

Babylon/babylon.engine.ts

@@ -1185,10 +1185,25 @@
             gl.bindTexture(gl.TEXTURE_2D, null);
         }
 
-        public createTexture(url: string, noMipmap: boolean, invertY: boolean, scene: Scene, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, onLoad: () => void = null, onError: () => void = null): WebGLTexture {
+        public createTexture(url: string, noMipmap: boolean, invertY: boolean, scene: Scene, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, onLoad: () => void = null, onError: () => void = null, buffer:any = null): WebGLTexture {
+
             var texture = this._gl.createTexture();
 
-            var extension = url.substr(url.length - 4, 4).toLowerCase();
+            var extension: string;
+			var fromData: any = false;
+			if (url.substr(0, 5) === "data:") {
+                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 isDDS = this.getCaps().s3tc && (extension === ".dds");
             var isTGA = (extension === ".tga");
 
@@ -1207,7 +1222,7 @@
             };
 
             if (isTGA) {
-                BABYLON.Tools.LoadFile(url, arrayBuffer => {
+                var callback = (arrayBuffer) => {
                     var data = new Uint8Array(arrayBuffer);
 
                     var header = BABYLON.Internals.TGATools.GetTGAHeader(data);
@@ -1219,12 +1234,20 @@
                             onLoad();
                         }
                     }, samplingMode);
-                }, onerror, scene.database, true);
+                };
+
+                if (!(fromData instanceof Array))
+                    BABYLON.Tools.LoadFile(url, arrayBuffer => {
+                        callback(arrayBuffer);
+                    }, onerror, scene.database, true);
+                else
+                    callback(buffer);
+
             } else if (isDDS) {
-                BABYLON.Tools.LoadFile(url, data => {
+                var callback = (data) => {
                     var info = BABYLON.Internals.DDSTools.GetDDSInfo(data);
 
-                    var loadMipmap = (info.isRGB || info.isLuminance || info.mipmapCount > 1) && !noMipmap && ((info.width >> (info.mipmapCount -1)) == 1);
+                    var loadMipmap = (info.isRGB || info.isLuminance || info.mipmapCount > 1) && !noMipmap && ((info.width >> (info.mipmapCount - 1)) == 1);
                     prepareWebGLTexture(texture, this._gl, scene, info.width, info.height, invertY, !loadMipmap, info.isFourCC, () => {
 
                         Internals.DDSTools.UploadDDSLevels(this._gl, this.getCaps().s3tc, data, info, loadMipmap, 1);
@@ -1233,7 +1256,15 @@
                             onLoad();
                         }
                     }, samplingMode);
-                }, onerror, scene.database, true);
+                };
+
+                if (!(fromData instanceof Array))
+                    BABYLON.Tools.LoadFile(url, data => {
+                        callback(data);
+                    }, onerror, scene.database, true);
+                else
+                    callback(buffer);
+
             } else {
                 var onload = (img) => {
                     prepareWebGLTexture(texture, this._gl, scene, img.width, img.height, invertY, noMipmap, false, (potWidth, potHeight) => {
@@ -1254,7 +1285,10 @@
                 };
 
 
-                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;
@@ -1799,4 +1833,4 @@
             }
         }
     }
-}
+}