What’s new for Node Material in Babylon.js v5.0

Among all the code I poured inside Babylon, I have to admit that the Node Material and its editor are among my favorites.

For v5.0, we are continuing our investment and added new features that I want to detail a bit here.

ConditionalBlock

This was an ask from the community since the inception of the Node Material :)

It is now possible to use conditional operators within the graph to return values based on logical operations (And, Or, Xor, Equal, Greater or Equal, Less, Less or Equal, Greater, Not).

Example of a And logical test

CloudBlock

The CloudBlock is a new block to let you generate fractal brownian motion clouds:

A typical use of the CloudBlock

The output looks like clouds (hence the name!!):

A clouded cube

Custom blocks

Custom blocks are a new AMAZING concept that was brought to us by our incredible community.

In a nutshell, the custom blocks let you add your own glSL code inside the graph opening the door to limitless experiments.

This link will show you a custom Perlin 2D node.

To produce that new block, the user had to write the following declaration:

A custom block declaration

The really good part about it is that you can also add that file to your toolset:

A NME toolbar with 2 additional custom blocks

By the way, if you are creating your own blocks, please feel free to share them with the community on our forum and consider adding them to our growing Node Material Asset Repo.

ImageSource

The ImageSource is a new block introduced to let the developers reuse texture content with multiple TextureBlocks (samplers).

So instead of loading the texture twice (once per each TextureBlock), you now have the opportunity to set the TextureBlock’s source to an ImageSource.

Using an ImageSource to share resources between 2 TextureBlocks

Swizzling support

Swizzling is the capacity we have in shader to remix the vectors’ channels.

For instance instead of always reading vector.xyz, it is possible to ‘swizzle’ it and instead read vector.yzx or even vector.xxx.

This capacity is now accessible on the VectorMerger and the ColorMerger

A VectorMerger with its swizzles setup (the vector will be read as vector.yyxx)

ElbowBlock

Even though this one is purely cosmetic, I have to admit I love it deeply.

The ElbowNode does nothing. Literally. It is simply here to let you organize the flow between nodes in the way you want.

It is all about fashion!

Two elbows used to clean and control the graph visual flow

And many more…

These examples are only the one I personally picked. We added even more features and fixes for the Node Material (support for Scene depth, material alpha, clip planes, parallax occlusion, etc…).

Feel free to look at the NME section of our what’s new to get an extensive list of all these new features and fixes.

David ‘deltakosh’ Catuhe
Deltakosh (@deltakosh) / Twitter