recipe-webgl-lattice / Procedural form

Parametric lattice portal

Original FORM//GRAPH synthesis · design proposal

One indexed grid morphs between mathematical surfaces while a vertex shader carries pulse waves and a fragment shader handles restrained spectral color.

Three.jsGLSLWebGL

Where it belongs

Best for connected chapters, project states and scroll sequences where one form must transform rather than disappear.

Let scroll set a semantic state index; interpolate equations in the shader and pin labels to stable UV anchors.

Production sequence

  1. Generate a fixed 80 × 54 indexed grid with UV coordinates.
  2. Implement two surface functions and interpolate positions with a smooth state uniform.
  3. Add one travelling pulse to vertex displacement; avoid post-processing until composition works.
  4. Use a three-stop palette indexed by normal, depth and project state.
  5. Cap device pixel ratio, pause on invisibility and replace morph with crossfade in reduced motion.

Handoff contract

Deliverables
Three.js scene module + static SVG silhouette
Proposed runtime budget
≤ 180 KB custom code

This is a production brief, not a downloadable implementation. Budgets are proposed targets; validate them on the intended devices before release.

Supporting technique references

The linked tutorial supports the vector export step. The morphing lattice is FORM//GRAPH synthesis.