Skip to content
Tech News
← Back to articles

A Topological Picture Book, Rendered

read original get A Topological Picture Book by George K. Francis → more articles
Why This Matters

This is a browser-based renderer that recreates the hand-drawn illustration style of mid-century topology books — Francis's A Topological Picture Book, Apéry, Hilbert–Cohn-Vossen — as live, interactive 3D. Instead of shading pixels, it extracts silhouettes, double curves and curvature streamlines from an implicit surface and inks them as tapered pen strokes, with GPU-based hidden-line passes and paper halos. It's a reminder that non-photorealistic rendering can carry real explanatory value, not just aesthetics.

Key Takeaways
Worth a Look

A Topological Picture Book by George K. Francis — This is the classic that inspired the whole hand-hatched aesthetic described here — Francis's own pen-and-ink renderings of immersed surfaces, double curves and silhouettes, with the reasoning behind each drawing. If you enjoyed dragging that rendered model around, the book shows how these pictures were conceived by hand long before GPUs. A great shelf companion for anyone into geometry, topology, or mathematical illustration.

See A Topological Picture Book by George K. Francis on Amazon → Affiliate link — we may earn a commission on purchases, at no extra cost to you. Product picked by AI based on this article; it is not a tested recommendation.

Hand-hatched surfaces after the mid-century manner of Francis, Apéry, Hilbert–Cohn-Vossen. Drag to turn the model freely (shift-drag to roll it); scroll to approach.

The zero set is triangulated by marching tetrahedra; normals are taken from ∇f.

Stroke spacing re-traces the hatching when you release the slider.

Labels are hand-lettered, pinned to the surface, drag to move them, double-click to remove; they dim when their point is hidden.

Sources & method

The drawing is made of strokes, not pixels. Silhouettes are the zero set of n·v on the mesh (found with interpolated normals, so they chain into smooth curves), boundaries and the double curve of an immersion are added as further chains, and all of them are drawn as tapered ribbons with a broad-nib pen model, weight that grows on the shadow side and toward the viewer, and coherent hand wobble. Visibility is settled on the GPU: a hidden-line pass draws the occluded parts dashed, and a one-sided paper halo under each near contour cuts the lines behind it. Hatching is a set of streamlines of the principal-curvature line field, traced at build time in three nested densities (the second along the other principal direction, for cross-hatching); tone selects which family is inked and where each stroke feathers out. Highlights stay bare paper. The principal directions are ordered by signed curvature, not magnitude, so the two families stay continuous across the loci where κ₁ = −κ₂. Contour chains are lightly smoothed before inking. Strokes overshoot their ends a little in the manner of sketchy line rendering; the ink pooling at stroke starts and the ragged bleed into the paper grain are hand-tuned effects of this page (a widened ribbon whose fringe is gated by a fibre-like noise), not taken from a paper. Labels are hand-lettered, pinned to points of the surface with a leader line, and dimmed when their point is hidden.

G. K. Francis, A Topological Picture Book, Springer, 1987 — the style target: contour drawing with cusps, double curves, hidden lines, and sparing hatched bands.

P. Bénard, A. Hertzmann, “Line Drawings from 3D Models: A Tutorial,” Foundations and Trends in Computer Graphics and Vision 11(1–2), 2019 — the contour pipeline: smooth silhouettes as n·v = 0, chaining, visibility, stylization.

A. Hertzmann, “Introduction to 3D Non-Photorealistic Rendering: Silhouettes and Outlines,” SIGGRAPH 99 Course Notes — silhouettes from interpolated vertex normals (marching-triangles on n·v).

A. Hertzmann, D. Zorin, “Illustrating Smooth Surfaces,” SIGGRAPH 2000, pp. 517–526 — hatching along principal curvature directions, cross-hatching only in dark regions, blank highlights, undercuts.

... continue reading