Thermopolis

Inspiration

GENERAL Thermopolis was inspired by the growing impact of the Urban Heat Island (UHI) effect in major cities and its connection to climate change, energy consumption, and public health. We noticed that while this is a critical global issue, it’s often difficult to visualize or understand at a systems level. Traditional graphs and data don’t fully capture how individual urban design decisions, like roofing materials or green space placement, affect temperature in real time. We wanted to bridge that gap by creating an interactive experience where users can see and experiment with these effects directly.

What it does

Thermopolis allows users to build, modify, and analyze a virtual city while observing how their decisions impact temperature distribution and heat retention. Through real-time simulation, users can:

Simulate real-world environments using satellite data integration Visualize heat accumulation using a dynamic 3D heat map Experiment with materials and infrastructure to reduce urban temperatures Compete in a gamified mode to identify optimal cooling zones

Ultimately, it transforms complex environmental science into an intuitive, hands-on learning experience.

How we built it

Frontend & 3D Engine: Built using React and Vite, with Three.js (via React Three Fiber) handling the interactive 3D city rendering right in the browser. Procedural Generation: We wrote custom Voronoi noise algorithms to instantly generate randomized, organic city layouts for our Heat Hunt mode. Thermodynamic Simulation: We implemented a Cellular Automata algorithm (a multi-pass loop) to realistically simulate heat bleeding and diffusing between adjacent tiles based on their material albedo and cooling stats. Backend: Used Firebase Cloud Firestore to manage the real-time global leaderboard and user authentication. Used Flask to connect our machine learning model for our satellite image to 3D model generation.

Challenges we ran into

3D Performance: Rendering thousands of buildings, tiles, and a live heatmap simultaneously tanked our framerate. We solved this by implementing Three.js InstancedMesh and dynamically combining adjacent geometries, locking the app at a smooth 60fps. Simulating Realistic Heat: Initially, hot tiles didn't affect cool tiles. We had to engineer complex math to calculate the average temperature of every tile’s neighbors 15 times per second, allowing extreme heat to realistically "bleed" outward. Taming Procedural Generation: Pure randomness made the cities look chaotic. We had to build an algorithm that allowed the website to generate maps that were random but still had some type of coherence. This included making sure that there were some large patches of the various materials, as well as making sure that there wasn't sand placed as a roof for a building. Dynamic 3D Models: We weren't able to figure out how to add the models along with their textures, so we had to look at documentation to figure out how to make the models apply with their correct textures.

Accomplishments that we're proud of

We’re especially proud of successfully combining real-time physics simulation with a fully interactive 3D environment in the browser without sacrificing performance. Achieving a stable 60fps while rendering thousands of dynamic elements was a major milestone.

Another key accomplishment is the accuracy and responsiveness of our heat diffusion system, which makes the simulation feel realistic and educational rather than purely visual.

We’re also proud of the procedural generation system in Heat Hunt mode, which produces maps that feel both random and naturally structured. This allows us to make our gameplay engaging and replayable. The added feature of a leaderboard makes people feel more inclined to play the game as it adds an element of competition.

Finally, integrating a real-world data pipeline (satellite imagery - simulation) pushed the project beyond a simple game into something with real-world application potential.

What we learned

Beyond technical skills, we gained a deeper understanding of how urban design directly influences environmental conditions. We learned how factors like albedo, density, and green infrastructure interact in complex ways.

On the technical side, we developed experience in optimizing 3D rendering, managing state in performance-heavy applications, and designing scalable simulations. We also learned how to balance realism with usability. This ensured the simulation is accurate but still intuitive for users.

What's next for Thermopolis

Next, we want to expand Thermopolis into a more powerful and realistic urban planning tool. Planned improvements include:

More advanced climate modeling, including wind flow, shading effects, and seasonal variation Multiplayer or collaborative city-building, allowing users to design cities together or compete in real time AI-powered recommendations, suggesting optimal changes to reduce heat based on the current layout Mobile optimization, making the experience accessible across devices

Long-term, we envision Thermopolis being used not just as an educational tool, but also as a platform that professionals can use to make informed decisions about heat distribution in their designs.