George Francis's 1987 A Topological Picture Book occupies an unusual position in mathematical literature. It is simultaneously a rigorous exposition of surface topology and a manual for hand-drawing surfaces in a very specific mid-century illustrative style: contour lines with cusps, double curves marked where a surface self-intersects, sparse hatching that reads as shade rather than texture, and the occasional dashed hidden line. The style is disciplined and information-dense. Reproducing it computationally is not a trivial exercise in artistic mimicry. It requires solving several non-trivial problems in differential geometry, mesh processing, and stroke rendering. The project at e-infinity.space/picture-book takes this challenge seriously, and the result is worth examining in some technical depth.
The Contour Pipeline and Visibility
The foundation of any pen-and-ink surface renderer is the silhouette. The standard formulation, following Hertzmann's SIGGRAPH 1999 course notes and the more comprehensive treatment in Bénard and Hertzmann's 2019 Foundations and Trends survey, defines silhouettes as the zero set of the dot product between the surface normal n and the view direction v. On a triangle mesh this zero set is found by interpolating vertex normals and running what amounts to a marching-triangles pass across each edge, then chaining the resulting segments into smooth curves.
The implementation here adds two further curve families to the silhouette set: surface boundaries and the double curve of an immersion. The double curve is the locus of self-intersection, which for surfaces like Boy's surface or the Morin surface is a genuinely complex spatial curve. Computing it requires a segment-triangle intersection test across the mesh, for which the renderer cites Möller and Trumbore's 1997 algorithm. This is a reasonable choice: the test is numerically stable and cache-friendly, though for dense meshes the naive all-pairs version is expensive. The renderer presumably limits resolution to keep this tractable in a browser context.
Visibility is handled on the GPU rather than in software. The hidden-line pass renders occluded contour segments as dashed lines, and a paper halo effect, drawn as a one-sided white ribbon beneath each near contour, cuts lines that pass behind it. The halo idea traces back to Appel, Rohlf, and Stein's SIGGRAPH 1979 paper, one of the earliest formal treatments of line-drawing aesthetics. The GPU implementation avoids the classical per-segment visibility problem, which is O(n²) in the worst case for a software z-buffer approach, by rasterising the halo geometry directly. The trade-off is that the halo width is fixed in screen space rather than being geometrically adaptive, which can produce visible artefacts at high zoom or on surfaces with very tight curvature.
Principal Curvature Hatching and Streamline Tracing
The hatching system is the most technically interesting component. Following Hertzmann and Zorin's SIGGRAPH 2000 paper on illustrating smooth surfaces, strokes are traced along the principal curvature directions of the surface. This is geometrically meaningful: the two principal directions at each point are the directions of maximum and minimum normal curvature, and hatching along them produces lines that visually reinforce the surface's shape rather than being arbitrary texture.
The implementation makes a specific design choice that deserves attention: the two principal direction families are ordered by signed curvature rather than by magnitude. On a generic smooth surface the principal curvatures κ₁ and κ₂ are distinct and the ordering by magnitude is unambiguous. But at umbilic points, where κ₁ equals κ₂, and along the loci where κ₁ equals minus κ₂, a magnitude-based ordering produces discontinuities in the direction field. Ordering by sign avoids this at the anti-umbilic loci, keeping each hatch family continuous across those curves. This is a subtle but correct choice; many implementations simply ignore the problem and accept visible seams in the hatching.
The streamlines themselves are traced using the Jobard-Lefer separation-distance rule from 1997, which produces evenly-spaced streamlines of adjustable density by seeding new streamlines only where the distance to existing ones exceeds a threshold. The renderer traces three nested density levels, the second along the orthogonal principal direction for cross-hatching, and uses tone to select which family is inked and where each stroke feathers out. Highlights are left as bare paper, consistent with the Hertzmann-Zorin prescription.
One limitation worth noting: the principal curvature field on a triangulated mesh is inherently noisy. Estimating curvature from a mesh requires either fitting a local polynomial patch, computing the shape operator via the cotan Laplacian, or some other discrete approximation. None of these are exact, and the resulting direction field can have spurious singularities or high-frequency oscillation, particularly near sharp features or in regions of low mesh resolution. The renderer mitigates this by lightly smoothing contour chains before inking, but the hatch streamlines themselves presumably inherit whatever noise is present in the discrete curvature estimate. For the surfaces shown, which are smooth and analytically defined, this is unlikely to be severe. For arbitrary user-input meshes it could be more problematic.
Implicit Surface Polygonisation and the Bryant-Kusner Parametrisation
The renderer supports both parametric and implicit surface input. Implicit surfaces are polygonised using marching tetrahedra rather than the more familiar marching cubes algorithm. The tetrahedral variant, due to Doi and Koide (1991), produces no ambiguous cases and generates a consistent orientation on the output mesh, which matters for correct normal computation. The normals are taken from the gradient of the implicit function rather than from the mesh geometry, which gives exact normals at the cost of evaluating the gradient at each vertex. For analytically defined functions this is straightforward; the renderer accepts JavaScript expressions and presumably computes gradients numerically via finite differences.
The parametric surfaces include several topologically non-trivial examples. Boy's surface, an immersion of the real projective plane in three-space, is provided via the Bryant-Kusner parametrisation. The renderer's documentation notes that the general-p form uses a specific denominator and prefactor, and that the correctness of the parametrisation was verified numerically by checking that the pre-inversion surface is minimal and that antipodal boundary gluing holds to machine precision. This level of care is unusual for a web renderer and reflects the mathematical seriousness of the project. The alternative Apéry family, drawn from Apéry's 1987 monograph and tabulated on Ferréol's mathcurve.com, provides the Morin surface and a second model of Boy's surface, allowing direct visual comparison of two genuinely different immersions of the same topological space.
Stroke Aesthetics and the Pen Model
The rendering style targets Francis's book specifically, which means the aesthetic choices are constrained rather than arbitrary. Contour strokes are tapered ribbons drawn with a broad-nib pen model whose width grows on the shadow side and toward the viewer, consistent with the weight conventions of technical illustration. Strokes overshoot their endpoints slightly, following Strothotte et al.'s 1994 Eurographics paper on sketchy line rendering. Ink pooling at stroke starts and bleed into paper grain are described as custom effects rather than being taken from a published paper, implemented as a widened ribbon whose fringe is gated by fibre-like noise.
The tone-to-stroke-density mapping draws on Salisbury et al.'s SIGGRAPH 1994 work on interactive pen-and-ink illustration and Praun et al.'s SIGGRAPH 2001 real-time hatching system. The key property preserved from Praun et al. is that the hatching is computed in object space rather than screen space, so strokes do not swim or shift as the model rotates. This is essential for interactive use: screen-space hatching that recomputes on every frame produces a distracting crawling effect that destroys the illusion of a static ink drawing.
The label system, which places hand-lettered annotations pinned to surface points with leader lines, dims labels when their anchor point is occluded. This is a small detail but a correct one: a label pointing to a hidden part of the surface is actively misleading in a topology illustration where the relationship between visible and hidden structure is the whole point.
Situating the Work in NPR Research
Non-photorealistic rendering of mathematical surfaces sits at an intersection that does not receive much attention in the mainstream NPR literature. Most NPR work targets natural scenes, architectural models, or character animation, where the goal is artistic expressiveness. Here the goal is mathematical communication: the rendering must convey topological structure accurately, which places constraints that purely aesthetic systems can ignore.
The reference list is notably thorough, covering the classical NPR canon from Appel 1979 through to DeCarlo et al.'s suggestive contours (SIGGRAPH 2003) and Kalnins et al.'s WYSIWYG NPR (SIGGRAPH 2002). The implementation appears to engage with this literature seriously rather than selectively. The one area where the project might be extended is in suggestive contours and apparent ridges, which convey shape in regions far from the silhouette. Francis's original drawings use hatching for this purpose, but the computational equivalents could complement the existing pipeline.
As a browser-based tool for exploring the topology of surfaces that are genuinely difficult to visualise, the project is a substantial piece of work. The combination of mathematically correct surface parametrisations, a principled NPR pipeline grounded in two decades of published research, and an interactive interface that respects the conventions of the source material produces something that is both technically sound and pedagogically useful. The source and method notes alone serve as a concise reading list for anyone wanting to implement a similar system from scratch.