HomeJournalThis post

WebGPU Minimal Surfaces as Living Sculpture

An equation-to-frame workflow samples a periodic implicit field, extracts a CPU reference mesh, verifies normals and seams, then renders within a WebGPU budget.

JP
JP Casabianca
UI/UX designer and full-stack engineer · Bogotá

WebGPU minimal surfaces can feel like living sculpture, but the frame should begin with verified geometry. An implicit equation, sampled field, extracted mesh, normals, GPU buffers, lighting, and fallback each have a separate failure boundary.

This guide builds a CPU reference with marching tetrahedra, then moves the proven mesh into a measured WebGPU and WGSL renderer. Art direction arrives through light and viewpoint without hiding seams or blowing the frame budget.

Turn WebGPU minimal surfaces into verified sculpture

WebGPU minimal surfaces begin as implicit scalar fields whose zero sets suggest continuous, saddle-rich forms. This guide samples one periodic field, extracts a reference mesh, verifies winding and seams, then renders it within a measured frame budget. The living sculpture comes from light and viewpoint; geometry remains deterministic and available as a static fallback before any GPU spectacle appears.

The study begins with a named implicit field such as a gyroid approximation sampled over one periodic unit cell. A zero set is the target geometry; the equation is not itself a triangle mesh. I preserve field values and cell coordinates until extraction is verified so shader lighting cannot hide holes, flipped winding, or accidental boundary seams.

Runnable artifact: The CPU reference interpolates a known field edge, checks zero-set proximity, and hashes the deterministic vertex.

Save this proof as minimal-surface-mesh.test.mjs and run node minimal-surface-mesh.test.mjs. Expected final line: PASS: minimal-surface reference mesh.

import assert from "node:assert/strict";import crypto from "node:crypto";
const field=([x,y,z])=>Math.sin(x)*Math.cos(y)+Math.sin(y)*Math.cos(z)+Math.sin(z)*Math.cos(x);const edge=(a,b)=>{const fa=field(a),fb=field(b),t=fa/(fa-fb);return a.map((v,i)=>v+t*(b[i]-v))};const a=[0,0,0],b=[Math.PI/2,0,0],p=edge(a,b);assert.ok(p.every(Number.isFinite));assert.ok(Math.abs(field(p))<1e-9);const hash=crypto.createHash("sha256").update(JSON.stringify(p)).digest("hex");assert.equal(hash.length,64);console.log("PASS: minimal-surface reference mesh");
WebGPU minimal surfaces equation-to-frame pipelinePeriodic scalar-field slices flow into a verified three-dimensional mesh and then a budgeted WGSL rendering frame. field slicesverified meshWGSL frame
Figure 1: Field sampling and mesh extraction are verified before the GPU renderer adds light and motion.

Sample one implicit unit cell.

A gyroid-like trigonometric field is evaluated on a bounded grid with periodic coordinates. The unit-cell slice shows positive, negative, and near-zero samples rather than pretending the equation is already a surface. Domain, resolution, precision, and iso-value are versioned inputs. Signed-distance typography offers a related implicit representation with a different reconstruction purpose.

A CPU reference uses marching tetrahedra because its smaller case table is easy to test, even if a production GPU path later uses marching cubes or another extractor. Fixtures include empty cells, one crossing, ambiguous-looking cube arrangements split into known tetrahedra, periodic boundaries, and deterministic triangle hashes. The reference is deliberately modest and readable.

Extract a CPU reference mesh

Marching tetrahedra supplies a small, inspectable case system for the artifact, while the classic Marching Cubes paper anchors the broader extraction lineage. Empty, crossed, periodic-edge, and degenerate fixtures verify interpolation and winding. Production may adopt a faster extractor, but it must reproduce the reference topology and bounded geometric error.

Normals come from the normalized field gradient at each vertex, with finite-difference epsilon tied to grid spacing. Degenerate gradients and tiny triangles are counted instead of normalized into NaN. A diagnostic render colors normal direction directly, allowing a reviewer to distinguish extraction errors from a dramatic light rig.

Verify normals, winding, and periodic seams.

Normals derive from the field gradient and receive an explicit fallback when magnitude is too small. Triangle orientation is compared with the gradient, zero-area faces are counted, and opposite unit-cell boundaries are matched. Metaballs with marching squares provides a two-dimensional stepping stone, but a closed three-dimensional mesh adds winding and normal obligations.

The WebGPU and WGSL specifications define resource, pipeline, and shader behavior; the classic Marching Cubes paper grounds the extraction lineage. They do not promise a frame rate on this device. Adapter identity, limits, canvas size, triangle count, upload time, GPU duration when available, and CPU fallback timing belong beside every performance claim.

PresetGridTriangle gateFrame target
StaticPrerenderRecordedNo GPU
Study24³Under 25kMobile stable
Gallery48³Under 120kDesktop 60 Hz
ProofDiagnosticUnbounded offlineNot interactive
Figure 2: Resolution presets are named by measurable geometry and delivery cost.

Move the pipeline into WebGPU and WGSL

