Bake a navmesh in the editor

tutorial lesson Intermediate ⏱ 6 min vgai 0.1.0

Prerequisites: Take the editor tour

What you'll learn

• Tag meshes as walkable or obstacle for navigation
• Bake a navmesh from the recast parameters in Scene Settings
• See the baked navmesh overlay in the viewport

What you'll build: Baking a navmesh on the RTS scene and seeing it overlay the walkable ground.

Walkthrough — Bake a navmesh in the editor · generated by site/media/lessons/learn-navmesh.lesson.ts (4 steps)

A navmesh is the walkable surface agents path on. In vgai you don’t author it by hand — you tag which meshes are walkable vs obstacles, then bake with recast. This RTS scene already tags its Ground as walkable and the blocks as obstacle.

Follow along in the live web editor

Open the tagged scene in your browser — no install: ▶ Open the RTS scene. Baking runs in the browser (recast compiles to WebAssembly): with nothing selected, open Scene Settings → Navigation and click Bake NavMesh to see the overlay.

Steps

1. A tagged scene. Each mesh has a navigation role (none / walkable / obstacle), set per entity in the inspector’s Navigation section. Here Ground is walkable and the six blocks are obstacles.

   

   Ground tagged walkable; blocks tagged obstacle.

2. The bake parameters. With nothing selected, Scene Settings → Navigation exposes the recast knobs — cell size/height, walkable slope/height/climb/radius, edge length, region areas — and the Bake NavMesh button.

   

   The recast parameters live in Scene Settings → Navigation.

3. Bake. Clicking Bake NavMesh initialises the recast WASM, collects the walkable meshes, and builds the navmesh — which appears as an overlay in the viewport (the ground turns into the navmesh surface).

   

   The baked navmesh, drawn over the walkable ground.

4. The result. The navmesh covers the walkable ground; the obstacle-tagged blocks are excluded from it, so agents path around them.

   

   Obstacles are excluded from the walkable surface.

What the bake produces

navmesh-handler.ts listens for editor:bake-navmesh: it gathers every mesh tagged walkable (store.objectMap), runs recast with the scene’s environment.navigation parameters, calls getDebugMesh → viewport.setNavMeshHelper for the overlay you see, and saves the result next to the scene as a .navmesh file (scene.navmesh, base64). At runtime the engine loads that file for pathfinding — no re-bake needed. Clear removes the overlay; the button shows * when the scene has changed since the last bake.

Recap

New functionality

• Saw walkable/obstacle tags on a scene
• Baked a navmesh and saw it overlay the viewport

New concepts & skills

• meshes carry a navigation role: none / walkable / obstacle
• recast bakes from environment.navigation params (cell size, slope, agent radius, …)
• the bake writes a .navmesh next to the scene; the runtime loads it for pathfinding

Next lesson → Editor architecture

On Your Own!

Extend what you built:

• Lower Walkable Radius and re-bake — the navmesh hugs obstacles more tightly
• Tag a ramp as walkable and bake — the navmesh climbs it (within Walkable Slope Angle)
• Hit Clear, change Cell Size, and re-bake to see the resolution change

See also

• Editor architecture · Navmesh (manual)