Building Recast Navigation for the Web

Hello world!

Let’s make an “Hello world!” program starting from scratch. You only need to have Git installed to start. Type these commands in a terminal:

The glue

The glue is where Emscripten really shines and make the porting easier. Any C++ program can make a call to the system to read files, print some text on screen, open a window, you name it. Emscripten can convert those calls to the JavaScript equivalent. It doesn’t work for every library you may use but for the most common it works perfectly.

Recast navigation

Recast navigation is a production-ready navigation library used in countless 3D engines and applications. The repository is composed of 3 parts:

  1. Navigation mesh creation
  2. Agents navigation
  3. A visual sample that shows how to use it

A word on memory allocations

One of the most annoying issues that I faced was the memory allocation life-time. To simplify things, any C++ memory allocation ends up being a span in an array allocated on the JS side. In C++ if you allocate memory, use it, and then free it, you’ll get an error the next time you try to access it. With WASM, you can free memory and use it after, with no error reported. It will be reused by another part of the program at some point resulting in your freed-and-reused memory being trashed. These types of issues that don’t report an error but may cause non-reproductible issues can be hard to track sometimes.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Babylon.js

Babylon.js

Babylon.js: Powerful, Beautiful, Simple, Open — Web-Based 3D At Its Best. https://www.babylonjs.com/