Is DIV-overlay a good way for persistent showing the HUD game elements?

I’m looking for the best way to showing HUD elements for the game (lives, bullets, level, xp, etc).
As for BJS GUI - I don’t use it. It has over 500kb size I think that’s too much for simple UIs. For UI elements I use DIV-element on top of my BJS canvas. For menus that’s perfect but what about HUD elements? I’m pretty nervous about compositing overload when using full screen sized DIV-element over my rendering canvas.
What do you think? Is it a bad practise to show div-overlay over the canvas during the whole game play time in tearms of browser performance not just for short-time menus?

I don’t have hard numbers but I feel like it wouldn’t affect performance that much :thinking: @sebavan @RaananW might have more concrete experience to share (Seb is OOF right now so he may take a while to respond)

A div-less and BJS GUI-less alternative could also be Utility Layers ( Rendering Utility Layers | Babylon.js Documentation ( or Layer Masks ( Layer Masks and Multi-Cam Textures | Babylon.js Documentation (, but these involve more manual work.

1 Like

I’m doing something like this in my game:

  • Game/canvas is underlying the whole website
  • Have a regular site menu/view structure on it
  • When the game starts, mostly hide those and bring in the game ui that is made with html/css (using Vue.js)
    • Here I just use css absolute positioning to put things like the inventory button or chat box to a correct place.

It kind of also depends on what you are building, but I think it works nicely. You can scale the UI with css breakpoints quite easily for mobile/tablet views or big screens. The performance should not be a problem if your game generally doesn’t lag and you are not updating all of the ui constantly. Therefore I recommend using Vue/React/Other web framework, since they have nice/performant change detection methods.


I suppose it’s a matter of approach. Both option are viable. As for a HUD element (that is mostly a part of gameplay), I’d (personally) rather choose the option of the more integrated GUI (the BJS GUI).
You can limit the load in a number of ways and aside from the weight, the constant call to the css/external to resize the div also has an impact on the overall performance/UX. As I say, a matter of choice. I believe each dev will have its own recipe here.

Adding a bit to the wonderful answers you have received so far -

The only downside for using a div element is the fact that your browser should support the div overlay for XR scenarios. If it does, there is no reason not to use it :slight_smile:

And also you can read official doc with pros and cons about different approaches GUI | Babylon.js Documentation

1 Like