leaflet-city-mapper 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,65 @@
+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

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