Inspector v2: Add GUI and Frame Graphs to Scene Explorer (#16873)

ryantrem · web-flow · commit f1e5e8280a63 · 2025-07-11T20:56:56.000Z
This PR adds support for GUI (AdvancedDynamicTexture) and Frame Graphs
to Scene Explorer.
- Configures the gui dependency in the inspector v2 test app and in
Playground (when it uses inspector v2).
- Add support for the two new scene explorer sections.
- NOTE: The gui scene explorer service only imports types from the gui
package so that it doesn't cause the gui package to be loaded when it
otherwise often will not be.
diff --git a/packages/dev/inspector-v2/package.json b/packages/dev/inspector-v2/package.json
@@ -18,6 +18,7 @@
     "devDependencies": {
         "@dev/addons": "^1.0.0",
         "@dev/core": "1.0.0",
+        "@dev/gui": "^1.0.0",
         "@dev/loaders": "1.0.0",
         "@dev/materials": "^1.0.0",
         "@fluentui/react-components": "^9.62.0",
diff --git a/packages/dev/inspector-v2/src/inspector.tsx b/packages/dev/inspector-v2/src/inspector.tsx
@@ -28,6 +28,8 @@ import { SkeletonPropertiesServiceDefinition } from "./services/panes/properties
 import { SpritePropertiesServiceDefinition } from "./services/panes/properties/spritePropertiesService";
 import { TransformPropertiesServiceDefinition } from "./services/panes/properties/transformPropertiesService";
 import { AnimationGroupExplorerServiceDefinition } from "./services/panes/scene/animationGroupExplorerService";
+import { FrameGraphExplorerServiceDefinition } from "./services/panes/scene/frameGraphExplorerService";
+import { GuiExplorerServiceDefinition } from "./services/panes/scene/guiExplorerService";
 import { MaterialExplorerServiceDefinition } from "./services/panes/scene/materialExplorerService";
 import { NodeHierarchyServiceDefinition } from "./services/panes/scene/nodeExplorerService";
 import { ParticleSystemExplorerServiceDefinition } from "./services/panes/scene/particleSystemExplorerService";
@@ -190,6 +192,8 @@ function _ShowInspector(scene: Nullable<Scene>, options: Partial<IInspectorOptio
             ParticleSystemExplorerServiceDefinition,
             SpriteManagerHierarchyServiceDefinition,
             AnimationGroupExplorerServiceDefinition,
+            GuiExplorerServiceDefinition,
+            FrameGraphExplorerServiceDefinition,
 
             // Properties pane tab and related services.
             PropertiesServiceDefinition,
diff --git a/packages/dev/inspector-v2/src/services/panes/scene/frameGraphExplorerService.tsx b/packages/dev/inspector-v2/src/services/panes/scene/frameGraphExplorerService.tsx
@@ -0,0 +1,58 @@
+import type { ServiceDefinition } from "../../../modularity/serviceDefinition";
+import type { ISceneContext } from "../../sceneContext";
+import type { ISceneExplorerService } from "./sceneExplorerService";
+
+import { FrameRegular } from "@fluentui/react-icons";
+
+import { FrameGraph } from "core/FrameGraph/frameGraph";
+import { Observable } from "core/Misc";
+import { InterceptProperty } from "../../../instrumentation/propertyInstrumentation";
+import { SceneContextIdentity } from "../../sceneContext";
+import { SceneExplorerServiceIdentity } from "./sceneExplorerService";
+
+export const FrameGraphExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]> = {
+    friendlyName: "Frame Graph Hierarchy",
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
+    factory: (sceneExplorerService, sceneContext) => {
+        const scene = sceneContext.currentScene;
+        if (!scene) {
+            return undefined;
+        }
+
+        const sectionRegistration = sceneExplorerService.addSection({
+            displayName: "Frame Graph",
+            order: 1000,
+            predicate: (entity) => entity instanceof FrameGraph,
+            getRootEntities: () => scene.frameGraphs,
+            getEntityDisplayInfo: (frameGraph) => {
+                const onChangeObservable = new Observable<void>();
+
+                const nameHookToken = InterceptProperty(frameGraph, "name", {
+                    afterSet: () => {
+                        onChangeObservable.notifyObservers();
+                    },
+                });
+
+                return {
+                    get name() {
+                        return frameGraph.name;
+                    },
+                    onChange: onChangeObservable,
+                    dispose: () => {
+                        nameHookToken.dispose();
+                        onChangeObservable.clear();
+                    },
+                };
+            },
+            entityIcon: () => <FrameRegular />,
+            getEntityAddedObservables: () => [scene.onNewFrameGraphAddedObservable],
+            getEntityRemovedObservables: () => [scene.onFrameGraphRemovedObservable],
+        });
+
+        return {
+            dispose: () => {
+                sectionRegistration.dispose();
+            },
+        };
+    },
+};
diff --git a/packages/dev/inspector-v2/src/services/panes/scene/guiExplorerService.tsx b/packages/dev/inspector-v2/src/services/panes/scene/guiExplorerService.tsx
@@ -0,0 +1,63 @@
+import type { AdvancedDynamicTexture } from "gui/index";
+import type { ServiceDefinition } from "../../../modularity/serviceDefinition";
+import type { ISceneContext } from "../../sceneContext";
+import type { ISceneExplorerService } from "./sceneExplorerService";
+
+import { AppGenericRegular } from "@fluentui/react-icons";
+
+import { Observable } from "core/Misc";
+import { InterceptProperty } from "../../../instrumentation/propertyInstrumentation";
+import { SceneContextIdentity } from "../../sceneContext";
+import { SceneExplorerServiceIdentity } from "./sceneExplorerService";
+
+// Don't use instanceof in this case as we don't want to bring in the gui package just to check if the entity is an AdvancedDynamicTexture.
+function IsAdvancedDynamicTexture(entity: unknown): entity is AdvancedDynamicTexture {
+    return (entity as AdvancedDynamicTexture)?.constructor?.name === "AdvancedDynamicTexture";
+}
+
+export const GuiExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]> = {
+    friendlyName: "GUI Hierarchy",
+    consumes: [SceneExplorerServiceIdentity, SceneContextIdentity],
+    factory: (sceneExplorerService, sceneContext) => {
+        const scene = sceneContext.currentScene;
+        if (!scene) {
+            return undefined;
+        }
+
+        const sectionRegistration = sceneExplorerService.addSection({
+            displayName: "GUI",
+            order: 900,
+            predicate: IsAdvancedDynamicTexture,
+            getRootEntities: () => scene.textures.filter(IsAdvancedDynamicTexture),
+            getEntityDisplayInfo: (texture) => {
+                const onChangeObservable = new Observable<void>();
+
+                const nameHookToken = InterceptProperty(texture, "name", {
+                    afterSet: () => {
+                        onChangeObservable.notifyObservers();
+                    },
+                });
+
+                return {
+                    get name() {
+                        return texture.name;
+                    },
+                    onChange: onChangeObservable,
+                    dispose: () => {
+                        nameHookToken.dispose();
+                        onChangeObservable.clear();
+                    },
+                };
+            },
+            entityIcon: () => <AppGenericRegular />,
+            getEntityAddedObservables: () => [scene.onNewTextureAddedObservable],
+            getEntityRemovedObservables: () => [scene.onTextureRemovedObservable],
+        });
+
+        return {
+            dispose: () => {
+                sectionRegistration.dispose();
+            },
+        };
+    },
+};
diff --git a/packages/dev/inspector-v2/src/services/panes/scene/texturesExplorerService.tsx b/packages/dev/inspector-v2/src/services/panes/scene/texturesExplorerService.tsx
@@ -2,9 +2,10 @@ import type { ServiceDefinition } from "../../../modularity/serviceDefinition";
 import type { ISceneContext } from "../../sceneContext";
 import type { ISceneExplorerService } from "./sceneExplorerService";
 
-import { ImageRegular } from "@fluentui/react-icons";
+import { ImageEditRegular, ImageRegular } from "@fluentui/react-icons";
 
-import { Texture } from "core/Materials/Textures/texture";
+import { BaseTexture } from "core/Materials/Textures/baseTexture";
+import { DynamicTexture } from "core/Materials/Textures/dynamicTexture";
 import { Observable } from "core/Misc";
 import { InterceptProperty } from "../../../instrumentation/propertyInstrumentation";
 import { SceneContextIdentity } from "../../sceneContext";
@@ -22,8 +23,8 @@ export const TextureHierarchyServiceDefinition: ServiceDefinition<[], [ISceneExp
         const sectionRegistration = sceneExplorerService.addSection({
             displayName: "Textures",
             order: 400,
-            predicate: (entity) => entity instanceof Texture,
-            getRootEntities: () => scene.textures,
+            predicate: (entity): entity is BaseTexture => entity instanceof BaseTexture && entity.getClassName() !== "AdvancedDynamicTexture",
+            getRootEntities: () => scene.textures.filter((texture) => texture.getClassName() !== "AdvancedDynamicTexture"),
             getEntityDisplayInfo: (texture) => {
                 const onChangeObservable = new Observable<void>();
 
@@ -44,7 +45,7 @@ export const TextureHierarchyServiceDefinition: ServiceDefinition<[], [ISceneExp
                     },
                 };
             },
-            entityIcon: () => <ImageRegular />,
+            entityIcon: ({ entity: texture }) => (texture instanceof DynamicTexture ? <ImageEditRegular /> : <ImageRegular />),
             getEntityAddedObservables: () => [scene.onNewTextureAddedObservable],
             getEntityRemovedObservables: () => [scene.onTextureRemovedObservable],
         });
diff --git a/packages/dev/inspector-v2/webpack.config.js b/packages/dev/inspector-v2/webpack.config.js
@@ -23,9 +23,10 @@ module.exports = (env) => {
         resolve: {
             extensions: [".ts", ".tsx", ".js", ".jsx"],
             alias: {
+                addons: path.resolve("../../dev/addons/dist"),
                 core: path.resolve("../../dev/core/dist"),
+                gui: path.resolve("../../dev/gui/dist"),
                 loaders: path.resolve("../../dev/loaders/dist"),
-                addons: path.resolve("../../dev/addons/dist"),
                 materials: path.resolve("../../dev/materials/dist"),
                 "shared-ui-components": path.resolve("../../dev/sharedUiComponents/src"),
             },
diff --git a/packages/tools/playground/webpack.config.js b/packages/tools/playground/webpack.config.js
@@ -25,6 +25,7 @@ module.exports = (env) => {
                 materials: path.resolve("../../dev/materials/dist"),
                 core: path.resolve("../../dev/core/dist"),
                 loaders: path.resolve("../../dev/loaders/dist"),
+                gui: path.resolve("../../dev/gui/dist"),
             },
         },
         externals: [
@@ -42,6 +43,8 @@ module.exports = (env) => {
                         return callback(null, "ADDONS");
                     } else if (/^materials\//.test(request)) {
                         return callback(null, "BABYLON");
+                    } else if (/^gui\//.test(request)) {
+                        return callback(null, "BABYLON.GUI");
                     }
                 }
 
