leaflet-city-mapper 0.0.0-stage → 0.0.2

package/src/utils/glass.js

@@ -0,0 +1 @@
+export const glass = [0.12, 0.15, 0.18], tyre = [0.05, 0.05, 0.05];

package/src/utils/headlight.js

@@ -0,0 +1 @@
+export const headlight = [1.9, 1.85, 1.7];

package/src/utils/hit.js

@@ -0,0 +1,41 @@
+import { CELL } from './CELL.js';
+import { collider } from './collider.js';
+import { computeBounds } from './computeBounds.js';
+import { horizontalRay } from './horizontalRay.js';
+import { traverse } from './traverse.js';
+import { updateWorldMatrix } from './updateWorldMatrix.js';
+
+// Horizontal normal of the nearest wall faced within `reach` metres of the feet at world (x, y, z), walking along
+// the unit (dx, dz); knee and chest rays, so arches and tree crowns above the head let the walker through.
+// ponytail: traffic vehicles and boats move on the GPU and are not obstacles.
+
+export function hit(layer, x, y, z, dx, dz, reach) {
+  const skip = other => other === layer || ['terrain', 'traffic'].includes(other._type);
+  updateWorldMatrix(layer.scene);
+  let best = reach, found = null;
+  for (const other of layer._shared._layers) {
+    if (skip(other)) continue;
+    traverse(other.root, mesh => {
+      if (!mesh.visible) return true;
+      if (!mesh.geometry?.attributes?.position?.data || mesh.program?.depthTest === false) return;
+      if (!mesh.geometry.bounds) computeBounds(mesh.geometry);
+      const m = mesh.worldMatrix, { center: k, radius } = mesh.geometry.bounds;
+      if (Math.hypot(m[0] * k[0] + m[4] * k[1] + m[8] * k[2] + m[12] - x, m[2] * k[0] + m[6] * k[1] + m[10] * k[2] + m[14] - z) >
+        radius * Math.hypot(m[0], m[1], m[2]) + reach) return;
+      const c = collider(mesh), ox = x - m[12] + c.origin[0], oy = y - m[13] + c.origin[1], oz = z - m[14] + c.origin[2];
+      const seen = new Set();
+      for (let ix = Math.floor(Math.min(ox, ox + dx * reach) / CELL); ix <= Math.floor(Math.max(ox, ox + dx * reach) / CELL); ix++)
+        for (let iz = Math.floor(Math.min(oz, oz + dz * reach) / CELL); iz <= Math.floor(Math.max(oz, oz + dz * reach) / CELL); iz++)
+          for (const t of c.cells.get(ix + ',' + iz) || []) {
+            // Walls are one-way: walking out of a building (e.g. starting inside one) is allowed.
+            if (seen.has(t) || dx * c.nrm[t * 2] + dz * c.nrm[t * 2 + 1] >= 0) continue;
+            seen.add(t);
+            for (const height of [0.4, 1.5]) {
+              const d = horizontalRay(c.tri, t, ox, oy + height, oz, dx, dz);
+              if (d >= 0 && d < best) { best = d; found = [c.nrm[t * 2], c.nrm[t * 2 + 1]]; }
+            }
+          }
+    });
+  }
+  return found;
+}

package/src/utils/horizontalPosition.js

@@ -0,0 +1,16 @@
+
+export function horizontalPosition(d, lat, lng, ascension, declination) {
+  const rad = Math.PI / 180;
+  const hourAngle = (280.16 + 360.9856235 * d + lng) * rad - ascension;
+  const latitude = lat * rad;
+  const altitude = Math.asin(Math.sin(latitude) * Math.sin(declination) +
+    Math.cos(latitude) * Math.cos(declination) * Math.cos(hourAngle));
+  const southAzimuth = Math.atan2(Math.sin(hourAngle),
+    Math.cos(hourAngle) * Math.sin(latitude) - Math.tan(declination) * Math.cos(latitude));
+  const azimuth = (southAzimuth / rad + 180 + 360) % 360;
+  return {
+    altitude: altitude / rad, azimuth,
+    direction: [Math.sin(azimuth * rad) * Math.cos(altitude), Math.sin(altitude),
+    -Math.cos(azimuth * rad) * Math.cos(altitude)]
+  };
+}

