Apply material to mesh

Hello,

I am new in Babylon, and I am little confuse of the workflow. I saw a lot of video tutorials, but I didn’t find how to resolve this question.

I use 3d max to create the meshes, and at the moment, I use the 3d max material editor to create the materials and export the model to glb. Works fine. The problem is using the 3d max material editor, I have some limitations (for exemple I want to combine two normals maps in a one material), so I started to use the Babylon editor material. I don’t have any problems, I can create the materials as I want.

The problem is here, I have the mesh created in 3d max, and I have the material created in the babylon editor material, and I don’t know how to apply this material to the mesh and export to glb.

I explored playground and sandbox but I don’t find the solution, and I think it should be very easy to do…but not for me :smiley:

Anyone can tell me what is the workflow to do it?

Thank you very much

Hi and welcome!

After loading the model you can apply the material to it. but it depends on the structure of your model. Want to reproduce this on the playground so we can help you?

1 Like

Hi RaananW,

First all thank you for your help.

I try to explain my workflow. I don’t use babylon playground, I use the sandbox because is very easy to load a glb (previously exported from 3d max). I explored the playground a few days ago, but I don’t see the way to import directly a glb as the babylon sandbox.

So if I understand, through sandbox is not possible to apply a material previously created in babylon editor material?

It will be good if I can do it with Sandbox, because I saw how to modify a lot features of the mesh or material and I can export in glb format.

3 Likes

I saw this video but don’t explain how to load a glb from my computer to the playground, or I didn’t see it.

To access them on playground, upload .glb-files to i.e. GitHub (public accessible) and put link into rootUrl-parameter (+ filename) of ImportMesh.

To start off, you can use this playground:

1 Like

This is the problem, I need to upload to git-hub I don’t want to do it. Isn’t there any other way?

You can use dropbox if you have this. You can get a free account dropbox.
Alternatively you can set-up a local environment but it takes a bit more effort and you will not be able to share your PG. Opening either a Github or dropbox account is ez and free. I would advise you to choose from one of these. Or one of the other secure sources listed in the doc, as per the link shared above by @JohnK . The problem here is that the browser is requesting for a ‘secure’ source (part of CORS policies). This is actually not a restriction from Babylon.js. We just have to do with it.
Meanwhile, have a great day :sunglasses:

4 Likes

Hi again,

I had to park this task for a lot of time, but I came back.

Takemura, I used your link and I could to load the glb but the problem that I have now is how to apply the material created with Babylon editor material? I mean the json file. I don’t see the way to do it.

Thanks

Hi,
I have no XP with the material editor, it might have a parse from json method (same as the GUI editor) but else, I suppose you can load it like any json - from script using fetch method should work.

First import the json file of all materials:

var loadJSON = async function () {
const loadedJSON = await (await fetch(“path/filename.json”)).json();
}

Once done, simply apply material to mesh:

mesh.material = mymat;

1 Like

@neo14 would be great if you could share your current progress in the playground

1 Like

Sorry but I can’t share it because it is not a personal work. The only I can do is describe it. I used the link that Takemura share with me and change the link where download the mesh. This step works fine. For other side I have a json file (the material created in Babylon Editor) and the only I want is apply to the mesh.
Maybe for you is easy this step but I don’t understand why is the reason to make it so complicated.
I am not a programmer, I am a 3d artist, and the reason to use babylon material editor is because I have more options and power to make materials than in 3d max (as you know the babylon exporter in 3d max has some limitations with materials)

So if I understand, I have to load the json file in the same place where the mesh is located, I mean online place like dropbox or google drive, I can’t use it in local.

I’m still not sure of what is ‘babylon material editor’ to you. Is it from the community editor or are you talking about NME (the node material editor)? If it’s NME you are using, there’s a method to ‘parse from snippet’ which does not require you to feed from external. This method works in PG and sandbox as it comes from the bjs servers. Any other script or asset you would want to load in sandbox or playground needs to comply with the ‘reliable sources’ or it will blocked.

