---
title: "Marching cubes with Javascript"
author: "Stéphane Laurent"
date: '2018-06-25'
tags: javascript, graphics, maths
output:
md_document:
variant: markdown
preserve_yaml: true
html_document:
highlight: kate
keep_md: no
prettify: yes
prettifycss: minimal
highlighter: pandoc-solarized
---
In [this gist of mine](https://gist.github.com/stla/69bbbd59fab9d46cc5f49860eaf9f052),
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
```javascript
marchingCubes(f, l, xmin, xmax, ymin, ymax, zmin, zmax, nx, ny, nz)
```
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](https://laustep.github.io/stlahblog/frames/threejs_cyclide.html)
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.