leaflet-city-mapper 0.0.3 → 0.0.4

package/src/core/syncGridLayer.js

@@ -1,21 +1,28 @@
+import { L } from '../globals/L.js';
+import { coreWhite } from '../globals/coreWhite.js';
+
 import { styleNativeMesh } from './styleNativeMesh.js';
 import { quadNativeMesh } from './quadNativeMesh.js';
 import { boundsQuad } from './boundsQuad.js';
 
+
 export function syncGridLayer(state) {
   const { source, textures, meshes } = state;
   let key, tile, opacity, retained, mesh, nw, se;
-  for ([key, tile] of Object.entries(source._tiles || {})) {
+  for (key in source._tiles) {
+    if (!Object.hasOwn(source._tiles, key)) continue;
+    tile = source._tiles[key];
     if (!tile.loaded || tile.el instanceof HTMLImageElement && !tile.el.naturalWidth) continue;
     opacity = (source.options.opacity ?? 1) * (tile._gpuOpacity ?? 1);
     retained = textures.get(key);
     mesh = meshes.get(key);
     if (mesh && retained?.image === tile.el && retained.url === (tile.el.currentSrc || tile.el.src)) {
       retained.used = true;
-      styleNativeMesh(state, mesh, [1, 1, 1], opacity);
+      styleNativeMesh(state, mesh, coreWhite, opacity);
     } else {
       [nw, se] = source._tileCoordsToNwSe(tile.coords);
-      mesh = quadNativeMesh(state, key, tile.el, boundsQuad(state, new L.LatLngBounds(nw, se)), opacity);
+      mesh = quadNativeMesh(state, key, tile.el, boundsQuad(state,
+        /* alloc */ new L.LatLngBounds(nw, se)), opacity);
     }
     if (mesh) mesh.renderOrder += tile.coords.z / 100;
   }

package/src/core/syncMarker.js

@@ -3,8 +3,10 @@ import { markerQuadCorners } from './markerQuadCorners.js';
 
 export function syncMarker(state) {
   const { source } = state;
-  let key, image, mesh;
-  for ([key, image] of [['shadow', source._shadow], ['icon', source._icon]]) {
+  let i, key, image, mesh;
+  for (i = 0; i < 2; i++) {
+    key = i ? 'icon' : 'shadow';
+    image = i ? source._icon : source._shadow;
     if (!(image instanceof HTMLImageElement) || !image.complete || !image.naturalWidth) continue;
     mesh = quadNativeMesh(state, key, image, markerQuadCorners(state, key, image), source.options.opacity ?? 1);
     if (key === 'shadow' && mesh) mesh.renderOrder -= 100 * 1e6;

package/src/core/syncVectorLayer.js

@@ -1,4 +1,6 @@
-import { nativeLayerState } from '../constants/nativeLayerState.js';
+import { geometryPixelStates } from '../globals/geometryPixelStates.js';
+
+
 import { nativeGeometry } from '../geometry/nativeGeometry.js';
 import { localPixelForGeometry } from './localPixelForGeometry.js';
 import { parseColor } from '../utils/parseColor.js';
@@ -6,21 +8,22 @@ import { putNativeMesh } from './putNativeMesh.js';
 
 export function syncVectorLayer(state) {
   const { source } = state;
-  nativeLayerState.geometryPixelStates.push(state);
+  geometryPixelStates.push(state);
   let geometry;
   try {
     geometry = nativeGeometry(source, state.map, localPixelForGeometry);
   } finally {
-    nativeLayerState.geometryPixelStates.pop();
+    geometryPixelStates.pop();
   }
   const { fill, stroke } = geometry;
-  let key, positions, color, opacity, r, g, b;
-  for ([key, positions, color, opacity] of [
-    ['fill', fill, source.options.fillColor || source.options.color, source.options.fillOpacity],
-    ['stroke', stroke, source.options.color, source.options.opacity],
-  ]) {
+  let i, key, positions, color, opacity, r, g, b;
+  for (i = 0; i < 2; i++) {
+    key = i ? 'stroke' : 'fill';
+    positions = i ? stroke : fill;
+    color = i ? source.options.color : source.options.fillColor || source.options.color;
+    opacity = i ? source.options.opacity : source.options.fillOpacity;
     if (!positions.length) continue;
     ({ r, g, b } = parseColor(color));
-    putNativeMesh(state, key, positions, [r, g, b], opacity ?? 1);
+    putNativeMesh(state, key, positions, /* alloc */ [r, g, b], opacity ?? 1);
   }
 }

package/src/core/synchronizeNativeLayer.js

@@ -1,35 +1,26 @@
+import { L } from '../globals/L.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 import { current } from './current.js';
 import { syncGridLayer } from './syncGridLayer.js';
 import { syncImageOverlay } from './syncImageOverlay.js';
 import { syncMarker } from './syncMarker.js';
 import { syncVectorLayer } from './syncVectorLayer.js';
-import { disposeMesh } from '../rendering/disposeMesh.js';
-import { destroyTexture } from '../rendering/destroyTexture.js';
+import { pruneNativeResources } from './pruneNativeResources.js';
 
 export function synchronizeNativeLayer(state) {
   const { source, meshes, textures } = state;
-  if (!current(state) || !state.backend.renderer || state.failed) return;
+  if (!current(state) || !sceneByLayer.get(state.backend).renderer || state.failed) return;
   if (!state.dirty && (!state.marker || !state.viewDirty)) return;
   state.dirty = false;
   state.viewDirty = false;
-  let mesh, texture, key;
+  let mesh, texture;
   for (mesh of meshes.values()) mesh._nativeUsed = false;
   for (texture of textures.values()) texture.used = false;
   if (source instanceof L.GridLayer) syncGridLayer(state);
   else if (source instanceof L.ImageOverlay) syncImageOverlay(state);
   else if (state.marker) syncMarker(state);
   else syncVectorLayer(state);
-  for ([key, mesh] of meshes) {
-    if (mesh._nativeUsed) continue;
-    disposeMesh(state.backend, mesh);
-    meshes.delete(key);
-    texture = textures.get(key);
-    if (texture) destroyTexture(state.backend, texture.texture);
-    textures.delete(key);
-  }
-  for ([key, texture] of textures) {
-    if (texture.used) continue;
-    destroyTexture(state.backend, texture.texture);
-    textures.delete(key);
-  }
+  pruneNativeResources(state);
 }

package/src/core/textureFor.js

@@ -1,48 +1,46 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { coreSampler } from '../globals/coreSampler.js';
+
 import { disposeMesh } from '../rendering/disposeMesh.js';
 import { destroyTexture } from '../rendering/destroyTexture.js';
 import { uploadCanvasTexture } from './uploadCanvasTexture.js';
+import { uploadNativeImage } from './uploadNativeImage.js';
+
 
-export function textureFor(state, key, image) {
-  if (!(image instanceof HTMLImageElement) && !(image instanceof HTMLCanvasElement)) {
-    throw new Error('WebGPU native raster layers require image or canvas tiles');
-  }
-  const { backend, textures, meshes } = state;
-  let texture = textures.get(key);
-  const url = image.currentSrc || image.src;
-  if (!texture || texture.image !== image || texture.url !== url) {
-    if (texture) {
-      const mesh = meshes.get(key);
-      if (mesh) disposeMesh(backend, mesh);
-      meshes.delete(key);
-      destroyTexture(backend, texture.texture);
-      textures.delete(key);
-    }
-    const width = image.naturalWidth || image.width, height = image.naturalHeight || image.height;
-    if (!width || !height) return;
-    const { device } = backend.renderer;
-    texture = {
-      device, image, url, format: 'rgba8unorm', uploaded: null,
-      texture: device.createTexture({
-        size: [width, height], format: 'rgba8unorm',
-        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
-      }),
-      sampler: device.createSampler({ minFilter: 'linear', magFilter: 'linear' }),
-    };
-    textures.set(key, texture);
-    if (image instanceof HTMLCanvasElement) {
-      texture.pending = true;
-      uploadCanvasTexture(state, key, texture, image, device, width, height);
-    } else {
-      try {
-        device.queue.copyExternalImageToTexture({ source: image }, { texture: texture.texture }, [width, height]);
-      } catch (error) {
-        texture.texture.destroy();
-        textures.delete(key);
-        throw error;
-      }
-      texture.uploaded = image;
-    }
-  }
-  texture.used = true;
-  return texture.uploaded === image ? texture : undefined;
+export function textureFor(state, key, image) {
+  if (!(image instanceof HTMLImageElement) && !(image instanceof HTMLCanvasElement)) {
+    throw /* alloc */ new Error('WebGPU native raster layers require image or canvas tiles');
+  }
+  const { backend, textures, meshes } = state;
+  let texture = textures.get(key);
+  const url = image.currentSrc || image.src;
+  if (!texture || texture.image !== image || texture.url !== url) {
+    if (texture) {
+      const mesh = meshes.get(key);
+      if (mesh) disposeMesh(backend, mesh);
+      meshes.delete(key);
+      destroyTexture(backend, texture.texture);
+      textures.delete(key);
+    }
+    const width = image.naturalWidth || image.width, height = image.naturalHeight || image.height;
+    if (!width || !height) return;
+    const { device } = sceneByLayer.get(backend).renderer;
+    texture = /* alloc */ {
+      device, image, url, format: 'rgba8unorm', uploaded: null,
+      texture: device.createTexture(/* alloc */ {
+        size: /* alloc */ [width, height], format: 'rgba8unorm',
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+      }),
+      sampler: device.createSampler(coreSampler),
+    };
+    textures.set(key, texture);
+    if (image instanceof HTMLCanvasElement) {
+      texture.pending = true;
+      uploadCanvasTexture(state, key, texture, image, device, width, height);
+    } else {
+      uploadNativeImage(state, key, texture, image, device, width, height);
+    }
+  }
+  texture.used = true;
+  return texture.uploaded === image ? texture : undefined;
 }

package/src/core/tooltipGetEvents.js

@@ -1,5 +1,8 @@
-import { mapCameraState } from '../constants/mapCameraState.js';
+import { tooltipEvents } from '../globals/tooltipEvents.js';
+
 
 export function tooltipGetEvents() {
-  return { ...mapCameraState.tooltipEvents.call(this), rotate: this._updatePosition, pitch: this._updatePosition, move: this._updatePosition };
+  const events = tooltipEvents.value.call(this);
+  events.rotate = events.pitch = events.move = this._updatePosition;
+  return events;
 }

package/src/core/tooltipSetPosition.js

@@ -1,8 +1,11 @@
-import { mapCameraState } from '../constants/mapCameraState.js';
+import { L } from '../globals/L.js';
+import { tooltipPosition } from '../globals/tooltipPosition.js';
+
+
 import { displayPoint } from '../camera/displayPoint.js';
 
 export function tooltipSetPosition(point) {
-  mapCameraState.tooltipPosition.call(this, point);
+  tooltipPosition.value.call(this, point);
   const delta = displayPoint(this._map, point).subtract(point);
   L.DomUtil.setPosition(this._container, L.DomUtil.getPosition(this._container).add(delta));
 }

package/src/core/transformNativePoint.js

@@ -0,0 +1,7 @@
+export function transformNativePoint(target, matrix, x, y, z, w) {
+  target.x = matrix.m11 * x + matrix.m21 * y + matrix.m31 * z + matrix.m41 * w;
+  target.y = matrix.m12 * x + matrix.m22 * y + matrix.m32 * z + matrix.m42 * w;
+  target.z = matrix.m13 * x + matrix.m23 * y + matrix.m33 * z + matrix.m43 * w;
+  target.w = matrix.m14 * x + matrix.m24 * y + matrix.m34 * z + matrix.m44 * w;
+  return target;
+}

package/src/core/updateGridOpacity.js

@@ -1,3 +1,4 @@
+
 import { cancelGridFade } from './cancelGridFade.js';
 import { scheduleGridFade } from './scheduleGridFade.js';
 
@@ -5,8 +6,10 @@ export function updateGridOpacity() {
   if (!this._map) return;
   const layer = this, now = Date.now();
   let fading = false, prune = false;
-  let tile;
-  for (tile of Object.values(this._tiles || {})) {
+  let key, tile;
+  for (key in this._tiles) {
+    if (!Object.hasOwn(this._tiles, key)) continue;
+    tile = this._tiles[key];
     if (!tile.current || !tile.loaded) continue;
     tile._gpuOpacity = this._map._fadeAnimated ? Math.min(1, (now - tile.loaded) / 200) : 1;
     if (tile._gpuOpacity < 1) fading = true;
@@ -17,7 +20,8 @@ export function updateGridOpacity() {
     }
   }
   if (prune && !this._noPrune) this._pruneTiles();
-  this._nativeGPU?.refresh?.();
+  refreshNativeLayerContract(this);
   cancelGridFade(layer);
   if (fading) scheduleGridFade(layer);
 }
+import { refreshNativeLayerContract } from './refreshNativeLayerContract.js';

package/src/core/updateNativeHover.js

@@ -0,0 +1,7 @@
+export function updateNativeHover(map, context, event, source) {
+  if (context.hovered === source) return;
+  if (context.hovered) context.fireDOMEvent.call(map, event, context.out, /* alloc */ [context.hovered]);
+  context.hovered = source;
+  if (source) context.fireDOMEvent.call(map, event, context.over, /* alloc */ [source]);
+  map.getContainer().style.cursor = source ? 'pointer' : '';
+}

package/src/core/updateNativeLayerView.js

@@ -1,6 +1,9 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 import { update } from '../scene/update.js';
 
 export function updateNativeLayerView() {
   this.viewDirty = true;
-  if (this.backend._shared) update(this.backend);
+  if (sceneByLayer.get(this.backend)._shared) update(this.backend);
 }

package/src/core/uploadCanvasTexture.js

@@ -1,19 +1,22 @@
 import { current } from './current.js';
 import { refreshNativeLayer } from './refreshNativeLayer.js';
 
-export async function uploadCanvasTexture(state, key, texture, image, device, width, height) {
-  let bitmap;
-  try {
-    bitmap = await createImageBitmap(image);
-    if (!current(state) || state.textures.get(key) !== texture) return;
-    device.queue.copyExternalImageToTexture({ source: bitmap }, { texture: texture.texture }, [width, height]);
-    texture.uploaded = image;
-    texture.pending = false;
-    refreshNativeLayer(state);
-  } catch (error) {
-    state.failed = true;
-    state.source.fire('error', { error });
-  } finally {
-    bitmap?.close();
-  }
+export async function uploadCanvasTexture(state, key, texture, image, device, width, height) {
+  let bitmap;
+  try {
+    bitmap = await createImageBitmap(image);
+    if (!current(state) || state.textures.get(key) !== texture) return;
+    device.queue.copyExternalImageToTexture(
+      /* alloc */ { source: bitmap },
+      /* alloc */ { texture: texture.texture },
+      /* alloc */ [width, height]);
+    texture.uploaded = image;
+    texture.pending = false;
+    refreshNativeLayer(state);
+  } catch (error) {
+    state.failed = true;
+    state.source.fire('error', /* alloc */ { error });
+  } finally {
+    bitmap?.close();
+  }
 }

package/src/core/uploadNativeImage.js

@@ -0,0 +1,13 @@
+export function uploadNativeImage(state, key, texture, image, device, width, height) {
+  try {
+    device.queue.copyExternalImageToTexture(
+      /* alloc */ { source: image },
+      /* alloc */ { texture: texture.texture },
+      /* alloc */ [width, height]);
+  } catch (error) {
+    texture.texture.destroy();
+    state.textures.delete(key);
+    throw error;
+  }
+  texture.uploaded = image;
+}

package/src/geometry/addBridges.js

@@ -1,88 +1,29 @@
-import { createMesh } from '../rendering/createMesh.js';
-import { triangulate } from '../triangulation/triangulate.js';
-import { local } from './bridgeLocal.js';
-import { push } from './push.js';
-import { below } from './below.js';
-
-/**
- * Bare-earth DEMs drop bridges: `getElevation` returns the deck height inside these polygons (GeoJSON
- * Polygon/MultiPolygon with Z, e.g. IGN BD TOPO), and one mesh draws the 1.2 m thick decks.
- * ponytail: anything under a deck (quays, boats asking `getElevation`) also gets the deck height.
- */
-
-export function addBridges(backend, geojson) {
-  const map = backend._map, crs = map.options.crs, zoom = backend._terrainZoom;
-  const origin = crs.project(backend.location), metres = Math.cos(backend.location.lat * Math.PI / 180);
-  const base = backend.root.position[1], position = [], normal = [], color = [];
-  backend._bridges = new Map();
-  let geometry, polygons, polygon, rings, ring, path, pixels, points, lng, lat, z, p, coordinate;
-  let triangles, paths, start, i, contour, holes, bridgeTriangles, xs, ys, t, triangle, bridge, x, y;
-  let key, a, b, c, pa, pb, pc, start2, q, length, n, corner;
-  for ({ geometry } of geojson.features) {
-    polygons = geometry.type === 'Polygon' ? [geometry.coordinates] : geometry.type === 'MultiPolygon' ? geometry.coordinates : [];
-    for (polygon of polygons) {
-      rings = [];
-      for (ring of polygon) {
-        path = ring.slice(0, -1);
-        if (path.length >= 3) rings.push(path);
-      }
-      if (!rings.length) continue;
-      pixels = [], points = [];
-      for (ring of rings) for ([lng, lat, z] of ring) {
-        p = map.project([lat, lng], zoom);
-        pixels.push([p.x, p.y, z]);
-      }
-      for (ring of rings) for (coordinate of ring) points.push(local(coordinate, crs, origin, metres, base));
-      triangles = void 0;
-      try {
-        paths = [];
-        start = 0;
-        for (ring of rings) {
-          path = [];
-          for (i = 0; i < ring.length; i++) path.push({ x: pixels[start + i][0], y: pixels[start + i][1] });
-          paths.push(path);
-          start += ring.length;
-        }
-        [contour, ...holes] = paths;
-        triangles = triangulate(contour, holes);
-      } catch { continue; }
-      bridgeTriangles = [], xs = [], ys = [];
-      for (t of triangles) {
-        triangle = [];
-        for (i of t) triangle.push(pixels[i]);
-        bridgeTriangles.push(triangle);
-      }
-      for (p of pixels) { xs.push(p[0]); ys.push(p[1]); }
-      bridge = {
-        triangles: bridgeTriangles,
-        min: [Math.min(...xs), Math.min(...ys)],
-        max: [Math.max(...xs), Math.max(...ys)],
-      };
-      for (x = Math.floor(bridge.min[0] / 64); x <= Math.floor(bridge.max[0] / 64); x++) {
-        for (y = Math.floor(bridge.min[1] / 64); y <= Math.floor(bridge.max[1] / 64); y++) {
-          key = `${x}/${y}`;
-          backend._bridges.set(key, [...backend._bridges.get(key) || [], bridge]);
-        }
-      }
-      for ([a, b, c] of triangles) {
-        // Counter-clockwise seen from above, so double-sided shading keeps the top lit.
-        [pa, pb, pc] = [points[a], points[b], points[c]];
-        if ((pb[2] - pa[2]) * (pc[0] - pa[0]) - (pb[0] - pa[0]) * (pc[2] - pa[2]) < 0) [b, c] = [c, b];
-        for (i of [a, b, c]) push(position, normal, color, points[i], [0, 1, 0]);
-        for (i of [a, c, b]) push(position, normal, color, below(points[i]), [0, -1, 0]);
-      }
-      start2 = 0;
-      for (ring of rings) {
-        for (i = 0; i < ring.length; i++) {
-          p = points[start2 + i], q = points[start2 + (i + 1) % ring.length];
-          length = Math.hypot(q[0] - p[0], q[2] - p[2]) || 1, n = [(q[2] - p[2]) / length, 0, -(q[0] - p[0]) / length];
-          for (corner of [p, q, below(q), p, below(q), below(p)]) push(position, normal, color, corner, n);
-        }
-        start2 += ring.length;
-      }
-    }
-  }
-  if (position.length) {
-    backend._bridgeMesh = createMesh(backend, { position, normal, color });
-  }
-}
+import { radians } from '../globals/radians.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { createMesh } from '../rendering/createMesh.js';
+import { bridgePolygon } from './bridgePolygon.js';
+
+/**
+ * Bare-earth DEMs drop bridges: `getElevation` returns the deck height inside these polygons (GeoJSON
+ * Polygon/MultiPolygon with Z, e.g. IGN BD TOPO), and one mesh draws the 1.2 m thick decks.
+ * ponytail: anything under a deck (quays, boats asking `getElevation`) also gets the deck height.
+ */
+export function addBridges(backend, geojson) {
+  const map = backend._map, crs = map.options.crs, zoom = sceneByLayer.get(backend)._terrainZoom;
+  const origin = crs.project(sceneByLayer.get(backend).location), metres = Math.cos(sceneByLayer.get(backend).location.lat * radians);
+  const base = sceneByLayer.get(backend).root.position[1];
+  const position = /* alloc */ [], normal = /* alloc */ [], color = /* alloc */ [];
+  sceneByLayer.get(backend)._bridges = /* alloc */ new Map();
+  const context = /* alloc */ { backend, map, crs, zoom, origin, metres, base, position, normal, color };
+  let geometry, polygons, polygonIndex;
+  for ({ geometry } of geojson.features) {
+    if (geometry.type !== 'Polygon' && geometry.type !== 'MultiPolygon') continue;
+    polygons = geometry.coordinates;
+    for (polygonIndex = 0; polygonIndex < (geometry.type === 'Polygon' ? 1 : polygons.length); polygonIndex++) {
+      bridgePolygon(context, geometry.type === 'Polygon' ? polygons : polygons[polygonIndex]);
+    }
+  }
+  if (position.length) {
+    sceneByLayer.get(backend)._bridgeMesh = createMesh(backend, /* alloc */ { position, normal, color });
+  }
+}

package/src/geometry/below.js

@@ -1,3 +1,3 @@
 export function below(p) {
-  return [p[0], p[1] - 1.2, p[2]];
+  return /* alloc */ [p[0], p[1] - 1.2, p[2]];
 }

package/src/geometry/box.js

@@ -1,3 +1,8 @@
 export function box(x0, x1, z0, z1) {
-  return [[x0, z0], [x1, z0], [x1, z1], [x0, z1]];
+  return /* alloc */ [
+    /* alloc */ [x0, z0],
+    /* alloc */ [x1, z0],
+    /* alloc */ [x1, z1],
+    /* alloc */ [x0, z1],
+  ];
 }

package/src/geometry/bridgeEdge.js

@@ -0,0 +1,11 @@
+export function bridgeEdge(context, p, q) {
+  const { position, normal, color } = context;
+  const length = Math.hypot(q[0] - p[0], q[2] - p[2]) || 1;
+  const nx = (q[2] - p[2]) / length, nz = -(q[0] - p[0]) / length;
+  let k, corner;
+  for (k = 0; k < 6; k++) {
+    corner = k === 0 || k === 3 || k === 5 ? p : q;
+    position.push(corner[0], corner[1] - (k === 2 || k >= 4 ? 1.2 : 0), corner[2]);
+    normal.push(nx, 0, nz); color.push(0.6, 0.58, 0.54);
+  }
+}

package/src/geometry/bridgeElevation.js

@@ -1,8 +1,10 @@
 /** Height inside a bridge deck, or null outside its triangles. */
 export function bridgeElevation(point, bridges) {
   // Bridges bucketed by 64 DEM pixels.
+  const bucket = bridges?.get(`${Math.floor(point.x / 64)}/${Math.floor(point.y / 64)}`);
+  if (!bucket) return null;
   let bridge, a, b, c, d, u, v;
-  for (bridge of bridges?.get(`${Math.floor(point.x / 64)}/${Math.floor(point.y / 64)}`) || []) {
+  for (bridge of bucket) {
     if (point.x < bridge.min[0] || point.x > bridge.max[0] || point.y < bridge.min[1] || point.y > bridge.max[1]) {
       continue;
     }

package/src/geometry/bridgeFaces.js

@@ -0,0 +1,15 @@
+export function bridgeFaces(context, points, triangles) {
+  const { position, normal, color } = context;
+  let a, b, c, pa, pb, pc, i, k, p;
+  for ([a, b, c] of triangles) {
+    // Counter-clockwise seen from above, so double-sided shading keeps the top lit.
+    pa = points[a]; pb = points[b]; pc = points[c];
+    if ((pb[2] - pa[2]) * (pc[0] - pa[0]) - (pb[0] - pa[0]) * (pc[2] - pa[2]) < 0) { i = b; b = c; c = i; }
+    for (k = 0; k < 6; k++) {
+      i = k === 0 || k === 3 ? a : k === 1 || k === 5 ? b : c;
+      p = points[i];
+      position.push(p[0], p[1] - (k >= 3 ? 1.2 : 0), p[2]);
+      normal.push(0, k >= 3 ? -1 : 1, 0); color.push(0.6, 0.58, 0.54);
+    }
+  }
+}

package/src/geometry/bridgeLocal.js

@@ -1,4 +1,5 @@
+import { L } from '../globals/L.js';
 export function local([lng, lat, z], crs, origin, metres, base) {
-  const p = crs.project(new L.LatLng(lat, lng));
-  return [(p.x - origin.x) * metres, z - base, -(p.y - origin.y) * metres];
+  const p = crs.project(/* alloc */ new L.LatLng(lat, lng));
+  return /* alloc */ [(p.x - origin.x) * metres, z - base, -(p.y - origin.y) * metres];
 }

package/src/geometry/bridgePaths.js

@@ -0,0 +1,11 @@
+export function bridgePaths(rings, pixels) {
+  const paths = /* alloc */ [];
+  let start = 0, ring, path, i;
+  for (ring of rings) {
+    path = /* alloc */ [];
+    for (i = 0; i < ring.length; i++) path.push(/* alloc */ { x: pixels[start + i][0], y: pixels[start + i][1] });
+    paths.push(path);
+    start += ring.length;
+  }
+  return paths;
+}

package/src/geometry/bridgePolygon.js

@@ -0,0 +1,31 @@
+import { triangulate } from '../triangulation/triangulate.js';
+import { local } from './bridgeLocal.js';
+import { bridgePaths } from './bridgePaths.js';
+import { indexBridge } from './indexBridge.js';
+import { bridgeFaces } from './bridgeFaces.js';
+import { bridgeSides } from './bridgeSides.js';
+
+export function bridgePolygon(context, polygon) {
+  const { backend, map, zoom, crs, origin, metres, base } = context;
+  const rings = /* alloc */ [];
+  let ring, path, lng, lat, z, p, coordinate, paths, contour, holes, triangles;
+  for (ring of polygon) {
+    path = ring.slice(0, -1);
+    if (path.length >= 3) rings.push(path);
+  }
+  if (!rings.length) return;
+  const pixels = /* alloc */ [], points = /* alloc */ [];
+  for (ring of rings) for ([lng, lat, z] of ring) {
+    p = map.project(/* alloc */ [lat, lng], zoom);
+    pixels.push(/* alloc */ [p.x, p.y, z]);
+  }
+  for (ring of rings) for (coordinate of ring) points.push(local(coordinate, crs, origin, metres, base));
+  try {
+    paths = bridgePaths(rings, pixels);
+    [contour, ...holes] = paths;
+    triangles = triangulate(contour, holes);
+  } catch { return; }
+  indexBridge(backend, pixels, triangles);
+  bridgeFaces(context, points, triangles);
+  bridgeSides(context, points, rings);
+}

package/src/geometry/bridgeSides.js

@@ -0,0 +1,11 @@
+import { bridgeEdge } from './bridgeEdge.js';
+
+export function bridgeSides(context, points, rings) {
+  let start = 0, ring, i;
+  for (ring of rings) {
+    for (i = 0; i < ring.length; i++) {
+      bridgeEdge(context, points[start + i], points[start + (i + 1) % ring.length]);
+    }
+    start += ring.length;
+  }
+}

package/src/geometry/build.js

@@ -1,12 +1,16 @@
 import { triangle } from './triangle.js';
 
 export function build(parts) {
-  const position = [], normal = [], color = [];
-  let ring, bottom, top, tint, topRing, low, high, x, z, i, j;
+  const position = /* alloc */ [];
+  const normal = /* alloc */ [];
+  const color = /* alloc */ [];
+  const low = /* alloc */ [];
+  const high = /* alloc */ [];
+  let ring, bottom, top, tint, topRing, x, z, i, j;
   for ([ring, bottom, top, tint, topRing = ring] of parts) {
-    low = [], high = [];
-    for ([x, z] of ring) low.push([x, bottom, z]);
-    for ([x, z] of topRing) high.push([x, top, z]);
+    low.length = high.length = 0;
+    for ([x, z] of ring) low.push(/* alloc */ [x, bottom, z]);
+    for ([x, z] of topRing) high.push(/* alloc */ [x, top, z]);
     for (i = 0; i < ring.length; i++) {
       j = (i + 1) % ring.length;
       triangle(position, normal, color, low[i], low[j], high[j], tint); triangle(position, normal, color, low[i], high[j], high[i], tint);
@@ -15,5 +19,5 @@ export function build(parts) {
       triangle(position, normal, color, high[0], high[i], high[i + 1], tint); triangle(position, normal, color, low[0], low[i + 1], low[i], tint);
     }
   }
-  return { position, normal, color };
+  return /* alloc */ { position, normal, color };
 }