Cleanest way of using a custom shader from the node editor

Questions
1

I’d like to know the best way of using a custom shader created in the babylon node editor (https://nme.babylonjs.com/).

When pressing Generate Code I get javascript I can just copy and paste into the playground or my project and this seems to be the method used in all the tutorials I found, however I find this really hard to manage and dirty in a big project. It would also seem to me that running all that code would be more resource intensive than just using glsl straight up.

When pressing Export Shader I get glsl which is great, but how do you use this in your code?
When using the code from the example here https://www.babylonjs-playground.com/#1OH09K#131 it runs just fine in my project, but the output from the node editor comes in a different form. This again is somewhat dirty and hard to manage.

I’d like to have the shader code in a separate file and only call on it with a few lines whenever I need to create the material. I tried this method which was mentioned in the docs, but the material just doesn’t display at all. There are no error messages either.
This is the shader I divided into two different files (Babylon.js Node Material Editor)

image
image1032×178 19.8 KB

2

See end of the doc about the NME: https://doc.babylonjs.com/how_to/node_material

nodeMaterial.loadAsync("file-url.json").then(() => {
    nodeMaterial.build(true);
});

You generate the .json file by hitting the “Save” button in the NME.

2 Likes
3

Thank you for the reply.
This is working great!

However is there also a way to not use a node material but use the glsl output you get from the node editor and use that from an external file rather than pasting it right somewhere into your code ?

The reason I’m asking is that I don’t know much about shaders and we’ll ask someone for help. However I highly doubt there’s someone who knows much about Babylon or the node editor, so they might be more comfortable with writing raw glsl. So it would help if they could still modify the shader code by hand after spitting it out from the node editor or just write it raw from the get go.

4

You can use ShaderMaterial - Babylon.js Documentation with the glsl output.

https://doc.babylonjs.com/playground/?code=shadermaterial

5

Must claim all uniforms used in the shader program, and supply values before a draw; manually

var shaderMaterial = new BABYLON.ShaderMaterial(..
  uniforms: [ .., 'u_color', 'u_color1', 'u_Time' ] // <-- your shader has them
});

shaderMaterial.onBindObservable.add(() => {
   // set uniforms here 
});