package/src/utils/horizontalRay.js

@@ -0,0 +1,12 @@
+// Möller-Trumbore for the horizontal ray (ox, oy, oz) + d·(dx, 0, dz) against triangle t; returns d or -1.
+export function horizontalRay(v, t, ox, oy, oz, dx, dz) {
+  const i = t * 9, ex = v[i + 3] - v[i], ey = v[i + 4] - v[i + 1], ez = v[i + 5] - v[i + 2];
+  const fx = v[i + 6] - v[i], fy = v[i + 7] - v[i + 1], fz = v[i + 8] - v[i + 2];
+  const px = -dz * fy, py = dz * fx - dx * fz, pz = dx * fy, det = ex * px + ey * py + ez * pz;
+  if (Math.abs(det) < 1e-9) return -1;
+  const tx = ox - v[i], ty = oy - v[i + 1], tz = oz - v[i + 2], u = (tx * px + ty * py + tz * pz) / det;
+  if (u < 0 || u > 1) return -1;
+  const qx = ty * ez - tz * ey, qy = tz * ex - tx * ez, qz = tx * ey - ty * ex, w = (dx * qx + dz * qz) / det;
+  if (w < 0 || u + w > 1) return -1;
+  return (fx * qx + fy * qy + fz * qz) / det;
+}

package/src/utils/hull.js

@@ -0,0 +1 @@
+export const hull = [[-5.5, 30], [5.5, 30], [5.5, -20], [4, -26], [1.5, -30], [-1.5, -30], [-4, -26], [-5.5, -20]];

package/src/utils/initSunlight.js

@@ -0,0 +1,9 @@
+import { onAddSun } from './onAddSun.js';
+import { onRemoveSun } from './onRemoveSun.js';
+
+// Sun/moon clock control and sky colours; the control is created on first add (`layer.control`).
+export function initSunlight(layer, options) {
+  L.Util.setOptions(layer, options);
+  layer.onAdd = map => onAddSun(layer, map);
+  layer.onRemove = () => onRemoveSun(layer);
+}

package/src/utils/initTerrain.js

@@ -0,0 +1,19 @@
+import { onTerrainRemove } from './onTerrainRemove.js';
+import { onTerrainAdd } from './onTerrainAdd.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;
+  layer._init3D(layerOptions);
+  layer.terrainSource = terrainSource;
+  layer._terrainTiles = new Map();
+  layer._rasterTiles = new Map();
+  layer._terrainReady = false;
+  layer.onAdd = map => onTerrainAdd(layer, map);
+  layer.onRemove = map => onTerrainRemove(layer, map);
+}

package/src/utils/initTraffic.js

