Inspector v2: Back compat for "attaching" UMD globals and Scene.debugLayer

packages/dev/core/src/Debug/debugLayer.ts

@@ -174,7 +174,7 @@ declare module "../scene" {
          * @internal
          * Backing field
          */
-        _debugLayer: DebugLayer;
+        _debugLayer?: DebugLayer;
 
         /**
          * Gets the debug layer (aka Inspector) associated with the scene

packages/dev/inspector-v2/src/index.ts

@@ -41,6 +41,7 @@ export type { IShellService, ToolbarItemDefinition, SidePaneDefinition, CentralC
 export { ShellServiceIdentity } from "./services/shellService";
 export * from "./inspector";
 export { Inspector } from "./legacy/inspector";
+export { AttachDebugLayer, DetachDebugLayer } from "./legacy/debugLayer";
 
 // Export the shared primitive UI controls that can be used for extending the inspector.
 export * from "shared-ui-components/fluent/primitives/accordion";
@@ -89,6 +90,7 @@ export * from "shared-ui-components/fluent/hoc/propertyLines/textAreaPropertyLin
 export * from "shared-ui-components/fluent/hoc/propertyLines/textPropertyLine";
 export * from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
 
-// TODO: Enable this for back compat, but only after we remove runtime switching between inspector v1 and v2
-//       in Playground and Sandbox (otherwise this will break that functionality as it will stomp on Scene.debugLayer).
-// import "./legacy/debugLayer";
+import { AttachDebugLayer } from "./legacy/debugLayer";
+
+// Attach Inspector v2 to Scene.debugLayer as a side effect for back compat.
+AttachDebugLayer();

packages/dev/inspector-v2/src/inspector.tsx

@@ -5,7 +5,6 @@ import type { ModularToolOptions } from "./modularTool";
 import type { ISceneContext } from "./services/sceneContext";
 import type { IShellService } from "./services/shellService";
 
-import { makeStyles } from "@fluentui/react-components";
 import { AsyncLock } from "core/Misc/asyncLock";
 import { Logger } from "core/Misc/logger";
 import { Observable } from "core/Misc/observable";
@@ -169,24 +168,15 @@ export function ShowInspector(scene: Scene, options: Partial<InspectorOptions> =
             friendlyName: "Canvas Injector",
             consumes: [ShellServiceIdentity],
             factory: (shellService) => {
-                const useStyles = makeStyles({
-                    canvasContainer: {
-                        display: canvasContainerDisplay,
-                        width: "100%",
-                        height: "100%",
-                    },
-                });
-
                 const registration = shellService.addCentralContent({
                     key: "Canvas Injector",
                     component: () => {
-                        const classes = useStyles();
                         const canvasContainerRef = useRef<HTMLDivElement>(null);
                         useEffect(() => {
                             canvasContainerRef.current?.replaceChildren(...canvasContainerChildren);
                         }, []);
 
-                        return <div ref={canvasContainerRef} className={classes.canvasContainer} />;
+                        return <div ref={canvasContainerRef} style={{ display: canvasContainerDisplay, width: "100%", height: "100%" }} />;
                     },
                 });
 

packages/dev/inspector-v2/src/legacy/debugLayer.ts

@@ -6,17 +6,6 @@ import { Scene } from "core/scene";
 
 const LazyInspectorModule = new Lazy(async () => await import("./inspector"));
 
-Object.defineProperty(Scene.prototype, "debugLayer", {
-    get: function (this: Scene) {
-        if (!this._debugLayer) {
-            this._debugLayer = new DebugLayerEx(this);
-        }
-        return this._debugLayer;
-    },
-    enumerable: true,
-    configurable: true,
-});
-
 class DebugLayerEx extends DebugLayer {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     override async show(config?: IInspectorOptions): Promise<DebugLayer> {
@@ -27,3 +16,70 @@ class DebugLayerEx extends DebugLayer {
         return await super.show(config);
     }
 }
+
+let CachedDebugLayerDescriptor: PropertyDescriptor | undefined;
+
+const DebugLayerExKey = Symbol("DebugLayerEx");
+
+declare module "core/scene" {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    export interface Scene {
+        /**
+         * @internal
+         * Backing field
+         */
+        [DebugLayerExKey]?: DebugLayerEx;
+    }
+}
+
+const DebugLayerExDescriptor: TypedPropertyDescriptor<DebugLayerEx> = {
+    get: function (this: Scene) {
+        // NOTE: We don't replace the _debugLayer property because we want to leave it
+        // intact so we can dynamically switch back to v1. Eventually when v1 is fully
+        // deprecated we can have just a single _debugLayer property.
+        // If there is no DebugLayerEx yet, create it.
+        if (!this[DebugLayerExKey]) {
+            this[DebugLayerExKey] = new DebugLayerEx(this);
+        }
+
+        return this[DebugLayerExKey];
+    },
+    enumerable: true,
+    configurable: true,
+};
+
+/**
+ * Attaches Inspector v2 to Scene.debugLayer.
+ */
+export function AttachDebugLayer() {
+    const currentPropertyDescriptor = Reflect.getOwnPropertyDescriptor(Scene.prototype, "debugLayer");
+    // Check if Inspector v2 is already attached, but don't compare the property descriptors directly
+    // as getOwnPropertyDescriptor returns a new object instance each time.
+    // Instead, check the get function.
+    if (currentPropertyDescriptor?.get !== DebugLayerExDescriptor.get) {
+        // Cache the property descriptor so we can restore it if/when Inspector v2 is detached from Scene._debugLayer.
+        CachedDebugLayerDescriptor = currentPropertyDescriptor;
+
+        // Define the debugLayer property to return our extended DebugLayerEx (Inspector v2).
+        Reflect.defineProperty(Scene.prototype, "debugLayer", DebugLayerExDescriptor);
+    }
+}
+
+/**
+ * Detaches Inspector v2 from Scene.debugLayer.
+ */
+export function DetachDebugLayer() {
+    const currentPropertyDescriptor = Reflect.getOwnPropertyDescriptor(Scene.prototype, "debugLayer");
+    // Check if Inspector v2 is already attached, but don't compare the property descriptors directly
+    // as getOwnPropertyDescriptor returns a new object instance each time.
+    // Instead, check the get function.
+    if (currentPropertyDescriptor?.get === DebugLayerExDescriptor.get) {
+        // Revert the debugLayer property descriptor.
+        if (CachedDebugLayerDescriptor) {
+            Reflect.defineProperty(Scene.prototype, "debugLayer", CachedDebugLayerDescriptor);
+            CachedDebugLayerDescriptor = undefined;
+        } else {
+            Reflect.deleteProperty(Scene.prototype, "debugLayer");
+        }
+    }
+}

