A Topological Picture Book, Rendered: Hand-Hatched 3D Surfaces in the Browser

There's a quiet corner of graphics that most web developers never touch: non-photorealistic rendering. The goal isn't realism—it's clarity and craft. A new interactive page, A Topological Picture Book, Rendered, brings that craft to the browser, letting you explore classic surfaces from topology and differential geometry as if they were hand-drawn illustrations from a mid-century math book.

The tool renders parametric and implicit surfaces—think Boy's surface, Morin's surface, torus knots—using a stroke-based pipeline. Instead of pixels, the output is a set of tapered ribbons that mimic a broad-nib pen. Silhouettes are computed as the zero set of n·v on the mesh, chained into smooth curves. Hidden lines are handled with a GPU visibility pass and drawn dashed or faint. Hatching follows principal curvature directions, with three nested densities for tone, and cross-hatching only in shadowed regions.

What's impressive is the fidelity to classical techniques. The page cites a lineage of papers from SIGGRAPH and Eurographics—Hertzmann and Zorin's Illustrating Smooth Surfaces, Appel's haloed line effect, Jobard and Lefer's streamline spacing—and implements them faithfully. The result is not a cheap filter but a genuine recreation of the engraving style found in Francis's 1987 Topological Picture Book.

Under the hood, it's a mix of modern web tech and classic algorithms. Implicit surfaces are polygonized via marching tetrahedra. The double curve of an immersion is found with ray-triangle intersection tests. Principal curvature directions are computed on the mesh, and streamlines are traced with a separation-distance rule to keep hatching even. The UI lets you tweak everything: stroke spacing, pen width, hand wobble, ink pooling, even the paper grain.

For engineers, this is a masterclass in translating a 30-year-old graphics research pipeline into an interactive web app. It's also a reminder that the browser is now capable of real-time NPR that would have required a workstation in the 90s. The code is open—you can inspect the formulas, the hatching logic, and the rendering passes. If you've ever wondered how to draw a clean line from a noisy mesh, this page is worth dissecting.