
## Adding Files

To add files, simply browse the desired folder and click the button `Import...` in the Assets Browser toolbar.
A dialog will open to select the files to add. Once selected and validated, all the selected assets will be copied to
the currently browsed folder.

Each time a file has been added, its thumbnail will be computed if its type is recognized and supported.

![AddingFiles](/img/extensions/Editor/AddingFiles/adding-files.gif)

## Supported meshes formats
* .babylon
* .fbx
* .gltf
* .glb
* .obj
* .stl

## Supported texture formats
* .png
* .jpg
* .bmp
* .basis
* .dds (cube texture)
* .env (cube texture)

## Supported sound formats
* .mp3
* .ogg
* .wav






## Introduction

Materials are considered to be assets and are available in the `Assets Browser` panel once they are created.

To create a material, use the assets browser panel toolbar `Add -> Materials -> ...`.

Common materials `Standard`, `PBR`and `Node` are supported as well as most of the available materials from
the [Materials Library](https://doc.babylonjs.com/toolsAndResources/assetLibraries/materialsLibrary).
Once a material has been added to the assets, its preview (thumbnail) is created automatically.

![CreatingMaterial](/img/extensions/Editor/AddingMaterials/creating-material.gif)

## Assigning A Material

To assign a material to a mesh, simply drag'n'drop the material asset from the assets browser on the mesh in
the preview panel or in the inspector.

Once a material asset has been dropped, if the material hasn't been previously instantiated the editor will
create its instance automatically. If the material has been already instantiated, the existing reference is used
to be assigned on the mesh.

Example drag'n'dropping a material asset on a mesh in the `Preview Panel`:

![DropInPreview](/img/extensions/Editor/AddingMaterials/drop-in-preview.gif)

Example selecting a mesh in the graph or the scene and drag'n'dropping a material asset in
the inspector's field `Material`:

![DropInInspector](/img/extensions/Editor/AddingMaterials/drop-in-inspector.gif)

## Editing A Material

To edit a material, simply click on the material in the `Assets Browser` panel or `Assets` panel.
Once clicked, the inspector is updated to show the editable properties of the material.

If the material has not been instantiated, assign the material first on a mesh. Else, the inspector will not be instantiated because the instance of the material can't be found.

![EditingMaterial](/img/extensions/Editor/AddingMaterials/editing-material.gif)

## Refreshing Thumbnail

To save performances in Editor, materials thumbnails are not permanently updated. In case, for example, one or
multiple texture asset have been changed, the thumbnail will not be necessarily updated.

To update the thumbnail of materials, simply select the materials in the assets browser, `right-click` them
and select `Refresh Preview`.

![RefreshingThumbnails](/img/extensions/Editor/AddingMaterials/refreshing-thumbnails.gif)



## Adding Meshes To The Scene

To add a new mesh (or hierarchy of meshes, depends on the nature of the source file) to the scene, simply
drag and drop the source file on the preview panel. The mesh(es) will be added where the source file has been
dropped.

When adding meshes to the scene, all skeletons, geometries and materials will be loaded and instantiated in the scene.

Because materials are packed into source files, for each material that doesn't already exist in the assets will be
created as `.material` file(s).

![AddingMeshes](/img/extensions/Editor/AddingMeshes/adding-meshes.gif)

## Updating Existing Meshes

Meshes can be updated even if they were created using an old version of their source files.
Once a source mesh file (.babylon, .fbx, etc.) has been updated in the assets, `right-click the mesh file` and
select `"Update References"`

Meshes can be updated by:
* Choosing which component to update (geometry, material, skeleton)
* Forcing to update all components (geometry(ies), material(s) and skeleton(s))

![UpdatingReferences](/img/extensions/Editor/AddingMeshes/updating-references.gif)

## Examining Meshes

At any time, `double-clicking a mesh file` in the assets browser creates a new window (or tabbed window on macOS)
to examine a mesh(es) source file.

Once loaded, the Babylon.JS Inspector appears to inspector the mesh(es) available in the source file.
You can refer to [the inspector documentation](https://doc.babylonjs.com/toolsAndResources/tools/inspector]) to understand how to use the Babylon.JS Inspector.

![ExaminingAsset](/img/extensions/Editor/AddingMeshes/examining-asset.gif)

## Cleaning assets
In order to let the user managing its own assets, the Editor will never remove useless assets until it is asked by the user. That means, when updating meshes, that old materials and texture will still be available in the assets panel. Don't forget to clear unused assets (for example unused materials then unused textures) to keep the project clear if you are sure that old materials, for example, are not needed anymore.



## Applying Textures On Materials

Textures available in assets browser can be used and applied on materials.
By default, textures available in assets browser are not instantiated in scene.

In order to instantiate textures in the scene and use them on materials, simply drag'n'drop the texture assets
in the inspector on list boxes.

In the inspector, all list boxes related to textures (for example "Environment Texture" in scene inspector) support
drag'n'drop from assets browser.

![ApplyTextureMaterialInspector](/img/extensions/Editor/AddingTextures/apply-material-inspector.gif)

## Cloning Textures

Multiple instances of a same texture file can be created using the `Assets` panel.

Once a texture has been instantiated, it appears in the assets panel. Simply right-click the texture and select
`Clone...`. Enter the name of texture instance to create and finally a new instance sharing the same texture file
is created and available in the assets panel.

As for the assets browser panel, textures from the assets panel can be drag'n'dopped.

![CloningTexture](/img/extensions/Editor/AddingTextures/cloning-texture.gif)

## Editing A Texture

To edit a texture, simply click on it in the `Assets Browser` panel or `Assets` panel.
Once a texture has been clicked, the inspector is updated to show the editable properties of the clicked texture.

In the assets browser, if a texture file has multiple instances, a menu appears to select the texture instance
to edit in the inspector.

![EditingTexture](/img/extensions/Editor/AddingTextures/editing-texture.gif)



## Introduction

Starting from Babylon.JS Editor v4.1.0, assets management has been improved by introducing a new panel: **"Assets Browser"**.
All assets are now shared across projects and are now browsable like we can do in other famous 3D editors.

The assets browser can browse two main assets types:
* Sources folder `/src` which contains all the project's TypeScript, Json, etc. files
* Assets folder `/assets` which contains all the scenes assets (textures, meshes, materials, sounds, etc.).

To identify assets quickly, distinct colors are applied on titles:
* `Yellow` represents meshes assets
* `Green` represents materials assets
* `Blue` represents particle systems assets

## Using Assets Browser

The Assets Browser panel is composed of 2 resizable panes:
* left pane: the directory tree, like we have in any file explorer
* right pane: the content of the selected directory (files & sub-directories)

Each time a directory is selected in the tree (left pane), the right pane is updated to show its content.

![SelectDirectoryTree](/img/extensions/Editor/AssetsIntroduction/select-directory-tree.gif)

The right pane also contains a stack of opened folders. This stack is used to know the currently browsed path
and can be clicked to quickly access a specified directory available in the stack.

![UseStack](/img/extensions/Editor/AssetsIntroduction/use-stack.gif)

## Using favorites

On top of the directory tree, 2 favorites shortcuts are available:
* `All Materials`: shows the list of all available materials assets that have been instantiated (used) in the current scene.
* `All Textures`: as for materials, shows the list of all available textures assets that have been instantiated (used) in the current scene.

![UsingFavorites](/img/extensions/Editor/AssetsIntroduction/using-favorites.gif)

## Creating A New Folder

New folders can be created at any time. Just right-click empty space in the panel, select `New Directory...` and
type the name of the folder to create. Once accepted, a new folder will be created in the currently browsed folder.

![CreatingFolder](/img/extensions/Editor/AssetsIntroduction/creating-folder.gif)

## Selecting Files

As any other file browser, multiple files can be selected using either:
- `CTRL or Command + Click` to select multiple individual files
- `Shift + Click` to select a range of files

**Note: rectangle selection is not yet available and is still WIP.**

![SelectingFiles](/img/extensions/Editor/AssetsIntroduction/selecting-files.gif)

## Moving Files

Once file(s) have been selected, they can be drag'n'dropped in any folder. Once moved, all links to the moved files
are updated automatically by the editor (materials, textures, sounds, etc.).

Until the project is saved, the editor creates a temporary file named `links.json` located at `${workspacePath}/projects/links.json`.
This json file stores the last moving actions for each moved file in order to, if the project has been closed before saving, retrieve the real path for linked assets (like materials textures).

![MovingFiles](/img/extensions/Editor/AssetsIntroduction/moving-files.gif)

Drag'n'drop is also supported in the tree

![MovingFiles](/img/extensions/Editor/AssetsIntroduction/moving-files-tree.gif)



Descriptions of how to manage assets in Babylon.js Editor.



## Running the project

Since Babylon.JS Editor v4.0.0-rc.3, it is possible to play directly the scene that is being edited in the Editor. This means the scene, as it is in the Editor, can be played directly including all scripts that are attached in the scene. This is particularly useful to test the scene itself and see if the scripts/components are working as intended.

## Playing the scene
At the middle of the tools toolbar, there are 2 buttons:
- Play / Stop (on the left) that generates the scene and plays the scene in the Editor's preview panel.
- Restart (on the right) that simply reloads the scene to be played.

![PlayStopButtons](/img/extensions/Editor/RunningProject/play-stop-buttons.png)

Once the play button is clicked, the scene being edited in the preview panel disappears to let the test scene being visible. Once the scene to test is loader, you can play the scene and see if all scripts are working as intented.

![PlayScene](/img/extensions/Editor/RunningProject/playing_scene.gif)

## Debugging the scene
All templates in the Editor offer the way to debug TypeScript code directly in VSCode. Just type F5 and place break points or "debugger;" in your code.

**Note: type F5 before running the scene as the remote debugger will not (sometimes) be able to attach the process created on the fly to run the scene.**

Once VScode is attached to the Editor, let's run the scene and debug your code using your favorite shortcuts and debugging tools:

![DebugScene](/img/extensions/Editor/RunningProject/debugging.gif)
