NME: vertex shader normals

First of all: thank you for an absolutely outstanding project, documentation and community around babylonjs - it is such a delight to experience such a wealth of information and helpful people all around.

I have followed Jason’s “Node Material Editor: Vertex Shader” youtube video and would like to know if anyone can help me in the right direction with regards to this:

It seems that normals are not calculated for the vertices when they are calculated as demonstrated in the youtube video. What I mean is - the waves displayed in the video are not individually affected by lighting which leads me to think that they need to have normals recalculated.

I should say that I am somewhat mathematically challenged so I may be wrong.

How would one go about solving this and can it be done within the Node Material Editor?

Thank you very much in advance for any help you may be able to provide.

Welcome aboard!

The waves are not affected by lighting because it’s a direct color which is used as the fragment output, the Lights block is not used.

Here’s an updated material which is using the Lights block:
https://nme.babylonjs.com/#QPRJU9#28

The normal can be computed by taking the x/y derivatives of the world position and by taking the cross product of both.

2 Likes

This is amazing - this was exactly the response I was hoping for - thank you so much :smiley:

I am having a lot of funt with the Node Material Editor and I have managed to come up with a crude representation of a planet:

https://nme.babylonjs.com/#N2NTNH#5

The surface of the planet is made by using a texture to calculate the height of each vertex.

As You can see it’s not smoothly shaded. Please forgive my lacking math skills but I think it may be that each normal calculation does the surface normal as opposed to the normal for each vertex.

If so so my questions are these:

  • would it be possible to achieve smooth shading across the spehere from within the NME?
  • would it be possible to achieve it with the fragment shader to get per pixel lighting?

If this is not the case i’d appreciate being corrected :slight_smile:

A final question is - could this material be applied to an isosphere?

Thank you very much in advance for any assistance You may be able to provide.

1 Like

It’s not smooth because the lookup in the texture is done in the vertex shader, so the normal is computed per vertex and interpolated. You need to make the computation happen in the fragment shader to have a smooth shading.

To do that, you can duplicate your main block and use it to compute the normal: as the output is connected to the Light block, the computation will be done in the fragment shader:

https://nme.babylonjs.com/#N2NTNH#6

You can apply this material to any mesh (did you actually meant icosphere?). You can use BABYLON.NodeMaterial.ParseFromSnippetAsync to parse a node material.

4 Likes

Thank you so much once again - this is fantastic. I am so excited, lol :slight_smile:

And yes - I did mean icosphere.

Best regards.