<bmx-point-cloud>

<bmx-point-cloud id="ex-pc" label="Quarry survey" allow-open color-mode="auto" style="--bmx-point-cloud-height: 30rem"
  annotations='[{"id":"n1","text":"Site shed - roof scanned from the drone","position":[300105,5000127.5,44]},{"id":"n2","text":"Stockpile, measured 14 October","position":[300060,5000060,52]}]'></bmx-point-cloud>
<p class="note" id="ex-pc-out" role="status" style="margin: 12px 0 0">Making a survey&hellip;</p>

<script type="module">
  await customElements.whenDefined('bmx-point-cloud');
  const viewer = document.getElementById('ex-pc');
  const out = document.getElementById('ex-pc-out');

  // A made-up survey written as a binary PLY in memory: a quarry floor with benches cut into one side,
  // a stockpile, a shed, a few trees and some stray points high up - the shapes a laser scan of a site
  // has, so that colouring by elevation, intensity and classification each shows something. The
  // points are invented here, not read from any real survey.
  let seed = 20261021;
  const rnd = () => ((seed = (seed * 1664525 + 1013904223) >>> 0) / 4294967296);
  const N = 180000;
  const pts = [];
  for (let i = 0; i < N; i += 1) {
    const x = rnd() * 240;
    const y = rnd() * 180;
    // The floor dips towards the middle; benches step up on the east side.
    let z = 40 - 6 * Math.exp(-(((x - 120) / 70) ** 2 + ((y - 90) / 50) ** 2)) + 0.8 * Math.sin(x / 9) * Math.cos(y / 11);
    if (x > 170) z += 5 * Math.floor((x - 170) / 18);
    let cls = 2; // ground
    const stockpile = Math.hypot(x - 60, y - 60);
    if (stockpile < 22) { z += (22 - stockpile) * 0.55; cls = 2; }
    if (x > 95 && x < 115 && y > 120 && y < 135) { z = 44; cls = 6; } // the shed roof
    const tree = [[30, 150], [45, 160], [200, 30], [215, 45], [150, 170]].find(([tx, ty]) => Math.hypot(x - tx, y - ty) < 5);
    if (tree) { z += 4 + rnd() * 7; cls = 5; }
    if (rnd() < 0.0015) { z += 15 + rnd() * 20; cls = 7; } // noise: birds, dust
    const intensity = cls === 6 ? 2600 + rnd() * 400 : cls === 5 ? 600 + rnd() * 500 : 1200 + 900 * (0.5 + 0.5 * Math.sin(x / 15)) + rnd() * 200;
    pts.push(x + rnd() * 0.08, y + rnd() * 0.08, z + rnd() * 0.05, Math.round(intensity), cls);
  }
  const header = `ply\nformat binary_little_endian 1.0\ncomment Invented survey for the BMX docs\nelement vertex ${N}\nproperty double x\nproperty double y\nproperty float z\nproperty ushort intensity\nproperty uchar classification\nend_header\n`;
  const head = new TextEncoder().encode(header);
  const body = new Uint8Array(N * 23);
  const view = new DataView(body.buffer);
  for (let i = 0; i < N; i += 1) {
    const at = i * 23;
    view.setFloat64(at, 300000 + pts[i * 5], true);
    view.setFloat64(at + 8, 5000000 + pts[i * 5 + 1], true);
    view.setFloat32(at + 16, pts[i * 5 + 2], true);
    view.setUint16(at + 20, pts[i * 5 + 3], true);
    body[at + 22] = pts[i * 5 + 4];
  }
  const file = new Uint8Array(head.length + body.length);
  file.set(head, 0);
  file.set(body, head.length);

  viewer.addEventListener('bmxLoad', e => {
    const d = e.detail;
    out.textContent = `${d.points.toLocaleString()} points read in ${(d.millis / 1000).toFixed(1)} s. Colour by classification and untick Ground to see what stands on it; drag to turn, right-drag to move, wheel to zoom, click a point for its coordinates. Measure the shed, cut a profile across the benches, box in the stockpile, and save the view.`;
  });
  viewer.addEventListener('bmxPick', e => {
    const p = e.detail;
    out.textContent = `Point ${p.index.toLocaleString()} at ${p.position.map(v => v.toFixed(2)).join(', ')}` + (p.classification !== null ? `, class ${p.classification}` : '') + (p.intensity !== null ? `, intensity ${p.intensity}` : '');
  });
  viewer.addEventListener('bmxMeasure', e => {
    const m = e.detail;
    out.textContent = m.kind === 'area' ? `Area ${m.area.toFixed(2)} m², perimeter ${m.length.toFixed(2)} m` : `${m.kind === 'height' ? 'Height' : 'Distance'} ${m.length.toFixed(3)} m`;
  });
  viewer.addEventListener('bmxProfile', e => {
    out.textContent = `Profile of ${e.detail.samples.toLocaleString()} points over ${Math.hypot(e.detail.to[0] - e.detail.from[0], e.detail.to[1] - e.detail.from[1]).toFixed(1)} m; the chart is in the Profile tab, and the CSV button saves it.`;
  });
  viewer.addEventListener('bmxError', e => {
    out.textContent = e.detail.message;
  });
  await viewer.load(file, { name: 'quarry.ply' });
</script>