Merge branch 'master' of https://github.com/BabylonJS/Babylon.js

Tools/Gulp/config.json

@@ -121,19 +121,16 @@
             "imageProcessing"            
         ],
         "minimal": [
-            "freeCamera",
-            "hemisphericLight"
-        ],
-        "minimalWithBuilder": [
             "meshBuilder",
             "freeCamera",
             "hemisphericLight"
         ],
         "360Viewer": [
-            "freeCamera",
-            "hemisphericLight",
+            "arcRotateCamera",
             "meshBuilder",
-            "picking"
+            "picking",
+            "backgroundMaterial",
+            "videoDome"
         ]      
     },
     "workloads": {

dist/preview release/babylon.max.js

@@ -14527,6 +14527,13 @@ var BABYLON;
         };
         // Textures
         /**
+         * Clears the list of texture accessible through engine.
+         * This can help preventing texture load conflict due to name collision.
+         */
+        Engine.prototype.clearInternalTexturesCache = function () {
+            this._internalTexturesCache = [];
+        };
+        /**
          * Force the entire cache to be cleared
          * You should not have to use this function unless your engine needs to share the webGL context with another engine
          * @param bruteForce defines a boolean to force clearing ALL caches (including stencil, detoh and alpha states)
@@ -87378,6 +87385,7 @@ var BABYLON;
             this.BJSINSPECTOR = typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
             this._scene = scene;
             // load inspector using require, if it doesn't exist on the global namespace.
+            this.onGlobalPropertyChange = new Array();
         }
         /** Creates the inspector window. */
         DebugLayer.prototype._createInspector = function (config) {
@@ -87446,6 +87454,11 @@ var BABYLON;
         DebugLayer.prototype.getActiveTab = function () {
             return this._inspector ? this._inspector.getActiveTabIndex() : -1;
         };
+        DebugLayer.prototype.onGlobalPropertyChangeCallback = function (result) {
+            this.onGlobalPropertyChange.forEach(function (callback) {
+                callback(result);
+            });
+        };
         DebugLayer.InspectorURL = 'https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js';
         return DebugLayer;
     }());
@@ -100331,7 +100344,9 @@ var BABYLON;
                 // Fog
                 BABYLON.MaterialHelper.BindFogParameters(scene, mesh, this._activeEffect);
                 // image processing
-                this._imageProcessingConfiguration.bind(this._activeEffect);
+                if (this._imageProcessingConfiguration) {
+                    this._imageProcessingConfiguration.bind(this._activeEffect);
+                }
             }
             this._uniformBuffer.update();
             this._afterBind(mesh);

dist/preview release/babylon.no-module.max.js

@@ -14494,6 +14494,13 @@ var BABYLON;
         };
         // Textures
         /**
+         * Clears the list of texture accessible through engine.
+         * This can help preventing texture load conflict due to name collision.
+         */
+        Engine.prototype.clearInternalTexturesCache = function () {
+            this._internalTexturesCache = [];
+        };
+        /**
          * Force the entire cache to be cleared
          * You should not have to use this function unless your engine needs to share the webGL context with another engine
          * @param bruteForce defines a boolean to force clearing ALL caches (including stencil, detoh and alpha states)
@@ -87345,6 +87352,7 @@ var BABYLON;
             this.BJSINSPECTOR = typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
             this._scene = scene;
             // load inspector using require, if it doesn't exist on the global namespace.
+            this.onGlobalPropertyChange = new Array();
         }
         /** Creates the inspector window. */
         DebugLayer.prototype._createInspector = function (config) {
@@ -87413,6 +87421,11 @@ var BABYLON;
         DebugLayer.prototype.getActiveTab = function () {
             return this._inspector ? this._inspector.getActiveTabIndex() : -1;
         };
+        DebugLayer.prototype.onGlobalPropertyChangeCallback = function (result) {
+            this.onGlobalPropertyChange.forEach(function (callback) {
+                callback(result);
+            });
+        };
         DebugLayer.InspectorURL = 'https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js';
         return DebugLayer;
     }());
@@ -100298,7 +100311,9 @@ var BABYLON;
                 // Fog
                 BABYLON.MaterialHelper.BindFogParameters(scene, mesh, this._activeEffect);
                 // image processing
-                this._imageProcessingConfiguration.bind(this._activeEffect);
+                if (this._imageProcessingConfiguration) {
+                    this._imageProcessingConfiguration.bind(this._activeEffect);
+                }
             }
             this._uniformBuffer.update();
             this._afterBind(mesh);

dist/preview release/es6.js

@@ -14494,6 +14494,13 @@ var BABYLON;
         };
         // Textures
         /**
+         * Clears the list of texture accessible through engine.
+         * This can help preventing texture load conflict due to name collision.
+         */
+        Engine.prototype.clearInternalTexturesCache = function () {
+            this._internalTexturesCache = [];
+        };
+        /**
          * Force the entire cache to be cleared
          * You should not have to use this function unless your engine needs to share the webGL context with another engine
          * @param bruteForce defines a boolean to force clearing ALL caches (including stencil, detoh and alpha states)
@@ -87345,6 +87352,7 @@ var BABYLON;
             this.BJSINSPECTOR = typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
             this._scene = scene;
             // load inspector using require, if it doesn't exist on the global namespace.
+            this.onGlobalPropertyChange = new Array();
         }
         /** Creates the inspector window. */
         DebugLayer.prototype._createInspector = function (config) {
@@ -87413,6 +87421,11 @@ var BABYLON;
         DebugLayer.prototype.getActiveTab = function () {
             return this._inspector ? this._inspector.getActiveTabIndex() : -1;
         };
+        DebugLayer.prototype.onGlobalPropertyChangeCallback = function (result) {
+            this.onGlobalPropertyChange.forEach(function (callback) {
+                callback(result);
+            });
+        };
         DebugLayer.InspectorURL = 'https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js';
         return DebugLayer;
     }());
@@ -100298,7 +100311,9 @@ var BABYLON;
                 // Fog
                 BABYLON.MaterialHelper.BindFogParameters(scene, mesh, this._activeEffect);
                 // image processing
-                this._imageProcessingConfiguration.bind(this._activeEffect);
+                if (this._imageProcessingConfiguration) {
+                    this._imageProcessingConfiguration.bind(this._activeEffect);
+                }
             }
             this._uniformBuffer.update();
             this._afterBind(mesh);

dist/preview release/inspector/babylon.inspector.d.ts

@@ -471,7 +471,9 @@ declare module INSPECTOR {
         private _property;
         /** The obj this property refers to */
         private _obj;
-        constructor(prop: string, obj: any);
+        /** The obj parent  */
+        private _parentObj;
+        constructor(prop: string, obj: any, parentObj?: PropertyLine);
         readonly name: string;
         value: any;
         readonly type: string;

dist/preview release/inspector/babylon.inspector.js

@@ -308,7 +308,6 @@ var INSPECTOR;
                 return;
             }
             popup.document.title = "Babylon.js INSPECTOR";
