leaflet-city-mapper 0.0.1 → 0.0.2

package/src/utils/updateArea.js

@@ -0,0 +1,40 @@
+import { pump } from "./pump.js";
+import { releaseArea } from "./releaseArea.js";
+
+/** Cover the visible ground bounds and one bordering block, clipped to the archive. */
+
+export function updateArea(backend) {
+  if (!backend._map || !backend._shared) return;
+  if (backend._geojson) {
+    if (!backend._areas.has('geojson')) {
+      backend._areas.set('geojson', { request: new AbortController() });
+    }
+    pump(backend);
+    return;
+  }
+  if (!backend.header) return;
+  const z = backend.header.minZoom;
+  const center = backend._map.project(backend._map.getCenter(), z).divideBy(256).floor();
+  const bounds = backend._map.getBounds();
+  const nw = backend._map.project(bounds.getNorthWest(), z).divideBy(256).floor();
+  const se = backend._map.project(bounds.getSouthEast(), z).divideBy(256).floor();
+  const archiveNW = backend._map.project([backend.header.maxLat, backend.header.minLon], z).divideBy(256).floor();
+  const archiveSE = backend._map.project([backend.header.minLat, backend.header.maxLon], z).divideBy(256).floor();
+  const wanted = new Map();
+  for (let x = Math.max(0, nw.x - 1, archiveNW.x); x <= Math.min(2 ** z - 1, se.x + 1, archiveSE.x); x++) {
+    for (let y = Math.max(0, nw.y - 1, archiveNW.y); y <= Math.min(2 ** z - 1, se.y + 1, archiveSE.y); y++) {
+      wanted.set(`${x}/${y}`, { z, x, y });
+    }
+  }
+  for (const [key, area] of backend._areas) {
+    if (!wanted.has(key)) {
+      releaseArea(backend, area);
+      backend._areas.delete(key);
+    }
+  }
+  // Load the nearest new blocks first without rebuilding retained geometry.
+  for (const [key, coords] of [...wanted].sort(([, a], [, b]) => Math.hypot(a.x - center.x, a.y - center.y) - Math.hypot(b.x - center.x, b.y - center.y))) {
+    if (!backend._areas.has(key)) backend._areas.set(key, { coords, request: new AbortController() });
+  }
+  pump(backend);
+}

package/src/utils/updateCamera.js

@@ -0,0 +1,32 @@
+/** Orthonormal view basis plus perspective matrices, refreshed before projecting/drawing. */
+
+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]];
+
+export function updateCamera(camera) {
+  const z = camera.position.map((v, i) => v - camera.target[i]);
+  const zLength = Math.hypot(...z) || 1;
+  for (let i = 0; i < 3; i++) {
+    z[i] /= zLength;
+  }
+  const x = cross(camera.up, z), xLength = Math.hypot(...x) || 1;
+  for (let i = 0; i < 3; i++) {
+    x[i] /= xLength;
+  }
+  const y = cross(z, x);
+  const view = new DOMMatrix([x[0], x[1], x[2], 0, y[0], y[1], y[2], 0, z[0], z[1], z[2], 0, ...camera.position, 1]).inverse().toFloat64Array();
+  if (![...view].every(Number.isFinite)) {
+    throw new Error('Singular 3D transform');
+  }
+  for (let i = 0; i < 16; i++) {
+    camera.viewMatrix[i] = view[i];
+  }
+  const f = 1 / Math.tan(camera.fov * Math.PI / 360), n = camera.near, r = camera.far;
+  const projection = [f / camera.aspect, 0, 0, 0, 0, f, 0, 0, 0, 0, r / (n - r), -1, 0, 0, r * n / (n - r), 0];
+  for (let i = 0; i < 16; i++) {
+    camera.projectionMatrix[i] = projection[i];
+  }
+  const projectionView = new DOMMatrix(camera.projectionMatrix).multiply(new DOMMatrix(camera.viewMatrix)).toFloat64Array();
+  for (let i = 0; i < 16; i++) {
+    camera.projectionViewMatrix[i] = projectionView[i];
+  }
+}

package/src/utils/updatePointLights.js

