leaflet-city-mapper 0.0.1 → 0.0.3

package/src/core/textureFor.js

@@ -0,0 +1,48 @@
+import { disposeMesh } from '../rendering/disposeMesh.js';
+import { destroyTexture } from '../rendering/destroyTexture.js';
+import { uploadCanvasTexture } from './uploadCanvasTexture.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;
+}

package/src/core/tooltipGetEvents.js

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

package/src/core/tooltipSetPosition.js

@@ -0,0 +1,8 @@
+import { mapCameraState } from '../constants/mapCameraState.js';
+import { displayPoint } from '../camera/displayPoint.js';
+
+export function tooltipSetPosition(point) {
+  mapCameraState.tooltipPosition.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/updateGridOpacity.js

@@ -0,0 +1,23 @@
+import { cancelGridFade } from './cancelGridFade.js';
+import { scheduleGridFade } from './scheduleGridFade.js';
+
+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 || {})) {
+    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;
+    else if (!tile.active) {
+      this._onOpaqueTile(tile);
+      tile.active = true;
+      prune = true;
+    }
+  }
+  if (prune && !this._noPrune) this._pruneTiles();
+  this._nativeGPU?.refresh?.();
+  cancelGridFade(layer);
+  if (fading) scheduleGridFade(layer);
+}

package/src/core/updateNativeLayerView.js

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

package/src/core/uploadCanvasTexture.js

@@ -0,0 +1,19 @@
+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();
+  }
+}

package/src/geometry/addBridges.js

@@ -0,0 +1,88 @@
+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 });
+  }
+}

package/src/geometry/below.js

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

package/src/geometry/box.js

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

package/src/geometry/bridgeElevation.js

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

package/src/geometry/bridgeLocal.js

@@ -0,0 +1,4 @@
+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];
+}

package/src/geometry/build.js

@@ -0,0 +1,19 @@
+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;
+  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]);
+    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);
+    }
+    for (i = 1; i < ring.length - 1; i++) {
+      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 };
+}

package/src/geometry/circleAt.js

@@ -0,0 +1,5 @@
+export function circleAt(center, radius, radiusY, count, index, offset = 0) {
+  const angle = index * Math.PI * 2 / count;
+  return new L.Point(center.x + Math.max(0, radius + offset) * Math.cos(angle),
+    center.y + Math.max(0, radiusY + offset) * Math.sin(angle));
+}

package/src/geometry/clipLine.js

@@ -0,0 +1,23 @@
+import { samePoint } from './samePoint.js';
+import { clipSegment } from './clipSegment.js';
+
+/** Clip a geographic line to [west, south, east, north] without joining disjoint pieces. */
+export function clipLine(line, bounds) {
+  const pieces = [];
+  let current;
+  let i, segment;
+  for (i = 1; i < line.length; i++) {
+    if (samePoint(line[i - 1], line[i])) continue;
+    segment = clipSegment(line[i - 1], line[i], bounds);
+    if (!segment) {
+      current = null;
+      continue;
+    }
+    if (current && samePoint(current.at(-1), segment[0])) current.push(segment[1]);
+    else {
+      current = segment;
+      pieces.push(current);
+    }
+  }
+  return pieces;
+}

package/src/geometry/clipSegment.js

@@ -0,0 +1,19 @@
+export function clipSegment(a, b, bounds) {
+  const [west, south, east, north] = bounds;
+  const dx = b[0] - a[0], dy = b[1] - a[1];
+  const p = [-dx, dx, -dy, dy], q = [a[0] - west, east - a[0], a[1] - south, north - a[1]];
+  let start = 0, end = 1;
+  let i, t;
+  for (i = 0; i < 4; i++) {
+    if (p[i] === 0) {
+      if (q[i] < 0) return null;
+    } else {
+      t = q[i] / p[i];
+      if (p[i] < 0) start = Math.max(start, t);
+      else end = Math.min(end, t);
+      if (start > end) return null;
+    }
+  }
+  if (start === end || dx === 0 && dy === 0) return null;
+  return [[a[0] + start * dx, a[1] + start * dy], [a[0] + end * dx, a[1] + end * dy]];
+}

package/src/geometry/computeBounds.js