-            popup.document.body.innerHTML = "Coucou!";
             // Get the inspector style      
             var styles = Inspector.DOCUMENT.querySelectorAll('style');
             for (var s = 0; s < styles.length; s++) {
@@ -1363,9 +1362,10 @@ var INSPECTOR;
      * A property is a link between a data (string) and an object.
      */
     var Property = /** @class */ (function () {
-        function Property(prop, obj) {
+        function Property(prop, obj, parentObj) {
             this._property = prop;
             this._obj = obj;
+            this._parentObj = parentObj || null;
         }
         Object.defineProperty(Property.prototype, "name", {
             get: function () {
@@ -1379,6 +1379,45 @@ var INSPECTOR;
                 return this._obj[this._property];
             },
             set: function (newValue) {
+                if (newValue != undefined && this._obj[this._property] != undefined) {
+                    if (this._obj instanceof BABYLON.Scene) {
+                        this._obj.debugLayer.onGlobalPropertyChangeCallback({
+                            object: this._obj,
+                            property: this._property,
+                            value: newValue,
+                            initialValue: this._obj[this._property]
+                        });
+                    }
+                    else {
+                        if (this._parentObj != null) {
+                            // Object that have "children" properties : Color, Vector, imageProcessingConfiguration
+                            if (this._parentObj instanceof BABYLON.Scene) {
+                                this._parentObj.debugLayer.onGlobalPropertyChangeCallback({
+                                    object: this._parentObj,
+                                    property: this._property,
+                                    value: newValue,
+                                    initialValue: this._obj[this._property]
+                                });
+                            }
+                            else {
+                                this._parentObj.getScene().debugLayer.onGlobalPropertyChangeCallback({
+                                    object: this._parentObj,
+                                    property: this._property,
+                                    value: newValue,
+                                    initialValue: this._obj[this._property]
+                                });
+                            }
+                        }
+                        else {
+                            this._obj.getScene().debugLayer.onGlobalPropertyChangeCallback({
+                                object: this._obj,
+                                property: this._property,
+                                value: newValue,
+                                initialValue: this._obj[this._property]
+                            });
+                        }
+                    }
+                }
                 this._obj[this._property] = newValue;
             },
             enumerable: true,
@@ -1516,8 +1555,7 @@ var INSPECTOR;
                 e.preventDefault();
                 this.validateInput(this._input.value);
             }
-            else if (e.keyCode == 27) {
-                // Esc : remove input
+            else if (e.keyCode == 27) { // Esc : remove input
                 this.update();
             }
         };
@@ -1826,20 +1864,20 @@ var INSPECTOR;
                     }
                     for (var _b = 0, propToDisplay_1 = propToDisplay; _b < propToDisplay_1.length; _b++) {
                         var prop = propToDisplay_1[_b];
-                        var infos = new INSPECTOR.Property(prop, this._property.value);
+                        var infos = new INSPECTOR.Property(prop, this._property.value, this._property.obj);
                         var child = new PropertyLine(infos, this, this._level + PropertyLine._MARGIN_LEFT);
                         this._children.push(child);
                     }
                     //Add the Hexa converter
                     if ((propToDisplay.indexOf('r') && propToDisplay.indexOf('g') && propToDisplay.indexOf('b') && propToDisplay.indexOf('a')) == 0) {
                         var hexLineInfos = [];
-                        var hexLinePropCheck = new INSPECTOR.Property("hexEnable", this._property.value);
+                        var hexLinePropCheck = new INSPECTOR.Property("hexEnable", this._property.value, this._property.obj);
                         hexLinePropCheck.value = false;
                         var hexLineCheck = new PropertyLine(hexLinePropCheck, this, this._level + PropertyLine._MARGIN_LEFT);
                         this._children.unshift(hexLineCheck);
                         for (var _c = 0, propToDisplay_2 = propToDisplay; _c < propToDisplay_2.length; _c++) {
                             var prop = propToDisplay_2[_c];
-                            var infos = new INSPECTOR.Property(prop, this._property.value);
+                            var infos = new INSPECTOR.Property(prop, this._property.value, this._property.obj);
                             var valHex = ((infos.value * 255) | 0).toString(16);
                             hexLineInfos.push(valHex);
                             if (valHex == "0") {
@@ -1849,7 +1887,7 @@ var INSPECTOR;
                         hexLineInfos.push("#");
                         hexLineInfos.reverse();
                         var hexLineString = hexLineInfos.join("");
-                        var hexLineProp = new INSPECTOR.Property("hex", this._property.value);
+                        var hexLineProp = new INSPECTOR.Property("hex", this._property.value, this._property.obj);
                         hexLineProp.value = hexLineString;
                         var hexLine = new PropertyLine(hexLineProp, this, this._level + PropertyLine._MARGIN_LEFT);
                         this._children.unshift(hexLine);
@@ -2425,7 +2463,6 @@ var INSPECTOR;
          * Returns true if the user browser is edge.
          */
         Helpers.IsBrowserEdge = function () {
-            //Detect if we are running on a faulty buggy OS.
             var regexp = /Edge/;
             return regexp.test(navigator.userAgent);
         };
@@ -2433,7 +2470,6 @@ var INSPECTOR;
          * Returns true if the user browser is IE.
          */
         Helpers.IsBrowserIE = function () {
-            //Detect if we are running on a faulty buggy OS.
             var regexp = /Trident.*rv\:11\./;
             return regexp.test(navigator.userAgent);
         };

dist/preview release/proceduralTexturesLibrary/babylon.cloudProceduralTexture.d.ts

@@ -7,5 +7,18 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         skyColor: Color4;
         cloudColor: Color4;
+        /**
+         * Serializes this cloud procedural texture
+         * @returns a serialized cloud procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Cloud Procedural Texture from parsed cloud procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing cloud procedural texture information
+         * @returns a parsed Cloud Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): CloudProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.cloudProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var CloudProceduralTexture = /** @class */ (function (_super) {
@@ -46,6 +52,32 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this cloud procedural texture
+         * @returns a serialized cloud procedural texture object
+         */
+        CloudProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.CloudProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Cloud Procedural Texture from parsed cloud procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing cloud procedural texture information
+         * @returns a parsed Cloud Procedural Texture
+         */
+        CloudProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new CloudProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor4()
+        ], CloudProceduralTexture.prototype, "skyColor", null);
+        __decorate([
+            BABYLON.serializeAsColor4()
+        ], CloudProceduralTexture.prototype, "cloudColor", null);
         return CloudProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.CloudProceduralTexture = CloudProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.fireProceduralTexture.d.ts

@@ -17,5 +17,18 @@ declare module BABYLON {
         time: number;
         speed: Vector2;
         alphaThreshold: number;
+        /**
+         * Serializes this fire procedural texture
+         * @returns a serialized fire procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Fire Procedural Texture from parsed fire procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing fire procedural texture information
+         * @returns a parsed Fire Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): FireProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.fireProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var FireProceduralTexture = /** @class */ (function (_super) {
@@ -142,6 +148,38 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this fire procedural texture
+         * @returns a serialized fire procedural texture object
+         */
+        FireProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.FireProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Fire Procedural Texture from parsed fire procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing fire procedural texture information
+         * @returns a parsed Fire Procedural Texture
+         */
+        FireProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new FireProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], FireProceduralTexture.prototype, "fireColors", null);
+        __decorate([
+            BABYLON.serialize()
+        ], FireProceduralTexture.prototype, "time", null);
+        __decorate([
+            BABYLON.serializeAsVector2()
+        ], FireProceduralTexture.prototype, "speed", null);
+        __decorate([
+            BABYLON.serialize()
+        ], FireProceduralTexture.prototype, "alphaThreshold", null);
         return FireProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.FireProceduralTexture = FireProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.grassProceduralTexture.d.ts

@@ -7,5 +7,18 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         grassColors: Color3[];
         groundColor: Color3;
+        /**
+         * Serializes this grass procedural texture
+         * @returns a serialized grass procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Grass Procedural Texture from parsed grass procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing grass procedural texture information
+         * @returns a parsed Grass Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): GrassProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.grassProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var GrassProceduralTexture = /** @class */ (function (_super) {
@@ -52,6 +58,32 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this grass procedural texture
+         * @returns a serialized grass procedural texture object
+         */
+        GrassProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.GrassProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Grass Procedural Texture from parsed grass procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing grass procedural texture information
+         * @returns a parsed Grass Procedural Texture
+         */
+        GrassProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new GrassProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], GrassProceduralTexture.prototype, "grassColors", null);
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], GrassProceduralTexture.prototype, "groundColor", null);
         return GrassProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.GrassProceduralTexture = GrassProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.marbleProceduralTexture.d.ts

@@ -11,5 +11,18 @@ declare module BABYLON {
         amplitude: number;
         numberOfTilesWidth: number;
         jointColor: Color3;
+        /**
+         * Serializes this marble procedural texture
+         * @returns a serialized marble procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Marble Procedural Texture from parsed marble procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing marble procedural texture information
+         * @returns a parsed Marble Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): MarbleProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.marbleProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var MarbleProceduralTexture = /** @class */ (function (_super) {
@@ -72,6 +78,38 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this marble procedural texture
+         * @returns a serialized marble procedural texture object
+         */
+        MarbleProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.MarbleProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Marble Procedural Texture from parsed marble procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing marble procedural texture information
+         * @returns a parsed Marble Procedural Texture
+         */
+        MarbleProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new MarbleProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "numberOfTilesHeight", null);
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "amplitude", null);
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "numberOfTilesWidth", null);
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "jointColor", null);
         return MarbleProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.MarbleProceduralTexture = MarbleProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.normalMapProceduralTexture.d.ts

@@ -7,5 +7,18 @@ declare module BABYLON {
         render(useCameraPostProcess?: boolean): void;
         resize(size: any, generateMipMaps: any): void;
         baseTexture: Texture;
+        /**
+         * Serializes this normal map procedural texture
+         * @returns a serialized normal map procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Normal Map Procedural Texture from parsed normal map procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing normal map procedural texture information
+         * @returns a parsed Normal Map Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): NormalMapProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.normalMapProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var NormalMapProceduralTexture = /** @class */ (function (_super) {
@@ -41,6 +47,29 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this normal map procedural texture
+         * @returns a serialized normal map procedural texture object
+         */
+        NormalMapProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.NormalMapProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Normal Map Procedural Texture from parsed normal map procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing normal map procedural texture information
+         * @returns a parsed Normal Map Procedural Texture
+         */
+        NormalMapProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new NormalMapProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsTexture()
+        ], NormalMapProceduralTexture.prototype, "baseTexture", null);
         return NormalMapProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.NormalMapProceduralTexture = NormalMapProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.perlinNoiseProceduralTexture.d.ts

@@ -9,5 +9,18 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         render(useCameraPostProcess?: boolean): void;
         resize(size: any, generateMipMaps: any): void;
+        /**
+         * Serializes this perlin noise procedural texture
+         * @returns a serialized perlin noise procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Perlin Noise Procedural Texture from parsed perlin noise procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing perlin noise procedural texture information
+         * @returns a parsed Perlin Noise Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): PerlinNoiseProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.perlinNoiseProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var PerlinNoiseProceduralTexture = /** @class */ (function (_super) {
@@ -41,6 +47,35 @@ var BABYLON;
         PerlinNoiseProceduralTexture.prototype.resize = function (size, generateMipMaps) {
             _super.prototype.resize.call(this, size, generateMipMaps);
         };
+        /**
+         * Serializes this perlin noise procedural texture
+         * @returns a serialized perlin noise procedural texture object
+         */
+        PerlinNoiseProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.PerlinNoiseProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Perlin Noise Procedural Texture from parsed perlin noise procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing perlin noise procedural texture information
+         * @returns a parsed Perlin Noise Procedural Texture
+         */
+        PerlinNoiseProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new PerlinNoiseProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], PerlinNoiseProceduralTexture.prototype, "time", void 0);
+        __decorate([
+            BABYLON.serialize()
+        ], PerlinNoiseProceduralTexture.prototype, "speed", void 0);
+        __decorate([
+            BABYLON.serialize()
+        ], PerlinNoiseProceduralTexture.prototype, "translationSpeed", void 0);
         return PerlinNoiseProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.PerlinNoiseProceduralTexture = PerlinNoiseProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.roadProceduralTexture.d.ts

@@ -5,5 +5,18 @@ declare module BABYLON {
         constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
         updateShaderUniforms(): void;
         roadColor: Color3;
+        /**
+         * Serializes this road procedural texture
+         * @returns a serialized road procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Road Procedural Texture from parsed road procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing road procedural texture information
+         * @returns a parsed Road Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): RoadProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.roadProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var RoadProceduralTexture = /** @class */ (function (_super) {
@@ -33,6 +39,29 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this road procedural texture
+         * @returns a serialized road procedural texture object
+         */
+        RoadProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.RoadProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Road Procedural Texture from parsed road procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing road procedural texture information
+         * @returns a parsed Road Procedural Texture
+         */
+        RoadProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new RoadProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], RoadProceduralTexture.prototype, "roadColor", null);
         return RoadProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.RoadProceduralTexture = RoadProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.d.ts

@@ -25,5 +25,18 @@ declare module BABYLON {
         darkmatter: number;
         distfading: number;
         saturation: number;
+        /**
+         * Serializes this starfield procedural texture
+         * @returns a serialized starfield procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Starfield Procedural Texture from parsed startfield procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing startfield procedural texture information
+         * @returns a parsed Starfield Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): StarfieldProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var StarfieldProceduralTexture = /** @class */ (function (_super) {
@@ -163,6 +169,59 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this starfield procedural texture
+         * @returns a serialized starfield procedural texture object
+         */
+        StarfieldProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.StarfieldProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Starfield Procedural Texture from parsed startfield procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing startfield procedural texture information
+         * @returns a parsed Starfield Procedural Texture
+         */
+        StarfieldProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new StarfieldProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "time", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "alpha", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "beta", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "formuparam", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "stepsize", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "zoom", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "tile", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "brightness", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "darkmatter", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "distfading", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "saturation", null);
         return StarfieldProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.StarfieldProceduralTexture = StarfieldProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylon.woodProceduralTexture.d.ts

@@ -7,5 +7,18 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         ampScale: number;
         woodColor: Color3;
+        /**
+         * Serializes this wood procedural texture
+         * @returns a serialized wood procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Wood Procedural Texture from parsed wood procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing wood procedural texture information
+         * @returns a parsed Wood Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): WoodProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylon.woodProceduralTexture.js

@@ -9,6 +9,12 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var BABYLON;
 (function (BABYLON) {
     var WoodProceduralTexture = /** @class */ (function (_super) {
@@ -46,6 +52,32 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this wood procedural texture
+         * @returns a serialized wood procedural texture object
+         */
+        WoodProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.WoodProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Wood Procedural Texture from parsed wood procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing wood procedural texture information
+         * @returns a parsed Wood Procedural Texture
+         */
+        WoodProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new WoodProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], WoodProceduralTexture.prototype, "ampScale", null);
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], WoodProceduralTexture.prototype, "woodColor", null);
         return WoodProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.WoodProceduralTexture = WoodProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylonjs.proceduralTextures.d.ts

@@ -7,6 +7,19 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         ampScale: number;
         woodColor: Color3;
+        /**
+         * Serializes this wood procedural texture
+         * @returns a serialized wood procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Wood Procedural Texture from parsed wood procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing wood procedural texture information
+         * @returns a parsed Wood Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): WoodProceduralTexture;
     }
 }
 
@@ -29,6 +42,19 @@ declare module BABYLON {
         time: number;
         speed: Vector2;
         alphaThreshold: number;
+        /**
+         * Serializes this fire procedural texture
+         * @returns a serialized fire procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Fire Procedural Texture from parsed fire procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing fire procedural texture information
+         * @returns a parsed Fire Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): FireProceduralTexture;
     }
 }
 
@@ -41,6 +67,19 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         skyColor: Color4;
         cloudColor: Color4;
+        /**
+         * Serializes this cloud procedural texture
+         * @returns a serialized cloud procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Cloud Procedural Texture from parsed cloud procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing cloud procedural texture information
+         * @returns a parsed Cloud Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): CloudProceduralTexture;
     }
 }
 
@@ -53,6 +92,19 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         grassColors: Color3[];
         groundColor: Color3;
+        /**
+         * Serializes this grass procedural texture
+         * @returns a serialized grass procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Grass Procedural Texture from parsed grass procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing grass procedural texture information
+         * @returns a parsed Grass Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): GrassProceduralTexture;
     }
 }
 
@@ -63,6 +115,19 @@ declare module BABYLON {
         constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
         updateShaderUniforms(): void;
         roadColor: Color3;
+        /**
+         * Serializes this road procedural texture
+         * @returns a serialized road procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Road Procedural Texture from parsed road procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing road procedural texture information
+         * @returns a parsed Road Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): RoadProceduralTexture;
     }
 }
 
@@ -108,6 +173,19 @@ declare module BABYLON {
         amplitude: number;
         numberOfTilesWidth: number;
         jointColor: Color3;
+        /**
+         * Serializes this marble procedural texture
+         * @returns a serialized marble procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Marble Procedural Texture from parsed marble procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing marble procedural texture information
+         * @returns a parsed Marble Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): MarbleProceduralTexture;
     }
 }
 
@@ -138,6 +216,19 @@ declare module BABYLON {
         darkmatter: number;
         distfading: number;
         saturation: number;
+        /**
+         * Serializes this starfield procedural texture
+         * @returns a serialized starfield procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Starfield Procedural Texture from parsed startfield procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing startfield procedural texture information
+         * @returns a parsed Starfield Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): StarfieldProceduralTexture;
     }
 }
 
@@ -150,6 +241,19 @@ declare module BABYLON {
         render(useCameraPostProcess?: boolean): void;
         resize(size: any, generateMipMaps: any): void;
         baseTexture: Texture;
+        /**
+         * Serializes this normal map procedural texture
+         * @returns a serialized normal map procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Normal Map Procedural Texture from parsed normal map procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing normal map procedural texture information
+         * @returns a parsed Normal Map Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): NormalMapProceduralTexture;
     }
 }
 
@@ -164,5 +268,18 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         render(useCameraPostProcess?: boolean): void;
         resize(size: any, generateMipMaps: any): void;
+        /**
+         * Serializes this perlin noise procedural texture
+         * @returns a serialized perlin noise procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Perlin Noise Procedural Texture from parsed perlin noise procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing perlin noise procedural texture information
+         * @returns a parsed Perlin Noise Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): PerlinNoiseProceduralTexture;
     }
 }

dist/preview release/proceduralTexturesLibrary/babylonjs.proceduralTextures.js

@@ -25,6 +25,7 @@ var __decorate=this&&this.__decorate||function(e,t,r,c){var o,f=arguments.length
 var __extends=this&&this.__extends||function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,o){t.__proto__=o}||function(t,o){for(var n in o)o.hasOwnProperty(n)&&(t[n]=o[n])};return function(o,n){function r(){this.constructor=o}t(o,n),o.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}();
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var WoodProceduralTexture = /** @class */ (function (_super) {
@@ -62,6 +63,32 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this wood procedural texture
+         * @returns a serialized wood procedural texture object
+         */
+        WoodProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.WoodProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Wood Procedural Texture from parsed wood procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing wood procedural texture information
+         * @returns a parsed Wood Procedural Texture
+         */
+        WoodProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new WoodProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], WoodProceduralTexture.prototype, "ampScale", null);
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], WoodProceduralTexture.prototype, "woodColor", null);
         return WoodProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.WoodProceduralTexture = WoodProceduralTexture;
@@ -73,6 +100,7 @@ BABYLON.Effect.ShadersStore['woodProceduralTexturePixelShader'] = "precision hig
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var FireProceduralTexture = /** @class */ (function (_super) {
@@ -206,6 +234,38 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this fire procedural texture
+         * @returns a serialized fire procedural texture object
+         */
+        FireProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.FireProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Fire Procedural Texture from parsed fire procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing fire procedural texture information
+         * @returns a parsed Fire Procedural Texture
+         */
+        FireProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new FireProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], FireProceduralTexture.prototype, "fireColors", null);
+        __decorate([
+            BABYLON.serialize()
+        ], FireProceduralTexture.prototype, "time", null);
+        __decorate([
+            BABYLON.serializeAsVector2()
+        ], FireProceduralTexture.prototype, "speed", null);
+        __decorate([
+            BABYLON.serialize()
+        ], FireProceduralTexture.prototype, "alphaThreshold", null);
         return FireProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.FireProceduralTexture = FireProceduralTexture;
@@ -217,6 +277,7 @@ BABYLON.Effect.ShadersStore['fireProceduralTexturePixelShader'] = "precision hig
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var CloudProceduralTexture = /** @class */ (function (_super) {
@@ -254,6 +315,32 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this cloud procedural texture
+         * @returns a serialized cloud procedural texture object
+         */
+        CloudProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.CloudProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Cloud Procedural Texture from parsed cloud procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing cloud procedural texture information
+         * @returns a parsed Cloud Procedural Texture
+         */
+        CloudProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new CloudProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor4()
+        ], CloudProceduralTexture.prototype, "skyColor", null);
+        __decorate([
+            BABYLON.serializeAsColor4()
+        ], CloudProceduralTexture.prototype, "cloudColor", null);
         return CloudProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.CloudProceduralTexture = CloudProceduralTexture;
@@ -265,6 +352,7 @@ BABYLON.Effect.ShadersStore['cloudProceduralTexturePixelShader'] = "precision hi
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var GrassProceduralTexture = /** @class */ (function (_super) {
@@ -308,6 +396,32 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this grass procedural texture
+         * @returns a serialized grass procedural texture object
+         */
+        GrassProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.GrassProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Grass Procedural Texture from parsed grass procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing grass procedural texture information
+         * @returns a parsed Grass Procedural Texture
+         */
+        GrassProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new GrassProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], GrassProceduralTexture.prototype, "grassColors", null);
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], GrassProceduralTexture.prototype, "groundColor", null);
         return GrassProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.GrassProceduralTexture = GrassProceduralTexture;
@@ -319,6 +433,7 @@ BABYLON.Effect.ShadersStore['grassProceduralTexturePixelShader'] = "precision hi
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var RoadProceduralTexture = /** @class */ (function (_super) {
@@ -343,6 +458,29 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this road procedural texture
+         * @returns a serialized road procedural texture object
+         */
+        RoadProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.RoadProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Road Procedural Texture from parsed road procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing road procedural texture information
+         * @returns a parsed Road Procedural Texture
+         */
+        RoadProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new RoadProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsColor3()
+        ], RoadProceduralTexture.prototype, "roadColor", null);
         return RoadProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.RoadProceduralTexture = RoadProceduralTexture;
@@ -461,6 +599,7 @@ BABYLON.Effect.ShadersStore['brickProceduralTexturePixelShader'] = "precision hi
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var MarbleProceduralTexture = /** @class */ (function (_super) {
@@ -524,6 +663,38 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this marble procedural texture
+         * @returns a serialized marble procedural texture object
+         */
+        MarbleProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.MarbleProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Marble Procedural Texture from parsed marble procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing marble procedural texture information
+         * @returns a parsed Marble Procedural Texture
+         */
+        MarbleProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new MarbleProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "numberOfTilesHeight", null);
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "amplitude", null);
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "numberOfTilesWidth", null);
+        __decorate([
+            BABYLON.serialize()
+        ], MarbleProceduralTexture.prototype, "jointColor", null);
         return MarbleProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.MarbleProceduralTexture = MarbleProceduralTexture;
@@ -535,6 +706,7 @@ BABYLON.Effect.ShadersStore['marbleProceduralTexturePixelShader'] = "precision h
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var StarfieldProceduralTexture = /** @class */ (function (_super) {
@@ -689,6 +861,59 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this starfield procedural texture
+         * @returns a serialized starfield procedural texture object
+         */
+        StarfieldProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.StarfieldProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Starfield Procedural Texture from parsed startfield procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing startfield procedural texture information
+         * @returns a parsed Starfield Procedural Texture
+         */
+        StarfieldProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new StarfieldProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "time", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "alpha", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "beta", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "formuparam", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "stepsize", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "zoom", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "tile", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "brightness", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "darkmatter", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "distfading", null);
+        __decorate([
+            BABYLON.serialize()
+        ], StarfieldProceduralTexture.prototype, "saturation", null);
         return StarfieldProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.StarfieldProceduralTexture = StarfieldProceduralTexture;
@@ -700,6 +925,7 @@ BABYLON.Effect.ShadersStore['starfieldProceduralTexturePixelShader'] = "precisio
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var NormalMapProceduralTexture = /** @class */ (function (_super) {
@@ -732,6 +958,29 @@ var BABYLON;
             enumerable: true,
             configurable: true
         });
+        /**
+         * Serializes this normal map procedural texture
+         * @returns a serialized normal map procedural texture object
+         */
+        NormalMapProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.NormalMapProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Normal Map Procedural Texture from parsed normal map procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing normal map procedural texture information
+         * @returns a parsed Normal Map Procedural Texture
+         */
+        NormalMapProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new NormalMapProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serializeAsTexture()
+        ], NormalMapProceduralTexture.prototype, "baseTexture", null);
         return NormalMapProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.NormalMapProceduralTexture = NormalMapProceduralTexture;
@@ -743,6 +992,7 @@ BABYLON.Effect.ShadersStore['normalMapProceduralTexturePixelShader'] = "precisio
 
 
 
+
 var BABYLON;
 (function (BABYLON) {
     var PerlinNoiseProceduralTexture = /** @class */ (function (_super) {
@@ -775,6 +1025,35 @@ var BABYLON;
         PerlinNoiseProceduralTexture.prototype.resize = function (size, generateMipMaps) {
             _super.prototype.resize.call(this, size, generateMipMaps);
         };
+        /**
+         * Serializes this perlin noise procedural texture
+         * @returns a serialized perlin noise procedural texture object
+         */
+        PerlinNoiseProceduralTexture.prototype.serialize = function () {
+            var serializationObject = BABYLON.SerializationHelper.Serialize(this, _super.prototype.serialize.call(this));
+            serializationObject.customType = "BABYLON.PerlinNoiseProceduralTexture";
+            return serializationObject;
+        };
+        /**
+         * Creates a Perlin Noise Procedural Texture from parsed perlin noise procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing perlin noise procedural texture information
+         * @returns a parsed Perlin Noise Procedural Texture
+         */
+        PerlinNoiseProceduralTexture.Parse = function (parsedTexture, scene, rootUrl) {
+            var texture = BABYLON.SerializationHelper.Parse(function () { return new PerlinNoiseProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps); }, parsedTexture, scene, rootUrl);
+            return texture;
+        };
+        __decorate([
+            BABYLON.serialize()
+        ], PerlinNoiseProceduralTexture.prototype, "time", void 0);
+        __decorate([
+            BABYLON.serialize()
+        ], PerlinNoiseProceduralTexture.prototype, "speed", void 0);
+        __decorate([
+            BABYLON.serialize()
+        ], PerlinNoiseProceduralTexture.prototype, "translationSpeed", void 0);
         return PerlinNoiseProceduralTexture;
     }(BABYLON.ProceduralTexture));
     BABYLON.PerlinNoiseProceduralTexture = PerlinNoiseProceduralTexture;

dist/preview release/proceduralTexturesLibrary/babylonjs.proceduralTextures.module.d.ts

@@ -12,6 +12,19 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         ampScale: number;
         woodColor: Color3;
+        /**
+         * Serializes this wood procedural texture
+         * @returns a serialized wood procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Wood Procedural Texture from parsed wood procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing wood procedural texture information
+         * @returns a parsed Wood Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): WoodProceduralTexture;
     }
 }
 
@@ -34,6 +47,19 @@ declare module BABYLON {
         time: number;
         speed: Vector2;
         alphaThreshold: number;
+        /**
+         * Serializes this fire procedural texture
+         * @returns a serialized fire procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Fire Procedural Texture from parsed fire procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing fire procedural texture information
+         * @returns a parsed Fire Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): FireProceduralTexture;
     }
 }
 
@@ -46,6 +72,19 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         skyColor: Color4;
         cloudColor: Color4;
+        /**
+         * Serializes this cloud procedural texture
+         * @returns a serialized cloud procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Cloud Procedural Texture from parsed cloud procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing cloud procedural texture information
+         * @returns a parsed Cloud Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): CloudProceduralTexture;
     }
 }
 
@@ -58,6 +97,19 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         grassColors: Color3[];
         groundColor: Color3;
+        /**
+         * Serializes this grass procedural texture
+         * @returns a serialized grass procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Grass Procedural Texture from parsed grass procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing grass procedural texture information
+         * @returns a parsed Grass Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): GrassProceduralTexture;
     }
 }
 
@@ -68,6 +120,19 @@ declare module BABYLON {
         constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean);
         updateShaderUniforms(): void;
         roadColor: Color3;
+        /**
+         * Serializes this road procedural texture
+         * @returns a serialized road procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Road Procedural Texture from parsed road procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing road procedural texture information
+         * @returns a parsed Road Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): RoadProceduralTexture;
     }
 }
 
@@ -113,6 +178,19 @@ declare module BABYLON {
         amplitude: number;
         numberOfTilesWidth: number;
         jointColor: Color3;
+        /**
+         * Serializes this marble procedural texture
+         * @returns a serialized marble procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Marble Procedural Texture from parsed marble procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing marble procedural texture information
+         * @returns a parsed Marble Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): MarbleProceduralTexture;
     }
 }
 
@@ -143,6 +221,19 @@ declare module BABYLON {
         darkmatter: number;
         distfading: number;
         saturation: number;
+        /**
+         * Serializes this starfield procedural texture
+         * @returns a serialized starfield procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Starfield Procedural Texture from parsed startfield procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing startfield procedural texture information
+         * @returns a parsed Starfield Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): StarfieldProceduralTexture;
     }
 }
 
@@ -155,6 +246,19 @@ declare module BABYLON {
         render(useCameraPostProcess?: boolean): void;
         resize(size: any, generateMipMaps: any): void;
         baseTexture: Texture;
+        /**
+         * Serializes this normal map procedural texture
+         * @returns a serialized normal map procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Normal Map Procedural Texture from parsed normal map procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing normal map procedural texture information
+         * @returns a parsed Normal Map Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): NormalMapProceduralTexture;
     }
 }
 
@@ -169,5 +273,18 @@ declare module BABYLON {
         updateShaderUniforms(): void;
         render(useCameraPostProcess?: boolean): void;
         resize(size: any, generateMipMaps: any): void;
+        /**
+         * Serializes this perlin noise procedural texture
+         * @returns a serialized perlin noise procedural texture object
+         */
+        serialize(): any;
+        /**
+         * Creates a Perlin Noise Procedural Texture from parsed perlin noise procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing perlin noise procedural texture information
+         * @returns a parsed Perlin Noise Procedural Texture
+         */
+        static Parse(parsedTexture: any, scene: Scene, rootUrl: string): PerlinNoiseProceduralTexture;
     }
 }

