leaflet-city-mapper 0.0.2 → 0.0.3

package/src/sunlight/useSelectedTime.js

@@ -0,0 +1,20 @@
+import { render } from './render.js';
+import { updateSky } from './updateSky.js';
+import { updateSun } from './updateSun.js';
+
+export function useSelectedTime(state) {
+  const { control, map, date, slider, status } = state;
+  control.live = false;
+  if (!date.value || !date.validity.valid) {
+    control.time = new Date(NaN);
+    map.fire('simulationtimechange', { time: null, live: false });
+    delete map._sunlight;
+    updateSky(state);
+    render(map);
+    status.textContent = 'Error: choose a valid solar date';
+    return;
+  }
+  control.time = new Date(`${date.value}T00:00:00Z`);
+  control.time.setUTCMinutes(Number(slider.value));
+  updateSun(state);
+}

package/src/terrain/clearLayerTerrain.js

@@ -0,0 +1,5 @@
+import { setRasterTerrain } from '../raster/setRasterTerrain.js';
+
+export function clearLayerTerrain(layer) {
+  if (layer._type === 'pmtiles') setRasterTerrain(layer, null);
+}

package/src/terrain/getElevation.js

@@ -0,0 +1,10 @@
+import { bridgeElevation } from '../geometry/bridgeElevation.js';
+import { terrainElevation } from './terrainElevation.js';
+
+/** @param {L.LatLng|L.Point} location LatLng, or a pixel point at the terrain zoom. */
+
+export function getElevation(backend, location) {
+  if (!backend._map || !backend._terrainReady) return null;
+  const point = location instanceof L.Point ? location : backend._map.project(location, backend._terrainZoom);
+  return bridgeElevation(point, backend._bridges) ?? terrainElevation(point, backend._terrainTiles);
+}

package/src/terrain/initTerrain.js

@@ -0,0 +1,20 @@
+import { onTerrainRemove } from './onTerrainRemove.js';
+import { onTerrainAdd } from './onTerrainAdd.js';
+import { init3D } from '../scene/init3D.js';
+
+/**
+ * Renders IGN Float32 DEM tiles and PMTiles raster basemaps in the shared WebGPU scene.
+ * Source options: `url` (single-zoom Float32 PMTiles DEM); `bridges` (optional GeoJSON deck polygons with Z, see _addBridges).
+ */
+export function initTerrain(layer, options) {
+  const terrainSource = options.url;
+  const layerOptions = { ...options };
+  delete layerOptions.url;
+  init3D(layer, layerOptions);
+  layer.terrainSource = terrainSource;
+  layer._terrainTiles = new Map();
+  layer._rasterTiles = new Map();
+  layer._terrainReady = false;
+  layer.onAdd = onTerrainAdd.bind(null, layer);
+  layer.onRemove = onTerrainRemove.bind(null, layer);
+}

package/src/terrain/loadReadyTerrain.js

@@ -0,0 +1,5 @@
+import { loadTerrain } from './loadTerrain.js';
+
+export function loadReadyTerrain() {
+  loadTerrain(this.backend).then(this.resolve, this.reject);
+}

package/src/terrain/loadTerrain.js

