BablyonJS - Building GUI on canvas similar to this?

Hello, I would like to know if BabylonJS team/developers/contributor did already build any 2D canvas GUI builder tool similar to this.

https://www.google.com/search?q=UNITY+HOW+TO+DEVELOP+GUI+FOR+GAME&oq=UNITY+HOW+TO+DEVELOP+GUI+FOR+GAME&aqs=chrome..69i57.6745j0j4&sourceid=chrome&ie=UTF-8#kpvalbx=1

I know we can build it from scratch from coding.
Is there any showcase/template already done similar as upper link in unity, any playground or complete showcase code/playground?

I would like to build some gui similar to upper video link. Is there any complete showcase with code to see how to start building gui.

I don’t want gui inside 3D scene.

Thank you.
Greetings

Ah, brackeys.
When I used unity he was my best friend.

I know there is a Unity exporter tool for Babylon.js, but I’m not sure if it works with ui.
maybe @Deltakosh could help.

I’m not an expert, but when I use css for web pages instead of making a change, waiting 5 min for a commit to pass, reloading my site, see what’s wrong, make another change, etc, I use a tool like codepen.io to make a change and update it right away. In this case the playground is an easy way to do the same. make a change, run, make a change, run. It is very helpful for when I am working with gitlab.

Hopefully this helps. Sorry if it doesn’t. Good luck!

I don’t want html css for gui.
I would like to have 2D canvas (and not inside 3D scene). Just 2D canvas with menu of buttons.
Without scroll panel. Just fixed screen size or less than screensize 2D canvas with buttons.

Sorry, I didn’t mean make a gui with css and html. It was an example.

I mentioned it as you can use the babylon.js playground and use babylon.js gui. The playground is helpful for changing and updating the code and seeing the result.

Here is a gui example: https://www.babylonjs-playground.com/#PBVEM#304

Use the buttons to fly the box.

2d gui is possible with Babylon.js.

I find something like this
https://www.babylonjs-playground.com/#XCPP9Y#1

Is AdvancedDynamicTexture dependent or independent of 3D scene?
Is AdvancedDynamicTexture as 2d canvas? Is Is AdvancedDynamicTexture better to use than 2D canvas. Any explanation…

1 Like

It’s independent.
With the example that I posted the box can move everywhere but the gui stays put.

Is AdvancedDynamic Texture a 2d canvas? Yes, I believe so.
Is it better? Well, both have pros and cons. Here are pros and cons for both (Not complete and IMHO):

Advanced DynamicTexture:
Pros:
Built in
Portable
Works perfectly with js
Api for it is helpful
Effects

Cons:
Not as flexible
Can’t work outside of scene

2D Canvas:
Pros:
Can be outside of scene
Works with html
Css allows for things Bjs can’t

Cons:
Overlaying on scene might not be possible (I think it is, but I’m no expert)
A little bit harder to make

As I said, Incomplete list. Please don’t take this as 100% facts, there might be some wrong things.
Both can work for different needs.

1 Like

So if we would like to build some GUI as in upper video (unity)
We should use AdvancedDynamicTexture?

In your case(whatever that may be), yes. Except if you are good with html and css. Then in that case I would do whatever I would feel most comfortable. But by going of the video, Advanced Dynamic Texture is the way to go.

1 Like

ok,
I will try to build gui with AdvanceDynamicTexture

GUI Docs - Use the Babylon GUI - Babylon.js Documentation

Here is a neat little 3d gui of mine. Background: I’m making an fps, and about a month ago I made this: giv0.gitlab.io/fpsg

The viewmodel(the gun that doesn’t shoot) is a 3d model. to prevent it from going through walls, I use trickery. Wait for the city model to load, it’s not mine, I got it from clara.io. press f to go into freecam. use wasd and the mouse to fly and find a square building and 2 boxes(they are separated by some distance) fly in between them going away from everything. You should be able to make out something gray in the distance. on closer inspection, it’s the viewmodel. right click to “aim” which moves the model.
fpsg%20easter%20egg

It’s not an example, it’s just a fun easter egg in my old project.