# Frame Graph commit make depth buffer 16bit instead of 24bit for multi render (WebGL2)

**URL:** <https://forum.babylonjs.com/t/frame-graph-commit-make-depth-buffer-16bit-instead-of-24bit-for-multi-render-webgl2/54945>\
**Category:** Bugs\
**Created:** [November 22, 2024, 6:34pm UTC](https://forum.babylonjs.com/t/frame-graph-commit-make-depth-buffer-16bit-instead-of-24bit-for-multi-render-webgl2/54945 "2024-11-22T18:34:15Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![forux](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/forux/32/36392_2.png) [@forux](https://forum.babylonjs.com/u/forux)\
**Post date:** [November 22, 2024, 6:34pm UTC](https://forum.babylonjs.com/t/frame-graph-commit-make-depth-buffer-16bit-instead-of-24bit-for-multi-render-webgl2/54945/1 "2024-11-22T18:34:15Z")

</div>

Hi!

This big commit:

> <https://github.com/BabylonJS/Babylon.js/pull/15735/files#diff-10e16fd615e23373d0470d1ad2af540d4b3846ae6ba45ee5b2e44faa0da86522>
>
> Sorry, monster PR!
> 
> \*\*Warning\*\*: Everything is experimental at this stage! Eve…rything may/will change before version 8.0 is released, so be warned that your code may break without notice if you use this new feature.
> 
> \----
> \<h3\>Reviewing the PR\</h3\>
> 
> There's still a lot to do, but I had to deliver a first version before continuing, so that the existing code could be reviewed and team members could work on extending the framework.
> 
> As the PR has over 18,000 changes, I think I should point out the most important code to review:
> \* I had to make a number of changes in the core engine to properly handle multiple rendering targets. These are the files under \`Engines/\`.
> \* The frame graph framework:
> \* everything in the \`FrameGraph/\` directory
> \* the two files under \`packages/dev/gui/src/2D/FrameGraph/\` and \`packages/gui/src/2D/advancedDynamicTexture.ts\`.
> \* The new architecture of post-process classes:
> \* The files \`PostProcesses/ThinXXXPostProcess.ts\` and \`PostProcesses/ThinXXXEffect.ts\` implement the core of post-processes / rendering effects. Note that only a few post-processes / rendering effects have been ported to the new architecture for the time being.
> \* \`EffectWrapper\` has been extended to be the base class used by the new \`ThinXXX\` classes: \`Materials/effectRenderer.ts\`.
> 
> Apart from these files, there have been many changes in the configuration files to support the new NRGE (Node Render Graph Editor). Of course, there's also the NRGE itself (\`packages/tools/nodeRenderGraphEditor/\`) if you'd like to take a look!
> 
> \----
> \<h3\>Quick instructions to get started\</h3\>
> 
> To use a frame graph to render a scene, you need... :
> \* set \`scene.frameGraph\` to the frame graph
> \* set \`scene.useFrameGraph = true\`.
> \* When a frame graph is used, it will use the new \`scene.customRenderFunction\` to render the scene.
> \* This means that a lot of code is no longer executed (\`scene.\_evaluateActiveMeshes\`, \`scene.\_renderForCamera\`, many observables are no longer notified, etc).
> \* A number of features are currently broken because of this (frozen meshes, snapshot rendering, and others). We'll be fixing this over the coming months.
> \* \*\*Important\*\*: also set \`scene.cameraToUseForPointers\` to a proper camera!
> \* There is no longer a “current active camera” when using the frame graph for rendering, which would last for the duration of \`scene.render\` and is normally used as the “camera to use for pointers” (\`scene.activeCamera\` is still used - a lot of code depends on it - but only when running \`RenderTargetTexture.render\`).
> 
> You can create a frame graph in 3 ways:
> \* using the \`FrameGraphXXX\` classes: http://localhost:1338/#2VHZFE#4
> \* by importing a node render graph from NRGE: http://localhost:1338/#T6F4ZE#59 (the node render graph: http://localhost:1344/#PSA9PS#42)
> \* create it using the \`NodeRenderGraphXXX\` classes, by manually connecting the nodes =\> probably won't be used much
> 
> Note that you can also use frame graphs without setting \`scene.frameGraph\` / \`scene.useFrameGraph\` parameters: you can simply call \`FrameGraph.execute\` yourself when you want a graph to be executed.
> 
> In \[this example\](http://localhost:1338/#C8Z7GS#47), a pass post-process is used to render the scene in a texture, which is then used by the frame graph to apply a number of effects (black and white, bloom effect, GUI).

(only for WebGL2 on google chrome, other browsers can ignore depth you asked and always provide the same one) Made frame buffer for case of multi render setup (for example, ssr pipeline enabled) depth buffer for the whole pipeline to be 16bit, you can check it on any ssr demo like this one:

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

on the playground using debugger in the line (you need a conditional debugger when **t** is true):  
`t ? this._createRenderBuffer(r, n, i, a.DEPTH_STENCIL, s, a.DEPTH_STENCIL_ATTACHMENT)`  
**s** will be 16bit instead of 32bit (before commit it was 32bit)

Because of this change in createMultipleRenderTarget from:

```auto
this._setupFramebufferDepthAttachments(!useStencilTexture && generateStencilBuffer, !generateDepthTexture && generateDepthBuffer, width, height);

```

to:

```auto
rtWrapper._depthStencilBuffer = this._setupFramebufferDepthAttachments(rtWrapper._generateStencilBuffer, rtWrapper._generateDepthBuffer, width, height, 1, **depthTextureFormat** );

```

it happens because in the extension for the engine in createMultipleRenderTarget  
the default is 16bit:  
`let depthTextureFormat = Constants.TEXTUREFORMAT_DEPTH16;`

but later in the function \_setupFramebufferDepthAttachments previously depthBuffer depth was undefined (it was changed by commit at the beginning of this post) and now it is16bit

inside \_setupFramebufferDepthAttachments next lines will select the proper buffer (none is 16bit what is expected today) in case of undefined and do nothing if depth is already there:  
`depthTextureFormat = depthTextureFormat ?? (generateStencilBuffer ? Constants.TEXTUREFORMAT_DEPTH24_STENCIL8 : Constants.TEXTUREFORMAT_DEPTH32_FLOAT);`

i suggest or rewert changes if it was mistake or change for both engines default depth buffer size to Constants.TEXTUREFORMAT\_DEPTH32\_FLOAT instead of TEXTUREFORMAT\_DEPTH16

BUT i can see in code check weather buffer has specific value then change it… so maybe change of default depth can break something else (like stencil will work incorrectly)

---

<div class="post-metadata">

**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:** [November 22, 2024, 7:24pm UTC](https://forum.babylonjs.com/t/frame-graph-commit-make-depth-buffer-16bit-instead-of-24bit-for-multi-render-webgl2/54945/2 "2024-11-22T19:24:02Z")

</div>

cc @Evgeni_Popov to have a quick look

---

<div class="post-metadata">

**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:** [November 22, 2024, 7:24pm UTC](https://forum.babylonjs.com/t/frame-graph-commit-make-depth-buffer-16bit-instead-of-24bit-for-multi-render-webgl2/54945/3 "2024-11-22T19:24:11Z")

</div>



---

<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:** [November 22, 2024, 7:45pm UTC](https://forum.babylonjs.com/t/frame-graph-commit-make-depth-buffer-16bit-instead-of-24bit-for-multi-render-webgl2/54945/4 "2024-11-22T19:45:33Z")

</div>

I’m having a look right now, but regarding the PG you linked, the depth used by the prepass renderer is 24/8. From Spector:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/2/929ceda9366aa4114a03d9fdd213af343b04f07e.png)

If I check with v7.32.0 (before the frame graph commit), I get the same thing, a 24/8 depth/stencil buffer.

---

<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:** [November 22, 2024, 8:11pm UTC](https://forum.babylonjs.com/t/frame-graph-commit-make-depth-buffer-16bit-instead-of-24bit-for-multi-render-webgl2/54945/5 "2024-11-22T20:11:39Z")

</div>

I agree that the default value is not the same than before, though, so I’m going to fix it in my current PR ([Frame graph: refactor to use InternalTexture instead of RenderTargetWrapper + misc changes by Popov72 · Pull Request #15874 · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/pull/15874)).

---

<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:** [November 29, 2024, 9:29am UTC](https://forum.babylonjs.com/t/frame-graph-commit-make-depth-buffer-16bit-instead-of-24bit-for-multi-render-webgl2/54945/6 "2024-11-29T09:29:31Z")

</div>