@@ -0,0 +1,63 @@
+import { addBridges } from '../geometry/addBridges.js';
+import { conformModelToTerrain } from '../geometry/conformModelToTerrain.js';
+import { getElevation } from './getElevation.js';
+import { setTerrainHeight } from './setTerrainHeight.js';
+import { update } from '../scene/update.js';
+import { compareDistance } from '../utils/compareDistance.js';
+import { loadTerrainTiles } from './loadTerrainTiles.js';
+import { readBridges } from './readBridges.js';
+
+
+export async function loadTerrain(backend) {
+  if (backend._terrainLoading || !backend._map) return;
+  backend._terrainLoading = true;
+  backend._terrainReady = false;
+  const controller = backend._terrainController = new AbortController();
+  let x, y, i, layer;
+  try {
+    if (!backend.terrainSource) throw new Error('Terrain layer requires a PMTiles elevation archive');
+    const archive = backend._terrainArchive = new L.Layer({ source: { type: 'pmtiles', url: backend.terrainSource } });
+    await archive.ready;
+    const header = archive.header;
+    if (header.tileType !== 0 || header.minZoom !== header.maxZoom) {
+      throw new Error('Expected a single-zoom Float32 PMTiles terrain archive');
+    }
+    backend._terrainZoom = header.maxZoom;
+    const map = backend._map;
+    const northwest = map.project([header.maxLat, header.minLon], backend._terrainZoom).divideBy(256).floor();
+    const southeast = map.project([header.minLat, header.maxLon], backend._terrainZoom).divideBy(256).floor();
+    backend._terrainBounds = new L.Bounds(northwest, southeast);
+    const tiles = [];
+    const center = map.project(map.getCenter(), backend._terrainZoom).divideBy(256);
+    for (x = northwest.x; x <= southeast.x; x++) {
+      for (y = northwest.y; y <= southeast.y; y++) {
+        tiles.push({ z: backend._terrainZoom, x, y, distance: Math.hypot(x + 0.5 - center.x, y + 0.5 - center.y) });
+      }
+    }
+    tiles.sort(compareDistance);
+    const state = { backend, archive, controller, tiles, next: 0 };
+    const workers = [];
+    for (i = 0; i < Math.min(4, tiles.length); i++) workers.push(loadTerrainTiles(state));
+    await Promise.all(workers);
+    const bridges = backend.options.bridges && await fetch(backend.options.bridges, { signal: controller.signal })
+      .then(readBridges);
+    if (controller.signal.aborted || backend._map !== map) return;
+    backend._terrainReady = true;
+    backend._terrainOriginElevation = getElevation(backend, backend.location) ?? 0;
+    for (layer of Object.values(map._layers)) {
+      setTerrainHeight(layer);
+      conformModelToTerrain(layer, backend);
+    }
+
+    if (bridges) addBridges(backend, bridges);
+    map.fire('terrainchange');
+    update(backend);
+    backend.fire('terrainready');
+    return true;
+  } catch (error) {
+    if (!controller.signal.aborted) backend.fire('error', { error });
+    return false;
+  } finally {
+    backend._terrainLoading = false;
+  }
+}

package/src/terrain/loadTerrainTiles.js

@@ -0,0 +1,13 @@
+export async function loadTerrainTiles(state) {
+  const { backend, archive, controller, tiles } = state;
+  let coords, result;
+  while (state.next < tiles.length) {
+    controller.signal.throwIfAborted();
+    coords = tiles[state.next++];
+    result = await archive.getZxy(coords.z, coords.x, coords.y, controller.signal);
+    if (!result || result.data.byteLength !== 256 * 256 * 4) {
+      throw new Error(`Missing or invalid Float32 terrain tile ${coords.z}/${coords.x}/${coords.y}`);
+    }
+    backend._terrainTiles.set(`${coords.x}/${coords.y}`, new Float32Array(result.data));
+  }
+}

package/src/terrain/onTerrainAdd.js

@@ -0,0 +1,21 @@
+import { loadTerrain } from "./loadTerrain.js";
+import { setRasterTerrain } from '../raster/setRasterTerrain.js';
+import { onAdd3DLayer } from '../scene/onAdd3DLayer.js';
+import { loadReadyTerrain } from './loadReadyTerrain.js';
+import { setLayerTerrain } from './setLayerTerrain.js';
+
+export function onTerrainAdd(backend, map) {
+  if (map._terrain3D && map._terrain3D !== backend) {
+    throw new Error('Only one terrain layer can be active per map');
+  }
+  map._terrain3D = backend;
+  onAdd3DLayer(backend, map);
+  if (backend.root) backend._terrainPromise = loadTerrain(backend);
+  else {
+    const pending = Promise.withResolvers();
+    backend._terrainPromise = pending.promise;
+    backend.once('ready', loadReadyTerrain, { backend, ...pending });
+  }
+  map.eachLayer(setLayerTerrain, backend);
+  map.fire('terrainchange');
+}

package/src/terrain/onTerrainChange.js

