leaflet-city-mapper 0.0.3 → 0.0.4

package/src/terrain/terrainBuffers.js

@@ -0,0 +1,27 @@
+import { demBuffer } from '../globals/demBuffer.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { terrainGrid } from './terrainGrid.js';
+
+export function terrainBuffers(backend, divisions) {
+  const state = sceneByLayer.get(backend), device = state.renderer.device;
+  let attributes = state._terrainGrids.get(divisions);
+  if (!attributes) {
+    attributes = terrainGrid(divisions);
+    let name, attribute;
+    for ([name, attribute] of Object.entries(attributes)) {
+      attribute.size ||= 1;
+      attribute.count = attribute.data.length / attribute.size;
+      attribute.indexFormat = 'uint16';
+      attribute.buffer = device.createBuffer((
+        demBuffer.size = Math.max(4, attribute.data.byteLength),
+        demBuffer.usage = name === 'index'
+          ? GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
+          : GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        demBuffer
+      ));
+      device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
+    }
+    state._terrainGrids.set(divisions, attributes);
+  }
+  return attributes;
+}

package/src/terrain/terrainElevation.js

@@ -6,15 +6,10 @@ 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++;
+  const a = sample(tiles, x0, y0), b = sample(tiles, x0 + 1, y0);
+  const c = sample(tiles, x0, y0 + 1), d = sample(tiles, x0 + 1, y0 + 1);
+  if (!Number.isFinite(a) || !Number.isFinite(b) || !Number.isFinite(c) || !Number.isFinite(d)) {
+    return Number.isFinite(a) ? a : Number.isFinite(b) ? b : Number.isFinite(c) ? c : Number.isFinite(d) ? d : null;
   }
-  if (valid < 4) return first;
-  return (values[0] * (1 - fx) + values[1] * fx) * (1 - fy) +
-    (values[2] * (1 - fx) + values[3] * fx) * fy;
+  return (a * (1 - fx) + b * fx) * (1 - fy) + (c * (1 - fx) + d * fx) * fy;
 }

package/src/terrain/terrainGrid.js

@@ -1,24 +1,32 @@
 /** 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;
+  const vertices = (divisions + 1) ** 2;
+  const positions = /* alloc */ new Float32Array(vertices * 3);
+  const normals = /* alloc */ new Float32Array(vertices * 3);
+  const uvs = /* alloc */ new Float32Array(vertices * 2);
+  const indices = /* alloc */ new Uint16Array(divisions * divisions * 6);
+  let row, column, a, b, c, d, vertex = 0, index = 0;
   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);
+      positions[vertex * 3] = column / divisions;
+      positions[vertex * 3 + 2] = row / divisions;
+      normals[vertex * 3 + 1] = 1;
+      uvs[vertex * 2] = column / divisions;
+      uvs[vertex * 2 + 1] = row / divisions;
+      vertex++;
       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);
+        indices[index++] = a; indices[index++] = c; indices[index++] = b;
+        indices[index++] = b; indices[index++] = c; indices[index++] = 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) },
+  return /* alloc */ {
+    position: /* alloc */ { size: 3, data: positions },
+    normal: /* alloc */ { size: 3, data: normals },
+    uv: /* alloc */ { size: 2, data: uvs },
+    index: /* alloc */ { data: indices },
   };
 }

package/src/terrain/terrainTileQueue.js

@@ -0,0 +1,25 @@
+import { L } from '../globals/L.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { archiveNorthWest } from '../globals/archiveNorthWest.js';
+import { archiveSouthEast } from '../globals/archiveSouthEast.js';
+import { compareDistance } from '../utils/compareDistance.js';
+
+export function terrainTileQueue(backend, header) {
+  const scene = sceneByLayer.get(backend), map = backend._map;
+  scene._terrainZoom = header.maxZoom;
+  archiveNorthWest[0] = header.maxLat; archiveNorthWest[1] = header.minLon;
+  const northwest = map.project(archiveNorthWest, scene._terrainZoom).divideBy(256).floor();
+  archiveSouthEast[0] = header.minLat; archiveSouthEast[1] = header.maxLon;
+  const southeast = map.project(archiveSouthEast, scene._terrainZoom).divideBy(256).floor();
+  scene._terrainBounds = /* alloc */ new L.Bounds(northwest, southeast);
+  const tiles = /* alloc */ [];
+  const center = map.project(map.getCenter(), scene._terrainZoom).divideBy(256);
+  let x, y;
+  for (x = northwest.x; x <= southeast.x; x++) {
+    for (y = northwest.y; y <= southeast.y; y++) {
+      tiles.push(/* alloc */ { z: scene._terrainZoom, x, y, distance: Math.hypot(x + 0.5 - center.x, y + 0.5 - center.y) });
+    }
+  }
+  tiles.sort(compareDistance);
+  return tiles;
+}

