# Frame Graph v1.0 is now live! **URL:** \ **Category:** Announcements\ **Created:** [January 20, 2026, 2:38pm UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163 "2026-01-20T14:38:28Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [January 20, 2026, 2:38pm UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/1 "2026-01-20T14:38:28Z")
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](https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphBasicConcepts) 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](https://nrge.babylonjs.com/) (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: > **[Babylon.js docs](https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/)** 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](https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphBasicConcepts/) There are also some simple and more advanced examples available here: [Babylon.js docs](https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphExamples/) ## 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](https://playground.babylonjs.com/?webgpu=&inspectorv2=true#WLGEJB#7) You can find this example and many more in the [Frame Graph Task List](https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphClassFramework/frameGraphTaskList/) 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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/7/b7d1530c9ba0d65246b7e4117dec8b762746aa20.jpeg) PG: [https://playground.babylonjs.com/?inspectorv2=true#IG8NRC#91](https://playground.babylonjs.com/?inspectorv2=true#IG8NRC#91) Or generate geometry textures with VAT support: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/3/4339ec16d54c7162e3a004948a276418006e545d.jpeg) Documentation and PG: [Babylon.js docs](https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphExamples/frameGraphExampleGeometryVAT/) ## 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! ---
**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\ **Post date:** [January 20, 2026, 2:40pm UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/2 "2026-01-20T14:40:35Z")
Can’t wait to see the incredible things created with this feature! ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [January 20, 2026, 4:31pm UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/3 "2026-01-20T16:31:38Z")
Man! I remember talking about this when you came to visit us 2 years ago! This is so cool to see it live now! ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [January 20, 2026, 6:35pm UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/4 "2026-01-20T18:35:24Z")
Amazing !!! love the result !!! ---
**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\ **Post date:** [January 20, 2026, 7:54pm UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/5 "2026-01-20T19:54:31Z")
I am so excited to deep dive into this! ---
**Author:** ![AlitarSemiramis](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alitarsemiramis/32/49920_2.png) [@AlitarSemiramis](https://forum.babylonjs.com/u/AlitarSemiramis)\ **Post date:** [January 21, 2026, 8:11am UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/6 "2026-01-21T08:11:04Z")
Incredible work! ---
**Author:** ![CrashMaster](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/crashmaster/32/23662_2.png) [@CrashMaster](https://forum.babylonjs.com/u/CrashMaster)\ **Post date:** [January 21, 2026, 9:59am UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/7 "2026-01-21T09:59:56Z")
Let’s go! I am going to replace all my rendering logic with this, very excited about it 😄 ---
**Author:** ![cx20](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cx20/32/46_2.png) [@cx20](https://forum.babylonjs.com/u/cx20)\ **Post date:** [January 21, 2026, 4:53pm UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/8 "2026-01-21T16:53:28Z")
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` ```auto 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/` ```auto nrg.build(); ``` ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [January 21, 2026, 5:02pm UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/9 "2026-01-21T17:02:57Z")
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](https://playground.babylonjs.com/#PIZ1GK#2391) And [FrameGraph: Fix example code in custom post-process example by Popov72 · Pull Request #1479 · BabylonJS/Documentation · GitHub](https://github.com/BabylonJS/Documentation/pull/1479) for the custom post-process doc page. ---
**Author:** ![CraigFeldspar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/craigfeldspar/32/45631_2.png) [@CraigFeldspar](https://forum.babylonjs.com/u/CraigFeldspar)\ **Post date:** [January 25, 2026, 8:21pm UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/10 "2026-01-25T20:21:06Z")
amazing work ! 💗 ---
**Author:** ![Joe\_Kerr](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joe_kerr/32/39017_2.png) [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)\ **Post date:** [February 6, 2026, 9:13am UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/11 "2026-02-06T09:13:40Z")
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. ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [February 6, 2026, 11:35am UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/12 "2026-02-06T11:35:29Z")
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: > > > Here are a number of things to implement/check to ensure that they work as expec…ted with frame graphs. > This list is not ranked in order of importance; some items are more important than others, and some will likely be postponed until a request is made, as they are not a priority (such as a number of rarely used post-processes): > > \* All renderers: > \* \[x\] bounding box > \* \[x\] depth peeling / OIT > \* \[x\] edges renderer (no changes required) > \* \[x\] outline renderer (no changes required) > \* Note that the depth renderer and the geometry buffer renderer are supported through the geometry renderer task > \* \[x\] support the new selection outline render pipeline > \* \[x\] make SPS works > \* Missing post-processes / rendering pipelines: > \* \[x\] SSAO2 > \* \[x\] motion blur > \* \[x\] screen space curvature > \* \[x\] sharpen, convolution, etc. > \* \[x\] provides a way to use a custom post process (see https://forum.babylonjs.com/t/feedback-on-frame-graphs/58672/20 or https://playground.babylonjs.com/#2G7PZ6#10) > \* \[x\] Investigate crash when resizing multiple times the render view (try with https://playground.babylonjs.com/#9YU4C5#12). Only in WebGL =\> https://issues.chromium.org/issues/442112333 > \* \[x\] autoCalcDepthBounds doesn't work with the CSM task > \* \[x\] GPU picker > \* \[x\] Rig cameras > \* \[x\] Layers > \* \[x\] Gizmos > \* \[x\] Shadows > \* \[x\] Clustered lights > \* \[x\] Add support for transmissive objects > \* \[x\] Add support for multi-RTT to the clear texture / object renderer tasks > \* \[x\] Custom render target textures =\> Use the \`ObjectRenderer\` task and link it to the \*\*dependencies\*\* input of another \`ObjectRenderer\` if the texture is to be used in the context of this second rendering (in a material, for example). > \* \[x\] TAA: adds a post-process to do it (http://localhost:1338/#2G7PZ6#26) > \* \[x\] snapshot rendering mode > \* \[x\] frozen meshes > \* screenshots > \* \[x\] simple screenshots (from the rendering canvas) > \* \[x\] RTT screenshots > \* \[x\] performance priority mode > \* inspector: > \* \[x\] gizmos > \* \[x\] show wireframe > \* \[x\] show bounding box > \* \[x\] statistics / frame step duration > \* \[x\] statistics / count > \* \[x\] Capture with RTT > \* \[x\] \`Mesh.ignoreCameraMaxZ\` =\> use the new \`camera.ignoreCameraMaxZ\` property instead > \* \[\] make splat meshes work with the geometry renderer task > \* \[\] geometry renderer task: > \* \[\] handles \`scene.needsPreviousWorldMatrices\` correctly (should be true if any renderer generates the velocity / linear velocity texture) > \* \[\] allows custom geometry textures > \* \[\] min/max reducer (to be able to reuse the geometry depth texture) > \* \[\] IBL shadows > \* \[\] Atmosphere add-on > \* \[\] procedural textures (they work with frame graphs, but we could integrate them better) > \* \[\] mirror texture > \* \[\] RSM gi > \* \[\] fluid renderer > \* \[\] History texture: being able to ping/pong the texture multiple times in the same frame > \* \[\] NME with prepass texture block (https://playground.babylonjs.com/#WW65SN#17) > [@Joe\_Kerr](#): > > May I ask this here, otherwise Ill move: Are the PrepassRenderer and DepthRenderer redundant now? Yes, the [Geometry Renderer Task](https://doc.babylonjs.com/features/featuresDeepDive/frameGraph/frameGraphClassFramework/frameGraphTaskList/#framegraphgeometryrenderertask) is responsible for generating all kinds of geometry textures. > [@Joe\_Kerr](#): > > 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? The geometry renderer task can also render the scene itself, in addition to rendering geometry textures, with certain limitations at present (see the documentation). > [@Joe\_Kerr](#): > > re DepthRenderer in specific there is the parameter of linear vs non-linear depth. I could not find this anywhere in Frame Grapch blocks. 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 ---
**Author:** ![Joe\_Kerr](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joe_kerr/32/39017_2.png) [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)\ **Post date:** [February 8, 2026, 1:05pm UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/13 "2026-02-08T13:05:09Z")
Ohoh 😮 Is it normal that building the graph is the the 1000ms ballpark? For measuring I just do this: ```auto console.time("fg"); await frameGraph.buildAsync(); console.timeEnd("fg"); // ~4sec!!! ``` (just using the default setup from the docs [Babylon.js Playground](https://playground.babylonjs.com/#1IQQBK)) But then again: I can call buildAsync in engine.onResizeObservable where I get like ~10ms. So maybe there is some caching going on? If so and if it can be cached, can we build the first graph in a worker/build step? ---
**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\ **Post date:** [February 10, 2026, 2:46pm UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/14 "2026-02-10T14:46:53Z")
You can’t time an async method this way, because the execution of the async method is post-poned at a later time than the current JS execution context. I don’t really see a way to time this function accurately (plus, there are other async calls inside the function), but it should normally be fast. ---
**Author:** ![Joe\_Kerr](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/joe_kerr/32/39017_2.png) [@Joe\_Kerr](https://forum.babylonjs.com/u/Joe_Kerr)\ **Post date:** [February 10, 2026, 10:08pm UTC](https://forum.babylonjs.com/t/frame-graph-v1-0-is-now-live/62163/15 "2026-02-10T22:08:38Z")
Whats the point of a bloody await then (_lol, accidental pun_)?? 🤬 [Wow](https://stackoverflow.com/questions/46004290/will-async-await-block-a-thread-node-js), all the freaking time I was thinking that an await makes a function behave like a sync one… Sorry for bothering you 🤕