perf(shipwrecks): place markers without a terrain height read each

Each of the 7,958 wreck billboards was ground-clamped, and a clamped
billboard reads the terrain height as it is created. Switching the layer
on after the globe had loaded froze the page for about 3 s in one task.
The markers now sit on the ellipsoid with no height reference; the depth
test is already off and the card already used that position.

Co-Authored-By: Claude Fable 5.2 <[email protected]>

docs/CURRENT-STATE.md

@@ -194,8 +194,8 @@ refers to a person by a title or role (Mr, captain, master, owner, crew,
 such word can still pass. Deaths appear only as a Wikidata count.
 
 The globe draws a round marker with a hull and mast per wreck, all in one
-billboard collection, ground-clamped with the depth test off and the horizon
-cull GhostMaps uses, sized by deaths (a bigger toll draws on top) and coloured
+billboard collection, placed on the ellipsoid (no terrain height read per
+marker) with the depth test off and the horizon cull GhostMaps uses, sized by deaths (a bigger toll draws on top) and coloured
 by era (a legend under the row): before 1900 (ancient wrecks dated only by
 period count here), 1900–1945, after 1945, and date unknown. A period filter
 under the row picks a start year and an end year side by side (two pickers

src/layers/shipwrecks/index.js

@@ -159,6 +159,11 @@ export function createShipwrecksLayer({
       (a, b) => (a.casualties || 0) - (b.casualties || 0),
     );
     for (const record of ordered) {
+      // On the ellipsoid, with no height reference. A ground-clamped billboard
+      // reads the terrain height as it is created, and that read for every
+      // wreck in one pass froze the page for seconds. Wrecks lie at sea, the
+      // depth test is off and the card already sits here, so the marker
+      // shows in the same place.
       const position = Cesium.Cartesian3.fromDegrees(record.lon, record.lat);
       const size = markerPixelSize(record.casualties);
       const billboard = _markers.add({
@@ -167,7 +172,6 @@ export function createShipwrecksLayer({
         image: _images[eraOf(record)],
         width: size,
         height: size,
-        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
         disableDepthTestDistance: Number.POSITIVE_INFINITY,
       });
       const pin = {

src/layers/shipwrecks/index.test.mjs

@@ -163,6 +163,20 @@ test('markers sit on the wreck: no eye offset, bigger toll drawn last', async ()
   assert.equal(h.markers.billboards[2].width, markerPixelSize(1500));
 });
 
+test('markers are placed without a terrain height read each', async () => {
+  // A ground-clamped billboard reads the terrain height when it is created;
+  // for every wreck in one pass that froze the page for seconds.
+  const h = harness({ snapshots: [snapshot([wreck('a'), wreck('b')])] });
+  h.layer.enable();
+  await h.layer.update();
+  assert.equal(h.markers.billboards.length, 2);
+  for (const billboard of h.markers.billboards) {
+    assert.equal(billboard.heightReference, undefined);
+    const { height } = Cesium.Cartographic.fromCartesian(billboard.position);
+    assert.equal(Math.abs(height) < 1e-6, true);
+  }
+});
+
 test('an unchanged snapshot does not rebuild the markers', async () => {
   const records = [wreck('a')];
   const h = harness({