Managing assets
Introduction
This chapter is linked to the previous one (Composing scene) but goes deeper into the management of assets. How to create your own materials, how to assign textures to materials, etc.
It is important to note that all the assets used in your project must be located at least in the "/assets" folder in order to be correctly understood by the editor. This "assets" folder is the root folder of all the assets used in your project and is also located in the root folder of your project.
Creating your own materials
When importing a 3d model, most of the time it comes with its own materials and textures already configured. But sometimes you may want to have a deeper control over the materials and see how its related assets (typically textures) appear using the Babylon.JS engine.
Let's start with an empty box that we created using the primitive objects of the editor. By default the box has no material assigned to it.
To create a new material, go in the "assets" folder in the "Assets Browser" panel and right click in order to show the context menu and select "Add".
The editor supports both PBR and Standard materials. Most of the time, it is recommended to add PBR materials as it became the norm today. For more information about PBR materials, you can refer to this excellent documentation of Babylon.JS
Once you clicked on "Add -> PBR Material", a new asset file appears named "New PBR Material.material". Double-click on its name and rename it to "my-material.material" or any other name you prefer. Always keeping a constant and logical naming of assets is important to keep your assets organized.
New created materials are empty by default. Now, to assign this material to the box or any other asset, you can drag and drop the material file on the desired mesh in the "Preview" panel.
Materials that are created manually are shared across all objects it's applied to. For example, if the material is assigned to 2 distinct meshes and the material properties are edited, both meshes will be updated.
Your own material is now applied on the box! Now the goal is to edit the material properties using the "Inspector" panel. To do so, just click on the box in the "Preview" panel in order to edit the object.
Scroll a bit in the "Inspector" panel in order to see the "Material" section. Starting from here you can edit the material properties.
Scroll a bit in the "Inspector" panel in order to see the "Material" section. Starting from here you can edit the material properties.
Assigning textures to materials
Because newly created materials are empty, you may want to assign textures to them. As for 3d models, textures are assets that can be imported in the "assets" folder in the "Assets Browser" panel.
Let's create a "pbr" folder in the "assets" folder using the "Assets Browser" panel and import textures in it.
Let's create a "pbr" folder in the "assets" folder using the "Assets Browser" panel and import textures in it.
Here, 3 textures were imported:
- Albedo texture: the base color of the object.
- Normal texture: to simulate bump and dents on the object's surface. More information about bump mapping here
- Metallic texture: texture containing both the metallic value in the B channel and the roughness value in the G channel to keep better precision. Ambient occlusion can also be saved in R channel.
To master the meaning of those textures, refer to the Babylon.JS documentation.
In the "Inspector" panel, all the available slots for textures are shown in the "Material Textures" section. To assign a texture, just drag'n'drop the texture file from the "Assets Browser" panel to the slot in the inspector.
Once a texture is assigned, the slot is updated to show the preview of the texture and its potential properties to edit.
As an advanced user, you may want to edit the properties of a texture in a material, just click on the preview of the texture in the "Inspector" panel.
A new panel appears showing all the properties of the texture. Here you can edit the properties of the texture to fit your needs.
A new panel appears showing all the properties of the texture. Here you can edit the properties of the texture to fit your needs.
Tip: you can also drag'n'drop a texture file directly on a mesh in the "Preview" panel. The editor will ask for the slot where to assign the texture.
