Is it possible to use html tags in the GUI

Hi,
I’d like to add a <li></li> and some other html to my Babylonjs project.
I’m reading the Babylon GUI documentation - and it’s got an API for adding specific elements like checkboxes and buttons. But is there anyway to incorporate html directly into a babylonjs project?

*edit:
I think I just need to add the regular html elements outside the babylonjs canvas element.

Yep that is the best option here. GUI is meant to be used when you want hi perf or when you want VR

2 Likes

Hiya Roibeard… welcome to the BabylonJS forum.

Yeah, the HTML “DOM” is still nearby to the webGL canvas. Here’s a playground demo with a HTML button panel that uses CSS position: absolute, which activates CSS .top and .left, allowing full non-flowed positioning. https://playground.babylonjs.com/#743FF8#2

Others use normal webpage flow, often putting HTML elements in a sidebar, beside the canvas. (NOT creating the HTML dynamically like the above playground does.)

Keep in mind that formatting quite-similar to <li> IS available in BabylonJS 2D GUI system. Take a look at this… https://www.babylonjs-playground.com/#11NJQT#23

Sure, it is currently “dressed-up” to look like a stack of buttons, but it could EASILY look like an ordered list, too. (remove borders, use imageWithText buttons for “bulleted text”)… can do. There are advantages to using BJS GUI instead of HTML. shrug.

I hope I have been helpful. :slight_smile: I see Deltakosh won the reply-race today. :slight_smile: (hug)

2 Likes

Does babylon.gui perform better than HTML elements?

Well it depends :slight_smile:
The GUI is integrated into webgl and harware accelerated. It also works in VR/AR and this is the main reason why we needed it

By the way, in case one should need text over multiple lines, “\n” works fine to mimic <br> behavior.