dist/preview release/serializers/babylon.glTF2Serializer.d.ts

@@ -615,14 +615,14 @@ declare module BABYLON.GLTF2 {
         /**
          * Builds a texture from base64 string
          * @param base64Texture base64 texture string
-         * @param textureName Name to use for the texture
+         * @param baseTextureName Name to use for the texture
          * @param mimeType image mime type for the texture
          * @param images array of images
          * @param textures array of textures
          * @param imageData map of image data
          * @returns glTF texture info, or null if the texture format is not supported
          */
-        private static _GetTextureInfoFromBase64(base64Texture, textureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData);
+        private static _GetTextureInfoFromBase64(base64Texture, baseTextureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData);
     }
 }
 

dist/preview release/serializers/babylon.glTF2Serializer.js

@@ -2153,13 +2153,13 @@ var BABYLON;
                 if (metallicRoughnessFactors) {
                     if (hasTextureCoords) {
                         if (metallicRoughnessFactors.baseColorTextureBase64) {
-                            var glTFBaseColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.baseColorTextureBase64, "bjsBaseColorTexture_" + (textures.length) + ".png", mimeType, images, textures, babylonPBRMaterial.albedoTexture ? babylonPBRMaterial.albedoTexture.coordinatesIndex : null, samplerIndex, imageData);
+                            var glTFBaseColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.baseColorTextureBase64, "bjsBaseColorTexture", mimeType, images, textures, babylonPBRMaterial.albedoTexture ? babylonPBRMaterial.albedoTexture.coordinatesIndex : null, samplerIndex, imageData);
                             if (glTFBaseColorTexture != null) {
                                 glTFPbrMetallicRoughness.baseColorTexture = glTFBaseColorTexture;
                             }
                         }
                         if (metallicRoughnessFactors.metallicRoughnessTextureBase64) {
-                            var glTFMRColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.metallicRoughnessTextureBase64, "bjsMetallicRoughnessTexture_" + (textures.length) + ".png", mimeType, images, textures, babylonPBRMaterial.reflectivityTexture ? babylonPBRMaterial.reflectivityTexture.coordinatesIndex : null, samplerIndex, imageData);
+                            var glTFMRColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.metallicRoughnessTextureBase64, "bjsMetallicRoughnessTexture", mimeType, images, textures, babylonPBRMaterial.reflectivityTexture ? babylonPBRMaterial.reflectivityTexture.coordinatesIndex : null, samplerIndex, imageData);
                             if (glTFMRColorTexture != null) {
                                 glTFPbrMetallicRoughness.metallicRoughnessTexture = glTFMRColorTexture;
                             }
