FrameGraph: description of all tasks + misc updates

configuration/structure.json

@@ -659,6 +659,22 @@
                                     },
                                     "content": "features/featuresDeepDive/frameGraph/frameGraphBasicConcepts"
                                 },
+                                "frameGraphClassFramework": {
+                                    "friendlyName": "Description of the class framework",
+                                    "children": {
+                                        "frameGraphClassOverview": {
+                                            "friendlyName": "Introduction to Frame Graph classes",
+                                            "children": {},
+                                            "content": "features/featuresDeepDive/frameGraph/frameGraphClassFramework/frameGraphClassOverview"
+                                        },
+                                        "frameGraphTaskList": {
+                                            "friendlyName": "Frame Graph Task List",
+                                            "children": {},
+                                            "content": "features/featuresDeepDive/frameGraph/frameGraphClassFramework/frameGraphTaskList"
+                                        }
+                                    },
+                                    "content": "features/featuresDeepDive/frameGraph/frameGraphClassFramework"
+                                },
                                 "frameGraphBlocks": {
                                     "friendlyName": "Render Graph Blocks",
                                     "children": {

content/features/featuresDeepDive/frameGraph/frameGraphBlocks/frameGraphBlocksDescription.md

@@ -228,6 +228,10 @@ Once again, the inputs and outputs are self-explanatory: **target** is the textu
 
 ## Misc blocks
 
+<H3Image title="ComputeShader" image="/img/frameGraph/block_computeshader.jpg" alt="ComputeShader node"/>
+
+This block allows you to execute a compute shader (WebGPU only - doesn't do anything in WebGL). The compute shader must be configured programmatically. See the NRG playground in [FrameGraphComputeShaderTask](/features/featuresDeepDive/frameGraph/frameGraphClassFramework/frameGraphTaskList#framegraphcomputeshadertask) for an example of how to use this block.
+
 <H3Image title="Cull" image="/img/frameGraph/block_cull.jpg" alt="Cull node"/>
 
 This block allows you to cull a list of objects against a camera frustum: you must provide the camera via the **camera** input, and the list of objects via the **objects** input. The result of this block is provided by the **output**: the list of objects that are (at least partially) inside the camera frustum.
@@ -244,8 +248,6 @@ executeBlock.task.func = (_context) => {
 };
 ```
 
-In WebGPU, you can use this block to execute a compute shader at a specific moment in the execution of the frame graph, for example.
-
 <H3Image title="GUI" image="/img/frameGraph/block_gui.jpg" alt="GUI node"/>
 
 This block allows you to apply a full-screen GUI over a frame graph texture.

content/features/featuresDeepDive/frameGraph/frameGraphClassFramework.md

@@ -0,0 +1,15 @@
+---
+title: Description of the frame graph framework
+image:
+description: Learn all about the Babylon.js Frame Graph system.
+keywords: diving deeper, frame graph, rendering, node editor, framework
+---
+
+See the [Basic Concepts and Getting Started](/features/featuresDeepDive/frameGraph/frameGraphBasicConcepts) section for general information on nomenclature and an overview of the frame graph concept.
+
+This section describes the frame graph class framework:
+* [Overview of the frame graph framework](/features/featuresDeepDive/frameGraph/frameGraphClassFramework/frameGraphClassOverview) describes the main classes that are part of the framework
+* [List of task classes in the frame graph framework](/features/featuresDeepDive/frameGraph/frameGraphClassFramework/frameGraphTaskList) describes all the tasks that can be used with a frame graph.
+<br/>
+Note that the implementation of the framework is inspired by Unity's [Render Graph System](https://docs.unity3d.com/6000.2/Documentation/Manual/urp/render-graph-introduction.html).
+

content/features/featuresDeepDive/frameGraph/frameGraphExamples/frameGraphExampleCustomPostProcess.md

@@ -36,7 +36,7 @@ const task = new BABYLON.FrameGraphCustomPostProcessTask("edgeDetection", frameG
     uniforms: ["escale", "threshold"],
 });
 
-this.task.onApplyObservable.add((effect) => {
+task.onApplyObservable.add((effect) => {
     effect.setFloat("escale", 3);
     effect.setFloat("threshold", 0.1);
 });
@@ -87,10 +87,10 @@ Note: **EdgeDetectionFragment** is the shader code of the post-process.
 
 This is the same code as above, but it allows you to easily modify the **escale** and **threshold** properties.
 
-As for the implementation of the node graph rendering block `NodeRenderGraphEdgePostProcessBlock`, it is quite simple thanks to the use of `NodeRenderGraphBasePostProcessBlock`:
+As for the implementation of the node graph rendering block `NodeRenderGraphEdgePostProcessBlock`, it is quite simple thanks to the use of `NodeRenderGraphBaseWithPropertiesPostProcessBlock`:
 * First, we declare a private variable to contain the wrapper class and initialize it in the constructor:
 ```typescript
-export class NodeRenderGraphEdgePostProcessBlock extends BABYLON.NodeRenderGraphBasePostProcessBlock {
+export class NodeRenderGraphEdgePostProcessBlock extends BABYLON.NodeRenderGraphBaseWithPropertiesPostProcessBlock {
     protected override _frameGraphTask: BABYLON.FrameGraphCustomPostProcessTask;
 
     public override get task() {
@@ -178,7 +178,7 @@ Note: Since a playground can be launched multiple times, we first check whether
 
 You can use this PG to test it:
 
-<Playground id="#ZC3Y12#4" title="Custom post-process in NRGE" description="Making a custom post-process available in NRGE" isMain={true}/>
+<Playground id="#ZC3Y12#8" image="/img/playgroundsAndNMEs/pg-ZC3Y12-4.png" title="Custom post-process in NRGE" description="Making a custom post-process available in NRGE" isMain={true}/>
 
 The scene is displayed normally. To use a frame graph with the edge detection post-process, proceed as follows:
 * Open the inspector
@@ -202,7 +202,7 @@ scene.frameGraph = nrg.frameGraph;
 await nrg.whenReadyAsync();
 ```
 
-<Playground id="#ZC3Y12#5" image="/img/playgroundsAndNMEs/pg-ZC3Y12-2.png" title="Load node render graph with custom post-process" description="Loading a node render graph from the snippet server with custom post-process" isMain={true}/>
+<Playground id="#ZC3Y12#7" image="/img/playgroundsAndNMEs/pg-ZC3Y12-2.png" title="Load node render graph with custom post-process" description="Loading a node render graph from the snippet server with custom post-process" isMain={true}/>
 
 **Important**: editing the node render graph with the standalone NRGE (https://nrge.babylonjs.com) will not work!
 
@@ -212,7 +212,7 @@ This is because the implementation of the block node for the edge detection post
 
 Note that you can also open NRGE using a code:
 ```typescript
-const nrg = await BABYLON.NodeRenderGraph.ParseFromSnippetAsync("XQF0ML#1", scene);
+const nrg = await BABYLON.NodeRenderGraph.ParseFromSnippetAsync("XQF0ML", scene);
 
 nrg.build();
 nrg.edit();

lib/frontendUtils/frontendTools.ts

@@ -22,7 +22,8 @@ export const getExampleLink = (example: Partial<IExampleLink>, full: boolean = t
             return `https://nrge.babylonjs.com/${id}`;
         case "pg":
         default:
-            return `https://playground.babylonjs.com/${full ? "full.html" : ""}${params}${id}`;
+            return `http://localhost:1338/${full ? "full.html" : ""}${params}${id}`;
+            //return `https://playground.babylonjs.com/${full ? "full.html" : ""}${params}${id}`;
     }
 };