MANIFOLD — Procedural Mathematical Surfaces & Topologies in Three.js

Showcase
, , , , ,
1

Hello everyone,

I’d like to share MANIFOLD, an interactive 3D digital gallery built with Three.js that explores procedural differential geometry, minimal surfaces, and topological manifolds in a cosmic, museum-like environment.

:link: Live Experience: https://matnoble.top/manifold/
:laptop: Author: MatNoble

:milky_way: Visual Philosophy & Design

Instead of cluttering the scene with assets or 3D models from external software, MANIFOLD calculates every single vertex in real-time from pure mathematical parametric equations.

The aesthetic is inspired by deep-space solitude and high-end art gallery exhibition:

  • Distant Star Illumination: A single sharp, cold-warm directional light simulating a distant white-dwarf star, eliminating artificial studio-box glare.
  • Cinematic Post-Processing: Selective UnrealBloomPass calibrated specifically for crystal reflections and Lorenz attractor energy lines.
  • Micro-Easing Transitions: Non-disruptive scale interpolation when morphing between different topological manifolds.

:triangular_ruler: Featured Manifolds & Algorithms

  1. Möbius Strip: Non-orientable 2-manifold with continuous parametric phase shift.
  2. Klein Bottle: Self-intersecting Figure-8 immersion in \mathbb{R}^3.
  3. Enneper Minimal Surface: Minimal surface with vanishing mean curvature (H \equiv 0).
  4. Dini’s Surface: Pseudosphere variant with constant negative Gaussian curvature.
  5. Clifford Torus: Stereographic projection from the 3-sphere S^3 into \mathbb{R}^3.
  6. Lorenz Attractor: 4th-order Runge-Kutta (RK4) integration with dynamic glowing attractor pulse.

:hammer_and_wrench: Technical Stack

  • Three.js (Core WebGL Renderer, OrbitControls, EffectComposer)
  • Shaders / Materials: MeshPhysicalMaterial (cold refractive glass with IOR 1.52), MeshStandardMaterial (astral titanium), and MeshNormalMaterial (clean spectral gradient).
  • Architecture: VitePress / Vue 3 SPA integration with strict memory leak prevention and WebGL context lifecycle management.

Feedback and suggestions from the community are warmly welcomed!

1 Like
2

It looks nice. I hope you will add more surfaces. My favourite is \frac{1}{x}+\frac{1}{y}+\frac{1}{z}=1.

Do you plan to add some interactive parameters? Usually equations have some parameters that could change the shape significantly.

Where do you calculate vertices – in the CPU or in the GPU?

When the mode is not wireframe, the surfaces look too black with accidental reflection sparks. Maybe this is intended effect, but it makes it hard to perceive the shape.

image
image1918×975 35.5 KB

3

Hello, The combination of procedural mathematics, Three.js, and the cosmic gallery concept makes the experience feel both technical and artistic. I especially like the idea of generating the geometry entirely from mathematical equations rather than relying on external 3D assets. The selection of manifolds and the Lorenz attractor also gives it a great educational angle.