Is the Babylon JS 3D UI actually usable?

I’ve been exploring using the Babylon JS 3D UI for webXR UI. It seems to be pretty much unusable as it’s missing a whole bunch of features(e.g. can’t add text to a panel only a button, can’t change the appearance of buttons, can’t add 2D UI to a 3D container, etc.). Is this just user error on my part or is the 3D UI basically just a stub that’s not really been implemented yet?

Is it being actively developed and used as UI by anyone ?

Hi there, and welcome to the forum!

While the 3D GUI controls library is not under active development in the team, we’re always open to contributions :slight_smile:

What kind of effect are you trying to go for? Are you able to use our 2D GUI support for 3D meshes for it, like so: https://playground.babylonjs.com/#2WFV9G#1 ?

1 Like

cc @docEdub

You can make the buttons anyways you want with a custom element. I’d look at the holographic 3d button as an example and read the 3d GUI docs.

I’ve used it on the past on several projects with success so yes it’s a feature complete system.

Ah I see, thanks. Is that recommended way of doing 3D UI? Could I use that to embed the 2D UI into something like HolographicBackplane (when I just swap out the plane for HolographicBackplate in your example, the 2D UI does not appear)

How did you do stuff that wasn’t a button? E.g. labels, checkboxes, etc.? Or did you just make everything a button?

There are all kinds of components: label, checkbox, panel. In the docs you should find all the UI components.

Edit:

This page has the full list: Babylon.js docs

Those are 2D components, not 3D components. Is the recommended approach to add them to the 3D component via AdvancedTexture? I have been experimenting with that, but it doesn’t seem to work. At least not with the Holographic… 3D components I was hoping to use.

If I recall we either used and ADT on a plane or built meshes. You could build physical meshes to use though and deploy your own “buttons” that just swap out mesh states on interactions take a look at the section on how to make your own elements, I think most of that would just be handled in its build function.

Oh, I see what you mean now. I used the Holographic Button a couple years ago and you are right, there aren’t many holographic components (maybe only button and panel?)

As @Pryme8 mentioned, you might need to implement your 3d components.

@griffin @Deltakosh sure is usable and its awesome! We use it for the fender guitar customizer for spatially coherent UI elements that track with the 3D assets. Works really great and super easy/flexible setup. We dont currently have an XR setup but we’ve got some cool plans for that in the future!

https://www.fender.com/products/mod-shop-stratocaster

4 Likes

That’s an advanced texture?

Would that still be managed by GUI3DManager or just have custom logic written yourself?

Though even if you don’t stick to Holographic components there doesn’t seem to be enough types of 3D components (and functionality in the ones that exist) to implement very much. Like how would implement drop downs, labels, etc. in 3D components?

Thanks for posting that example (cool page!) Though are those 3D UI elements? Or 2D elements transformed to track the 3D object in space?

Manually? I’m sure gpt could write you some generic methods.