
## Adding Files

To add files, simply browse to the desired folder and click the `Import...` button in the Assets Browser toolbar.
A dialog will open to select the files to add. Once selected and confirmed, all selected assets will be copied to
the currently browsed folder.

Whenever a file is added, its thumbnail is generated if its type is recognized and supported.

![AddingFiles](/img/extensions/Editor/AddingFiles/adding-files.webp)

## Supported Mesh 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.webp)

## Assigning a Material

To assign a material to a mesh, simply drag and drop the material asset from the assets browser onto the mesh in
the preview panel or in the inspector.

Once a material asset has been dropped, if the material has not been previously instantiated, the editor creates its instance automatically. If the material has already been instantiated, the existing reference is assigned to the mesh.

Example of dragging and dropping a material asset onto a mesh in the `Preview Panel`:

![DropInPreview](/img/extensions/Editor/AddingMaterials/drop-in-preview.webp)

Example of selecting a mesh in the graph or scene and dragging and dropping a material asset into
the inspector's `Material` field:

![DropInInspector](/img/extensions/Editor/AddingMaterials/drop-in-inspector.webp)

## Editing a Material

To edit a material, simply click 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 it to a mesh first. Otherwise, the inspector will not be populated because the material instance cannot be found.

![EditingMaterial](/img/extensions/Editor/AddingMaterials/editing-material.webp)

## Refreshing Thumbnails

To save performance in the Editor, material thumbnails are not updated continuously. If, for example, one or more texture assets have changed, the thumbnail will not necessarily be updated.

To update material thumbnails, simply select the materials in the assets browser, `right-click` them,
and select `Refresh Preview`.

![RefreshingThumbnails](/img/extensions/Editor/AddingMaterials/refreshing-thumbnails.webp)



## Adding Meshes To The Scene

To add a new mesh (or hierarchy of meshes, depending 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, each material that does not already exist in the assets is created as a `.material` file.

![AddingMeshes](/img/extensions/Editor/AddingMeshes/adding-meshes.webp)

## Updating Existing Meshes

Meshes can be updated even if they were created using an older 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 all components to update (geometry(ies), material(s), and skeleton(s))

![UpdatingReferences](/img/extensions/Editor/AddingMeshes/updating-references.webp)

## Examining Meshes

At any time, `double-clicking a mesh file` in the assets browser opens a new window (or a tabbed window on macOS)
to examine a mesh source file.

Once loaded, the Babylon.JS Inspector appears to inspect 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.webp)

## Cleaning Assets
To let users manage their own assets, the Editor never removes unused assets unless asked to do so. This means that when you update meshes, old materials and textures remain available in the assets panel. Do not forget to clear unused assets (for example, unused materials and then unused textures) to keep the project clean if you are sure the old assets are no longer needed.



## Applying Textures to Materials

Textures available in the assets browser can be applied to materials.
By default, textures available in the assets browser are not instantiated in the scene.

To instantiate textures in the scene and use them on materials, simply drag and drop the texture assets
into the appropriate list boxes in the inspector.

In the inspector, all list boxes related to textures (for example, `Environment Texture` in the scene inspector) support
drag and drop from the assets browser.

![ApplyTextureMaterialInspector](/img/extensions/Editor/AddingTextures/apply-material-inspector.webp)

## Cloning Textures

Multiple instances of the 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 the texture instance to create, and a new instance sharing the same texture file
is created and available in the assets panel.

As in the Assets Browser panel, textures from the assets panel can be dragged and dropped.

![CloningTexture](/img/extensions/Editor/AddingTextures/cloning-texture.webp)

## Editing A Texture

To edit a texture, simply click 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 so you can select the texture instance
to edit in the inspector.

![EditingTexture](/img/extensions/Editor/AddingTextures/editing-texture.webp)



## Introduction

Starting with Babylon.JS Editor v4.1.0, asset management has been improved by introducing a new panel: **"Assets Browser"**.
All assets are now shared across projects and can be browsed as in other popular 3D editors.

The Assets Browser can browse two main asset types:
* Source folder `/src`, which contains all the project's TypeScript, JSON, and other files
* Assets folder `/assets`, which contains all scene assets (textures, meshes, materials, sounds, etc.).

To identify assets quickly, distinct colors are applied to titles:
* `Yellow` represents mesh assets
* `Green` represents material assets
* `Blue` represents particle system 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.webp)

The right pane also contains a stack of open folders. This stack shows the currently browsed path
and can be clicked to quickly access a directory available in the stack.

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

## Using Favorites

At the top of the directory tree, 2 favorite shortcuts are available:
* `All Materials`: shows the list of all available material assets that have been instantiated (used) in the current scene.
* `All Textures`: like materials, shows the list of all available texture assets that have been instantiated (used) in the current scene.

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

## Creating a New Folder

New folders can be created at any time. Just right-click an 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.webp)

## Selecting Files

As in 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.webp)

## Moving Files

Once file(s) have been selected, they can be dragged and dropped into 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 latest move actions for each moved file so that, if the project is closed before saving, the real path for linked assets (such as material textures) can still be retrieved.

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

Drag and drop is also supported in the tree.

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



Learn how to manage assets in the Babylon.js Editor.



## Running the project

Since Babylon.JS Editor v4.0.0-rc.3, it is possible to play the scene currently being edited directly in the Editor. This means the scene, as it appears in the Editor, can be played directly, including all scripts that are attached to it. This is particularly useful for testing the scene itself and seeing whether the scripts/components are working as intended.

## Playing the scene
In the middle of the tools toolbar, there are 2 buttons:
- Play / Stop (on the left), which generates the scene and plays it in the Editor's preview panel.
- Restart (on the right), which simply reloads the scene to be played.

![PlayStopButtons](/img/extensions/Editor/RunningProject/play-stop-buttons.webp)

Once the play button is clicked, the scene being edited in the preview panel disappears so the test scene can be shown. Once the scene to test is loaded, you can play it and see whether all scripts are working as intended.

![PlayScene](/img/extensions/Editor/RunningProject/playing_scene.webp)

## Debugging the scene
All templates in the Editor offer a way to debug TypeScript code directly in VSCode. Just press F5 and place breakpoints or `debugger;` statements 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, run the scene and debug your code using your favorite shortcuts and debugging tools:

![DebugScene](/img/extensions/Editor/RunningProject/debugging.webp)


Babylon.js Editor Assets

Coming next

Adding files

Understanding how to add files in a Babylon.JS Editor project

Assets introduction

Understanding how to use the "Assets Browser" panel in the Babylon.JS Editor

Adding mesh assets

Understanding how to add and manage meshes in a Babylon.JS Editor project

Adding material assets

Understanding how to add and manage materials in a Babylon.JS Editor project

Adding texture assets

Understanding how to add and manage textures in a Babylon.JS Editor project