Multiple cameras, layerMasks and post-process issue (only one camera gets rendered)

Questions
1

Hi,

I’m trying to get a fade-in - fade-out effect between multiple scenes (I reused this example https://www.babylonjs-playground.com/#2FGYE8#2 for the fade-in / fade-out)
For the scenes using a single camera, there is no problem.
When I use 2 cameras with layer masks (I use a second camera to put labels on mesh on mouse over, and I want them to be rendered on top of everything to be sure the label can be read), only the second camera gets rendered.

I use a different instance of the post-process for each camera.
Here is a PG that reproduce the issue : https://www.babylonjs-playground.com/#2FGYE8#3

Is it a limitation, am I doing something wrong, or is it a bug ?

Thanks for your help !

2

I don’t know if what you want to do is possible, I will let @sebavan or @Deltakosh answer, but a workaround would be to not use two cameras with layermask but a single one and use the renderingGroupId property of the meshes to layer the meshes.

1 Like
3

Hi @Oswald
Can’t you use .renderingGroupId for the labels?
Or fullscreen GUI rendered in the foreground?

…Beaten by a minute haha, @Evgeni_Popov :smiley:

1 Like
4

I’ll try that, thanks !
I didn’t know about that feature, I just started using Babylon (great stuff !) as I happened on some free time (some virus thing…).

Thanks !

5

By the way, I can’t use the fullscreen GUI, as I’m already using it for another purpose (I could try and manage it so it could serve to more than just its current goal, but I don’t like the idea of such a code structure for my app).

6

One last remark : I use a highlightLayer, and it seems that it’s renderingGroupId default value is -1.
When I started specifying renderingGroupId to some meshes, the highlights effects started to be rendered on top of everything.
I tried setting the highlightLayer renderingGroupId to 0, and it solved the issue.
I don’t know if that’s a bug…

7

In regards to fullscreen GUI,
you can add “layers” to the AdvancedDynamicTexture with containers.
then treat each container the same you would a AdvancedDynamicTexture.

let GUI = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("advancedTexture", true, scene);

let GUI_A = new BABYLON.GUI.Container("GUI_A_CONTAINER");
let GUI_B = new BABYLON.GUI.Container("GUI_B_CONTAINER");

GUI.addControl(GUI_A); // Rendered infront of scene, but behind GUI_B.
GUI.addControl(GUI_B); // Rendered infront of scene and GUI_A.

https://playground.babylonjs.com/#SX4JD6

8

Thanks for the tip.
In my case, I still think it doesn’t work, as I attach text on billboard mesh, that I attach to an objet (or does it ? How would I manage the position of the billboard mesh to visually stick on the object ?).

I do this :

labelMesh = BABYLON.MeshBuilder.CreatePlane(name, {width: size, height: size}, scene);
labelMesh.billboardMode = BABYLON.Mesh.BILLBOARDMODE_ALL;
// Adding controls here ...
BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(labelMesh).addControl(<my_controls>);

Then I can attach the billboard mesh to the mesh I want to label.

9

In this case you can use control.linkWithMesh,
but this requires the control to be at “top” level (child directly of advancedTexture),
so in this case you would have something like…

-advTexture
–children[label, label, label, gui_b] ( rather than [gui_a, gui_b] )

should work ok, just have to +1 the zIndex of gui_b when you add a new label, to make sure label won’t overlap.

Edit.. quick example, https://playground.babylonjs.com/#SX4JD6#1 (without zIndex sorting)

Edit.. And with sorting
https://playground.babylonjs.com/#SX4JD6#2

1 Like
10

Thanks again, I’ll keep that in mind.
Also, I just realized, I’m actually not using a fullscreen AdvancedTexture on my second scenes, as the AdvancedTextures are displayed on billboard meshes, themselves part of my scene.

11

Hi @Oswald
Sorry for the delayed answer.
Control.linkWithMesh(mesh) (line 27) will cause the control to follow the mesh around.
You can then use, (optionally add it to the CreateLabel options object for different value per mesh);
Control.linkOffsetX (Horizontal offset, line 30)
Control.linkOffsetY (Vertical offset, line 31)
to determine were the label is placed compared to the mesh.(above, under, left, right, etc)

Another big difference is drawcalls,
Using a single CreateFullscreenUI generates just 1 drawcall, nomatter how many labels you add, they’re handled in the same call.
Using CreateForMesh generates 1 drawcall per billboard mesh / label.

https://playground.babylonjs.com/#SX4JD6#3

12

Don’t worry for the delays, I went through that issue for now.

I think I’ll have to move to your solution as some point though (I indeed have some performances issues, but mostly with my billboard meshes, the size of the text is fix relatively to the scene, and so the perceived size depends on how far the camera is…).
I just need to build all the tools to handle that in an elegant way (because I plan to add, remove and edit those billboards on the fly depending on the content of my scenes, and where the user points its mouse…).
Not a challenge anymore at this point, just work to be done :wink:

Thanks again !

1 Like
13

I’m implementing your solution, but for some reasons the text (or a frame around it) is never visible.
I digged a bit, and I found out it has a top property of -5000px and some (which is obviously off screen).
I assume the top value is evaluated from the mesh center projection on canvas and given offsets in X and Y (because I tried to set manually the value, but it got overwritten immediately after my change).

(I’m editing my message as I progress with my debugging, so it’s a bit messy)

I just relalized that I was using one single fullscreen UI for my whole engine (and using it for all my scenes), while the limitation is one fullscreen UI per scene.

Anyway, for anyone going through the same learning process, here is the solution : don’t link a control to a mesh from another scene…