Creating the Babylon.js Node Material
With Babylon.js v4.0, we took another large step toward great Physically-Based Rendering (PBR) support. The PBRMaterial now gives you a very realistic way to render your scenes.
But sometimes you may not be interested in photo realism for your scene. This is why we also support the ShaderMaterial, which allows you to write your own shader and unleash your creativity.
The one caveat to unlocking that power is that you need to know how to create shaders written in GLSL which limits our users without that experience. And this is the very reason why we decided to add a new material: The Node Material.
The Node Material
The Node Material is a new kind of material available for Babylon.js v4.1. It will let you create a new material by assembling its building blocks, or nodes, quickly and easily.
Here is an example (please consider this code as really early so everything may change multiple times before release):
As you can see, we are defining how the vertex and pixel shaders will behave by assembling nodes in the order we wish.
In the above example, we are multiplying two textures by a constant color and then applying a fog effect before writing the final pixel in the pixel shader.
This way we will be in control of everything related to the rendering of our meshes without having to learn GLSL. Furthermore, thanks to our library of predefined nodes, you will be able to reuse entire portions of the Babylon.js engine by just adding a new node (like lighting, fog, bones, etc…).
For instance, the Node Material should come with enough blocks to let you recreate the StandardMaterial and more.
The Node Material Editor
The Node Material by itself is powerful but pretty complicated to set up. This is why we will also ship a visual editor (inspired by the many node editors that are available in digital content creation tools) where you will be able to visually set up the node graph.
The graph editor is still under construction and the UI/UX design is not yet finished, but this early preview will give you an idea of what you will be able to do with it:
Again, please note that this is NOT the final design as we are currently working on the user interface and user experience for the editor.
The graph rendering is done by the wonderful STORM React Diagrams library.
You will be able to invoke the editor from the Inspector or directly using this code:
var nodeMaterial = new BABYLON.NodeMaterial("node", scene, { emitComments: true });nodeMaterial.edit();
More work to come
We still have a lot to do before we reach our quality bar for the feature. We believe this new creation method will enable all of our users to unleash the power of custom shaders in a user-friendly way. The Node Material Editor will also let you save your material into a JSON file or load a saved material allowing anyone to share their creation.
I will announce the availability of this new material on our forum as soon as it is ready for you to jump in and create.
In the meantime, feel free to follow the work using this GitHub issue.
