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

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 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:

Early preview of the Node Material Editor

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

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.

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best.

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best.