Node Render Graph: Add support for custom blocks in NRGE (#17343)

Author: Popov72

packages/dev/core/src/FrameGraph/Node/Types/nodeRenderGraphTypes.ts

@@ -1,4 +1,29 @@
-import type { Color4, Scene, FrameGraphTextureHandle, Camera, FrameGraphObjectList, IShadowLight, FrameGraphShadowGeneratorTask, FrameGraphObjectRendererTask } from "core/index";
+import type {
+    Color4,
+    Scene,
+    FrameGraphTextureHandle,
+    Camera,
+    FrameGraphObjectList,
+    IShadowLight,
+    FrameGraphShadowGeneratorTask,
+    FrameGraphObjectRendererTask,
+    FrameGraph,
+    NodeRenderGraphBlock,
+} from "core/index";
+
+/**
+ * Description of a custom block to be used in the node render graph editor
+ */
+export interface INodeRenderGraphCustomBlockDescription {
+    /** Block name. It will be used as the block name in the left menu of the editor. Spaces must be replaced by underscores in the name. */
+    name: string;
+    /** Description (tooltip) of the block. */
+    description: string;
+    /** Category of the block. Spaces must be replaced by underscores in the category name. */
+    menu: string;
+    /** Factory function to create the block. */
+    factory: (frameGraph: FrameGraph, scene: Scene) => NodeRenderGraphBlock;
+}
 
 /**
  * Interface used to configure the node render graph editor
@@ -10,6 +35,7 @@ export interface INodeRenderGraphEditorOptions {
     nodeRenderGraphEditorConfig?: {
         backgroundColor?: Color4;
         hostScene?: Scene;
+        customBlockDescriptions?: INodeRenderGraphCustomBlockDescription[];
     };
 }
 

packages/dev/core/src/FrameGraph/Node/nodeRenderGraph.ts

@@ -10,6 +10,7 @@ import type {
     Scene,
     WritableObject,
     IShadowLight,
+    INodeRenderGraphCustomBlockDescription,
 } from "core/index";
 import { Observable } from "../../Misc/observable";
 import { NodeRenderGraphOutputBlock } from "./Blocks/outputBlock";
@@ -49,6 +50,9 @@ export class NodeRenderGraph {
     /** Define the Url to load snippets */
     public static SnippetUrl = Constants.SnippetUrl;
 
+    /** Description of custom blocks to use in the node render graph editor */
+    public static CustomBlockDescriptions: INodeRenderGraphCustomBlockDescription[] = [];
+
     // eslint-disable-next-line @typescript-eslint/naming-convention
     private BJSNODERENDERGRAPHEDITOR = this._getGlobalNodeRenderGraphEditor();
 
@@ -272,6 +276,7 @@ export class NodeRenderGraph {
     private _createNodeEditor(additionalConfig?: any) {
         const nodeEditorConfig: any = {
             nodeRenderGraph: this,
+            customBlockDescriptions: NodeRenderGraph.CustomBlockDescriptions,
             ...additionalConfig,
         };
         this.BJSNODERENDERGRAPHEDITOR.NodeRenderGraphEditor.Show(nodeEditorConfig);

packages/tools/nodeRenderGraphEditor/src/components/nodeList/nodeListComponent.tsx

@@ -152,7 +152,9 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
         }
 
         // Block types used to create the menu from
-        const allBlocks: any = {
+        const allBlocks: {
+            [key: string]: string[];
+        } = {
             Custom_Frames: customFrameNames,
             Inputs: [
                 "TextureBlock",
@@ -195,26 +197,56 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
             Textures: ["ClearBlock", "CopyTextureBlock", "GenerateMipmapsBlock"],
         };
 
+        const customBlockDescriptions = this.props.globalState.customBlockDescriptions;
+        if (customBlockDescriptions) {
+            for (const desc of customBlockDescriptions) {
+                const menu = desc.menu || "Custom_Blocks";
+                let name = desc.name;
+                if (!name.endsWith("Block")) {
+                    name += "Block";
+                }
+                if (allBlocks[menu]) {
+                    allBlocks[menu].push(name);
+                } else {
+                    allBlocks[menu] = [name];
+                }
+            }
+        }
+
         // Create node menu
         const blockMenu = [];
         for (const key in allBlocks) {
             const blockList = allBlocks[key]
                 .filter((b: string) => !this.state.filter || b.toLowerCase().indexOf(this.state.filter.toLowerCase()) !== -1)
                 .sort((a: string, b: string) => a.localeCompare(b))
-                .map((block: any) => {
+                .map((blockName: string) => {
+                    const displayBlockName = blockName.replace(/_/g, " ");
                     if (key === "Custom_Frames") {
                         return (
                             <DraggableLineWithButtonComponent
-                                key={block}
-                                data={block}
-                                tooltip={this._customFrameList[block] || ""}
+                                key={blockName}
+                                data={displayBlockName}
+                                tooltip={this._customFrameList[blockName] || ""}
                                 iconImage={deleteButton}
                                 iconTitle="Delete"
                                 onIconClick={(value) => this.removeItem(value)}
                             />
                         );
                     }
-                    return <DraggableLineComponent key={block} data={block} tooltip={NodeListComponent._Tooltips[block] || ""} />;
+                    return (
+                        <DraggableLineComponent
+                            key={blockName}
+                            data={displayBlockName}
+                            tooltip={
+                                customBlockDescriptions?.find((desc) => {
+                                    const name = desc.name.endsWith("Block") ? desc.name : desc.name + "Block";
+                                    return name === blockName;
+                                })?.description ||
+                                NodeListComponent._Tooltips[blockName] ||
+                                ""
+                            }
+                        />
+                    );
                 });
 
             if (key === "Custom_Frames") {
@@ -262,7 +294,7 @@ export class NodeListComponent extends React.Component<INodeListComponentProps,
                     finalName = name.substring(0, nameIndex);
                     finalName += " [custom]";
                 } else {
-                    finalName = name.replace("Block", "");
+                    finalName = name.replace("Block", "").replace(/_/g, " ");
                 }
                 return finalName;
             };

packages/tools/nodeRenderGraphEditor/src/globalState.ts

@@ -17,6 +17,7 @@ import { RegisterDebugSupport } from "./graphSystem/registerDebugSupport";
 import { PreviewType } from "./components/preview/previewType";
 import type { Scene } from "core/scene";
 import { SerializationTools } from "./serializationTools";
+import type { INodeRenderGraphCustomBlockDescription } from "core/FrameGraph/Node/Types/nodeRenderGraphTypes";
 
 export class GlobalState {
     hostElement: HTMLElement;
@@ -55,6 +56,7 @@ export class GlobalState {
     _engine: number;
 
     customSave?: { label: string; action: (data: string) => Promise<void> };
+    customBlockDescriptions?: INodeRenderGraphCustomBlockDescription[];
 
     private _nodeRenderGraph: NodeRenderGraph;
 

packages/tools/nodeRenderGraphEditor/src/graphEditor.tsx

@@ -455,6 +455,8 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
 
         let customBlockData: any;
 
+        blockType = blockType.replace(/ /g, "_");
+
         // Dropped something that is not a node
         if (blockType === "") {
             return;
@@ -498,7 +500,16 @@ export class GraphEditor extends React.Component<IGraphEditorProps, IGraphEditor
         if (blockType.indexOf("Block") === -1) {
             newNode = this.addValueNode(blockType);
         } else {
-            const block = BlockTools.GetBlockFromString(blockType, this.props.globalState.nodeRenderGraph.frameGraph, this.props.globalState.scene)!;
+            let block: NodeRenderGraphBlock = BlockTools.GetBlockFromString(blockType, this.props.globalState.nodeRenderGraph.frameGraph, this.props.globalState.scene)!;
+            if (block === null) {
+                const customBlock = this.props.globalState.customBlockDescriptions?.find((d) => {
+                    const name = d.name.endsWith("Block") ? d.name : d.name + "Block";
+                    return name === blockType;
+                });
+                if (customBlock) {
+                    block = customBlock.factory(this.props.globalState.nodeRenderGraph.frameGraph, this.props.globalState.scene);
+                }
+            }
 
             if (block.isUnique) {
                 const className = block.getClassName();

packages/tools/nodeRenderGraphEditor/src/nodeRenderGraphEditor.ts

@@ -10,6 +10,7 @@ import { RegisterToPropertyTabManagers } from "./graphSystem/registerToPropertyL
 import { RegisterTypeLedger } from "./graphSystem/registerToTypeLedger";
 import type { Scene } from "core/scene";
 import { CreatePopup } from "shared-ui-components/popupHelper";
+import type { INodeRenderGraphCustomBlockDescription } from "core/FrameGraph/Node/Types/nodeRenderGraphTypes";
 
 /**
  * Interface used to specify creation options for the node editor
@@ -20,6 +21,7 @@ export interface INodeEditorOptions {
     hostElement?: HTMLElement;
     customSave?: { label: string; action: (data: string) => Promise<void> };
     customLoadObservable?: Observable<any>;
+    customBlockDescriptions?: INodeRenderGraphCustomBlockDescription[];
 }
 
 /**
@@ -65,6 +67,7 @@ export class NodeRenderGraphEditor {
         globalState.hostWindow = hostElement.ownerDocument.defaultView!;
         globalState.stateManager.hostDocument = globalState.hostDocument;
         globalState.noAutoFillExternalInputs = options.hostScene !== undefined && options.hostScene !== null;
+        globalState.customBlockDescriptions = options.customBlockDescriptions;
 
         const graphEditor = React.createElement(GraphEditor, {
             globalState: globalState,