EcoTwin

Inspiration

I wanted to see how we could turn existing infrastructure into something that helps the environment. Our neighborhoods already have rooftops, parking lots, and open spaces that could support greener alternatives, but it can be difficult to understand which changes would make a difference.

I built EcoTwin to explore that question: what if we could redesign a familiar place and estimate its environmental impact before making physical changes?

What it does

EcoTwin transforms a selected area into an interactive 3D neighborhood. Users can add trees, rain gardens, green roofs, and porous paving, then compare the estimated effects on surface temperature, stormwater runoff, ground infiltration, and tree canopy coverage.

The app includes heat, shade, and stormwater visualization layers, along with before-and-after metrics. Users can adjust weather conditions to test different scenarios and generate realistic concept images of their proposed designs.

How we built it

I built EcoTwin with React, TypeScript, and Vite, using Three.js through React Three Fiber for the interactive 3D scene.

Google Maps handles location selection, while OpenStreetMap provides building footprints, roads, and mapped vegetation. A local image classifier uses color, brightness, and texture to estimate additional green cover from satellite imagery.

The environmental simulation uses 10-meter cells. Each intervention changes a cell’s surface properties, and cells along the selected boundary contribute proportionally to site totals.

Stormwater calculations use Green–Ampt infiltration, finite storage, interception, and roof drainage. The engine tracks how rainfall divides into runoff, water entering the ground, stored water, and intercepted water.

Surface temperature is calculated from an energy balance involving sunlight, thermal radiation, convection, conduction, and evaporative cooling. Open-Meteo supplies local modeled weather inputs, and baseline and edited scenarios use identical conditions.

For realistic visualization, a server endpoint sends a capture of the current 3D model to FLUX on Azure, which generates a photographic interpretation of the design.

Challenges we ran into

Creating the realistic view was one of my biggest challenges. The image needed realistic buildings, vegetation, and materials while preserving the layout, camera angle, and interventions from the original model. Getting that balance right required refining the image-generation workflow and the instructions given to the model.

Another challenge was connecting geographic geometry to the simulation grid. Irregular building footprints, partially covered boundary cells, and missing map data all affect how surfaces are represented and how results are calculated.

Accomplishments that we're proud of

I'm proud of bringing geographic data, interactive 3D editing, physics-based simulation, and generated concept imagery into one application.

Users can start with a real place, make environmental changes, and compare modeled outcomes in the same workspace. The visual layers and metrics panel also share the same simulation results, keeping the displayed comparisons consistent.

What we learned

I learned a lot about simulation, especially the physics behind infiltration, water storage, and surface heat.

I learned that seemingly simple changes, like planting a tree or adding a green roof, require careful assumptions about soil, moisture, shade, and materials. Water retained on a roof is different from water entering the ground, and surface temperature is different from air temperature.

I also learned that a useful simulation needs clear limitations. Testing equations and checking conservation help verify the implementation, but real-world accuracy still requires measurements and calibration.

What's next for EcoTwin

I want to validate the model against measured site data, improve soil and material inputs, and incorporate elevation and drainage networks to simulate water moving through a neighborhood.

EcoTwin currently uses flat terrain and provides uncalibrated scenario estimates. Improving those foundations, along with the consistency of realistic views, would make it more useful for evaluating actual projects.

My goal is to help communities explore how the infrastructure they already have could become greener, cooler, and more resilient.

Built With

• azure
• css
• google-maps-javascript-api
• google-maps-static-api
• google-places
• html
• javascript
• node.js
• open-meteo
• openfreemap
• openstreetmap
• overpass-api
• react
• react-three-drei
• react-three-fiber
• three.js
• typescript
• vite