What is an isosurface?

The set of all points where some quantity has a particular value — like a contour line on a map, but in three dimensions. Medical scanners and terrain software use exactly the same idea to turn a volume of measurements into a surface.

Why does it look faceted?

Because the surface is extracted on a grid, and a finer grid costs more per frame. Flat shading is used deliberately so the facets read as an aesthetic rather than as an error.

Does this need a special browser or plugin?

No. It uses WebGL, which every current desktop and mobile browser supports. Nothing is installed and no plugin is required.

Does it cost anything or need an account?

No. Every screensaver here is free, runs in the browser and needs no sign-up.

How does marching cubes work?

It looks at the eight corners of each grid cube, notes which are inside the surface, and picks a triangle pattern from a table of the possible cases, then connects the patterns across neighbouring cubes.

Why do the blobs seem to attract?

They do not interact physically. Their fields simply sum, so as two blobs get close the added influence in between pushes the total over the threshold and joins them.

Where did marching cubes come from?

It was published in 1987 by William Lorensen and Harvey Cline at General Electric to build triangle models of constant-density surfaces from 3D medical data.

Metaballs Screensaver

The Metaballs screensaver extracts an isosurface from a scalar field: six moving sources each contribute a field that falls off with distance, and the surface is wherever the total crosses a threshold. It runs in the browser with nothing to install; press ESC to exit.

How the Metaballs screensaver works

The saver renders with three.js on your GPU. The library is vendored into this site rather than fetched from a CDN, and loads only when a 3D screensaver actually runs.

It reads nothing external — the field and its surface are computed in the browser each frame.

The scene resizes with the window and releases its WebGL context when the saver stops, so shuffle mode and Multi-view can cycle 3D savers without exhausting the browser's context limit.

If WebGL is unavailable the saver says so on screen rather than showing an empty black box.

Jim Blinn's blobby objects and implicit surfaces

Metaballs belong to the family of blobby objects introduced by the computer graphics researcher Jim Blinn in his 1982 paper “A Generalization of Algebraic Surface Drawing” in ACM Transactions on Graphics, a way to model smoothly merging shapes. Each ball is not a sphere but a source of influence that fades with distance. Add up the influence of every source at a point in space, and you get a scalar field: a single number for every location.

The visible surface is wherever that total crosses a chosen threshold. When two sources are far apart, each forms its own round blob. As they approach, their fields add in the gap between them, the sum exceeds the threshold there, and a neck forms that thickens as they move closer, which is why the shapes appear to merge like droplets of mercury. The result is an implicit surface, defined by an equation instead of a list of polygons.

To draw it as a mesh, a computer needs triangles. Marching cubes, published by Lorensen and Cline of General Electric in 1987, divides space into small cells, checks which corners are above and below the threshold, and uses a case table to place triangles in the cells that straddle the boundary. The finer the grid, the smoother the surface, which also explains the faceted look at coarse resolutions. The original paper aimed at constant-density surfaces in 3D medical data.

A worked example

The field is sampled on a 26-cube grid every frame, then the surface is found by checking each grid edge for a sign change and emitting geometry there. That is why two blobs merge into a smooth neck rather than intersecting as two spheres would: there is no sphere anywhere in the calculation. What you see is the boundary of a region, and regions merge.

Settings & tips

Accent and Background recolour the scene; Speed changes the pace of the motion and the camera.
Add it to a Multi-view grid, though 3D savers are heavier than 2D ones and a few per screen is plenty.
Press ESC at any time to leave fullscreen.

Frequently asked questions

What is an isosurface?: The set of all points where some quantity has a particular value — like a contour line on a map, but in three dimensions. Medical scanners and terrain software use exactly the same idea to turn a volume of measurements into a surface.
Why does it look faceted?: Because the surface is extracted on a grid, and a finer grid costs more per frame. Flat shading is used deliberately so the facets read as an aesthetic rather than as an error.
Does this need a special browser or plugin?: No. It uses WebGL, which every current desktop and mobile browser supports. Nothing is installed and no plugin is required.
Does it cost anything or need an account?: No. Every screensaver here is free, runs in the browser and needs no sign-up.
How does marching cubes work?: It looks at the eight corners of each grid cube, notes which are inside the surface, and picks a triangle pattern from a table of the possible cases, then connects the patterns across neighbouring cubes.
Why do the blobs seem to attract?: They do not interact physically. Their fields simply sum, so as two blobs get close the added influence in between pushes the total over the threshold and joins them.
Where did marching cubes come from?: It was published in 1987 by William Lorensen and Harvey Cline at General Electric to build triangle models of constant-density surfaces from 3D medical data.

← All Generative screensavers