@@ -2318,47 +2318,29 @@ var BABYLON;
                 else {
                     samplerIndex = foundSamplerIndex;
                 }
-                var textureName = BABYLON.Tools.RandomId();
-                var textureData = babylonTexture.getInternalTexture();
-                if (textureData != null) {
-                    textureName = textureData.url || textureName;
-                }
-                textureName = BABYLON.Tools.GetFilename(textureName);
-                var baseFile = textureName.split('.')[0];
-                var extension = "";
-                if (mimeType === "image/jpeg" /* JPEG */) {
-                    extension = ".jpg";
-                }
-                else if (mimeType === "image/png" /* PNG */) {
-                    extension = ".png";
-                }
-                else {
-                    return Promise.reject("Unsupported mime type " + mimeType);
-                }
-                textureName = baseFile + extension;
                 return this._SetAlphaToOneAsync(babylonTexture, useAlpha).then(function (texture) {
                     var pixels = _GLTFMaterial.GetPixelsFromTexture(texture);
                     var size = babylonTexture.getSize();
                     var base64Data = _this._CreateBase64FromCanvas(pixels, size.width, size.height, mimeType);
-                    var textureInfo = _this._GetTextureInfoFromBase64(base64Data, textureName, mimeType, images, textures, babylonTexture.coordinatesIndex, samplerIndex, imageData);
+                    var textureInfo = _this._GetTextureInfoFromBase64(base64Data, babylonTexture.name, mimeType, images, textures, babylonTexture.coordinatesIndex, samplerIndex, imageData);
                     return textureInfo;
                 });
             };
             /**
              * Builds a texture from base64 string
              * @param base64Texture base64 texture string
-             * @param textureName Name to use for the texture
+             * @param baseTextureName Name to use for the texture
              * @param mimeType image mime type for the texture
              * @param images array of images
              * @param textures array of textures
              * @param imageData map of image data
              * @returns glTF texture info, or null if the texture format is not supported
              */
