Is it possible to create a material and save it as a single file and then apply it to the mesh?

Questions
1

Hi guys,

I am new in BabylonJS and I have just started experimenting with some examples.

I have a question regarding the materials. Is it possible to create materials as in Unity3D where you create a material, you set the shader and then you apply the textures ?
I need to create a material as a single file which can be applied directly to the mesh.
I need to store the materials to the mysql database and then retrieve them one by one and directly apply them to the meshes. So far I am just storing textures on the database and that works fine but instead of textures I want to store materials so I can apply the material to the mesh.

Does Babylon support such a feature to save material as a single file or is it possible to achieve this at all in a different way ?

Thank you in advance.

Regards,
Gerald

2

I would do this ->
create a file for your materials (in it you create your materials and define which textures and configure what each one must have).

Put it in the same js scripts folder. associate it with your index.html

and in your main script you can define the material you want for each ā€œknitā€ object you make.

box.material = ā€˜name of the materialā€™;

3

You can also create a ShaderMaterial which uses texts to create its shaders:
https://doc.babylonjs.com/how_to/shader_material

And thus you can save the shader texts in your DB.

Other option is to create a regular material and save it like that:

var savedMaterialText = JSON.stringify(material.serialize())

To reload it:

var newMaterial = BABYLON.Material.Parse(savedMaterialText, scene, urlToResources);
1 Like
4

This seems like a good workaround at the moment but I need to think about textures too. Because one material can have different textures such as the albedo, normal map, height map, etcā€¦Also, I need to store one material in a single file and not multiple materials in a single file. And the material file as well as textures should be stored in the database and then retrieved in order to be applied on the mesh.

Thanks for the help. :wink:

5

How can I set the textures for the ShaderMaterial and save it as a single file in the end ? Is it possible ?
If its possible then it would be the solution to my question.

Thanks for the help. :slightly_smiling_face:

6

Well you can save the image by rendering them to a canvas and then use HTMLCanvasElement.toBlob() - Web APIs | MDN

From there you can serialize the buffer (theorically :))

8

I am not sure if I am explaining myself right and what I actually need to achieve, but what I actually need is:

1- A database containing a bunch of different materials already stored in the database as blob files.
2- Some mesh objects inside a babylonJS scene which are configurable. This means that when I click over the mesh I send a request to mysql using the name of the mesh object and then retrieve the material based on the name of the mesh. After I retrieve the material for that mesh I just apply it over the mesh object.

I have achieved this using textures instead of materials. But now I need to have a bunch of different materials as blob files in the database instead of the textures.

Thanks for the help. :slightly_smiling_face:

9

sorry but I still do not get the question then :D. Materials host textures so I jsut do not get the point here :smiley:

10

Welcome to the forum from me. I may be wrong (I often am) but perhaps the confusion is over terminology, ie material and texture. Generally I have an understanding of what material and texture mean and how they relate but nothing specific enough to understand what you want to achieve and what material and texture might mean in Unity. (That does not mean other are in the same boat).

Would it be possible for you to give a brief description of what you mean by the objects material and texture. It might help.

11

Exactly, I know this. I just wanted to be sure cause I thought that babylonJS may have a different approach when it comes to materials. But now I think its the same logic that Unity3D is using.

Thanks :slight_smile:

1 Like
12

Ok glad all is fine then :smiley:

13

Thank you @JohnK,

I have a database where I have stored textures belonging to different materials such as wood, metal, plastic, etc. At the moment I am using just the albedo texture for each material, no normal maps, etc.
So I have a ā€˜materialsā€™ table on mysql database with fields such as ā€˜material_nameā€™ and ā€˜textureā€™ where I store the name and the png image of a particular material.

On the scene I have some 3D meshes and the thing is that when I click over these meshes I send a request on mysql database and then I retrieve the texture for that mesh that I clicked over and then I apply it to the material of that mesh.

I donā€™t know if you are familiar with Unity3D, but in Unity there is a .mat object which contains a shader and the textures set for that shader. And you can use this .mat object or file to apply the material over the mesh.

BabylonJS does not have a .mat file or object. In BabylonJS you use code to create the material as well as setting the texture for that material.

What I am trying to do is that I need to have a single file containing the shader and the texture in one file on the database. And my question was if this is possible or if there is a workaround for this.
So I want to change the whole material for that clicked mesh and not only the texture.

Thanks :slight_smile:

1 Like
14

Well then the serialization code of the material can make what you need. You can from a serialized material add the arraybuffers from the textures and store all of that in your db

Does it make sense?

15

In my case I need to prepare materials In Unity and not in BabylonJS. I dont know if its possible to export materials from Unity to BabylonJS.

I only need to use BabylonJS to get the materials from the database. So the materials should be prepared and stored in database from Unity and then retrieved on BabylonJS when I click over the mesh on the scene.

I hope you understand me. :smiley:

Thanks. :slight_smile:

16

Know nothing about Unity so maybe this can help Shader Materials (Unity exporter) - Babylon.js Documentation

More on Unity at Babylon.js Documentation

17

I do. But then as the material is stored into a json format it should not be too hard to store them in that format from unity

18

Thanks, Iā€™ll have a look now. :wink:

19

The thing is that BabylonJS might not be compatible with .shader and .mat files from Unity. Even if it did, I need to export only a single file from Unity which can be directly applied as a material to the mesh on BabylonJS. Only this way I might store the materials on the database and retrieve them as blob objects as I do with the textures now.
Anyway, I will take a look on the Unity Exporter and see if its possible to export materials as single files. If it does I just have to store the exported materials on the database and thatā€™s it.

Thanks, and I will let you know if I achieve anything. :slight_smile:

20

Hi @Deltakosh I try to serialize pbr material and parse to reload it but not work, Maybe my script wrong or itā€™s that bug

let groundMaterial = new BABYLON.StandardMaterial(ā€œgroundMaterialā€, this._scene);
groundMaterial.emissiveColor = new Color3(0, 1, 0);
var saveMat = JSON.stringify(groundMaterial.serialize());
var newMaterial = BABYLON.StandardMaterial.Parse(saveMat, this._scene, ā€œā€);

After Parse, I check the emissiveColor of newMaterial, but the value is (0,0,0),
Iā€™m use @babylonjs 4.1

21

Parse is expecting a json object, not a stringified json object:

https://playground.babylonjs.com/

2 Likes