#include directives in shader code output from Node Material Editor

Questions
2

The shader code generated by the NME can’t be used “as is”, you must at the very least bind the uniform and sampler variables with the right values.

In your example, u_world, u_viewProjection, u_Diffusecolor, etc must be bound with a value, else they are empty by default. Even the standard matrices must be, because, for eg, u_world is not the standard name used by Babylon, it is world instead. All those things (and much others) are done for you by the NodeMaterial class so you don’t have to worry about it.

Even then, it won’t still work because the ShaderMaterial class is a thin wrapper around raw shader code, and notably it does not deal with lights, even when adding the light declarations in the shader code like #include<__decl__lightFragment>[0..maxSimultaneousLights] and #include<lightFragment>[0..maxSimultaneousLights]. That’s because you still have to call some javascript code behind the scene to make those includes work.

As an exercise :slight_smile:, I updated your PG to make it work with the NME generated shader code. You can compare this PG with the previous one to see what have changed.

https://playground.babylonjs.com/#KR5FLI#6

The biggest change is that I had to override the BABYLON.ShaderMaterial.prototype.isReady method to make it handle lights. Note that my changes are not very clean, but it works (the ShaderMaterial class would need more reworking to handle lights cleanly).

As said, it was an exercise, the shader code generated by the NME is not really meant to be included in a ShaderMaterial afterwards… If what you are after is to be able to reuse a NME material in another one, I think some people are working to make this happen inside the NME itself (@Deltakosh will know more about this).

Regarding your other questions:

  • #include<lightFragmentDeclaration>[0..maxSimultaneousLights] means to inject maxSimultaneousLights times the content of the lightFragmentDeclaration.fx file, the first time replacing {X} by 0, then by 1, etc (look inside lightFragmentDeclaration.fx, you will see some {X} all over the places). maxSimultaneousLights is passed by the javascript code when creating the effect.
  • .fx extension is just the extension used in Babylon for files holding glsl code, but it has no meaning by itself (except maybe for some gulp processing that expects that glsl code are inside .fx files?)
2 Likes