@@ -0,0 +1,38 @@
+import { lightGrid } from './lightGrid.js';
+import { traverse } from './traverse.js';
+import { worldLights } from './worldLights.js';
+import { destroyTexture } from './destroyTexture.js';
+import { bindSunlight } from './bindSunlight.js';
+
+/** A cached spatial grid limits fragment lighting to nearby lamps, without dropping dense cells. */
+
+export function updatePointLights(backend) {
+  const { device, sunlight: sun } = backend.renderer;
+  const meshes = [];
+  for (const layer of backend._layers) {
+    if (!layer.options.nightLight || !layer.root.visible) continue;
+    traverse(layer.root, mesh => {
+      if (!mesh.visible) return true;
+      if (mesh.extras?.lights) meshes.push(mesh);
+    });
+  }
+  if (sun.lightMeshes?.length === meshes.length && meshes.every((mesh, i) => sun.lightMeshes[i].mesh === mesh &&
+    sun.lightMeshes[i].lights === mesh.extras.lights && mesh.worldMatrix.every((v, j) => v === sun.lightMeshes[i].matrix[j]))) return;
+  // Per mesh, world-space [x, y, z, radius, r, g, b, intensity] per light: re-packed only when its lights or matrix change.
+  const packed = meshes.map(mesh => {
+    const cache = mesh._worldLights, m = mesh.worldMatrix, lights = mesh.extras.lights;
+    if (cache?.lights === lights && m.every((v, j) => v === cache.matrix[j])) return cache.data;
+    const values = worldLights(lights, m);
+    mesh._worldLights = { lights, matrix: [...m], data: values };
+    return values;
+  });
+  const { data, count } = lightGrid(packed, device.limits.maxStorageBufferBindingSize);
+  if (sun.lights.size < data.byteLength) {
+    destroyTexture(backend, sun.lights);
+    sun.lights = device.createBuffer({ size: data.byteLength, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+    bindSunlight(backend);
+  }
+  device.queue.writeBuffer(sun.lights, 0, data);
+  sun.lightCount = count;
+  sun.lightMeshes = meshes.map(mesh => ({ mesh, lights: mesh.extras.lights, matrix: [...mesh.worldMatrix] }));
+}

package/src/utils/updateWorldMatrix.js

@@ -0,0 +1,47 @@
+/** Compose parent*local matrices; a node.matrix overrides its position/rotation/scale. */
+
+export function updateWorldMatrix(node) {
+  const parent = node.parent;
+  const parentVersion = parent?._worldMatrixVersion || 0;
+  const matrixMode = Boolean(node.matrix);
+  let changed = node._worldParent !== parent || node._parentWorldVersion !== parentVersion ||
+    node._worldMatrixMode !== matrixMode;
+  if (node.matrix) {
+    const state = node._matrixState ||= new Float64Array(16);
+    for (let i = 0; i < 16; i++) {
+      if (state[i] !== node.matrix[i]) changed = true;
+      state[i] = node.matrix[i];
+    }
+  } else {
+    const state = node._transformState ||= new Float64Array(9);
+    for (let i = 0; i < 9; i++) {
+      const value = i < 3 ? node.position[i] : i < 6 ? node.rotation[i - 3] : node.scale[i - 6];
+      if (state[i] !== value) changed = true;
+      state[i] = value;
+    }
+  }
+  if (!changed) {
+    for (const child of node.children) updateWorldMatrix(child);
+    return;
+  }
+  let local;
+  if (node.matrix) local = node.matrix;
+  else {
+    const degrees = 180 / Math.PI;
+    const matrix = new DOMMatrix().translate(...node.position);
+    // Node rotations use YXZ, as did the previous renderer.
+    matrix.rotateAxisAngleSelf(0, 1, 0, node.rotation[1] * degrees);
+    matrix.rotateAxisAngleSelf(1, 0, 0, node.rotation[0] * degrees);
+    matrix.rotateAxisAngleSelf(0, 0, 1, node.rotation[2] * degrees);
+    local = matrix.scale(...node.scale).toFloat64Array();
+  }
+  const world = parent
+    ? new DOMMatrix(parent.worldMatrix).multiply(new DOMMatrix(local)).toFloat64Array()
+    : local;
+  for (let i = 0; i < 16; i++) node.worldMatrix[i] = world[i];
+  node._worldParent = parent;
+  node._parentWorldVersion = parentVersion;
+  node._worldMatrixMode = matrixMode;
+  node._worldMatrixVersion = (node._worldMatrixVersion || 0) + 1;
+  for (const child of node.children) updateWorldMatrix(child);
+}

package/src/utils/vehicleOffsets.js

@@ -0,0 +1,8 @@
+import { speed } from "./speed.js";
+
+/** Evenly spaced starting offsets (metres) for `flow` vehicles/h moving at `velocity` m/s on a `length` metres lane. */
+
+export function vehicleOffsets(length, flow, velocity = speed) {
+  const count = Math.round(length * flow / 3600 / velocity);
+  return Array.from({ length: count }, (_, i) => (i + 0.5) * length / count);
+}

package/src/utils/vehicles.js

@@ -1,69 +1,65 @@
-// Built-in vehicles for the 'traffic' type. Models are [ring of [x, z], bottom, top, rgb, topRing?] convex prisms in metres;
-// forward is -z, right is +x. `topRing` (same length as `ring`) tapers the prism; rgb components above 1 are self-lit lamps.
-const paints = [[0.86, 0.86, 0.88], [0.1, 0.1, 0.12], [0.5, 0.53, 0.57], [0.65, 0.1, 0.08], [0.12, 0.25, 0.55], [0.85, 0.7, 0.15]];
-export const box = (x0, x1, z0, z1) => [[x0, z0], [x1, z0], [x1, z1], [x0, z1]];
-const mirror = (x0, x1, z0, z1, ...rest) => [[box(x0, x1, z0, z1), ...rest], [box(-x1, -x0, z0, z1), ...rest]];
-const glass = [0.12, 0.15, 0.18], tyre = [0.05, 0.05, 0.05];
-const headlight = [1.9, 1.85, 1.7], taillight = [1.7, 0.06, 0.05];
-const car = i => {
-  const paint = paints[i % paints.length];
-  return [
-    ...mirror(0.7, 0.92, -1.68, -1.02, 0, 0.64, tyre),
-    ...mirror(0.7, 0.92, 1.02, 1.68, 0, 0.64, tyre),
-    [[[-0.9, -1.95], [-0.72, -2.25], [0.72, -2.25], [0.9, -1.95], [0.9, 2.05], [0.76, 2.25], [-0.76, 2.25], [-0.9, 2.05]],
-      0.28, 0.82, paint],
-    // Greenhouse: the windscreen leans back, the rear window less.
-    [box(-0.84, 0.84, -0.75, 1.6), 0.82, 1.38, glass, box(-0.7, 0.7, -0.05, 1.3)],
-    [box(-0.71, 0.71, -0.06, 1.31), 1.38, 1.46, paint],
-    ...mirror(0.38, 0.8, -2.3, -2.16, 0.56, 0.76, headlight),
-    [box(-0.78, 0.78, 2.16, 2.3), 0.6, 0.76, taillight],
-  ];
-};
-// Panoramic river cruiser, about 60 × 11 m: glass saloon, open upper deck with benches, wheelhouse forward.
-const white = [0.92, 0.93, 0.92], hull = [[-5.5, 30], [5.5, 30], [5.5, -20], [4, -26], [1.5, -30], [-1.5, -30], [-4, -26], [-5.5, -20]];
-const boat = () => [
-  [hull, 0, 0.8, [0.1, 0.16, 0.26]],
-  [hull, 0.8, 1.4, white],
-  [box(-5, 5, -18, 26), 1.4, 3.7, glass, box(-4.6, 4.6, -17.4, 25.6)],
-  ...mirror(4.64, 4.74, -17, 25, 3.25, 3.45, [1.6, 1.25, 0.8]),
-  [box(-4.8, 4.8, -17.8, 25.8), 3.7, 3.9, white],
-  ...Array.from({ length: 12 }, (_, i) => mirror(0.5, 3.8, -12 + i * 3, -11.3 + i * 3, 3.9, 4.4, [0.62, 0.1, 0.1])).flat(),
-  ...mirror(4.65, 4.8, -13.6, 25.8, 3.9, 4.8, white),
-  [box(-4.8, 4.8, 25.65, 25.8), 3.9, 4.8, white],
-  [box(-2.2, 2.2, -17.6, -14), 3.9, 4.7, white],
-  [box(-2.2, 2.2, -17.6, -14), 4.7, 5.5, glass],
-  [box(-2.5, 2.5, -18, -13.6), 5.5, 5.7, white],
-  [box(-2.45, -2.2, -16.2, -15.8), 5, 5.3, [2, 0.15, 0.1]],
-  [box(2.2, 2.45, -16.2, -15.8), 5, 5.3, [0.1, 2, 0.4]],
-  [box(-0.1, 0.1, -15.9, -15.7), 5.7, 6.6, white],
-  [box(-0.15, 0.15, -15.95, -15.65), 6.6, 6.8, [2, 2, 1.9]],
-];
-
-export const build = parts => {
-  const position = [], normal = [], color = [];
-  const triangle = (a, b, c, tint) => {
-    const u = b.map((v, i) => v - a[i]), v = c.map((w, i) => w - a[i]);
-    const n = [u[1] * v[2] - u[2] * v[1], u[2] * v[0] - u[0] * v[2], u[0] * v[1] - u[1] * v[0]], length = Math.hypot(...n);
-    for (const point of [a, b, c]) { position.push(...point); normal.push(...n.map(w => w / length)); color.push(...tint); }
-  };
-  for (const [ring, bottom, top, tint, topRing = ring] of parts) {
-    const low = ring.map(([x, z]) => [x, bottom, z]), high = topRing.map(([x, z]) => [x, top, z]);
-    for (let i = 0; i < ring.length; i++) {
-      const j = (i + 1) % ring.length;
-      triangle(low[i], low[j], high[j], tint); triangle(low[i], high[j], high[i], tint);
-    }
-    for (let i = 1; i < ring.length - 1; i++) {
-      triangle(high[0], high[i], high[i + 1], tint); triangle(low[0], low[i + 1], low[i], tint);
-    }
-  }
-  return { position, normal, color };
-};
-
-/**
- * `side`: default offset (metres) to the right of the lane centreline. `model(i)` gives the prisms of the i-th vehicle.
- * `lights`: night point lights in model space (see the night lighting grid), e.g. the pool cast by the headlights.
- */
-export const vehicles = {
-  car: { side: 1.8, model: car, lights: [{ position: [0, 1.2, -6], radius: 10, color: [1, 0.94, 0.82], flux: 800 }] },
-  boat: { side: 0, model: boat, lights: [{ position: [0, 8, 4], radius: 30, color: [1, 0.8, 0.55], flux: 20000 }] },
-};
+import { hull } from "./hull.js";
+import { box } from './box.js';
+import { glass, tyre } from './glass.js';
+import { mirror } from './mirror.js';
+import { white } from "./white.js";
+import { paints } from './paints.js';
+import { headlight } from './headlight.js';
+import { taillight } from './taillight.js';
+
+/**
+ * `side`: default offset (metres) to the right of the lane centreline. `model(i)` gives the prisms of the i-th vehicle.
+ * `lights`: night point lights in model space (see the night lighting grid), e.g. the pool cast by the headlights.
+ */
+export const vehicles = {
+  car: {
+    side: 1.8,
+    model: i => {
+      const paint = paints[i % paints.length];
+      return [
+        ...mirror(0.7, 0.92, -1.68, -1.02, 0, 0.64, tyre),
+        ...mirror(0.7, 0.92, 1.02, 1.68, 0, 0.64, tyre),
+        [[[-0.9, -1.95], [-0.72, -2.25], [0.72, -2.25], [0.9, -1.95], [0.9, 2.05], [0.76, 2.25], [-0.76, 2.25], [-0.9, 2.05]],
+          0.28, 0.82, paint],
+        // Greenhouse: the windscreen leans back, the rear window less.
+        [box(-0.84, 0.84, -0.75, 1.6), 0.82, 1.38, glass, box(-0.7, 0.7, -0.05, 1.3)],
+        [box(-0.71, 0.71, -0.06, 1.31), 1.38, 1.46, paint],
+        ...mirror(0.38, 0.8, -2.3, -2.16, 0.56, 0.76, headlight),
+        [box(-0.78, 0.78, 2.16, 2.3), 0.6, 0.76, taillight],
+      ];
+    },
+    lights: [{
+      position: [0, 1.2, -6],
+      radius: 10,
+      color: [1, 0.94, 0.82],
+      flux: 800
+    }]
+  },
+  // Panoramic river cruiser, about 60 × 11 m: glass saloon, open upper deck with benches, wheelhouse forward.
+  boat: {
+    side: 0,
+    model: () => [
+      [hull, 0, 0.8, [0.1, 0.16, 0.26]],
+      [hull, 0.8, 1.4, white],
+      [box(-5, 5, -18, 26), 1.4, 3.7, glass, box(-4.6, 4.6, -17.4, 25.6)],
+      ...mirror(4.64, 4.74, -17, 25, 3.25, 3.45, [1.6, 1.25, 0.8]),
+      [box(-4.8, 4.8, -17.8, 25.8), 3.7, 3.9, white],
+      ...Array.from({ length: 12 }, (_, i) => mirror(0.5, 3.8, -12 + i * 3, -11.3 + i * 3, 3.9, 4.4, [0.62, 0.1, 0.1])).flat(),
+      ...mirror(4.65, 4.8, -13.6, 25.8, 3.9, 4.8, white),
+      [box(-4.8, 4.8, 25.65, 25.8), 3.9, 4.8, white],
+      [box(-2.2, 2.2, -17.6, -14), 3.9, 4.7, white],
+      [box(-2.2, 2.2, -17.6, -14), 4.7, 5.5, glass],
+      [box(-2.5, 2.5, -18, -13.6), 5.5, 5.7, white],
+      [box(-2.45, -2.2, -16.2, -15.8), 5, 5.3, [2, 0.15, 0.1]],
+      [box(2.2, 2.45, -16.2, -15.8), 5, 5.3, [0.1, 2, 0.4]],
+      [box(-0.1, 0.1, -15.9, -15.7), 5.7, 6.6, white],
+      [box(-0.15, 0.15, -15.95, -15.65), 6.6, 6.8, [2, 2, 1.9]],
+    ],
+    lights: [{
+      position: [0, 8, 4],
+      radius: 30,
+      color: [1, 0.8, 0.55],
+      flux: 20000
+    }]
+  },
+};

package/src/utils/vertexNormals.js

@@ -0,0 +1,30 @@
+/** Area-weighted vertex normals, for indexed or non-indexed triangles. */
+
+export function vertexNormals(p, indices) {
+  // Accumulate area-weighted face normals for shared vertices, then normalize.
+  const normals = new Float32Array(p.length);
+  for (let i = 0; i < (indices?.length || p.length / 3); i += 3) {
+    const a = indices ? indices[i] : i,
+          b = indices ? indices[i + 1] : i + 1,
+          c = indices ? indices[i + 2] : i + 2;
+    const u = [0, 1, 2].map(j => p[b * 3 + j] - p[a * 3 + j]),
+          v = [0, 1, 2].map(j => p[c * 3 + j] - p[a * 3 + j]);
+    const n = [
+      u[1] * v[2] - u[2] * v[1],
+      u[2] * v[0] - u[0] * v[2],
+      u[0] * v[1] - u[1] * v[0]
+    ];
+    for (const index of [a, b, c]) {
+      for (let j = 0; j < 3; j++) {
+        normals[index * 3 + j] += n[j];
+      }
+    }
+  }
+  for (let i = 0; i < normals.length; i += 3) {
+    const length = Math.hypot(...normals.subarray(i, i + 3)) || 1;
+    for (let j = 0; j < 3; j++) {
+      normals[i + j] /= length;
+    }
+  }
+  return normals;
+}

package/src/utils/walk.js

@@ -1,72 +1,187 @@
-import { box } from './vehicles.js';
+import * as createMesh from './createMesh.js';
+import * as disposeMesh from './disposeMesh.js';
+import * as update from './update.js';
+import { build } from './build.js';
+import { getElevation } from './getElevation.js';
+import { hit } from './hit.js';
+import { limbs } from './limbs.js';
+import { moves } from './moves.js';
+import { parts } from './parts.js';
+import { wrap } from './wrap.js';
 
-// Pedestrian, about 1.77 m tall, prisms as in utils/vehicles.js (forward -z). Limbs hang from their pivot at y = 0.
-const skin = [0.85, 0.64, 0.5], shirt = [0.75, 0.2, 0.15], trousers = [0.16, 0.2, 0.32], dark = [0.08, 0.07, 0.06];
-export const parts = {
-  body: [
-    [box(-0.17, 0.17, -0.1, 0.1), 0.82, 0.95, trousers],
-    [box(-0.19, 0.19, -0.11, 0.11), 0.95, 1.44, shirt],
-    [box(-0.05, 0.05, -0.05, 0.05), 1.44, 1.5, skin],
-    [box(-0.1, 0.1, -0.11, 0.1), 1.5, 1.72, skin],
-    [box(-0.105, 0.105, -0.06, 0.115), 1.58, 1.77, dark],
-    [box(-0.105, 0.105, -0.115, -0.06), 1.7, 1.77, dark],
-  ],
-  leg: [[box(-0.07, 0.07, -0.07, 0.07), -0.82, 0, trousers], [box(-0.07, 0.07, -0.17, 0.07), -0.9, -0.82, dark]],
-  arm: [[box(-0.05, 0.05, -0.05, 0.05), -0.55, 0, shirt], [box(-0.045, 0.045, -0.045, 0.045), -0.66, -0.55, skin]],
-};
-// [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]];
-// Walls (non-horizontal triangles) of a mesh in world space, bucketed by 8 m cells; `origin` is the world translation
-// at build time, since layer roots only move vertically with the terrain afterwards.
-export const CELL = 8;
-const colliders = new WeakMap();
-export function collider(mesh) {
-  let c = colliders.get(mesh.geometry);
-  if (c) return c;
-  const m = mesh.worldMatrix, { position: { data: p }, index, normal, uv } = mesh.geometry.attributes;
-  const count = index ? index.count : p.length / 3, tri = [], nrm = [], cells = new Map(), v = [];
-  for (let i = 0; i < count; i += 3) {
-    const first = index ? index.data[i] : i;
-    // Streetlight halos (uv.x <= 2, see scene/picking.js) are light, not matter.
-    if (mesh.program.nightLight && uv && uv.data[first * 2] <= 2) continue;
-    for (let k = 0; k < 3; k++) {
-      const j = (index ? index.data[i + k] : i + k) * 3, x = p[j], y = p[j + 1], z = p[j + 2];
-      v[k * 3] = m[0] * x + m[4] * y + m[8] * z + m[12];
-      v[k * 3 + 1] = m[1] * x + m[5] * y + m[9] * z + m[13];
-      v[k * 3 + 2] = m[2] * x + m[6] * y + m[10] * z + m[14];
-    }
-    const ex = v[3] - v[0], ey = v[4] - v[1], ez = v[5] - v[2], fx = v[6] - v[0], fy = v[7] - v[1], fz = v[8] - v[2];
-    let nx = ey * fz - ez * fy, nz = ex * fy - ey * fx;
-    const ny = ez * fx - ex * fz, length = Math.hypot(nx, ny, nz);
-    if (!length || Math.abs(ny) > 0.9 * length) continue;
-    if (normal) {
-      // The stored normal tells the outside, whatever the winding.
-      const j = first * 3, a = normal.data;
-      if ((m[0] * a[j] + m[4] * a[j + 1] + m[8] * a[j + 2]) * nx + (m[2] * a[j] + m[6] * a[j + 1] + m[10] * a[j + 2]) * nz < 0) { nx = -nx; nz = -nz; }
+export function local() {
+  const { layer, state } = this;
+  const map = layer._map, crs = map.options.crs, origin = crs.project(layer.location);
+  const metres = Math.cos(layer.location.lat * Math.PI / 180);
+  const p = crs.project(state.latlng), terrain = map._terrain3D?._terrainReady && map._terrain3D;
+  const ground = (terrain && getElevation(terrain, state.latlng)) || 0;
+  return [(p.x - origin.x) * metres, ground - layer.root.position[1], -(p.y - origin.y) * metres];
+}
+
+export function place() {
+  const [x, y, z] = local.call(this);
+  // Model forward is -z; a yaw of -heading turns it to the compass heading (x east, -z north).
+  const yaw = -this.state.heading, cos = Math.cos(yaw), sin = Math.sin(yaw);
+  for (let i = 0; i < limbs.length; i++) {
+    const [, px, py, sign] = limbs[i];
+    const mesh = this.meshes[i];
+    mesh.position[0] = x + px * cos; mesh.position[1] = y + py; mesh.position[2] = z - px * sin;
+    mesh.rotation[0] = sign * this.swing * Math.sin(this.state.phase);
+    mesh.rotation[1] = yaw;
+  }
+  update.update(this.layer);
+}
+
+export function blocked(east, north, feet) {
+  const length = Math.hypot(east, north);
+  return length > 1e-6 && hit(this.layer, feet[0], feet[1], feet[2], east / length, -north / length, length + 0.3);
+}
+
+export function step(now) {
+  const layer = this.layer, map = layer._map;
+  this.frame = requestAnimationFrame(this.step);
+  const dt = Math.min(0.1, (now - (this.last ?? now)) / 1000);
+  this.last = now;
+  if (!layer.renderer) return;
+  let changed = false;
+  if (!this.meshes) {
+    this.meshes = [];
+    for (const [part] of limbs) this.meshes.push(createMesh.createMesh(layer, build(parts[part])));
+    changed = true;
+  }
+  let forward = 0, turn = 0;
+  for (const key of this.keys) { forward += moves[key]?.[0] || 0; turn += moves[key]?.[1] || 0; }
+  forward = Math.sign(forward); turn = Math.sign(turn);
+  if (turn) { this.state.heading = wrap(this.state.heading + turn * 2.5 * dt); changed = true; }
+  if (forward) {
+    const metres = forward * this.speed * dt, { lat, lng } = this.state.latlng, { position, scale } = layer.root;
+    let east = Math.sin(this.state.heading) * metres, north = Math.cos(this.state.heading) * metres;
+    const feet = local.call(this);
+    for (let i = 0; i < feet.length; i++) feet[i] = position[i] + scale[i] * feet[i];
+    // World x is east, z south; keep 0.3 m from walls and slide along the one in the way.
+    const wall = blocked.call(this, east, north, feet);
+    if (wall) {
+      const into = east * wall[0] - north * wall[1];
+      east -= into * wall[0]; north += into * wall[1];
+      if (blocked.call(this, east, north, feet)) east = north = 0;
     }
-    const h = Math.hypot(nx, nz), t = nrm.length / 2;
-    tri.push(...v); nrm.push(nx / h, nz / h);
-    for (let ix = Math.floor(Math.min(v[0], v[3], v[6]) / CELL); ix <= Math.floor(Math.max(v[0], v[3], v[6]) / CELL); ix++)
-      for (let iz = Math.floor(Math.min(v[2], v[5], v[8]) / CELL); iz <= Math.floor(Math.max(v[2], v[5], v[8]) / CELL); iz++) {
-        const key = ix + ',' + iz;
-        if (!cells.has(key)) cells.set(key, []);
-        cells.get(key).push(t);
-      }
+    this.state.latlng = new L.LatLng(lat + north / 111320, lng + east / (111320 * Math.cos(lat * Math.PI / 180)));
+    this.state.phase += Math.hypot(east, north) / 1.6 * Math.PI;
+    changed = true;
+  }
+  if (forward || turn) {
+    // The camera (looking along -bearing) swings back behind the walker.
+    const bearing = map.getBearing() * Math.PI / 180, behind = wrap(-this.state.heading - bearing);
+    if (Math.abs(behind) > 1e-3) map._setPitchAndBearing(map.getPitch(), (bearing + behind * Math.min(1, dt * 4)) * 180 / Math.PI);
+    map.setView(this.state.latlng, map.getZoom(), { animate: false });
   }
-  c = { tri: Float32Array.from(tri), nrm: Float32Array.from(nrm), cells, origin: [m[12], m[13], m[14]] };
-  colliders.set(mesh.geometry, c);
-  return c;
+  const target = forward ? 0.9 : 0;
+  if (Math.abs(this.swing - target) > 1e-3) { this.swing += (target - this.swing) * Math.min(1, dt * 10); changed = true; }
+  if (changed) place.call(this);
+}
+
+export function onKey(event) {
+  // Text fields and sliders keep their keys; buttons and checkboxes don't.
+  if (event.target.closest?.('input:not([type=checkbox], [type=radio]), select, textarea, [contenteditable]') ||
+    event.ctrlKey || event.altKey || event.metaKey) return;
+  if (event.type === 'keydown' && event.code === 'Escape') { this.stop(); return; }
+  if (!moves[event.code]) return;
+  event.preventDefault();
+  if (event.type === 'keydown') this.keys.add(event.code); else this.keys.delete(event.code);
+}
+
+export function onBlur() {
+  this.keys.clear();
+}
+
+export function onPointer(event) {
+  // Dragging only turns the camera around the walker: horizontal = bearing, vertical = pitch.
+  const map = this.layer._map;
+  if (event.type === 'pointerdown') {
+    if (event.button !== 0 || event.target.closest('.leaflet-control')) return;
+    this.drag = { x: event.clientX, y: event.clientY };
+    map.getContainer().setPointerCapture(event.pointerId);
+  } else if (this.drag && event.type === 'pointermove') {
+    map._setPitchAndBearing(Math.max(20, Math.min(85, map.getPitch() - (event.clientY - this.drag.y) * 0.2)),
+      map.getBearing() - (event.clientX - this.drag.x) * 0.25);
+    this.drag = { x: event.clientX, y: event.clientY };
+  } else this.drag = null;
+}
+
+export function onTerrain() {
+  if (this.meshes) place.call(this);
+}
+
+export function start() {
+  const map = this.layer._map;
+  if (this.saved || !map) return;
+  this.state.latlng = map.getCenter();
+  // Zoom whose camera distance (1.5 viewport heights, as in scene/render.js) is about `distance` metres behind the walker.
+  const pixelsPerMetre = map.getSize().y * 1.5 / this.distance;
+  const zoom = Math.min(map.getMaxZoom(), Math.log2(pixelsPerMetre * 40075016.68557849 * Math.cos(this.state.latlng.lat * Math.PI / 180) / 256));
+  const handlers = [];
+  for (const name of ['dragging', 'keyboard', 'doubleClickZoom', 'boxZoom']) {
+    if (map[name]?.enabled()) handlers.push(name);
+  }
+  this.saved = {
+    zoom: map.getZoom(), pitch: map.getPitch(), scrollWheelZoom: map.options.scrollWheelZoom, handlers
+  };
+  for (const name of this.saved.handlers) map[name].disable();
+  // Wheel zoom moves the camera closer or farther, keeping the walker centred.
+  map.options.scrollWheelZoom = this.saved.scrollWheelZoom && 'center';
+  this.state.heading = -map.getBearing() * Math.PI / 180;
+  map.setView(this.state.latlng, zoom, { animate: false });
+  map.setPitch(75);
+  L.DomEvent.on(document, 'keydown keyup', this.onKey);
+  L.DomEvent.on(window, 'blur', this.onBlur);
+  L.DomEvent.on(map.getContainer(), 'pointerdown pointermove pointerup pointercancel', this.onPointer);
+  map.on('terrainchange', this.onTerrain);
+  this.button.setAttribute('aria-pressed', 'true');
+  this.button.style.background = '#e4e4e4';
+  this.hint.style.display = '';
+  this.last = undefined;
+  this.frame = requestAnimationFrame(this.step);
+}
+
+export function stop() {
+  const map = this.layer._map;
+  cancelAnimationFrame(this.frame);
+  this.keys.clear(); this.drag = null;
+  L.DomEvent.off(document, 'keydown keyup', this.onKey);
+  L.DomEvent.off(window, 'blur', this.onBlur);
+  for (const mesh of this.meshes || []) disposeMesh.disposeMesh(this.layer, mesh);
+  this.meshes = null;
+  this.button.setAttribute('aria-pressed', 'false');
+  this.button.style.background = '#fff';
+  this.hint.style.display = 'none';
+  if (!map || !this.saved) return;
+  L.DomEvent.off(map.getContainer(), 'pointerdown pointermove pointerup pointercancel', this.onPointer);
+  map.off('terrainchange', this.onTerrain);
+  map.options.scrollWheelZoom = this.saved.scrollWheelZoom;
+  for (const name of this.saved.handlers) map[name].enable();
+  map.setView(this.state.latlng, this.saved.zoom, { animate: false });
+  map.setPitch(this.saved.pitch);
+  this.saved = null;
+}
+
+export function toggle() {
+  if (this.saved) stop.call(this); else start.call(this);
+}
+
+export function controlOnAdd() {
+  return this.container;
+}
+
+export function onReady() {
+  this.ready = true;
+  if (this.layer._map) this.control.addTo(this.layer._map);
+}
+
+export function onLayerAdd() {
+  if (this.ready) this.control.addTo(this.layer._map);
 }
 
-// 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;
+export function onLayerRemove() {
+  stop.call(this);
+  this.control.remove();
 }

package/src/utils/white.js

@@ -0,0 +1 @@
+export const white = [0.92, 0.93, 0.92];

package/src/utils/worldLights.js

@@ -0,0 +1,25 @@
+
+/** World-space [x, y, z, radius, r, g, b, intensity] for one mesh's point lights. */
+export function worldLights(lights, m) {
+  const values = new Float32Array(lights.length * 8);
+  lights.forEach(({
+    position: [x, y, z],
+    radius,
+    color,
+    flux
+  }, i) => {
+    const w = m[3] * x + m[7] * y + m[11] * z + m[15];
+    values.set(
+      [
+        (m[0] * x + m[4] * y + m[8] * z + m[12]) / w,
+        (m[1] * x + m[5] * y + m[9] * z + m[13]) / w,
+       (m[2] * x + m[6] * y + m[10] * z + m[14]) / w,
+       radius,
+       ...color,
+       flux / (4 * Math.PI) * 0.03
+      ],
+       i * 8
+    );
+  });
+  return values;
+}

package/src/utils/wrap.js

@@ -0,0 +1 @@
+export const wrap = angle => Math.atan2(Math.sin(angle), Math.cos(angle));