# Recompute normals after displacement map been applied

**URL:** <https://forum.babylonjs.com/t/recompute-normals-after-displacement-map-been-applied/37287>\
**Category:** Questions\
**Created:** [January 11, 2023, 7:52pm UTC](https://forum.babylonjs.com/t/recompute-normals-after-displacement-map-been-applied/37287 "2023-01-11T19:52:57Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\
**Post date:** [January 11, 2023, 7:52pm UTC](https://forum.babylonjs.com/t/recompute-normals-after-displacement-map-been-applied/37287/1 "2023-01-11T19:52:57Z")

</div>

Hey folks,

Just wondering how to re-compute normals after a displacement textures been applied?

This is PG:

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

I couldn’t figure out how to get the new vertices position after displacement distortion happened.

These are my references:

- [Updating Vertices | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/custom/updatingVertices)
- [How can i make mesh surface smooth?](https://forum.babylonjs.com/t/how-can-i-make-mesh-surface-smooth/30869)
- [How to smooth normals useing NME?](https://forum.babylonjs.com/t/how-to-smooth-normals-useing-nme/30918)

Many thanks!  
Tawibox

---

<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:** [January 12, 2023, 7:31am UTC](https://forum.babylonjs.com/t/recompute-normals-after-displacement-map-been-applied/37287/2 "2023-01-12T07:31:27Z")

</div>

After the displacement map has been applied, the `mesh.getVerticesData("position")` and `mesh.getVerticesData("normal")` will retrieve the updated positions and normals in local space.

In your PG, you apply a rotation to the mesh, so if you want that `showNormals` shows the correct normals, you should transform the positions and normals by the mesh transformation matrix. Or, easier, just make the source mesh parent of the `LineMesh` so that the latter inherits the mesh transformation.

---

<div class="post-metadata">

**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\
**Post date:** [January 24, 2023, 7:45am UTC](https://forum.babylonjs.com/t/recompute-normals-after-displacement-map-been-applied/37287/3 "2023-01-24T07:45:35Z")

</div>

Hey @Evgeni_Popov thank you very much for the reply.

Can you please provide a playground example of recomputing normals? I have been tried in the past few days and couldn’t get a correct result.

Many thanks  
Tawibox

---

<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:** [January 24, 2023, 10:08am UTC](https://forum.babylonjs.com/t/recompute-normals-after-displacement-map-been-applied/37287/4 "2023-01-24T10:08:21Z")

</div>

Sure:

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

---

<div class="post-metadata">

**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\
**Post date:** [January 24, 2023, 4:41pm UTC](https://forum.babylonjs.com/t/recompute-normals-after-displacement-map-been-applied/37287/5 "2023-01-24T16:41:40Z")

</div>

@Evgeni_Popov Thanks for the response!

In your example the normals still not look right. I printed out `meshPositions`, and found no matter you apply a displacement texture or not (toggle line 24) the `meshPosition` prints out the exact same values. So my understanding is `mySphere.getVerticesData(BABYLON.VertexBuffer.PositionKind);` didn’t get the updated vertex positions after displacement.

Also, the `showNormals` function seems using the same approach to get the vert positions. So this may explain why the normal visualizer is not showing the updated normal either.

Please see my PG:

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

Am I understand it correctly? Is there a way to get updated mesh info after displacement?

Many thanks!  
Tawibox

---

<div class="post-metadata">

**Author:** ![SvenFrankson](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/svenfrankson/32/29446_2.png) [@SvenFrankson](https://forum.babylonjs.com/u/SvenFrankson)\
**Post date:** [January 24, 2023, 5:04pm UTC](https://forum.babylonjs.com/t/recompute-normals-after-displacement-map-been-applied/37287/9 "2023-01-24T17:04:02Z")

</div>

I think the issue comes from the fact “applyDisplacementMap” is asynchronous - it needs to load the texture-, so you need to wait for it to complete before doing the RecomputeNormals step, which is why there’s a “callback” parameter.

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

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [January 24, 2023, 5:07pm UTC](https://forum.babylonjs.com/t/recompute-normals-after-displacement-map-been-applied/37287/10 "2023-01-24T17:07:14Z")

</div>

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

Its a timing thing. Wait till after the matrix of the mesh has been updated after the displacement and then you should be good, or use the callback to compute the normals after the displacement has fully been applied.

^^^ hahah dude beat me to it… nice @SvenFrankson

---

<div class="post-metadata">

**Author:** ![tawibox](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tawibox/32/22881_2.png) [@tawibox](https://forum.babylonjs.com/u/tawibox)\
**Post date:** [January 24, 2023, 5:29pm UTC](https://forum.babylonjs.com/t/recompute-normals-after-displacement-map-been-applied/37287/11 "2023-01-24T17:29:51Z")

</div>

@SvenFrankson @Pryme8 aha!! gotcha. Thanks a lot folks! This all makes sense now. Really need to spend time learning javascript foundation better now 😀

Many thanks again.  
Tawibox
