3D buildings and feature extrusion

Building extrusion takes a 2D polygon footprint and a height value and turns them into a 3D mesh. The math draws directly on polygon triangulation from Chapter 11 and the rendering pipeline from Chapter 23.

From footprint to mesh

A building is a 2D polygon (the footprint) + a height. Extruding it means:

1. Triangulate the floor polygon (ear-clipping or Delaunay)
2. Lift each vertex by the height to create the roof
3. Generate wall quads for each footprint edge
4. Flip normals outward so lighting works correctly

function extrudePolygon(ring, height) {
  const floor = triangulate(ring);          // floor triangles (facing down)
  const roof  = floor.map(v => ({...v, z: v.z + height })); // same, raised

  const walls = [];
  for (let i = 0; i < ring.length - 1; i++) {
    const [a, b] = [ring[i], ring[i + 1]];
    // Two triangles per wall quad
    walls.push(
      { a, b, c: { ...b, z: b.z + height } },
      { a, b: { ...b, z: b.z + height }, c: { ...a, z: a.z + height } }
    );
  }

  return { floor, roof, walls };
}

Each wall edge becomes two triangles (a quad split along the diagonal). The normal direction — pointing outward from the building — determines which direction receives lighting. A reversed normal makes a wall appear lit when it should be in shadow.

Height data sources

Source	Height attribute	Coverage
OpenStreetMap	building:height (metres)	Patchy but growing
Overture Maps	height field	Global, curated
Microsoft Building Footprints	height	60+ countries
Lidar-derived	Actual roof height	Urban areas
Default fallback	10 m (2–3 storeys)	Anywhere

Level of Detail (LOD)

Rendering 500,000 buildings as full 3D meshes tanks performance. LOD strategies:

• Zoom < 14: show 2D footprints only (no extrusion)
• Zoom 14–15: simplified boxes, no roof detail
• Zoom > 15: full mesh with roof geometry, textures

map.addLayer({
  id: "buildings-3d",
  type: "fill-extrusion",
  source: "composite",
  "source-layer": "building",
  minzoom: 14,
  filter: ["has", "height"],
  paint: {
    "fill-extrusion-height": ["get", "height"],
    "fill-extrusion-base": ["get", "min_height"],  // for multi-level buildings
    "fill-extrusion-color": "#1C1C28",
    "fill-extrusion-opacity": 0.9,
  },
});