-            _GLTFMaterial._GetTextureInfoFromBase64 = function (base64Texture, textureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData) {
+            _GLTFMaterial._GetTextureInfoFromBase64 = function (base64Texture, baseTextureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData) {
                 var textureInfo = null;
                 var glTFTexture = {
                     source: images.length,
-                    name: textureName
+                    name: baseTextureName
                 };
                 if (samplerIndex != null) {
                     glTFTexture.sampler = samplerIndex;
@@ -2370,9 +2352,15 @@ var BABYLON;
                     arr[i] = binStr.charCodeAt(i);
                 }
                 var imageValues = { data: arr, mimeType: mimeType };
+                var extension = mimeType === "image/jpeg" /* JPEG */ ? '.jpeg' : '.png';
+                var textureName = baseTextureName + extension;
+                if (textureName in imageData) {
+                    textureName = baseTextureName + "_" + BABYLON.Tools.RandomId() + extension;
+                }
                 imageData[textureName] = imageValues;
                 if (mimeType === "image/jpeg" /* JPEG */ || mimeType === "image/png" /* PNG */) {
                     var glTFImage = {
+                        name: baseTextureName,
                         uri: textureName
                     };
                     var foundIndex = null;
@@ -2397,6 +2385,9 @@ var BABYLON;
                         textureInfo.texCoord = texCoordIndex;
                     }
                 }
+                else {
+                    BABYLON.Tools.Error("Unsupported texture mime type " + mimeType);
+                }
                 return textureInfo;
             };
             /**

dist/preview release/serializers/babylonjs.serializers.d.ts

@@ -623,14 +623,14 @@ declare module BABYLON.GLTF2 {
         /**
          * Builds a texture from base64 string
          * @param base64Texture base64 texture string
-         * @param textureName Name to use for the texture
+         * @param baseTextureName Name to use for the texture
          * @param mimeType image mime type for the texture
          * @param images array of images
          * @param textures array of textures
          * @param imageData map of image data
          * @returns glTF texture info, or null if the texture format is not supported
          */
-        private static _GetTextureInfoFromBase64(base64Texture, textureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData);
+        private static _GetTextureInfoFromBase64(base64Texture, baseTextureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData);
     }
 }
 

dist/preview release/serializers/babylonjs.serializers.js

@@ -2303,13 +2303,13 @@ var BABYLON;
                 if (metallicRoughnessFactors) {
                     if (hasTextureCoords) {
                         if (metallicRoughnessFactors.baseColorTextureBase64) {
-                            var glTFBaseColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.baseColorTextureBase64, "bjsBaseColorTexture_" + (textures.length) + ".png", mimeType, images, textures, babylonPBRMaterial.albedoTexture ? babylonPBRMaterial.albedoTexture.coordinatesIndex : null, samplerIndex, imageData);
+                            var glTFBaseColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.baseColorTextureBase64, "bjsBaseColorTexture", mimeType, images, textures, babylonPBRMaterial.albedoTexture ? babylonPBRMaterial.albedoTexture.coordinatesIndex : null, samplerIndex, imageData);
                             if (glTFBaseColorTexture != null) {
                                 glTFPbrMetallicRoughness.baseColorTexture = glTFBaseColorTexture;
                             }
                         }
                         if (metallicRoughnessFactors.metallicRoughnessTextureBase64) {
-                            var glTFMRColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.metallicRoughnessTextureBase64, "bjsMetallicRoughnessTexture_" + (textures.length) + ".png", mimeType, images, textures, babylonPBRMaterial.reflectivityTexture ? babylonPBRMaterial.reflectivityTexture.coordinatesIndex : null, samplerIndex, imageData);
+                            var glTFMRColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.metallicRoughnessTextureBase64, "bjsMetallicRoughnessTexture", mimeType, images, textures, babylonPBRMaterial.reflectivityTexture ? babylonPBRMaterial.reflectivityTexture.coordinatesIndex : null, samplerIndex, imageData);
                             if (glTFMRColorTexture != null) {
                                 glTFPbrMetallicRoughness.metallicRoughnessTexture = glTFMRColorTexture;
                             }
