Playground: Add fluent code for frame graphs (#17277)

I created the PR in draft mode, to let #17216 go first.

Author: Popov72

packages/tools/playground/public/procedural.json

@@ -5,6 +5,13 @@
         "subItems": ["Debug Layer", "Shadows", "Skybox", "Audio", "Lens Flare", "Sprites"],
         "keepExpanded": true
     },
+    {
+        "label": "Frame Graph",
+        "tooltip": "Frame Graph tools",
+        "subItems": ["Simple ", "Simple (NRG)", "Simple (NRG no autofill JS)"],
+        "subItemsTS": ["Simple ", "Simple (NRG)", "Simple (NRG no autofill TS)"],
+        "keepExpanded": true
+    },
     {
         "label": "Cameras",
         "tooltip": "Select a camera type",

packages/tools/playground/public/templates.json

@@ -36,6 +36,33 @@
         "insertText": "// Load the spritesheet (with appropriate settings) associated with the JSON Atlas.\nlet spriteSheet = new BABYLON.Texture(\"textures/spriteMap/none_trimmed/Legends_Level_A.png\", scene,\n    false, //NoMipMaps\n    false, //InvertY usually false if exported from TexturePacker\n    BABYLON.Texture.NEAREST_NEAREST, //Sampling Mode\n    null, //Onload, you could spin up the sprite map in a function nested here\n    null, //OnError\n    null, //CustomBuffer\n    false, //DeleteBuffer\n    BABYLON.Engine.TEXTURETYPE_RGBA //ImageFormageType RGBA\n);\n// Create an assets manager to load the JSON file\nconst assetsManager = new BABYLON.AssetsManager(scene);\nconst textTask = assetsManager.addTextFileTask(\"text task\", \"textures/spriteMap/none_trimmed/Legends_Level_A.json\");\n// Create the sprite map on succeful loading\ntextTask.onSuccess = (task) => {\n    let background = new BABYLON.SpriteMap(\"background\", JSON.parse(task.text), spriteSheet, {\n            stageSize: new BABYLON.Vector2(2, 2),\n            flipU: true //Sometimes you need to flip, depending on the sprite format.\n        }, scene);\n    // Set 4 sprites one per tile.\n    for (let i = 0; i < 4; i++) {\n        background.changeTiles(0, new BABYLON.Vector2(i % 2, Math.floor(i / 2)), 9 * i + 9);\n    }\n};\n//load the assets manager\nassetsManager.load();"
     },
 
