Home▸Geometry▸Topology Surfaces

🍩 Topology Surfaces

Explore topological properties of surfaces: sphere, torus, Klein bottle, and real projective plane. Visualise genus, Euler characteristic χ=V-E+F, and orientability using interactive 3D rendering.

Geometry3DModerate60 FPS

About Topology of Surfaces

The Euler Characteristic

For any triangulated surface, the Euler characteristic χ = V − E + F (vertices minus edges plus faces) is a topological invariant — it doesn't change under continuous deformations. For a sphere χ=2; a torus χ=0; a double torus χ=−2. The formula χ = 2−2g relates it to genus g, the number of holes in the surface.

Orientability

A surface is orientable if you can consistently define an "outward" normal everywhere — like a sphere or torus. The Möbius strip is the simplest non-orientable surface: a bug walking along its middle edge returns to its start but mirrored. The Klein bottle is a closed non-orientable surface that cannot be embedded in 3D space without self-intersection.

Gaussian Curvature

Gaussian curvature K = κ₁·κ₂ (product of principal curvatures) is intrinsic to the surface. A sphere has K>0 everywhere (red); a saddle point has K<0 (blue); a cylinder or flat plane has K=0 (green). The Gauss-Bonnet theorem links total curvature to topology: ∬K dA = 2πχ — the integral of curvature equals 2π times the Euler characteristic.

About this simulation

Six parametric surfaces — sphere, torus, double torus, Klein bottle, Möbius strip and Boy's surface — are rendered in 3D so you can directly compare their genus, Euler characteristic and orientability. Curvature colouring (red for positive, blue for negative, green near zero) makes the abstract formula χ = 2 − 2g visible as an actual shape you can rotate.

🔬 What it shows

Each button loads a different parametric surface and instantly updates its genus, Euler characteristic, orientability and boundary count in the Topology Stats panel, so the numbers and the geometry stay linked.

🎮 How to use

Pick a surface (Sphere, Torus, Double Torus, Klein Bottle, Möbius Strip, Boy's Surface), then toggle Wireframe, Solid + Wire, Colour by curvature or Auto-rotate to inspect it from every angle.

💡 Did you know?

The Klein bottle and Boy's surface can't be embedded in 3D space without self-intersection — the version shown here is an "immersion", a necessary compromise to visualise a non-orientable surface at all.

Frequently asked questions

What does "genus" actually mean?

Genus g counts the number of holes or handles a surface has. A sphere has g=0, a torus (donut) has g=1, and the double torus shown here has g=2 — one extra handle for each additional hole.

What is the Euler characteristic formula shown in the stats?

χ = 2 − 2g relates a surface's Euler characteristic directly to its genus for orientable surfaces. The sphere gives χ=2, the torus χ=0, and the double torus χ=−2, matching the values in the Topology Stats panel as you switch surfaces.

Why are the Klein bottle and Möbius strip "non-orientable"?

On these surfaces there's no consistent way to define "inside" versus "outside" or clockwise versus counter-clockwise — a shape sliding around the surface can come back mirror-flipped. The Orientable stat flips to "No" for these two.

Why does the Möbius strip have a boundary but the others don't?

The Möbius strip is the only surface here with an edge you could trace with a finger without lifting it — a single continuous boundary curve. The other five surfaces are "closed", with no edges at all, which is why Boundaries reads 0 for them.

What does the curvature colouring represent?

Red marks regions of positive Gaussian curvature (dome-like, curving the same way in all directions), blue marks negative curvature (saddle-like), and green marks near-zero curvature (flat or cylindrical), letting you see local shape without reading any equations.

⚙ Under the hood

Topological surfaces: genus, Euler characteristic, Klein bottle and Mobius strip interactively explored.

topologygenusEuler characteristicKlein bottleMobius strip

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install