Opinions wanted: HTML vs BabylonJS UI or hybrid?

I have yet to build a serious BabylonJS application but I hope that will soon change! :smiling_face::crossed_fingers: In preparation I’m exploring different patterns and tooling. One question I am wondering about is what approach do you use for UI. I come from a react/preact web app development background using redux, pub/subs, etc for state / user actions / server event data management. I have explored using BabylonJS and there’s various things I like. For example, when used in conjunction with the react-babylonJS package:

  1. the lifecycle management of the visual components seems very straight forward
  2. the syntax is familar

However as it’s a relatively new library there are various issues with it (it logs errors despite working without issue). Also BabylonJS (rightly) does not yet / will ever natively support various UI components so I’ve had to build custom UI components to get these functionalities. (Rightly because UI permutations are infinite and that seems an less fruitful avenue of work than the amazing 3D capabilities BabylonJS brings).

My current plan is use a hybrid approach: use a React / HTML overlay for most of the UI and to reserve BabylonJS UI for when it needs to sit within the 3D scene or in some way interact with it spacially, e.g. a health bar above a characters head, a speech bubble, or things like that.

So I’m wondering what people have found in their experience? What they had wished they’d known at the beginning or had to / wish they had done differently? Many thanks in advance. Links to blog posts also welcome. I have a follow up question on state / event / user interaction / client-server-multiplayer data management, so if strays into that too then please share!

1 Like

its all just web technology , use what works , use what you enjoy , use what makes sense for the task etc.

babylon is just rendering to a canvas element in the dom after all :wink:

The only time i would personally consider using the 3D engine UI , is when there is no other option available or if you actually need 3d UI elements.

1 Like