@@ -2468,47 +2468,29 @@ var BABYLON;
                 else {
                     samplerIndex = foundSamplerIndex;
                 }
-                var textureName = BABYLON.Tools.RandomId();
-                var textureData = babylonTexture.getInternalTexture();
-                if (textureData != null) {
-                    textureName = textureData.url || textureName;
-                }
-                textureName = BABYLON.Tools.GetFilename(textureName);
-                var baseFile = textureName.split('.')[0];
-                var extension = "";
-                if (mimeType === "image/jpeg" /* JPEG */) {
-                    extension = ".jpg";
-                }
-                else if (mimeType === "image/png" /* PNG */) {
-                    extension = ".png";
-                }
-                else {
-                    return Promise.reject("Unsupported mime type " + mimeType);
-                }
-                textureName = baseFile + extension;
                 return this._SetAlphaToOneAsync(babylonTexture, useAlpha).then(function (texture) {
                     var pixels = _GLTFMaterial.GetPixelsFromTexture(texture);
                     var size = babylonTexture.getSize();
                     var base64Data = _this._CreateBase64FromCanvas(pixels, size.width, size.height, mimeType);
-                    var textureInfo = _this._GetTextureInfoFromBase64(base64Data, textureName, mimeType, images, textures, babylonTexture.coordinatesIndex, samplerIndex, imageData);
+                    var textureInfo = _this._GetTextureInfoFromBase64(base64Data, babylonTexture.name, mimeType, images, textures, babylonTexture.coordinatesIndex, samplerIndex, imageData);
                     return textureInfo;
                 });
             };
             /**
              * Builds a texture from base64 string
              * @param base64Texture base64 texture string
-             * @param textureName Name to use for the texture
+             * @param baseTextureName Name to use for the texture
              * @param mimeType image mime type for the texture
              * @param images array of images
              * @param textures array of textures
              * @param imageData map of image data
              * @returns glTF texture info, or null if the texture format is not supported
              */
-            _GLTFMaterial._GetTextureInfoFromBase64 = function (base64Texture, textureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData) {
+            _GLTFMaterial._GetTextureInfoFromBase64 = function (base64Texture, baseTextureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData) {
                 var textureInfo = null;
                 var glTFTexture = {
                     source: images.length,
-                    name: textureName
+                    name: baseTextureName
                 };
                 if (samplerIndex != null) {
                     glTFTexture.sampler = samplerIndex;
@@ -2520,9 +2502,15 @@ var BABYLON;
                     arr[i] = binStr.charCodeAt(i);
                 }
                 var imageValues = { data: arr, mimeType: mimeType };
+                var extension = mimeType === "image/jpeg" /* JPEG */ ? '.jpeg' : '.png';
+                var textureName = baseTextureName + extension;
+                if (textureName in imageData) {
+                    textureName = baseTextureName + "_" + BABYLON.Tools.RandomId() + extension;
+                }
                 imageData[textureName] = imageValues;
                 if (mimeType === "image/jpeg" /* JPEG */ || mimeType === "image/png" /* PNG */) {
                     var glTFImage = {
+                        name: baseTextureName,
                         uri: textureName
                     };
                     var foundIndex = null;
@@ -2547,6 +2535,9 @@ var BABYLON;
                         textureInfo.texCoord = texCoordIndex;
                     }
                 }
+                else {
+                    BABYLON.Tools.Error("Unsupported texture mime type " + mimeType);
+                }
                 return textureInfo;
             };
             /**

dist/preview release/serializers/babylonjs.serializers.module.d.ts

@@ -630,14 +630,14 @@ declare module BABYLON.GLTF2 {
         /**
          * Builds a texture from base64 string
          * @param base64Texture base64 texture string
-         * @param textureName Name to use for the texture
+         * @param baseTextureName Name to use for the texture
          * @param mimeType image mime type for the texture
          * @param images array of images
          * @param textures array of textures
          * @param imageData map of image data
          * @returns glTF texture info, or null if the texture format is not supported
          */
-        private static _GetTextureInfoFromBase64(base64Texture, textureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData);
+        private static _GetTextureInfoFromBase64(base64Texture, baseTextureName, mimeType, images, textures, texCoordIndex, samplerIndex, imageData);
     }
 }
 

dist/preview release/viewer/babylon.viewer.max.js

@@ -14615,6 +14615,13 @@ var BABYLON;
         };
         // Textures
         /**
+         * Clears the list of texture accessible through engine.
+         * This can help preventing texture load conflict due to name collision.
+         */
+        Engine.prototype.clearInternalTexturesCache = function () {
+            this._internalTexturesCache = [];
+        };
+        /**
          * Force the entire cache to be cleared
          * You should not have to use this function unless your engine needs to share the webGL context with another engine
          * @param bruteForce defines a boolean to force clearing ALL caches (including stencil, detoh and alpha states)
@@ -87466,6 +87473,7 @@ var BABYLON;
             this.BJSINSPECTOR = typeof INSPECTOR !== 'undefined' ? INSPECTOR : undefined;
             this._scene = scene;
             // load inspector using require, if it doesn't exist on the global namespace.
+            this.onGlobalPropertyChange = new Array();
         }
         /** Creates the inspector window. */
         DebugLayer.prototype._createInspector = function (config) {
@@ -87534,6 +87542,11 @@ var BABYLON;
         DebugLayer.prototype.getActiveTab = function () {
             return this._inspector ? this._inspector.getActiveTabIndex() : -1;
         };
+        DebugLayer.prototype.onGlobalPropertyChangeCallback = function (result) {
+            this.onGlobalPropertyChange.forEach(function (callback) {
+                callback(result);
+            });
+        };
         DebugLayer.InspectorURL = 'https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js';
         return DebugLayer;
     }());
@@ -100419,7 +100432,9 @@ var BABYLON;
                 // Fog
                 BABYLON.MaterialHelper.BindFogParameters(scene, mesh, this._activeEffect);
                 // image processing
-                this._imageProcessingConfiguration.bind(this._activeEffect);
+                if (this._imageProcessingConfiguration) {
+                    this._imageProcessingConfiguration.bind(this._activeEffect);
+                }
             }
             this._uniformBuffer.update();
             this._afterBind(mesh);

dist/preview release/what's new.md

@@ -8,6 +8,7 @@
 - New GUI 3D controls toolset. [Complete doc + demos](http://doc.babylonjs.com/how_to/gui3d) ([Deltakosh](https://github.com/deltakosh))
 - Added [Environment Texture Tools](https://doc.babylonjs.com/how_to/physically_based_rendering#creating-a-compressed-environment-texture) to reduce the size of the usual .DDS file ([sebavan](http://www.github.com/sebavan))
 - New GUI control: the [Grid](http://doc.babylonjs.com/how_to/gui#grid) ([Deltakosh](https://github.com/deltakosh))
+- New `serialize` and `Parse` functions to serialize and parse all procedural textures from the Procedural Textures Library ([julien-moreau](https://github.com/julien-moreau))
 
 ## Updates
 

proceduralTexturesLibrary/src/cloud/babylon.cloudProceduralTexture.ts

@@ -15,6 +15,7 @@ module BABYLON {
             this.setColor4("cloudColor", this._cloudColor);
         }
     
+        @serializeAsColor4()
         public get skyColor(): Color4 {
             return this._skyColor;
         }
@@ -24,6 +25,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
     
+        @serializeAsColor4()
         public get cloudColor(): Color4 {
             return this._cloudColor;
         }
@@ -32,5 +34,29 @@ module BABYLON {
             this._cloudColor = value;
             this.updateShaderUniforms();
         }
+
+        /**
+         * Serializes this cloud procedural texture
+         * @returns a serialized cloud procedural texture object
+         */
+        public serialize(): any {
+            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+            serializationObject.customType = "BABYLON.CloudProceduralTexture";
+
+            return serializationObject;
+        }
+
+        /**
+         * Creates a Cloud Procedural Texture from parsed cloud procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing cloud procedural texture information
+         * @returns a parsed Cloud Procedural Texture
+         */
+        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): CloudProceduralTexture {
+            var texture = SerializationHelper.Parse(() => new CloudProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+            return texture;
+        }
     }
 }

proceduralTexturesLibrary/src/fire/babylon.fireProceduralTexture.ts

@@ -79,6 +79,7 @@ module BABYLON {
             ];
         }
 
+        @serializeAsColor3()
         public get fireColors(): Color3[] {
             return this._fireColors;
         }
@@ -88,6 +89,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
 
+        @serialize()
         public get time(): number {
             return this._time;
         }
@@ -97,6 +99,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
 
+        @serializeAsVector2()
         public get speed(): Vector2 {
             return this._speed;
         }
@@ -106,6 +109,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
 
+        @serialize()
         public get alphaThreshold(): number {
             return this._alphaThreshold;
         }
@@ -114,5 +118,29 @@ module BABYLON {
             this._alphaThreshold = value;
             this.updateShaderUniforms();
         }
+
+        /**
+         * Serializes this fire procedural texture
+         * @returns a serialized fire procedural texture object
+         */
+        public serialize(): any {
+            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+            serializationObject.customType = "BABYLON.FireProceduralTexture";
+
+            return serializationObject;
+        }
+
+        /**
+         * Creates a Fire Procedural Texture from parsed fire procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing fire procedural texture information
+         * @returns a parsed Fire Procedural Texture
+         */
+        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): FireProceduralTexture {
+            var texture = SerializationHelper.Parse(() => new FireProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+            return texture;
+        }
     }
 }

