achrefelouafi / ProceduralBuildingsThreeJS

# ProceduralBuildingsThreeJS
A web configurator for procedural buildings ported from Blender geometry nodes,
standing in a procedural city drawn as an architectural massing model, under a
cinematic lighting set. The **🏙 building** selector at the top of the GUI
switches between:
- **French**: a Haussmann-style Parisian apartment building (below);
- **New York**: the pre-war corner building from `NYC_CornerBuilding.blend`,
 evaluated live from its real node graph (see New York building);
- **Chinese**: the corner apartment building with shops, enclosed balconies,
 AC units, laundry and a rooftop sign from `CN_ApartmentBuilding.blend`,
 evaluated live the same way (see Chinese apartment building).
| French | New York | Chinese |
| --- | --- | --- |
| | | |
The French building is ported from the geometry-nodes setup in `FrenchBuilding.blend`:
- **FR_Procedural_Building** (modifier "French Building" on `FR_Building`) and its
 **FR_Facade_Side** subgroup assemble the facade modules;
- **FR_Interior_Rooms** / **FR_Interior_Curtains** (on `FR_Rooms` / `FR_Curtains`)
 read the building's instances and add lit rooms behind the windows and voile
 curtains;
- **FR_SidewalkFollowBuilding** (modifier "Follow Building" on `FR_Sidewalk` /
 `FR_Curb`, driven by Bays X / Y) stretches the paved sidewalk and the granite
 curb around the building. Both meshes and their materials are exported by
 `tools/export_fr_street.py` and drawn with the graph renderer and shader-graph
 compiler of the New York building (src/street.ts); the
 city's streets start at the curb.
The module meshes are exported to an instanced kit (`public/assets/kit.glb`), and
all four graphs are ported to TypeScript. The port is **verified against
Blender's evaluated geometry**: instance positions match to the float32 bit, and
the roof cap, room meshes with their shader attributes, and curtains match
within 2e-4 m (`npm run verify`).
## Run
 [code] 
GUI folders:
- **building**: the modifier inputs, with the same names and ranges as the .blend:
 bays X / Y, floors, dormers, balcony type (Existing / Exterior), detail pattern
 (Off / Same / Alternate / Random per floor), detail style (Refends / Pilasters /
 Ornamented Panels), detail seed, detail depth.
- **interiors**: room / curtain visibility, room seed, max room depth,
 curtain seed, no-curtain and closed-curtain chances, room brightness.
- **building · New York** (when selected): every input of the NYC_Building
 modifier, grouped by its panels (Building, Facade, Windows, Facade Modules, AC,
 Balconies, Interiors, Lighting, Shops, Escalator, Fire Escapes, Signs, Roof,
 Cornice), with the .blend's ranges and tooltips; angles in degrees; a
 "reset to .blend values" button.
- **building · Chinese** (when selected): every input of the CN_Building
 modifier, grouped by its panels (Building, Facade, Windows, Residents'
 Additions, Shops, Rooftop Sign, Roof, Street), including the Wall Tint color
 and the rooftop Sign Text; the same reset button.
- **🎬 li