packages/dev/inspector-v2/src/legacy/legacy.ts

@@ -3,9 +3,52 @@
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports, @typescript-eslint/naming-convention
 import * as INSPECTOR from "../index";
 
-(<any>globalThis).BABYLON = (<any>globalThis).BABYLON || {};
-(<any>globalThis).BABYLON.Inspector = INSPECTOR.Inspector;
-(<any>globalThis).INSPECTOR = INSPECTOR;
+let CachedInspector: typeof INSPECTOR | undefined;
+
+/**
+ * Attaches Inspector v2 to the global INSPECTOR and BABYLON.Inspector.
+ */
+export function AttachInspectorGlobals() {
+    // Check if Inspector v2 is already attached, but don't compare the modules directly as
+    // WebPack does some weird stuff with modules that makes direct comparison unreliable.
+    // Instead, check the Inspector class.
+    if ((<any>globalThis).BABYLON?.Inspector !== INSPECTOR.Inspector) {
+        // First cache any existing global INSPECTOR value (e.g. Inspector v1).
+        CachedInspector = (<any>globalThis).INSPECTOR;
+
+        // Then inject Inspector v2 as the global INSPECTOR and BABYLON.Inspector.
+        (<any>globalThis).BABYLON = (<any>globalThis).BABYLON || {};
+        (<any>globalThis).BABYLON.Inspector = INSPECTOR.Inspector;
+        (<any>globalThis).INSPECTOR = INSPECTOR;
+
+        INSPECTOR.AttachDebugLayer();
+    }
+}
+
+/**
+ * Detaches Inspector v2 from the global INSPECTOR and BABYLON.Inspector.
+ */
+export function DetachInspectorGlobals() {
+    // Check if Inspector v2 is already attached, but don't compare the modules directly as
+    // WebPack does some weird stuff with modules that makes direct comparison unreliable.
+    // Instead, check the Inspector class.
+    if ((<any>globalThis).BABYLON?.Inspector === INSPECTOR.Inspector) {
+        // Remove the global INSPECTOR and BABYLON.Inspector.
+        if (CachedInspector) {
+            (<any>globalThis).BABYLON.Inspector = CachedInspector.Inspector;
+            (<any>globalThis).INSPECTOR = CachedInspector;
+            CachedInspector = undefined;
+        } else {
+            delete (<any>globalThis).BABYLON.Inspector;
+            delete (<any>globalThis).INSPECTOR;
+        }
+
+        INSPECTOR.DetachDebugLayer();
+    }
+}
 
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 export * from "../index";
+
+// Attach Inspector v2 to the global INSPECTOR and BABYLON.Inspector as a side effect for back compat.
+AttachInspectorGlobals();