proceduralTexturesLibrary/src/grass/babylon.grassProceduralTexture.ts

@@ -24,6 +24,7 @@ module BABYLON {
             this.setColor3("groundColor", this._groundColor);
         }
 
+        @serializeAsColor3()
         public get grassColors(): Color3[] {
             return this._grassColors;
         }
@@ -33,6 +34,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
 
+        @serializeAsColor3()
         public get groundColor(): Color3 {
             return this._groundColor;
         }
@@ -41,5 +43,29 @@ module BABYLON {
             this._groundColor = value;
             this.updateShaderUniforms();
         }
+
+        /**
+         * Serializes this grass procedural texture
+         * @returns a serialized grass procedural texture object
+         */
+        public serialize(): any {
+            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+            serializationObject.customType = "BABYLON.GrassProceduralTexture";
+
+            return serializationObject;
+        }
+
+        /**
+         * Creates a Grass Procedural Texture from parsed grass procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing grass procedural texture information
+         * @returns a parsed Grass Procedural Texture
+         */
+        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): GrassProceduralTexture {
+            var texture = SerializationHelper.Parse(() => new GrassProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+            return texture;
+        }
     }
 }

proceduralTexturesLibrary/src/marble/babylon.marbleProceduralTexture.ts

@@ -19,6 +19,7 @@ module BABYLON {
             this.setColor3("jointColor", this._jointColor);
         }
 
+        @serialize()
         public get numberOfTilesHeight(): number {
             return this._numberOfTilesHeight;
         }
@@ -28,6 +29,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
         
+        @serialize()
         public get amplitude(): number {
             return this._amplitude;
         }
@@ -37,6 +39,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
 
+        @serialize()
         public get numberOfTilesWidth(): number {
             return this._numberOfTilesWidth;
         }
@@ -46,6 +49,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
 
+        @serialize()
         public get jointColor(): Color3 {
             return this._jointColor;
         }
@@ -54,5 +58,29 @@ module BABYLON {
             this._jointColor = value;
             this.updateShaderUniforms();
         }
+
+        /**
+         * Serializes this marble procedural texture
+         * @returns a serialized marble procedural texture object
+         */
+        public serialize(): any {
+            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+            serializationObject.customType = "BABYLON.MarbleProceduralTexture";
+
+            return serializationObject;
+        }
+
+        /**
+         * Creates a Marble Procedural Texture from parsed marble procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing marble procedural texture information
+         * @returns a parsed Marble Procedural Texture
+         */
+        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): MarbleProceduralTexture {
+            var texture = SerializationHelper.Parse(() => new MarbleProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+            return texture;
+        }
     }
 }

proceduralTexturesLibrary/src/normalMap/babylon.normalMapProceduralTexture.ts

@@ -25,6 +25,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
 
+        @serializeAsTexture()
         public get baseTexture(): Texture {
             return this._baseTexture;
         }
@@ -33,5 +34,29 @@ module BABYLON {
             this._baseTexture = texture;
             this.updateShaderUniforms();
         }
+
+        /**
+         * Serializes this normal map procedural texture
+         * @returns a serialized normal map procedural texture object
+         */
+        public serialize(): any {
+            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+            serializationObject.customType = "BABYLON.NormalMapProceduralTexture";
+
+            return serializationObject;
+        }
+
+        /**
+         * Creates a Normal Map Procedural Texture from parsed normal map procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing normal map procedural texture information
+         * @returns a parsed Normal Map Procedural Texture
+         */
+        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): NormalMapProceduralTexture {
+            var texture = SerializationHelper.Parse(() => new NormalMapProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+            return texture;
+        }
     }
 }

proceduralTexturesLibrary/src/perlinNoise/babylon.perlinNoiseProceduralTexture.ts

@@ -2,8 +2,13 @@
 
 module BABYLON {
     export class PerlinNoiseProceduralTexture extends ProceduralTexture {
+        @serialize()
         public time: number = 0.0;
+
+        @serialize()
         public speed: number = 1.0;
+
+        @serialize()
         public translationSpeed: number = 1.0;
 
         private _currentTranslation: number = 0;
@@ -38,5 +43,29 @@ module BABYLON {
         public resize(size: any, generateMipMaps: any): void {
             super.resize(size, generateMipMaps);
         }
+
+        /**
+         * Serializes this perlin noise procedural texture
+         * @returns a serialized perlin noise procedural texture object
+         */
+        public serialize(): any {
+            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+            serializationObject.customType = "BABYLON.PerlinNoiseProceduralTexture";
+
+            return serializationObject;
+        }
+
+        /**
+         * Creates a Perlin Noise Procedural Texture from parsed perlin noise procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing perlin noise procedural texture information
+         * @returns a parsed Perlin Noise Procedural Texture
+         */
+        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): PerlinNoiseProceduralTexture {
+            var texture = SerializationHelper.Parse(() => new PerlinNoiseProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+            return texture;
+        }
     }
 }

proceduralTexturesLibrary/src/road/babylon.roadProceduralTexture.ts

@@ -13,6 +13,7 @@ module BABYLON {
             this.setColor3("roadColor", this._roadColor);
         }
 
+        @serializeAsColor3()
         public get roadColor(): Color3 {
             return this._roadColor;
         }
@@ -21,5 +22,29 @@ module BABYLON {
             this._roadColor = value;
             this.updateShaderUniforms();
         }
+
+        /**
+         * Serializes this road procedural texture
+         * @returns a serialized road procedural texture object
+         */
+        public serialize(): any {
+            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+            serializationObject.customType = "BABYLON.RoadProceduralTexture";
+
+            return serializationObject;
+        }
+
+        /**
+         * Creates a Road Procedural Texture from parsed road procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing road procedural texture information
+         * @returns a parsed Road Procedural Texture
+         */
+        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): RoadProceduralTexture {
+            var texture = SerializationHelper.Parse(() => new RoadProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+            return texture;
+        }
     }
 }

proceduralTexturesLibrary/src/starfield/babylon.starfieldProceduralTexture.ts

@@ -33,6 +33,7 @@ module BABYLON {
             this.setFloat("saturation", this._saturation); 
         }
 
+        @serialize()
         public get time(): number {
             return this._time;
         }
@@ -42,6 +43,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }      
         
+        @serialize()
         public get alpha(): number {
             return this._alpha;
         }
@@ -51,6 +53,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }    
 
+        @serialize()
         public get beta(): number {
             return this._beta;
         }
@@ -60,6 +63,7 @@ module BABYLON {
             this.updateShaderUniforms();
         } 
 
+        @serialize()
         public get formuparam(): number {
             return this._formuparam;
         }
@@ -69,6 +73,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
         
+        @serialize()
         public get stepsize(): number {
             return this._stepsize;
         }
@@ -78,6 +83,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
         
+        @serialize()
         public get zoom(): number {
             return this._zoom;
         }
@@ -87,6 +93,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
         
+        @serialize()
         public get tile(): number {
             return this._tile;
         }
@@ -96,6 +103,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
         
+        @serialize()
         public get brightness(): number {
             return this._brightness;
         }
@@ -105,6 +113,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
         
+        @serialize()
         public get darkmatter(): number {
             return this._darkmatter;
         }
@@ -114,6 +123,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
         
+        @serialize()
         public get distfading(): number {
             return this._distfading;
         }
@@ -123,6 +133,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
         
+        @serialize()
         public get saturation(): number {
             return this._saturation;
         }
@@ -131,5 +142,29 @@ module BABYLON {
             this._saturation = value;
             this.updateShaderUniforms();
         }
+
+        /**
+         * Serializes this starfield procedural texture
+         * @returns a serialized starfield procedural texture object
+         */
+        public serialize(): any {
+            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+            serializationObject.customType = "BABYLON.StarfieldProceduralTexture";
+
+            return serializationObject;
+        }
+
+        /**
+         * Creates a Starfield Procedural Texture from parsed startfield procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing startfield procedural texture information
+         * @returns a parsed Starfield Procedural Texture
+         */
+        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): StarfieldProceduralTexture {
+            var texture = SerializationHelper.Parse(() => new StarfieldProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+            return texture;
+        }
     }
 }

proceduralTexturesLibrary/src/wood/babylon.woodProceduralTexture.ts

@@ -15,6 +15,7 @@ module BABYLON {
             this.setColor3("woodColor", this._woodColor);
         }
 
+        @serialize()
         public get ampScale(): number {
             return this._ampScale;
         }
