Not able to access gizmos when 2 cameras are activated


I am not sure if this is a bug or not, but I am not able to access the gizmos from the inspector window in order to move/rotate the meshes/transform nodes created in the scene. The current playground contains 2 cameras. The gizmos are accessible only if I dispose off the second camera (guicamera). Can anyone try to test it in this playground? I assume it has to do with layer mask of the two cameras.

Let me hijack this post as I’ve encountered another issue and this is originally my playground I know more about.

1st issue:
As long as the 2nd camera for the advancedTexture of the GUI in the top left is present (as in not disposed), you can’t see nor use the gizmos activated from the inspector. Once disposed everything is working as expected, except if you want to turn the currently active gizmo off again, then you get a TypeError. If you want to rerun the scene you’ll then have to refresh the page, otherwise you’ll get another TypeError regarding the scene. (The refresh probably resets the clicked gizmos so that’s why it fixes).

2nd issue:
When I tried adding 3D Buttons to my scene they weren’t visible at all untill the 2nd camera was disposed. Now I’m using Button Meshes (which work better for my use case anyway). These are visible but can’t be interacted with as long as the 2nd camera exists. I had a similar picking issue with my pickable cubes, but that was fixed by setting the correct camera for pointers scene.cameraToUseForPointers = camera;. Sadly this doesn’t seem to affect the 3D Buttons.

The 2nd camera is only used because of the default render pipeline otherwise affecting the 2D GUI (as stated in the docs). If there is another way to disregard the pipelines effects for the gui I’ll gladly use that, instead of the hassle of a 2nd camera.
Take a look:

1 Like

Pinging @Deltakosh and @Evgeni_Popov, if could you please look at the issues we both are facing?

Adding @Cedric as he is a lot more knowledgeable about gizmos.


Let me take a look!

1 Like

I’ve fixed a crash when toggling gizmos from the inspector:

Then, the utility layer uses the last camera in scene.activeCameras. Babylon.js/utilityLayerRenderer.ts at e3be9f385d49a1c2cede9749fba096c9592e204b · BabylonJS/Babylon.js · GitHub So, in the PG, activeCamera items must be rearranged
I tried with swapped cameras : scene.activeCameras = [guiCamera, camera]; and it seems to work fine.


when I put the guiCamera first the 2D GUI isn’t visible anymore:

By the way, what should I do about the 2nd camera blocking the picking of my 3D GUI Mesh Buttons? That’s the only issue left, as I’m not using the default render pipeline anymore, but a post process to change contrast. Apparently with a post process the set camera in the constructor works unlike for the default render pipeline.

This is getting complicated. activeCameras is used for rendering the scene. Any change will break it. especially with Postprocess which brings its batch of issues.
So, activeCamera needs to stay the same.
That brings to the other issue, the gizmomanager from the inspector that gets attached to the last camera in activeCameras array.
The only solution I see is to get the utility layer renderer and set to use camera1 instead of camera2. Is it possible to do so with the debug layer ? @Evgeni_Popov @sebavan

For now I just scapped the 2nd camera altogether, the only issue that leaves is the impact of post processes on the 2D GUI. Since I’m only upping the contrast I can just darken my used colors for the buttons and it looks okay.
Maybe in the future I will use html+css buttons and scrap the babylon 2D GUI altogether.

1 Like