packages/dev/inspector-v2/test/app/index.html

@@ -1,14 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Inspector v2 Test App</title>
 
         <style>
             html,
             body,
-            canvas {
+            canvas,
+            #container {
                 width: 100%;
                 height: 100%;
                 padding: 0;
@@ -18,7 +19,9 @@
         </style>
     </head>
     <body>
-        <canvas id="canvas"></canvas>
+        <div id="container">
+            <canvas id="canvas"></canvas>
+        </div>
         <script type="module" src="bundle.js"></script>
     </body>
-</html>
+</html>

packages/public/umd/babylonjs-inspector-v2/test.html

@@ -27,7 +27,7 @@
         <script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
         <script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
         <script src="https://cdn.babylonjs.com/addons/babylonjs.addons.min.js"></script>
-        <!-- <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script> -->
+        <script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
         <script src="babylon.inspector-v2.bundle.js"></script>
 
         <script>
@@ -74,8 +74,9 @@
                 engine.resize();
             });
 
-            // scene.debugLayer.show();
-            BABYLON.Inspector.Show();
+            // INSPECTOR.DetachInspectorGlobals();
+            scene.debugLayer.show();
+            // BABYLON.Inspector.Show();
         </script>
     </body>
 </html>

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

@@ -135,6 +135,11 @@ export class RenderingComponent extends React.Component<IRenderingComponentProps
             }
 
             if (!isInspectorV1Enabled && !isInspectorV2ModeEnabled && action === "enable") {
+                // Wait two frames for all the React async work to finish. This is ugly,
+                // but we'll remove it when we remove Inspector v1 as Inspector v2 handles
+                // the asynchrony for itself internally.
+                await new Promise((resolve) => setTimeout(resolve));
+                await new Promise((resolve) => setTimeout(resolve));
                 this._scene.debugLayer.show({
                     embedMode: true,
                 });

packages/tools/sandbox/src/globalState.ts

@@ -97,6 +97,11 @@ export class GlobalState {
                     }
                 } else if (isInspectorV2Enabled && !this._isInspectorV2ModeEnabled) {
                     (await ImportInspectorV2()).Inspector.Hide();
+                    // Wait two frames for all the React async work to finish. This is ugly,
+                    // but we'll remove it when we remove Inspector v1 as Inspector v2 handles
+                    // the asynchrony for itself internally.
+                    await new Promise((resolve) => setTimeout(resolve));
+                    await new Promise((resolve) => setTimeout(resolve));
                     await this.currentScene.debugLayer.show();
                 }
             }