+    {
+        "label": "Frame Graph: simple frame graph",
+        "key": "Simple ",
+        "documentation": "https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphBasicConcepts/frameGraphReplaceRenderLoop/",
+        "insertText": "const frameGraph = new BABYLON.FrameGraph(scene, true);\n\nengine.onResizeObservable.add(() => {\n    frameGraph.build();\n});\n\nscene.cameraToUseForPointers = camera;\nscene.frameGraph = frameGraph;\n\nconst samples = 4;\n\nconst colorTexture = frameGraph.textureManager.createRenderTargetTexture(\"color\", {\n    size: { width: 100, height: 100 },\n    options: {\n        createMipMaps: false,\n        types: [BABYLON.Constants.TEXTURETYPE_UNSIGNED_BYTE],\n        formats: [BABYLON.Constants.TEXTUREFORMAT_RGBA],\n        samples,\n        useSRGBBuffers: [false],\n        labels: [\"color\"],\n    },\n    sizeIsPercentage: true,\n});\n\nconst depthTexture = frameGraph.textureManager.createRenderTargetTexture(\"depth\", {\n    size: { width: 100, height: 100 },\n    options: {\n        createMipMaps: false,\n        types: [BABYLON.Constants.TEXTURETYPE_UNSIGNED_BYTE],\n        formats: [BABYLON.Constants.TEXTUREFORMAT_DEPTH32_FLOAT],\n        samples,\n        useSRGBBuffers: [false],\n        labels: [\"depth\"],\n    },\n    sizeIsPercentage: true,\n});\n\nconst clearTask = new BABYLON.FrameGraphClearTextureTask(\"clear\", frameGraph);\n\nclearTask.clearColor = true;\nclearTask.clearDepth = true;\nclearTask.targetTexture = colorTexture;\nclearTask.depthTexture = depthTexture;\n\nframeGraph.addTask(clearTask);\n\nconst rlist = {\n    meshes: scene.meshes,\n    particleSystems: scene.particleSystems,\n}\n\nconst renderTask = new BABYLON.FrameGraphObjectRendererTask(\"renderObjects\", frameGraph, scene);\n\nrenderTask.targetTexture = clearTask.outputTexture;\nrenderTask.depthTexture = clearTask.outputDepthTexture;\nrenderTask.objectList = rlist;\nrenderTask.camera = camera;\n\nframeGraph.addTask(renderTask);\n\nconst copyToBackbufferTask = new BABYLON.FrameGraphCopyToBackbufferColorTask(\"copytobackbuffer\", frameGraph);\n\ncopyToBackbufferTask.sourceTexture = renderTask.outputTexture;\n\nframeGraph.addTask(copyToBackbufferTask);\n\nframeGraph.build();\n\nawait frameGraph.whenReadyAsync();"
+    },
+    {
+        "label": "Frame Graph: simple node render graph",
+        "key": "Simple (NRG)",
+        "documentation": "https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphBasicConcepts/frameGraphReplaceRenderLoop/#using-a-node-render-graph",
+        "insertText": "const nrg = await BABYLON.NodeRenderGraph.ParseFromSnippetAsync(\"2LR76I\", scene);\n\nnrg.build();\n\nscene.frameGraph = nrg.frameGraph;\n\nawait nrg.whenReadyAsync();"
+    },
+    {
+        "label": "Frame Graph: simple node render graph (no autofill parameters)",
+        "key": "Simple (NRG no autofill JS)",
+        "documentation": "https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphBasicConcepts/frameGraphReplaceRenderLoop/#using-a-node-render-graph",
+        "language": "javascript",
+        "insertText": "scene.cameraToUseForPointers = camera;\n\nconst nrg = await BABYLON.NodeRenderGraph.ParseFromSnippetAsync(\"2LR76I\", scene, { autoFillExternalInputs: false });\n\nconst cameraBlock = nrg.getBlockByName(\"Camera\");\ncameraBlock.value = camera;\n\nconst objectListBlock = nrg.getBlockByName(\"Object List\");\nobjectListBlock.value = { meshes: null, particleSystems: null };\n\nnrg.build();\n\nscene.frameGraph = nrg.frameGraph;\n\nawait nrg.whenReadyAsync();"
+    },
+    {
+        "label": "Frame Graph: simple node render graph (no autofill parameters)",
+        "key": "Simple (NRG no autofill TS)",
+        "documentation": "https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphBasicConcepts/frameGraphReplaceRenderLoop/#using-a-node-render-graph",
+        "language": "typescript",
+        "insertText": "scene.cameraToUseForPointers = camera;\n\nconst nrg = await BABYLON.NodeRenderGraph.ParseFromSnippetAsync(\"2LR76I\", scene, { autoFillExternalInputs: false });\n\nconst cameraBlock = nrg.getBlockByName<BABYLON.NodeRenderGraphInputBlock>(\"Camera\");\ncameraBlock.value = camera;\n\nconst objectListBlock = nrg.getBlockByName<BABYLON.NodeRenderGraphInputBlock>(\"Object List\");\nobjectListBlock.value = { meshes: null, particleSystems: null };\n\nnrg.build();\n\nscene.frameGraph = nrg.frameGraph;\n\nawait nrg.whenReadyAsync();"
+    },
+
     {
         "label": "Add Camera : Arc Rotate Camera w/Radians",
         "key": "Arc Rotate (Rad)",

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

@@ -237,14 +237,25 @@ export class CommandBarComponent extends React.Component<ICommandBarComponentPro
         ];
 
         // Procedural Code Generator Options (build from procedural.json)
+        const isJavaScript = this.props.globalState.language === "JS" || this.props.globalState.language === "JavaScript";
+
         let proceduralOptions: any[] = [];
-        proceduralOptions = this._procedural.map((item) => ({
-            ...item,
-            onClick: () => {},
-            onInsert: (snippetKey: string) => {
-                this.onInsertSnippet(snippetKey);
-            },
-        }));
+        proceduralOptions = this._procedural.map((item) => {
+            const obj: any = {
+                ...item,
+                onClick: () => {},
+                onInsert: (snippetKey: string) => {
+                    this.onInsertSnippet(snippetKey);
+                },
+            };
+            if (isJavaScript) {
+                delete obj.subItemsTS;
+            } else if (obj.subItemsTS) {
+                obj.subItems = obj.subItemsTS;
+                delete obj.subItemsTS;
+            }
+            return obj;
+        });
 
         // Engine Version Options
         const activeVersion = Utilities.ReadStringFromStore("version", "Latest", true);

packages/tools/playground/src/scss/commandBar.scss

@@ -232,7 +232,7 @@
                 position: absolute;
                 left: 200px;
                 top: 0;
-                width: 150px;
+                width: 220px;
                 display: none;
 
                 &.background-js {