Ribbon - Increase Vertices Error

Questions
1

island1.PNG
island1.PNG1775×1088 582 KB

I successfully implemented a Hex Terrain System for my Game. I do not render Hex Cells where I want to place mountains. The Hex Tiles have very few faces and I don’t want my mountains in hex form. My idea would be to fill up those holes which a new mesh, increase the vertices, and apply a heightmap. I collected the vertices of the hex tiles next to the mountain “holes” → use them as a path and create the mesh (which will be the mountain ground). I found the ribbon mesh can do what I wanted. First I tried with the Polygon Builder… but this doesn’t seem to take in 3D Points.

for (let i = 0; i < cell.mountainPath.length / 2; i++) {
      if (cell.mountainPath[i] && cell.mountainPath[i].vertices) {
        cell.mountainPath[i].vertices.forEach(element => {
          tmp1.push(element);

        });
      }
    }

    for (let e = cell.mountainPath.length / 2; e < cell.mountainPath.length; e++) {
      if (cell.mountainPath[e] && cell.mountainPath[e].vertices) {
        cell.mountainPath[e].vertices.forEach(element => {
          tmp2.push(element);
        });
      }
    }

    let mountainMesh = BABYLON.MeshBuilder.CreateRibbon(mountainName, { pathArray: [tmp1, tmp2], updatable: true }, this.scene);

I can generate the mountain meshes… as you can see here:

island2.PNG
island2.PNG518×1016 162 KB

As soon as I add the medthod mountainMesh.increaseVertices(2), babylonjs crashes with the error in the log: ERROR RangeError: Invalid typed array length: 16
at new Float32Array ()

Is it possible that this method can’t be used for this type of mesh? Or maybe I didn’t create the mesh correctly. I will try to create a playground… asap. But maybe you guys already have an idea for my issue. Maybe I’m completely on the wrong track and there is a better way to do this.

Thanks in advance

2

For increase Vertices to work the mesh needs to consist of complete triangles. From the images the mountain sides do not appear to be made of triangles.

3

Thanks for your reply :slight_smile:
Ok understood. So I guess the ribbon function is not producing a “correct” mesh. Otherwise, the function would work. The Mountain sides do not matter and are actually hidden by the ocean plane :wink:

The mesh I want to apply the increase is the white mesh in the foreground. Sorry I should have explained that better. And from what I can see the mesh looks ok. Time to build a playground :slight_smile:

4

https://playground.babylonjs.com/#X918MF#2

There you go. I was able to reproduce the error. If you uncomment the last line it will fail.
In my eyes I have 24 Vertices. I split them in 2 Paths to create the ribbon… I really don’t get why this shouldn’t produce a valid mesh.

5

Sorry for taking so long to reply but have been busy for a few days. The issue is that your path 1 and path 2 have different lengths see Ribbon In Detail | Babylon.js Documentation

Ribbons created in this way are not well formed, ie all facet triangle edges should share an edge with exactly 0 or 1 other triangle.

You can see that increasVertices work when I force path1 and path2 to have the same length https://playground.babylonjs.com/#X918MF#3.

You will need to work out a way to create the shape you need with a ribbon using paths of the same length.

You may already know and newVertice may be deliberate however just in case it is not and you are interested the singular of vertices in English is vertex not vertice.

6

You could use (ExtrudePolygon)https://doc.babylonjs.com/divingDeeper/mesh/creation/param/extrude_polygon and position the completed mountains after creation.

Another way would be to use (ExtrudeShape)[https://doc.babylonjs.com/divingDeeper/mesh/creation/param/extrude_shape#extruded-shape] which would also allow you to scale the size of the bottom of tth mountain if needed.