How To Make GUI For Your Babylon.js Apps - 2 Methods Tutorial

In this tutorial, I'm going to show you how to create graphic user interfaces to input different kinds of data into your Babylon.js.
We're going to do that using code and also using the Babylon.js drag and drop tool.
---
Timestamps
00:00 Installing the GUI module
00:46 Controls
07:33 Helpers
10:34 Cloning controls
11:31 Positioning
12:15 Containers & Stackpanel
15:33 Debugging with the inspector
16:13 Link controls to meshes
16:53 Making controls take the shape of meshes
18:27 Using the GUI editor
---
Babylon.js GUI editor
gui.babylonjs.com/
---
Project files
github.com/WaelYasmina/babylo...

[@jesusfreak_x3l]

Thanks. This should be my logical next step from Verge3d

[@artoke84]

wonderful!

[@blaqued5186]

Another incredible video. Thanks again Wael👌

[@WaelYasmina]

You're welcome

[@peterschmitt2735]

This is a very good tutorial.

[@jordanwillianmarquespereir9316]

Excellent!!!

[@georgegreen1356]

Do you know is there a way to toggle the whole advancedTexture object? I want to hide/show the whole advancedTexture object with a separate menu button. Can't figure out how to do this. Setting advancedTexture's isVisible to false or alpha to 0 doesn't seem to work. The dispose() works, but i just want to hide it - not destroy :D

[@user-tk1re2hd2y]

Thanks 🙏

[@AxiomTutor]

I would like to build a webpage in a builder (namely, Quarto) and then include inside of it a Babylon.js application. I know this can be done using the CDN, but is it possible to instead build the application in a build system and then somehow export it so that it can be ported over to another project? If that is possible, I would imagine it would also be useful for Babylon.js Native, right? I don't know where the Babylon.js Native project is right now, it sounds like they were talking about it a lot three years ago and there hasn't been anything since then. But anyway, I would think it also involves taking an app that you have developed in a build system, and somehow exporting it for use in other places? If you are ever looking for a video idea, I would love to see how to export a Babylon.js app! :) Thanks for these videos.

[@user-ik8pm8is9x]

Hi, what is the environment texture you're using because I can't see it in the video and there are no project files?

[@WaelYasmina]

Hello Here it is: playground.babylonjs.com/textures/environment.dds I'll put the project on Github later

[@user-ik8pm8is9x]

@@WaelYasmina Thanks for the reply. I'm getting this error message when I use it though: cubeTexture.ts:148 Uncaught TypeError: Cannot read properties of undefined (reading 'useDelayedTextureLoading') at _CubeTexture.CreateFromPrefilteredData (cubeTexture.ts:148:32) at createScene (main.js?t=1690867406947:38:48)

[@WaelYasmina]

Here's the repo: github.com/WaelYasmina/babylongui/

[@nazwasakila6962]

Wael hi. I noticed your switch from threejs to babylon. Can you make a video comparison, where to use one where other. Or explain in commnet. Thanks 😊

[@WaelYasmina]

Hi Naz. Yes I plan to make a video as a lot of people are asking these same questions. But I just need to collect more info to make a convincing and fair comparison video. In the meantime, you can find some articles covering the similarities and differences on Google.

[@nazwasakila6962]

@@WaelYasmina sure i know google 😁😁, and have some idea of the both, tried them, but interested generally in your use cases and projects

[@NARDINMONSTER]

Please make video on havok physics in Babylon Js ❤❤❤

[@WaelYasmina]

It's on my TO-DO list

[@NARDINMONSTER]

@@WaelYasmina will you cover physics in Babylon Js

[@studentshubham]

bro i want to use your videos to teach people for free would you allow me to use your video on my website , by the way bro love from India

[@WaelYasmina]

Sure! I would love to see that. Mind sharing the url? 😀