
## How to Create Your Own File Importer

By default, babylon.js comes with an importer for .babylon files.

You can also create your own importer by providing a specific object to the `BABYLON.SceneLoader.RegisterPlugin` function.

This object must have three properties:

- A list of supported file extensions (`extensions`)
- An `importMesh` function to import specific meshes
- A `load` function to import complete scene
- A `loadAssets` function to import all babylon elements from the file but do not add them to the scene

Here is a sample importer object:

```javascript
BABYLON.SceneLoader.RegisterPlugin({
  extensions: ".babylon",
  importMesh: function (meshesNames, scene, data, rootUrl, meshes, particleSystems, skeletons) {
    return true;
  },
  load: function (scene, data, rootUrl) {
    return true;
  },
  loadAssets(scene, data, rootUrl) {
    const container = new AssetContainer(scene);
    return container;
  },
});
```

- `meshesNames` is the names of meshes to import
- `scene` is the scene to load data into
- `data` is the string representation of the file to load
- `rootUrl` defines the root URL of your assets
- `meshes` is the list of imported meshes
- `particleSystems` is the list of imported particle systems
- `skeletons` is the list of imported skeletons



## Lights and Shadows

Lights are of course necessary to see the meshes and affect brightness and colour. Although lights show meshes they only produce shadows when shadow generation is set on the mesh. The default number of lights allowed is four but this can be increased. 

There are four types of lights that can be used with a range of lighting properties.

* The Point Light - think light bulb.  
* The Directional Light - think planet lit by a distant sun.  
* The Spot Light - think of a focused beam of light.
* The Hemispheric Light - think of the ambient light.

Color properties for all lights include _emissive_, _diffuse_ and _specular_.

Overlapping lights will interact as you would expect with the overlap of red, green and blue producing white light. Every light can be switched on or off and when on its intensity can be set with a value from 0 to 1. 

For shadows a _shadowGenerator_ object is needed. There is also an extension, **shadows only**,  that allows shadows on a transparent mesh.

To begin to understand how meshes react to light you need to know about the normals of a mesh since they form part of the calculations in determining the color and illumination.



An AssetContainer can be used to manage a list of assets (like nodes, cameras, lights, meshes, etc..). This assets are still linked to a scene but are not taken in account. Consider asset containers like pool of entities.

## Creating an AssetContainer

It can be created manually

```javascript
const container = new BABYLON.AssetContainer(scene);
```

Or by loading from a file. See [loading from files](/features/featuresDeepDive/importers/loadingFileTypes)

## Adding or removing assets to the scene

The container can then be used to add or remove contents of the container from the scene.

```javascript
// Add all objects in the asset container to the scene
container.addAllToScene();

// Remove all objects in the container from the scene
container.removeAllFromScene();
```

<Playground id="#5NFRVE#1" title="Asset Container Adding and Removing Assets" description="Simple Example of adding and removing asset container assets into your scene." image="/img/playgroundsAndNMEs/divingDeeperAssetContainer1.jpg"/>

This can be used to add/remove all objects in a scene without the need to exit WebVR. <Playground id="#JA1ND3#48" title="Asset Container Adding and Removing Assets in WebVR" description="Simple Example of adding and removing asset container assets into your WebVR scene." image="/img/playgroundsAndNMEs/divingDeeperAssetContainer2.jpg"/>

When creating assets manually the moveAllFromScene method can be used to move all assets currently in a scene into an AssetContainer and remove them from the scene for later use.

```javascript
const keepAssets = new BABYLON.KeepAssets();
keepAssets.cameras.push(camera);
container.moveAllFromScene(keepAssets);
```

<Playground id="#5NFRVE#3" title="Moving Assets Into an Asset Container" description="Simple Example of moving assets in a scene into an asset container."/>

## Duplicating the models

Asset containers can also be used as "templates" to duplicate models without reloading them.

To do so, you only need to call:

```javascript
let entries = container.instantiateModelsToScene();
```

The return entries object will contain:

- rootNodes: A list of all the root nodes created by the duplication process
- skeletons: A list of all the skeletons created by the duplication process
- animationGroups: A list of all the animation groups created by the duplication process

<Playground id="#S7E00P" title="Instantiating Asset Container Assets" description="Simple Example of using asset containers as templates to duplicate assets in a scene." image="/img/playgroundsAndNMEs/divingDeeperAssetContainer3.jpg"/>

You can also set two parameters to the call to `instantiateModelsToScene`:

- nameFunction: This will let you decide what will be the name of the cloned entities (instead of "Clone of...")
- cloneMaterials: By default materials are not cloned but shared. With this parameter you can force the system to also clone the materials

```javascript
const entries = container.instantiateModelsToScene(name => "p" + name, true);
```

You can dispose a specific set of instantiated models again with:
```javascript
entries.dispose();
```