@@ -0,0 +1,14 @@
+import { releaseArea } from '../sources/releaseArea.js';
+import { updateArea } from "../sources/updateArea.js";
+
+/** GeoJSON source areas: loading, building and releasing. */
+
+export function onTerrainChange(layer) {
+  if (!layer._map) return;
+  let area;
+  for (area of layer._areas.values()) {
+    releaseArea(layer, area);
+  }
+  layer._areas.clear();
+  updateArea(layer);
+}

package/src/terrain/onTerrainRemove.js

@@ -0,0 +1,41 @@
+import { destroyTexture } from '../rendering/destroyTexture.js';
+import { conformModelToTerrain } from '../geometry/conformModelToTerrain.js';
+import { disposeMesh } from '../rendering/disposeMesh.js';
+import { setRasterTerrain } from '../raster/setRasterTerrain.js';
+import { removeRasterTile } from '../raster/removeRasterTile.js';
+import { setTerrainHeight } from './setTerrainHeight.js';
+import { onRemove3DLayer } from '../scene/onRemove3DLayer.js';
+import { clearLayerTerrain } from './clearLayerTerrain.js';
+
+export function onTerrainRemove(layer, map) {
+  layer._terrainController?.abort();
+  layer._terrainLoading = false;
+  layer._terrainReady = false;
+  map.eachLayer(clearLayerTerrain);
+  let tile, l, grid, attribute;
+  for (tile of layer._rasterTiles.keys()) removeRasterTile(layer, tile);
+  if (map._terrain3D === layer) delete map._terrain3D;
+  for (l of Object.values(map._layers)) {
+    conformModelToTerrain(l, null);
+    setTerrainHeight(l);
+  }
+
+  map.fire('terrainchange');
+  layer._terrainTiles.clear();
+  layer._terrainOriginElevation = 0;
+  layer._terrainPromise = null;
+  if (layer._rasterProgram) {
+    layer._rasterProgram.pipelineCache.clear();
+  }
+  layer._rasterProgram = null;
+  if (layer._dem) destroyTexture(layer, layer._dem.texture);
+  layer._dem = null;
+  for (grid of layer._terrainGrids?.values() || []) {
+    for (attribute of Object.values(grid)) destroyTexture(layer, attribute.buffer);
+  }
+  layer._terrainGrids = null;
+  layer._bridges = null;
+  disposeMesh(layer, layer._bridgeMesh);
+  layer._bridgeMesh = null;
+  onRemove3DLayer(layer, map);
+}

package/src/terrain/readBridges.js

@@ -0,0 +1,4 @@
+export function readBridges(response) {
+  if (!response.ok) throw new Error(`Bridges: HTTP ${response.status}`);
+  return response.json();
+}

package/src/terrain/sample.js

@@ -0,0 +1,7 @@
+export function sample(tiles, px, py) {
+  const tileX = Math.floor(px / 256), tileY = Math.floor(py / 256);
+  const tile = tiles.get(`${tileX}/${tileY}`);
+  if (!tile) return null;
+  const elevation = tile[(py - tileY * 256) * 256 + px - tileX * 256];
+  return Number.isFinite(elevation) && elevation > -1000 ? elevation : null;
+}

package/src/terrain/setLayerTerrain.js

@@ -0,0 +1,5 @@
+import { setRasterTerrain } from '../raster/setRasterTerrain.js';
+
+export function setLayerTerrain(layer) {
+  if (layer._type === 'pmtiles') setRasterTerrain(layer, this);
+}

package/src/terrain/terrainAtlas.js

@@ -0,0 +1,23 @@
+/** Float32 DEM atlas; missing samples retain the shader no-data sentinel. */
+
+export function terrainAtlas(tiles, bounds) {
+  const columns = bounds.max.x - bounds.min.x + 1, rows = bounds.max.y - bounds.min.y + 1;
+  const elevations = new Float32Array(columns * rows * 65536).fill(-1e9);
+  let low = Infinity, high = -Infinity;
+  let key, values, coordinates, x, y, start, row, column, value;
+  for ([key, values] of tiles) {
+    coordinates = key.split('/');
+    x = Number(coordinates[0]), y = Number(coordinates[1]);
+    start = (y - bounds.min.y) * 256 * columns * 256 + (x - bounds.min.x) * 256;
+    for (row = 0; row < 256; row++) {
+      for (column = 0; column < 256; column++) {
+        value = values[row * 256 + column];
+        if (!Number.isFinite(value) || value <= -1000) continue;
+        elevations[start + row * columns * 256 + column] = value;
+        low = Math.min(low, value);
+        high = Math.max(high, value);
+      }
+    }
+  }
+  return { elevations, low, high };
+}

