Script Monkey Blog – The Menger Sponge

The Menger Sponge is usually drawn in 3D, but can it be procedurally rendered?

13^th August 2021

A 3D shape with infinite surface area and zero volume should be impossible yet, at the limiting case of iterations, it is true. Just look below to see one rendered in 3D.

I have always been fascinated by geometry and fractals since first seeing the Mandlebrot set back in the Triassic period. As 3d libraries have become more and more accessible, it has been possible to render 3d environments entirely 'in browser' using tools like Three.js, a personal favourite.

These geometries are incredibly simple to define, a little harder to code. For the cube, you start by naming the eight vertices 1 to 8 and assign x, y & z coordinates to each. You then choose a random number from 1 to 8 representing a vertex and plot a point halfway between your current position and the randomly selected vertex. Repeat a bunch of times and you create the Menger Sponge.

With Three.js, it is possible render a 3D environment and then navigate it in real time.

Here is a Menger Sponge

How do we go about rendering these in 3d using Three.js? Like this...

Note: This cube has been left simplified to render it quickly on all browsers. several minutes pass at the next level of complexity.