What is a Nav Mesh?

Feb 25, 2022 2 min read
What is a Nav Mesh?

Why do my avatars fly around my scene ignoring walls? Why is this spiral staircase or narrow pathway broken? The answer to these exciting mysteries may lie in your nav-mesh.

What's a nav-mesh? Nav is short for navigation and a mesh is another name for a 3D object. Mozilla Hubs uses nav-mesh to dictate where an avatar can go.  Hubs doesn’t recognize anything else in the scene for avatar movement, so understanding nav-mesh is crucial for controlling movement in your space.

Check out this brief demonstration video below. See the differences between the two grey planes representing the nav-mesh? Notice how one nav mesh has a hole that prevents the avatar from clipping into the green object.

0:00
/
Two different nav-mesh seen in grey

In Spoke, the nav-mesh is automatically generated.  Scenes have a floor plan you can find in the scene hierarchy. The floor plan has many properties you can use to make adjustments to the way the nav-mesh is generated.

image of Spoke with floor plan
Nav Mesh highlighted in blue. Floor Plan element and properties.

We won’t go into detail what every one of these properties do here. You can try playing with these properties yourself by remixing the Hubs Modular Art Gallery

With the Hubs Modular Art Gallery open in spoke, let’s try to add a new wing for our participants to explore.  Enable the west hall, delete the walls and add to our nav-mesh to make sure people can explore the new wing of our gallery.

0:00
/
Enabling the west hall and updating the nav-mesh
💡
You can try adding ?debugNavmesh to the end of any room URL to see a wireframe version of the nav-mesh in that space.
0:00
/
Visualization of a nav mesh wireframe created by appending ?debugNavmesh to the room URL.

The nav-mesh is a critical part of the experience for many spaces in Mozilla Hubs. To learn more about advanced nav-mesh techniques check out this creator labs post: Creating a Custom Nav Mesh to meet your needs.

Any questions? Ask in the Mozilla Hubs Discord.

Great! Next, complete checkout for full access to Creator Labs.
Welcome back! You've successfully signed in.
You've successfully subscribed to Creator Labs.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info has been updated.
Your billing was not updated.