package/src/terrain/terrainElevation.js

@@ -0,0 +1,20 @@
+import { sample } from './sample.js';
+
+/** Bilinear DEM sampling, with the original first-valid-neighbour no-data rule. */
+
+export function terrainElevation(point, tiles) {
+  const x = point.x - 0.5, y = point.y - 0.5;
+  const x0 = Math.floor(x), y0 = Math.floor(y);
+  const fx = x - x0, fy = y - y0;
+  const values = [sample(tiles, x0, y0), sample(tiles, x0 + 1, y0), sample(tiles, x0, y0 + 1), sample(tiles, x0 + 1, y0 + 1)];
+  let valid = 0, first = null;
+  let value;
+  for (value of values) {
+    if (!Number.isFinite(value)) continue;
+    if (!valid) first = value;
+    valid++;
+  }
+  if (valid < 4) return first;
+  return (values[0] * (1 - fx) + values[1] * fx) * (1 - fy) +
+    (values[2] * (1 - fx) + values[3] * fx) * fy;
+}

package/src/terrain/terrainGrid.js

@@ -0,0 +1,24 @@
+/** Unit tile grid; the vertex shader supplies the elevation. */
+
+export function terrainGrid(divisions) {
+  const positions = [], normals = [], uvs = [], indices = [];
+  let row, column, a, b, c, d;
+  for (row = 0; row <= divisions; row++) {
+    for (column = 0; column <= divisions; column++) {
+      positions.push(column / divisions, 0, row / divisions);
+      normals.push(0, 1, 0);
+      uvs.push(column / divisions, row / divisions);
+      if (row < divisions && column < divisions) {
+        a = row * (divisions + 1) + column;
+        b = a + 1, c = a + divisions + 1, d = c + 1;
+        indices.push(a, c, b, b, c, d);
+      }
+    }
+  }
+  return {
+    position: { size: 3, data: new Float32Array(positions) },
+    normal: { size: 3, data: new Float32Array(normals) },
+    uv: { size: 2, data: new Float32Array(uvs) },
+    index: { data: new Uint16Array(indices) },
+  };
+}

package/src/traffic/addTraffic.js

@@ -0,0 +1,7 @@
+import { placeTraffic } from './placeTraffic.js';
+import { startTraffic } from './startTraffic.js';
+
+export function addTraffic(state) {
+  state.layer._beforeRaycast = placeTraffic.bind(null, state);
+  if (state.ready) startTraffic(state);
+}

package/src/traffic/along.js

@@ -0,0 +1,14 @@
+/** Point and unit direction at distance `s` along `points` ([x, z, y?]) with cumulative `lengths`. */
+
+export function along(points, lengths, s) {
+  let i = 1, end = lengths.length - 1;
+  let middle;
+  while (i < end) {
+    middle = i + Math.floor((end - i) / 2);
+    if (lengths[middle] < s) i = middle + 1;
+    else end = middle;
+  }
+  const a = points[i - 1], b = points[i], d = lengths[i] - lengths[i - 1] || 1;
+  const t = (s - lengths[i - 1]) / d;
+  return { x: a[0] + (b[0] - a[0]) * t, y: (a[2] ?? 0) + ((b[2] ?? 0) - (a[2] ?? 0)) * t, z: a[1] + (b[1] - a[1]) * t, dx: (b[0] - a[0]) / d, dz: (b[1] - a[1]) / d };
+}

package/src/traffic/clockMinutes.js

@@ -0,0 +1,6 @@
+
+
+export function clockMinutes(clockTime) {
+  const parts = clockTime.split(':');
+  return Number(parts[0]) * 60 + Number(parts[1]);
+}

package/src/traffic/compareDepartures.js

@@ -0,0 +1,5 @@
+
+
+export function compareDepartures(a, b) {
+  return a - b;
+}

package/src/traffic/createTrafficMesh.js

