Threejs Procedural Buildings And Cities

Procedural Buildings and Cities

Treat architecture as a compiler: decide the runtime package, produce and validate a serializable plan, then emit geometry. The plan owns massing, exposed surfaces, placements, material slots, and stable identity.

Process

1. Select the runtime package from mutability and repetition.

   Workload	Package
   Static building or chunk	merged indexed BufferGeometry per material slot
   Editable varied modules	BatchedMesh per compatible material slot
   Repeated identical topology	spatially paged InstancedMesh
   District-scale streaming	bounded chunks with projected-error LOD

   Initialize WebGPURenderer before gating WebGPU features. Architecture planning can remain CPU-deterministic; add storage or compute only for a measured city-scale visibility or update bottleneck.

   Complete when: every architectural element has one package, and every package has an explicit mutability, visibility, and identity reason.

2. Produce a valid building plan. Normalize units and settings, then apply the mass-operator rail: footprint pieces -> union/court subtraction -> extrude/stack -> inset/split -> optional connector. Choose only prevalidated alternatives; give every operator result a stable ID and validate it before the next operator. Read grammar-and-mesh-compiler.md when implementing these operators. Serialize footprints, mass volumes, exposed intervals, placements, module usage, ownership, material slots, UV scale, and budgets.

   Complete when: the same inputs reproduce the same operator choices and IDs, every operator output passes its topology/dimension/ownership gate, and geometry emission is unnecessary to diagnose an invalid plan.

3. Resolve exposed boundaries before facade placement. Subtract shared or blocked side intervals, quantize each surviving interval into legal bays, and attach facade, roof, trim, and corner placements to those intervals. Read grammar-and-mesh-compiler.md when implementing footprint subtraction, bay quantization, placement ownership, or module-local frames.

   Complete when: no facade interval lies inside the footprint, every legal interval has a declared placement or semantic blank, and corner ownership is unambiguous.

4. Close and validate the plan. Add visible caps, decks, soffits, and closure surfaces for validated connectors; resolve every placement through the module registry; then test registry completeness, ownership uniqueness, general overlap, winding, bounds, material membership, and UV density.

   For a heterogeneous site assembly, keep domain assets delegated to their owning skills and register each ruin, dock, boat, rock, vegetation cluster, or prop with a stable placement ID, owner, transform/frame/scale, support and clearance volumes, anchor, and LOD policy. Apply the deterministic heterogeneous-site-placement rules in grammar-and-mesh-compiler.md. When implementing candidate identity, random lanes, or phase ranking, import deterministic-placement-key.mjs. The helper does not own support, clearance, conflict detection, or phase admission. Place the landmark first, then solve access, support, and clearance before repeated detail.

   Complete when: every placement resolves, every surface has one owner, overlaps are empty or explicitly permitted, support/clearance gates pass, stable IDs replay independently of chunk load order and unrelated family insertion, and all emitted geometry or delegated assets trace to a plan record.

5. Compile by material slot and spatial boundary. Keep semantic material identities stable while choosing merge, batch, or instance emission. In Three.js r185 WebGPU, BatchedMesh iterates visible multi-draw entries: it improves object/state management but does not prove GPU draw collapse. Merge compatible static geometry or instance identical topology when draw collapse is required. Read grammar-and-mesh-compiler.md when implementing slot writers, paging, projected-error LOD, or draw accounting.

   Complete when: slot membership is complete, indexed bounds are finite, pages are independently cullable, LOD error is gated in physical pixels, and actual backend draw items are reported.

6. Bind materials and presentation. Use MeshStandardNodeMaterial or MeshPhysicalNodeMaterial per semantic slot. Preserve physical texture scale and data/color encodings. Hand final color to the scene's one RenderPipeline output transform, then dispose replaced geometries, batches, textures, and node resources.

   Complete when: flat material, grazing light, and final output agree on geometry and normals; one component owns output conversion; replacement and disposal leave no stale bounds or live resources.

7. Verify the compiler. Exercise simple and compound footprints, courts, bridges or connectors when supported, minimum legal spans, dense placement, repeated modules, and district paging across multiple seeds. Inspect silhouette, untextured geometry, corners, openings, setbacks, roofs, and LOD transitions.

   Complete when: every fixture has a valid plan, no internal facade intervals or placement overlaps, a complete registry, deterministic replay, correct bounds and material slots, stable UV scale, and measured triangle and draw counts.

Ownership Boundary

• Use $threejs-procedural-geometry for reusable profiles, sweeps, arches, frames, and low-level mesh writers.
• Use $threejs-procedural-materials for masonry, glass, metal, weathering, filtering, and material-field authoring.
• Use $threejs-procedural-fields for terrain and parcel fields consumed by a city layout.
• Use $threejs-scalable-real-time-shadows, $threejs-image-pipeline, and $threejs-visual-validation for scene-wide shadow, output, and evidence ownership.

This skill owns building massing, facade semantics, architectural module and site placement, plan validation, material-slot compilation, and architectural spatial LOD; delegated skills still own nonarchitectural asset generation.