Else, you can set-up a local environment. You will have to allow local in your browser. But then, of course you’re not in the sandbox anymore. You will need to do everything from script, save your local and refresh it in browser to see the changes. Honestly, since you already have an online reliable source for your assets, I’d say ‘yes’, don’t bother going local (unless you have problems with your Internet). Create a folder named i.e. ‘scripts’ in your dropbox or drive and feed all external scripts from there.

1 Like

Ok I try explain me better. I work with 3d max to make the meshes and the materials to export with babylon exporter in GLB format. This is my currently worklow.
You are right when you talk about the node material editor. I had exploring it and I made some PBR materials. The idea to use NME is that bring me more options to create the materials than 3d max material editor, as you know or maybe not, when you export glb from 3d max there are some limitations with the materials.
So the only I want to do is create the meshes from 3d max and materials from NME and apply this material and export to glb or gltf.
Throught sandbox I can’t apply the materials previously created in the NME and I would like to find the easiest solution to do it.

Thanks for your help

You can do it through the inspector in the sandbox but this is not the most convenient workflow, How are you planing to share them after with your customers?

Let me add @PatrickRyan our amazing in house artist as I bet he has some playground samples mixing nme and gltf ?

1 Like

@neo14, I agree with @sebavan that using the sandbox to apply a node material is not the most painless path to take. This is because the sandbox is a debug tool, so every time you open it, you will have to set it up again. But the process to use a node material in the sandbox is as follows.

  1. Set up your node material and save the json to disk. If you have a snippet you want to use, open that snippet and save it to disk.

  2. load your model in the sandbox

  3. open the inspector and right click on the Materials category in the scene explorer. Choose Add new node material
    image

  4. click on the edit icon (pencil) next to the new node material
    image

  5. In the node material editor, click on Load and select your json file. This will load your shader into the editor and replace the default node material with your custom material.
    image

  6. Click on the mesh you want to assign your node material to and find active material in the inspector. Click on the select box and choose node material to assign your new node material.
    image

If you have exposed properties from your node material, you will find those under the material properties section where you can change and/or edit them. However, if you have properties that need to be driven by code, this isn’t the best place to test your material as the sandbox can’t drive any custom code.

If you want a simple example to load a mesh and assign a node material in a playground, here is one that loads a single mesh and node material, builds the material, and then assigns it to the mesh. You don’t need to pay attention to the unique setup that this mesh and/or node material have, you can just copy and paste this whole playground and change the URL of the glTF loaded to your file’s glTF and the same with your node material. When using the playground, you do need to make your mesh and node material available online, but it gives you an opportunity to share the PG with others as well.

If you don’t want to make the assets available online, however, you will likely want to build a local environment for yourself. You can make it simple plug and play using local assets and a local server, so you can go a long way with testing and iterating on assets without losing time to setting up the sandbox each time. If you are interested in a way to do that, I am working on some documentation aimed at people starting with Babylon to get them off the ground with a local project with minimal setup. If you would like I can share the link to the docs once they are up. It does take a little work in VSCode, but it is really a short step-by-step guide to get you up and running inside 10 minutes. I’ve been an artist all my career, I understand how complicated it can seem to need to open VSCode to do something when you are used to digital content creation tools. But I will say that I’ve tried to make this as easy as possible for someone new to Babylon to get up and running.

4 Likes

At the end I need to delivery a glb (usually) or maybe in the future a gltf with the mesh and the material applied

Thank you very much PatrickRyan for your response and your understanding from an artist’s point of view, I will try everything you explain to me.

As I told sebavan, I have to deliver a glb that includes the mesh with the material.

My current workflow is to make the mesh and material with 3d max, but sometimes the limitations with 3d max materials are annoying. The limitations are not from 3d max, the problem is the babylon exporter. Maybe in the future these limitations will disappear, but now I have to find a solution to jump these limitations.

Edit: If I understand, through Sandbox, I can apply the json file (material) to the mesh, but after do that, can I save this in a glb file? For your words I think the answer is not.

The strange is, in Sandbox, there is the button Export to GLB, so which is its function? I mean, if I make some changes in Sandbox, I apply a node material, etc…and export with this button, Shouldn’t it keep the changes?

export to glb does not mean everything is supported by the spec and unfortunately custom materials for instance are not supported. Only PBR with their defined extensions is possible.

2 Likes