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.
- 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.
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!
Select your mesh in Object mode and switch to Vertex Paint:
Turn on Vertex Selection:
Ato select all vertices:
Click on the Color selector:
Enterand click outside the Color Palette to close it. Pres
SHIFT + Kto 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.
You should see a new Vertex Color automatically added:
Switch to the Select Box tool:
Mark the two vertices we want to bridge:
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
You have to see Vertex Colors assigned in Vertex Paint / Solid Mode:
Export your mesh to GLB. Make sure that Vertex Colors in the Geometry Group is ticked.
Create a second (nav)mesh like this.
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.
Export it the same way as your first mesh.
- After running the “bridging” function you should see the newly created mesh with a bridge between the marked vertices.
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!