Disallow Inspector-v2 in Playground/Sandbox when old Babylon versions are specified

packages/tools/playground/public/index.js

@@ -41,6 +41,7 @@ var Versions = {
     "7.54.2": [
         "https://cdn.babylonjs.com/timestamp.js?t=" + Date.now(),
         "https://cdn.babylonjs.com/v7.54.2/babylon.js",
+        "https://cdn.babylonjs.com/v7.54.2/addons/babylonjs.addons.js",
         "https://cdn.babylonjs.com/v7.54.2/gui/babylon.gui.min.js",
         "https://cdn.babylonjs.com/v7.54.2/inspector/babylon.inspector.bundle.js",
         "https://cdn.babylonjs.com/v7.54.2/nodeEditor/babylon.nodeEditor.js",
@@ -201,10 +202,12 @@ let checkBabylonVersionAsync = async function () {
             // eslint-disable-next-line no-undef
             globalThis.BABYLON.Tools.ScriptBaseUrl = window.location.protocol + `//${window.location.hostname}:1337/`;
         }
+
+        return version;
     });
 };
 
-checkBabylonVersionAsync().then(() => {
+checkBabylonVersionAsync().then((version) => {
     loadScriptAsync("babylon.playground.js").then(() => {
         var hostElement = document.getElementById("host-element");
         let mode = undefined;
@@ -214,6 +217,6 @@ checkBabylonVersionAsync().then(() => {
             mode = 2;
         }
         // eslint-disable-next-line no-undef
-        BABYLON.Playground.Show(hostElement, mode);
+        BABYLON.Playground.Show(hostElement, mode, version);
     });
 });

packages/tools/playground/src/components/rendererComponent.tsx

@@ -12,8 +12,14 @@ import type { Nullable, Scene } from "@dev/core";
 
 import "../scss/rendering.scss";
 
-// Preload (asynchronously) the inspector v2 module, but don't block rendering.
-const InspectorV2ModulePromise = import("inspector-v2/inspector");
+let InspectorV2ModulePromise: Promise<typeof import("inspector-v2/inspector")> | null = null;
+// eslint-disable-next-line @typescript-eslint/promise-function-async
+function ImportInspectorV2() {
+    if (!InspectorV2ModulePromise) {
+        InspectorV2ModulePromise = import("inspector-v2/inspector");
+    }
+    return InspectorV2ModulePromise;
+}
 
 interface IRenderingComponentProps {
     globalState: GlobalState;
@@ -63,8 +69,6 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
                 return;
             }
 
-            const inspectorV2Module = await InspectorV2ModulePromise;
-
             // support for older versions
             // openedPanes was not available until 7.44.0, so we need to fallback to the inspector's _OpenedPane property
             if (this._scene.debugLayer.openedPanes === undefined) {
@@ -78,24 +82,31 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
             }
 
             const isInspectorV1Enabled = this._scene.debugLayer.openedPanes !== 0;
-            const isInspectorV2Enabled = inspectorV2Module.IsInspectorVisible();
+            const isInspectorV2Enabled = InspectorV2ModulePromise && (await InspectorV2ModulePromise).IsInspectorVisible();
             const isInspectorEnabled = isInspectorV1Enabled || isInspectorV2Enabled;
 
             const searchParams = new URLSearchParams(window.location.search);
-            const isInspectorV2ModeEnabled = searchParams.has("inspectorv2") && searchParams.get("inspectorv2") !== "false";
+            let isInspectorV2ModeEnabled = searchParams.has("inspectorv2") && searchParams.get("inspectorv2") !== "false";
 
             if (action === "refresh") {
                 action = isInspectorEnabled ? "enable" : "disable";
             } else if (action === "toggle") {
                 action = isInspectorEnabled ? "disable" : "enable";
             }
 
+            // Disallow Inspector v2 on specific/older versions. For now, only support the latest as both core and inspector are evolving in tandem.
+            // Once we have an Inspector v2 UMD package, we can make this work the same as Inspector v1.)
+            if (action === "enable" && isInspectorV2ModeEnabled && props.globalState.version) {
+                isInspectorV2ModeEnabled = false;
+                alert("Inspector v2 is only supported with the latest version of Babylon.js at this time. Falling back to Inspector V1.");
+            }
+
             if (isInspectorV1Enabled && (isInspectorV2ModeEnabled || action === "disable")) {
                 this._scene.debugLayer.hide();
             }
 
             if (isInspectorV2Enabled && (!isInspectorV2ModeEnabled || action === "disable")) {
-                inspectorV2Module.HideInspector();
+                (await ImportInspectorV2()).HideInspector();
             }
 
             if (!isInspectorV1Enabled && !isInspectorV2ModeEnabled && action === "enable") {
@@ -105,7 +116,7 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
             }
 
             if (!isInspectorV2Enabled && isInspectorV2ModeEnabled && action === "enable") {
-                inspectorV2Module.ShowInspector(this._scene, {
+                (await ImportInspectorV2()).ShowInspector(this._scene, {
                     embedMode: true,
                     showThemeSelector: false,
                     themeMode: Utilities.ReadStringFromStore("theme", "Light") === "Dark" ? "dark" : "light",
@@ -195,7 +206,7 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
 
         this.props.globalState.onErrorObservable.notifyObservers(null);
 
-        const displayInspector = (await InspectorV2ModulePromise).IsInspectorVisible() || this._scene?.debugLayer.isVisible();
+        const displayInspector = (InspectorV2ModulePromise && (await InspectorV2ModulePromise).IsInspectorVisible()) || this._scene?.debugLayer.isVisible();
 
         const webgpuPromise = WebGPUEngine ? WebGPUEngine.IsSupportedAsync : Promise.resolve(false);
         const webGPUSupported = await webgpuPromise;

packages/tools/playground/src/globalState.ts

@@ -32,6 +32,7 @@ export class GlobalState {
     public mobileDefaultMode = EditionMode.RenderingOnly;
 
     public runtimeMode = RuntimeMode.Editor;
+    public version: string;
 
     public currentSnippetTitle = "";
     public currentSnippetDescription = "";

packages/tools/playground/src/playground.tsx

@@ -23,6 +23,7 @@ import { ControlledSize, SplitDirection } from "shared-ui-components/split/split
 
 interface IPlaygroundProps {
     runtimeMode: RuntimeMode;
+    version: string;
 }
 
 export class Playground extends React.Component<IPlaygroundProps, { errorMessage: string; mode: EditionMode }> {
@@ -42,6 +43,7 @@ export class Playground extends React.Component<IPlaygroundProps, { errorMessage
         this._globalState = new GlobalState();
 
         this._globalState.runtimeMode = props.runtimeMode || RuntimeMode.Editor;
+        this._globalState.version = props.version;
 
         this._monacoRef = React.createRef();
         this._renderingRef = React.createRef();
@@ -162,8 +164,8 @@ export class Playground extends React.Component<IPlaygroundProps, { errorMessage
         );
     }
 
-    public static Show(hostElement: HTMLElement, mode: RuntimeMode) {
-        const playground = React.createElement(Playground, { runtimeMode: mode });
+    public static Show(hostElement: HTMLElement, mode: RuntimeMode, version: string) {
+        const playground = React.createElement(Playground, { runtimeMode: mode, version });
 
         const root = createRoot(hostElement);
         root.render(playground);

packages/tools/sandbox/public/index.js

@@ -142,11 +142,13 @@ let checkBabylonVersionAsync = function () {
             // eslint-disable-next-line no-undef
             globalThis.BABYLON.Tools.ScriptBaseUrl = window.location.protocol + `//${window.location.hostname}:1337/`;
         }
+
+        return version;
     });
 };
 
-checkBabylonVersionAsync().then(() => {
+checkBabylonVersionAsync().then((version) => {
     loadScriptAsync("babylon.sandbox.js").then(() => {
-        BABYLON.Sandbox.Show(hostElement);
+        BABYLON.Sandbox.Show(hostElement, version);
     });
 });

packages/tools/sandbox/src/globalState.ts

@@ -3,8 +3,14 @@ import type { FilesInput } from "core/Misc/filesInput";
 import { Observable } from "core/Misc/observable";
 import type { Scene } from "core/scene";
 
-// Preload (asynchronously) the inspector v2 module, but don't block rendering.
-const InspectorV2ModulePromise = import("inspector-v2/inspector");
+let InspectorV2ModulePromise: Promise<typeof import("inspector-v2/inspector")> | null = null;
+// eslint-disable-next-line @typescript-eslint/promise-function-async
+function ImportInspectorV2() {
+    if (!InspectorV2ModulePromise) {
+        InspectorV2ModulePromise = import("inspector-v2/inspector");
+    }
+    return InspectorV2ModulePromise;
+}
 
 export class GlobalState {
     public currentScene: Scene;
@@ -31,20 +37,24 @@ export class GlobalState {
         port: number;
     };
 
-    constructor() {
+    constructor(public readonly version: string) {
         this.onSceneLoaded.addOnce(async () => await this.refreshDebugLayerAsync());
     }
 
     public showDebugLayer() {
         this.isDebugLayerEnabled = true;
         if (this.currentScene) {
+            if (this._isInspectorV2ModeRequested && !this._isInspectorV2ModeEnabled) {
+                alert("Inspector v2 is only supported with the latest version of Babylon.js at this time. Falling back to Inspector V1.");
+            }
+
             if (!this._isInspectorV2ModeEnabled) {
                 // eslint-disable-next-line @typescript-eslint/no-floating-promises
                 this.currentScene.debugLayer.show();
             } else {
                 // eslint-disable-next-line @typescript-eslint/no-floating-promises
                 (async () => {
-                    const inspectorV2Module = await InspectorV2ModulePromise;
+                    const inspectorV2Module = await ImportInspectorV2();
                     inspectorV2Module.ShowInspector(this.currentScene);
                 })();
             }
@@ -59,7 +69,7 @@ export class GlobalState {
             } else {
                 // eslint-disable-next-line @typescript-eslint/no-floating-promises
                 (async () => {
-                    const inspectorV2Module = await InspectorV2ModulePromise;
+                    const inspectorV2Module = await ImportInspectorV2();
                     inspectorV2Module.HideInspector();
                 })();
             }
@@ -68,25 +78,38 @@ export class GlobalState {
 
     public async refreshDebugLayerAsync() {
         if (this.currentScene) {
-            const inspectorV2Module = await InspectorV2ModulePromise;
-
-            const isInspectorV1Enabled = this.currentScene.debugLayer.openedPanes !== 0;
-            const isInspectorV2Enabled = inspectorV2Module.IsInspectorVisible();
+            // openedPanes was not available until 7.44.0, so we may need to fallback to the inspector's _OpenedPane property
+            const isInspectorV1Enabled = (this.currentScene.debugLayer.openedPanes ?? (this.currentScene.debugLayer as any).BJSINSPECTOR?.Inspector?._OpenedPane) !== 0;
+            const isInspectorV2Enabled = InspectorV2ModulePromise && (await InspectorV2ModulePromise).IsInspectorVisible();
             const isInspectorEnabled = isInspectorV1Enabled || isInspectorV2Enabled;
 
             if (isInspectorEnabled) {
-                if (isInspectorV1Enabled && this._isInspectorV2ModeEnabled) {
-                    this.currentScene.debugLayer.hide();
-                    inspectorV2Module.ShowInspector(this.currentScene);
+                if (isInspectorV1Enabled && this._isInspectorV2ModeRequested) {
+                    if (!this._isInspectorV2ModeEnabled) {
+                        alert("Inspector v2 is only supported with the latest version of Babylon.js at this time. Falling back to Inspector V1.");
+                    } else {
+                        this.currentScene.debugLayer.hide();
+                        (await ImportInspectorV2()).ShowInspector(this.currentScene);
+                    }
                 } else if (isInspectorV2Enabled && !this._isInspectorV2ModeEnabled) {
-                    inspectorV2Module.HideInspector();
+                    (await ImportInspectorV2()).HideInspector();
                     await this.currentScene.debugLayer.show();
                 }
             }
         }
     }
 
     private get _isInspectorV2ModeEnabled() {
+        // Disallow Inspector v2 on specific/older versions. For now, only support the latest as both core and inspector are evolving in tandem.
+        // Once we have an Inspector v2 UMD package, we can make this work the same as Inspector v1.)
+        if (this.version) {
+            return false;
+        }
+
+        return this._isInspectorV2ModeRequested;
+    }
+
+    private get _isInspectorV2ModeRequested() {
         const searchParams = new URLSearchParams(window.location.search);
         return searchParams.has("inspectorv2") && searchParams.get("inspectorv2") !== "false";
     }

packages/tools/sandbox/src/sandbox.tsx

@@ -17,7 +17,9 @@ import fullScreenLogo from "./img/logo-fullscreen.svg";
 import type { AbstractEngine } from "core/Engines/abstractEngine";
 import { ImageProcessingConfiguration } from "core/Materials/imageProcessingConfiguration";
 
-interface ISandboxProps {}
+interface ISandboxProps {
+    version: string;
+}
 
 /**
  * Sandbox component
@@ -45,7 +47,7 @@ export class Sandbox extends React.Component<
 
     public constructor(props: ISandboxProps) {
         super(props);
-        this._globalState = new GlobalState();
+        this._globalState = new GlobalState(props.version);
         this._logoRef = React.createRef();
         this._dropTextRef = React.createRef();
         this._clickInterceptorRef = React.createRef();
@@ -285,8 +287,8 @@ export class Sandbox extends React.Component<
     // Use the promise of this deferred to do something after the scene is loaded.
     private static _SceneLoadedDeferred = new Deferred<Scene>();
 
-    public static Show(hostElement: HTMLElement): void {
-        const sandbox = React.createElement(Sandbox, {});
+    public static Show(hostElement: HTMLElement, version: string): void {
+        const sandbox = React.createElement(Sandbox, { version });
         const root = createRoot(hostElement);
         root.render(sandbox);
     }