fix(street-level): budgeted mesh sampling, in-place cones, date line, horizon

From the IC8 review of #768, each with tests that fail before: - P1: a mesh batch no longer rebuilds the selected sequence's cones. The drawn cones are indexed by mesh cell; a batch that touches none of them is ignored and the affected cones are moved in place (no removeAll/add). - P2: mesh sampling keeps to its 6 ms slices. Requests are taken in inside the budget, only cells within range of the camera are queued, the queue is a persistent min-heap re-ranked in one pass only after a 100 m camera move, and the deadline starts before any work. Coverage keeps a bounding box per line and densifies a line only once it comes within range. On a synthetic dense tile (600 x 40 points): slice median ~10 ms -> 5 ms, max 18-30 ms -> 6.7 ms, refresh cost 11-24 ms -> 1.5-3 ms. - P2: image cones and the photo marker are horizon-culled like the overview dots (one createHorizonCull in view.js, shared by all three). - P2: a selection change recolours the previous zoom's lines still on screen and the old lines a cast swap keeps showing. - P2: distances (metresBetween), line densification and ground-corner requests go the short way round +-180 deg (wrapLon in tileMath.js), so nearest ordering, cone thinning, mesh range and cast lines are right across the date line. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-11-06 03:14:00 +00:00 · 2026-10-06 15:16:57 +01:00
1 parent 09fc10756c
commit bd97d38a99
@@ -2,6 +2,7 @@ import * as Cesium from 'cesium';
 import { decodeCoverageTile } from './decode.js';
 import { passesImageryFilter } from '../../filter.js';
 import {
+  createHorizonCull,
  groundUnderCamera,
  metresBetween,
  viewFocus,
@@ -9,7 +10,7 @@ import {
  whenIdle,
 } from '../../view.js';
 import { densifyLine, MESH_DENSIFY_DEG } from '../../groundCast.js';
-import { MESH_CELL_DEG } from '../../meshSampler.js';
+import { MESH_SAMPLE_RADIUS_M } from '../../meshSampler.js';
 import {
  coverageZoomForHeight,
  overviewZoomForHeight,
@@ -256,27 +257,67 @@ export function createCoverage({ state, source }) {
    removeWhenReady(entry, previous);
  }

-  /** The mesh cells under a tile's drawn lines, built once per filter. */
-  function meshCells(entry) {
-    if (entry.meshCells) return entry.meshCells;
-    const cells = new Map();
-    for (const sequence of entry.sequences.values())
-      for (const [lon, lat] of sequence.parts.flatMap((part) =>
-        densifyLine(part, MESH_DENSIFY_DEG),
-      ))
-        cells.set(
-          `${Math.round(lon / MESH_CELL_DEG)},${Math.round(lat / MESH_CELL_DEG)}`,
-          [lon, lat],
-        );
-    entry.meshCells = [...cells.values()];
-    return entry.meshCells;
+  /** The point under the camera: where the mesh sampler measures its range from. */
+  function meshCentre() {
+    const carto = state.viewer?.camera?.positionCartographic;
+    if (!carto) return null;
+    return {
+      lon: Cesium.Math.toDegrees(carto.longitude),
+      lat: Cesium.Math.toDegrees(carto.latitude),
+    };
  }

-  /** Ask for mesh samples under a cast tile's lines (the sampler keeps the near ones). */
+  /** Whether any of a {west, south, east, north} box is within the sampler's range. */
+  function inMeshRange(box, centre) {
+    const nearest = {
+      lon: Math.min(box.east, Math.max(box.west, centre.lon)),
+      lat: Math.min(box.north, Math.max(box.south, centre.lat)),
+    };
+    return metresBetween(centre, nearest) <= MESH_SAMPLE_RADIUS_M;
+  }
+
+  /**
+   * A tile's drawn lines with their bounding boxes, built once per filter;
+   * each line's mesh points are densified the first time it is in range.
+   */
+  function meshParts(entry) {
+    if (entry.meshParts) return entry.meshParts;
+    entry.meshParts = [];
+    for (const sequence of entry.sequences.values())
+      for (const part of sequence.parts) {
+        const box = {
+          west: Infinity,
+          south: Infinity,
+          east: -Infinity,
+          north: -Infinity,
+        };
+        for (const [lon, lat] of part) {
+          if (lon < box.west) box.west = lon;
+          if (lon > box.east) box.east = lon;
+          if (lat < box.south) box.south = lat;
+          if (lat > box.north) box.north = lat;
+        }
+        entry.meshParts.push({ part, box, points: null });
+      }
+    return entry.meshParts;
+  }
+
+  /**
+   * Ask for mesh samples under a cast tile's lines within the sampler's range
+   * of the camera; the rest are asked for when a camera move brings them in.
+   */
  function requestMesh(entry) {
    const sampler = state.context.meshSampler;
    if (!sampler || entry.kind !== 'sequence' || !terrainMode()) return;
-    sampler.request(meshCells(entry));
+    const centre = meshCentre();
+    if (!centre || !entry.bounds || !inMeshRange(entry.bounds, centre)) return;
+    const points = [];
+    for (const line of meshParts(entry)) {
+      if (!inMeshRange(line.box, centre)) continue;
+      line.points ||= densifyLine(line.part, MESH_DENSIFY_DEG);
+      for (const point of line.points) points.push(point);
+    }
+    if (points.length) sampler.request(points);
  }

  /**
@@ -382,7 +423,7 @@ export function createCoverage({ state, source }) {
          color: green,
          pixelSize: COVERAGE_OVERVIEW_POINT_PX,
          // Google 3D terrain and clouds must not hide the near side's dots;
-          // `cullHorizon` hides the far side's, which this lets through.
+          // the horizon cull hides the far side's, which this lets through.
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        }),
      );
@@ -390,53 +431,18 @@ export function createCoverage({ state, source }) {
    return { collection, points: drawn };
  }

-  /**
-   * Hide the overview points behind the horizon, as the cyclones layer does.
-   * They skip the depth test, so nothing else stops the far hemisphere's
-   * coverage drawing over this one at whole-earth zooms; a finite skip
-   * distance cannot do it, as the horizon's distance moves with the camera.
-   */
-  function cullHorizon() {
-    const position = state.viewer?.camera?.positionWC;
-    if (!position) return;
-    const entries = [
-      ...state.coverage.tiles.values(),
-      ...state.coverage.stale.values(),
-    ].filter((entry) => entry.overviewPoints);
-    if (!entries.length) {
-      stopHorizonCull();
-      return;
-    }
-    const from = state.coverage.cullFrom;
-    if (from && Cesium.Cartesian3.equals(from, position)) return;
-    state.coverage.cullFrom = Cesium.Cartesian3.clone(position, from);
-    let changed = false;
-    for (const entry of entries)
-      if (cullPoints(entry.overviewPoints, position)) changed = true;
-    if (changed) requestRender();
+  /** Every overview point on the globe, current zoom and old alike. */
+  function* overviewPoints() {
+    for (const entry of drawnEntries())
+      if (entry.overviewPoints) yield* entry.overviewPoints;
  }

-  /** Show the points in front of the horizon seen from `position`, hide the rest. */
-  function cullPoints(points, position) {
-    const occluder = (state.coverage.occluder ||=
-      new Cesium.EllipsoidalOccluder(Cesium.Ellipsoid.WGS84));
-    occluder.cameraPosition = position;
-    let changed = false;
-    for (const point of points) {
-      const show = occluder.isPointVisible(point.position);
-      if (point.show !== show) {
-        point.show = show;
-        changed = true;
-      }
-    }
-    return changed;
-  }
-
-  function stopHorizonCull() {
-    state.coverage.stopHorizonCull?.();
-    state.coverage.stopHorizonCull = null;
-    state.coverage.cullFrom = null;
-  }
+  // Overview points skip the depth test: hide the far hemisphere's.
+  const horizon = createHorizonCull({
+    getViewer: () => state.viewer,
+    items: overviewPoints,
+    onChange: requestRender,
+  });

  function attachPrimitive(entry) {
    const scene = state.viewer?.scene;
@@ -463,11 +469,8 @@ export function createCoverage({ state, source }) {
      entry.overviewPoints = points;
      entry.count = points.length;
      scene.primitives.add(collection);
-      // Cull the new points now, then every frame the camera has moved.
-      const camera = state.viewer.camera?.positionWC;
-      if (camera) cullPoints(points, camera);
-      state.coverage.stopHorizonCull ||=
-        scene.preRender?.addEventListener(cullHorizon) || null;
+      // Cull the new points now, then all of them whenever the camera moves.
+      horizon.update(points);
    }
  }

@@ -777,7 +780,7 @@ export function createCoverage({ state, source }) {
    state.coverage.remeshTimer = null;
    state.coverage.remeshDirty.clear();
    stopSelectionWatch();
-    stopHorizonCull();
+    horizon.stop();
    requestRender();
  }

@@ -787,7 +790,7 @@ export function createCoverage({ state, source }) {
    for (const entry of state.coverage.tiles.values()) {
      cancelCast(entry);
      entry.castRequested = false;
-      entry.meshCells = null;
+      entry.meshParts = null;
      detachPrimitive(entry);
      attachPrimitive(entry);
    }
@@ -823,12 +826,26 @@ export function createCoverage({ state, source }) {
    }
  }

+  /**
+   * Every tile drawn on the globe: the current zoom's, and the old zoom's
+   * kept visible until the new one is in (see retire).
+   */
+  function drawnEntries() {
+    return [...state.coverage.tiles.values(), ...state.coverage.stale.values()];
+  }
+
+  /** A tile's primitives on the globe: its own, and the ones a swap still shows. */
+  function drawnRecords(entry) {
+    const records = entry.primitives || [];
+    return entry.swap ? [...records, ...entry.swap.old] : records;
+  }
+
  /** Recolour one sequence, every part of it, in place (selection highlight). */
  function recolorSequence(id, selected) {
-    for (const entry of state.coverage.tiles.values()) {
+    for (const entry of drawnEntries()) {
      const sequence = entry.sequences.get(id);
      if (!sequence) continue;
-      for (const record of entry.primitives || []) {
+      for (const record of drawnRecords(entry)) {
        // Still building: `syncSelection` catches it up once it is ready.
        if (!record.primitive.ready) continue;
        recolorInstances(record.primitive, sequence, selected);
@@ -867,11 +884,15 @@ export function createCoverage({ state, source }) {
    const stop = scene.postRender.addEventListener(() => {
      let building = false;
      let changed = false;
-      for (const entry of state.coverage.tiles.values())
+      for (const entry of drawnEntries()) {
        for (const record of entry.primitives || []) {
          if (!record.primitive.ready) building = true;
          else if (syncSelection(entry, record)) changed = true;
        }
+        // Lines a swap still shows were ready (or never show): catch up only.
+        for (const record of entry.swap?.old || [])
+          if (syncSelection(entry, record)) changed = true;
+      }
      if (changed) requestRender();
      if (!building) stopSelectionWatch();
    });
@@ -512,49 +512,52 @@ test('the per-tile cap applies after the imagery filter, so a dense tile keeps i
  coverage.clear();
 });

+/** The colour attribute value of a line, selected or not. */
+function colourValue(selected) {
+  return Array.from(
+    Cesium.ColorGeometryInstanceAttribute.toValue(
+      selected
+        ? Cesium.Color.fromCssColorString(COLORS.selected)
+        : Cesium.Color.fromCssColorString(COLORS.coverage).withAlpha(0.92),
+    ),
+  );
+}
+
+/** Take over a drawn primitive's readiness and seq-1's colour attribute. */
+function controlled(record, ready) {
+  const control = { ready, attributes: { color: undefined } };
+  Object.defineProperty(record.primitive, 'ready', {
+    get: () => control.ready,
+  });
+  record.primitive.getGeometryInstanceAttributes = (id) =>
+    id === 'mly:seq:seq-1' ? control.attributes : undefined;
+  return control;
+}
+
 test('a selection made or cleared while a tile builds is applied once it is ready', async () => {
  const { viewer, source, state, coverage, bytes } = setup();
  coverage.refresh();
  source.calls[0].resolve(bytes);
  await settle();
  const [entry] = state.coverage.tiles.values();
-  const value = (selected) =>
-    Array.from(
-      Cesium.ColorGeometryInstanceAttribute.toValue(
-        selected
-          ? Cesium.Color.fromCssColorString(COLORS.selected)
-          : Cesium.Color.fromCssColorString(COLORS.coverage).withAlpha(0.92),
-      ),
-    );
-  /** Stand in for a primitive the worker has not finished, with its colours. */
-  function building(record) {
-    const control = { ready: false, attributes: { color: undefined } };
-    Object.defineProperty(record.primitive, 'ready', {
-      get: () => control.ready,
-    });
-    record.primitive.getGeometryInstanceAttributes = (id) =>
-      id === 'mly:seq:seq-1' ? control.attributes : undefined;
-    return control;
-  }
-
  // Selected while its line is still building: nothing to recolour yet...
-  const first = building(entry.primitives[0]);
+  const first = controlled(entry.primitives[0], false);
  state.sequence.selectedId = 'seq-1';
  coverage.recolorSequence('seq-1', true);
  assert.equal(first.attributes.color, undefined);
  // ...so the highlight lands once it is ready.
  first.ready = true;
  frame(viewer.postRender);
-  assert.deepEqual(Array.from(first.attributes.color), value(true));
+  assert.deepEqual(Array.from(first.attributes.color), colourValue(true));

  // Rebuilt with the highlight baked in, then cleared mid-build: not stuck.
  coverage.rebuild();
-  const second = building(entry.primitives[0]);
+  const second = controlled(entry.primitives[0], false);
  coverage.recolorSequence('seq-1', false);
  state.sequence.selectedId = null;
  second.ready = true;
  frame(viewer.postRender);
-  assert.deepEqual(Array.from(second.attributes.color), value(false));
+  assert.deepEqual(Array.from(second.attributes.color), colourValue(false));
  coverage.clear();
  assert.equal(viewer.postRender.size, 0, 'the selection watch is gone');
 });
@@ -727,3 +730,112 @@ test('a street view toward the horizon ranks only the ground within range', () =
    assert.ok(Math.abs(dx) <= 1 && Math.abs(dy) <= 1, `${dx},${dy} around it`);
  coverage.clear();
 });
+
+test('a selection cleared while the old zoom is still shown uncolours its lines (review IC8 P2)', async () => {
+  const { viewer, source, state, coverage, bytes } = setup();
+  coverage.refresh();
+  source.calls[0].resolve(bytes);
+  await settle();
+  const [entry] = state.coverage.tiles.values();
+  const line = controlled(entry.primitives[0], true);
+  state.sequence.selectedId = 'seq-1';
+  coverage.recolorSequence('seq-1', true);
+  assert.deepEqual(Array.from(line.attributes.color), colourValue(true));
+  // Zoom out: the street tile stays on screen while the new zoom loads...
+  viewer.view.height = 100_000;
+  coverage.refresh();
+  assert.equal(state.coverage.stale.size, 1, 'the old zoom is kept');
+  // ...and the selection is cleared meanwhile.
+  state.sequence.selectedId = null;
+  coverage.recolorSequence('seq-1', false);
+  assert.deepEqual(
+    Array.from(line.attributes.color),
+    colourValue(false),
+    'the retained line is not left cyan',
+  );
+  coverage.clear();
+});
+
+test('a selection made while the old zoom is still building is applied once it is ready (review IC8 P2)', async () => {
+  const { viewer, source, state, coverage, bytes } = setup();
+  coverage.refresh();
+  source.calls[0].resolve(bytes);
+  await settle();
+  const [entry] = state.coverage.tiles.values();
+  const line = controlled(entry.primitives[0], false);
+  viewer.view.height = 100_000;
+  coverage.refresh();
+  assert.equal(state.coverage.stale.size, 1);
+  frame(viewer.postRender);
+  state.sequence.selectedId = 'seq-1';
+  coverage.recolorSequence('seq-1', true);
+  line.ready = true;
+  frame(viewer.postRender);
+  assert.deepEqual(
+    line.attributes.color && Array.from(line.attributes.color),
+    colourValue(true),
+    'the highlight lands on the retained line',
+  );
+  coverage.clear();
+  assert.equal(viewer.postRender.size, 0, 'the selection watch is gone');
+});
+
+test('only lines within the mesh sampler range of the camera are asked for (review IC8 P2)', async () => {
+  let heightsReady = false;
+  const groundCaster = {
+    prepareLines: async () => (heightsReady = true),
+    castLine: (coords) =>
+      heightsReady ? coords.flatMap(([lon, lat]) => [lon, lat, 30]) : null,
+  };
+  const requested = [];
+  const meshSampler = {
+    onSampled() {},
+    request: (points) => requested.push(...points),
+    meshAt: () => undefined,
+  };
+  const { source, coverage, centre } = setup({
+    surface: 'terrain',
+    groundCaster,
+    meshSampler,
+  });
+  const { east, north } = tileBounds(centre.tile.x, centre.tile.y, 14);
+  coverage.refresh();
+  source.calls[0].resolve(
+    encodeCoverageTile(centre.tile, {
+      sequences: [
+        {
+          id: 'here',
+          parts: [
+            [
+              [centre.lon - 0.001, centre.lat],
+              [centre.lon + 0.001, centre.lat],
+            ],
+          ],
+        },
+        // ~1.1 km from the camera, in the tile's north-east corner.
+        {
+          id: 'corner',
+          parts: [
+            [
+              [east - 0.002, north - 0.002],
+              [east - 0.0005, north - 0.0005],
+            ],
+          ],
+        },
+      ],
+    }),
+  );
+  await settle();
+  await settle();
+  assert.ok(requested.length > 0, 'the near line is asked for');
+  const farthest = Math.max(
+    ...requested.map(([lon, lat]) =>
+      Math.hypot(
+        (lon - centre.lon) * 111_320 * Math.cos(centre.lat * RAD),
+        (lat - centre.lat) * 110_540,
+      ),
+    ),
+  );
+  assert.ok(farthest < 200, `nothing from the corner (${farthest} m)`);
+  coverage.clear();
+});
@@ -2,6 +2,7 @@ import assert from 'node:assert/strict';
 import test from 'node:test';
 import { createMapillaryProvider, mapillaryImageUrl } from './index.js';
 import { sequenceIdFromPick } from './coverage.js';
+import { thinImages } from './sequences.js';
 import { validateProviders } from '../../registry.js';
 import { PROVIDER_COLORS } from '../../policy.js';
 import { resolveFilter } from '../../filter.js';
@@ -135,3 +136,47 @@ test('a "since N days" window follows the clock in a long-open tab (review P3)',
    'two days on, the image is older than the window',
  );
 });
+
+test('nearestImage measures the short way round the date line (review IC8 P2)', async () => {
+  const at = (id, lon, lat) => ({
+    id,
+    is_pano: false,
+    captured_at: 10,
+    geometry: { type: 'Point', coordinates: [lon, lat] },
+  });
+  const source = fakeSource({
+    nearest: [
+      at('same-side', 179.9995, 0), // ~45 m west, on the camera's side
+      at('across', -179.9999, 0), // ~11 m east, across ±180°
+    ],
+  });
+  const instance = createMapillaryProvider({ source }).create(fakeContext());
+  assert.equal(
+    await instance.nearestImage({ lat: 0, lon: 179.9999 }),
+    'across',
+  );
+  // And from the other side.
+  const west = createMapillaryProvider({
+    source: fakeSource({
+      nearest: [at('same-side', -179.9995, 0), at('across', 179.9999, 0)],
+    }),
+  }).create(fakeContext());
+  assert.equal(await west.nearestImage({ lat: 0, lon: -179.9999 }), 'across');
+});
+
+test('cone thinning across the date line drops images metres apart (review IC8 P2)', () => {
+  const image = (id, lon) => ({ id, lon, lat: 0 });
+  // A sequence driving east over ±180° with images ~1 m apart, then ~11 m on.
+  const kept = thinImages(
+    [
+      image('a', 179.99999),
+      image('b', -179.99999), // ~2 m from a, across the date line
+      image('c', -179.9999), // ~11 m from a
+    ],
+    3,
+  );
+  assert.deepEqual(
+    kept.map(({ id }) => id),
+    ['a', 'c'],
+  );
+});
@@ -2,6 +2,8 @@ import * as Cesium from 'cesium';
 import { imageConeGlyph } from '../../glyphs.js';
 import { passesImageryFilter } from '../../filter.js';
 import { refineHeights } from '../../groundCast.js';
+import { createHorizonCull } from '../../view.js';
+import { meshCellKey } from '../../meshSampler.js';
 import { metresBetween } from '../../view.js';
 import {
  COLORS,
@@ -57,6 +59,21 @@ export function createSequences({ state, source, parts }) {
    state.context.notify();
  }

+  /**
+   * The cones on the globe: each drawn image's index, billboard and height
+   * (null while clamped), and the mesh cells under them, so a mesh sample
+   * moves only the cones it can affect.
+   */
+  const nothingDrawn = () => ({ images: [], cones: [], cells: new Set() });
+  let drawn = nothingDrawn();
+
+  // The cones skip the depth test: hide the ones behind the globe.
+  const horizon = createHorizonCull({
+    getViewer: () => state.viewer,
+    items: () => drawn.cones.map((cone) => cone.billboard),
+    onChange: requestRender,
+  });
+
  function ensureCollections(viewer) {
    if (state.sequence.collection) return;
    state.sequence.collection = new Cesium.BillboardCollection({
@@ -69,6 +86,23 @@ export function createSequences({ state, source, parts }) {
  function clearCones() {
    state.sequence.collection?.removeAll();
    state.sequence.images = [];
+    drawn = nothingDrawn();
+    horizon.stop();
+  }
+
+  /** Where a cone stands: at `height`, or clamped to the ground when null. */
+  function placement(image, height) {
+    return {
+      position: Cesium.Cartesian3.fromDegrees(
+        image.lon,
+        image.lat,
+        height ?? 0,
+      ),
+      heightReference:
+        height === null
+          ? Cesium.HeightReference.CLAMP_TO_GROUND
+          : Cesium.HeightReference.NONE,
+    };
  }

  /**
@@ -78,7 +112,7 @@ export function createSequences({ state, source, parts }) {
   * draped, or when a terrain height is not cached yet; that fetches the
   * heights and draws the cones again.
   */
-  function coneHeights(images) {
+  function coneHeights(images, { request = true } = {}) {
    const ground = state.context.groundCaster;
    if (state.context.getSurface?.() !== 'terrain' || !ground) return null;
    const dems = images.map((image) => ground.groundAt(image.lon, image.lat));
@@ -91,7 +125,8 @@ export function createSequences({ state, source, parts }) {
      return null;
    }
    const sampler = state.context.meshSampler;
-    sampler?.request(images.map((image) => [image.lon, image.lat]));
+    if (request)
+      sampler?.request(images.map((image) => [image.lon, image.lat]));
    return refineHeights(
      images.map((image, i) => ({
        dem: dems[i],
@@ -104,6 +139,7 @@ export function createSequences({ state, source, parts }) {
    const collection = state.sequence.collection;
    if (!collection) return;
    collection.removeAll();
+    drawn = { ...nothingDrawn(), images };
    const heights = coneHeights(images);
    // One colour per source; 360° images keep the ring shape.
    const cone = imageConeGlyph({ size: 32, color: COLORS.coverage });
@@ -117,28 +153,56 @@ export function createSequences({ state, source, parts }) {
    images.forEach((image, index) => {
      if (!passesImageryFilter(image, filter)) return;
      const height = heights?.[index] ?? null;
-      collection.add({
+      const billboard = collection.add({
        id: `${PICK_PREFIX.image}${image.id}`,
-        position: Cesium.Cartesian3.fromDegrees(
-          image.lon,
-          image.lat,
-          height ?? 0,
-        ),
+        ...placement(image, height),
        image: image.isPano ? ring : cone,
        imageId: image.isPano ? 'mly-cone-pano' : 'mly-cone',
        width: IMAGE_CONE_SIZE_PX,
        height: IMAGE_CONE_SIZE_PX,
        rotation: -Cesium.Math.toRadians(image.compassAngle),
        alignedAxis: Cesium.Cartesian3.UNIT_Z,
-        heightReference:
-          height === null
-            ? Cesium.HeightReference.CLAMP_TO_GROUND
-            : Cesium.HeightReference.NONE,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        scaleByDistance: new Cesium.NearFarScalar(200, 1.1, 6000, 0.35),
      });
+      drawn.cones.push({ index, billboard, height });
+      drawn.cells.add(meshCellKey(image.lon, image.lat));
    });
+    horizon.update();
+    requestRender();
+  }
+
+  /**
+   * New mesh samples landed: when any is under a cone, re-place the cones
+   * whose cast height changed, in place. A sample can move a neighbour too
+   * (refineHeights bridges across covered points), so every height is
+   * recomputed (cheap arithmetic) but only moved cones are touched.
+   */
+  function onMeshSampled(batch) {
+    if (state.context.getSurface?.() !== 'terrain' || !drawn.cones.length)
+      return;
+    if (!batch.some(([lon, lat]) => drawn.cells.has(meshCellKey(lon, lat))))
+      return;
+    const { images, cones } = drawn;
+    // Already asked for when drawn; a missing terrain cell redraws them all.
+    const heights = coneHeights(images, { request: false });
+    if (!heights) return;
+    const moved = [];
+    for (const cone of cones) {
+      const height = heights[cone.index] ?? null;
+      if (height === cone.height) continue;
+      cone.height = height;
+      const { position, heightReference } = placement(
+        images[cone.index],
+        height,
+      );
+      cone.billboard.heightReference = heightReference;
+      cone.billboard.position = position;
+      moved.push(cone.billboard);
+    }
+    if (!moved.length) return;
+    horizon.update(moved);
    requestRender();
  }

@@ -235,9 +299,7 @@ export function createSequences({ state, source, parts }) {
  }

  // New mesh samples may move the cones onto (or off) the road surface.
-  state.context.meshSampler?.onSampled(() => {
-    if (state.context.getSurface?.() === 'terrain') rerender();
-  });
+  const stopMeshListener = state.context.meshSampler?.onSampled(onMeshSampled);

  function setVisible(visible) {
    if (state.sequence.collection) state.sequence.collection.show = visible;
@@ -246,6 +308,9 @@ export function createSequences({ state, source, parts }) {

  function destroy(viewer) {
    state.sequence.abort?.abort();
+    horizon.stop();
+    drawn = nothingDrawn();
+    stopMeshListener?.();
    const collection = state.sequence.collection;
    if (collection) {
      sprites?.unregisterSpriteCollection?.(SPRITE_ID, collection);
@@ -1,5 +1,7 @@
 import assert from 'node:assert/strict';
 import test from 'node:test';
+import * as Cesium from 'cesium';
+import { MESH_CELL_DEG } from '../../meshSampler.js';
 import { createSequences } from './sequences.js';

 // The cone glyphs draw on a canvas; Node has none, so any drawing is a no-op.
@@ -170,3 +172,155 @@ test('clearSelection cancels the lookup and uncolours the sequence', async () =>
  await settle();
  assert.deepEqual(drawn(), [], 'the late answer draws nothing');
 });
+
+/**
+ * Terrain mode (Google 3D at street zoom): bare earth 10 m everywhere, a
+ * mesh sampler whose samples the test sets and announces, and cones that
+ * log every change made to them or their collection.
+ */
+function terrainSetup() {
+  const context = setup();
+  const { state } = context;
+  const mesh = new Map();
+  const cell = (lon, lat) =>
+    `${Math.round(lon / MESH_CELL_DEG)},${Math.round(lat / MESH_CELL_DEG)}`;
+  let announce = null;
+  state.context.getSurface = () => 'terrain';
+  state.context.groundCaster = {
+    groundAt: () => 10,
+    prepare: async () => true,
+  };
+  state.context.meshSampler = {
+    request() {},
+    meshAt: (lon, lat) => mesh.get(cell(lon, lat)),
+    onSampled: (listener) => {
+      announce = listener;
+      return () => (announce = null);
+    },
+  };
+  const changes = [];
+  const items = [];
+  state.sequence.collection = {
+    items,
+    show: true,
+    add(options) {
+      changes.push(['add', options.id]);
+      const cone = new Proxy(options, {
+        set(target, key, value) {
+          changes.push([key, target.id]);
+          target[key] = value;
+          return true;
+        },
+      });
+      items.push(cone);
+      return cone;
+    },
+    removeAll() {
+      changes.push(['removeAll']);
+      items.length = 0;
+    },
+  };
+  // Created again, so it listens to this sampler.
+  const sequences = createSequences({
+    state,
+    source: context.source,
+    parts: { coverage: { recolorSequence() {} } },
+  });
+  /** Sample the mesh under a point, then announce it as the sampler does. */
+  function sample(lon, lat, height) {
+    const centre = [
+      Math.round(lon / MESH_CELL_DEG) * MESH_CELL_DEG,
+      Math.round(lat / MESH_CELL_DEG) * MESH_CELL_DEG,
+    ];
+    mesh.set(cell(lon, lat), height);
+    announce([centre]);
+  }
+  const heightOf = (cone) =>
+    Cesium.Cartographic.fromCartesian(cone.position).height;
+  return { ...context, sequences, changes, items, sample, heightOf };
+}
+
+test('a mesh sample away from the selected sequence changes no cone (review IC8 P1)', async () => {
+  const { source, sequences, changes, items, sample } = terrainSetup();
+  sequences.select('A');
+  source.last('A').resolve(records('A', 3));
+  await settle();
+  assert.equal(items.length, 3);
+  changes.length = 0;
+  sample(-121.3, 38.7, 12); // a street elsewhere in the tile
+  assert.deepEqual(changes, [], 'nothing rebuilt or moved');
+});
+
+test('a mesh sample under a cone moves that cone in place, and no other (review IC8 P1)', async () => {
+  const { source, sequences, changes, items, sample, heightOf } =
+    terrainSetup();
+  sequences.select('A');
+  source.last('A').resolve(records('A', 3));
+  await settle();
+  const before = items.map(heightOf);
+  changes.length = 0;
+  // The road under the second image is 2.5 m above the bare earth.
+  sample(-121.489, 38.58, 12.5);
+  assert.ok(
+    changes.every(([, id]) => id === 'mly:img:A-1'),
+    `only A-1 changed: ${JSON.stringify(changes)}`,
+  );
+  assert.ok(
+    changes.some(([key]) => key === 'position'),
+    'A-1 moved',
+  );
+  assert.equal(
+    changes.some(([key]) => key === 'removeAll' || key === 'add'),
+    false,
+    'the collection is not rebuilt',
+  );
+  const after = items.map(heightOf);
+  assert.ok(
+    Math.abs(after[1] - 13.5) < 0.01,
+    `A-1 stands on the road (${after[1]})`,
+  );
+  assert.deepEqual([after[0], after[2]], [before[0], before[2]]);
+});
+
+test('cones behind the globe are hidden, and show again from the other side (review IC8 P2)', async () => {
+  const { state, source, sequences } = setup();
+  const view = { lon: -121.49, lat: 38.58, height: 20_000_000 };
+  const preRender = new Set();
+  state.viewer = {
+    camera: {
+      get positionWC() {
+        return Cesium.Cartesian3.fromDegrees(view.lon, view.lat, view.height);
+      },
+    },
+    scene: {
+      preRender: {
+        addEventListener(listener) {
+          preRender.add(listener);
+          return () => preRender.delete(listener);
+        },
+      },
+    },
+  };
+  sequences.select('A');
+  // One image under the camera, one near its antipode.
+  source.last('A').resolve([
+    ...records('A', 1),
+    {
+      id: 'A-far',
+      geometry: { coordinates: [58.51, -38.58] },
+      captured_at: 1_800_000_000_000,
+    },
+  ]);
+  await settle();
+  const [near, far] = state.sequence.collection.items;
+  assert.equal(near.show, true, 'the near side stays visible');
+  assert.equal(far.show, false, 'the far side does not show through');
+  // Fly round to the other hemisphere: the two swap.
+  view.lon = 58.51;
+  view.lat = -38.58;
+  for (const listener of [...preRender]) listener();
+  assert.equal(near.show, false);
+  assert.equal(far.show, true);
+  sequences.clearSelection();
+  assert.equal(preRender.size, 0, 'the cull listener is gone');
+});