@@ -0,0 +1,93 @@
+/**
+ * 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) or 'boat'; `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 (vehicle count, then the FeatureCollection `note`) sits under the layer's entry in the layers control.
+ * The 'sunlight' layer on the same map drives the time; without one, vehicles run live.
+ */
+import { build } from './build.js';
+import { tooltip } from './tooltip.js';
+import { speed } from './speed.js';
+import { vehicles } from './vehicles.js';
+import {
+  addTraffic,
+  placeTraffic,
+  removeTraffic,
+  readyTraffic,
+  tickTraffic,
+  updateTraffic,
+  updateTrafficTerrain,
+} from './traffic.js';
+
+export function initTraffic(layer, { url, vehicle = 'car', side, outline, speed: velocity = speed, ...options } = {}) {
+  const { model, lights, side: defaultSide } = vehicles[vehicle];
+  side ??= defaultSide;
+  layer._init3D({
+    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, 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().
+  const shader = `
+    struct Params { seconds: f32, side: f32, vertices: u32, total: u32 }
+    struct Vehicle { start: u32, count: u32, base: f32, speed: f32 }
+    @group(0) @binding(0) var<uniform> params: Params;
+    @group(0) @binding(1) var<storage, read> model: array<f32>;
+    @group(0) @binding(2) var<storage, read> points: array<vec4f>;
+    @group(0) @binding(3) var<storage, read> vehicles: array<Vehicle>;
+    @group(0) @binding(4) var<storage, read_write> position: array<f32>;
+    @group(0) @binding(5) var<storage, read_write> normal: array<f32>;
+    @compute @workgroup_size(64)
+    fn main(@builtin(global_invocation_id) id: vec3u) {
+      let v = id.x;
+      if (v >= params.total) { return; }
+      let vehicle = vehicles[v / params.vertices];
+      let last = vehicle.start + vehicle.count - 1u;
+      let length = points[last].w;
+      var s = vehicle.base + params.seconds * vehicle.speed;
+      s -= length * floor(s / length);
+      var i = vehicle.start + 1u;
+      while (i < last && points[i].w < s) { i++; }
+      let a = points[i - 1u];
+      let b = points[i];
+      let d = select(b.w - a.w, 1.0, b.w == a.w);
+      let t = (s - a.w) / d;
+      let dx = (b.x - a.x) / d;
+      let dz = (b.y - a.y) / d;
+      let cx = a.x + (b.x - a.x) * t - dz * params.side;
+      let cz = a.y + (b.y - a.y) * t + dx * params.side;
+      let y = a.z + (b.z - a.z) * t;
+      let k = (v % params.vertices) * 3u;
+      let n = params.vertices * 3u + k;
+      let o = v * 3u;
+      position[o] = cx - model[k] * dz - model[k + 2u] * dx;
+      position[o + 1u] = y + model[k + 1u];
+      position[o + 2u] = cz + model[k] * dx - model[k + 2u] * dz;
+      normal[o] = -model[n] * dz - model[n + 2u] * dx;
+      normal[o + 1u] = model[n + 1u];
+      normal[o + 2u] = model[n] * dx - model[n + 2u] * dz;
+    }`;
+  state.shader = shader;
+  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/utils/initWalk.js

@@ -0,0 +1,72 @@
+import {
+  controlOnAdd, onBlur, onKey, onLayerAdd, onLayerRemove, onPointer, onReady, onTerrain, start, step, stop, toggle
+} from './walk.js';
+
+/**
+ * Third-person walk mode, toggled by a map button (and Esc): a pedestrian at the map centre runs with W/S (or ↑/↓) and
+ * turns with A/D (or ←/→); the camera swings back behind it while it moves. Dragging the map only turns the camera
+ * (bearing, pitch); the wheel changes the camera distance.
+ * The walker follows the terrain, bridges included, and `layer.walker` exposes `{ latlng, heading, phase }`.
+ * Source options: `speed` (m/s, default 6), `distance` (camera distance in metres, default 20), `position` (button corner, default 'topleft').
+ * Visible meshes of the other 3D layers (buildings, trees, models, streetlights) are solid; terrain and traffic are not.
+ */
+export function initWalk(layer, {
+  speed = 70,
+  distance = 20,
+  position = 'bottomright',
+  ...options
+} = {}) {
+  layer._init3D(options);
+  const keys = new Set();
+  const control = new L.Control({ position });
+  const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
+  container.style.cssText = 'display:flex;align-items:center;background:#fff;';
+  const button = L.DomUtil.create('button', '', container);
+  button.type = 'button';
+  button.title = 'Walk';
+  button.setAttribute('aria-label', 'Walk');
+  button.setAttribute('aria-pressed', 'false');
+  button.textContent = '🚶';
+  button.style.cssText = 'width:30px;height:30px;padding:0;border:0;border-radius:4px;background:#fff;font-size:18px;line-height:30px;cursor:pointer;';
+  const hint = L.DomUtil.create('small', '', container);
+  hint.style.cssText = 'display:none;padding:0 8px;color:#333;white-space:nowrap;';
+  hint.textContent = 'W/S: run · A/D: turn · drag: look around · Esc: exit';
+  L.DomEvent.disableClickPropagation(container);
+
+  const context = {
+    layer,
+    speed,
+    distance,
+    keys,
+    control,
+    container,
+    button,
+    hint,
+    meshes: null,
+    frame: null,
+    last: undefined,
+    swing: 0,
+    saved: null,
+    drag: null,
+    ready: false,
+    state: layer.walker = { latlng: null, heading: 0, phase: 0 }
+  }
+  context.step = step.bind(context);
+  context.onKey = onKey.bind(context);
+  context.onBlur = onBlur.bind(context);
+  context.onPointer = onPointer.bind(context);
+  context.onTerrain = onTerrain.bind(context);
+  context.start = start.bind(context);
+  context.stop = stop.bind(context);
+  context.toggle = toggle.bind(context);
+  context.controlOnAdd = controlOnAdd.bind(context);
+  context.onReady = onReady.bind(context);
+  context.onLayerAdd = onLayerAdd.bind(context);
+  context.onLayerRemove = onLayerRemove.bind(context);
+
+  control.onAdd = context.controlOnAdd;
+  L.DomEvent.on(button, 'click', context.toggle);
+  layer.on('ready', context.onReady);
+  layer.on('add', context.onLayerAdd);
+  layer.on('remove', context.onLayerRemove);
+};

package/src/utils/intersectMeshes.js

@@ -0,0 +1,121 @@
+import { computeBounds } from "./computeBounds.js";
+
+const sub = (a, b) => a.map((v, i) => v - b[i]);
+const cross = (a, b) => [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]];
+const dot = (a, b) => a.reduce((sum, v, i) => sum + v * b[i], 0);
+
+/** Nearest triangle hit per mesh, sorted by world-space distance. */
+
+export function intersectMeshes(ray, meshes, night = 0) {
+  const hits = [],
+  a = [0, 0, 0],
+  b = [0, 0, 0],
+  c = [0, 0, 0];
+  for (const mesh of meshes) {
+    // Test in mesh-local space; compare distances only after returning to shared world space.
+    const inverse = new DOMMatrix(mesh.worldMatrix).inverse();
+    const inverseValues = inverse.toFloat64Array();
+    if (![...inverseValues].every(Number.isFinite)) {
+      throw new Error('Singular 3D transform');
+    }
+    const localOrigin = new DOMPoint(...ray.origin, 1).matrixTransform(inverse);
+    const origin = [
+      localOrigin.x / localOrigin.w,
+      localOrigin.y / localOrigin.w,
+      localOrigin.z / localOrigin.w
+    ];
+    const localDirection = new DOMPoint(...ray.direction, 0).matrixTransform(inverse);
+    const direction = [
+      localDirection.x,
+      localDirection.y,
+      localDirection.z
+    ];
+    const directionLength = Math.hypot(...direction) || 1;
+    direction[0] /= directionLength;
+    direction[1] /= directionLength;
+    direction[2] /= directionLength;
+    // AABB slab test reuses the same local ray as the triangle test.
+    if (!mesh.geometry.bounds) {
+      computeBounds(mesh.geometry);
+    }
+    let near = 0, far = Infinity;
+    for (let i = 0; i < 3; i++) {
+      if (Math.abs(direction[i]) < 1e-12) {
+        if (origin[i] < mesh.geometry.bounds.min[i] || origin[i] > mesh.geometry.bounds.max[i]) {
+          far = -Infinity;
+          break;
+        }
+      } else {
+        const a = (mesh.geometry.bounds.min[i] - origin[i]) / direction[i], b = (mesh.geometry.bounds.max[i] - origin[i]) / direction[i];
+        near = Math.max(near, Math.min(a, b));
+        far = Math.min(far, Math.max(a, b));
+      }
+    }
+    if (far < near) {
+      continue;
+    }
+    const { position, index } = mesh.geometry.attributes;
+    let closest = Infinity, faceIndex;
+    for (let i = 0; i < (index?.count || position.count); i += 3) {
+      const ai = (index ? index.data[i] : i) * position.size;
+      const bi = (index ? index.data[i + 1] : i + 1) * position.size;
+      const ci = (index ? index.data[i + 2] : i + 2) * position.size;
+      a[0] = position.data[ai];
+      a[1] = position.data[ai + 1];
+      a[2] = position.data[ai + 2];
+      b[0] = position.data[bi];
+      b[1] = position.data[bi + 1];
+      b[2] = position.data[bi + 2];
+      c[0] = position.data[ci];
+      c[1] = position.data[ci + 1];
+      c[2] = position.data[ci + 2];
+      // Moller-Trumbore: barycentric triangle coordinates and local ray distance.
+      const e = sub(b, a),
+            f = sub(c, a),
+            p = cross(direction, f),
+            det = dot(e, p);
+      if (mesh.program.cullMode === 'none' || mesh.program.cullFace === null
+        ? Math.abs(det) < 1e-9 : det < 1e-9) {
+        continue;
+      }
+      const t = sub(origin, a), u = dot(t, p) / det;
+      if (u < 0 || u > 1) {
+        continue;
+      }
+      const q = cross(t, e), v = dot(direction, q) / det;
+      if (v < 0 || u + v > 1) {
+        continue;
+      }
+      if (mesh.program.nightLight) {
+        const uv = mesh.geometry.attributes.uv.data;
+        const ids = index ? [index.data[i], index.data[i + 1], index.data[i + 2]] : [i, i + 1, i + 2];
+        const x = uv[ids[0] * 2] * (1 - u - v) + uv[ids[1] * 2] * u + uv[ids[2] * 2] * v;
+        const y = uv[ids[0] * 2 + 1] * (1 - u - v) + uv[ids[1] * 2 + 1] * u + uv[ids[2] * 2 + 1] * v;
+        if (x <= 2 && (!night || x * x + y * y > 0.9)) continue;
+      }
+      const distance = dot(f, q) / det;
+      if (distance > 0 && distance < closest) {
+        closest = distance; faceIndex = i / 3;
+      }
+    }
+    if (faceIndex === undefined) continue;
+    const point = new DOMPoint(
+      direction[0] * closest + origin[0],
+      direction[1] * closest + origin[1],
+      direction[2] * closest + origin[2],
+      1
+    ).matrixTransform(new DOMMatrix(mesh.worldMatrix));
+    const worldPoint = [point.x / point.w, point.y / point.w, point.z / point.w];
+    hits.push({
+      faceIndex,
+      object: mesh,
+      point: worldPoint,
+      distance: Math.hypot(
+        worldPoint[0] - ray.origin[0],
+        worldPoint[1] - ray.origin[1],
+        worldPoint[2] - ray.origin[2]
+      )
+    });
+  }
+  return hits.sort((a, b) => a.distance - b.distance);
+}

package/src/utils/isClockWise.js

@@ -0,0 +1,12 @@
+/**
+ * @returns {boolean} Whether the `{x, y}` points are in clockwise order.
+ */
+
+export function isClockWise(points) {
+  let area = 0;
+  for (let i = 0; i < points.length; i++) {
+    const a = points[i], b = points[(i + 1) % points.length];
+    area += a.x * b.y - b.x * a.y;
+  }
+  return area < 0;
+}

package/src/utils/lampPostGeometry.js

@@ -0,0 +1,26 @@
+import { parseColor } from "./parseColor.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 ring = r => Array.from({ length: 6 }, (_, i) => ({
+    x: point.x + Math.cos(i * Math.PI / 3) * r,
+    y: point.y + Math.sin(i * Math.PI / 3) * r, ground: point.ground, uv: [3, 3],
+  }));
+  const center = { ...point, uv: [3, 3] };
+  for (const [r, low, high] of [[radius, 0, style.top], [radius * 2.5, style.top - 0.25, style.top + 0.15]]) {
+    const points = ring(r);
+    for (let i = 0; i < 6; i++) {
+      const a = points[i], b = points[(i + 1) % 6], angle = (i + 0.5) * Math.PI / 3;
+      const 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/utils/lightGeometry.js

@@ -0,0 +1,22 @@
+import { parseColor } from "./parseColor.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);
+  const quad = (a, b, c, d, height, normal) => {
+    addTriangle(a, height, b, height, c, height, ...normal, color);
+    addTriangle(a, height, c, height, d, height, ...normal, color);
+  };
+  const r = 0.65;
+  const emitter = (u, v, axis) => ({
+    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],
+  });
+  for (let axis = 0; axis < 3; axis++) {
+    quad(emitter(-1, -1, axis), emitter(1, -1, axis), emitter(1, 1, axis), emitter(-1, 1, axis),
+      style.top, axis === 0 ? [0, 1, 0] : axis === 1 ? [0, 0, 1] : [1, 0, 0]);
+  }
+}

