Using exported script from Node material editor for Threejs and WebGL experiences

[Paddy200795]

Hey Guys,

I’m a non coder and have just stumbled onto Babylon.js’s NME. I was wondering if the exported code could be used in Three.js and React projects? Or does the exported script need to be modified further?

Thanks for you time!

Regards,
Paddy

[Evgeni_Popov]

Welcome aboard!

The exported shader code could be used in Three.js in theory but you should definitely need to be able to code, as you will at the very least need to bind the attributes/uniforms with their right values.

See this post on how it can be done in Babylon (which is not straightforward when you want to handle lights):

#include directives in shader code output from Node Material Editor

The shader code generated by the NME can’t be used “as is”, you must at the very least bind the uniform and sampler variables with the right values. In your example, u_world, u_viewProjection, u_Diffusecolor, etc must be bound with a value, else they are empty by default. Even the standard matrices must be, because, for eg, u_world is not the standard name used by Babylon, it is world instead. All those things (and much others) are done for you by the NodeMaterial class so you don’t have to wor…

[Paddy200795]

Hey! I’ll definitely look into this. Thanks for the help!

[Paddy200795]

Hey Evgeni!
I tested the default node setup for a shader (flat shaded) in a shader preview. I went through the article, but is there a way I can convert the include function into something that can be used for webGL?

[Evgeni_Popov]

All the shader includes can be found in the source code repo here:

BabylonJS/Babylon.js