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.
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
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.
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:
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.
How do i get the animated mesh?
