Babylon.js Node Material example

nodeMaterial.js

// Create the material
var nodeMaterial = new BABYLON.NodeMaterial("node", scene, { emitComments: true });

// Vertex
// First we need the position of the vertex
var positionInput = new BABYLON.InputBlock("position");
positionInput.setAsAttribute("position");

// Then we need to compute the world version of it using the World matrix
var worldInput = new BABYLON.InputBlock("world");
worldInput.setAsWellKnownValue(BABYLON.NodeMaterialWellKnownValues.World);

var worldPos = new BABYLON.Vector4TransformBlock("worldPos");
positionInput.connectTo(worldPos);
worldInput.connectTo(worldPos);

// Same for the normal
var normalInput = new BABYLON.InputBlock("normal");
normalInput.setAsAttribute("normal");
var worldNormal = new BABYLON.Vector4TransformBlock("worldNormal");
normalInput.connectTo(worldNormal);
worldInput.connectTo(worldNormal);

// The vertex shader is supposed to generate the projected position so we need to multiply world by viewProjection matrix
var viewProjectionInput = new BABYLON.InputBlock("viewProjection");
viewProjectionInput.setAsWellKnownValue(BABYLON.NodeMaterialWellKnownValues.ViewProjection);
var worldPosdMultipliedByViewProjection = new BABYLON.Vector4TransformBlock("worldPos * viewProjectionTransform");
worldPos.connectTo(worldPosdMultipliedByViewProjection);
viewProjectionInput.connectTo(worldPosdMultipliedByViewProjection);

// This is the block responsible for the final vertex output
var vertexOutput = new BABYLON.VertexOutputBlock("vertexOutput");
worldPosdMultipliedByViewProjection.connectTo(vertexOutput);


// Pixel
// Let's start with a user defined color
var colorInput = new BABYLON.InputBlock("color");
colorInput.value = new BABYLON.Color4(1, 0, 0, 1);

// That we will multiply by a texture
var colorMultiplier = new BABYLON.MultiplyBlock("color multiplier");

var diffuseTextureBlock = new BABYLON.TextureBlock("diffuseTexture");
diffuseTextureBlock.texture = new BABYLON.Texture("/playground/textures/bloc.jpg");
diffuseTextureBlock.connectTo(colorMultiplier);
// Let's get a second texture
var diffuse2TextureBlock = new BABYLON.TextureBlock("diffuseTexture2");
diffuse2TextureBlock.texture = new BABYLON.Texture("/playground/textures/crate.png");
diffuse2TextureBlock.connectTo(colorMultiplier);
// And let's multiply everything
var colorMultiplier2 = new BABYLON.MultiplyBlock("color multiplier2");
colorMultiplier.connectTo(colorMultiplier2);
colorInput.connectTo(colorMultiplier2);

// What about some fog?
var fog = new BABYLON.FogBlock("fog");

worldPos.connectTo(fog);
colorMultiplier2.connectTo(fog);

// And finally the pixel output
var pixelOutput = new BABYLON.FragmentOutputBlock("pixelOutput");
fog.connectTo(pixelOutput);

// Add nodes to the material
nodeMaterial.addOutputNode(vertexOutput);
nodeMaterial.addOutputNode(pixelOutput);

// And build it
nodeMaterial.build(true);