Nightly

dist/preview release/babylon.max.js

@@ -14802,7 +14802,9 @@ var BABYLON;
             if (!texture) {
                 return;
             }
+            // babylon's internalSizedFomat but gl's texImage2D internalFormat
             var internalSizedFomat = this._getRGBABufferInternalSizedFormat(type, format);
+            // babylon's internalFormat but gl's texImage2D format
             var internalFormat = this._getInternalFormat(format);
             var textureType = this._getWebGLTextureType(type);
             this._bindTextureDirectly(this._gl.TEXTURE_2D, texture, true);
@@ -17081,16 +17083,18 @@ var BABYLON;
         /** @hidden */
         Engine.prototype._getRGBABufferInternalSizedFormat = function (type, format) {
             if (this._webGLVersion === 1) {
-                if (format) {
+                if (format !== undefined) {
                     switch (format) {
                         case Engine.TEXTUREFORMAT_LUMINANCE:
                             return this._gl.LUMINANCE;
+                        case Engine.TEXTUREFORMAT_ALPHA:
+                            return this._gl.ALPHA;
                     }
                 }
                 return this._gl.RGBA;
             }
             if (type === Engine.TEXTURETYPE_FLOAT) {
-                if (format) {
+                if (format !== undefined) {
                     switch (format) {
                         case Engine.TEXTUREFORMAT_R32F:
                             return this._gl.R32F;
@@ -17105,12 +17109,14 @@ var BABYLON;
             else if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
                 return this._gl.RGBA16F;
             }
-            if (format) {
+            if (format !== undefined) {
                 switch (format) {
                     case Engine.TEXTUREFORMAT_LUMINANCE:
                         return this._gl.LUMINANCE;
                     case Engine.TEXTUREFORMAT_RGB:
                         return this._gl.RGB;
+                    case Engine.TEXTUREFORMAT_ALPHA:
+                        return this._gl.ALPHA;
                 }
             }
             return this._gl.RGBA;
@@ -52573,7 +52579,7 @@ var BABYLON;
             var highLimitValue = 0;
             this._previousDelay = delay;
             this._previousRatio = ratio;
-            if (((to > from && ratio > range) || (from > to && ratio < range)) && !loop) { // If we are out of range and not looping get back to caller
+            if (((to > from && ratio >= range) || (from > to && ratio <= range)) && !loop) { // If we are out of range and not looping get back to caller
                 returnValue = false;
                 highLimitValue = this._animation._getKeyValue(keys[keys.length - 1].value);
             }

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

@@ -14769,7 +14769,9 @@ var BABYLON;
             if (!texture) {
                 return;
             }
+            // babylon's internalSizedFomat but gl's texImage2D internalFormat
             var internalSizedFomat = this._getRGBABufferInternalSizedFormat(type, format);
+            // babylon's internalFormat but gl's texImage2D format
             var internalFormat = this._getInternalFormat(format);
             var textureType = this._getWebGLTextureType(type);
             this._bindTextureDirectly(this._gl.TEXTURE_2D, texture, true);
@@ -17048,16 +17050,18 @@ var BABYLON;
         /** @hidden */
         Engine.prototype._getRGBABufferInternalSizedFormat = function (type, format) {
             if (this._webGLVersion === 1) {
-                if (format) {
+                if (format !== undefined) {
                     switch (format) {
                         case Engine.TEXTUREFORMAT_LUMINANCE:
                             return this._gl.LUMINANCE;
+                        case Engine.TEXTUREFORMAT_ALPHA:
+                            return this._gl.ALPHA;
                     }
                 }
                 return this._gl.RGBA;
             }
             if (type === Engine.TEXTURETYPE_FLOAT) {
-                if (format) {
+                if (format !== undefined) {
                     switch (format) {
                         case Engine.TEXTUREFORMAT_R32F:
                             return this._gl.R32F;
@@ -17072,12 +17076,14 @@ var BABYLON;
             else if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
                 return this._gl.RGBA16F;
             }
-            if (format) {
+            if (format !== undefined) {
                 switch (format) {
                     case Engine.TEXTUREFORMAT_LUMINANCE:
                         return this._gl.LUMINANCE;
                     case Engine.TEXTUREFORMAT_RGB:
                         return this._gl.RGB;
+                    case Engine.TEXTUREFORMAT_ALPHA:
+                        return this._gl.ALPHA;
                 }
             }
             return this._gl.RGBA;
@@ -52540,7 +52546,7 @@ var BABYLON;
             var highLimitValue = 0;
             this._previousDelay = delay;
             this._previousRatio = ratio;
-            if (((to > from && ratio > range) || (from > to && ratio < range)) && !loop) { // If we are out of range and not looping get back to caller
+            if (((to > from && ratio >= range) || (from > to && ratio <= range)) && !loop) { // If we are out of range and not looping get back to caller
                 returnValue = false;
                 highLimitValue = this._animation._getKeyValue(keys[keys.length - 1].value);
             }

dist/preview release/es6.js

@@ -14769,7 +14769,9 @@ var BABYLON;
             if (!texture) {
                 return;
             }
+            // babylon's internalSizedFomat but gl's texImage2D internalFormat
             var internalSizedFomat = this._getRGBABufferInternalSizedFormat(type, format);
+            // babylon's internalFormat but gl's texImage2D format
             var internalFormat = this._getInternalFormat(format);
             var textureType = this._getWebGLTextureType(type);
             this._bindTextureDirectly(this._gl.TEXTURE_2D, texture, true);
@@ -17048,16 +17050,18 @@ var BABYLON;
         /** @hidden */
         Engine.prototype._getRGBABufferInternalSizedFormat = function (type, format) {
             if (this._webGLVersion === 1) {
-                if (format) {
+                if (format !== undefined) {
                     switch (format) {
                         case Engine.TEXTUREFORMAT_LUMINANCE:
                             return this._gl.LUMINANCE;
+                        case Engine.TEXTUREFORMAT_ALPHA:
+                            return this._gl.ALPHA;
                     }
                 }
                 return this._gl.RGBA;
             }
             if (type === Engine.TEXTURETYPE_FLOAT) {
-                if (format) {
+                if (format !== undefined) {
                     switch (format) {
                         case Engine.TEXTUREFORMAT_R32F:
                             return this._gl.R32F;
@@ -17072,12 +17076,14 @@ var BABYLON;
             else if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
                 return this._gl.RGBA16F;
             }
-            if (format) {
+            if (format !== undefined) {
                 switch (format) {
                     case Engine.TEXTUREFORMAT_LUMINANCE:
                         return this._gl.LUMINANCE;
                     case Engine.TEXTUREFORMAT_RGB:
                         return this._gl.RGB;
+                    case Engine.TEXTUREFORMAT_ALPHA:
+                        return this._gl.ALPHA;
                 }
             }
             return this._gl.RGBA;
@@ -52540,7 +52546,7 @@ var BABYLON;
             var highLimitValue = 0;
             this._previousDelay = delay;
             this._previousRatio = ratio;
-            if (((to > from && ratio > range) || (from > to && ratio < range)) && !loop) { // If we are out of range and not looping get back to caller
+            if (((to > from && ratio >= range) || (from > to && ratio <= range)) && !loop) { // If we are out of range and not looping get back to caller
                 returnValue = false;
                 highLimitValue = this._animation._getKeyValue(keys[keys.length - 1].value);
             }

dist/preview release/gui/babylon.gui.js

@@ -6778,20 +6778,12 @@ var BABYLON;
                     else {
                         this._frontMaterial = this._host.sharedMaterials["frontFluentMaterial"];
                     }
-                    // Plate
-                    if (!this._host.sharedMaterials["plateMaterial"]) {
-                        this._createPlateMaterial(mesh);
-                        this._host.sharedMaterials["plateMaterial"] = this._plateMaterial;
-                    }
-                    else {
-                        this._plateMaterial = this._host.sharedMaterials["plateMaterial"];
-                    }
                 }
                 else {
                     this._createBackMaterial(mesh);
                     this._createFrontMaterial(mesh);
-                    this._createPlateMaterial(mesh);
                 }
+                this._createPlateMaterial(mesh);
                 this._backPlate.material = this._backMaterial;
                 this._frontPlate.material = this._frontMaterial;
                 this._textPlate.material = this._plateMaterial;

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

@@ -78,6 +78,7 @@ declare module BABYLON.GLTF2 {
          * Stores all the generated material information, which represents the appearance of each primitive
          */
         private materials;
+        private materialMap;
         /**
          * Stores all the generated texture information, which is referenced by glTF materials
          */
@@ -421,7 +422,9 @@ declare module BABYLON.GLTF2 {
          * @param imageData mapping of texture names to base64 textures
          * @param hasTextureCoords specifies if texture coordinates are present on the material
          */
-        static _ConvertMaterialsToGLTFAsync(babylonMaterials: Material[], mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], imageData: {
+        static _ConvertMaterialsToGLTFAsync(babylonMaterials: Material[], mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], materialMap: {
+            [materialID: number]: number;
+        }, imageData: {
             [fileName: string]: {
                 data: Uint8Array;
                 mimeType: ImageMimeType;
@@ -469,7 +472,9 @@ declare module BABYLON.GLTF2 {
          * @param imageData map of image file name to data
          * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
          */
-        static _ConvertStandardMaterialAsync(babylonStandardMaterial: StandardMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], imageData: {
+        static _ConvertStandardMaterialAsync(babylonStandardMaterial: StandardMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], materialMap: {
+            [materialID: number]: number;
+        }, imageData: {
             [fileName: string]: {
                 data: Uint8Array;
                 mimeType: ImageMimeType;
@@ -492,7 +497,9 @@ declare module BABYLON.GLTF2 {
          * @param imageData map of image file name to data
          * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
          */
-        static _ConvertPBRMetallicRoughnessMaterialAsync(babylonPBRMetalRoughMaterial: PBRMetallicRoughnessMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], imageData: {
+        static _ConvertPBRMetallicRoughnessMaterialAsync(babylonPBRMetalRoughMaterial: PBRMetallicRoughnessMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], materialMap: {
+            [materialID: number]: number;
+        }, imageData: {
             [fileName: string]: {
                 data: Uint8Array;
                 mimeType: ImageMimeType;
@@ -589,13 +596,15 @@ declare module BABYLON.GLTF2 {
          * @param imageData map of image file name to data
          * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
          */
-        static _ConvertPBRMaterialAsync(babylonPBRMaterial: PBRMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], imageData: {
+        static _ConvertPBRMaterialAsync(babylonPBRMaterial: PBRMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], materialMap: {
+            [materialID: number]: number;
+        }, imageData: {
             [fileName: string]: {
                 data: Uint8Array;
                 mimeType: ImageMimeType;
             };
         }, hasTextureCoords: boolean): Promise<void>;
-        private static SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords);
+        private static SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords);
         private static GetPixelsFromTexture(babylonTexture);
         /**
          * Extracts a texture from a Babylon texture into file data and glTF data

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

@@ -79,6 +79,7 @@ var BABYLON;
                 this.nodes = [];
                 this.images = [];
                 this.materials = [];
+                this.materialMap = [];
                 this.textures = [];
                 this.samplers = [];
                 this.animations = [];
@@ -860,11 +861,11 @@ var BABYLON;
                                 else if (babylonMaterial instanceof BABYLON.MultiMaterial) {
                                     babylonMaterial = babylonMaterial.subMaterials[submesh.materialIndex];
                                     if (babylonMaterial) {
-                                        materialIndex = this.babylonScene.materials.indexOf(babylonMaterial);
+                                        materialIndex = this.materialMap[babylonMaterial.uniqueId];
                                     }
                                 }
                                 else {
-                                    materialIndex = this.babylonScene.materials.indexOf(babylonMaterial);
+                                    materialIndex = this.materialMap[babylonMaterial.uniqueId];
                                 }
                             }
                             var glTFMaterial = materialIndex != null ? this.materials[materialIndex] : null;
@@ -905,43 +906,41 @@ var BABYLON;
                                 this.accessors.push(accessor);
                                 meshPrimitive.indices = this.accessors.length - 1;
                             }
-                            if (babylonMaterial) {
-                                if (materialIndex != null && Object.keys(meshPrimitive.attributes).length > 0) {
-                                    var sideOrientation = this.babylonScene.materials[materialIndex].sideOrientation;
-                                    if (this.convertToRightHandedSystem && sideOrientation === BABYLON.Material.ClockWiseSideOrientation) {
-                                        //Overwrite the indices to be counter-clockwise
-                                        var byteOffset = indexBufferViewIndex != null ? this.bufferViews[indexBufferViewIndex].byteOffset : null;
-                                        if (byteOffset == null) {
-                                            byteOffset = 0;
-                                        }
-                                        var babylonIndices = null;
-                                        if (indexBufferViewIndex != null) {
-                                            babylonIndices = bufferMesh.getIndices();
-                                        }
-                                        if (babylonIndices) {
-                                            this.reorderIndicesBasedOnPrimitiveMode(submesh, primitiveMode, babylonIndices, byteOffset, binaryWriter);
-                                        }
-                                        else {
-                                            for (var _d = 0, attributeData_3 = attributeData; _d < attributeData_3.length; _d++) {
-                                                var attribute = attributeData_3[_d];
-                                                var vertexData = bufferMesh.getVerticesData(attribute.kind);
-                                                if (vertexData) {
-                                                    var byteOffset_1 = this.bufferViews[vertexAttributeBufferViews[attribute.kind]].byteOffset;
-                                                    if (!byteOffset_1) {
-                                                        byteOffset_1 = 0;
-                                                    }
-                                                    this.reorderVertexAttributeDataBasedOnPrimitiveMode(submesh, primitiveMode, sideOrientation, attribute.kind, vertexData, byteOffset_1, binaryWriter);
+                            if (materialIndex != null && Object.keys(meshPrimitive.attributes).length > 0) {
+                                var sideOrientation = this.babylonScene.materials[materialIndex].sideOrientation;
+                                if (this.convertToRightHandedSystem && sideOrientation === BABYLON.Material.ClockWiseSideOrientation) {
+                                    //Overwrite the indices to be counter-clockwise
+                                    var byteOffset = indexBufferViewIndex != null ? this.bufferViews[indexBufferViewIndex].byteOffset : null;
+                                    if (byteOffset == null) {
+                                        byteOffset = 0;
+                                    }
+                                    var babylonIndices = null;
+                                    if (indexBufferViewIndex != null) {
+                                        babylonIndices = bufferMesh.getIndices();
+                                    }
+                                    if (babylonIndices) {
+                                        this.reorderIndicesBasedOnPrimitiveMode(submesh, primitiveMode, babylonIndices, byteOffset, binaryWriter);
+                                    }
+                                    else {
+                                        for (var _d = 0, attributeData_3 = attributeData; _d < attributeData_3.length; _d++) {
+                                            var attribute = attributeData_3[_d];
+                                            var vertexData = bufferMesh.getVerticesData(attribute.kind);
+                                            if (vertexData) {
+                                                var byteOffset_1 = this.bufferViews[vertexAttributeBufferViews[attribute.kind]].byteOffset;
+                                                if (!byteOffset_1) {
+                                                    byteOffset_1 = 0;
                                                 }
+                                                this.reorderVertexAttributeDataBasedOnPrimitiveMode(submesh, primitiveMode, sideOrientation, attribute.kind, vertexData, byteOffset_1, binaryWriter);
                                             }
                                         }
                                     }
-                                    if (!uvCoordsPresent && GLTF2._GLTFMaterial._HasTexturesPresent(this.materials[materialIndex])) {
-                                        var newMat = GLTF2._GLTFMaterial._StripTexturesFromMaterial(this.materials[materialIndex]);
-                                        this.materials.push(newMat);
-                                        materialIndex = this.materials.length - 1;
-                                    }
-                                    meshPrimitive.material = materialIndex;
                                 }
+                                if (!uvCoordsPresent && GLTF2._GLTFMaterial._HasTexturesPresent(this.materials[materialIndex])) {
+                                    var newMat = GLTF2._GLTFMaterial._StripTexturesFromMaterial(this.materials[materialIndex]);
+                                    this.materials.push(newMat);
+                                    materialIndex = this.materials.length - 1;
+                                }
+                                meshPrimitive.material = materialIndex;
                             }
                             mesh.primitives.push(meshPrimitive);
                         }
@@ -961,7 +960,7 @@ var BABYLON;
                 var glTFNode;
                 var directDescendents;
                 var nodes = babylonScene.transformNodes.concat(babylonScene.meshes);
-                return GLTF2._GLTFMaterial._ConvertMaterialsToGLTFAsync(babylonScene.materials, "image/png" /* PNG */, this.images, this.textures, this.samplers, this.materials, this.imageData, true).then(function () {
+                return GLTF2._GLTFMaterial._ConvertMaterialsToGLTFAsync(babylonScene.materials, "image/png" /* PNG */, this.images, this.textures, this.samplers, this.materials, this.materialMap, this.imageData, true).then(function () {
                     _this.nodeMap = _this.createNodeMapAndAnimations(babylonScene, nodes, _this.shouldExportTransformNode, binaryWriter);
                     _this.totalByteLength = binaryWriter.getByteOffset();
                     // Build Hierarchy with the node map.
@@ -1342,18 +1341,18 @@ var BABYLON;
              * @param imageData mapping of texture names to base64 textures
              * @param hasTextureCoords specifies if texture coordinates are present on the material
              */
-            _GLTFMaterial._ConvertMaterialsToGLTFAsync = function (babylonMaterials, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords) {
+            _GLTFMaterial._ConvertMaterialsToGLTFAsync = function (babylonMaterials, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords) {
                 var promises = [];
                 for (var _i = 0, babylonMaterials_1 = babylonMaterials; _i < babylonMaterials_1.length; _i++) {
                     var babylonMaterial = babylonMaterials_1[_i];
                     if (babylonMaterial instanceof BABYLON.StandardMaterial) {
-                        promises.push(_GLTFMaterial._ConvertStandardMaterialAsync(babylonMaterial, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords));
+                        promises.push(_GLTFMaterial._ConvertStandardMaterialAsync(babylonMaterial, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords));
                     }
                     else if (babylonMaterial instanceof BABYLON.PBRMetallicRoughnessMaterial) {
-                        promises.push(_GLTFMaterial._ConvertPBRMetallicRoughnessMaterialAsync(babylonMaterial, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords));
+                        promises.push(_GLTFMaterial._ConvertPBRMetallicRoughnessMaterialAsync(babylonMaterial, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords));
                     }
                     else if (babylonMaterial instanceof BABYLON.PBRMaterial) {
-                        promises.push(_GLTFMaterial._ConvertPBRMaterialAsync(babylonMaterial, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords));
+                        promises.push(_GLTFMaterial._ConvertPBRMaterialAsync(babylonMaterial, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords));
                     }
                     else {
                         BABYLON.Tools.Warn("Unsupported material type: " + babylonMaterial.name);
@@ -1547,7 +1546,7 @@ var BABYLON;
              * @param imageData map of image file name to data
              * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
              */
-            _GLTFMaterial._ConvertStandardMaterialAsync = function (babylonStandardMaterial, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords) {
+            _GLTFMaterial._ConvertStandardMaterialAsync = function (babylonStandardMaterial, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords) {
                 var alphaMode = this._GetAlphaMode(babylonStandardMaterial);
                 var useAlpha = alphaMode !== "OPAQUE" /* OPAQUE */ ? true : false;
                 var promises = [];
@@ -1613,7 +1612,24 @@ var BABYLON;
                     glTFMaterial.emissiveFactor = babylonStandardMaterial.emissiveColor.asArray();
                 }
                 glTFMaterial.pbrMetallicRoughness = glTFPbrMetallicRoughness;
+                if (alphaMode !== "OPAQUE" /* OPAQUE */) {
+                    switch (alphaMode) {
+                        case "BLEND" /* BLEND */: {
+                            glTFMaterial.alphaMode = "BLEND" /* BLEND */;
+                            break;
+                        }
+                        case "MASK" /* MASK */: {
+                            glTFMaterial.alphaMode = "MASK" /* MASK */;
+                            glTFMaterial.alphaCutoff = babylonStandardMaterial.alphaCutOff;
+                            break;
+                        }
+                        default: {
+                            BABYLON.Tools.Warn("Unsupported alpha mode " + alphaMode);
+                        }
+                    }
+                }
                 materials.push(glTFMaterial);
+                materialMap[babylonStandardMaterial.uniqueId] = materials.length - 1;
                 return Promise.all(promises).then(function () { });
             };
             /**
@@ -1655,7 +1671,7 @@ var BABYLON;
              * @param imageData map of image file name to data
              * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
              */
-            _GLTFMaterial._ConvertPBRMetallicRoughnessMaterialAsync = function (babylonPBRMetalRoughMaterial, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords) {
+            _GLTFMaterial._ConvertPBRMetallicRoughnessMaterialAsync = function (babylonPBRMetalRoughMaterial, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords) {
                 var promises = [];
                 var glTFPbrMetallicRoughness = {};
                 if (babylonPBRMetalRoughMaterial.baseColor) {
@@ -1739,6 +1755,7 @@ var BABYLON;
                 }
                 glTFMaterial.pbrMetallicRoughness = glTFPbrMetallicRoughness;
                 materials.push(glTFMaterial);
+                materialMap[babylonPBRMetalRoughMaterial.uniqueId] = materials.length - 1;
                 return Promise.all(promises).then(function () { });
             };
             /**
@@ -2166,9 +2183,8 @@ var BABYLON;
              * @param imageData map of image file name to data
              * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
              */
-            _GLTFMaterial._ConvertPBRMaterialAsync = function (babylonPBRMaterial, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords) {
+            _GLTFMaterial._ConvertPBRMaterialAsync = function (babylonPBRMaterial, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords) {
                 var glTFPbrMetallicRoughness = {};
-                //  let metallicRoughness: Nullable<_IPBRMetallicRoughness>;
                 var glTFMaterial = {
                     name: babylonPBRMaterial.name
                 };
@@ -2183,15 +2199,15 @@ var BABYLON;
                         ];
                     }
                     return this._ConvertMetalRoughFactorsToMetallicRoughnessAsync(babylonPBRMaterial, mimeType, images, textures, samplers, glTFPbrMetallicRoughness, imageData, hasTextureCoords).then(function (metallicRoughness) {
-                        return _GLTFMaterial.SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords);
+                        return _GLTFMaterial.SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords);
                     });
                 }
                 else {
                     var metallicRoughness = this._ConvertSpecGlossFactorsToMetallicRoughness(babylonPBRMaterial, mimeType, images, textures, samplers, glTFPbrMetallicRoughness, imageData, hasTextureCoords);
-                    return _GLTFMaterial.SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords);
+                    return _GLTFMaterial.SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords);
                 }
             };
-            _GLTFMaterial.SetMetallicRoughnessPbrMaterial = function (metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords) {
+            _GLTFMaterial.SetMetallicRoughnessPbrMaterial = function (metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords) {
                 var promises = [];
                 if (metallicRoughness) {
                     var alphaMode = null;
@@ -2268,6 +2284,7 @@ var BABYLON;
                     }
                     glTFMaterial.pbrMetallicRoughness = glTFPbrMetallicRoughness;
                     materials.push(glTFMaterial);
+                    materialMap[babylonPBRMaterial.uniqueId] = materials.length - 1;
                 }
                 return Promise.all(promises).then(function (result) { });
             };
@@ -2305,7 +2322,7 @@ var BABYLON;
                 else {
                     samplerIndex = foundSamplerIndex;
                 }
-                var textureName = "texture_" + (textures.length - 1).toString();
+                var textureName = BABYLON.Tools.RandomId();
                 var textureData = babylonTexture.getInternalTexture();
                 if (textureData != null) {
                     textureName = textureData.url || textureName;

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

@@ -86,6 +86,7 @@ declare module BABYLON.GLTF2 {
          * Stores all the generated material information, which represents the appearance of each primitive
          */
         private materials;
+        private materialMap;
         /**
          * Stores all the generated texture information, which is referenced by glTF materials
          */
@@ -429,7 +430,9 @@ declare module BABYLON.GLTF2 {
          * @param imageData mapping of texture names to base64 textures
          * @param hasTextureCoords specifies if texture coordinates are present on the material
          */
-        static _ConvertMaterialsToGLTFAsync(babylonMaterials: Material[], mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], imageData: {
+        static _ConvertMaterialsToGLTFAsync(babylonMaterials: Material[], mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], materialMap: {
+            [materialID: number]: number;
+        }, imageData: {
             [fileName: string]: {
                 data: Uint8Array;
                 mimeType: ImageMimeType;
@@ -477,7 +480,9 @@ declare module BABYLON.GLTF2 {
          * @param imageData map of image file name to data
          * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
          */
-        static _ConvertStandardMaterialAsync(babylonStandardMaterial: StandardMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], imageData: {
+        static _ConvertStandardMaterialAsync(babylonStandardMaterial: StandardMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], materialMap: {
+            [materialID: number]: number;
+        }, imageData: {
             [fileName: string]: {
                 data: Uint8Array;
                 mimeType: ImageMimeType;
@@ -500,7 +505,9 @@ declare module BABYLON.GLTF2 {
          * @param imageData map of image file name to data
          * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
          */
-        static _ConvertPBRMetallicRoughnessMaterialAsync(babylonPBRMetalRoughMaterial: PBRMetallicRoughnessMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], imageData: {
+        static _ConvertPBRMetallicRoughnessMaterialAsync(babylonPBRMetalRoughMaterial: PBRMetallicRoughnessMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], materialMap: {
+            [materialID: number]: number;
+        }, imageData: {
             [fileName: string]: {
                 data: Uint8Array;
                 mimeType: ImageMimeType;
@@ -597,13 +604,15 @@ declare module BABYLON.GLTF2 {
          * @param imageData map of image file name to data
          * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
          */
-        static _ConvertPBRMaterialAsync(babylonPBRMaterial: PBRMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], imageData: {
+        static _ConvertPBRMaterialAsync(babylonPBRMaterial: PBRMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], materialMap: {
+            [materialID: number]: number;
+        }, imageData: {
             [fileName: string]: {
                 data: Uint8Array;
                 mimeType: ImageMimeType;
             };
         }, hasTextureCoords: boolean): Promise<void>;
-        private static SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords);
+        private static SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords);
         private static GetPixelsFromTexture(babylonTexture);
         /**
          * Extracts a texture from a Babylon texture into file data and glTF data

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

@@ -229,6 +229,7 @@ var BABYLON;
                 this.nodes = [];
                 this.images = [];
                 this.materials = [];
+                this.materialMap = [];
                 this.textures = [];
                 this.samplers = [];
                 this.animations = [];
@@ -1010,11 +1011,11 @@ var BABYLON;
                                 else if (babylonMaterial instanceof BABYLON.MultiMaterial) {
                                     babylonMaterial = babylonMaterial.subMaterials[submesh.materialIndex];
                                     if (babylonMaterial) {
-                                        materialIndex = this.babylonScene.materials.indexOf(babylonMaterial);
+                                        materialIndex = this.materialMap[babylonMaterial.uniqueId];
                                     }
                                 }
                                 else {
-                                    materialIndex = this.babylonScene.materials.indexOf(babylonMaterial);
+                                    materialIndex = this.materialMap[babylonMaterial.uniqueId];
                                 }
                             }
                             var glTFMaterial = materialIndex != null ? this.materials[materialIndex] : null;
@@ -1055,43 +1056,41 @@ var BABYLON;
                                 this.accessors.push(accessor);
                                 meshPrimitive.indices = this.accessors.length - 1;
                             }
-                            if (babylonMaterial) {
-                                if (materialIndex != null && Object.keys(meshPrimitive.attributes).length > 0) {
-                                    var sideOrientation = this.babylonScene.materials[materialIndex].sideOrientation;
-                                    if (this.convertToRightHandedSystem && sideOrientation === BABYLON.Material.ClockWiseSideOrientation) {
-                                        //Overwrite the indices to be counter-clockwise
-                                        var byteOffset = indexBufferViewIndex != null ? this.bufferViews[indexBufferViewIndex].byteOffset : null;
-                                        if (byteOffset == null) {
-                                            byteOffset = 0;
-                                        }
-                                        var babylonIndices = null;
-                                        if (indexBufferViewIndex != null) {
-                                            babylonIndices = bufferMesh.getIndices();
-                                        }
-                                        if (babylonIndices) {
-                                            this.reorderIndicesBasedOnPrimitiveMode(submesh, primitiveMode, babylonIndices, byteOffset, binaryWriter);
-                                        }
-                                        else {
-                                            for (var _d = 0, attributeData_3 = attributeData; _d < attributeData_3.length; _d++) {
-                                                var attribute = attributeData_3[_d];
-                                                var vertexData = bufferMesh.getVerticesData(attribute.kind);
-                                                if (vertexData) {
-                                                    var byteOffset_1 = this.bufferViews[vertexAttributeBufferViews[attribute.kind]].byteOffset;
-                                                    if (!byteOffset_1) {
-                                                        byteOffset_1 = 0;
-                                                    }
-                                                    this.reorderVertexAttributeDataBasedOnPrimitiveMode(submesh, primitiveMode, sideOrientation, attribute.kind, vertexData, byteOffset_1, binaryWriter);
+                            if (materialIndex != null && Object.keys(meshPrimitive.attributes).length > 0) {
+                                var sideOrientation = this.babylonScene.materials[materialIndex].sideOrientation;
+                                if (this.convertToRightHandedSystem && sideOrientation === BABYLON.Material.ClockWiseSideOrientation) {
+                                    //Overwrite the indices to be counter-clockwise
+                                    var byteOffset = indexBufferViewIndex != null ? this.bufferViews[indexBufferViewIndex].byteOffset : null;
+                                    if (byteOffset == null) {
+                                        byteOffset = 0;
+                                    }
+                                    var babylonIndices = null;
+                                    if (indexBufferViewIndex != null) {
+                                        babylonIndices = bufferMesh.getIndices();
+                                    }
+                                    if (babylonIndices) {
+                                        this.reorderIndicesBasedOnPrimitiveMode(submesh, primitiveMode, babylonIndices, byteOffset, binaryWriter);
+                                    }
+                                    else {
+                                        for (var _d = 0, attributeData_3 = attributeData; _d < attributeData_3.length; _d++) {
+                                            var attribute = attributeData_3[_d];
+                                            var vertexData = bufferMesh.getVerticesData(attribute.kind);
+                                            if (vertexData) {
+                                                var byteOffset_1 = this.bufferViews[vertexAttributeBufferViews[attribute.kind]].byteOffset;
+                                                if (!byteOffset_1) {
+                                                    byteOffset_1 = 0;
                                                 }
+                                                this.reorderVertexAttributeDataBasedOnPrimitiveMode(submesh, primitiveMode, sideOrientation, attribute.kind, vertexData, byteOffset_1, binaryWriter);
                                             }
                                         }
                                     }
-                                    if (!uvCoordsPresent && GLTF2._GLTFMaterial._HasTexturesPresent(this.materials[materialIndex])) {
-                                        var newMat = GLTF2._GLTFMaterial._StripTexturesFromMaterial(this.materials[materialIndex]);
-                                        this.materials.push(newMat);
-                                        materialIndex = this.materials.length - 1;
-                                    }
-                                    meshPrimitive.material = materialIndex;
                                 }
+                                if (!uvCoordsPresent && GLTF2._GLTFMaterial._HasTexturesPresent(this.materials[materialIndex])) {
+                                    var newMat = GLTF2._GLTFMaterial._StripTexturesFromMaterial(this.materials[materialIndex]);
+                                    this.materials.push(newMat);
+                                    materialIndex = this.materials.length - 1;
+                                }
+                                meshPrimitive.material = materialIndex;
                             }
                             mesh.primitives.push(meshPrimitive);
                         }
@@ -1111,7 +1110,7 @@ var BABYLON;
                 var glTFNode;
                 var directDescendents;
                 var nodes = babylonScene.transformNodes.concat(babylonScene.meshes);
-                return GLTF2._GLTFMaterial._ConvertMaterialsToGLTFAsync(babylonScene.materials, "image/png" /* PNG */, this.images, this.textures, this.samplers, this.materials, this.imageData, true).then(function () {
+                return GLTF2._GLTFMaterial._ConvertMaterialsToGLTFAsync(babylonScene.materials, "image/png" /* PNG */, this.images, this.textures, this.samplers, this.materials, this.materialMap, this.imageData, true).then(function () {
                     _this.nodeMap = _this.createNodeMapAndAnimations(babylonScene, nodes, _this.shouldExportTransformNode, binaryWriter);
                     _this.totalByteLength = binaryWriter.getByteOffset();
                     // Build Hierarchy with the node map.
@@ -1492,18 +1491,18 @@ var BABYLON;
              * @param imageData mapping of texture names to base64 textures
              * @param hasTextureCoords specifies if texture coordinates are present on the material
              */
-            _GLTFMaterial._ConvertMaterialsToGLTFAsync = function (babylonMaterials, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords) {
+            _GLTFMaterial._ConvertMaterialsToGLTFAsync = function (babylonMaterials, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords) {
                 var promises = [];
                 for (var _i = 0, babylonMaterials_1 = babylonMaterials; _i < babylonMaterials_1.length; _i++) {
                     var babylonMaterial = babylonMaterials_1[_i];
                     if (babylonMaterial instanceof BABYLON.StandardMaterial) {
-                        promises.push(_GLTFMaterial._ConvertStandardMaterialAsync(babylonMaterial, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords));
+                        promises.push(_GLTFMaterial._ConvertStandardMaterialAsync(babylonMaterial, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords));
                     }
                     else if (babylonMaterial instanceof BABYLON.PBRMetallicRoughnessMaterial) {
-                        promises.push(_GLTFMaterial._ConvertPBRMetallicRoughnessMaterialAsync(babylonMaterial, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords));
+                        promises.push(_GLTFMaterial._ConvertPBRMetallicRoughnessMaterialAsync(babylonMaterial, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords));
                     }
                     else if (babylonMaterial instanceof BABYLON.PBRMaterial) {
-                        promises.push(_GLTFMaterial._ConvertPBRMaterialAsync(babylonMaterial, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords));
+                        promises.push(_GLTFMaterial._ConvertPBRMaterialAsync(babylonMaterial, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords));
                     }
                     else {
                         BABYLON.Tools.Warn("Unsupported material type: " + babylonMaterial.name);
@@ -1697,7 +1696,7 @@ var BABYLON;
              * @param imageData map of image file name to data
              * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
              */
-            _GLTFMaterial._ConvertStandardMaterialAsync = function (babylonStandardMaterial, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords) {
+            _GLTFMaterial._ConvertStandardMaterialAsync = function (babylonStandardMaterial, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords) {
                 var alphaMode = this._GetAlphaMode(babylonStandardMaterial);
                 var useAlpha = alphaMode !== "OPAQUE" /* OPAQUE */ ? true : false;
                 var promises = [];
@@ -1763,7 +1762,24 @@ var BABYLON;
                     glTFMaterial.emissiveFactor = babylonStandardMaterial.emissiveColor.asArray();
                 }
                 glTFMaterial.pbrMetallicRoughness = glTFPbrMetallicRoughness;
+                if (alphaMode !== "OPAQUE" /* OPAQUE */) {
+                    switch (alphaMode) {
+                        case "BLEND" /* BLEND */: {
+                            glTFMaterial.alphaMode = "BLEND" /* BLEND */;
+                            break;
+                        }
+                        case "MASK" /* MASK */: {
+                            glTFMaterial.alphaMode = "MASK" /* MASK */;
+                            glTFMaterial.alphaCutoff = babylonStandardMaterial.alphaCutOff;
+                            break;
+                        }
+                        default: {
+                            BABYLON.Tools.Warn("Unsupported alpha mode " + alphaMode);
+                        }
+                    }
+                }
                 materials.push(glTFMaterial);
+                materialMap[babylonStandardMaterial.uniqueId] = materials.length - 1;
                 return Promise.all(promises).then(function () { });
             };
             /**
@@ -1805,7 +1821,7 @@ var BABYLON;
              * @param imageData map of image file name to data
              * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
              */
-            _GLTFMaterial._ConvertPBRMetallicRoughnessMaterialAsync = function (babylonPBRMetalRoughMaterial, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords) {
+            _GLTFMaterial._ConvertPBRMetallicRoughnessMaterialAsync = function (babylonPBRMetalRoughMaterial, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords) {
                 var promises = [];
                 var glTFPbrMetallicRoughness = {};
                 if (babylonPBRMetalRoughMaterial.baseColor) {
@@ -1889,6 +1905,7 @@ var BABYLON;
                 }
                 glTFMaterial.pbrMetallicRoughness = glTFPbrMetallicRoughness;
                 materials.push(glTFMaterial);
+                materialMap[babylonPBRMetalRoughMaterial.uniqueId] = materials.length - 1;
                 return Promise.all(promises).then(function () { });
             };
             /**
@@ -2316,9 +2333,8 @@ var BABYLON;
              * @param imageData map of image file name to data
              * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
              */
-            _GLTFMaterial._ConvertPBRMaterialAsync = function (babylonPBRMaterial, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords) {
+            _GLTFMaterial._ConvertPBRMaterialAsync = function (babylonPBRMaterial, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords) {
                 var glTFPbrMetallicRoughness = {};
-                //  let metallicRoughness: Nullable<_IPBRMetallicRoughness>;
                 var glTFMaterial = {
                     name: babylonPBRMaterial.name
                 };
@@ -2333,15 +2349,15 @@ var BABYLON;
                         ];
                     }
                     return this._ConvertMetalRoughFactorsToMetallicRoughnessAsync(babylonPBRMaterial, mimeType, images, textures, samplers, glTFPbrMetallicRoughness, imageData, hasTextureCoords).then(function (metallicRoughness) {
-                        return _GLTFMaterial.SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords);
+                        return _GLTFMaterial.SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords);
                     });
                 }
                 else {
                     var metallicRoughness = this._ConvertSpecGlossFactorsToMetallicRoughness(babylonPBRMaterial, mimeType, images, textures, samplers, glTFPbrMetallicRoughness, imageData, hasTextureCoords);
-                    return _GLTFMaterial.SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords);
+                    return _GLTFMaterial.SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords);
                 }
             };
-            _GLTFMaterial.SetMetallicRoughnessPbrMaterial = function (metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords) {
+            _GLTFMaterial.SetMetallicRoughnessPbrMaterial = function (metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords) {
                 var promises = [];
                 if (metallicRoughness) {
                     var alphaMode = null;
@@ -2418,6 +2434,7 @@ var BABYLON;
                     }
                     glTFMaterial.pbrMetallicRoughness = glTFPbrMetallicRoughness;
                     materials.push(glTFMaterial);
+                    materialMap[babylonPBRMaterial.uniqueId] = materials.length - 1;
                 }
                 return Promise.all(promises).then(function (result) { });
             };
@@ -2455,7 +2472,7 @@ var BABYLON;
                 else {
                     samplerIndex = foundSamplerIndex;
                 }
-                var textureName = "texture_" + (textures.length - 1).toString();
+                var textureName = BABYLON.Tools.RandomId();
                 var textureData = babylonTexture.getInternalTexture();
                 if (textureData != null) {
                     textureName = textureData.url || textureName;

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

@@ -93,6 +93,7 @@ declare module BABYLON.GLTF2 {
          * Stores all the generated material information, which represents the appearance of each primitive
          */
         private materials;
+        private materialMap;
         /**
          * Stores all the generated texture information, which is referenced by glTF materials
          */
@@ -436,7 +437,9 @@ declare module BABYLON.GLTF2 {
          * @param imageData mapping of texture names to base64 textures
          * @param hasTextureCoords specifies if texture coordinates are present on the material
          */
-        static _ConvertMaterialsToGLTFAsync(babylonMaterials: Material[], mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], imageData: {
+        static _ConvertMaterialsToGLTFAsync(babylonMaterials: Material[], mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], materialMap: {
+            [materialID: number]: number;
+        }, imageData: {
             [fileName: string]: {
                 data: Uint8Array;
                 mimeType: ImageMimeType;
@@ -484,7 +487,9 @@ declare module BABYLON.GLTF2 {
          * @param imageData map of image file name to data
          * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
          */
-        static _ConvertStandardMaterialAsync(babylonStandardMaterial: StandardMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], imageData: {
+        static _ConvertStandardMaterialAsync(babylonStandardMaterial: StandardMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], materialMap: {
+            [materialID: number]: number;
+        }, imageData: {
             [fileName: string]: {
                 data: Uint8Array;
                 mimeType: ImageMimeType;
@@ -507,7 +512,9 @@ declare module BABYLON.GLTF2 {
          * @param imageData map of image file name to data
          * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
          */
-        static _ConvertPBRMetallicRoughnessMaterialAsync(babylonPBRMetalRoughMaterial: PBRMetallicRoughnessMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], imageData: {
+        static _ConvertPBRMetallicRoughnessMaterialAsync(babylonPBRMetalRoughMaterial: PBRMetallicRoughnessMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], materialMap: {
+            [materialID: number]: number;
+        }, imageData: {
             [fileName: string]: {
                 data: Uint8Array;
                 mimeType: ImageMimeType;
@@ -604,13 +611,15 @@ declare module BABYLON.GLTF2 {
          * @param imageData map of image file name to data
          * @param hasTextureCoords specifies if texture coordinates are present on the submesh to determine if textures should be applied
          */
-        static _ConvertPBRMaterialAsync(babylonPBRMaterial: PBRMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], imageData: {
+        static _ConvertPBRMaterialAsync(babylonPBRMaterial: PBRMaterial, mimeType: ImageMimeType, images: IImage[], textures: ITexture[], samplers: ISampler[], materials: IMaterial[], materialMap: {
+            [materialID: number]: number;
+        }, imageData: {
             [fileName: string]: {
                 data: Uint8Array;
                 mimeType: ImageMimeType;
             };
         }, hasTextureCoords: boolean): Promise<void>;
-        private static SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, imageData, hasTextureCoords);
+        private static SetMetallicRoughnessPbrMaterial(metallicRoughness, babylonPBRMaterial, glTFMaterial, glTFPbrMetallicRoughness, mimeType, images, textures, samplers, materials, materialMap, imageData, hasTextureCoords);
         private static GetPixelsFromTexture(babylonTexture);
         /**
          * Extracts a texture from a Babylon texture into file data and glTF data

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

@@ -14890,7 +14890,9 @@ var BABYLON;
             if (!texture) {
                 return;
             }
+            // babylon's internalSizedFomat but gl's texImage2D internalFormat
             var internalSizedFomat = this._getRGBABufferInternalSizedFormat(type, format);
+            // babylon's internalFormat but gl's texImage2D format
             var internalFormat = this._getInternalFormat(format);
             var textureType = this._getWebGLTextureType(type);
             this._bindTextureDirectly(this._gl.TEXTURE_2D, texture, true);
@@ -17169,16 +17171,18 @@ var BABYLON;
         /** @hidden */
         Engine.prototype._getRGBABufferInternalSizedFormat = function (type, format) {
             if (this._webGLVersion === 1) {
-                if (format) {
+                if (format !== undefined) {
                     switch (format) {
                         case Engine.TEXTUREFORMAT_LUMINANCE:
                             return this._gl.LUMINANCE;
+                        case Engine.TEXTUREFORMAT_ALPHA:
+                            return this._gl.ALPHA;
                     }
                 }
                 return this._gl.RGBA;
             }
             if (type === Engine.TEXTURETYPE_FLOAT) {
-                if (format) {
+                if (format !== undefined) {
                     switch (format) {
                         case Engine.TEXTUREFORMAT_R32F:
                             return this._gl.R32F;
@@ -17193,12 +17197,14 @@ var BABYLON;
             else if (type === Engine.TEXTURETYPE_HALF_FLOAT) {
                 return this._gl.RGBA16F;
             }
-            if (format) {
+            if (format !== undefined) {
                 switch (format) {
                     case Engine.TEXTUREFORMAT_LUMINANCE:
                         return this._gl.LUMINANCE;
                     case Engine.TEXTUREFORMAT_RGB:
                         return this._gl.RGB;
+                    case Engine.TEXTUREFORMAT_ALPHA:
+                        return this._gl.ALPHA;
                 }
             }
             return this._gl.RGBA;
@@ -52661,7 +52667,7 @@ var BABYLON;
             var highLimitValue = 0;
             this._previousDelay = delay;
             this._previousRatio = ratio;
-            if (((to > from && ratio > range) || (from > to && ratio < range)) && !loop) { // If we are out of range and not looping get back to caller
+            if (((to > from && ratio >= range) || (from > to && ratio <= range)) && !loop) { // If we are out of range and not looping get back to caller
                 returnValue = false;
                 highLimitValue = this._animation._getKeyValue(keys[keys.length - 1].value);
             }

gui/src/3D/controls/holographicButton.ts

@@ -182,20 +182,12 @@ module BABYLON.GUI {
                 } else {
                     this._frontMaterial = this._host.sharedMaterials["frontFluentMaterial"] as FluentMaterial;
                 }  
-
-                // Plate
-                if (!this._host.sharedMaterials["plateMaterial"]) {
-                    this._createPlateMaterial(mesh);
-                    this._host.sharedMaterials["plateMaterial"] = this._plateMaterial;
-                } else {
-                    this._plateMaterial = this._host.sharedMaterials["plateMaterial"] as StandardMaterial;
-                }            
             } else {
                 this._createBackMaterial(mesh);
                 this._createFrontMaterial(mesh);
-                this._createPlateMaterial(mesh);
             }
 
+            this._createPlateMaterial(mesh);
             this._backPlate.material =  this._backMaterial;
             this._frontPlate.material = this._frontMaterial;
             this._textPlate.material = this._plateMaterial;

gui/src/3D/materials/fluentMaterial.ts

@@ -61,7 +61,7 @@ module BABYLON.GUI {
          * Gets or sets a value indicating the smoothing value applied to border edges (0.02 by default)
          */
         @serialize()
-        public edgeSmoothingValue = 0.02;       
+        public edgeSmoothingValue = 0.02;
         
         /**
          * Gets or sets the minimum value that can be applied to border width (default is 0.1)

src/Animations/babylon.runtimeAnimation.ts

@@ -435,7 +435,7 @@
             this._previousDelay = delay;
             this._previousRatio = ratio;
 
-            if (((to > from && ratio > range) || (from > to && ratio < range)) && !loop) { // If we are out of range and not looping get back to caller
+            if (((to > from && ratio >= range) || (from > to && ratio <= range)) && !loop) { // If we are out of range and not looping get back to caller
                 returnValue = false;
                 highLimitValue = this._animation._getKeyValue(keys[keys.length - 1].value);
             } else {