Options for 2D UI in Babylon.JS Editor?

Questions
1

I’d like to create some 2D UI for my Babylon.JS Editor project. I’m hoping to meet the following requirements:

  1. UI should be visible in the BJS Editor viewport even when not in “play” mode.
  2. Use HTML/CSS to define and style the UI.

I’m having trouble figuring out how to accomplish this. Below are approaches I’ve tried. If anyone has other recommendations, I’d love to hear them.

Approach A:
Add the UI HTML and CSS to the workspace’s “index.html” file.

This works great when the project is run using the “Run” button (which previews the scene in a popup window) or when the project is loaded in an external browser. However, it does not display any UI when running the scene directly in the viewport.

Approach B:
Use a script to dynamically create the HTML elements at runtime.

Like the above approach, this one works fine when using the “Run” button (popup preview) or an external browser. It does have an effect when pressing “Play” to preview in the viewport. However, the behavior is not what I would expect and not very helpful. It seems that when a scene script accesses “document.body”, it resolves to the body element of the whole editor and not the body element of the sandboxed document displayed in the viewport iframe. This prevents the UI from being positioned relative to the viewport and instead is muddled in with other editor elements.

For example, when I use the script below to add a div with a red border (as a stand-in for my UI), I get the wacky result you see in the subsequent image…

public onInitialize(): void {
    // Curiously, the "document.body" below resolves to the body of the
    // whole BJS Editor, not the body element of the viewport sandbox
    // document!
    console.log(document.body);

    const gui = document.createElement('div');
    gui.style.position = 'absolute';
    gui.style.top = '0';
    gui.style.left = '0';
    gui.style.width = '300px';
    gui.style.height = '200px';
    gui.style.border = '3px solid red';
    document.body.append(gui);
}

UI wackiness
UI wackiness3486×2146 350 KB

2

@julien-moreau for visibility.

1 Like
3

Pinging @julien-moreau

4

Hi @Kris !

I’m sorry I missed this post!
This bug appears because by default the project is played inline in th editor so it’s not isolated. Once stopped, only the Babylon.JS part is cleared.

I’m adding a way to allow that but for instance you can open the preferences from the main toolbar
image

and then in the “Workspace” tab select the option “Use isolated iFrame hen playing project”

image
image1753×916 52.5 KB

This will allow you to play the project in an iFrame instead of inline in the Editor

4 Likes
5

That’s very helpful, @julien-moreau. But I guess my more fundamental question is what is the recommended approach (or approaches) to adding 2D UI to Babylon.JS Editor projects?

6

Hey @Kris,

Depends on what you’de like to achieve.
I think using the BabylonJS official GUI package is a good choice, especially using the GUI editor. I’m working on adding GUI support in the editor right now using the GUI editor (The GUI Editor | Babylon.js Documentation) as I did for the NME. Today, you can already use the gui package in your projects made with the editor by hand and add support of loading snippets The Babylon GUI | Babylon.js Documentation

As an example, today I’m working in a company that uses BabylonJS. We have made the rendering part with interactions using the Editor and all the UI is React-based above the canvas so it’s easier for non 3D developers to integrate UI.

2 Likes