What is the optimal choice of <script src= "..."> tags for the index.html file?

Questions
1

I am using many features of Babylon to create a rich, interactive (using controllers), all-media-type-friendly (friendly to VR and conventional photo and videos, and spatial audio) webXR site (VR & AR & MR), for use with webXR enabled browsers in QUEST and other HMD’s (as they evolve), and which will gracefully accept being viewed in a conventional desktop or mobile browser. I want it to work optimally now, and continue to work as Babylon evolves.

What are the current tags needed now (in the index.html file) for optimal performance? How do I know when a feature enhancement or change will require a change in the tags?

Here, below, are some of the tags I have used. What should I use? What is the best place to look for a guide to the tags to use? Where can I monitor any changes that may be needed as Babylon continues to evolve?

Thanks!

Eric

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
<script src="https://preview.babylonjs.com/ammo.js"></script>
<script src="https://preview.babylonjs.com/cannon.js"></script>
<script src="https://preview.babylonjs.com/Oimo.js"></script>
<script src="https://preview.babylonjs.com/earcut.min.js"></script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"> 
</script>
<script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"> 
</script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
2

Hi Eric,

It all depends on your project and what you are planning on using.

This is probably code downloaded from the playground. You can notice that we include all 3 physics engines we support, we include all of babylon’s external tools, the loaders, the serializers, GUI, the inspector. Everything.

You should remove anything you are not using, and keep anything that you do.

If I can recommend, try not to use this kind of build at all. If you build a complex project, try using an npm/yarn-enabled project, where you only import what you need. It will provide better structure, and will allow your code to scale. But, of course, it is not a must.

3

Thanks.

Yes, this is code downloaded from the playground.

You say “remove anything you are not using”. That is exactly my problem. I am trying to understand how to find out exactly what needs to be included. When I look up some new Babylon code that works, I do not know an easy way to find out exactly what needs to be included to make it work. (Taking the code from the playground gives me “too much”.)

Documentation for an npm/yarn enabled project seems like even a step beyond the documentation I am not finding now. (I’m an experienced coder in C, C++ & others, but not very experienced in javascript, and new to Babylon, especially for interactive XR & other XR features.) To create the prototype version of my project I am looking to work quickly and keep things as simple as possible (that’s “asap” in lowercase). But I appreciate the suggestion and I will look into using npm/yarn as I move from prototype to production (or if it turns out to be crucial even to complete the prototype.)

However, my basic question remains:

Where do I find the documentation that directly explains how to match each Babylon feature to the code (<script src= ) needed to support it?

Thanks very much for your help!

4

That’s a good question.

The packages (i.e. files) available are listed here - NPM Support | Babylon.js Documentation (babylonjs.com)

It also describes what the package actually contains. The API documentation ( BABYLON | Babylon.js Documentation (babylonjs.com)) will also help you understand what packages beling to the GUI and GLTF package).

I’ll get back to my original reply - if you build your project yourself you will know what packages are needed during the project’s build, and it is the recommended way of using babylon in a new project.

1 Like