package/src/utils/lightGrid.js

@@ -0,0 +1,50 @@
+/** Pack world-space point lights into the shader's spatial grid. */
+export function lightGrid(packed, maxBytes) {
+  const count = packed.reduce((sum, values) => sum + values.length / 8, 0), cellSize = 32;
+  let data = new Float32Array(8);
+  if (count) {
+    let minX = Infinity, minZ = Infinity, maxX = -Infinity, maxZ = -Infinity;
+    for (const values of packed) for (let i = 0; i < values.length; i += 8) {
+      minX = Math.min(minX, values[i] - values[i + 3]);
+      maxX = Math.max(maxX, values[i] + values[i + 3]);
+      minZ = Math.min(minZ, values[i + 2] - values[i + 3]);
+      maxZ = Math.max(maxZ, values[i + 2] + values[i + 3]);
+    }
+    const columns = Math.ceil((maxX - minX) / cellSize) + 1,
+             rows = Math.ceil((maxZ - minZ) / cellSize) + 1;
+    const each = callback => {
+      for (const values of packed) for (let i = 0; i < values.length; i += 8) {
+        const radius = values[i + 3],
+                   x = values[i] - minX,
+                   z = values[i + 2] - minZ;
+        for (let y = Math.floor((z - radius) / cellSize); y <= Math.floor((z + radius) / cellSize); y++) {
+          for (let c = Math.floor((x - radius) / cellSize); c <= Math.floor((x + radius) / cellSize); c++) {
+            callback(y * columns + c, values, i);
+          }
+        }
+      }
+    };
+    // Counting sort: count the lights of each cell, then fill each cell's slice.
+    const counts = new Uint32Array(columns * rows),
+            next = new Uint32Array(columns * rows);
+    each(key => counts[key]++);
+    const entries = counts.reduce((sum, value) => sum + value, 0);
+    const length = (2 + columns * rows + entries * 2) * 4;
+    if (length * 4 > maxBytes) {
+      throw new Error('Streetlight grid exceeds GPU storage limit');
+    }
+    data = new Float32Array(length);
+    data.set([minX, minZ, cellSize, columns, rows, count, 0, 0]);
+    let offset = 2 + columns * rows;
+    for (let key = 0; key < counts.length; key++) if (counts[key]) {
+      data[(2 + key) * 4] = next[key] = offset;
+      data[(2 + key) * 4 + 1] = counts[key];
+      offset += counts[key] * 2;
+    }
+    each((key, values, i) => {
+      for (let j = 0, o = next[key] * 4; j < 8; j++) data[o + j] = values[i + j];
+      next[key] += 2;
+    });
+  }
+  return { data, count };
+}

package/src/utils/limbs.js

@@ -0,0 +1,9 @@
+// [part, pivot x, pivot y, swing sign]
+
+export const limbs = [
+  ['body', 0, 0, 0],
+  ['leg', -0.09, 0.9, 1],
+  ['leg', 0.09, 0.9, -1],
+  ['arm', -0.25, 1.42, -1],
+  ['arm', 0.25, 1.42, 1]
+];