Applying node material editor shader to glb models

Questions
1

Hi everyone!

I have a generic question about the node material editor and applying the shader to a glb model. If we take the end result of the toon shader series (Create Your Own Toon Shader with Ba) and tweak it a bit to work in real environment…

The glb can also hold the pbr material. So when I import the glb model, I assume I have to replace the material with something else to work with the node material editor export? And maybe also do something with the textures? Can I used node material editor output somehow with pbr material? I wonder what my options here are and if someone could clarify what the best course of action is… Since I would want to have the same toon shader, for each and every glb model I import to Babylon.

Sorry if this question is obvious, I just can’t find any documentation of how I could achieve this :sweat_smile:

2

Yes, you will need to replace the material of your meshes loaded through the .glb file with the node material you want to use.

If you want to use some textures from the .glb file in your node material, you will need to do something like myNodeMat.getBlockByName("texture_block_name").texture = the_texture_loaded_from_glb.

1 Like
3

If I switch to node material, don’t I potentially lose some information from the pbr material?

Are there any playground examples of this process in general, where you use node material editor and then apply the shader to a glb model? I find the process of using node material editor results a bit hard, can’t find any good references to it except the ones that use the link to load the material. In real world case I would need to easily get the output of the editor and apply it to the code :thinking:

4

There’s no connection between a node material and a PBR material (PBRMaterial class), if you replace a material that was a PBRMaterial with a node material, then everything from your PBR material is “lost”, as you have replaced a material by another one.

However, you can create a PBR node material thanks to the PBRMetallicRoughness block (Node Material | Babylon.js Documentation).

Really, there’s no specific process. Once you have loaded your file, you simply need to replace the material of your mesh(es) by the node material: myMesh.material = myNodeMaterial.

You can do:

const myNodeMat =  await BABYLON.NodeMaterial.ParseFromSnippetAsync("#TG1FBI", scene);

to load a node material, which looks quite simple to me (you also have some methods to load from a .json file).

2 Likes
5

Hi again!

I have an additional question regarding to this… I made a small playground where I try to apply a node material to my glb mesh. I managed to switch the texture but something is off with it. I think the uvs are somehow messed up, any idea what is going on?

https://playground.babylonjs.com/#S7E00P#109

If you comment the line 27, you can see what the mesh/texture should look with the previous pbr material…

6

You reuse the same material for all meshes, you should clone it instead:

https://playground.babylonjs.com/#S7E00P#112

Also, you should convert the texture to “gamma space” in your node material (that’s what I did in the PG above) if you want the same display than with the regular PBR material. That’s because starting with 5.0 the glTF loader is using sRGB buffers for gamma spaced textures. Alternatively, you can disable using sRGB buffers:

https://playground.babylonjs.com/#S7E00P#113

1 Like
7

Thank you for your help! :pray: