leaflet-city-mapper 0.0.2 → 0.0.4

package/src/models/createModelGeometry.js

@@ -0,0 +1,40 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { vertexNormals } from '../geometry/vertexNormals.js';
+import { createProgram } from '../rendering/createProgram.js';
+
+export function createModelGeometry(context, primitive, attributes) {
+  let normals;
+  if (!attributes.normal) {
+    normals = vertexNormals(attributes.position.data, attributes.index?.data);
+    attributes.normal = /* alloc */ { size: 3, data: normals };
+  }
+  const style = context.materials[primitive.material] || /* alloc */ {
+    color: /* alloc */ [1, 1, 1], metallic: 1,
+  };
+  if ((style.baseTexture || style.metalTexture || style.emissiveTexture || style.occlusionTexture) && !attributes.uv) {
+    throw /* alloc */ new Error('Textured model mesh requires UV coordinates');
+  }
+  const program = createProgram(context.backend, style);
+  context.resources.push(program);
+  const device = sceneByLayer.get(context.backend).renderer.device;
+  if (attributes.index?.data instanceof Uint8Array) attributes.index.data = Uint16Array.from(attributes.index.data);
+  let name, attribute;
+  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(/* alloc */ {
+      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);
+  }
+  const geometry = /* alloc */ {
+    device, attributes,
+    drawRange: /* alloc */ { start: 0, count: attributes.index?.count || attributes.position.count },
+  };
+  context.resources.push(geometry);
+  return /* alloc */ { device, geometry, program };
+}

package/src/models/decodeModel.js

@@ -0,0 +1,48 @@
+import { geometryDecoder } from '../globals/geometryDecoder.js';
+/** Decode a static glTF JSON document or GLB v2 container. */
+import { hasUnsupportedPrimitives } from './hasUnsupportedPrimitives.js';
+
+
+export function decodeModel(data) {
+  const view = /* alloc */ new DataView(data);
+  const decoder = geometryDecoder;
+  let description;
+  let offset, length, type, chunk;
+  if (view.getUint32(0, true) === 0x46546c67) {
+    // Decode GLB v2 chunks; unknown types are skipped.
+    if (view.getUint32(4, true) !== 2 || view.getUint32(8, true) !== data.byteLength) {
+      throw /* alloc */ new Error('Invalid GLB header');
+    }
+    let binary;
+    for (offset = 12; offset < data.byteLength;) {
+      if (offset + 8 > data.byteLength) {
+        throw /* alloc */ new Error('Truncated GLB chunk');
+      }
+      length = view.getUint32(offset, true), type = view.getUint32(offset + 4, true);
+      offset += 8;
+      if (offset + length > data.byteLength) {
+        throw /* alloc */ new Error('Truncated GLB data');
+      }
+      chunk = data.slice(offset, offset + length);
+      if (type === 0x4e4f534a) {
+        description = JSON.parse(decoder.decode(chunk));
+      }
+      if (type === 0x004e4942) {
+        binary = chunk;
+      }
+      offset += length;
+    }
+    if (!description) {
+      throw /* alloc */ new Error('Missing GLB JSON');
+    }
+    if (binary) {
+      description.buffers[0].binary = binary;
+    }
+  } else {
+    description = JSON.parse(decoder.decode(data));
+  }
+  if (description.skins?.length || description.animations?.length || description.extensionsRequired?.length || hasUnsupportedPrimitives(description.meshes)) {
+    throw /* alloc */ new Error('Layer3D supports static triangle glTF models without required extensions');
+  }
+  return description;
+}

package/src/models/hasUnsupportedPrimitives.js

@@ -0,0 +1,10 @@
+export function hasUnsupportedPrimitives(meshes) {
+  if (!meshes) return false;
+  let mesh, primitive;
+  for (mesh of meshes) {
+    for (primitive of mesh.primitives) {
+      if (primitive.targets || (primitive.mode !== undefined && primitive.mode !== 4)) return true;
+    }
+  }
+  return false;
+}

package/src/models/loadBuffer.js

@@ -0,0 +1,6 @@
+export async function loadBuffer(buffer, directory) {
+  if (buffer.binary) return;
+  const response = await fetch(/* alloc */ new URL(buffer.uri, directory).href);
+  if (!response.ok) throw /* alloc */ new Error(`Unable to load model buffer: HTTP ${response.status}`);
+  buffer.binary = await response.arrayBuffer();
+}

package/src/models/loadImage.js

@@ -0,0 +1,19 @@
+import { geometryImageOptions } from '../globals/geometryImageOptions.js';
+
+
+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 = /* alloc */ new Blob(
+      /* alloc */ [buffer.slice(view.byteOffset || 0, (view.byteOffset || 0) + view.byteLength)],
+      /* alloc */ { type: image.mimeType });
+  } else {
+    const response = await fetch(/* alloc */ new URL(image.uri, directory).href);
+    if (!response.ok) throw /* alloc */ 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, geometryImageOptions);
+}

package/src/models/loadModel.js

@@ -0,0 +1,44 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { cameraByMap } from '../globals/cameraByMap.js';
+
+import { decodeModel } from './decodeModel.js';
+import { setParent } from '../scene/setParent.js';
+import { emptyNode } from '../scene/emptyNode.js';
+import { conformModelToTerrain } from '../geometry/conformModelToTerrain.js';
+import { loadModelResources } from './loadModelResources.js';
+import { createModelContext } from './createModelContext.js';
+import { buildModelNodes } from './buildModelNodes.js';
+import { applyModelTransform } from './applyModelTransform.js';
+
+
+/** glTF/GLB model loading. */
+/** Load the configured GLB/glTF (static triangles) under `root`; GPU resources need attachment. */
+
+export async function loadModel(backend) {
+  await sceneByLayer.get(backend)._added.promise;
+  const url = /* alloc */ new URL(sceneByLayer.get(backend).modelUrl, document.baseURI).href;
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw /* alloc */ new Error(`Unable to load model: HTTP ${response.status}`);
+  }
+  const data = await response.arrayBuffer();
+  const description = decodeModel(data);
+  const directory = /* alloc */ new URL('.', url).href;
+  const images = await loadModelResources(backend, description, directory);
+  const context = createModelContext(backend, description, images);
+  const scene = description.scenes?.[description.scene || 0];
+  if (!scene) throw /* alloc */ new Error('Missing glTF scene');
+  const nodes = buildModelNodes(context, scene);
+  const model = /* alloc */ {
+    ...emptyNode(),
+    id: url,
+    extras: description.extras || /* alloc */ {},
+  };
+  if (!nodes.length) throw /* alloc */ new Error('Expected a glTF model with a non-empty scene');
+  let node;
+  for (node of nodes) setParent(node, model);
+  sceneByLayer.get(backend).model = model;
+  applyModelTransform(backend);
+  setParent(sceneByLayer.get(backend).model, sceneByLayer.get(backend).root);
+  conformModelToTerrain(backend, cameraByMap.get(backend._map)?._terrain3D);
+}

package/src/models/loadModelResources.js

