
## Using ESM Without a Bundler

Modern browsers can load Babylon packages as native ES modules. An [import map](https://developer.mozilla.org/docs/Web/HTML/Element/script/type/importmap) maps package specifiers such as `@babylonjs/core` or `@babylonjs/lite` to self-hosted files or a pinned npm CDN URL. Your application can then use standard `import` statements inside a `<script type="module">` without bundling Babylon.js.

These complete demos show the same approach for both Babylon.js and Babylon Lite:

| Package | Live demos | Source |
| ------- | ---------- | ------ |
| Babylon.js | [Babylon.js native ESM in the browser](https://raananw.github.io/babylonjs-esm-in-browser/) | [RaananW/babylonjs-esm-in-browser](https://github.com/RaananW/babylonjs-esm-in-browser) |
| Babylon Lite | [Babylon Lite in the browser](https://raananw.github.io/babylon-lite-in-browser/) | [RaananW/babylon-lite-in-browser](https://github.com/RaananW/babylon-lite-in-browser) |

The Babylon.js project runs one application against three module sources: self-hosted `@babylonjs/core` and `@babylonjs/loaders` package files, jsDelivr, and unpkg. It uses granular `.pure.js` imports so the unbundled browser does not fetch every re-export from a package barrel.

The Babylon Lite project includes a gallery of plain HTML and JavaScript scenes. It demonstrates both a local copy of the official `@babylonjs/lite` browser distribution and pinned jsDelivr or unpkg URLs. Babylon Lite is WebGPU-only, so its examples require a current browser with WebGPU support.

## When to Use This Approach

Native browser ESM is useful for learning, prototypes, static pages, and environments where a bundling pipeline is undesirable. Keep these tradeoffs in mind:

- Browsers do not tree-shake modules. Use an ESM-aware bundler when minimizing the production payload is more important than avoiding a build step.
- Pin exact package versions when loading modules from an npm CDN.
- Prefer self-hosting when you need offline development, predictable caching and availability, or a strict Content Security Policy.
- Serve the files over HTTP or HTTPS instead of opening the HTML through a `file://` URL.

The live demos expose their import maps and application source, and their GitHub repositories include the complete build and deployment configuration.



## Introduction

The NPM package manager is one of the best ways to define and organize your project's dependencies. Unlike traditional JavaScript development, which includes a script in an HTML `<script>` tag, using npm packages lets you use tools like Webpack or Browserify to bundle your project and deliver it continuously.

We now officially support our npm packages and will continue updating the npm repository with new versions as they are developed. The first supported version is 3.1.0-alpha3.4.

All examples in this tutorial use CommonJS / ES6 imports. However, since we use [UMD](https://github.com/umdjs/umd), the same files used in our npm packages can also be used with AMD imports or simply included in an HTML script tag.

## Available packages

We offer the babylon.js core and its modules as npm packages. The following are available:

* [babylonjs](https://www.npmjs.com/package/babylonjs) - Babylon's core.
* [babylonjs-materials](https://www.npmjs.com/package/babylonjs-materials) - a collection of Babylon-supported advanced materials.
* [babylonjs-loaders](https://www.npmjs.com/package/babylonjs-loaders) -  All of Babylon's official loaders (OBJ, STL, glTF)
* [babylonjs-post-process](https://www.npmjs.com/package/babylonjs-post-process) - Babylon's post processes.
* [babylonjs-procedural-textures](https://www.npmjs.com/package/babylonjs-procedural-textures) - Officially supported procedural textures
* [babylonjs-serializers](https://www.npmjs.com/package/babylonjs-serializers) - Scene / mesh serializers.
* [babylonjs-gui](https://www.npmjs.com/package/babylonjs-gui) - Babylon.js GUI module.
* [babylonjs-viewer](https://www.npmjs.com/package/babylonjs-viewer) - The stand-alone Babylon.js Viewer.

## Basic usage

Babylon's core and modules take care of setting the dependencies between themselves, so the developer simply needs to import or require them to get everything working.

### Installing Babylon.js

To install the latest Babylon version, use:

```bash
npm install --save babylonjs
```

This installs Babylon.js JavaScript files and also includes a TypeScript declaration file.

To include Babylon in a JavaScript or TypeScript file, use:

```javascript
import * as BABYLON from 'babylonjs';
```

You can also load specific classes if you need them:

```javascript
import { Engine, Scene } from 'babylonjs';
```

**NOTE:** If you can't get this import method to work, go to the section on TypeScript and webpack below.

### Installing other Babylon modules

After including babylonjs you can add Babylon's extra modules using npm as follows:

```bash
npm install --save babylonjs-materials [other packages]
```

Like `babylonjs`, this installs the default minified and non-minified JavaScript files, along with a declaration file.

To import the dependencies, you will need to import them like for the babylon module:

```javascript
import * as Materials from 'babylonjs-materials';
```

And use it like below:

```javascript
let skyMaterial = new Materials.SkyMaterial(.....)
```

### Using require()

If you prefer not to use ES6 import syntax, you can use `require` to import Babylon into your project:

```javascript
let BABYLON = require('babylonjs');
let GUI = require('babylonjs-gui');
let materials = require('babylonjs-materials');
```

## TypeScript support

Being written in TypeScript, Babylon.js will always support TypeScript developers. We provide a declaration file in each package, that either extends the BABYLON namespace or declares a new namespace that can be used during development.

If not detected by your IDE (mostly in case you are not relying on import/export), the most important thing to get full TypeScript support in your project is to add the imported packages as types of compilerOptions in [tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) as follows:

```javascript
{
    "compilerOptions": {
        .....,
        "types": [
            "babylonjs",
            "babylonjs-gui",
            "babylonjs-materials"
        ],
        ...
    },
    ...
}

```

This loads the `BABYLON` namespace and enables autocomplete and type safety.

**NOTE:** to generate a default `tsconfig.json` file that contains useful information about the different settings, run the following in your terminal:
```
tsc --init
```

### Example using webpack

A very simple webpack configuration for compiling a Babylon.js TypeScript project can look like this:

```javascript
module.exports = {
    entry: {
        app: './mygame.ts'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    devtool: 'source-map',
    plugins: [

    ],
    module: {
        rules: [{
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: /node_modules/
        }]
    }
}
```

Simply create a file named `webpack.config.js` at the root of your project and copy the template above into it.
The file `mygame.ts` should be the entry point of the project.

**NOTE:** Make sure you've installed the following packages:
```
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev typescript
npm install --save-dev ts-loader
```


## ES6
If you want to benefit from tree shaking and other details, you can use our Babylon.js ES6 packages:

* [@babylonjs/core](https://www.npmjs.com/package/@babylonjs/core) - Babylon's core.
* [@babylonjs/materials](https://www.npmjs.com/package/@babylonjs/materials) - a collection of Babylon-supported advanced materials.
* [@babylonjs/loaders](https://www.npmjs.com/package/@babylonjs/loaders) -  All of Babylon's official loaders (OBJ, STL, glTF)
* [@babylonjs/post-processes](https://www.npmjs.com/package/@babylonjs/post-processes) - Babylon's post processes.
* [@babylonjs/procedural-textures](https://www.npmjs.com/package/@babylonjs/procedural-textures) - Officially supported procedural textures
* [@babylonjs/serializers](https://www.npmjs.com/package/@babylonjs/serializers) - Scene / mesh serializers.
* [@babylonjs/gui](https://www.npmjs.com/package/@babylonjs/gui) - Babylon.js GUI module.
* [@babylonjs/inspector](https://www.npmjs.com/package/@babylonjs/inspector) - The Babylon.js Inspector for ES6.

Please note that you cannot mix ES6 and our legacy packages.

```javascript
import { Engine } from '@babylonjs/core/Engines/engine'

const canvas = document.getElementById("canvas");

const engine = new Engine(canvas, true);

// code continues....
```

For more information, you can have a look at [the ES6 documentation](/setup/frameworkPackages/es6Support);

## External libraries

### Pre 3.2.0-beta.1

Cannon and Oimo (both physics engines) are being delivered as dependencies when installing babylonjs using npm. There is no need to install them on your own.

### Current version

Cannon and Oimo are both optional dependencies. If you want to use any of them, please install them yourself.

### Using the optional dependencies with AMD

If you want to use Oimo, for example, install it using npm:

```shell
npm install oimo
```

This allows our UMD definition to find Oimo in `node_modules` and use it. If you use AMD, you first need to declare Oimo as a module, because Oimo uses an anonymous AMD definition:

```javascript
define('oimo', ['path/to/oimo'], function(OIMO) {
    return OIMO;
})
```

Babylon will now automatically find Oimo and inject it.

### Using Webpack

To use either oimo or cannon, install them using npm. Our UMD definition will find them and inject them automatically.

If you use CommonJS and webpack and do not install Cannon or Oimo, you might see a warning saying that those dependencies could not be found. To fix that, use webpack's `externals` feature.

In `webpack.config.js` add:

```javascript
    ...,
    externals: {
        oimo: 'OIMO', //or true
        cannon: 'CANNON' //or true
    },
    ...
```

This will define both of those dependencies as external dependencies and will not load them anymore.

You can see an example of that in the Viewer directory of our main repository.

## Questions and Troubleshooting

### Error TS2307: Cannot find module 'babylonjs' (or other modules)

* Make sure you have a version later than 3.1.0-alpha3.4
* Make sure you added 'babylonjs' to "types" in tsconfig.json

### Even though I use only a few classes from the BABYLON namespace, the entire Babylon module is included

Due to the way Babylon.js is built, tree shaking is currently not very effective. Babylon's internal objects have deep connections with one another for performance reasons. That means your built JS file will be at least the size of Babylon.js minified.

You can still use custom builds to create your own minimal version: //doc.babylonjs.com/how_to/how_to_start#custom-builds

### Naming is different than what the documentation states

Our documentation always refers to the BABYLON namespace. We therefore always use this namespace when talking about objects/classes, and also use this namespace when talking about the GUI.

When using ES6 imports or `require`, you are responsible for setting the namespace to suit your needs. Pay attention when changing it and when copying code from the Playground.

## Example of a webpack project using Babylon modules

Let's look at an example of how to set up a Babylon project written in TypeScript and bundled with webpack.

I will be using webpack 4, but the same setup will work with the previous version of webpack.

### Setting up the project

We will use npm to install dependencies. First, run `npm init` to generate `package.json`. You can generate `package.json` in any other way you prefer.

After `package.json` has been generated, install the required dev dependencies:

```bash
npm install --save-dev typescript webpack ts-loader webpack-cli
```

Now we need to configure webpack so it knows what to do. Here is a simple example of the `webpack.config.js` file:

```javascript
const path = require("path");

module.exports = {
    entry: './index.ts',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        extensions: [".ts"]
    },
    module: {
        rules: [
            { test: /\.tsx?$/, loader: "ts-loader" }
        ]
    },
    mode: "development"
};
```

We will also add `tsconfig.json`:

```javascript
{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noResolve": false,
        "noImplicitAny": false,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "experimentalDecorators": true,
        "isolatedModules": false,
        "lib": [
            "dom",
            "es2015.promise",
            "es5"
        ],
        "declaration": true,
        "outDir": "./"
    },
    "files": [
        "./index.ts"
    ]
}
```

We will also add an HTML file with a canvas (`index.html`):

```html
<!DOCTYPE html>
<html>

    <head>
        <style>
            html,
            body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                text-align: center;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>
    </head>

    <body>
        <canvas id="renderCanvas"></canvas>
        <script src="dist/index.js"></script>
    </body>

</html>
```

After adding a new file called `index.ts`, we are ready to start developing.

### Adding Babylon support

We will start a simple project with the Babylon core module, the loaders, and the GUI.

First, let's install Babylon's dependencies:

```bash
npm install --save babylonjs babylonjs-loaders babylonjs-gui
```

This will install the latest stable version of Babylon. To install the latest preview version, use the preview stream:

```bash
npm install --save babylonjs@preview babylonjs-loaders@preview babylonjs-gui@preview
```

### Writing some code

Our `index.ts` will display a sphere for now. The code will be very similar to the Playground, but you can structure your code however you like:

```javascript
var canvas: any = document.getElementById("renderCanvas");
var engine: Engine = new Engine(canvas, true);

function createScene(): Scene {
    var scene: Scene = new Scene(engine);

    var camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene);

    var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);

    return scene;
}

var scene: Scene = createScene();

engine.runRenderLoop(() => {
    scene.render();
});
```

You will notice that the `BABYLON` namespace is gone and that you will see many errors if you actually use this file. This is because we haven't yet imported the required dependencies from `babylonjs`.

We will use ES6 imports for that. To add the dependencies, we have two options. The first is to define the `BABYLON` namespace:

```javascript
import * as BABYLON from 'babylonjs';
```

This will actually bring back the BABYLON namespace. My preferred option is only loading the dependencies you need:

```javascript
import { Engine, Scene, ArcRotateCamera, HemisphericLight, Vector3, MeshBuilder, Mesh } from "babylonjs";
```

Adding this line to the beginning of the file will load all needed dependencies to your project and will eliminate all errors.

### Bundling the project

Compiling index.ts using tsc will work. But it will generate a file that is unusable without babylonjs itself. To get a bundled file we will run webpack. Again, two ways for that:

```bash
./node_modules/.bin/webpack
```

Or creating a build task in package.json:

```javascript
    "scripts": {
        "build": "webpack"
    },
```

Then run:

```bash
npm run build
```

We will now have an `index.js` file in the `dist` folder that we can use in our _index.html_.

You will notice there are a few warnings about dependencies. We will deal with that later.

### Checking your project

The best option during development is the webpack dev server (https://github.com/webpack/webpack-dev-server/), but it is outside the scope of this tutorial.

To check the current project, I use the `http-server` npm module, installed globally. You can use any web server that serves the root folder of your project.

If you open our _index.html_, you will see a sphere. Hooray!

### Adding the GUI

For the sake of learning, we will add a new file, `gui.ts`, even though this could still be done in a single TypeScript file. Our `gui.ts` file will look like this:

```javascript
import { AbstractMesh } from "babylonjs";
import { AdvancedDynamicTexture, Rectangle, Control, TextBlock } from "babylonjs-gui";

let advancedTexture: AdvancedDynamicTexture;

function init(): void {
    if (!advancedTexture) {
        advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("ui1");
    }
}

export function addLabelToMesh(mesh: AbstractMesh): void {
    if (!advancedTexture) {
        init();
    }
    let label: Rectangle = new Rectangle("label for " + mesh.name);
    label.background = "black";
    label.height = "30px";
    label.alpha = 0.5;
    label.width = "100px";
    label.cornerRadius = 20;
    label.thickness = 1;
    label.linkOffsetY = 30;
    label.top = "10%";
    label.zIndex = 5;
    label.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
    advancedTexture.addControl(label);

    const text1: TextBlock = new TextBlock();
    text1.text = mesh.name;
    text1.color = "white";
    label.addControl(text1);
}
```

In our `index.ts`, we will import the function and use it in `createScene`:

```javascript
import { addLabelToMesh } from "./gui";
```

The `createScene` function now looks like this:

```javascript
function createScene(): Scene {
    var scene: Scene = new Scene(engine);

    var camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene);

    var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);

    addLabelToMesh(sphere);

    return scene;
}
```

If we compile now with webpack, our GUI element will appear in the scene.

### Eliminating the dependencies warnings

Babylon uses Oimo, Cannon, and Earcut as external, optional dependencies. If you don't use them, you can define them as externals in your webpack configuration to avoid the warnings:

```javascript
    externals: {
        "oimo": true,
        "cannon": true,
        "earcut": true
    },
```



<Alert severity="warning" title="Warning" description="The CDN should not be used in production environments. The purpose of our CDN is to serve Babylon packages to users learning how to use the platform or running small experiments. Once you've built an application and are ready to share it with the world at large, you should serve all packages from your own CDN. Please read the section below for more information."/>

## Direct Usage

These packages can be imported directly from the CDN, as needed, using:

```javascript
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/babylon.max.js"></script>
<script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.js"></script>
<script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.js"></script>
<script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
<script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.js"></script>
<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.max.js"></script>
<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.max.js"></script>
```

## View

**Babylon.js Core**  
Minimum Version - [https://cdn.babylonjs.com/babylon.js](https://cdn.babylonjs.com/babylon.js)  
Readable Version - [https://cdn.babylonjs.com/babylon.max.js](https://cdn.babylonjs.com/babylon.max.js)

**Babylon.js Supported Advanced Materials**  
Minimum Version - [https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js](https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js)  
Readable Version - [https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.js](https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.js)

**Babylon.js All Official Loaders (OBJ, STL, glTF)**  
Minimum Version - [https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js](https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js)  
Readable Version - [https://cdn.babylonjs.com/loaders/babylonjs.loaders.js](https://cdn.babylonjs.com/loaders/babylonjs.loaders.js)

**Babylon.js Post Processes**  
Minimum Version - [https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js](https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js)  
Readable Version - [https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.js](https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.js)

**Babylon.js Procedural Textures**  
Minimum Version - [https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js)  
Readable Version - [https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.js](https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.js)

**Babylon.js Scene/Mesh Serializers**  
Minimum Version - [https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js](https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js)  
Readable Version - [https://cdn.babylonjs.com/serializers/babylonjs.serializers.js](https://cdn.babylonjs.com/serializers/babylonjs.serializers.js)

**Babylon.js GUI**  
Minimum Version - [https://cdn.babylonjs.com/gui/babylon.gui.min.js](https://cdn.babylonjs.com/gui/babylon.gui.min.js)  
Readable Version - [https://cdn.babylonjs.com/gui/babylon.gui.js](https://cdn.babylonjs.com/gui/babylon.gui.js)

**Babylon.js Inspector**  
Minimum Version - [https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js](https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js)  
Readable Version - [https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.max.js](https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.max.js)

**Babylon.js Viewer**  
Minimum Version - [https://cdn.babylonjs.com/viewer/babylon.viewer.js](https://cdn.babylonjs.com/viewer/babylon.viewer.js)  
Readable Version - [https://cdn.babylonjs.com/viewer/babylon.viewer.max.js](https://cdn.babylonjs.com/viewer/babylon.viewer.max.js)

## Deploying your own version of the resources

As the notice above states, it is not recommended to use the latest CDN version directly in production. Although the Babylon team won't do it deliberately, it is always possible that something could go wrong during the build or deployment of a specific version, and that the CDN could be updated with some code that will break your production application. We also can't guarantee 100% uptime, though we do our best to keep the server online.

Babylon itself uses the CDN throughout the framework, for example with Draco or Basis decoding, or the inspector. When loading these components without loading the module yourself before, the CDN will be used to download the file.

Babylon allows you to either load the module yourself and inject it into the components that are using the external dependencies, or provide a different base URL (or a full URL) for all components, or for each component individually.

### Simple - Changing base URL for external resources

To change the base URL for all resources loaded by Babylon, use the static member of Tools:

```javascript
BABYLON.Tools.CDNBaseUrl = "https://my.wonderfull.server";
```

Of course, this can be done in ES6 by importing `Tools` and setting the `CDNBaseUrl`.

Any resources loaded in our core library will be loaded from this URL instead of `https://cdn.babylonjs.com`. The structure needs to remain the structure of our CDN.

For finer control, the following properties can be configured individually. Setting both has the same effect as setting `CDNBaseUrl`:

```javascript
BABYLON.Tools.ScriptBaseUrl = "https://my.wonderfull.server";
BABYLON.Tools.AssetBaseUrl = "https://my.wonderfull.server";
```

What is the simplest way to get the resources structured? Let's dive in.

#### 1. Using the CDN but with a fixed version

Whereas our CDN base directory always holds our nightlies, we do deploy specific versions of the framework on every release. Every release is available at `https://cdn.babylonjs.com/vX.X.X` . So, for example, if you want to use version 6.30.0 for your resources, you can change the base URL to this:

```javascript
BABYLON.Tools.ScriptBaseUrl = "https://cdn.babylonjs.com/v6.30.0";
```

The CDN structure is guaranteed to be correct.

#### 2. Downloading the resources and deploying them on your own CDN

This option is the best for you, as you are in full control of the resources. To get the resources in the CDN structure you can download a GitHub release at [GitHub Babylon.js releases](https://github.com/BabylonJS/Babylon.js/releases).

After downloading the CDN snapshot ZIP file and deploying it on your server, change the base URL to the base URL of the resources deployed.

Make sure that your server/CDN supports CORS, at least for your own Babylon experience.

### A bit more complex - deploy and configure specific resources

Instead of downloading and deploying our entire CDN structure, you can do that specifically for the **script** resources you are using. Each of these URLs in Babylon can be configured individually:

```javascript
const baseUrl = "https://foo.bar";

BABYLON.DracoDecoder.DefaultConfiguration = {
    wasmUrl: baseUrl + "/draco_wasm_wrapper_gltf.js",
    wasmBinaryUrl: baseUrl + "/draco_decoder_gltf.wasm",
    fallbackUrl: baseUrl + "/draco_decoder_gltf.js",
};

BABYLON.MeshoptCompression.Configuration.decoder = {
    url: baseUrl + "/meshopt_decoder.js",
};

BABYLON.GLTFValidation.Configuration = {
    url: baseUrl + "/gltf_validator.js",
};

BABYLON.KhronosTextureContainer2.URLConfig = {
    jsDecoderModule: baseUrl + "/babylon.ktx2Decoder.js",
    wasmUASTCToASTC: baseUrl + "/ktx2Transcoders/1/uastc_astc.wasm",
    wasmUASTCToBC7: baseUrl + "/ktx2Transcoders/1/uastc_bc7.wasm",
    wasmUASTCToRGBA_UNORM: baseUrl + "/ktx2Transcoders/1/uastc_rgba8_unorm_v2.wasm",
    wasmUASTCToRGBA_SRGB: baseUrl + "/ktx2Transcoders/1/uastc_rgba8_srgb_v2.wasm",
    jsMSCTranscoder: baseUrl + "/ktx2Transcoders/1/msc_basis_transcoder.js",
    wasmMSCTranscoder: baseUrl + "/ktx2Transcoders/1/msc_basis_transcoder.wasm",
    wasmZSTDDecoder: baseUrl + "/zstddec.wasm",
};

BABYLON.BasisToolsOptions.JSModuleURL = baseUrl + "/basisTranscoder/1/basis_transcoder.js";
BABYLON.BasisToolsOptions.WasmModuleURL = baseUrl + "/basisTranscoder/1/basis_transcoder.wasm";
```

## Special cases

### WebGPU

WebGPU requires `glslang` and `twgsl` (including their binaries) to work correctly.

To configure their URLs individually:

```javascript
const glslangOptions = {
  jsPath: baseUrl + "/glslang/glslang.js",
  wasmPath: baseUrl + "/glslang/glslang.wasm",
};

const twgslOptions = {
  jsPath: baseUrl + "/twgsl/twgsl.js",
  wasmPath: baseUrl + "/twgsl/twgsl.wasm",
};

const options = {
  // ... webgpu options
};

const engine = new BABYLON.WebGPUEngine(window.canvas, options);
await engine.initAsync(glslangOptions, twgslOptions);
```



Native ES Modules in the Browser

Using ESM Without a Bundler

When to Use This Approach

Further reading

Babylon.js ES6 support with Tree Shaking

Learn about tree shaking and package management in Babylon.js.

CDN Babylon.js Packages

Obtain BABYLON.js Packages via CDN.

Package	Live demos	Source
Babylon.js	Babylon.js native ESM in the browser	RaananW/babylonjs-esm-in-browser
Babylon Lite	Babylon Lite in the browser	RaananW/babylon-lite-in-browser