@@ -0,0 +1,7 @@
+import * as createMeshApi from '../rendering/createMesh.js';
+
+export function createTrafficMesh(state, data, featureFaces, material, usage = 0) {
+  const result = createMeshApi.createMesh(state.layer, data, material, usage);
+  result.extras.featureFaces = featureFaces;
+  return result;
+}

package/src/traffic/destroyTrafficGpu.js

@@ -0,0 +1,5 @@
+export function destroyTrafficGpu(state) {
+  let buffer;
+  for (buffer of [state.gpu?.params, state.gpu?.template, state.gpu?.points, state.gpu?.vehicles]) buffer?.destroy();
+  state.gpu = null;
+}

package/src/traffic/disposeTrafficObject.js

@@ -0,0 +1,13 @@
+import * as disposeMesh from '../rendering/disposeMesh.js';
+import * as setHighlight from '../picking/setHighlight.js';
+import * as showFeature from '../picking/showFeature.js';
+
+export function disposeTrafficObject(state, object) {
+  if (!object) return;
+  if (state.layer.highlightedFeature?.mesh === object) {
+    setHighlight.setHighlight(state.layer, null);
+    state.layer.hoveredFeature = null;
+    showFeature.showFeature(state.layer, null);
+  };
+  disposeMesh.disposeMesh(state.layer, object);
+}

package/src/traffic/drawTrafficRoute.js

@@ -0,0 +1,6 @@
+import { routeGeometry } from './routeGeometry.js';
+import { createTrafficMesh } from './createTrafficMesh.js';
+
+export function drawTrafficRoute(state) {
+  state.route = createTrafficMesh(state, routeGeometry(state.lanes), [], { unlit: true });
+}

package/src/traffic/failTraffic.js

@@ -0,0 +1,6 @@
+export function failTraffic(state, error) {
+  state.error = error;
+  state.status.textContent = `Error: ${error.message}`;
+  state.status.setAttribute('role', 'alert');
+  console.error('Traffic layer', error);
+}

package/src/traffic/failedTrafficLoad.js

@@ -0,0 +1,5 @@
+import { failTraffic } from './failTraffic.js';
+
+export function failedTrafficLoad(state, signal, error) {
+  if (!signal.aborted && error.name !== 'AbortError') failTraffic(state, error);
+}

package/src/traffic/fetchTrafficLanes.js