@@ -0,0 +1,19 @@
+import { geometryEmpty } from '../globals/geometryEmpty.js';
+import { cameraByMap } from '../globals/cameraByMap.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { loadBuffer } from './loadBuffer.js';
+import { loadImage } from './loadImage.js';
+
+export async function loadModelResources(backend, description, directory) {
+  const bufferRequests = /* alloc */ [];
+  let buffer;
+  for (buffer of description.buffers || geometryEmpty) bufferRequests.push(loadBuffer(buffer, directory));
+  await Promise.all(bufferRequests);
+  await sceneByLayer.get(backend)._added.promise;
+  const imageRequests = /* alloc */ [];
+  let image;
+  for (image of description.images || geometryEmpty) imageRequests.push(loadImage(description, directory, image));
+  const images = await Promise.all(imageRequests);
+  await sceneByLayer.get(cameraByMap.get(backend._map)?._terrain3D)?._terrainPromise;
+  return images;
+}

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 /* alloc */ {
+    color: pbr?.baseColorFactor ? pbr.baseColorFactor.slice(0, 3) : /* alloc */ [1, 1, 1],
+    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 || /* alloc */ [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,49 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { nextId } from '../globals/nextId.js';
+import { geometryEmpty } from '../globals/geometryEmpty.js';
+
+import { emptyNode } from '../scene/emptyNode.js';
+import { nodeMatrix } from './nodeMatrix.js';
+import { setParent } from '../scene/setParent.js';
+import { readModelAttributes } from './readModelAttributes.js';
+import { readModelIndices } from './readModelIndices.js';
+import { createModelGeometry } from './createModelGeometry.js';
+
+export function modelNode(context, index) {
+  const { backend, description, active } = context;
+  // Track only the recursion path: shared mesh references are valid, cycles are not.
+  if (active.has(index)) throw /* alloc */ new Error('Cyclic glTF nodes');
+  const spec = description.nodes[index];
+  if (!spec) throw /* alloc */ new Error('Invalid glTF node');
+  active.add(index);
+  const group = /* alloc */ {
+    ...emptyNode(),
+    name: spec.name
+  };
+  group.matrix = nodeMatrix(spec);
+  let primitive, attributeData, attributes, vertexCount, built, mesh, child;
+  if (spec.mesh !== undefined) {
+    for (primitive of description.meshes[spec.mesh].primitives) {
+      attributeData = readModelAttributes(description, primitive);
+      attributes = attributeData.attributes;
+      vertexCount = attributeData.vertexCount;
+      readModelIndices(description, primitive, attributes, vertexCount);
+      built = createModelGeometry(context, primitive, attributes);
+      mesh = /* alloc */ {
+        ...emptyNode(),
+        device: built.device,
+        geometry: built.geometry,
+        program: built.program,
+        fadeDuration: 250,
+        id: nextId.value++,
+        renderOrder: 0
+      };
+      mesh.name = description.meshes[spec.mesh].name;
+      mesh.extras = spec.extras || /* alloc */ {};
+      setParent(mesh, group);
+    }
+  }
+  for (child of spec.children || geometryEmpty) setParent(modelNode(context, child), group);
+  active.delete(index);
+  return group;
+}

package/src/models/nodeMatrix.js

@@ -0,0 +1,27 @@
+import { geometryQuaternion } from '../globals/geometryQuaternion.js';
+import { geometryScale } from '../globals/geometryScale.js';
+import { geometryTranslation } from '../globals/geometryTranslation.js';
+/** 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 || geometryQuaternion;
+  const [sx, sy, sz] = spec.scale || geometryScale;
+  return /* alloc */ [
+    (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 || geometryTranslation),
+    1,
+  ];
+}

package/src/models/normalizeAccessor.js

@@ -0,0 +1,11 @@
+export function normalizeAccessor(spec, Type, data, size) {
+  const normalized = /* alloc */ new Float32Array(data.length);
+  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 /* alloc */ { data: normalized, size, indices: data };
+}

package/src/models/readAccessor.js

@@ -0,0 +1,33 @@
+import { types } from '../globals/types.js';
+import { sizes } from '../globals/sizes.js';
+
+
+import { readAccessorValues } from './readAccessorValues.js';
+import { readSparseAccessor } from './readSparseAccessor.js';
+import { normalizeAccessor } from './normalizeAccessor.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 /* alloc */ new Error('Invalid glTF accessor');
+  }
+  const data = /* alloc */ 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) {
+    readSparseAccessor(description, spec, Type, size, data);
+  }
+  if (spec.componentType === 5126) {
+    return /* alloc */ { data, size };
+  }
+  return normalizeAccessor(spec, Type, data, size);
+}

package/src/models/readAccessorValue.js