@@ -24,6 +25,7 @@ module BABYLON {
             this.updateShaderUniforms();
         }
 
+        @serializeAsColor3()
         public get woodColor(): Color3 {
             return this._woodColor;
         }
@@ -32,5 +34,29 @@ module BABYLON {
             this._woodColor = value;
             this.updateShaderUniforms();
         }
+
+        /**
+         * Serializes this wood procedural texture
+         * @returns a serialized wood procedural texture object
+         */
+        public serialize(): any {
+            var serializationObject = SerializationHelper.Serialize(this, super.serialize());
+            serializationObject.customType = "BABYLON.WoodProceduralTexture";
+
+            return serializationObject;
+        }
+
+        /**
+         * Creates a Wood Procedural Texture from parsed wood procedural texture data
+         * @param parsedTexture defines parsed texture data
+         * @param scene defines the current scene
+         * @param rootUrl defines the root URL containing wood procedural texture information
+         * @returns a parsed Wood Procedural Texture
+         */
+        public static Parse(parsedTexture: any, scene: Scene, rootUrl: string): WoodProceduralTexture {
+            var texture = SerializationHelper.Parse(() => new WoodProceduralTexture(parsedTexture.name, parsedTexture._size, scene, undefined, parsedTexture._generateMipMaps), parsedTexture, scene, rootUrl);
+
+            return texture;
+        }
     }
 }

sandbox/index.js

@@ -83,6 +83,8 @@ if (BABYLON.Engine.isSupported()) {
     });
 
     var sceneLoaded = function (sceneFile, babylonScene) {
+        engine.clearInternalTexturesCache();
+
         // Clear dropdown that contains animation names
         dropdownContent.innerHTML = "";
         animationBar.style.display = "none";

serializers/src/glTF/2.0/babylon.glTFMaterial.ts

@@ -1001,13 +1001,13 @@ module BABYLON.GLTF2 {
             if (metallicRoughnessFactors) {
                 if (hasTextureCoords) {
                     if (metallicRoughnessFactors.baseColorTextureBase64) {
-                        const glTFBaseColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.baseColorTextureBase64, "bjsBaseColorTexture_" + (textures.length) + ".png", mimeType, images, textures, babylonPBRMaterial.albedoTexture ? babylonPBRMaterial.albedoTexture.coordinatesIndex : null, samplerIndex, imageData);
+                        const glTFBaseColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.baseColorTextureBase64, "bjsBaseColorTexture", mimeType, images, textures, babylonPBRMaterial.albedoTexture ? babylonPBRMaterial.albedoTexture.coordinatesIndex : null, samplerIndex, imageData);
                         if (glTFBaseColorTexture != null) {
                             glTFPbrMetallicRoughness.baseColorTexture = glTFBaseColorTexture;
                         }
                     }
                     if (metallicRoughnessFactors.metallicRoughnessTextureBase64) {
-                        const glTFMRColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.metallicRoughnessTextureBase64, "bjsMetallicRoughnessTexture_" + (textures.length) + ".png", mimeType, images, textures, babylonPBRMaterial.reflectivityTexture ? babylonPBRMaterial.reflectivityTexture.coordinatesIndex : null, samplerIndex, imageData);
+                        const glTFMRColorTexture = _GLTFMaterial._GetTextureInfoFromBase64(metallicRoughnessFactors.metallicRoughnessTextureBase64, "bjsMetallicRoughnessTexture", mimeType, images, textures, babylonPBRMaterial.reflectivityTexture ? babylonPBRMaterial.reflectivityTexture.coordinatesIndex : null, samplerIndex, imageData);
                         if (glTFMRColorTexture != null) {
                             glTFPbrMetallicRoughness.metallicRoughnessTexture = glTFMRColorTexture;
                         }
@@ -1184,35 +1184,12 @@ module BABYLON.GLTF2 {
             else {
                 samplerIndex = foundSamplerIndex;
             }
-
-            let textureName = Tools.RandomId();
-            let textureData = babylonTexture.getInternalTexture();
-
-            if (textureData != null) {
-                textureName = textureData.url || textureName;
-            }
-
-            textureName = Tools.GetFilename(textureName);
-            const baseFile = textureName.split('.')[0];
-            let extension = "";
-
-
-            if (mimeType === ImageMimeType.JPEG) {
-                extension = ".jpg";
-            }
-            else if (mimeType === ImageMimeType.PNG) {
-                extension = ".png";
-            }
-            else {
-                return Promise.reject("Unsupported mime type " + mimeType);
-            }
-            textureName = baseFile + extension;
-
+            
             return this._SetAlphaToOneAsync(babylonTexture, useAlpha).then((texture) => {
                 const pixels = _GLTFMaterial.GetPixelsFromTexture(texture);
                 const size = babylonTexture.getSize();
                 const base64Data = this._CreateBase64FromCanvas(pixels, size.width, size.height, mimeType);
-                const textureInfo = this._GetTextureInfoFromBase64(base64Data, textureName, mimeType, images, textures, babylonTexture.coordinatesIndex, samplerIndex, imageData);
+                const textureInfo = this._GetTextureInfoFromBase64(base64Data, babylonTexture.name, mimeType, images, textures, babylonTexture.coordinatesIndex, samplerIndex, imageData);
                 return textureInfo;
             });
         }
@@ -1220,19 +1197,19 @@ module BABYLON.GLTF2 {
         /**
          * Builds a texture from base64 string
          * @param base64Texture base64 texture string
-         * @param textureName Name to use for the texture
+         * @param baseTextureName Name to use for the texture
          * @param mimeType image mime type for the texture
          * @param images array of images
          * @param textures array of textures
          * @param imageData map of image data
          * @returns glTF texture info, or null if the texture format is not supported
          */
-        private static _GetTextureInfoFromBase64(base64Texture: string, textureName: string, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], texCoordIndex: Nullable<number>, samplerIndex: Nullable<number>, imageData: { [fileName: string]: { data: Uint8Array, mimeType: ImageMimeType } }): Nullable<ITextureInfo> {
+        private static _GetTextureInfoFromBase64(base64Texture: string, baseTextureName: string, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], texCoordIndex: Nullable<number>, samplerIndex: Nullable<number>, imageData: { [fileName: string]: { data: Uint8Array, mimeType: ImageMimeType } }): Nullable<ITextureInfo> {
             let textureInfo: Nullable<ITextureInfo> = null;
 
             const glTFTexture: ITexture = {
                 source: images.length,
-                name: textureName
+                name: baseTextureName
             };
             if (samplerIndex != null) {
                 glTFTexture.sampler = samplerIndex;
@@ -1246,9 +1223,16 @@ module BABYLON.GLTF2 {
             }
             const imageValues = { data: arr, mimeType: mimeType };
 
+            let extension = mimeType === ImageMimeType.JPEG ? '.jpeg' : '.png';
+            let textureName = baseTextureName + extension;
+            if (textureName in imageData) {
+                textureName = `${baseTextureName}_${Tools.RandomId()}${extension}`;
+            }
+
             imageData[textureName] = imageValues;
             if (mimeType === ImageMimeType.JPEG || mimeType === ImageMimeType.PNG) {
                 const glTFImage: IImage = {
+                    name: baseTextureName,
                     uri: textureName
                 }
                 let foundIndex: Nullable<number> = null;
@@ -1261,8 +1245,6 @@ module BABYLON.GLTF2 {
                 if (foundIndex == null) {
                     images.push(glTFImage);
                     glTFTexture.source = images.length - 1;
-
-
                 }
                 else {
                     glTFTexture.source = foundIndex;
@@ -1276,6 +1258,9 @@ module BABYLON.GLTF2 {
                     textureInfo.texCoord = texCoordIndex;
                 }
             }
+            else {
+                Tools.Error(`Unsupported texture mime type ${mimeType}`);
+            }
 
             return textureInfo;
         }

src/Engine/babylon.engine.ts

@@ -4055,6 +4055,14 @@
         // Textures
 
         /**
+         * Clears the list of texture accessible through engine.
+         * This can help preventing texture load conflict due to name collision.
+         */
+        public clearInternalTexturesCache() {
+            this._internalTexturesCache = [];
+        }
+
+        /**
          * Force the entire cache to be cleared
          * You should not have to use this function unless your engine needs to share the webGL context with another engine
          * @param bruteForce defines a boolean to force clearing ALL caches (including stencil, detoh and alpha states)

src/Materials/Background/babylon.backgroundMaterial.ts

@@ -1076,7 +1076,9 @@
                 MaterialHelper.BindFogParameters(scene, mesh, this._activeEffect);
 
                 // image processing
-                this._imageProcessingConfiguration.bind(this._activeEffect);
+                if (this._imageProcessingConfiguration) {
+                    this._imageProcessingConfiguration.bind(this._activeEffect);
+                }
             }
 
             this._uniformBuffer.update();

src/Math/babylon.math.ts

@@ -2095,6 +2095,13 @@
             return new Vector3(0.0, 1.0, 0.0);
         }
         /**
+         * Returns a new Vector3 set to (0.0, -1.0, 0.0)
+         * @returns a new down Vector3
+         */
+        public static Down(): Vector3 {
+            return new Vector3(0.0, -1.0, 0.0);
+        }
+        /**
          * Returns a new Vector3 set to (0.0, 0.0, 1.0)
          * @returns a new forward Vector3
          */