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.
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.
Is AdvancedDynamicTexture dependent or independent of 3D scene?
Is AdvancedDynamicTexture as 2d canvas? Is Is AdvancedDynamicTexture better to use than 2D canvas. Any explanation…
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.
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.
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.
It’s not an example, it’s just a fun easter egg in my old project.