@@ -0,0 +1,7 @@
+export function readAccessorValue(input, Type, at) {
+  return Type === Int8Array ? input.getInt8(at) :
+    Type === Uint8Array ? input.getUint8(at) :
+      Type === Int16Array ? input.getInt16(at, true) :
+        Type === Uint16Array ? input.getUint16(at, true) :
+          Type === Uint32Array ? input.getUint32(at, true) : input.getFloat32(at, true);
+}

package/src/models/readAccessorValues.js

@@ -0,0 +1,20 @@
+import { readAccessorValue } from './readAccessorValue.js';
+
+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 /* alloc */ new Error('glTF accessor outside buffer view');
+  const input = /* alloc */ new DataView(buffer);
+  let i, j, at, output;
+  for (i = 0; i < count; i++) {
+    output = indices ? indices[i] : i;
+    if (indices && output >= accessorCount) throw /* alloc */ new Error('Invalid sparse glTF index');
+    for (j = 0; j < size; j++) {
+      at = (view.byteOffset || 0) + offset + i * stride + j * bytes;
+      data[output * size + j] = readAccessorValue(input, Type, at);
+    }
+  }
+}

package/src/models/readModelAttributes.js

@@ -0,0 +1,20 @@
+import { geometrySemantics } from '../globals/geometrySemantics.js';
+import { readAccessor } from './readAccessor.js';
+
+export function readModelAttributes(description, primitive) {
+  const attributes = /* alloc */ {};
+  let semantic, name;
+  for ([semantic, name] of geometrySemantics) {
+    if (primitive.attributes[semantic] !== undefined) {
+      attributes[name] = readAccessor(description, primitive.attributes[semantic]);
+    }
+  }
+  if (!attributes.position) throw /* alloc */ new Error('glTF mesh has no positions');
+  const vertexCount = attributes.position.data.length / 3;
+  if (attributes.position.size !== 3 || vertexCount < 3) throw /* alloc */ new Error('Invalid glTF vertex attributes');
+  let attribute;
+  for (attribute of Object.values(attributes)) {
+    if (attribute.data.length / attribute.size !== vertexCount) throw /* alloc */ new Error('Invalid glTF vertex attributes');
+  }
+  return /* alloc */ { attributes, vertexCount };
+}

package/src/models/readModelIndices.js

@@ -0,0 +1,16 @@
+import { readAccessor } from './readAccessor.js';
+
+export function readModelIndices(description, primitive, attributes, vertexCount) {
+  if (primitive.indices !== undefined) {
+    const index = readAccessor(description, primitive.indices);
+    attributes.index = /* alloc */ { size: 1, data: index.indices };
+    if (!(index.indices instanceof Uint8Array || index.indices instanceof Uint16Array ||
+      index.indices instanceof Uint32Array) || index.size !== 1 || index.indices.length % 3) {
+      throw /* alloc */ new Error('Invalid glTF triangle indices');
+    }
+    let value;
+    for (value of index.indices) if (value >= vertexCount) throw /* alloc */ new Error('Invalid glTF triangle indices');
+  } else if (vertexCount % 3) {
+    throw /* alloc */ new Error('Incomplete glTF triangle');
+  }
+}

package/src/models/readSparseAccessor.js

@@ -0,0 +1,19 @@
+import { types } from '../globals/types.js';
+import { readAccessorValues } from './readAccessorValues.js';
+
+export function readSparseAccessor(description, spec, Type, size, data) {
+  const sparse = spec.sparse, Index = types[sparse.indices.componentType];
+  if (Index !== Uint8Array && Index !== Uint16Array && Index !== Uint32Array) {
+    throw /* alloc */ 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 /* alloc */ new Error('Invalid sparse glTF indices');
+  }
+  const indices = /* alloc */ 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);
+}

package/src/models/releaseModelResources.js

