[SOLVED] Regarding geometry buffer renderer and gBuffer outputs

My Problem:
I am trying to display the gBuffer normals texture (scene.enableGeometryBufferRenderer().getGBuffer().textures[1]) on a fullscreen quad but I am having trouble setting it up.

My setup:
RTT gBuffer | Babylon.js Playground (babylonjs.com)

What I am getting right now?
This is what I get currently. I have a simple scene of a yellow box. I use a billboarded plane to display the normals texture on it. You can see the normals are rendered on the billboard plane but the box also shows over the output.

As you can see the box mesh is also showing over the quad rendering of the normals from the gBuffer. I want to disable rendering of the box mesh but I am unable to do so. I tried to make the box invisible after the plane diffuse texture is assigned but that does not render anything then.

Also when you rotate the world too far, the shading on plane is also displayed and a yellow rectangle is seen (which I suspect is due to the plane) which is what I dont want as shown below.

Bottom Line
How can i do a fullscreen quad rendering such that only the normals texture from the gBuffer is displayed?
How do i hide the yellow box from rendering over the output?
Late i would want to toggle the current gBuffer texture using keyboard so any pointers on that would be nice :slight_smile:

Note that the billboard is also rendered into the gbuffer and I’m not sure it’s what you want, so you should set explicitely the list of meshes that must be rendered into the gbuffer.

Regarding the box being displayed in the final scene, you can create a specific camera that will be used to render into the gbuffer and flag the box (using layerMask) to be rendered only by this camera and not by the camera scene:

Note that to better see what’s going on I have disabled lighting on the billboard and I have set the normal texture to the emissive part of the material.

2 Likes

Wow thank you so much @Evgeni_Popov.

How do i do that? which function is to be called?

One last thing though. How do i fix the plane to not move on user input. I want to keep the plane as fullscreen quad but allow the camera transforms to only effect the cube?

I have done it in the PG, you need to set the renderList property of the geometry renderer:

geor.renderList = [box];

The easiest way is probably to create a layer and set its texture to the gbuffer normal texture. That way, you don’t even need a plane:

If you really want to use a plane, see how it is done in this PG (functions makeShadowMapPlane to create the plane and showDepthMap to always have the plane facing the camera):

Change the value 256 line 168 to change the plane size

Another PG where a mesh stays at a fixed position/rotation wrt the camera:

2 Likes

Thanks for a detailed response @Evgeni_Popov. The issue is solved now. Here is the final solution. You can press 1 2 3 keys to view the position, normal and depth texture from the gBuffer.
RTT gBuffer | Babylon.js Playground (babylonjs.com)

Although my problem is solved already i tried to load an animated gltf (Yeti) to see its position normal and depth textures from the gBuffer. This is how I do it.

BABYLON.SceneLoader.ImportMesh("", Assets.meshes.Yeti.rootUrl, Assets.meshes.Yeti.filename, scene, function(newMeshes)
{
   newMeshes[0].scaling = new BABYLON.Vector3(0.1, 0.1, 0.1);
  
   newMeshes.forEach((mesh) => {
   mesh.layerMask = 0x10000000; //for only making this mesh viewable from camera
   geor.renderList.push( mesh );  //add to the gBuffer render list
   console.log("Added: " + mesh.name);
} 
);	
});

This works fine and I get the Yeti model as shown below but the mesh is static.
image
How do i get the animated mesh?

PR: RTT gBuffer Yeti model | Babylon.js Playground (babylonjs.com)

The skeletons are not updated becase the mesh is not rendered by the main camera. You must update them manually:

To avoid this problem (and maybe others), I would advise to use the second method to have a fixed plane on screen (Camera, maintain the meshes at the same position relative to screen during screen resize - #7 by Evgeni_Popov).

2 Likes

Wow thanks @Evgeni_Popov wonderful :slight_smile:

I made edits to my original submission based on your recommendation to use fixed plane. Here is the updated PG: RTT gBuffer 2 | Babylon.js Playground (babylonjs.com) And here is the Yeti model PG without using layers.
RTT gBuffer Yeti model | Babylon.js Playground (babylonjs.com)

Is my code correct as per you suggestion?

That seems good to me :slight_smile: