CityVisualizer
Problem
Urban planning decisions about skyscraper placement are made with inadequate visualization of their impact on pedestrian traffic flow. When a 60-story building drops into a city block, it does not just change the skyline — it fundamentally alters foot traffic patterns, wind corridors, shadow coverage, sidewalk density, and pedestrian routing for blocks in every direction. These effects compound when multiple towers cluster. Current planning tools treat buildings as static objects on a map. They are actually dynamic perturbations in a complex pedestrian flow system.
Approach
CityVisualizer is a 3D interactive simulation that renders a city block grid and lets users place skyscrapers of varying heights, then visualizes the resulting impact on simulated pedestrian traffic in real time. The visualization shows how building placement creates bottlenecks, redirects foot traffic, and generates congestion patterns that are invisible on a 2D site plan.
Built with Three.js for 3D rendering and Framer Motion for UI transitions, the tool treats the city grid as a weighted graph where building placement modifies edge weights (walkability scores) and simulated pedestrian agents route themselves using modified pathfinding that accounts for building density, shadow zones, and sidewalk capacity.
Implementation
The 3D scene renders a configurable city grid (default 10x10 blocks) with street-level camera and orbit controls. Users click to place buildings at various heights (10-80 stories) and footprints. Pedestrian agents spawn at configurable origin points and route to destinations using A* pathfinding over the modified grid.
Heatmap overlays show pedestrian density per block segment — green for low traffic, red for congestion. Shadow projections render in real time based on building height and configurable sun position. The tool surfaces quantitative metrics: average pedestrian travel time before/after building placement, congestion score, and dead-zone identification (blocks that become effectively unwalkable).
The simulation runs entirely client-side using requestAnimationFrame for the render loop and Web Workers for agent pathfinding computation to maintain 60fps during large simulations.