Build guide · Experiment 09

How FORMA was built.

One session · three polish passes · six sculptures · zero image files

The premise

FORMA is a fictional gallery of generative sculpture. The brief was to show the heavy end of the graphics range: real 3D, physically based materials, and reflections that move. Everything on the stage is live WebGL through three.js. There are no rendered images and no video, just geometry, light, and a baked studio environment.

Sculpture as equation

Each of the six objects is a different way of turning math into a body you can walk around.

Trefoil Cascade is a TorusKnotGeometry with high tube resolution.
Aizawa integrates a chaotic attractor for five thousand steps, feeds the points to a CatmullRomCurve3, and skins it with a TubeGeometry.
Planetoid VII takes a detailed icosahedron and displaces every vertex along its normal by five octaves of noise, then recomputes normals so the light reads the new crags.
Gyroid Field samples the triply periodic equation sin x·cos y + sin y·cos z + sin z·cos x across a grid and drops an instanced cube wherever the surface passes through zero.
Phyllotaxis Bloom places 360 instanced petals on the golden angle, the same spiral a sunflower uses.
Drapery pushes a sphere into standing waves until it hangs like frozen fabric.

// Aizawa attractor → a single sculptural ribbon
let x=0.1,y=0,z=0; const pts=[];
for (let i=0;i<5200;i++){
  const dx=(z-0.7)*x - 3.5*y;
  const dy=3.5*x + (z-0.7)*y;
  const dz=0.6 + 0.95*z - z*z*z/3 - (x*x+y*y)*(1+0.25*z) + 0.1*z*x*x*x;
  x+=dx*0.008; y+=dy*0.008; z+=dz*0.008;
  if (i>300) pts.push(new THREE.Vector3(x*1.5, z*1.5-1.2, y*1.5));
}
const geo = new THREE.TubeGeometry(new THREE.CatmullRomCurve3(pts), 3000, 0.028, 14);

Four casts, one form

The same mesh can be recast in chrome, bronze, obsidian, or marble from the plaque. Each is a MeshPhysicalMaterial tuned by metalness, roughness, and clearcoat. Because the material is swapped live, one geometry becomes four completely different objects. Marble adds a sheen layer; obsidian adds a clearcoat so it stays glassy even while nearly black.

A room that does not exist

The reflections are the whole trick. There is no HDR file to download: a RoomEnvironment is rendered once into a PMREMGenerator, producing a pre-filtered environment map that every surface samples. With ACESFilmicToneMapping and a spotlight key, a rim light, and a warm fill, the chrome trefoil ends up reflecting a studio that was never modelled in full.

Making it feel like a gallery

The plinth and floor glow. A dark cylinder plinth sits under a canvas-generated radial gradient on the floor, added with additive blending, so each object floats in its own pool of light.
Orbit, then rest. OrbitControls with damping let you walk around a piece; the auto-rotate pauses while you drag and resumes after a couple of idle seconds.
Grow-in transitions. Switching works tweens the old sculpture down to nothing and the new one up from a speck, so the collection feels curated rather than swapped.
Grain and vignette. A CSS grain and vignette sit over the canvas to kill the clean-render look and give the whole stage a photographed weight.

Three passes

Pass 1: full build, then screenshots of all six forms and a material swap. Every sculpture rendered and the casts worked; the geometry and reflections held up frozen.
Pass 2: the mobile fix. On a portrait phone the object was fighting the headline, so the camera now pulls back and lowers its target on narrow viewports, a scrim sits behind the hero text, and the redundant paragraph is dropped on small screens.
Pass 3: reduced-motion verification (auto-rotate off, one static frame), performance guards (the render loop pauses when the tab is hidden, pixel ratio capped at 2), and geometry disposal on every swap so long sessions never leak.

Live site: buloy.space/x/forma · All experiments: buloy.space/x