
## How To Use the Incremental Loading System

In order to support incremental loading (introduced by v1.5.0), you just have to go to [this page](https://github.com/BabylonJS/Exporters/tree/master/Tools/MakeIncremental) in order to get a tool to convert your .babylon file to a .incremental.babylon file alongside associated resources (_.babylonmeshdata_ and _.babylongeometrydata_ files).

These files can be used just like a standard _.babylon_ scene except that they will allow **Babylon.js** to load meshes and textures on the fly. This means that the meshes and the textures will not be loaded at startup but only when they become active (when the active camera can see them).

You have to put the _.babylonmeshdata_ and _.babylongeometrydata_ files in the same folder as the _.incremental.babylon_ file.

You can find a demo of an incremental scene here: <Playground id="#JA1ND3#84" title="Incremental Loading Example" description="Simple Example of incremental loading assets." image="/img/playgroundsAndNMEs/divingDeeperIncrementalLoading1.jpg"/>

## Detailed Step by step
For users less experienced with command line tools, here's a more detailed step by step of what you need to use the tool:

1. Get the Exporters project (by either using git or downloading the ZIP):
![Exporters project](/img/importers/incremental_loading/incr_step_1.png "Babylon.js Exporters project")

2. Download and install [.NET Core 3.1](https://dotnet.microsoft.com/en-us/download/dotnet/3.1)

3. Open a command prompt (cmd.exe should do the trick) and navigate to the MakeIncremental directory:
![MakeIncremental directory](/img/importers/incremental_loading/incr_step_3.png "Navigating to the MakeIncremental directory")

4. Type `dotnet build` on the command prompt:
![.NET build](/img/importers/incremental_loading/incr_step_4.png "Building the project")

5. Navigate to the directory where the build files were written, `\bin\Debug\netcoreapp3.1\`:
![Build directory](/img/importers/incremental_loading/incr_step_5.png "Navigating to the build directory")

6. Type the command `MakeIncremental.exe /i:my-scene.babylon`, where `my-scene.babylon` is the name of your scene (if your scene is named something else, just change what's after the `:` symbol):
![Run command](/img/importers/incremental_loading/incr_step_6.png "Running the MakeIncremental command")

7. The script is going to generate quite a few files, you will need all of them, except your original `my-scene.babylon`. Copy them to a directory your project has access to (on this example, it's `/src`):
![Generated files](/img/importers/incremental_loading/incr_step_7.png "Files generated by the MakeIncremental command")

8. And you're ready to load it into Babylon!
```javascript
BABYLON.SceneLoader.Append("src/", "my-scene.incremental.babylon", scene, function() {
    console.log("My incremental file was loaded! WOHOO!");
});
```

## Node.js based incremental file converter
This script can be used to generate incremental files from babylon scenes. It can be ran directly from node or it can be integrated into build scripts. More information about how to install and configure the script can be found [here](https://www.npmjs.com/package/babylonjs-make-incremental).



## Setup

You can find the loader here [here](https://cdn.babylonjs.com/loaders/babylon.glTFFileLoader.js)

## Full Version

This loader supports both glTF 1.0 and 2.0 and will use the correct loader based on the glTF version string.

```html
<script src="babylon.js"></script>
<script src="babylon.glTFFileLoader.js"></script>
```

## Loading files locally

By default, the gltf loader will request additional files for [draco compression](https://google.github.io/draco/) from *preview.babylonjs.com*. In case you want to deliver these files locally (e.g. for GDPR compliance), you can set the [DracoCompression.Configuration](https://doc.babylonjs.com/typedoc/classes/BABYLON.DracoCompression) object to use local files:

```typescript
DracoCompression.Configuration = {
  decoder: {
    wasmUrl: "/babylon-draco-files/draco_wasm_wrapper_gltf.js",
    wasmBinaryUrl: "/babylon-draco-files/draco_decoder_gltf.wasm",
    fallbackUrl: "/babylon-draco-files/draco_decoder_gltf.js",
  },
};
```

Be sure to download the files first (from `https://preview.babylonjs.com/[FILENAME]`) and put them in a local path (`public/babylon-draco-files`, in this case).

## Warning

A \_root\_ node is added to hold all the **glTF** and **glb** models and model parts are stored as sub-meshes. This is so applications that save models using a right handed system will be loaded correctly into Babylon.js when you add to your create scene function

```javascript
scene.useRightHandedSystem = true;
```

This also means that _loadedMeshes[0]_ will point to the added \_root\_ node and _loadedMeshes[1]_ will point to your first loaded mesh.

## Version 2 Only

This loader supports only glTF 2.0 and will fail to load glTF 1.0.

```html
<script src="babylon.js"></script>
<script src="babylon.glTF2FileLoader.js"></script>
```

See [Skinning](/features/featuresDeepDive/importers/glTF/glTFSkinning) for details on how skinning is implementated in Babylon.js for glTF 2.0.

## Version 1 Only

This loader supports only glTF 1.0 and will fail to load glTF 2.0.

```html
<script src="babylon.js"></script>
<script src="babylon.glTF1FileLoader.js"></script>
```

## Loading the Scene

Use one of the static function on the `SceneLoader` to load a glTF asset.
See [Load from any file type](/features/featuresDeepDive/importers/loadingFileTypes).

See an example here: <Playground id="#WGZLGJ" title="Load a glTF Asset" description="Simple example showing how load a .glTF asset into your scene." image="/img/playgroundsAndNMEs/divingDeeperglTF1.jpg" isMain={true} category="Import"/>

## API (Version 2)

## Properties and Methods

See the available [properties and methods](/typedoc/classes/babylon.gltffileloader) from the API documentation.

## Extensions

See the available [extensions](/typedoc/modules/babylon.gltf2.loader.extensions) from the API documentation.

## API (Version 1)

## Properties

### IncrementalLoading

Set this property to false to disable incremental loading which delays the loader from calling the success callback until after loading the meshes and shaders. Textures always loads asynchronously. For example, the success callback can compute the bounding information of the loaded meshes when incremental loading is disabled. Defaults to true.

```javascript
BABYLON.GLTFFileLoader.IncrementalLoading = false;
```

### HomogeneousCoordinates

Set this property to true in order to work with homogeneous coordinates, available with some converters and exporters. Defaults to false.

```javascript
BABYLON.GLTFFileLoader.HomogeneousCoordinates = true;
```

## Extensions

[KHR_binary_glTF](https://github.com/KhronosGroup/glTF/tree/master/extensions/1.0/Khronos/KHR_binary_glTF)  
[KHR_materials_common](https://github.com/KhronosGroup/glTF/tree/master/extensions/1.0/Khronos/KHR_materials_common)



## Loading Assets Directly From Memory

There may be times where you'll want to pre-load (store) assets in memory and load those assets from memory into your Babylon scene. This is achievable by using a blob url.

<Playground id="#FIWM5X#1" title="Load Asset From Memory" description="Simple example of loading an asset from memory." image="/img/playgroundsAndNMEs/divingDeeperNodeMaterialParticle1.jpg"/>

The way this works is that you load an asset into memory, convert it to a blob, create a url to that blob in memory, and then you have a url that you can use with any of the loading methods in Babylon.

Let's take a quick look at the 4 lines of code to achieve this.

First we load an object from a url directly into an arrayBuffer in memory.

```
const assetArrayBuffer = await BABYLON.Tools.LoadFileAsync("scenes/BoomBox.glb", true);
```

Next we convert that array buffer to a blob (in memory).

```
const assetBlob = new Blob([assetArrayBuffer]);
```

Then we create a url to that blob.

```
const assetUrl = URL.createObjectURL(assetBlob);
```

Then finally we load the asset into the scene from the url which points to the memory blob.

```
await BABYLON.SceneLoader.AppendAsync(assetUrl, undefined, scene, undefined, ".glb");
```

It's important to note that the Babylon scene loader will use the correct loader based on the file extension of the asset you're trying to load. In this case, since we're loading binary data saved to memory, the scene loader needs to be explicitly told which loader to use. This is why the final argument in the AppendAsync method is ".glb".