Remove variants for sandbox + better switch between scenes

sandbox/animation.js

@@ -12,7 +12,6 @@ var clickInterceptor = document.getElementById("click-interceptor");
 clickInterceptor.addEventListener("mousedown", function() {
     displayDropdownContent(false);
     displayDropdownContentEnv(false);
-    displayVariantDropdownContent(false);
 });
 
 // event on the dropdown

sandbox/debug.html

@@ -70,17 +70,6 @@
                     </div>
                 </div>
             </div>
-            <div id="variantBar">
-                <div class="dropdown">
-                    <div id="dropdownBtn-variants" class="dropdownBtn">
-                        <img src="Assets/Icon_Up.svg" id="chevronUp-variants" class="chevronUp">
-                        <img src="Assets/Icon_Down.svg" id="chevronDown-variants" class="chevronDown">
-                        <div id="dropdownLabel-variants" class="dropdownLabel"></div>
-                    </div>
-                    <div id="dropdownContent-variants" class="dropdownContent">
-                    </div>
-                </div>
-            </div> 
             <div class="footerRight">
                 <a href="javascript:void(null);" id="btnInspector" class="hidden"><img src="./Assets/Icon_EditModel.svg"
                         alt="Display inspector" title="Display inspector" /></a>
@@ -98,7 +87,6 @@
     </div>    
     <script src="environment.js"></script>
     <script src="animation.js"></script>
-    <script src="variants.js"></script>
     <script src="index.js"></script>
 </body>
 

sandbox/index-local.html

@@ -44,17 +44,6 @@
                     </div>
                 </div>
             </div>
-            <div id="variantBar">
-                <div class="dropdown">
-                    <div id="dropdownBtn-variants" class="dropdownBtn">
-                        <img src="Assets/Icon_Up.svg" id="chevronUp-variants" class="chevronUp">
-                        <img src="Assets/Icon_Down.svg" id="chevronDown-variants" class="chevronDown">
-                        <div id="dropdownLabel-variants" class="dropdownLabel"></div>
-                    </div>
-                    <div id="dropdownContent-variants" class="dropdownContent">
-                    </div>
-                </div>
-            </div>            
             <div class="footerRight">
                 <a href="javascript:void(null);">
                     <div class="custom-upload"
@@ -87,7 +76,6 @@
         BABYLONDEVTOOLS.Loader
             .require('environment.js')
             .require('animation.js')