The WebGPU specification defines adapter, device, resource, command, and presentation behavior, while the WGSL specification defines shader language semantics. The pipeline uploads verified buffers, shades normals, and handles device loss. It does not claim GPU extraction until that separate compute path has its own parity receipt.

Progressive quality starts with a static prerendered image, then a coarse CPU mesh, then the selected WebGPU resolution when support and budget permit. The sculpture remains understandable without GPU access or motion. Reduced-motion users receive a still camera, and loss of the device restores the last valid frame rather than a blank canvas.

Work a periodic seam through mesh verification. Select matching cells on the negative and positive x boundaries of one unit cell. Their scalar samples correspond under periodic indexing, edge intersections are wrapped into shared coordinates, and extracted boundary vertices match within a grid-derived tolerance after canonical sorting. WebGPU minimal surfaces fail this check if a duplicate edge produces a crack, if winding flips at the wrap, or if separate interpolation rounds move corresponding vertices apart.

The diagnostic renderer colors seam vertices and normal direction without post-processing. Only after that view is clean does the gallery frame hide the unit-cell box and use matte lighting. This sequence matters because a rotating camera can make a narrow crack look like a deliberate highlight. Geometry evidence must survive without the aesthetic treatment that will eventually make the sculpture feel continuous.

Set a triangle and frame budget

The semantic budget panel connects grid size to sample count, extracted triangles, buffer bytes, upload cost, and median frame duration. Presets are measured per device class. WebGPU generative art and reaction-diffusion WebGPU show why graceful fallback and thermal restraint are part of creative direction, not only engineering cleanup.

The mesh budget panel connects grid resolution to sample count, triangle count, buffer bytes, extraction time, and median frame cost. Increasing one slider can grow work cubically, so presets are named by measured budgets rather than vague low, medium, and ultra labels. Mobile defaults stay below their own thermal and memory envelope.

Budget device loss and thermal reality. WebGPU minimal surfaces run on adapters with different limits, drivers, memory pressure, and thermal envelopes. The application negotiates buffers from the verified mesh, caps device-pixel resolution, pauses when hidden, reduces motion on request, and listens for device loss. A failed initialization or lost device swaps to the static image with an explanatory but unobtrusive status; the article's thesis remains available as HTML and captions.

Performance evidence uses a cold initialization trace and sustained frame samples, not a single desktop peak. If a mobile device exceeds the declared frame or thermal budget, it receives a lower triangle preset or still frame rather than an unstable animation. WebGPU minimal surfaces should feel alive because the system is responsive to context, not because every viewer is forced through the most expensive sculpture the author's laptop can draw.

  1. 1Sample

    Evaluate field

  2. 2Extract

    Build CPU mesh

  3. 3Verify

    Normals + seams

  4. 4Render

    Budget GPU frame

Figure 3: Progressive delivery never leaves unsupported viewers with an empty canvas.

Light the surface without hiding defects

A grazing key light reveals curvature, a matte material avoids noisy reflections, and a diagnostic normal mode remains one click away. Slow camera movement respects reduced-motion settings and never changes the mesh. The unit-cell boundary stays visible in proof captures until seam checks pass, preventing a flattering crop from becoming the geometry validator.

Art direction uses slow camera movement, grazing key light, and a matte palette that reveals saddle curvature without metallic noise. I keep one unit-cell boundary faintly visible in the proof view, then remove it from the exhibition frame only after periodic seam tests pass. The living quality comes from changing light and viewpoint, not unstable geometry.

Archive the still image as a first-class work. The fallback render uses the same verified mesh, camera, material, and lighting revision as the interactive sculpture and carries its own dimensions and hash. WebGPU minimal surfaces therefore remain publishable in RSS readers, print, reduced-resource contexts, and future browsers that cannot recreate today's device behavior. A still is not a failure screenshot; it is one authored state in the edition. Treating it seriously also improves art direction, because the sculpture must communicate through form and light without relying on continuous motion to manufacture interest.

Release an equation-to-frame receipt

WebGPU minimal surfaces ship with equation, domain, grid, iso-value, extraction rule, interpolation, normal method, vertex and triangle counts, seam checks, buffer sizes, adapter identity, frame samples, fallback image, and hashes. A beautiful frame is the final layer of evidence, not a replacement for the mesh and performance contracts that make it trustworthy.

Implicit surface rendering begins with a scalar field, and triply periodic minimal surfaces supply a compelling family of repeated forms. Marching cubes WebGPU implementations and a WGSL sculpture pipeline are production options only after the CPU reference proves topology, seams, and normals.

Release evidence includes equation, domain, grid, tetrahedral split, interpolation rule, normal method, vertex and triangle counts, winding checks, boundary correspondence, renderer revision, and performance receipt. Any field or extraction change invalidates the mesh hash. A sculpture can feel ethereal while its production contract remains stubbornly concrete.

WebGPU minimal surfaces should remain understandable as equations, meshes, and static images before they become animated shader objects. Ship WebGPU minimal surfaces only after topology, seams, fallback, and device-specific frame budgets pass.