Babylon JS Day 7

I spent my education time today reading the documentation for the GUI system in Babylon JS. This came with a ton of playgrounds to look at, some that included interesting examples of the core features. Highlights include:

• There are two main GUI modes.
  • Full Screen (screen-space) can be used to create HUDS, overlays, menus
  • Texture Mode can render the contents of a GUI on a texture attached to the face of a mesh. This second option is useful for some of the VR interfaces that I want to build.
• The core component for GUI is the AdvancedDynamicTexture. This organizes and renders controls that are attached to it.
• This GUI system comes with a ton of pre-built controls. Some examples are text views, text inputs, password fields, buttons, checkboxes, radio button sets, and sliders. I played around with a few of these and many of them have a decent amount of customization built in.
• Contains are a way to organize controls in a GUI. Babylon JS has several containers. The one that stands out to me is the StackPanel. If I these can be embedded in other StackPanels then this opens a huge array of layout possibilities.
• Position, size, padding, etc. all support pixels and percentages. Some containers require the use of pixels.

Overall, it seems like Babylon JS has a lot to offer as far as GUI is concerned. I haven’t even had time to investigate the more interesting 3D GUI. At some point I want to build a GUI for the Breathe demo that I made last week. I’d like to allow guests to set their own timing values and perhaps even include a handful of presets.