-            .require('variants.js')
             .require('index.js')
             .load(function() {
                 BABYLON.DracoCompression.Configuration.decoder = {

sandbox/index.css

@@ -72,7 +72,7 @@ a:visited {
     font-size: 0;
     display: grid;
     grid-template-rows: 100%;
-    grid-template-columns: 201px auto 1fr 210px
+    grid-template-columns: 201px 1fr 210px
 }
 
 #logoImg {
@@ -92,7 +92,7 @@ a:visited {
 .footerRight {
     display: flex;
     flex-direction: row-reverse;
-    grid-column: 4;
+    grid-column: 3;
     grid-row: 1;
 }
 
@@ -224,24 +224,6 @@ a:visited {
     font-size: 1.8em;
 }
 
-/* variants bar */
-#variantBar {
-    margin-left: 10px;
-    display: none;
-    align-items: center;
-    color: white;
-    min-height: 30px;
-    height: var(--footer-height);
-    background-color: var(--footer-background);    
-    grid-column: 2;
-    grid-row: 1;
-}
-
-#variantBar * {
-    padding: 0px;
-    margin: 0px;
-}
-
 /* animation bar */
 #animationBar {
     margin-left: 10px;
@@ -251,7 +233,7 @@ a:visited {
     min-height: 30px;
     height: var(--footer-height);
     background-color: var(--footer-background);    
-    grid-column: 3;
+    grid-column: 2;
     grid-row: 1;
 }
 

sandbox/index.html

@@ -57,17 +57,6 @@
                     </div>
                 </div>
             </div>
-            <div id="variantBar">
-                <div class="dropdown">
-                    <div id="dropdownBtn-variants" class="dropdownBtn">
-                        <img src="Assets/Icon_Up.svg" id="chevronUp-variants" class="chevronUp">
-                        <img src="Assets/Icon_Down.svg" id="chevronDown-variants" class="chevronDown">
-                        <div id="dropdownLabel-variants" class="dropdownLabel"></div>
-                    </div>
-                    <div id="dropdownContent-variants" class="dropdownContent">
-                    </div>
-                </div>
-            </div> 
             <div class="footerRight">
                 <a href="javascript:void(null);">
                     <div class="custom-upload"
@@ -91,7 +80,6 @@
     </div>
     <script src="environment.js"></script>
     <script src="animation.js"></script>
-    <script src="variants.js"></script>
     <script src="index.js"></script>
 </body>
 

sandbox/index.js

@@ -90,7 +90,6 @@ if (BABYLON.Engine.isSupported()) {
         // Clear dropdown that contains animation names
         dropdownContent.innerHTML = "";
         animationBar.style.display = "none";
-        variantBar.style.display = "none";
         currentGroup = null;
         babylonScene.skipFrustumClipping = true;
 
@@ -105,22 +104,6 @@ if (BABYLON.Engine.isSupported()) {
             currentGroup.play(true);
         }
 
-        if (babylonScene.meshes.length > 0) {
-            let root = babylonScene.meshes[0];
-            let variants = BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.GetAvailableVariants(root);
-
-            if (variants && variants.length > 0) {
-                variantBar.style.display = "flex";
-                variantDropdownContent.innerHTML = "";
-                variantDropdownLabel.innerHTML = "Original";
-                variantDropdownLabel.title = "Original";                
-                createVariantDropdownLink("Original", root);
-                for (var index = 0; index < variants.length; index++) {
-                    createVariantDropdownLink(variants[index], root);
-                }
-            }
-        }
-
         // Sync the slider with the current frame
         babylonScene.registerBeforeRender(function() {
             if (currentGroup) {

sandbox/variants.js

@@ -1,50 +0,0 @@
-// Animations
-var variantBar = document.getElementById("variantBar");
-var variantDropdownBtn = document.getElementById("dropdownBtn-variants");
-var variantChevronUp = document.getElementById("chevronUp-variants");
-var variantChevronDown = document.getElementById("chevronDown-variants");
-var variantDropdownLabel = document.getElementById("dropdownLabel-variants");
-var variantDropdownContent = document.getElementById("dropdownContent-variants");
-var clickInterceptor = document.getElementById("click-interceptor");
-
-function displayVariantDropdownContent(display) {
-    if (display) {
-        variantDropdownContent.style.display = "block";
-        variantChevronDown.style.display = "inline";
-        variantChevronUp.style.display = "none";
-        variantDropdownBtn.classList.add("open");
-        clickInterceptor.classList.remove("hidden");
-    }
-    else {
-        variantDropdownContent.style.display = "none";
-        variantChevronDown.style.display = "none";
-        variantChevronUp.style.display = "inline";
-        variantDropdownBtn.classList.remove("open");
-        clickInterceptor.classList.add("hidden");
-    }
-}
-variantDropdownBtn.addEventListener("click", function() {
-    if (variantDropdownContent.style.display === "block") {
-        displayVariantDropdownContent(false);
-    }
-    else {
-        displayVariantDropdownContent(true);
-    }
-});
-
-function createVariantDropdownLink(variantName, target) {
-    var variant = document.createElement("a");
-    variant.innerHTML = variantName;
-    variant.title = variantName;
-    variant.addEventListener("click", function() {
-        if (variantName === "Original") {
-            BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.Reset(target);
-        } else {
-            BABYLON.GLTF2.Loader.Extensions.KHR_materials_variants.SelectVariant(target, variantName);
-        }
-
-        variantDropdownLabel.innerHTML = variantName;
-        variantDropdownLabel.title = variantName;
-    });
-    variantDropdownContent.appendChild(variant);
-}

src/Loading/sceneLoader.ts

@@ -780,7 +780,9 @@ export class SceneLoader {
 
         var disposeHandler = () => {
             scene._removePendingData(loadingToken);
-            scene.getEngine().hideLoadingUI();
+            if (SceneLoader.ShowLoadingScreen) {
+                scene.getEngine().hideLoadingUI();
+            }
         };
 
         var errorHandler = (message: Nullable<string>, exception?: any) => {

src/Misc/filesInput.ts

@@ -264,6 +264,8 @@ export class FilesInput {
                 this._engine.stopRenderLoop();
             }
 
+            SceneLoader.ShowLoadingScreen = false;
+            this._engine.displayLoadingUI();
             SceneLoader.LoadAsync("file:", this._sceneFileToLoad, this._engine, (progress) => {
                 if (this._progressCallback) {
                     this._progressCallback(progress);
@@ -281,6 +283,7 @@ export class FilesInput {
 
                 // Wait for textures and shaders to be ready
                 this._currentScene.executeWhenReady(() => {
+                    this._engine.hideLoadingUI();
                     this._engine.runRenderLoop(() => {
                         this.renderFunction();
                     });