@@ -0,0 +1,10 @@
+export function releaseModelResources(context) {
+  let resource, attribute;
+  for (resource of context.resources) {
+    if (resource.attributes) {
+      for (attribute of Object.values(resource.attributes)) attribute.buffer.destroy();
+    } else {
+      resource.pipelineCache.clear();
+    }
+  }
+}

package/src/models/textureFor.js

@@ -0,0 +1,38 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+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 /* alloc */ new Error('Model textures currently require untransformed TEXCOORD_0 UVs');
+  }
+  const device = sceneByLayer.get(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, /* alloc */ {
+      device,
+      texture: device.createTexture(/* alloc */ {
+        size: /* alloc */ [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 /* alloc */ {
+    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,52 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+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 (!sceneByLayer.get(backend).root || !sceneByLayer.get(backend).camera) {
+    return null;
+  }
+  let hit, object, ranges, low, high, middle, range;
+  for (hit of raycast(backend, event, sceneByLayer.get(backend).root.children, Boolean(sceneByLayer.get(backend).model))) {
+    if (sceneByLayer.get(backend).model) {
+      object = hit.object;
+      while (object && object !== sceneByLayer.get(backend).model) {
+        object = object.parent;
+      }
+      if (object === sceneByLayer.get(backend).model) {
+        return /* alloc */ {
+          id: sceneByLayer.get(backend).model.id, properties: sceneByLayer.get(backend).model.extras,
+          model: sceneByLayer.get(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 /* alloc */ {
+          ...range,
+          mesh: hit.object,
+          point: hit.point
+        };
+      }
+    }
+  }
+  return null;
+}

package/src/picking/hit.js

@@ -0,0 +1,24 @@
+import { sceneByLayer } from '../globals/sceneByLayer.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, data) {
+  updateWorldMatrix(sceneByLayer.get(layer).scene);
+  data.x = x, data.y = y, data.z = z, data.dx = dx, data.dz = dz, data.reach = reach;
+  data.best = reach, data.found = false;
+  let other;
+  for (other of sceneByLayer.get(sceneByLayer.get(layer)._shared)._layers) {
+    if (shouldSkipOther(other, layer)) continue;
+    traverse(sceneByLayer.get(other).root, hitMesh, data);
+  }
+  return data.found ? data.normal : null;
+}

package/src/picking/hitColliderCell.js

@@ -0,0 +1,19 @@
+import { horizontalRay } from '../collision/horizontalRay.js';
+
+export function hitColliderCell(cell, c, data, ox, oy, oz) {
+  const { dx, dz, seen } = data;
+  let t, height, d;
+  for (t of cell) {
+    if (seen.has(t) || dx * c.nrm[t * 2] + dz * c.nrm[t * 2 + 1] >= 0) continue;
+    seen.add(t);
+    for (height = 0.4; height < 2; height += 1.1) {
+      d = horizontalRay(c.tri, t, ox, oy + height, oz, dx, dz);
+      if (d >= 0 && d < data.best) {
+        data.best = d;
+        data.found = true;
+        data.normal[0] = c.nrm[t * 2];
+        data.normal[1] = c.nrm[t * 2 + 1];
+      }
+    }
+  }
+}

package/src/picking/hitMesh.js

@@ -0,0 +1,26 @@
+import { CELL } from '../globals/CELL.js';
+
+import { computeBounds } from '../geometry/computeBounds.js';
+import { collider } from '../collision/collider.js';
+
+import { hitColliderCell } from './hitColliderCell.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 = data.seen;
+  seen.clear();
+  let ix, iz, cell;
+  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++) {
+      cell = c.cells.get(ix + ',' + iz);
+      if (!cell) continue;
+      hitColliderCell(cell, c, data, ox, oy, oz);
+    }
+}

package/src/picking/onClick.js

@@ -0,0 +1,16 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
+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);
+  sceneByLayer.get(layer).hoveredFeature = feature;
+  setHighlight(layer, feature);
+  showFeature(layer, feature, event);
+  layer.fire('featureclick', /* alloc */ { feature, originalEvent: event });
+}