Inspector v2: Add GUI and Frame Graphs to Scene Explorer

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",

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,

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();
+            },
+        };
+    },
+};

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();
+            },
+        };
+    },
+};

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],
         });

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"),
             },

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");
                     }
                 }