@@ -0,0 +1,33 @@
+/** Cache local AABB and center for ray picking and transparent mesh sorting. */
+
+export function computeBounds(geometry) {
+  const min = [Infinity, Infinity, Infinity], max = [-Infinity, -Infinity, -Infinity], data = geometry.attributes.position.data;
+  let i;
+  for (i = 0; i < data.length; i++) {
+    min[i % 3] = Math.min(min[i % 3], data[i]);
+    max[i % 3] = Math.max(max[i % 3], data[i]);
+  }
+  const instances = geometry.attributes.instanceOffset;
+  if (instances) {
+    let axis, offset, low, high;
+    for (axis = 0; axis < 3; axis++) {
+      low = Infinity;
+      high = -Infinity;
+      for (offset = axis; offset < instances.data.length; offset += instances.size) {
+        low = Math.min(low, instances.data[offset]);
+        high = Math.max(high, instances.data[offset]);
+      }
+      min[axis] = Math.fround(min[axis] + low);
+      max[axis] = Math.fround(max[axis] + high);
+    }
+  }
+  const center = [];
+  for (i = 0; i < min.length; i++) center.push((min[i] + max[i]) / 2);
+  let radius = instances ? Math.hypot(max[0] - min[0], max[1] - min[1], max[2] - min[2]) / 2 : 0;
+  for (i = 0; !instances && i < data.length; i += 3) {
+    radius = Math.max(radius, Math.hypot(
+      data[i] - center[0], data[i + 1] - center[1], data[i + 2] - center[2]
+    ));
+  }
+  geometry.bounds = { min, max, center, radius };
+}

package/src/geometry/conformModelToTerrain.js

@@ -0,0 +1,67 @@
+import { computeBounds } from './computeBounds.js';
+import { getElevation } from '../terrain/getElevation.js';
+import { update } from '../scene/update.js';
+import { updateWorldMatrix } from '../scene/updateWorldMatrix.js';
+import { vertexNormals } from './vertexNormals.js';
+import { collectMeshes } from '../collision/collectMeshes.js';
+import { HEIGHT } from '../constants/HEIGHT.js';
+
+export function conformModelToTerrain(layer, terrain) {
+  if (!layer.model) return;
+  const meshes = [];
+  collectMeshes(layer.model, meshes);
+  let mesh, positions, geometry, position, normals, attribute, normal, world, inverse, i, x, y, z;
+  let worldY, weight, worldX, worldZ, point, elevation, offset;
+  if (!terrain?._terrainReady || !layer.options.terrainConform) {
+    for (mesh of meshes) {
+      positions = mesh.geometry._terrainBasePositions;
+      if (!positions) continue;
+      geometry = mesh.geometry, position = geometry.attributes.position;
+      position.data.set(positions);
+      mesh.device.queue.writeBuffer(position.buffer, 0, positions);
+      normals = geometry._terrainBaseNormals;
+      if (normals) {
+        geometry.attributes.normal.data.set(normals);
+        mesh.device.queue.writeBuffer(geometry.attributes.normal.buffer, 0, normals);
+      }
+      computeBounds(geometry);
+    }
+    return;
+  }
+
+  updateWorldMatrix(layer.root);
+  const map = layer._map, crs = map.options.crs;
+  const origin = crs.project(layer._shared._sceneOrigin);
+  const metres = Math.cos(layer._shared._sceneOrigin.lat * Math.PI / 180);
+  const pixelScale = crs.scale(terrain._terrainZoom);
+
+  for (mesh of meshes) {
+    geometry = mesh.geometry, attribute = geometry.attributes.position;
+    geometry._terrainBasePositions ||= attribute.data.slice();
+    normal = geometry.attributes.normal;
+    geometry._terrainBaseNormals ||= normal.data.slice();
+    attribute.data.set(geometry._terrainBasePositions);
+    world = mesh.worldMatrix, inverse = new DOMMatrix(world).inverse().toFloat64Array();
+    for (i = 0; i < attribute.data.length; i += 3) {
+      x = attribute.data[i], y = attribute.data[i + 1], z = attribute.data[i + 2];
+      worldY = world[1] * x + world[5] * y + world[9] * z + world[13];
+      weight = Math.max(0, Math.min(1, 1 - (worldY - layer.root.position[1]) / HEIGHT));
+      if (!weight) continue;
+      worldX = world[0] * x + world[4] * y + world[8] * z + world[12];
+      worldZ = world[2] * x + world[6] * y + world[10] * z + world[14];
+      point = crs.transformation.transform(new L.Point(
+        origin.x + worldX / metres, origin.y - worldZ / metres), pixelScale);
+      elevation = getElevation(terrain, point);
+      if (!Number.isFinite(elevation)) continue;
+      offset = (elevation - worldY) * weight;
+      attribute.data[i] += inverse[4] * offset;
+      attribute.data[i + 1] += inverse[5] * offset;
+      attribute.data[i + 2] += inverse[6] * offset;
+    }
+    mesh.device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
+    normal.data.set(vertexNormals(attribute.data, geometry.attributes.index?.data));
+    mesh.device.queue.writeBuffer(normal.buffer, 0, normal.data);
+    computeBounds(geometry);
+  }
+  update(layer);
+}

