Fix issue with loader not returning until all LODs are loaded

loaders/src/glTF/2.0/Extensions/MSFT_lod.ts

@@ -35,7 +35,6 @@ module BABYLON.GLTF2.Extensions {
 
         private loadMaterialLOD(loader: GLTFLoader, material: IGLTFMaterial, materialLODs: number[], lod: number, assign: (material: Material) => void): void {
             loader.loadMaterial(materialLODs[lod], babylonMaterial => {
-                babylonMaterial.name += ".LOD" + lod;
                 assign(babylonMaterial);
 
                 // Loading is complete if this is the highest quality LOD.
@@ -44,9 +43,16 @@ module BABYLON.GLTF2.Extensions {
                     return;
                 }
 
-                // Load the next LOD when all of the textures are loaded.
-                BaseTexture.WhenAllReady(babylonMaterial.getActiveTextures(), () => {
-                    this.loadMaterialLOD(loader, material, materialLODs, lod - 1, assign);
+                // Load the next LOD once the loader has succeeded.
+                loader.executeWhenRenderReady(succeeded => {
+                    if (!succeeded) {
+                        return;
+                    }
+
+                    // Load the next LOD when all of the textures are loaded.
+                    BaseTexture.WhenAllReady(babylonMaterial.getActiveTextures(), () => {
+                        this.loadMaterialLOD(loader, material, materialLODs, lod - 1, assign);
+                    });
                 });
             });
 

loaders/src/glTF/2.0/babylon.glTFLoader.ts

@@ -11,8 +11,12 @@ module BABYLON.GLTF2 {
         private _onSuccess: () => void;
         private _onError: () => void;
 
+        private _succeeded: boolean;
         private _renderReady: boolean;
 
+        // Observable with boolean indicating success or error.
+        private _renderReadyObservable = new Observable<boolean>();
+
         // Count of pending work that needs to complete before the asset is rendered.
         private _renderPendingCount: number;
 
@@ -41,6 +45,15 @@ module BABYLON.GLTF2 {
             return this._babylonScene;
         }
 
+        public executeWhenRenderReady(func: (succeeded: boolean) => void) {
+            if (this._renderReady) {
+                func(this._succeeded);
+            }
+            else {
+                this._renderReadyObservable.add(func);
+            }
+        }
+
         public constructor(parent: GLTFFileLoader) {
             this._parent = parent;
         }
@@ -94,10 +107,10 @@ module BABYLON.GLTF2 {
         }
 
         private _onRenderReady(): void {
-            this._showMeshes();
-            this._startAnimations();
-
-            if (this._errors.length === 0) {
+            this._succeeded = (this._errors.length === 0);
+            if (this._succeeded) {
+                this._showMeshes();
+                this._startAnimations();
                 this._onSuccess();
             }
             else {
@@ -105,6 +118,8 @@ module BABYLON.GLTF2 {
                 this._errors = [];
                 this._onError();
             }
+
+            this._renderReadyObservable.notifyObservers(this._succeeded);
         }
 
         private _onLoaderComplete(): void {
@@ -182,7 +197,9 @@ module BABYLON.GLTF2 {
             this._defaultMaterial = undefined;
             this._onSuccess = undefined;
             this._onError = undefined;
+            this._succeeded = false;
             this._renderReady = false;
+            this._renderReadyObservable.clear();
             this._renderPendingCount = 0;
             this._loaderPendingCount = 0;
         }