@@ -0,0 +1,10 @@
+export async function fetchTrafficLanes(state, time, signal) {
+  const href = new URL(state.url, document.baseURI).href;
+  if (/\.m?js(?:[?#]|$)/i.test(state.url)) return (await import(href)).default(time, state.layer, signal);
+  if (!state.file) {
+    const response = await fetch(href, { signal });
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    state.file = await response.json();
+  }
+  return state.file;
+}

package/src/traffic/groundTraffic.js

@@ -0,0 +1,15 @@
+import { getElevation } from '../terrain/getElevation.js';
+
+export function groundTraffic(state) {
+  const { layer, lanes } = state;
+  const terrain = layer._map._terrain3D?._terrainReady && layer._map._terrain3D, base = layer.root.position[1];
+  let lane, i, elevation;
+  for (lane of lanes) {
+    for (i = 0; i < lane.points.length; i++) {
+      elevation = terrain && (lane.elevation ?? getElevation(terrain, lane.latlngs[i]));
+      lane.points[i][2] = Number.isFinite(elevation) && Number.isFinite(base) ? elevation - base : 0;
+    }
+  }
+  state.lanesDirty = true;
+  state.nextCheck = -Infinity;
+}

package/src/traffic/initTraffic.js

@@ -0,0 +1,54 @@
+/**
+ * Vehicles moving along GeoJSON lanes; a compute pass places them on the GPU every frame.
+ * Source options:
+ * - `url`: GeoJSON (Multi)LineStrings, or a JS module whose default export `(time, layer, signal)` returns them (time-dependent data);
+ * - `vehicle`: 'car' (default), 'boat', 'bus', 'tram', 'metro', 'bicycle' or 'pedestrian'; `side`: offset right of the lane centreline in metres (vehicle default);
+ * - `speed`: m/s of `flow` lanes; `outline`: draw the lanes.
+ * Lane properties: `flow` (vehicles/h) or `timetable` (see scheduledTrips.js), optional fixed `elevation`
+ * in metres, `name`/`description` for the default tooltip. The status line (count and vehicle type) sits under the layer's entry in the layers control.
+ * L.Control.Time on the same map drives the time; without one, vehicles run live.
+ */
+import { build } from '../geometry/build.js';
+import { init3D } from '../scene/init3D.js';
+import { tooltip } from './tooltip.js';
+import { speed } from '../constants/speed.js';
+import { vehicles } from '../constants/vehicles.js';
+import { trafficShader } from '../constants/trafficShader.js';
+import { addTraffic } from './addTraffic.js';
+import { placeTraffic } from './placeTraffic.js';
+import { removeTraffic } from './removeTraffic.js';
+import { readyTraffic } from './readyTraffic.js';
+import { tickTraffic } from './tickTraffic.js';
+import { updateTraffic } from './updateTraffic.js';
+import { updateTrafficTerrain } from './updateTrafficTerrain.js';
+
+export function initTraffic(layer, { url, vehicle = 'car', side, outline, speed: velocity = speed, ...options } = {}) {
+  const { model, lights, side: defaultSide } = vehicles[vehicle];
+  side ??= defaultSide;
+  init3D(layer, {
+    tooltip,
+    nightLight: Boolean(lights),
+    ...options,
+  });
+  const status = L.DomUtil.create('small', 'traffic-status');
+  status.style.cssText = 'display:block;max-width:200px;margin:0 0 4px 20px;color:#555;';
+  const template = build(model(0)), stride = template.position.length, vertices = stride / 3;
+  const params = new ArrayBuffer(16), paramFloats = new Float32Array(params), paramInts = new Uint32Array(params);
+  const state = {
+    layer, url, model, lights, side, outline, velocity, vehicle, status, template, stride, vertices,
+    params, paramFloats, paramInts,
+    ready: false, frame: undefined, request: undefined, lanes: [], tripsKey: undefined,
+    mesh: undefined, route: undefined, litAt: -Infinity,
+    trips: [], rebasedAt: 0, nextCheck: -Infinity, elapsed: 0, gpu: null,
+    lanesDirty: true, stale: false, loaded: undefined, file: undefined,
+  };
+  // Lane points are [x, z, ground, cumulative length]. Mirrors along() and place().
+  state.shader = trafficShader;
+  state.tick = tickTraffic.bind(null, state);
+  state.update = updateTraffic.bind(null, state);
+  state.terrain = updateTrafficTerrain.bind(null, state);
+  layer._beforeRaycast = placeTraffic.bind(null, state);
+  layer.on('ready', readyTraffic.bind(null, state));
+  layer.on('add', addTraffic.bind(null, state));
+  layer.on('remove', removeTraffic.bind(null, state));
+}

package/src/traffic/loadTraffic.js

@@ -0,0 +1,15 @@
+import { trafficNow } from './trafficNow.js';
+import { fetchTrafficLanes } from './fetchTrafficLanes.js';
+import { loadedTrafficLanes } from './loadedTrafficLanes.js';
+import { failedTrafficLoad } from './failedTrafficLoad.js';
+
+export function loadTraffic(state) {
+  const { time } = trafficNow(state);
+  if (!Number.isFinite(time?.getTime())) return;
+  state.request?.abort();
+  const { signal } = state.request = new AbortController();
+  fetchTrafficLanes(state, time, signal).then(
+    loadedTrafficLanes.bind(null, state, signal),
+    failedTrafficLoad.bind(null, state, signal),
+  );
+}

package/src/traffic/loadedTrafficLanes.js

@@ -0,0 +1,16 @@
+import { toLanes } from './toLanes.js';
+import { prepareTraffic } from './prepareTraffic.js';
+
+export function loadedTrafficLanes(state, signal, data) {
+  if (signal.aborted || !state.layer._map) return;
+  state.error = null;
+  if (data === state.loaded) {
+    state.nextCheck = -Infinity;
+    if (!state.frame) state.tick();
+    return;
+  }
+  state.loaded = data;
+  state.lanes = toLanes(data);
+  prepareTraffic(state);
+  if (!state.frame) state.tick();
+}

package/src/traffic/locateTraffic.js

@@ -0,0 +1,9 @@
+import { along } from './along.js';
+
+export function locateTraffic(state, trip) {
+  const { points, lengths, length } = trip.lane;
+  let distance = trip.distance + state.elapsed * trip.speed;
+  distance -= length * Math.floor(distance / length);
+  const { x, y, z, dx, dz } = along(points, lengths, distance);
+  return { x: x - dz * state.side, y, z: z + dx * state.side, dx, dz };
+}

package/src/traffic/moveTraffic.js

@@ -0,0 +1,15 @@
+export function moveTraffic(state, seconds) {
+  const { device } = state.gpu;
+  state.paramFloats[0] = state.elapsed = seconds;
+  state.paramFloats[1] = state.side;
+  state.paramInts[2] = state.vertices;
+  state.paramInts[3] = state.trips.length * state.vertices;
+  device.queue.writeBuffer(state.gpu.params, 0, state.params);
+  const encoder = device.createCommandEncoder(), pass = encoder.beginComputePass();
+  pass.setPipeline(state.gpu.pipeline);
+  pass.setBindGroup(0, state.gpu.bindGroup);
+  pass.dispatchWorkgroups(state.trips.length);
+  pass.end();
+  device.queue.submit([encoder.finish()]);
+  state.stale = true;
+}

package/src/traffic/placeTraffic.js

@@ -0,0 +1,21 @@
+import { locateTraffic } from './locateTraffic.js';
+
+export function placeTraffic(state) {
+  if (!state.mesh || !state.stale) return;
+  state.stale = false;
+  const { position, normal } = state.mesh.geometry.attributes;
+  let i, trip, cx, y, cz, dx, dz, k, o, lx, lz, nx, nz;
+  for (i = 0; i < state.trips.length; i++) {
+    trip = state.trips[i];
+    ({ x: cx, y, z: cz, dx, dz } = locateTraffic(state, trip));
+    for (k = 0, o = i * state.stride; k < state.stride; k += 3, o += 3) {
+      lx = state.template.position[k], lz = state.template.position[k + 2], nx = state.template.normal[k], nz = state.template.normal[k + 2];
+      position.data[o] = cx - lx * dz - lz * dx;
+      position.data[o + 1] = y + state.template.position[k + 1];
+      position.data[o + 2] = cz + lx * dx - lz * dz;
+      normal.data[o] = -nx * dz - nz * dx;
+      normal.data[o + 1] = state.template.normal[k + 1];
+      normal.data[o + 2] = nx * dx - nz * dz;
+    }
+  }
+}

package/src/traffic/prepareTraffic.js

@@ -0,0 +1,25 @@
+import { disposeTrafficObject } from './disposeTrafficObject.js';
+import { groundTraffic } from './groundTraffic.js';
+
+export function prepareTraffic(state) {
+  const { layer, lanes } = state;
+  const crs = layer._map.options.crs, origin = crs.project(layer.location);
+  const metres = Math.cos(layer.location.lat * Math.PI / 180);
+  let lane, lat, lng, point, i;
+  for (lane of lanes) {
+    lane.points = [];
+    for ([lat, lng] of lane.latlngs) {
+      point = crs.project(new L.LatLng(lat, lng));
+      lane.points.push([(point.x - origin.x) * metres, -(point.y - origin.y) * metres, 0]);
+    }
+    lane.lengths = [0];
+    for (i = 1; i < lane.points.length; i++) {
+      lane.lengths.push(lane.lengths[i - 1] + Math.hypot(lane.points[i][0] - lane.points[i - 1][0], lane.points[i][1] - lane.points[i - 1][1]));
+    }
+    lane.length = lane.lengths.at(-1);
+  }
+  groundTraffic(state);
+  disposeTrafficObject(state, state.route);
+  state.route = null;
+  state.tripsKey = null;
+}

package/src/traffic/readyTraffic.js

@@ -0,0 +1,6 @@
+import { startTraffic } from './startTraffic.js';
+
+export function readyTraffic(state) {
+  state.ready = true;
+  if (state.layer._map) startTraffic(state);
+}