Marching cubes with Javascript

Posted on June 25, 2018 by Stéphane Laurent

In this gist of mine, there is a Javascript implementation of the marching cubes algorithm. The code is an adaptation of the algorithm implemented in misc3d, a R package written by Dai Feng and Luke Tierney.

The algorithm returns a triangulation of an isosurface, that is to say the surface defined by an implicit equation \[ f(x,y,z) = \ell. \]

The triangulation is returned by

where xmin and xmax are the bounds of the \(x\) variable and nx is the number of subdivisions between xmin and xmax, and similarly for the \(y\) and \(z\) variables.

The output is a \((n \times 3)\)-array of vertices. Grouping the rows by chunks of three provides the triangles.

As an illustration, below is a Dupin cyclide triangulated by the marching cubes algorithm and rendered with three.js. The full code is available in the source. Go here for a full-page rendering.

Below is another triangulation of the Dupin cyclide. This one has less triangles, but the rendering is smooth because I included the surface normals at each vertex.