Quick summary

  • Procedural geometry enables changing 3D experiences without relying only on fixed assets. With Three.js and WebGPU, though, shape count, detail, and interaction cadence must become explicit rendering budgets.
  • Teams can use generative form for visual differentiation, but it remains sustainable only when complexity is bounded from design through runtime.
  • Write a scene budget for the prototype—instance count, detail, resolution, and quality-reduction behavior—before adding another visual effect.

What happened

Procedural geometry is compelling because it turns rules, data, or interaction into form. Work on procedural geometry in Three.js and WebGPU and an interactive 3D cluster using Three.js and TSL points toward web scenes that are generated and changed over time.

The mindset shift is to avoid asking how many shapes can be created first. Ask how much work each frame is allowed to perform.

Generative form moves the source of complexity

Prebuilt assets place much of their complexity in content creation. Procedural geometry moves part of it to runtime: generation rules, parameters, animation, and input can all make the scene change continuously.

Many input paths converge into one smoothly rendered 3D form.
Many input paths converge into one smoothly rendered 3D form.

That is valuable for responsive experiences, but it also makes complexity less visible. A small parameter adjustment may increase element counts or the amount of work required to update the scene.

Design a scene budget with controllable quantities

No universal number fits every project. Instead, select limits that suit the scene: instance count, subdivision depth, particle density, render resolution, and input response rate.

Those limits belong in the design, not in a late patch after frame rate falls. When quality must decrease, the reduction should preserve the most important visual signal and interaction.

Separate the interaction model from the drawing model

Users can generate many events while the display has only a finite drawing cadence. Do not assume one event should recreate one scene; accumulate input into target state that the renderer reads on its next frame.

The same principle helps animation: update on the frame cadence and constrain work caused by state changes.

When procedural geometry fits

  • It fits when the generation rule is part of the story or interaction.
  • It works well for structured visualization and exploratory experiences.
  • It is a poor fit when a static asset, video, or image communicates equally well.
  • Test constrained hardware before treating the effect as essential.

In 5 Minutes

  • Procedural geometry moves complexity from assets to runtime.
  • A scene budget should use measurable limits.
  • Accumulate input and draw per frame rather than rebuilding per event.
  • Use 3D when generation rules add real user value.

Sources

Why developers should care

Teams can use generative form for visual differentiation, but it remains sustainable only when complexity is bounded from design through runtime.

  1. 1Write a scene budget for the prototype—instance count, detail, resolution, and quality-reduction behavior—before adding another visual effect.