Dynamically bridge standalone (nav)meshes at specific vertices

Tutorials and tips
1

Hey guys!

I had to solve a problem of dyamically joining standalone navmeshes based on some conditions, for example whether the user can be tracked in a specific area or on a given floor. We didn’t want to create a huge navmesh for a user which has access only to one floor of a 30 floor high building because it’s a security issue and a performance issue as well. We bridge the meshes where the elevators and the stairs are located.

I had to somehow mark joinable vertices on all navmeshes. I’m using Blender in this tutorial.

  1. Let’s create two simple navmeshes. The arrows indicates the vertices I’d like to use for joining and create a “bridge” between them. I will use two simple planes.

#1
image

#2:
image

But how can I mark the vertices in Blender so I can use BabylonJS to join the two meshes into one at these specific vertices? Vertex colors to the rescue!

  1. Select your mesh in Object mode and switch to Vertex Paint:
    image

  2. Turn on Vertex Selection:
    image

  3. Press A to select all vertices:
    image

  4. Click on the Color selector:
    image

  5. Switch to Hex and enter FFFFFF. Hit Enter and click outside the Color Palette to close it. Pres SHIFT + K to set the vertex colors (or Menu Paint/Set Vertex Colors). We set vertex color to white on all vertices this way. This color will be ignored by the BabylonJS code. In Blender 3.0 this is the default value and will be set automatically on all vertices not marked by another color but to be sure I do it manually as well.
    image

You should see a new Vertex Color automatically added:
image

  1. Switch to the Select Box tool:
    image

  2. Mark the two vertices we want to bridge:
    image

  3. Switch back to the Draw tool, click on Color as in step 6 but this time enter a value of 000001 as the vertex color. You can think of this value as an ID. Don’t forget to SHIFT+K.
    image

You have to see Vertex Colors assigned in Vertex Paint / Solid Mode:
image

image

  1. Export your mesh to GLB. Make sure that Vertex Colors in the Geometry Group is ticked.
    image

  2. Create a second (nav)mesh like this.
    image

Move the mesh in Blender in a different position so we can see the bridge created by the BabylonJS code. In a real app it makes more sense to have all your navmeshes at [0,0,0] and position them by code.
image

Export it the same way as your first mesh.

  1. After running the “bridging” function you should see the newly created mesh with a bridge between the marked vertices.
    image
    image984×692 11.1 KB

Now you can use the new mesh as your navmesh.

I am not able to share the full solution to bridge multiple meshes but you hopefully get the point. You just have to mark another vertices with different colors/ID, so for example the second mesh will have another two vertices marked with color #000002 and the third mesh will have two vertices with the same color/ID and so on.

I hope someone will find this helpful!

Enjoy!

:vulcan_salute:

R.

1 Like
2

Cooool tricks !!! wonder if this should somehow make it into the doc ? @PirateJC and @Cedric ?

1 Like
3

Thanks :blush: Dude I miss the forum so badly! Hopefully I’ll have time to come back here as often as before from now :sunglasses:

4

It’s a great trick but it’s a workflow tight to a specific DCC. Not sure it has its place in the doc. But it has its place in an blog post for sure.

3 Likes
5

Hey @Cedric!
Thanks! I’m not pushing on getting this into the docs however I can imagine a game where you build bridges on the navmesh based on the difficulty level. You may have more routes accessible on lower difficulty level.

3 Likes