Basic Getting Started Questions

Hello everyone!

I am new to programming and also babylon.js. I’m interested in creating games that will run in web browsers, and babylon.js seems perfect for this. Here are a few questions that I have so far:

  1. Will the babylon.js “engine” script always be stored remotely? Can you (or should you) ever download babylon.js files and store them locally or on a different website?

From example html file:

  1. Does babylon.js have a default library of assets (meshes, textures, etc.). It seems so from looking at the examples, but I’m not sure how to properly access and use them.

From example:
//Creation of a material with an image texture
var materialSphere3 = new BABYLON.StandardMaterial(“texture3”, scene);
materialSphere3.diffuseTexture = new BABYLON.Texture(“textures/misc.jpg”, scene);

Thanks in advance!

-Dustan

Welcome !!!

Adding @PirateJC who can definitely help you get going :slight_smile:

Great, thank you!

Hey @Anderson34! Awesome to have you as a part of the Babylon family!!!

You’re in for a wild ride, and you’ve definitely come to the right place to ask questions!

There’s a WHOLE world to unpack here, but let me give you the most simple answer I can to start with.

I’d say 90% of the time, your own personal website will host your babylon scenes, and people will access those scenes through their web browser from your server. So in that regard, there is no need to pass the babylon files around. Basically the browser + Babylon do all the work, and whoever is accessing your creation doesn’t download anything.

The exception to this would be if you start to go down the route of creating Progressive Web Apps. Think of these as self contained apps that run a local version of a web browser to access local copies of your Babylon creations. Progressive Web Apps (PWA’s) don’t have to be connected to the internet, so in this regard you can create standalone experiences. They still run through a “browser” but they can be totally local as well. Going down this route is a bit more advanced, but there’s tons of reference material and forum threads we can point you to later if you want to go down this route.

Yessir! Indeed we do. Here’s a few doc pages explaining what assets Babylon has to offer.
https://doc.babylonjs.com/resources/playground_textures

https://doc.babylonjs.com/resources/meshes_to_load

https://doc.babylonjs.com/how_to/how_to_create_a_material_for_materialslibrary

https://doc.babylonjs.com/how_to/how_to_create_a_proceduraltexture_for_procedutaltextureslibrary

Also here’s a fantastic doc on how to use your own internal assets as well.

https://doc.babylonjs.com/resources/external_pg_assets

And finally, as you dive into Babylon, this is an INCREDIBLE starting place to begin to wrap your head around everything.
https://doc.babylonjs.com/babylon101/

Again, welcome to the family! It’s awesome to have you here!

Hope this helps!
-PirateJC

1 Like

Thanks for the awesome reply and the information @PirateJC! I couldn’t be more impressed with babylon, the support materials, and the community support so far :+1:. I think I will be able to learn most of what I need to know just from the extensive library of examples and documentation.

So, if I understand correctly, I will want to download and store babylon files directly on my personal website? Does this include the main source code, or just my html file and custom assets?

I’ve started to experiment with code copied from the examples, but there seems to be an issue with downloaded example code not being able to access models and textures (picture attached). The example code is looking for assets stored remotely, but can’t find them. This is all related to my confusion about having everything in one place (on my PC/website), or letting the html code access things stored remotely (from the example:
// The first parameter can be used to specify which mesh to import. Here we import all meshes
BABYLON.SceneLoader.Append(“https://models.babylonjs.com/”, “alien.glb”, scene, function (newMeshes) {).

Thanks again!

-Dustan

Since you’re JUST getting started, I’d encourage you to start by using the Playground.

https://playground.babylonjs.com/

Think of the playground as a sandbox for starting to code and see the result in a Babylon scene.

You’re asking awesome questions. Most people tend to start with the playground, build stuff out there, and then down the road, start to port it from the playground to your own hosted files.

It’s up to you how you want to do it honestly. There are lots of options. Whenever I’ve developed locally, I just point my Babylon scenes to the babylon hosted preview files (source) and let my own website pull the script files from Babylon hosting them…but again, you’re getting into some more intermediate level territory…and you might want to consider using the playground. We’ve done a lot of the heavy lifting for you with the Playground so you don’t have to worry about this type of thing until down the road.

That said…here’s another doc you can check out that goes into more detail on the approach I generally use.

https://doc.babylonjs.com/babylon101/first

And again, I know running through docs isn’t always the most fun, but the Babylon 101 course is a fantastic place to get started.

Hope this helps!

All of that made perfect sense, thanks again–you’ve been very helpful! :+1:

-Dustan

1 Like

Hi Dustan! Welcome to the Babylon.js community.

  1. The engine script will be stored remotely. You just need to add the script tag to the head of your HTML page. It looks like this:

<script src="https://preview.babylonjs.com/babylon.js"></script>

You can download Babylon.js files if you want to develop locally, but it is not needed for just getting started.

  1. Babylon does host some a default library of assets for users to get started with. You can find textures here and meshes here.

You might find this guide helpful in learning how to load remote assets into your scenes.

Here is a playground showing you how to add remote assets to your scenes.

https://playground.babylonjs.com/#WV95SK#1

As you dive deeper into Babylon and programming, I’d love to hear more of your thoughts on how easy-to-learn you found this library! We try to be very beginner-friendly.

1 Like

Thanks @belfortk!

With what you and @PirateJC sent, I have a much better understanding of how this all works and what assets are available. By far, my biggest challenge is programming, which is something I just have to learn from the examples (which are awesome and extremely helpful). It’s amazing how much code it takes to achieve something that seems so simple!

Thanks again!

-Dustan

1 Like

You and me both! I constantly feel like a toddler with hotdog fingers whenever it comes to programming. LOL But like anything, the more you do it, the more confident you’ll become!

I have no doubt we’ll see some amazing things coming from you before you know it!