package/src/traffic/addTraffic.js

@@ -1,7 +1,10 @@
+import { trafficByLayer } from '../globals/trafficByLayer.js';
+
+
 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);
+export function addTraffic(state) {
+  trafficByLayer.set(state.layer, state);
+  if (state.ready) startTraffic(state);
 }

package/src/traffic/along.js

@@ -1,6 +1,6 @@
 /** Point and unit direction at distance `s` along `points` ([x, z, y?]) with cumulative `lengths`. */
 
-export function along(points, lengths, s) {
+export function along(points, lengths, s, target) {
   let i = 1, end = lengths.length - 1;
   let middle;
   while (i < end) {
@@ -10,5 +10,11 @@ export function along(points, lengths, s) {
   }
   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 };
+  target ||= /* alloc */ {};
+  target.x = a[0] + (b[0] - a[0]) * t;
+  target.y = (a[2] ?? 0) + ((b[2] ?? 0) - (a[2] ?? 0)) * t;
+  target.z = a[1] + (b[1] - a[1]) * t;
+  target.dx = (b[0] - a[0]) / d;
+  target.dz = (b[1] - a[1]) / d;
+  return target;
 }

package/src/traffic/appendRouteDash.js

@@ -0,0 +1,15 @@
+export function appendRouteDash(position, normal, color, a, b, dx, dz, x, z, start, end, r, g, blue) {
+  const px = a[0] + dx * start, pz = a[1] + dz * start;
+  const py = a[2] + (b[2] - a[2]) * start + 0.4;
+  const qx = a[0] + dx * end, qz = a[1] + dz * end;
+  const qy = a[2] + (b[2] - a[2]) * end + 0.4;
+  let vertex;
+  for (vertex = 0; vertex < 6; vertex++) {
+    if (vertex === 0 || vertex === 3) position.push(px - x, py, pz - z);
+    else if (vertex === 1) position.push(px + x, py, pz + z);
+    else if (vertex === 5) position.push(qx - x, qy, qz - z);
+    else position.push(qx + x, qy, qz + z);
+    normal.push(0, 1, 0);
+    color.push(r, g, blue);
+  }
+}

package/src/traffic/appendRouteSegment.js

@@ -0,0 +1,15 @@
+import { appendRouteDash } from './appendRouteDash.js';
+
+export function appendRouteSegment(position, normal, color, points, lengths, i, r, g, blue) {
+  const a = points[i - 1], b = points[i];
+  const dx = b[0] - a[0], dz = b[1] - a[1], length = lengths[i] - lengths[i - 1];
+  if (!length) return;
+  const x = -dz / length * 2.5, z = dx / length * 2.5;
+  let distance, start, end;
+  for (distance = Math.floor(lengths[i - 1] / 30) * 30; distance < lengths[i]; distance += 30) {
+    start = Math.max(0, (distance - lengths[i - 1]) / length);
+    end = Math.min(1, (distance + 18 - lengths[i - 1]) / length);
+    if (end <= start) continue;
+    appendRouteDash(position, normal, color, a, b, dx, dz, x, z, start, end, r, g, blue);
+  }
+}

package/src/traffic/destroyTrafficGpu.js

@@ -1,5 +1,7 @@
 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?.params?.destroy();
+  state.gpu?.template?.destroy();
+  state.gpu?.points?.destroy();
+  state.gpu?.vehicles?.destroy();
   state.gpu = null;
 }

package/src/traffic/disposeTrafficObject.js

