leaflet-city-mapper 0.0.1 → 0.0.3

package/src/models/loadImage.js

@@ -0,0 +1,15 @@
+export async function loadImage(description, directory, image) {
+  let blob;
+  if (image.bufferView !== undefined) {
+    const view = description.bufferViews[image.bufferView];
+    const buffer = description.buffers[view.buffer].binary;
+    blob = new Blob([buffer.slice(view.byteOffset || 0, (view.byteOffset || 0) + view.byteLength)],
+      { type: image.mimeType });
+  } else {
+    const response = await fetch(new URL(image.uri, directory).href);
+    if (!response.ok) throw new Error(`Unable to load model texture: HTTP ${response.status}`);
+    blob = await response.blob();
+  }
+  // Preserve straight alpha and raw samples; GPU sRGB formats do color decoding.
+  return createImageBitmap(blob, { premultiplyAlpha: 'none', colorSpaceConversion: 'none' });
+}

package/src/models/loadModel.js

@@ -0,0 +1,69 @@
+import { decodeModel } from './decodeModel.js';
+import { setParent } from '../scene/setParent.js';
+import { emptyNode } from '../scene/emptyNode.js';
+import { conformModelToTerrain } from '../geometry/conformModelToTerrain.js';
+import { loadBuffer } from './loadBuffer.js';
+import { loadImage } from './loadImage.js';
+import { materialFor } from './materialFor.js';
+import { modelNode } from './modelNode.js';
+
+/** glTF/GLB model loading. */
+/** Load the configured GLB/glTF (static triangles) under `root`; GPU resources need attachment. */
+
+export async function loadModel(backend) {
+  await backend._added.promise;
+  const url = new URL(backend.modelUrl, document.baseURI).href;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Unable to load model: HTTP ${response.status}`);
+  }
+  const data = await response.arrayBuffer();
+  const description = decodeModel(data);
+  const directory = new URL('.', url).href;
+  const bufferRequests = [];
+  let buffer, image, material, index, resource, attribute, node;
+  for (buffer of description.buffers || []) bufferRequests.push(loadBuffer(buffer, directory));
+  await Promise.all(bufferRequests);
+  await backend._added.promise;
+  const imageRequests = [];
+  for (image of description.images || []) imageRequests.push(loadImage(description, directory, image));
+  const images = await Promise.all(imageRequests);
+  await backend._map?._terrain3D?._terrainPromise;
+  const context = { backend, description, images, textures: new Map(), materials: [], active: new Set(), resources: [] };
+  // Convert glTF materials directly to the shader's retained CPU styles.
+  for (material of description.materials || []) context.materials.push(materialFor(context, material));
+  const scene = description.scenes?.[description.scene || 0];
+  if (!scene) throw new Error('Missing glTF scene');
+  const nodes = [];
+  try {
+    for (index of scene.nodes) nodes.push(modelNode(context, index));
+  } catch (error) {
+    // Parsing can fail after earlier primitives allocated buffers/programs.
+    for (resource of context.resources) {
+      if (resource.attributes) {
+        for (attribute of Object.values(resource.attributes)) attribute.buffer.destroy();
+      } else {
+        resource.pipelineCache.clear();
+      }
+    }
+    throw error;
+  }
+  const model = {
+    ...emptyNode(),
+    id: url,
+    extras: description.extras || {},
+  };
+  if (!nodes.length) throw new Error('Expected a glTF model with a non-empty scene');
+  for (node of nodes) setParent(node, model);
+  backend.model = model;
+  if (backend.options.rotation) {
+    const [x, y = x, z = x] = backend.options.rotation;
+    backend.model.rotation[0] = x; backend.model.rotation[1] = y; backend.model.rotation[2] = z;
+  }
+  if (backend.options.scale) {
+    const [x, y = x, z = x] = backend.options.scale;
+    backend.model.scale[0] = x; backend.model.scale[1] = y; backend.model.scale[2] = z;
+  }
+  setParent(backend.model, backend.root);
+  conformModelToTerrain(backend, backend._map?._terrain3D);
+}

package/src/models/materialFor.js

@@ -0,0 +1,21 @@
+import { textureFor } from './textureFor.js';
+
+export function materialFor(context, material) {
+  const { backend } = context;
+  const pbr = material.pbrMetallicRoughness || {};
+  return {
+    color: (pbr.baseColorFactor || [1, 1, 1, 1]).slice(0, 3),
+    opacity: pbr.baseColorFactor?.[3] ?? 1,
+    metallic: pbr.metallicFactor ?? 1,
+    roughness: pbr.roughnessFactor ?? 1,
+    baseTexture: textureFor(context, pbr.baseColorTexture, true),
+    metalTexture: textureFor(context, pbr.metallicRoughnessTexture),
+    emissiveTexture: textureFor(context, material.emissiveTexture, true),
+    occlusionTexture: textureFor(context, material.occlusionTexture),
+    emissive: material.emissiveFactor || [0, 0, 0],
+    occlusionStrength: material.occlusionTexture?.strength ?? 1,
+    alphaMode: backend.options.alphaMode || material.alphaMode || 'OPAQUE',
+    alphaCutoff: material.alphaCutoff ?? 0.5,
+    doubleSided: material.doubleSided,
+  };
+}

package/src/models/modelNode.js

@@ -0,0 +1,93 @@
+import { cityMapper } from '../constants/cityMapper.js';
+import { emptyNode } from '../scene/emptyNode.js';
+import { nodeMatrix } from './nodeMatrix.js';
+import { readAccessor } from './readAccessor.js';
+import { setParent } from '../scene/setParent.js';
+import { vertexNormals } from '../geometry/vertexNormals.js';
+import { createProgram } from '../rendering/createProgram.js';
+
+export function modelNode(context, index) {
+  const { backend, description, materials, active, resources } = context;
+  // Track only the recursion path: shared mesh references are valid, cycles are not.
+  if (active.has(index)) throw new Error('Cyclic glTF nodes');
+  const spec = description.nodes[index];
+  if (!spec) throw new Error('Invalid glTF node');
+  active.add(index);
+  const group = {
+    ...emptyNode(),
+    name: spec.name
+  };
+  group.matrix = nodeMatrix(spec);
+  let primitive, attributes, semantic, name, vertexCount, attribute, index2, i, normals, style, program;
+  let device, geometry, mesh, child;
+  if (spec.mesh !== undefined) {
+    for (primitive of description.meshes[spec.mesh].primitives) {
+      attributes = {};
+      for ([semantic, name] of [['POSITION', 'position'], ['NORMAL', 'normal'], ['TEXCOORD_0', 'uv']]) {
+        if (primitive.attributes[semantic] !== undefined) attributes[name] = readAccessor(description, primitive.attributes[semantic]);
+      }
+      if (!attributes.position) throw new Error('glTF mesh has no positions');
+      vertexCount = attributes.position.data.length / 3;
+      if (attributes.position.size !== 3 || vertexCount < 3) throw new Error('Invalid glTF vertex attributes');
+      for (attribute of Object.values(attributes)) {
+        if (attribute.data.length / attribute.size !== vertexCount) throw new Error('Invalid glTF vertex attributes');
+      }
+      if (primitive.indices !== undefined) {
+        index2 = readAccessor(description, primitive.indices);
+        attributes.index = { size: 1, data: index2.indices };
+        if (!(index2.indices instanceof Uint8Array || index2.indices instanceof Uint16Array || index2.indices instanceof Uint32Array) ||
+          index2.size !== 1 || index2.indices.length % 3) throw new Error('Invalid glTF triangle indices');
+        for (i of index2.indices) {
+          if (i >= vertexCount) throw new Error('Invalid glTF triangle indices');
+        }
+      }
+      if (!attributes.index && vertexCount % 3) throw new Error('Incomplete glTF triangle');
+      if (!attributes.normal) {
+        normals = vertexNormals(attributes.position.data, attributes.index?.data);
+        attributes.normal = { size: 3, data: normals };
+      }
+      style = materials[primitive.material] || { color: [1, 1, 1], metallic: 1 };
+      if ((style.baseTexture || style.metalTexture || style.emissiveTexture || style.occlusionTexture) && !attributes.uv) {
+        throw new Error('Textured model mesh requires UV coordinates');
+      }
+      program = createProgram(backend, style);
+      resources.push(program);
+      device = backend.renderer.device;
+      if (attributes.index?.data instanceof Uint8Array) {
+        attributes.index.data = Uint16Array.from(attributes.index.data);
+      }
+      for ([name, attribute] of Object.entries(attributes)) {
+        attribute.size ||= 1;
+        attribute.count = attribute.data.length / attribute.size;
+        attribute.indexFormat = attribute.data instanceof Uint32Array ? 'uint32' : 'uint16';
+        attribute.buffer = device.createBuffer({
+          size: Math.max(4, attribute.data.byteLength),
+          usage: name === 'index'
+            ? GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
+            : GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        });
+        device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
+      }
+      geometry = {
+        device,
+        attributes,
+        drawRange: { start: 0, count: attributes.index?.count || attributes.position.count },
+      };
+      resources.push(geometry);
+      mesh = {
+        ...emptyNode(),
+        device,
+        geometry,
+        program,
+        fadeDuration: 250,
+        id: cityMapper.nextId++,
+        renderOrder: 0
+      };
+      mesh.name = description.meshes[spec.mesh].name; mesh.extras = spec.extras || {};
+      setParent(mesh, group);
+    }
+  }
+  for (child of spec.children || []) setParent(modelNode(context, child), group);
+  active.delete(index);
+  return group;
+}

package/src/models/nodeMatrix.js

@@ -0,0 +1,22 @@
+/** glTF quaternion/translation/scale to a column-major matrix. */
+
+export function nodeMatrix(spec) {
+  if (spec.matrix) return Array.from(spec.matrix);
+  // glTF stores quaternions [x,y,z,w]; convert directly to a scaled column-major matrix.
+  const [x, y, z, w] = spec.rotation || [0, 0, 0, 1], [sx, sy, sz] = spec.scale || [1, 1, 1];
+  return [
+    (1 - 2 * (y * y + z * z)) * sx,
+    2 * (x * y + z * w) * sx,
+    2 * (x * z - y * w) * sx,
+    0,
+    2 * (x * y - z * w) * sy,
+    (1 - 2 * (x * x + z * z)) * sy,
+    2 * (y * z + x * w) * sy, 0,
+    2 * (x * z + y * w) * sz,
+    2 * (y * z - x * w) * sz,
+    (1 - 2 * (x * x + y * y)) * sz,
+    0,
+    ...(spec.translation || [0, 0, 0]),
+    1,
+  ];
+}

package/src/models/readAccessor.js

@@ -0,0 +1,53 @@
+import { types } from "../constants/accessorTypes.js";
+import { sizes } from "../constants/accessorSizes.js";
+import { readAccessorValues } from './readAccessorValues.js';
+
+/** Decode packed, interleaved, normalized or sparse glTF accessor data. */
+
+export function readAccessor(description, index) {
+  const spec = description.accessors[index], Type = types[spec.componentType], size = sizes[spec.type];
+  if (!Type || !size || !Number.isInteger(spec.count) || spec.count < 0) {
+    throw new Error('Invalid glTF accessor');
+  }
+  const data = new Type(spec.count * size);
+  if (spec.bufferView !== undefined) {
+    readAccessorValues(
+      description, Type, size, data, spec.count, null,
+      spec.bufferView,
+      spec.byteOffset || 0,
+      spec.count,
+      description.bufferViews[spec.bufferView].byteStride
+    );
+  }
+  if (spec.sparse) {
+    const sparse = spec.sparse, Index = types[sparse.indices.componentType];
+    if (![Uint8Array, Uint16Array, Uint32Array].includes(Index)) {
+      throw new Error('Invalid sparse glTF indices');
+    }
+    const view = description.bufferViews[sparse.indices.bufferView];
+    const offset = (view.byteOffset || 0) + (sparse.indices.byteOffset || 0);
+    if (sparse.count > spec.count || (sparse.indices.byteOffset || 0) + sparse.count * Index.BYTES_PER_ELEMENT > view.byteLength) {
+      throw new Error('Invalid sparse glTF indices');
+    }
+    const indices = new Index(description.buffers[view.buffer].binary.slice(offset, offset + sparse.count * Index.BYTES_PER_ELEMENT));
+    readAccessorValues(
+      description, Type, size, data, spec.count, indices,
+      sparse.values.bufferView,
+      sparse.values.byteOffset || 0,
+      sparse.count,
+      0
+    );
+  }
+  if (spec.componentType === 5126) {
+    return { data, size };
+  }
+  const normalized = new Float32Array(data.length);
+  // Normalization is a glTF accessor rule, not sRGB conversion; indices stay integers.
+  let i;
+  for (i = 0; i < data.length; i++) {
+    normalized[i] = spec.normalized
+      ? Math.max(-1, data[i] / (Type === Int8Array ? 127 : Type === Int16Array ? 32767 : Type === Uint8Array ? 255 : Type === Uint32Array ? 4294967295 : 65535))
+      : data[i];
+  }
+  return { data: normalized, size, indices: data };
+}

package/src/models/readAccessorValues.js

@@ -0,0 +1,16 @@
+export function readAccessorValues(description, Type, size, data, accessorCount, indices, viewIndex, offset, count, stride) {
+  const view = description.bufferViews[viewIndex], bytes = Type.BYTES_PER_ELEMENT;
+  const buffer = description.buffers[view.buffer].binary;
+  stride ||= size * bytes;
+  if (!buffer || stride < size * bytes || offset < 0 ||
+    (view.byteOffset || 0) + view.byteLength > buffer.byteLength ||
+    (count - 1) * stride + size * bytes + offset > view.byteLength) throw new Error('glTF accessor outside buffer view');
+  let i, values, output;
+  for (i = 0; i < count; i++) {
+    values = new Type(buffer.slice((view.byteOffset || 0) + offset + i * stride,
+      (view.byteOffset || 0) + offset + i * stride + size * bytes));
+    output = indices ? indices[i] : i;
+    if (indices && output >= accessorCount) throw new Error('Invalid sparse glTF index');
+    data.set(values, output * size);
+  }
+}

package/src/models/textureFor.js

@@ -0,0 +1,35 @@
+import { textureSampler } from './textureSampler.js';
+
+export function textureFor(context, reference, color = false) {
+  const { backend, description, images, textures } = context;
+  if (!reference) return null;
+  if ((reference.texCoord || 0) !== 0 || reference.extensions) {
+    throw new Error('Model textures currently require untransformed TEXCOORD_0 UVs');
+  }
+  const device = backend.renderer.device;
+  // A glTF image may serve both color and data maps: those cannot share a GPU format.
+  const key = `${reference.index}:${color}`;
+  if (!textures.has(key)) {
+    const texture = description.textures[reference.index];
+    const sampler = description.samplers?.[texture.sampler] || {};
+    const image = images[texture.source];
+    const format = color ? 'rgba8unorm-srgb' : 'rgba8unorm';
+    const samplerOptions = textureSampler(sampler);
+    textures.set(key, {
+      device,
+      texture: device.createTexture({
+        size: [image.width, image.height],
+        format,
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+      }),
+      sampler: device.createSampler(samplerOptions),
+      samplerOptions,
+      format,
+      srgb: color,
+      image,
+      flipY: false,
+      uploaded: null,
+    });
+  }
+  return textures.get(key);
+}

package/src/models/textureSampler.js

@@ -0,0 +1,10 @@
+/** Translate glTF sampler constants into WebGPU sampler options. */
+
+export function textureSampler(sampler) {
+  return {
+    addressModeU: sampler.wrapS === 33071 ? 'clamp-to-edge' : sampler.wrapS === 33648 ? 'mirror-repeat' : 'repeat',
+    addressModeV: sampler.wrapT === 33071 ? 'clamp-to-edge' : sampler.wrapT === 33648 ? 'mirror-repeat' : 'repeat',
+    magFilter: sampler.magFilter === 9728 ? 'nearest' : 'linear',
+    minFilter: sampler.minFilter === 9728 || sampler.minFilter === 9984 || sampler.minFilter === 9986 ? 'nearest' : 'linear',
+  };
+}

package/src/picking/collectVisibleMesh.js

@@ -0,0 +1,4 @@
+export function collectVisibleMesh(mesh, meshes) {
+  if (!mesh.visible) return true;
+  if (mesh.geometry && mesh._appearance !== 0) meshes.push(mesh);
+}

package/src/picking/findFeature.js

@@ -0,0 +1,49 @@
+import { raycast } from './raycast.js';
+
+/**
+ * Translate a geometry hit into a configured model or batched source feature.
+ * Sorted half-open face ranges permit binary search without a feature per triangle.
+ * @returns {PickedFeature|null}
+ */
+
+export function findFeature(backend, event) {
+  if (!backend.root || !backend.camera) {
+    return null;
+  }
+  let hit, object, ranges, low, high, middle, range;
+  for (hit of raycast(backend, event, backend.root.children, Boolean(backend.model))) {
+    if (backend.model) {
+      object = hit.object;
+      while (object && object !== backend.model) {
+        object = object.parent;
+      }
+      if (object === backend.model) {
+        return {
+          id: backend.model.id, properties: backend.model.extras,
+          model: backend.model, mesh: hit.object, point: hit.point
+        };
+      }
+    }
+    ranges = hit.object.extras?.featureFaces;
+    if (!ranges) {
+      continue;
+    }
+    low = 0, high = ranges.length - 1;
+    while (low <= high) {
+      middle = (low + high) >> 1;
+      range = ranges[middle];
+      if (hit.faceIndex < range.faceStart) {
+        high = middle - 1;
+      } else if (hit.faceIndex >= range.faceEnd) {
+        low = middle + 1;
+      } else {
+        return {
+          ...range,
+          mesh: hit.object,
+          point: hit.point
+        };
+      }
+    }
+  }
+  return null;
+}

package/src/picking/hit.js

@@ -0,0 +1,23 @@
+import { CELL } from '../constants/CELL.js';
+import { collider } from '../collision/collider.js';
+import { computeBounds } from '../geometry/computeBounds.js';
+import { horizontalRay } from '../collision/horizontalRay.js';
+import { traverse } from '../scene/traverse.js';
+import { updateWorldMatrix } from '../scene/updateWorldMatrix.js';
+import { shouldSkipOther } from './shouldSkipOther.js';
+import { hitMesh } from './hitMesh.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) {
+  updateWorldMatrix(layer.scene);
+  const data = { x, y, z, dx, dz, reach, best: reach, found: null };
+  let other;
+  for (other of layer._shared._layers) {
+    if (shouldSkipOther(other, layer)) continue;
+    traverse(other.root, hitMesh, data);
+  }
+  return data.found;
+}

package/src/picking/hitMesh.js

@@ -0,0 +1,30 @@
+import { computeBounds } from '../geometry/computeBounds.js';
+import { collider } from '../collision/collider.js';
+import { CELL } from '../constants/CELL.js';
+import { horizontalRay } from '../collision/horizontalRay.js';
+
+export function hitMesh(mesh, data) {
+  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;
+  const { x, y, z, dx, dz, reach } = data;
+  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();
+  let ix, iz, t, height, d;
+  for (ix = Math.floor(Math.min(ox, ox + dx * reach) / CELL); ix <= Math.floor(Math.max(ox, ox + dx * reach) / CELL); ix++)
+    for (iz = Math.floor(Math.min(oz, oz + dz * reach) / CELL); iz <= Math.floor(Math.max(oz, oz + dz * reach) / CELL); iz++)
+      for (t of c.cells.get(ix + ',' + iz) || []) {
+        if (seen.has(t) || dx * c.nrm[t * 2] + dz * c.nrm[t * 2 + 1] >= 0) continue;
+        seen.add(t);
+        for (height of [0.4, 1.5]) {
+          d = horizontalRay(c.tri, t, ox, oy + height, oz, dx, dz);
+          if (d >= 0 && d < data.best) {
+            data.best = d;
+            data.found = [c.nrm[t * 2], c.nrm[t * 2 + 1]];
+          }
+        }
+      }
+}

package/src/picking/onClick.js

@@ -0,0 +1,13 @@
+import { findFeature } from './findFeature.js';
+import { setHighlight } from './setHighlight.js';
+import { showFeature } from './showFeature.js';
+
+/** Emit click without moving the map or pinning the tooltip. */
+
+export function onClick(layer, event) {
+  const feature = findFeature(layer, event);
+  layer.hoveredFeature = feature;
+  setHighlight(layer, feature);
+  showFeature(layer, feature, event);
+  layer.fire('featureclick', { feature, originalEvent: event });
+}

package/src/picking/onPointerLeave.js

@@ -0,0 +1,11 @@
+import { setHighlight } from './setHighlight.js';
+import { showFeature } from './showFeature.js';
+
+/** Clear hover, highlight and tooltip without retaining a selected feature. */
+
+export function onPointerLeave(layer) {
+  layer.hoveredFeature = null;
+  setHighlight(layer, null);
+  showFeature(layer, null);
+  layer.fire('featurehover', { feature: null });
+}

package/src/picking/onPointerMove.js

@@ -0,0 +1,15 @@
+import { findFeature } from './findFeature.js';
+import { setHighlight } from './setHighlight.js';
+import { showFeature } from './showFeature.js';
+
+/** Hover is transient; featurehover also reports misses with feature:null. */
+
+export function onPointerMove(layer, event) {
+  layer.hoveredFeature = findFeature(layer, event);
+  setHighlight(layer, layer.hoveredFeature);
+  showFeature(layer, layer.hoveredFeature, event);
+  layer.fire('featurehover', {
+    feature: layer.hoveredFeature,
+    originalEvent: event
+  });
+}

package/src/picking/pointerClick.js

@@ -0,0 +1,5 @@
+import * as onClick from './onClick.js';
+
+export function pointerClick(event) {
+  onClick.onClick(this, event);
+}

package/src/picking/pointerLeave.js

@@ -0,0 +1,5 @@
+import * as onPointerLeave from './onPointerLeave.js';
+
+export function pointerLeave() {
+  onPointerLeave.onPointerLeave(this);
+}

package/src/picking/pointerMove.js

@@ -0,0 +1,5 @@
+import * as onPointerMove from './onPointerMove.js';
+
+export function pointerMove(event) {
+  onPointerMove.onPointerMove(this, event);
+}

package/src/picking/raycast.js

@@ -0,0 +1,59 @@
+import { intersectMeshes } from '../collision/intersectMeshes.js';
+import { traverse } from '../scene/traverse.js';
+import { updateCamera } from '../scene/updateCamera.js';
+import { updateWorldMatrix } from '../scene/updateWorldMatrix.js';
+import { collectVisibleMesh } from './collectVisibleMesh.js';
+
+/** Raycasting, hover/click highlight and tooltips. */
+/**
+ * Finds the objects under a mouse or pointer event, nearest first.
+ *
+ * @param {MouseEvent} event
+ * @param {Object[]} [objects] Defaults to this layer's root children, not all map layers.
+ * @param {boolean} [recursive] Also test the descendants of `objects`.
+ * @returns {Object[]} Nearest hit per mesh: object, shared-world point/distance and triangle faceIndex.
+ */
+
+export function raycast(backend, event, objects = backend.root.children, recursive = true) {
+  if (!backend.renderer) {
+    return [];
+  }
+  backend._beforeRaycast?.();
+  const rect = backend._map.getContainer().getBoundingClientRect();
+  updateWorldMatrix(backend.scene);
+  updateCamera(backend.camera);
+  // Unproject the mouse (-1..1) into a world-space ray from the camera.
+  const inverseCamera = new DOMMatrix(backend.camera.projectionViewMatrix).inverse();
+  const inverseCameraValues = inverseCamera.toFloat64Array();
+  let value, object;
+  for (value of inverseCameraValues) {
+    if (!Number.isFinite(value)) throw new Error('Singular 3D transform');
+  }
+  backend.raycaster.origin[0] = backend.camera.position[0];
+  backend.raycaster.origin[1] = backend.camera.position[1];
+  backend.raycaster.origin[2] = backend.camera.position[2];
+  const unprojected = new DOMPoint(
+    ((event.clientX - rect.left) / rect.width) * 2 - 1,
+    -((event.clientY - rect.top) / rect.height) * 2 + 1,
+    0,
+    1
+  ).matrixTransform(inverseCamera);
+  const end = [
+    unprojected.x / unprojected.w,
+    unprojected.y / unprojected.w,
+    unprojected.z / unprojected.w
+  ];
+  backend.raycaster.direction[0] = end[0] - backend.raycaster.origin[0];
+  backend.raycaster.direction[1] = end[1] - backend.raycaster.origin[1];
+  backend.raycaster.direction[2] = end[2] - backend.raycaster.origin[2];
+  const rayLength = Math.hypot(...backend.raycaster.direction) || 1;
+  backend.raycaster.direction[0] /= rayLength;
+  backend.raycaster.direction[1] /= rayLength;
+  backend.raycaster.direction[2] /= rayLength;
+  const meshes = [];
+  for (object of objects) {
+    if (recursive) traverse(object, collectVisibleMesh, meshes);
+    else if (object.geometry && object.visible && object._appearance !== 0) meshes.push(object);
+  }
+  return intersectMeshes(backend.raycaster, meshes, backend.renderer.uniformData?.[55]);
+}

package/src/picking/setHighlight.js

@@ -0,0 +1,13 @@
+import { update } from '../scene/update.js';
+
+/** Highlight a source vertex range in the shader; vertex colors stay untouched. */
+
+export function setHighlight(backend, feature) {
+  if (feature?.model) feature = null;
+  if (backend.highlightedFeature?.mesh === feature?.mesh &&
+    backend.highlightedFeature?.vertexStart === feature?.vertexStart) return;
+  if (backend.highlightedFeature) backend.highlightedFeature.mesh.highlight = null;
+  backend.highlightedFeature = feature;
+  if (feature) feature.mesh.highlight = [feature.vertexStart, feature.vertexEnd];
+  update(backend);
+}

package/src/picking/shouldSkipOther.js

@@ -0,0 +1,3 @@
+export function shouldSkipOther(other, layer) {
+  return other === layer || other._type === 'terrain' || other._type === 'traffic';
+}

package/src/picking/showFeature.js

@@ -0,0 +1,34 @@
+/** Update tooltip content/position and arbitrate cursor ownership across shared layers. */
+
+export function showFeature(backend, feature, event) {
+  const tooltip = backend._tooltip;
+  if (!tooltip) return;
+  if (feature) {
+    tooltip.replaceChildren(backend.options.tooltip(feature));
+    tooltip.hidden = false;
+    const rect = backend.container.getBoundingClientRect();
+    const x = event.clientX - rect.left, y = event.clientY - rect.top;
+    tooltip.style.left = `${x + tooltip.offsetWidth + 16 > rect.width ? x - tooltip.offsetWidth - 12 : x + 12}px`;
+    tooltip.style.top = `${y + tooltip.offsetHeight + 16 > rect.height ? y - tooltip.offsetHeight - 12 : y + 12}px`;
+  } else {
+    tooltip.hidden = true;
+  }
+  const shared = backend._shared;
+  let layer;
+  if (shared) {
+    let visible = false;
+    for (layer of shared._layers) {
+      if (layer._tooltip && !layer._tooltip.hidden) {
+        visible = true;
+        break;
+      }
+    }
+    if (visible) {
+      if (shared._cursor === undefined) shared._cursor = backend.container.style.cursor;
+      backend.container.style.cursor = 'pointer';
+    } else if (shared._cursor !== undefined) {
+      backend.container.style.cursor = shared._cursor;
+      delete shared._cursor;
+    }
+  }
+}