# How to smooth normals useing NME?

**URL:** <https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918>\
**Category:** Questions\
**Tags:** lighting, material, normal\
**Created:** [May 31, 2022, 11:46am UTC](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918 "2022-05-31T11:46:00Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![simon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simon/32/45590_2.png) [@simon](https://forum.babylonjs.com/u/simon)\
**Post date:** [May 31, 2022, 11:46am UTC](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918/1 "2022-05-31T11:46:00Z")

</div>

Hello!

When we use an a displacement for vertex shader positions is changing but normals isn’t. For some cases i can get normal data like i did that here:

> **[Babylon.js Node Material Editor](https://nme.babylonjs.com/#8FC3D4%231)**
>
> Babylon.js Node material editor - shader-based materials editor for Babylon.js

But i don’ t know how i can smooth this normals. I think this is an important question because i faced with this too many cases and it can be an bottleneck for large spectre of shaders.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [May 31, 2022, 2:45pm UTC](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918/2 "2022-05-31T14:45:17Z")

</div>

I am not sure there is a nice trick here besides trying to generate the normals in the vertex. Maybe @PatrickRyan would know ?

---

<div class="post-metadata">

**Author:** ![simon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simon/32/45590_2.png) [@simon](https://forum.babylonjs.com/u/simon)\
**Post date:** [May 31, 2022, 3:22pm UTC](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918/3 "2022-05-31T15:22:36Z")

</div>

I think recalculate normals is not a big problem (for flat surfaces). But smoothing is the question for wich i’m not find an answer. The result that i got in preview of this material demo is sooo close to result that i have to achieve but sharpy faces just destroy my minds about material that i want

Here is the recalculation part of shader:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/a/f/af0ff6b7c274170bd455ee01ba70fabf81cfff16.png)

---

<div class="post-metadata">

**Author:** ![PatrickRyan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrickryan/32/3417_2.png) [@PatrickRyan](https://forum.babylonjs.com/u/PatrickRyan)\
**Post date:** [May 31, 2022, 5:26pm UTC](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918/4 "2022-05-31T17:26:26Z")

</div>

Maybe this tutorial [How to Calculate Shader Graph Normals - Game Dev Bill](https://gamedevbill.com/shader-graph-normal-calculation/) may help. The article uses shader graph, but you should be able to recreate in NME and/or recreate in NME through translating the code. This isn’t something I do a lot of so I don’t have any tried and true methods.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 31, 2022, 7:14pm UTC](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918/5 "2022-05-31T19:14:38Z")

</div>

You can also have a look here: [Calculating vertex normals after displacement in the vertex shader - Resources - three.js forum](https://discourse.threejs.org/t/calculating-vertex-normals-after-displacement-in-the-vertex-shader/16989)

Here’s an example PG using a custom material, as implementing it in a node material is a little more involved:

> **[Babylon.js Playground](https://playground.babylonjs.com/#J9PV7T%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![simon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simon/32/45590_2.png) [@simon](https://forum.babylonjs.com/u/simon)\
**Post date:** [May 31, 2022, 8:12pm UTC](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918/6 "2022-05-31T20:12:50Z")

</div>

Thank you guys!

I’ll check your replays tomorrow!

---

<div class="post-metadata">

**Author:** ![simon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simon/32/45590_2.png) [@simon](https://forum.babylonjs.com/u/simon)\
**Post date:** [June 1, 2022, 1:38pm UTC](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918/7 "2022-06-01T13:38:02Z")

</div>

I try to use your way in NME but…I just don’ t know what i do wrong…I hadput nodes to frames with accordance to your script for better navigation. Would you may to check this please?

> **[Babylon.js Node Material Editor](https://nme.babylonjs.com/#8FC3D4%232)**
>
> Babylon.js Node material editor - shader-based materials editor for Babylon.js

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [June 1, 2022, 3:35pm UTC](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918/8 "2022-06-01T15:35:27Z")

</div>

Your computations of `displacedNeighbour1/2` is wrong in the NME, you should apply the `displace` transformation to `neighbour1/2`, not do `neighbour1/2 + displacedPosition`.

This seems to do it:

> **[Babylon.js Node Material Editor](https://nme.babylonjs.com/#8FC3D4%235)**
>
> Babylon.js Node material editor - shader-based materials editor for Babylon.js

Note that I had to use an elbow node to connect the output of the (final) normal vector merger block to the transform block (to compute the world normal), directly connecting both would not work for some reasons…

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [June 1, 2022, 3:52pm UTC](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918/9 "2022-06-01T15:52:14Z")

</div>



---

<div class="post-metadata">

**Author:** ![simon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/simon/32/45590_2.png) [@simon](https://forum.babylonjs.com/u/simon)\
**Post date:** [June 1, 2022, 4:13pm UTC](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918/10 "2022-06-01T16:13:55Z")

</div>

Thank you soo much you are helped me a lot!!!

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [June 1, 2022, 4:41pm UTC](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918/11 "2022-06-01T16:41:37Z")

</div>

PR up for the connection issue, it should have shown an error dialog but it wasn’t showing: [Fix NME dialog box styling by carolhmj · Pull Request #12624 · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/pull/12624)

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [June 2, 2022, 6:54pm UTC](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918/12 "2022-06-02T18:54:12Z")

</div>


