Frame Graph v1.0 is now live!

Announcements
1

Frame Graph was an experimental feature in Babylon.js v8.0, and has now officially reached v1.0 in v9.0!

What is a Frame Graph?

The Frame Graph system is a powerful tool for creating and configuring the different rendering passes used during the course of a frame.

It is a modular system, which allows you to create autonomous and efficient rendering modules, which improves extensibility thanks to decoupled and composable modules.

Frame graphs simplify and optimize resource management: by reusing textures, you can potentially save tons of GPU memory, depending on the complexity of your graph!

Frame graphs also allow you to do things that were not previously possible with our fixed rendering loop.

Thanks to the new visual editor Node Render Graph Editor (NRGE), it is very easy for anyone to visually create the layout of a frame, without any programming!

Frame Graph documentation

All documentation is available at the following address:

The documentation describes in detail how the frame graph framework works, all major classes involved, as well the the different building blocks (tasks) you can use, both programmatically and through a node render graph.

An introduction to the use of frame graphs is available here: Babylon.js docs

There are also some simple and more advanced examples available here: Babylon.js docs

New with Frame Graphs

There’s a new volumetric lighting post-process effect, only available with frame graphs:

PG: https://playground.babylonjs.com/?webgpu=&inspectorv2=true#WLGEJB#7

You can find this example and many more in the Frame Graph Task List page.

As mentioned above, you can also perform operations that are not possible with our existing static pipeline, such as using the glow layer in multiple render target textures:

image
image1275×1139 87.7 KB

PG: https://playground.babylonjs.com/?inspectorv2=true#IG8NRC#91

Or generate geometry textures with VAT support:

image
image1269×1078 238 KB

Documentation and PG: Babylon.js docs

Your turn!

We encourage you to test this new feature as much as you like and see if it can be useful to you.

Please also feel free to post your comments and report any problems you may encounter or any features you think are missing.

We are very excited about this new feature!

22 Likes
2

Can’t wait to see the incredible things created with this feature!

1 Like
3

Man! I remember talking about this when you came to visit us 2 years ago! This is so cool to see it live now!

4

Amazing !!! love the result !!!

1 Like
5

I am so excited to deep dive into this!

6

Incredible work!

7

Let’s go! I am going to replace all my rendering logic with this, very excited about it :smile:

1 Like
8

Some of the examples in the documentation don’t seem to work. Is there something wrong with the documentation?

https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphBlocks/frameGraphBlocksDescription/
https://playground.babylonjs.com/#PIZ1GK#2094

rendererComponent.tsx:73 TypeError: nrg.build is not a function
    at rebuildFunc (index.js:41:17)
    at loadSSRFrameGraph (index.js:45:15)
    at async Proxy.createScene (index.js:52:34)
    at async Object.run (runner.ts:567:13)
    at async RR._compileAndRunAsync (rendererComponent.tsx:393:31)

https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphExamples/frameGraphExampleCustomPostProcess/

nrg.build();
9

I’m too stupid, I inverted the PG number and the number in the image path when I fixed this link a few days ago!

This will fix it:

The PG is https://playground.babylonjs.com/#PIZ1GK#2391

And FrameGraph: Fix example code in custom post-process example by Popov72 · Pull Request #1479 · BabylonJS/Documentation · GitHub for the custom post-process doc page.

5 Likes
10

amazing work ! :growing_heart:

11

I was wondering, since there is a couple of places in the docs and afaik it was mentioned in forum that Frame Graph is not finished yet, what is the actual state now? Will it be considered finsihed when 9.0 releases?

May I ask this here, otherwise Ill move: Are the PrepassRenderer and DepthRenderer redundant now?

I use Prepass in order to get access to the position texture. Getting it with the gBuffer did cost draw calls. But maybe this is taken care now by the graph analysis?

re DepthRenderer in specific there is the parameter of linear vs non-linear depth. I could not find this anywhere in Frame Grapch blocks.

12

Yes, we consider that the frame graph functionality can be fully used in version 9.0 and will be marked as version 1.0 of the frame graph.

Not everything has been ported yet, see this page for a detailed list of what, to our knowledge, is not directly supported by frame graphs, or can be improved:

Yes, the Geometry Renderer Task is responsible for generating all kinds of geometry textures.

The geometry renderer task can also render the scene itself, in addition to rendering geometry textures, with certain limitations at present (see the documentation).

These are supported through the different types of geometry depth textures:

  • geometryViewDepthTexture: depth in camera view space. This is the Z component of the vertex coordinate in the camera’s view space and is a value between near and far, the camera’s near and far clipping planes => it corresponds to the storeCameraSpaceZ case of the depth renderer
  • geometryNormViewDepthTexture: normalized depth in camera view space. Identical to the value above, but with values between 0 and 1, calculated using the formula normViewDepth = (viewDepth - near) / (far - near) => it corresponds to the linear case of the depth renderer
  • geometryScreenDepthTexture: depth in screen space. This is the depth written to the depth buffer (gl_FragCoord.z) and is a value between 0 and 1 => it corresponds to the non linear case of the depth renderer
2 Likes