package/src/geometry/cross.js

@@ -0,0 +1,3 @@
+export function cross(a, b) {
+  return [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
+}

package/src/geometry/disk.js

@@ -0,0 +1,11 @@
+import { triangle } from './nativeTriangle.js';
+import { diskAt } from './diskAt.js';
+
+export function disk(point, center, radius, target, radiusY = radius) {
+  if (!(radius > 0) || !(radiusY > 0)) return;
+  const count = Math.max(12, Math.min(128, Math.ceil(Math.PI * Math.sqrt(radius))));
+  let i;
+  for (i = 0; i < count; i++) {
+    triangle(point, target, center, diskAt(center, radius, radiusY, count, i), diskAt(center, radius, radiusY, count, i + 1));
+  }
+}

package/src/geometry/diskAt.js

@@ -0,0 +1,4 @@
+export function diskAt(center, radius, radiusY, count, index) {
+  return new L.Point(center.x + radius * Math.cos(index * 2 * Math.PI / count),
+    center.y + radiusY * Math.sin(index * 2 * Math.PI / count));
+}

package/src/geometry/dot.js

@@ -0,0 +1,6 @@
+export function dot(a, b) {
+  let sum = 0;
+  let i;
+  for (i = 0; i < a.length; i++) sum += a[i] * b[i];
+  return sum;
+}

package/src/geometry/emitter.js

@@ -0,0 +1,8 @@
+export function emitter(point, u, v, axis) {
+  const r = 0.65;
+  return {
+    x: point.x + (axis === 2 ? 0 : u * r),
+    y: point.y + (axis === 1 ? 0 : axis === 2 ? u * r : v * r),
+    ground: point.ground + (axis === 0 ? 0 : v * r), uv: [u, v],
+  };
+}

package/src/geometry/lampPostGeometry.js

@@ -0,0 +1,24 @@
+import { parseColor } from "../utils/parseColor.js";
+import { ring } from './lampRing.js';
+
+/** Schematic support and lamp head; wall-mounted fixtures do not get an invented pole. */
+
+export function lampPostGeometry(point, style, addTriangle) {
+  const color = parseColor(0x50565a), radius = style.poleRadius;
+  if (!Number.isFinite(radius) || radius <= 0) {
+    throw new Error('Invalid lamp pole radius');
+  }
+  const center = { ...point, uv: [3, 3] };
+  let r, low, high, points, i, a, b, angle, nx, nz;
+  for ([r, low, high] of [[radius, 0, style.top], [radius * 2.5, style.top - 0.25, style.top + 0.15]]) {
+    points = ring(point, r);
+    for (i = 0; i < 6; i++) {
+      a = points[i], b = points[(i + 1) % 6], angle = (i + 0.5) * Math.PI / 3;
+      nx = Math.cos(angle), nz = -Math.sin(angle);
+      addTriangle(a, low, b, low, b, high, nx, 0, nz, color);
+      addTriangle(a, low, b, high, a, high, nx, 0, nz, color);
+      addTriangle(center, high, a, high, b, high, 0, 1, 0, color);
+      addTriangle(center, low, b, low, a, low, 0, -1, 0, color);
+    }
+  }
+}

package/src/geometry/lampRing.js

@@ -0,0 +1,11 @@
+export function ring(point, radius) {
+  const points = [];
+  let i;
+  for (i = 0; i < 6; i++) {
+    points.push({
+      x: point.x + Math.cos(i * Math.PI / 3) * radius,
+      y: point.y + Math.sin(i * Math.PI / 3) * radius, ground: point.ground, uv: [3, 3],
+    });
+  }
+  return points;
+}

package/src/geometry/lightGeometry.js

@@ -0,0 +1,15 @@
+import { parseColor } from "../utils/parseColor.js";
+import { quad } from './quad.js';
+import { emitter } from './emitter.js';
+
+/** Three crossed emitter discs; illumination itself is evaluated on receiving surfaces. */
+
+export function lightGeometry(point, style, addTriangle) {
+  if (!Number.isFinite(style.lightRadius) || style.lightRadius <= 0) throw new Error('Invalid light radius');
+  const color = parseColor(style.color);
+  let axis;
+  for (axis = 0; axis < 3; axis++) {
+    quad(addTriangle, color, emitter(point, -1, -1, axis), emitter(point, 1, -1, axis), emitter(point, 1, 1, axis), emitter(point, -1, 1, axis),
+      style.top, axis === 0 ? [0, 1, 0] : axis === 1 ? [0, 0, 1] : [1, 0, 0]);
+  }
+}

package/src/geometry/line.js

@@ -0,0 +1,54 @@
+import { triangle } from './nativeTriangle.js';
+import { disk } from './disk.js';
+import { segment } from './segment.js';
+
+export function line(context, points, closed) {
+  const { options, width, dash, stroke, point } = context;
+  if (!options.stroke || width <= 0 || points.length < 2) return;
+  const radius = width / 2;
+  let distance = Number(options.dashOffset) || 0;
+  let period = 0;
+  let value, i, a, b, length, previous, previousLength, incoming, outgoing, side, n1, n2, from, to;
+  let denominator, miter, offset, phase, index, end, delta;
+  for (value of dash) period += value;
+  for (i = 0; i < points.length - (closed ? 0 : 1); i++) {
+    a = points[i], b = points[(i + 1) % points.length], length = a.distanceTo(b);
+    if (!dash.length) {
+      segment(context, a, b, !closed && i === 0, !closed && i === points.length - 2);
+      if (closed || i > 0) {
+        if (options.lineJoin === 'round') disk(point, a, radius, stroke);
+        else {
+          previous = a.subtract(points[(i + points.length - 1) % points.length]);
+          previousLength = Math.hypot(previous.x, previous.y);
+          if (previousLength && length) {
+            incoming = previous.divideBy(previousLength);
+            outgoing = b.subtract(a).divideBy(length);
+            side = incoming.x * outgoing.y - incoming.y * outgoing.x > 0 ? -1 : 1;
+            n1 = new L.Point(-incoming.y * side, incoming.x * side);
+            n2 = new L.Point(-outgoing.y * side, outgoing.x * side);
+            from = a.add(n1.multiplyBy(radius)), to = a.add(n2.multiplyBy(radius));
+            denominator = 1 + n1.x * n2.x + n1.y * n2.y;
+            miter = denominator > 0 ? n1.add(n2).multiplyBy(radius / denominator) : null;
+            triangle(point, stroke, from, a, to);
+            if (options.lineJoin === 'miter' && miter && Math.hypot(miter.x, miter.y) <= radius * 4) {
+              triangle(point, stroke, from, a.add(miter), to);
+            }
+          }
+        }
+      }
+    } else {
+      offset = 0;
+      while (offset < length) {
+        phase = ((distance + offset) % period + period) % period, index = 0;
+        while (phase >= dash[index]) phase -= dash[index++];
+        end = Math.min(length, offset + dash[index] - phase);
+        if (index % 2 === 0) {
+          delta = b.subtract(a).divideBy(length);
+          segment(context, a.add(delta.multiplyBy(offset)), a.add(delta.multiplyBy(end)), true, true);
+        }
+        offset = end;
+      }
+    }
+    distance += length;
+  }
+}

package/src/geometry/nativeGeometry.js

@@ -0,0 +1,55 @@
+import { triangulate } from '../triangulation/triangulate.js';
+import { disk } from './disk.js';
+import { circleAt } from './circleAt.js';
+import { line } from './line.js';
+import { visit } from './visit.js';
+
+/** Leaflet paths become flat triangles; pixel-sized strokes are rebuilt on zoom. */
+export function nativeGeometry(source, map, point) {
+  const fill = [], stroke = [], options = source.options;
+  const width = Number(options.weight) || 0;
+  const values = Array.isArray(options.dashArray) ? options.dashArray :
+    String(options.dashArray || '').trim().split(/[ ,]+/);
+  const dash = [];
+  let value, index, i;
+  for (value of values) dash.push(Number(value));
+  let allZero = true;
+  for (value of dash) {
+    if (!Number.isFinite(value) || value < 0) throw new Error('Invalid Leaflet dashArray');
+    if (value !== 0) allZero = false;
+  }
+  if (allZero) dash.length = 0;
+  if (dash.length % 2) dash.push(...dash);
+  const context = { fill, stroke, options, width, dash, point, map };
+  if (source instanceof L.CircleMarker) {
+    const center = map.project(source.getLatLng());
+    let radius = source.getRadius(), radiusY = radius;
+    if (source instanceof L.Circle) {
+      source._project();
+      const projected = source._point.add(map.getPixelOrigin());
+      center.x = projected.x;
+      center.y = projected.y;
+      radius = source._radius;
+      radiusY = source._radiusY || radius;
+    }
+    if (options.fill) disk(point, center, radius, fill, radiusY);
+    const count = Math.max(12, Math.min(128, Math.ceil(Math.PI * Math.sqrt(Math.max(radius, radiusY)))));
+    if (dash.length) {
+      const points = [];
+      for (index = 0; index < count; index++) points.push(circleAt(center, radius, radiusY, count, index));
+      line(context, points, true);
+    }
+    else if (options.stroke && width > 0) {
+      for (i = 0; i < count; i++) {
+        triangle(point, stroke, circleAt(center, radius, radiusY, count, i, width / 2),
+          circleAt(center, radius, radiusY, count, i, -width / 2), circleAt(center, radius, radiusY, count, i + 1, width / 2));
+        triangle(point, stroke, circleAt(center, radius, radiusY, count, i + 1, width / 2),
+          circleAt(center, radius, radiusY, count, i, -width / 2), circleAt(center, radius, radiusY, count, i + 1, -width / 2));
+      }
+    }
+  } else {
+    const closed = source instanceof L.Polygon;
+    visit(context, source.getLatLngs(), closed);
+  }
+  return { fill, stroke };
+}

package/src/geometry/nativeTriangle.js

@@ -0,0 +1,3 @@
+export function triangle(point, target, a, b, c) {
+  return target.push(...point(a), ...point(b), ...point(c));
+}

package/src/geometry/polygon.js

@@ -0,0 +1,22 @@
+import { triangle } from './nativeTriangle.js';
+import { line } from './line.js';
+import { triangulate } from '../triangulation/triangulate.js';
+
+export function polygon(context, rings, closed) {
+  const { options, fill, point, map } = context, projected = [];
+  let ring, path, latlng, indices;
+  for (ring of rings) {
+    path = [];
+    for (latlng of ring) path.push(map.project(latlng));
+    projected.push(path);
+  }
+  if (closed && options.fill && projected[0]?.length >= 3) {
+    const valid = [];
+    for (ring of projected) if (ring.length >= 3) valid.push(ring);
+    const vertices = valid.flat();
+    for (indices of triangulate(valid[0], valid.slice(1))) {
+      triangle(point, fill, vertices[indices[0]], vertices[indices[1]], vertices[indices[2]]);
+    }
+  }
+  for (ring of projected) line(context, ring, closed);
+}

package/src/geometry/push.js

@@ -0,0 +1,3 @@
+export function push(position, normal, color, p, n) {
+  position.push(...p); normal.push(...n); color.push(0.6, 0.58, 0.54);
+}