# How to smoothen Mesh created with VertexData

**URL:** <https://forum.babylonjs.com/t/how-to-smoothen-mesh-created-with-vertexdata/30921>\
**Category:** Questions\
**Created:** [May 31, 2022, 12:50pm UTC](https://forum.babylonjs.com/t/how-to-smoothen-mesh-created-with-vertexdata/30921 "2022-05-31T12:50:19Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![vladmandic](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladmandic/32/21473_2.png) [@vladmandic](https://forum.babylonjs.com/u/vladmandic)\
**Post date:** [May 31, 2022, 12:50pm UTC](https://forum.babylonjs.com/t/how-to-smoothen-mesh-created-with-vertexdata/30921/1 "2022-05-31T12:50:19Z")

</div>

I have a mesh with UV map resembling a face and updating vertex data positions as needed - and this works perfectly

Question is how would you make this look “smoother” (e.g. increase number of indices)

I’ve looked at `increaseVertices` method, but then the new number of vertices will not match updated data (Invalid typed array length in `Geometry.getVerticesData`)

```nohighlight
// create once
const mesh = new Mesh('face', scene);
const vertexData = new VertexData();
vertexData.positions = positions; // updated data
vertexData.indices = faceTriangulation; // predefined
vertexData.uvs = faceUVMap.flat(); // predefined
vertexData.applyToMesh(mesh, true);

// runs in update loop
mesh.setVerticesData(VertexBuffer.PositionKind, positions, true);

```

(idea with increasing number of indices is just an idea, I’m open to any other approach as well)

Example output:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/9/c9887309c3a516daee0488f529b1107a5b304344.jpeg)

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [May 31, 2022, 1:14pm UTC](https://forum.babylonjs.com/t/how-to-smoothen-mesh-created-with-vertexdata/30921/2 "2022-05-31T13:14:58Z")

</div>

There is another reason _increasedVertices_ will not work for you. For a given facet the extra vertices will still lie in the plane of the facet and so will not add any curvature.

Out of interest try forceSharedVertices

> **[Forcing Shared Vertices | Babylon.js Documentation](https://doc.babylonjs.com/toolsAndResources/utilities/Minimise_Vertices)**
>
> Helpful code snippet for forcing mesh to share vertices in Babylon.js.

and see if you get smoother results.

---

<div class="post-metadata">

**Author:** ![vladmandic](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladmandic/32/21473_2.png) [@vladmandic](https://forum.babylonjs.com/u/vladmandic)\
**Post date:** [May 31, 2022, 1:41pm UTC](https://forum.babylonjs.com/t/how-to-smoothen-mesh-created-with-vertexdata/30921/3 "2022-05-31T13:41:22Z")

</div>

good point on `increasedVertices`

anyhow, i cannot get any of the methods to work: `increaseVertices()`, `forceSharedVertices()`, `convertToFlatShadedMesh()` - they all result in the same error: `Invalid typed array length in Geometry.getVerticesData`

just toying around, only method that does work is `convertToUnIndexedMesh` which results in hilarious output:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/b/eba01a8d5ddbfda0c42b26165213e032e779e19f.jpeg)

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [May 31, 2022, 1:59pm UTC](https://forum.babylonjs.com/t/how-to-smoothen-mesh-created-with-vertexdata/30921/4 "2022-05-31T13:59:46Z")

</div>

Would it be possible to import your face mesh into a playground?

> **[Using External Assets In the Playground | Babylon.js Documentation](https://doc.babylonjs.com/toolsAndResources/tools/playground/externalPGAssets)**
>
> Learn how to use external assets in the playground in Babylon.js.

I wonder if there is something in the construction of the face that does not match the expected mapping of facet, vertices, indices by the applied functions?

---

<div class="post-metadata">

**Author:** ![vladmandic](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladmandic/32/21473_2.png) [@vladmandic](https://forum.babylonjs.com/u/vladmandic)\
**Post date:** [May 31, 2022, 2:50pm UTC](https://forum.babylonjs.com/t/how-to-smoothen-mesh-created-with-vertexdata/30921/5 "2022-05-31T14:50:21Z")

</div>

> I wonder if there is something in the construction of the face that does not match the expected mapping of facet, vertices, indices by the applied functions?

Ahhh, yesss - `positions` array had few extra points (eye iris definitions) which were not accounted for in `uvs`.  
Everything works even with mismatch _until_ I try to apply a method like `forceSharedVertices` and then if errors out.

Removed the extra points and now after applying `forceSharedVertices` it looks exactly like i wanted!

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/e/5e4f01fcb4aa4acabc058b1ce863aa6756326299.jpeg)

But…How do I update positions now?

Calling `mesh.setVerticesData(VertexBuffer.PositionKind, positions, true)`  
in a loop after `forceSharedVertices` has been called results in error as vertex count no longer matches.

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [May 31, 2022, 3:21pm UTC](https://forum.babylonjs.com/t/how-to-smoothen-mesh-created-with-vertexdata/30921/6 "2022-05-31T15:21:04Z")

</div>

Without seeing your code it is impossible to see how you are handling things. At a guess use

```javascript
smooth = mesh.forceSharedVertices()

```

Then read positions from smooth and then update smooth in your loop.

Sorry but will not now be available for a day or two.

---

<div class="post-metadata">

**Author:** ![vladmandic](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladmandic/32/21473_2.png) [@vladmandic](https://forum.babylonjs.com/u/vladmandic)\
**Post date:** [May 31, 2022, 3:46pm UTC](https://forum.babylonjs.com/t/how-to-smoothen-mesh-created-with-vertexdata/30921/7 "2022-05-31T15:46:29Z")

</div>

From what I can see, `mesh.forceSharedVertices()` sometimes (not always) changes number of indices - `mesh.getTotalVertices()` returns smaller number than original.

Which means calling `mesh.updateVerticesData(VertexBuffer.PositionKind, positions)` after vertices size gets reduced will result in error as array sizes do not match.

---

<div class="post-metadata">

**Author:** ![vladmandic](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladmandic/32/21473_2.png) [@vladmandic](https://forum.babylonjs.com/u/vladmandic)\
**Post date:** [May 31, 2022, 4:16pm UTC](https://forum.babylonjs.com/t/how-to-smoothen-mesh-created-with-vertexdata/30921/8 "2022-05-31T16:16:19Z")

</div>

Ok, I think I got it - instead of using `mesh.forceSharedVertices()` which may change number of vertices and cause problems, I can get same effect by manually calculating normals when creating initial `VertexData`

```nohighlight
    vertexData= new VertexData();
    vertexData.positions = positions;
    vertexData.indices = faceTriangulation;
    vertexData.uvs = faceUVMap.flat();
    if (smooth) {
      const normals: number[] = [];
      VertexData.ComputeNormals(positions, faceTriangulation, normals);
      vertexData.normals = normals;
    } else {
      vertexData.normals = null;
    }
    vertexData.applyToMesh(mesh, true);

```

And with this approach, there are no issues with subsequent updates using `mesh.updateVerticesData(...)`