Curved GUI in XR mode which can be positioned by the user

Developing for VR one may need to display information and handle user setting with a GUI system. A good example how this can be done is the GUI that the VR googles themselves provide.
There often one or multiple curved (or not curved) screens are used which can be positioned laterally and the distance controlled by the user. An alternative that is often seen, is a GUI which is glued to the left hand and appears only when you look at it.
It would be great to have something like this available in Babylon.
Did anyone already program some of these features? A framework for this would also be good for displaying help and acknowledgement information.
One problem is also how to handle the screen-fonts on such a GUI in such a way the the text is readable and not suffering from aliasing artefacts.
I think the 2D GUI on a screen is the right way to go here, but I fear that constructing a framework to allow nice user manipulation of such a (curved?) GUI is quite some work.
If something is already available, this may really be helpful to know.

Have you looked at the 3D GUI yet? Babylon 3D GUI | Babylon.js Documentation (babylonjs.com)

1 Like

Thanks. Yes, I am aware of the 3D GUI and I am using also 3D GUI elements on my scene, but it did not seem suitable to obtain the described experience. Am I missing something and this would be the way to go?

I guess I’m flipping the question around, but why do you think the 3D GUI doesn’t seem suitable? :sweat_smile: Because it sounds like you want the user to be able to “interact” with the GUI inside the virtual world, which is exactly what the 3D GUI was made for. :thinking: I don’t think it has a “auto follow hand” feature yet, but adding such a thing seems pretty doable.

But maybe I’m not seeing the full picture here, I’m not a frequent VR user :sweat_smile: Do you have any visual examples of what you want to achieve?

1 Like

I guess you are right. I could at least try the holographic slate and just put 2d buttons etc on its dynamicTexture. Indeed, even a hand-follow behaviour seems to exist already.

Looking at the NearMenu this seems to be good. However, I am a bit lost in how to do stuff with it.
Ideally, I would just get access to its dynamic texture and then reuse my old gui code. If this is not possible, can I use the guieditor to design a suitable gui that uses it?
E.g. I want to add a large (maybe scrollable) text area to display help information. How can I do this?
Can I use tabs in such a GUI?
Can I attach 2D guis to the surface?
Can I have an area that is attached to a camera or to a texture?
I studied the documentation

but did not understand how to really add 2D GUI content to such a NearMenu. I tried “near.content = new BABYLON.GUI.TextBlock()” but this does not seem to work.
As I see there really is only “addButton” and “addControl” available. How about all the other GUI elements?
here you can see some of my fruitless attempts:

Hello! I tried adding a custom texture to the near menu too, what I found is that the NearMenu is a subclass of the TouchHolographicMenu, which only seems to be able to act as a container for TouchHolographicButtons. You can add custom content to the TouchHolographicButtons: Near Menu with custom content | Babylon.js Playground (babylonjs.com), but I’m not sure how would this play out with existing 2D controls in terms of interaction.

The HolographicSlate seems to integrate more easily with the 2D content: Near Menu with custom content | Babylon.js Playground (babylonjs.com), but in this case of adding an InputText, it only allows to click on the text, not replace it. I imagine the Slate was developed mostly to show content, not allow interaction with it, but maybe @RaananW has some more information I’m missing?

1 Like

Thats great! Thanks! I did not expect InputText to work on the panel. In VR this is anyway difficult as there is often no virtual-keyboard support.
Looking at both, the holographic slate and the NearMenu workspaces, can you add multi-line text to the panels?
Also, if you click the icon with the box at the top (holographic slate) or the pin (NearMenu), the slate always seems to drift towards the user, but it does not stop. Is it possible to have it at a predefined distance?
By the way, can the pin icon be made smaller? It always looks rather large compared to the actual panel.

For the Slate, it’s working with multiline text, and you can make the title bar size smaller too. The 3D content elements use the Behaviors, specifically the FollowBehavior for the camera, so you can tweak that too: Near Menu with custom content | Babylon.js Playground (babylonjs.com)
Mesh Behaviors | Babylon.js Documentation (babylonjs.com)

1 Like

This is great! The holographic slate is getting very close to what I was thinking about. I will try to add my 2D Menu to such an item.

2 Likes