How to handle inconsistency of UI controls on multi-camera (main + minimap) setup

Questions
1

I am trying to implement multiple UI “layers“ cause my scene has multi-camera setup (a main camera and a minimap) and I would very much like to know how to do so properly because for the life of me I cannot do so.

To be more specific I have the need to apply a UI for my minimap viewport that could have completely different controls, from the one in my main viewport and vice versa.

Adding multiple Fullscreen UI’s does seem to ~kinda work, for example layerMask works as intended , the controls are indeed added in each “layer“, but there seems to be an inconsistency with positioning using moveToVector3, with what is rendered per viewport based on which camera was pushed last to the scene. moveToVector3 is painfull itself to understand too it seems to only work inside scene.onReadyObservable.addOnce. I guess it’s because the engine has to know every position and sizing is done to place things correctly. Also I don’t know if i am supposed to add multiple Fullscreen UI’s to 1 scene, I have the belief I saw somewhere that 1 is allowed per scene but I can’t find it anymore so I gave a try anyway.

As a note: If possible i would like to avoid the use of CreateForMesh as it gives me another set of problems specific to my project that stretch out of the scope of this question so am not gonna go in detail, one of them being that it does not retain the scale of the controls like the FullScreen one. Controls get bigger or smaller as you get closer to them and they are correct to do that , it’s that this is not the behaviour am looking for.

I made a playground to demonstrate better what I aim for . The minimap is supposed to show just tags for the boxes shown while in the main view i would like to place pins with a title and potentialy an icon too on the box.

Also the reason I didn’t go with linkWithMesh for the controls is because I want to place them on the mesh and then follow along with the camera for some time before making the dissapear.

I am open to alternatives as solutions and if anything about my question is unclear i will try to add more details. I believe this will also help a lot of people , I refuse to believe I am the only person that wants to apply a fullscreen ui to both the main view and another viewport! :stuck_out_tongue:

2

cc @amoebachant and @georgie

3

I solved this issue by using multiple scenes. Each has its own camera, of course. :slightly_smiling_face: I create empty TransformNodes in the UI scene at the same positions as the meshes in the main scene. Then I attach my controls to these empties using control.linkWithMesh(). I also synchronize the UI camera with the main camera.

This approach also lets you use different rendering pipelines for the main scene and the UI scene.

4

I see, I will give it a try and come back to update on how it went

1 Like