CS2 Nav Mesh Editor
TypeScriptPrivate
// Overview
Interactive 3D web-based tool for viewing and editing Counter-Strike 2 navigation mesh files. Features real-time 3D visualization with Three.js, support for VPK file parsing, area selection and editing with detailed properties, and sample maps (de_dust2, de_mirage) for testing. Helps map developers optimize bot navigation paths without game engine.
// Built with
Next.jsTypeScriptThree.jsWebGL
// The problem
A CS2 map's navigation mesh drives bot pathing, but there was no way to see or edit it visually. Tweaking it meant guessing at binary offsets and reloading the game to check.
// Approach
- Parse Valve's VPK archives and the navigation mesh format directly in the browser, no backend required.
- Render the mesh in real-time 3D with Three.js, with area selection and per-area property editing.
- Ship example maps (de_dust2, de_mirage) so anyone can try it without supplying their own files.
// Engineering challenges
- Reverse-engineering the undocumented nav mesh binary format and validating it against real maps.
- Reading VPK, a packed archive format, entirely client-side.
- Keeping the 3D viewport smooth on large meshes.
