HomeClimate, Ecology & EnvironmentCool Roof Layer Conduction (2D)

Cool Roof Layer Conduction (2D)

Interactive 2D roof cross-section simulator: a three-layer thermal network (membrane, insulation, structural deck) integrates a real transient heat-conduction model in time, showing how a roof's albedo and emissivity change surface temperature, layer-by-layer heat flow, and the heat load reaching the building interior.

Climate, Ecology & Environment2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-urban-heat-mitigation-cool-roof-albedo ↗ Open standalone

A roof isn't a single temperature — it's a stack of materials, each with its own thermal mass, passing heat down from the sun-baked surface toward the conditioned space below. This 2D simulator models that stack directly as a three-layer transient thermal network (membrane, insulation, structural deck), integrating each layer's own heat-capacitance equation forward in time rather than solving one instantaneous surface balance. The cross-section on the left is color-coded by each layer's live temperature with arrows showing which way heat is currently flowing; the strip chart on the right traces the surface and deck temperatures over the simulated day so you can watch the deck's much larger thermal mass smooth out and lag behind the fast-swinging surface. Switch roof materials or dial in your own albedo, emissivity, wind and cloud cover to see how a cool-roof coating changes not just the peak surface temperature but the whole multi-hour thermal wave moving through the assembly and into the building.

⚙ Under the hood

Interactive 2D roof cross-section simulator: a three-layer thermal network (membrane, insulation, structural deck) integrates a real transient heat-conduction model in time, showing how a roof's albedo and emissivity change surface temperature, layer-by-layer heat flow, and the heat load reaching the building interior.

cool roofalbedourban heat mitigationheat conductionthermal massbuilding physicsclimate2D

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)