Can we make Gui like this with BabylonJS

Hello guys , i am wondering if it is possible to make a full GUI like this only with BabylonJs , or we need somes CSS and externel Javascript Library ?

https://axeon.fr/CLIENT/EIFFAGE/Bordeaux.Hyperion/

Thanks alots !

1 Like

Hey!
I see no problem to create that UI with Babylon GUI (I’m even wondering if this is not already the case. Pinging @Vinc3r)

2 Likes

Yeah, it IS BabylonJS.

https://axeon.fr/CLIENT/EIFFAGE/Bordeaux.Hyperion/MAQUETTE_RT/js/app.js (lines 2/3).

Beautiful stuff.

1 Like

Cmdr Wingnut, did you see the train?
image
Think you might like… it moves!
Also,impressed by the trees, and PBR.
BJS is amazing.
:bird:

2 Likes

Yes I can confirm it’s BabylonJS ahah :smiley: Eiffage - Hyperion project @ Bordeaux (France) ; by Axeon Software (This was our first PBR testing on BJS).

About our UI used here, we often need an html design because 3D realtime app is just another media among others (images, videos, etc), and so data are handled above the 3D app. We have clickable objects inside the 3D app, not using BJS GUI 3D here but pick detection (it’s only recently we’ve give a try on GUI 3D, which is fine by the way).

So about doing this UI with BJS GUI, I can’t say yes or no 'cause I haven’t played too much with it actually. But I guess basic things could surely be made using BJS GUI. Maybe things like drop-down menus are a bit harder, or even not possible? (but I can’t say :D). Also if you’re a lot comfortable with css you will probably prefer using it. You have the choice :slight_smile:

2 Likes

Possible…but tricky to make it responsive : Capture

On the other hand, if we had to deal with VR we wouldn’t have the choice.

CSS :

  • Easy to setup and maintain
  • Don’t work in VR mode.

BJS GUI :

  • Available everywhere, especially in VR mode
1 Like

Now, aFalcon is moving to France. : )

2 Likes