@@ -1,12 +1,15 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 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) {
+  if (sceneByLayer.get(state.layer).highlightedFeature?.mesh === object) {
     setHighlight.setHighlight(state.layer, null);
-    state.layer.hoveredFeature = null;
+    sceneByLayer.get(state.layer).hoveredFeature = null;
     showFeature.showFeature(state.layer, null);
   };
   disposeMesh.disposeMesh(state.layer, object);

package/src/traffic/drawTrafficRoute.js

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

package/src/traffic/failTraffic.js

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

package/src/traffic/fetchTrafficLanes.js

@@ -1,10 +1,10 @@
 export async function fetchTrafficLanes(state, time, signal) {
-  const href = new URL(state.url, document.baseURI).href;
+  const href = /* alloc */ 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}`);
+    const response = await fetch(href, /* alloc */ { signal });
+    if (!response.ok) throw /* alloc */ new Error(`HTTP ${response.status}`);
     state.file = await response.json();
   }
   return state.file;
-}
+}

package/src/traffic/groundTraffic.js

@@ -1,8 +1,12 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { cameraByMap } from '../globals/cameraByMap.js';
+
+
 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];
+  const terrain = sceneByLayer.get(cameraByMap.get(layer._map)._terrain3D)?._terrainReady && cameraByMap.get(layer._map)._terrain3D, base = sceneByLayer.get(layer).root.position[1];
   let lane, i, elevation;
   for (lane of lanes) {
     for (i = 0; i < lane.points.length; i++) {

package/src/traffic/initTraffic.js

@@ -1,54 +1,66 @@
-/**
- * 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 { L } from '../globals/L.js';
+import { speed as sharedSpeed } from '../globals/speed.js';
+import { trafficEmptyOptions } from '../globals/trafficEmptyOptions.js';
+import { vehicles } from '../globals/vehicles.js';
+import { trafficShader } from '../globals/trafficShader.js';
+import { trafficByLayer } from '../globals/trafficByLayer.js';
+
+
+/**
+ * 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 { 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));
-}
+import { updateTrafficTerrain } from './updateTrafficTerrain.js';
+
+export function initTraffic(layer, { url, vehicle = 'car', side, outline, speed: velocity = sharedSpeed, ...options } = trafficEmptyOptions) {
+  const { model, lights, side: defaultSide } = vehicles[vehicle];
+  side ??= defaultSide;
+  init3D(layer, /* alloc */ {
+    tooltip,
+    nightLight: Boolean(lights),
+    ...options,
+  });
+  const status = L.DomUtil.create('small', 'traffic-status');
+  status.style.cssText = 'flex:0 1 auto;padding:1px 5px;border-radius:3px;background:#00000008;color:#555;';
+  status.title = vehicle;
+  status.textContent = `${vehicle}: loading…`;
+  const template = build(model(0)), stride = template.position.length, vertices = stride / 3;
+  const params = /* alloc */ new ArrayBuffer(16);
+  const paramFloats = /* alloc */ new Float32Array(params);
+  const paramInts = /* alloc */ new Uint32Array(params);
+  const state = /* alloc */ {
+    layer, url, model, lights, side, outline, velocity, vehicle, status, template, stride, vertices,
+    params, paramFloats, paramInts,
+    ready: false, frame: undefined, request: undefined, lanes: /* alloc */ [], tripsKey: undefined,
+    mesh: undefined, route: undefined, litAt: -Infinity,
+    trips: /* alloc */ [], 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);
+  trafficByLayer.set(layer, 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

@@ -3,13 +3,13 @@ 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),
-  );
+export function loadTraffic(state) {
+  const { time } = trafficNow(state);
+  if (!Number.isFinite(time?.getTime())) return;
+  state.request?.abort();
+  const { signal } = state.request = /* alloc */ new AbortController();
+  fetchTrafficLanes(state, time, signal).then(
+    loadedTrafficLanes.bind(null, state, signal),
+    failedTrafficLoad.bind(null, state, signal),
+  );
 }

package/src/traffic/locateTraffic.js

@@ -1,9 +1,11 @@
-import { along } from './along.js';
-
+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 };
-}
+  const position = along(points, lengths, distance);
+  position.x -= position.dz * state.side;
+  position.z += position.dx * state.side;
+  return position;
+}

package/src/traffic/moveTraffic.js

@@ -10,6 +10,6 @@ export function moveTraffic(state, seconds) {
   pass.setBindGroup(0, state.gpu.bindGroup);
   pass.dispatchWorkgroups(state.trips.length);
   pass.end();
-  device.queue.submit([encoder.finish()]);
+  device.queue.submit(/* alloc */ [encoder.finish()]);
   state.stale = true;
-}
+}

package/src/traffic/prepareTraffic.js

@@ -1,18 +1,23 @@
+import { radians } from '../globals/radians.js';
+import { L } from '../globals/L.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 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);
+  const crs = layer._map.options.crs, origin = crs.project(sceneByLayer.get(layer).location);
+  const metres = Math.cos(sceneByLayer.get(layer).location.lat * radians);
   let lane, lat, lng, point, i;
   for (lane of lanes) {
-    lane.points = [];
+    lane.points = /* alloc */ [];
     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]);
+      point = crs.project(/* alloc */ new L.LatLng(lat, lng));
+      lane.points.push(/* alloc */ [(point.x - origin.x) * metres, -(point.y - origin.y) * metres, 0]);
     }
-    lane.lengths = [0];
+    lane.lengths = /* alloc */ [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]));
     }

package/src/traffic/rebaseTraffic.js

@@ -1,39 +1,34 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 import { destroyTrafficGpu } from './destroyTrafficGpu.js';
 import { trafficStorage } from './trafficStorage.js';
+import { uploadTrafficLanes } from './uploadTrafficLanes.js';
 
 export function rebaseTraffic(state) {
-  const { device } = state.layer.renderer;
+  const { device } = sceneByLayer.get(state.layer).renderer;
   if (state.gpu?.device !== device) {
     destroyTrafficGpu(state);
-    state.gpu = {
+    const template = /* alloc */ new Float32Array(
+      state.template.position.length + state.template.normal.length);
+    template.set(state.template.position);
+    template.set(state.template.normal, state.template.position.length);
+    state.gpu = /* alloc */ {
       device,
-      pipeline: device.createComputePipeline({ layout: 'auto', compute: { module: device.createShaderModule({ code: state.shader }), entryPoint: 'main' } }),
-      params: device.createBuffer({ size: 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST }),
-      template: trafficStorage(device, new Float32Array([...state.template.position, ...state.template.normal])),
+      pipeline: device.createComputePipeline(/* alloc */ {
+        layout: 'auto', compute: /* alloc */ {
+          module: device.createShaderModule(/* alloc */ { code: state.shader }), entryPoint: 'main',
+        },
+      }),
+      params: device.createBuffer(/* alloc */ { size: 16, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST }),
+      template: trafficStorage(device, template),
     };
     state.lanesDirty = true;
   }
-  let lane, i, point, trip, binding;
-  if (state.lanesDirty) {
-    let count = 0;
-    for (lane of state.lanes) count += lane.points.length;
-    const data = new Float32Array(count * 4);
-    let offset = 0;
-    for (lane of state.lanes) {
-      lane.start = offset / 4;
-      for (i = 0; i < lane.points.length; i++) {
-        point = lane.points[i];
-        data[offset++] = point[0];
-        data[offset++] = point[1];
-        data[offset++] = point[2];
-        data[offset++] = lane.lengths[i];
-      }
-    }
-    state.gpu.points?.destroy();
-    state.gpu.points = trafficStorage(device, data);
-    state.lanesDirty = false;
-  }
-  const data = new Float32Array(state.trips.length * 4), index = new Uint32Array(data.buffer);
+  let i, trip, binding;
+  if (state.lanesDirty) uploadTrafficLanes(state, device);
+  const data = /* alloc */ new Float32Array(state.trips.length * 4);
+  const index = /* alloc */ new Uint32Array(data.buffer);
   for (i = 0; i < state.trips.length; i++) {
     trip = state.trips[i];
     index[i * 4] = trip.lane.start;
@@ -48,10 +43,17 @@ export function rebaseTraffic(state) {
     state.gpu.vehicles = trafficStorage(device, data);
   }
   const { position, normal } = state.mesh.geometry.attributes;
-  const buffers = [state.gpu.params, state.gpu.template, state.gpu.points, state.gpu.vehicles, position.buffer, normal.buffer];
-  const entries = [];
-  for (binding = 0; binding < buffers.length; binding++) entries.push({ binding, resource: { buffer: buffers[binding] } });
-  state.gpu.bindGroup = device.createBindGroup({
+  const entries = /* alloc */ [];
+  let buffer;
+  for (binding = 0; binding < 6; binding++) {
+    buffer = binding === 0 ? state.gpu.params : binding === 1 ? state.gpu.template
+      : binding === 2 ? state.gpu.points : binding === 3 ? state.gpu.vehicles
+        : binding === 4 ? position.buffer : normal.buffer;
+    entries.push(/* alloc */ {
+      binding, resource: /* alloc */ { buffer },
+    });
+  }
+  state.gpu.bindGroup = device.createBindGroup(/* alloc */ {
     layout: state.gpu.pipeline.getBindGroupLayout(0),
     entries,
   });

package/src/traffic/rebuildTrafficMesh.js

@@ -1,27 +1,31 @@
+import { trafficEmptyOptions } from '../globals/trafficEmptyOptions.js';
 import { build } from '../geometry/build.js';
 import { createTrafficMesh } from './createTrafficMesh.js';
 import { disposeTrafficObject } from './disposeTrafficObject.js';
 import { trafficBounds } from './trafficBounds.js';
 
+
 export function rebuildTrafficMesh(state) {
   const { trips, model, vertices } = state;
   disposeTrafficObject(state, state.mesh);
   state.mesh = null;
   if (!trips.length) return;
-  const color = [], featureFaces = [];
+  const color = /* alloc */ [];
+  const featureFaces = /* alloc */ [];
   let i, trip, component;
   for (i = 0; i < trips.length; i++) {
     trip = trips[i];
     for (component of build(model(i, trip.properties)).color) color.push(component);
-    featureFaces.push({
+    featureFaces.push(/* alloc */ {
       id: trip.id, properties: trip.properties, faceStart: i * vertices / 3, faceEnd: (i + 1) * vertices / 3,
       vertexStart: i * vertices, vertexEnd: (i + 1) * vertices
     });
   }
   const count = color.length / 3;
-  state.mesh = createTrafficMesh(state, {
-    position: new Array(color.length).fill(0), normal: new Array(color.length).fill(0), color,
-  }, featureFaces, {}, GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC);
+  state.mesh = createTrafficMesh(state, /* alloc */ {
+    position: /* alloc */ new Array(color.length).fill(0),
+    normal: /* alloc */ new Array(color.length).fill(0), color,
+  }, featureFaces, trafficEmptyOptions, GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC);
   state.mesh.geometry.drawRange.count = count;
   state.mesh.extras.dynamicLights = true;
   trafficBounds(state);

package/src/traffic/refreshTrafficTrips.js

@@ -0,0 +1,32 @@
+import { tripsAt } from './tripsAt.js';
+import { failTraffic } from './failTraffic.js';
+import { drawTrafficRoute } from './drawTrafficRoute.js';
+import { rebuildTrafficMesh } from './rebuildTrafficMesh.js';
+import { rebaseTraffic } from './rebaseTraffic.js';
+import { trafficStatusText } from './trafficStatusText.js';
+
+export function refreshTrafficTrips(state, time, ms, valid) {
+  let text;
+  try {
+    if (valid) state.trips = tripsAt(time, state.lanes, state.velocity);
+    else state.trips.length = 0;
+    text = trafficStatusText(state, valid);
+  } catch (error) {
+    failTraffic(state, error);
+    return;
+  }
+  state.rebasedAt = ms;
+  state.nextCheck = ms + 1000;
+  let key = '', trip;
+  for (trip of state.trips) key += `${key ? ',' : ''}${trip.id}`;
+  const routeNeeded = state.outline && !state.route && state.lanes.length;
+  const changed = key !== state.tripsKey || Boolean(routeNeeded);
+  if (routeNeeded) drawTrafficRoute(state);
+  if (key !== state.tripsKey) { rebuildTrafficMesh(state); state.tripsKey = key; }
+  if (state.mesh) rebaseTraffic(state);
+  if (!state.error) {
+    if (state.status.textContent !== text) state.status.textContent = text;
+    state.status.removeAttribute('role');
+  }
+  return changed;
+}