Using Custom glTF as a Navigation Mesh


I am fairly new to Babylon, so I just started experimenting with Navigation Meshes.

In particular, I am interested in using the mesh in the context of the XR teleportation feature.

As I noticed that all the related PGs use a .babylon format, I was wondering if it is also possible to use a custom .glb/.glTF asset for this purpose?

I have had no luck with my attempts so far, so thank you for any hint or info.

1 Like

This is a pretty good question and I guess our friend @Cedric will be the best to answer as soon as he ll be back from vacation next week :slight_smile:

Might also be relevant for @RaananW given the context of the WebXR teleportation feature.


Hi @danilopasquariello Happy new year!

It’s possible to use any mesh (or an array of meshes) for the navigation. But, because navigation needs more information than just the triangles, you need to compute the navigation mesh anyway.

In this documentation, the navmesh is computed with primitives but it will work the same way if you use meshes coming from a .gltf.

Then, you can query the nearest valid point on a navmesh for teleportation using getClosestPoint

1 Like

Hi @Cedric, thanks for this! Been working with @danilopasquariello on this vr navigation/nav-mesh stuff.

I do know that relative to passing in a navigation mesh built with your nav mesh tool into the XR helper, I was able to successfully achieve that just now as demonstrated in this playground, where I just pass the navmeshdebug into the floorMeshes array of the xr experience helper:

Where we still haven’t had any luck just yet is in passing custom .gltf or .glb meshes into the floorMeshes array so that we could possibly bypass the nav mesh creation altogether and use existing nav mesh models we make in Blender, for times when we aren’t able to get the navigation mesh tool to make the precise nav mesh we want. Perhaps @RaananW can help with that!

It’s not possible to use directly a mesh as a navmesh. But if you don’t need agents and navigation and only get a point on a mesh for teleportation, then you can do a raycast:

Mesh Picking | Babylon.js Documentation

So one can’t pass in a mesh into the floorMeshes array of the xr teleportation helper @Cedric ? How then does passing the navmeshdebug into it work?

For a PG modified from the previous one that demonstrates what we’re trying to do with the xr experience helper @RaananW , here we try to pass the meshes from a custom glb import into the floorMeshes array in the xrexperiencehelper. But we aren’t able to get it to work:

And PS: Along the same topic, I see this PG tries but fails to do the same thing, passing in an imported mesh into the floorMeshes array of the XR experience helper:

I must admit I am very ready to explore this haunted house in VR, heh, but I’m stuck in place!

I think @RaananW is the best to help here :slight_smile:

1 Like

Jumping into the conversation!

It feels like you have everything and just missing the final connection between the components.

You have a scene with N meshes, and you want to create a navigation mesh from those. Then you want to use this mesh to allow teleportation in XR.

Is it working outside of XR? If it does - what you can do is take the debug navigation mesh - navigationPlugin.createDebugNavMesh(scene); and use it as a floor mesh when creating XR. you can use the rest of the meshes as blockers if you want the user to now be able to teleport through walls.

I might have missed an XR playground, do you have something i can play with?


Thanks for jumping in @RaananW! :slight_smile:

If you check out my responses above in the thread, the first playground I link does indeed do what you describe - I pass in the debug nav mesh as the floor mesh for the xr experience, and I believe that worked for me! Not sure what you mean there though about blockers - how would one do that?

In th second playground though, what in trying to do is simply use a custom glb file and pass in its meshes as the floor mesh for the xr experience. That isn’t working on either of the two most recently linked PGs above. Any ideas there?

Those are

1 Like

So, i just checked the haunted house just to be sure - teleportation works well:

can I ask what device are you testing with? and what browser? might be a specific error with these.

About the custom loaded mesh - this is odd and I am checking it now

Just to keep you updated - the teleportation works using the pickedPoint feature of the picking function. This uses the selected mesh and checks its triangles (i.e. the one we can generate from its indices). It then provides a picked point on the specific mesh.

The problem with your mesh is that it has no indices - Navigation Mesh Generation Example | Babylon.js Playground . The interesting mesh is result.meshes[1]. And this is the one that should be added to the floors mesh (thou adding the other one won’t hurt). At the moment we only support index-enabled meshes and cannot support meshes with no indices. I will be happy to investigate that, if it is an issue.

And another update! :slight_smile:

Seemed like a straight-forward fix, so - it should work from the next nightly - If indices are empty use unindexed intersection by RaananW · Pull Request #9729 · BabylonJS/Babylon.js (


Thanks for all the info about this topic so far, @RaananW! :slight_smile:

Okay @RaananW , this is awesome! Thank you!! Looking forward to trying that fix.


Hello, is it still possible to pass a sphere as navmesh?

You can use any mesh for the navmesh computation but only portion of the sphere that respect the navigation mesh parameter will be used.
It means it will be used like a hill, don’t expect to use it for something like Super Mario Galaxy.

1 Like