# Frame Graph Questions

**URL:** <https://forum.babylonjs.com/t/frame-graph-questions/59897>\
**Category:** Questions\
**Created:** [August 4, 2025, 5:36pm UTC](https://forum.babylonjs.com/t/frame-graph-questions/59897 "2025-08-04T17:36:33Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**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:** [August 4, 2025, 5:36pm UTC](https://forum.babylonjs.com/t/frame-graph-questions/59897/1 "2025-08-04T17:36:33Z")

</div>

I have been diving into the Frame Graph stuff and was starting to get to the point where I understand how to use the geometry Renderer to build all the textures that I might need for a custom rendering setup.

The question is now how do I actually bind these into an output that lets me control the final results?

I’m guessing that we need to have a post process or something then feed all the buffers to that? Its the only way I can think of where I could script the fragment output. Is there a different way to do it? I see the output block and stuff, but I’m doing this scripturally not through the node graph.

Do we have more examples anywhere? Id love to figure out how to do things like grab back face depths and stencils etc, but it would be nice to have direct examples of most general things like that.

I also noticed in the VAT demo the render list is set to [mesh] instead of scene.meshes so not all the bugs are shown in the graph. Is anyone actively working on this section of the documents?

---

<div class="post-metadata">

**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:** [August 4, 2025, 7:33pm UTC](https://forum.babylonjs.com/t/frame-graph-questions/59897/2 "2025-08-04T19:33:09Z")

</div>

cc @Evgeni_Popov (be patient, he is on vacation)

---

<div class="post-metadata">

**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:** [August 5, 2025, 12:37am UTC](https://forum.babylonjs.com/t/frame-graph-questions/59897/3 "2025-08-05T00:37:07Z")

</div>

I also cant get the depth to render smoothy:

> **[Babylon.js Playground](https://playground.babylonjs.com/#I8QA70%238)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

vs something like this:

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#RL5CX0%234)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

---

<div class="post-metadata">

**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:** [August 5, 2025, 8:35am UTC](https://forum.babylonjs.com/t/frame-graph-questions/59897/4 "2025-08-05T08:35:45Z")

</div>

You use the view depth, which is a value between [camera near, camera far]. I think you want to either use “screen space” or “normalized view” depth, to have a value between 0 and 1.

For eg (with normalized view depth):

> **[Babylon.js Playground](https://playground.babylonjs.com/#I8QA70%2326)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

> [@Pryme8](#):
>
> The question is now how do I actually bind these into an output that lets me control the final results?

I’m not sure to understand your question, but you can use the outputs of the geometry renderer task for tasks that take a texture as input, or do as you did and transform the handle to an internal texture to use the texture in code outside the graph.

Adding more doc is planned, as well as more examples. Thanks for reporting regarding the VAT demo! You can fix it if you want, but I can do it once I’m back home.

---

<div class="post-metadata">

**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:** [August 5, 2025, 3:52pm UTC](https://forum.babylonjs.com/t/frame-graph-questions/59897/5 "2025-08-05T15:52:59Z")

</div>

Its minor about the docs, but if I find more or can provide more ill whip up a simple PG and get that in!

Thanks, for the other insights. Im really excited about this system.

---

<div class="post-metadata">

**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:** [August 5, 2025, 5:31pm UTC](https://forum.babylonjs.com/t/frame-graph-questions/59897/6 "2025-08-05T17:31:02Z")

</div>

> **[Babylon.js Playground](https://playground.babylonjs.com/#I8QA70%2320)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

Your help got me a lot closer, but I’m still a goober apparently. I have a ton of artifacts which means I’m probably doing something wrong.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/4/34a11f8715df66b1a255cea08be7224800365adf.png)

Trying to recreate this in my free time:

> **[Unity Outline Shader Tutorial at Roystan](https://roystan.net/articles/outline-shader/)**
>
> Learn to write an outline edge detection shader for Unity engine, integrated with the post-processing stack. This effect is especially popular as a compliment to toon shading, or in CAD and architectural rendering.

I’m sure Ill figure it out when I have time to apply to this…. work first though you know.

---

<div class="post-metadata">

**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:** [August 5, 2025, 10:55pm UTC](https://forum.babylonjs.com/t/frame-graph-questions/59897/7 "2025-08-05T22:55:21Z")

</div>

Is there a way to just get the results of the lighting pass?

---

<div class="post-metadata">

**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:** [August 6, 2025, 8:34pm UTC](https://forum.babylonjs.com/t/frame-graph-questions/59897/8 "2025-08-06T20:34:38Z")

</div>

> [@Pryme8](#):
>
> Your help got me a lot closer, but I’m still a goober apparently. I have a ton of artifacts which means I’m probably doing something wrong.

I’m not sure I can see the artifacts, the rendering looks good to me (?)

> [@Pryme8](#):
>
> Is there a way to just get the results of the lighting pass?

No, the lighting code is integrated into the standard/PBR shader. However, you can try using Spector and update the final assignment `glFragColor = …` to display only the result of the lighting code.

---

<div class="post-metadata">

**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:** [August 6, 2025, 10:06pm UTC](https://forum.babylonjs.com/t/frame-graph-questions/59897/9 "2025-08-06T22:06:18Z")

</div>

Is that how the geometry render gathers the buffers? It uses a material and toggles things like display normals?

So to support a light pass only, if I added it to the standard/PBR material we could technically add it to the geometry render output options?

---

<div class="post-metadata">

**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:** [August 7, 2025, 1:54pm UTC](https://forum.babylonjs.com/t/frame-graph-questions/59897/10 "2025-08-07T13:54:29Z")

</div>

The geometry renderer task uses the existing material of the mesh to generate the geometry textures, but defines `PREPASS` to **true** so that special code in the shader generates these textures.

You can’t yet generate custom textures yourself, but it’s on our todo list.

See:

> <https://github.com/BabylonJS/Babylon.js/issues/16536>
>
> 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:
> \* \[\] bounding box
> \* \[\] depth peeling
> \* \[\] edges renderer
> \* \[\] outline renderer.
> \* Note that the depth renderer and the geometry buffer renderer are supported through the geometry renderer task
> \* \[\] geometry renderer task: handles \`scene.needsPreviousWorldMatrices\` correctly (should be true if any renderer generates the velocity / linear velocity texture)
> \* \[\] geometry renderer task: allows custom geometry textures
> \* \[\] missing post-processes / rendering pipelines:
> \* \[\] SSAO2
> \* \[x\] motion blur
> \* \[\] screen space curvature
> \* \[\] sharpen, stereoscopic, etc.
> \* \[\] Investigate crash when resizing multiple times the render view (try with https://playground.babylonjs.com/#9YU4C5#12). Only in WebGL
> \* \[\] viewport / camera.viewport
> \* \[x\] autoCalcDepthBounds doesn't work with the CSM task
> \* \[x\] GPU picker
> \* \[\] Rig cameras
> \* \[\] Sprites
> \* \[\] NME with prepass texture block
> \* \[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).
> \* \[\] fluid renderer
> \* \[\] RSM gi
> \* \[\] IBL shadows
> \* \[\] snapshot rendering mode
> \* \[\] procedural textures
> \* \[\] frozen meshes
> \* \[\] screenshots
> \* \[\] priority mode
> \* \[\] inspector: debug timings, etc
> \* \[\] handle context loss
> \* \[\] mirror texture
> \* \[\] \`Mesh.ignoreCameraMaxZ\`
> etc.
