/* DepthWizard v4 viewer — dual-pane DSM inspector + 3D flythrough.
*
* Loads a prediction directory written by `infer/predict.py`:
*
* ndsm_m.npy float32 (H, W), metres above ground <- preferred, exact
* ndsm16.png 16-bit fallback + the affine in meta.json
* rgb.png the optical image that produced it
* meta.json the contract, the scene metadata, the diagnostics
* gt_ndsm_m.npy (optional) reference surface -> live metrics + error layer
*
* The .npy path exists because a 16-bit PNG drawn into a 2-D canvas is
* down-converted to 8 bits by the browser, which would quantise a 0-60 m range
* into 0.23 m steps before anything is rendered. Metres are the product here,
* so the viewer reads the float array directly and only falls back to the PNG.
*
* No build step, no bundler, no network: three.js r128 is vendored beside this
* file, so `index.html` opened from a USB stick works exactly like the served
* copy. That is the "standalone deployment" half of the rubric.
*
* Three ways in, all landing on the same `adopt()`:
*
* file picker -> loadFromFiles() a prediction directory off disk
* ?result=<base> -> loadFromUrl() a served prediction directory
* window.DW_EMBED -> loadFromEmbed() a single prediction inlined into the
* page, which is how the Gradio Space
* hands its result to the iframe
*
* The embedded path cannot ship a .npy through an `srcdoc` iframe without
* base64-ing tens of megabytes, so it carries heights as a 16-bit value split
* across the red and green channels of an 8-bit PNG: `(R*256+G)/65535` over a
* stated [min, max] range. A 2-D canvas read returns those two channels
* byte-exactly, so the decode is lossless to ~1e-5 of the range (sub-millimetre
* on any real scene) rather than the 8-bit 0.23 m steps a plain grey ramp gives.
*/
'use strict';
// ---------------------------------------------------------------------------
// small utilities
// ---------------------------------------------------------------------------
const $ = (id) => document.getElementById(id);
const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
const fmt = (v, n = 2) => (v === null || v === undefined || !isFinite(v) ? '—' : v.toFixed(n));
/** Minimal NumPy .npy v1/v2 reader — enough for a 2-D float or int array. */
function parseNpy(buffer) {
const b = new Uint8Array(buffer);
const magic = String.fromCharCode(...b.slice(1, 6));
if (magic !== 'NUMPY') throw new Error('not a .npy file');
const major = b[6];
const hlenBytes = major === 1 ? 2 : 4;
const dv = new DataView(buffer);
const hlen = major === 1 ? dv.getUint16(8, true) : dv.getUint32(8, true);
const start = 8 + hlenBytes;
const header = new TextDecoder().decode(b.slice(start, start + hlen));
const descr = /'descr':\s*'([^']+)'/.exec(header)[1];
const fortran = /'fortran_order':\s*(True|False)/.exec(header)[1] === 'True';
const shape = /'shape':\s*\(([^)]*)\)/.exec(header)[1]
.split(',').map((s) => s.trim()).filter(Boolean).map(Number);
if (fortran) throw new Error('fortran-order .npy is not supported');
const off = start + hlen;
const n = shape.reduce((a, c) => a * c, 1);
const kind = descr.replace(/^[<>|=]/, '');
let data;
if (kind === 'f4') data = new Float32Array(buffer, off, n);
else if (kind === 'f8') data = Float32Array.from(new Float64Array(buffer, off, n));
else if (kind === 'u1') data = Float32Array.from(new Uint8Array(buffer, off, n));
else if (kind === 'i2') data = Float32Array.from(new Int16Array(buffer, off, n));
else if (kind === 'i4') data = Float32Array.from(new Int32Array(buffer, off, n));
else throw new Error('unsupported dtype ' + descr);
return { data, shape };
}
/* Turbo colormap, 9-stop piecewise linear. Perceptually ordered and, unlike
* jet, monotone in luminance — so a printed report still reads correctly. */
const TURBO = [
[48, 18, 59], [70, 107, 227], [40, 187, 226], [61, 231, 154],
[163, 244, 78], [231, 215, 53], [253, 152, 39], [232, 79, 13], [122, 4, 3],
];
function turbo(t) {
t = clamp(t, 0, 1) * (TURBO.length - 1);
const i = Math.min(TURBO.length - 2, Math.floor(t));
const f = t - i, a = TURBO[i], b = TURBO[i + 1];
return [a[0] + (b[0] - a[0]) * f, a[1] + (b[1] - a[1]) * f, a[2] + (b[2] - a[2]) * f];
}
/* Diverging blue-white-red, for signed error. */
function diverging(t) {
const x = clamp(t, -1, 1);
return x < 0
? [255 * (1 + x * 0.85), 255 * (1 + x * 0.55), 255]
: [255, 255 * (1 - x * 0.55), 255 * (1 - x * 0.85)];
}
/** Draw a vertical colour scale into `wrap`'s canvas, or hide it for layers
* that carry no scalar scale (optical RGB). `lo`/`hi` are in metres for the
* turbo ramp, or a signed +/-limit in metres for the diverging error ramp. */
function drawColorbar(wrapId, mode, lo, hi, errLim) {
const wrap = $(wrapId);
if (!wrap) return;
const cv = wrap.querySelector('canvas');
if (mode !== 'height' && mode !== 'reference' && mode !== 'error') {
wrap.style.display = 'none';
return;
}
if (mode === 'error') hi = errLim;
wrap.style.display = 'flex';
const w = cv.width, h = cv.height;
const g = cv.getContext('2d');
const img = g.createImageData(w, h);
for (let y = 0; y < h; y++) {
const t = 1 - y / (h - 1);
const [r, gg, b] = mode === 'error' ? diverging(t * 2 - 1) : turbo(t);
for (let x = 0; x < w; x++) {
const i = (y * w + x) * 4;
img.data[i] = r; img.data[i + 1] = gg; img.data[i + 2] = b; img.data[i + 3] = 255;
}
}
g.putImageData(img, 0, 0);
let labelHi = wrap.querySelector('.cb-hi'), labelLo = wrap.querySelector('.cb-lo');
if (!labelHi) {
labelHi = document.createElement('div'); labelHi.className = 'cb-hi';
labelLo = document.createElement('div'); labelLo.className = 'cb-lo';
labelLo.style.marginTop = '2px';
wrap.insertBefore(labelHi, cv);
wrap.appendChild(labelLo);
}
const unit = mode === 'error' ? ' m err' : ' m';
labelHi.textContent = fmt(hi, 1) + unit;
labelLo.textContent = fmt(mode === 'error' ? -hi : lo, 1) + unit;
}
// ---------------------------------------------------------------------------
// the loaded scene
// ---------------------------------------------------------------------------
const S = {
W: 0, H: 0, gsd: 0.5,
height: null, // Float32Array, metres
gt: null, // Float32Array or null
rgb: null, // HTMLCanvasElement
meta: null,
hMin: 0, hMax: 1,
probeA: null, probeB: null,
};
function decodeHeightFromPng(img, meta) {
const c = document.createElement('canvas');
c.width = img.width; c.height = img.height;
const g = c.getContext('2d', { willReadFrequently: true });
g.drawImage(img, 0, 0);
const px = g.getImageData(0, 0, c.width, c.height).data;
const lo = meta.height_min_m ?? 0, hi = meta.height_max_m ?? 1;
const out = new Float32Array(c.width * c.height);
for (let i = 0; i < out.length; i++) out[i] = lo + (px[i * 4] / 255) * (hi - lo);
warn('height came from an 8-bit canvas read of ndsm16.png — precision is ~' +
((hi - lo) / 255).toFixed(2) + ' m. Load ndsm_m.npy for exact metres.');
return { data: out, shape: [c.height, c.width] };
}
/** Decode heights packed as (R*256+G)/65535 over [lo, hi] — see the header. */
function decodeHeightRG16(img, lo, hi) {
const c = document.createElement('canvas');
c.width = img.width; c.height = img.height;
const g = c.getContext('2d', { willReadFrequently: true });
g.drawImage(img, 0, 0);
const px = g.getImageData(0, 0, c.width, c.height).data;
const span = hi - lo;
const out = new Float32Array(c.width * c.height);
for (let i = 0; i < out.length; i++) {
out[i] = lo + ((px[i * 4] * 256 + px[i * 4 + 1]) / 65535) * span;
}
return { data: out, shape: [c.height, c.width] };
}
function statsOf(a) {
let lo = Infinity, hi = -Infinity, sum = 0, n = 0;
for (let i = 0; i < a.length; i++) {
const v = a[i];
if (!isFinite(v)) continue;
if (v < lo) lo = v; if (v > hi) hi = v; sum += v; n++;
}
return { min: lo, max: hi, mean: n ? sum / n : 0, n };
}
function compareToReference() {
if (!S.gt) return null;
let se = 0, ae = 0, sd = 0, n = 0;
let sx = 0, sy = 0, sxx = 0, syy = 0, sxy = 0;
for (let i = 0; i < S.height.length; i++) {
const p = S.height[i], t = S.gt[i];
if (!isFinite(p) || !isFinite(t)) continue;
const d = p - t;
se += d * d; ae += Math.abs(d); sd += d; n++;
sx += p; sy += t; sxx += p * p; syy += t * t; sxy += p * t;
}
if (!n) return null;
const cov = sxy / n - (sx / n) * (sy / n);
const vx = sxx / n - (sx / n) ** 2, vy = syy / n - (sy / n) ** 2;
return {
rmse: Math.sqrt(se / n), mae: ae / n, bias: sd / n,
r: cov / (Math.sqrt(vx * vy) + 1e-12), n,
};
}
// ---------------------------------------------------------------------------
// texture layers (2-D pane and the 3-D drape share these)
// ---------------------------------------------------------------------------
function layerCanvas(mode) {
if (mode === 'rgb' && S.rgb) return S.rgb;
const c = document.createElement('canvas');
c.width = S.W; c.height = S.H;
const g = c.getContext('2d');
const img = g.createImageData(S.W, S.H);
const d = img.data;
const span = Math.max(S.hMax - S.hMin, 1e-3);
if (mode === 'hillshade') {
const sh = hillshade(S.height, S.W, S.H, S.gsd, +$('sunAz').value, +$('sunEl').value);
for (let i = 0; i < sh.length; i++) {
const v = sh[i]; d[i * 4] = d[i * 4 + 1] = d[i * 4 + 2] = v; d[i * 4 + 3] = 255;
}
} else if (mode === 'error' && S.gt) {
let lim = 0;
for (let i = 0; i < S.height.length; i++) lim = Math.max(lim, Math.abs(S.height[i] - S.gt[i]));
lim = Math.max(lim * 0.6, 1);
for (let i = 0; i < S.height.length; i++) {
const [r, gg, b] = diverging((S.height[i] - S.gt[i]) / lim);
d[i * 4] = r; d[i * 4 + 1] = gg; d[i * 4 + 2] = b; d[i * 4 + 3] = 255;
}
} else {
const src = mode === 'reference' && S.gt ? S.gt : S.height;
for (let i = 0; i < src.length; i++) {
const [r, gg, b] = turbo((src[i] - S.hMin) / span);
d[i * 4] = r; d[i * 4 + 1] = gg; d[i * 4 + 2] = b; d[i * 4 + 3] = 255;
}
}
g.putImageData(img, 0, 0);
return c;
}
/** Horn hillshade — the honest test of whether a DSM is shaped like terrain. */
function hillshade(h, W, H, gsd, azDeg, elDeg) {
const out = new Uint8ClampedArray(W * H);
const az = ((360 - azDeg + 90) * Math.PI) / 180, el = (elDeg * Math.PI) / 180;
const sinEl = Math.sin(el), cosEl = Math.cos(el);
for (let y = 0; y < H; y++) {
const y0 = Math.max(0, y - 1) * W, y1 = Math.min(H - 1, y + 1) * W;
for (let x = 0; x < W; x++) {
const x0 = Math.max(0, x - 1), x1 = Math.min(W - 1, x + 1);
const dx = (h[y * W + x1] - h[y * W + x0]) / (gsd * (x1 - x0 || 1));
const dy = (h[y1 + x] - h[y0 + x]) / (gsd * 2 || 1);
const slope = Math.atan(Math.hypot(dx, dy));
const aspect = Math.atan2(-dx, dy);
out[y * W + x] = 255 * clamp(
sinEl * Math.cos(slope) + cosEl * Math.sin(slope) * Math.cos(az - aspect), 0, 1);
}
}
return out;
}
// ---------------------------------------------------------------------------
// three.js scene
// ---------------------------------------------------------------------------
let renderer, scene, camera, orbit, fpControls, mesh, sun, hemi, probeGroup, pathLine;
let mode3d = 'orbit';
let flying = false, flyT = 0, flyCurve = null;
const keys = Object.create(null);
let lastFrame = performance.now(), fps = 0;
function initThree() {
const host = $('pane3d');
renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' });
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
host.appendChild(renderer.domElement);
scene = new THREE.Scene();
scene.background = new THREE.Color(0x0e1116);
camera = new THREE.PerspectiveCamera(58, 1, 0.5, 40000);
hemi = new THREE.HemisphereLight(0xbfd4ff, 0x2a2a28, 0.65);
scene.add(hemi);
sun = new THREE.DirectionalLight(0xfff3e0, 1.15);
sun.castShadow = true;
sun.shadow.mapSize.set(2048, 2048);
scene.add(sun, sun.target);
orbit = new THREE.OrbitControls(camera, renderer.domElement);
orbit.enableDamping = true;
orbit.dampingFactor = 0.08;
orbit.maxPolarAngle = Math.PI * 0.495;
fpControls = new THREE.PointerLockControls(camera, renderer.domElement);
scene.add(fpControls.getObject ? fpControls.getObject() : new THREE.Object3D());
fpControls.addEventListener('unlock', () => { if (mode3d === 'fp') setMode('orbit'); });
probeGroup = new THREE.Group();
scene.add(probeGroup);
addEventListener('keydown', (e) => {
keys[e.code] = true;
if (e.code === 'KeyF' && !e.repeat) setMode(mode3d === 'fp' ? 'orbit' : 'fp');
if (e.code === 'KeyR' && !e.repeat) resetCamera();
});
addEventListener('keyup', (e) => { keys[e.code] = false; });
renderer.domElement.addEventListener('pointerdown', onPick);
addEventListener('resize', resize);
resize();
animate();
}
function resize() {
if (!renderer) return;
const host = $('pane3d');
const w = host.clientWidth, h = host.clientHeight;
if (!w || !h) return;
renderer.setSize(w, h, false);
camera.aspect = w / h;
camera.updateProjectionMatrix();
draw2d();
}
function decimation() {
const budget = +$('quality').value;
let step = 1;
while (Math.ceil(S.H / step) * Math.ceil(S.W / step) > budget) step++;
return step;
}
function build3dColorbar() {
const layer = $('layer').value;
let errLim = 1;
if (layer === 'error' && S.gt) {
for (let i = 0; i < S.height.length; i++) errLim = Math.max(errLim, Math.abs(S.height[i] - S.gt[i]));
errLim = Math.max(errLim * 0.6, 1);
}
drawColorbar('colorbar3d', layer, S.hMin, S.hMax, errLim);
}
function buildMesh() {
// a ~1M-vertex grid blocks the main thread for a noticeable moment; give
// the spinner a frame to paint before the synchronous work below starts
const spinner = $('meshSpinner');
if (spinner) spinner.classList.add('show');
setTimeout(() => _buildMeshNow(), 0);
}
function _buildMeshNow() {
if (mesh) {
mesh.geometry.dispose();
mesh.material.map?.dispose();
mesh.material.dispose();
scene.remove(mesh);
}
const step = decimation();
const gw = Math.floor((S.W - 1) / step) + 1;
const gh = Math.floor((S.H - 1) / step) + 1;
const spacing = S.gsd * step;
// PlaneGeometry is built in XY then rotated to XZ, so (col, row) maps to
// (x, z) with x growing east and z growing south — the same convention
// viz/mesh.py writes, and the same one the UV mapping below assumes.
const geo = new THREE.PlaneGeometry((gw - 1) * spacing, (gh - 1) * spacing, gw - 1, gh - 1);
geo.rotateX(-Math.PI / 2);
const pos = geo.attributes.position;
for (let r = 0; r < gh; r++) {
for (let c = 0; c < gw; c++) {
const sr = Math.min(S.H - 1, r * step), sc = Math.min(S.W - 1, c * step);
pos.setY(r * gw + c, S.height[sr * S.W + sc]);
}
}
pos.needsUpdate = true;
geo.computeVertexNormals();
const tex = new THREE.CanvasTexture(layerCanvas($('layer').value));
tex.encoding = THREE.sRGBEncoding;
tex.anisotropy = renderer.capabilities.getMaxAnisotropy();
const mat = new THREE.MeshStandardMaterial({
map: tex, roughness: 0.95, metalness: 0.0,
wireframe: $('wire').checked, side: THREE.DoubleSide,
});
mesh = new THREE.Mesh(geo, mat);
mesh.receiveShadow = true;
mesh.castShadow = true;
mesh.position.set((gw - 1) * spacing / 2, 0, (gh - 1) * spacing / 2);
scene.add(mesh);
applyExaggeration();
updateSun();
buildFlyPath();
resetCamera();
build3dColorbar();
$('vertCount').textContent = (gw * gh).toLocaleString() + ' verts (1:' + step + ')';
$('meshSpinner')?.classList.remove('show');
}
function applyExaggeration() {
const v = +$('vex').value;
$('vexLabel').textContent = v.toFixed(1) + '×';
if (mesh) mesh.scale.y = v;
redrawProbe();
}
function sceneExtent() {
return { x: S.W * S.gsd, z: S.H * S.gsd };
}
function resetCamera() {
const e = sceneExtent();
const d = Math.max(e.x, e.z);
orbit.target.set(e.x / 2, 0, e.z / 2);
camera.position.set(e.x / 2, d * 0.55, e.z / 2 + d * 0.75);
camera.up.set(0, 1, 0);
orbit.update();
}
function updateSun() {
const az = (+$('sunAz').value * Math.PI) / 180;
const el = (+$('sunEl').value * Math.PI) / 180;
const e = sceneExtent();
const d = Math.max(e.x, e.z) * 1.5;
sun.position.set(
e.x / 2 + d * Math.cos(el) * Math.sin(az),
d * Math.sin(el) + 10,
e.z / 2 + d * Math.cos(el) * Math.cos(az));
sun.target.position.set(e.x / 2, 0, e.z / 2);
sun.target.updateMatrixWorld();
const c = sun.shadow.camera;
c.left = -d; c.right = d; c.top = d; c.bottom = -d; c.near = 1; c.far = d * 4;
c.updateProjectionMatrix();
sun.castShadow = $('shadows').checked;
}
/** A closed cinematic orbit for the demo video, elevated over the scene. */
function buildFlyPath() {
if (pathLine) { scene.remove(pathLine); pathLine.geometry.dispose(); }
const e = sceneExtent();
const cx = e.x / 2, cz = e.z / 2;
const rad = Math.max(e.x, e.z) * 0.42;
const pts = [];
for (let i = 0; i < 24; i++) {
const a = (i / 24) * Math.PI * 2;
const wob = 1 + 0.18 * Math.sin(a * 3);
pts.push(new THREE.Vector3(
cx + rad * wob * Math.cos(a),
(S.hMax * 1.6 + 60) * (0.75 + 0.35 * Math.sin(a * 2)),
cz + rad * wob * Math.sin(a)));
}
flyCurve = new THREE.CatmullRomCurve3(pts, true, 'catmullrom', 0.5);
const geo = new THREE.BufferGeometry().setFromPoints(flyCurve.getPoints(300));
pathLine = new THREE.Line(geo, new THREE.LineBasicMaterial({
color: 0x2d6cdf, transparent: true, opacity: 0.35 }));
pathLine.visible = false;
scene.add(pathLine);
}
function setMode(m) {
mode3d = m;
flying = m === 'fly';
if (pathLine) pathLine.visible = flying;
orbit.enabled = m === 'orbit';
if (m === 'fp') { try { fpControls.lock(); } catch (e) { /* needs a gesture */ } }
else if (fpControls.isLocked) fpControls.unlock();
for (const b of document.querySelectorAll('[data-mode]')) {
const on = b.dataset.mode === m;
b.classList.toggle('on', on);
b.setAttribute('aria-pressed', String(on));
}
$('hint').innerHTML = {
orbit: 'click the scene to focus it, then: drag = orbit · scroll = zoom · ' +
'click = probe · F = first person · R = reset<br>' +
'<span class="dim">touch: one finger = orbit · pinch = zoom · two-finger drag = pan</span>',
fp: 'WASD = move · Shift = sprint · Space/C = up/down · mouse = look · Esc = exit',
fly: 'cinematic drone orbit — press Orbit to take control',
}[m];
}
function animate() {
requestAnimationFrame(animate);
const now = performance.now();
const dt = Math.min(0.1, (now - lastFrame) / 1000);
lastFrame = now;
fps = fps * 0.9 + (1 / Math.max(dt, 1e-4)) * 0.1;
if (mode3d === 'orbit') orbit.update();
else if (mode3d === 'fp' && fpControls.isLocked) {
const base = Math.max(sceneExtent().x, sceneExtent().z) * 0.12;
const sp = base * (keys.ShiftLeft || keys.ShiftRight ? 3 : 1) * dt;
if (keys.KeyW) fpControls.moveForward(sp);
if (keys.KeyS) fpControls.moveForward(-sp);
if (keys.KeyA) fpControls.moveRight(-sp);
if (keys.KeyD) fpControls.moveRight(sp);
if (keys.Space) camera.position.y += sp;
if (keys.KeyC) camera.position.y -= sp;
} else if (flying && flyCurve) {
flyT = (flyT + dt * 0.02) % 1;
camera.position.copy(flyCurve.getPointAt(flyT));
const e = sceneExtent();
camera.lookAt(e.x / 2, S.hMax * 0.3, e.z / 2);
}
if (renderer && mesh) renderer.render(scene, camera);
$('fps').textContent = fps.toFixed(0) + ' fps';
}
// ---------------------------------------------------------------------------
// probing: height read-out, two-point slope, elevation profile
// ---------------------------------------------------------------------------
const ray = new THREE.Raycaster();
function onPick(ev) {
if (!mesh || mode3d === 'fp') return;
const r = renderer.domElement.getBoundingClientRect();
const ndc = new THREE.Vector2(
((ev.clientX - r.left) / r.width) * 2 - 1,
-((ev.clientY - r.top) / r.height) * 2 + 1);
ray.setFromCamera(ndc, camera);
const hit = ray.intersectObject(mesh, false)[0];
if (!hit) return;
const p = hit.point;
const col = clamp(Math.round(p.x / S.gsd), 0, S.W - 1);
const row = clamp(Math.round(p.z / S.gsd), 0, S.H - 1);
addProbe({ row, col });
}
function sampleAt(row, col) {
const i = clamp(row, 0, S.H - 1) * S.W + clamp(col, 0, S.W - 1);
return { h: S.height[i], gt: S.gt ? S.gt[i] : null };
}
function addProbe(p) {
if (!S.probeA || (S.probeA && S.probeB)) { S.probeA = p; S.probeB = null; }
else S.probeB = p;
redrawProbe();
reportProbe();
}
function redrawProbe() {
while (probeGroup.children.length) {
const c = probeGroup.children.pop();
c.geometry?.dispose(); c.material?.dispose();
probeGroup.remove(c);
}
const vex = mesh ? mesh.scale.y : 1;
const marker = (p, color) => {
const s = Math.max(sceneExtent().x, sceneExtent().z) * 0.006;
const m = new THREE.Mesh(
new THREE.SphereGeometry(s, 12, 10),
new THREE.MeshBasicMaterial({ color }));
m.position.set(p.col * S.gsd, sampleAt(p.row, p.col).h * vex, p.row * S.gsd);
probeGroup.add(m);
};
if (S.probeA) marker(S.probeA, 0x2d6cdf);
if (S.probeB) {
marker(S.probeB, 0xe5793a);
const a = new THREE.Vector3(S.probeA.col * S.gsd,
sampleAt(S.probeA.row, S.probeA.col).h * vex, S.probeA.row * S.gsd);
const b = new THREE.Vector3(S.probeB.col * S.gsd,
sampleAt(S.probeB.row, S.probeB.col).h * vex, S.probeB.row * S.gsd);
probeGroup.add(new THREE.Line(
new THREE.BufferGeometry().setFromPoints([a, b]),
new THREE.LineBasicMaterial({ color: 0xffffff })));
}
draw2d();
}
function lonLatAt(row, col) {
const t = S.meta?.scene?.transform; // [a, b, c, d, e, f] affine, if written
if (!Array.isArray(t) || t.length < 6) return null;
return { x: t[0] * col + t[1] * row + t[2], y: t[3] * col + t[4] * row + t[5] };
}
function reportProbe() {
const out = [];
if (S.probeA) {
const a = sampleAt(S.probeA.row, S.probeA.col);
out.push(`<b>A</b> px (${S.probeA.col}, ${S.probeA.row}) · <b>${fmt(a.h)} m</b>` +
(a.gt !== null ? ` · reference ${fmt(a.gt)} m · err ${fmt(a.h - a.gt)} m` : ''));
const ll = lonLatAt(S.probeA.row, S.probeA.col);
if (ll) out.push(` map (${ll.x.toFixed(2)}, ${ll.y.toFixed(2)})`);
}
if (S.probeA && S.probeB) {
const a = sampleAt(S.probeA.row, S.probeA.col), b = sampleAt(S.probeB.row, S.probeB.col);
const dx = (S.probeB.col - S.probeA.col) * S.gsd;
const dz = (S.probeB.row - S.probeA.row) * S.gsd;
const run = Math.hypot(dx, dz), rise = b.h - a.h;
out.push(`<b>B</b> px (${S.probeB.col}, ${S.probeB.row}) · <b>${fmt(b.h)} m</b>`);
out.push(`<b>ground distance</b> ${fmt(run, 1)} m · <b>Δh</b> ${fmt(rise)} m`);
out.push(`<b>slope</b> ${fmt((rise / Math.max(run, 1e-6)) * 100, 1)} % ` +
`(${fmt((Math.atan2(rise, Math.max(run, 1e-6)) * 180) / Math.PI, 1)}°)`);
drawProfile();
} else {
$('profile').getContext('2d').clearRect(0, 0, 999, 999);
}
$('probe').innerHTML = out.join('<br>') ||
'click the terrain to probe a height; click again for slope and a profile';
}
function drawProfile() {
const cv = $('profile'), g = cv.getContext('2d');
const w = cv.width = cv.clientWidth * devicePixelRatio;
const h = cv.height = cv.clientHeight * devicePixelRatio;
g.clearRect(0, 0, w, h);
const n = 220, pred = [], ref = [];
for (let i = 0; i < n; i++) {
const t = i / (n - 1);
const r = Math.round(S.probeA.row + (S.probeB.row - S.probeA.row) * t);
const c = Math.round(S.probeA.col + (S.probeB.col - S.probeA.col) * t);
const s = sampleAt(r, c);
pred.push(s.h);
if (s.gt !== null) ref.push(s.gt);
}
const all = ref.length ? pred.concat(ref) : pred;
const lo = Math.min(...all), hi = Math.max(...all);
const span = Math.max(hi - lo, 1);
const pad = 4 * devicePixelRatio;
const line = (arr, color, width) => {
g.strokeStyle = color; g.lineWidth = width * devicePixelRatio;
g.beginPath();
arr.forEach((v, i) => {
const x = pad + (i / (n - 1)) * (w - 2 * pad);
const y = h - pad - ((v - lo) / span) * (h - 2 * pad);
i ? g.lineTo(x, y) : g.moveTo(x, y);
});
g.stroke();
};
if (ref.length) line(ref, '#8a949e', 1.2);
line(pred, '#2d6cdf', 1.6);
g.fillStyle = '#8a949e';
g.font = `${10 * devicePixelRatio}px system-ui`;
g.textAlign = 'left';
g.fillText(`${hi.toFixed(1)} m`, pad, 11 * devicePixelRatio);
g.fillText(`${lo.toFixed(1)} m`, pad, h - 3 * devicePixelRatio);
const groundDist = Math.hypot(
(S.probeB.col - S.probeA.col) * S.gsd, (S.probeB.row - S.probeA.row) * S.gsd);
g.textAlign = 'right';
g.fillText(`A → B · ${groundDist.toFixed(1)} m ground`, w - pad, 11 * devicePixelRatio);
g.textAlign = 'left';
}
// ---------------------------------------------------------------------------
// 2-D pane
// ---------------------------------------------------------------------------
function draw2d() {
const cv = $('map'), g = cv.getContext('2d');
const host = $('pane2d');
const w = cv.width = Math.max(1, host.clientWidth * devicePixelRatio);
const h = cv.height = Math.max(1, (host.clientHeight - 34) * devicePixelRatio);
g.clearRect(0, 0, w, h);
if (!S.height) return;
const layer2d = $('layer2d').value;
const src = layerCanvas(layer2d);
const sc = Math.min(w / S.W, h / S.H);
const dw = S.W * sc, dh = S.H * sc;
const ox = (w - dw) / 2, oy = (h - dh) / 2;
g.imageSmoothingEnabled = sc > 1.5;
g.drawImage(src, ox, oy, dw, dh);
if ($('contours').checked) drawContours(g, ox, oy, sc);
drawScaleBar(g, w, h, sc);
const errLim = (() => {
if (layer2d !== 'error' || !S.gt) return 1;
let lim = 0;
for (let i = 0; i < S.height.length; i++) lim = Math.max(lim, Math.abs(S.height[i] - S.gt[i]));
return Math.max(lim * 0.6, 1);
})();
drawColorbar('colorbar2d', layer2d, S.hMin, S.hMax, errLim);
// everything below is an overlay on the raster, so clip it to the raster —
// the camera can sit outside the scene and its indicator should not scribble
// across the letterbox
g.save();
g.beginPath();
g.rect(ox, oy, dw, dh);
g.clip();
// camera footprint, so the two panes are visibly the same place
if (camera) {
const px = (camera.position.x / S.gsd) * sc + ox;
const py = (camera.position.z / S.gsd) * sc + oy;
const tx = (orbit.target.x / S.gsd) * sc + ox;
const ty = (orbit.target.z / S.gsd) * sc + oy;
g.strokeStyle = '#ffd166'; g.lineWidth = 1.4 * devicePixelRatio;
g.beginPath(); g.moveTo(px, py); g.lineTo(tx, ty); g.stroke();
g.fillStyle = '#ffd166';
g.beginPath(); g.arc(px, py, 4 * devicePixelRatio, 0, 7); g.fill();
}
const dot = (p, col) => {
if (!p) return;
g.fillStyle = col;
g.beginPath();
g.arc(p.col * sc + ox, p.row * sc + oy, 4 * devicePixelRatio, 0, 7);
g.fill();
};
if (S.probeA && S.probeB) {
g.strokeStyle = '#fff'; g.lineWidth = 1.5 * devicePixelRatio;
g.beginPath();
g.moveTo(S.probeA.col * sc + ox, S.probeA.row * sc + oy);
g.lineTo(S.probeB.col * sc + ox, S.probeB.row * sc + oy);
g.stroke();
}
dot(S.probeA, '#2d6cdf');
dot(S.probeB, '#e5793a');
g.restore();
cv._map = { ox, oy, sc };
}
/** A ground-distance scale bar sized to a round number of metres. */
function drawScaleBar(g, canvasW, canvasH, sc) {
const cv = $('scalebar');
if (!cv || !S.gsd) return;
const host = $('pane2d');
cv.width = host.clientWidth * devicePixelRatio;
cv.height = 34 * devicePixelRatio;
const gg = cv.getContext('2d');
gg.clearRect(0, 0, cv.width, cv.height);
const pxPerMetre = sc / S.gsd;
const maxBarPx = canvasW * 0.28;
const niceSteps = [1, 2, 5, 10, 20, 25, 50, 100, 200, 250, 500, 1000, 2000, 5000];
let metres = niceSteps[0];
for (const step of niceSteps) {
if (step * pxPerMetre <= maxBarPx) metres = step; else break;
}
const barPx = metres * pxPerMetre;
const x0 = 10 * devicePixelRatio, y = cv.height - 12 * devicePixelRatio;
gg.strokeStyle = '#e8ecf1'; gg.lineWidth = 2 * devicePixelRatio;
gg.beginPath();
gg.moveTo(x0, y); gg.lineTo(x0 + barPx, y);
gg.moveTo(x0, y - 5 * devicePixelRatio); gg.lineTo(x0, y + 5 * devicePixelRatio);
gg.moveTo(x0 + barPx, y - 5 * devicePixelRatio); gg.lineTo(x0 + barPx, y + 5 * devicePixelRatio);
gg.stroke();
gg.fillStyle = '#e8ecf1';
gg.font = `${11 * devicePixelRatio}px system-ui`;
gg.textAlign = 'center';
gg.fillText(`${metres} m`, x0 + barPx / 2, y - 8 * devicePixelRatio);
gg.textAlign = 'left';
}
function drawContours(g, ox, oy, sc) {
const step = Math.max(1, Math.round((S.hMax - S.hMin) / 12));
g.strokeStyle = 'rgba(255,255,255,.35)';
g.lineWidth = 1;
// marching-squares-lite: draw a pixel wherever a cell straddles a level
for (let y = 0; y < S.H - 1; y += 1) {
for (let x = 0; x < S.W - 1; x += 1) {
const a = S.height[y * S.W + x], b = S.height[y * S.W + x + 1];
const la = Math.floor(a / step), lb = Math.floor(b / step);
if (la !== lb) g.fillRect(x * sc + ox, y * sc + oy, Math.max(sc, 1), Math.max(sc, 1));
}
}
g.fillStyle = 'rgba(255,255,255,.35)';
}
$('map')?.addEventListener('pointerdown', (ev) => {
const cv = $('map'), m = cv._map;
if (!m || !S.height) return;
const r = cv.getBoundingClientRect();
const x = ((ev.clientX - r.left) * devicePixelRatio - m.ox) / m.sc;
const y = ((ev.clientY - r.top) * devicePixelRatio - m.oy) / m.sc;
if (x < 0 || y < 0 || x >= S.W || y >= S.H) return;
addProbe({ row: Math.round(y), col: Math.round(x) });
});
// ---------------------------------------------------------------------------
// loading
// ---------------------------------------------------------------------------
const _warnSeen = new Set();
const _WARN_MAX = 6;
function warn(msg) {
const el = $('warn');
if (!el || _warnSeen.has(msg)) return;
_warnSeen.add(msg);
el.style.display = 'block';
el.classList.add('show');
const line = document.createElement('div');
line.textContent = msg;
el.appendChild(line);
while (el.children.length > _WARN_MAX) el.removeChild(el.firstChild);
}
function clearWarnings() {
const el = $('warn');
if (!el) return;
el.innerHTML = '';
el.style.display = 'none';
el.classList.remove('show');
_warnSeen.clear();
}
async function loadFromFiles(fileList) {
const files = {};
for (const f of fileList) files[f.name.toLowerCase()] = f;
const read = (name, how) => {
const f = files[name];
if (!f) return null;
return how === 'text' ? f.text() : f.arrayBuffer();
};
const metaTxt = await read('meta.json', 'text');
const meta = metaTxt ? JSON.parse(metaTxt) : {};
let hgt = null;
const npy = await read('ndsm_m.npy', 'buf') || await read('pred_ndsm_m.npy', 'buf');
if (npy) hgt = parseNpy(npy);
else if (files['ndsm16.png'] || files['height16.png']) {
const img = await fileToImage(files['ndsm16.png'] || files['height16.png']);
hgt = decodeHeightFromPng(img, meta);
}
if (!hgt) { warn('no height array found (need ndsm_m.npy or ndsm16.png)'); return; }
let gt = null;
const gtBuf = await read('gt_ndsm_m.npy', 'buf');
if (gtBuf) gt = parseNpy(gtBuf).data;
let rgb = null;
const rgbFile = files['rgb.png'] || files['rgb.jpg'] || files['texture.png'];
if (rgbFile) rgb = imageToCanvas(await fileToImage(rgbFile));
adopt({ hgt, gt, rgb, meta });
}
function srcToImage(src) {
return new Promise((res, rej) => {
const img = new Image();
img.onload = () => res(img);
img.onerror = () => rej(new Error('image failed to decode'));
img.src = src;
});
}
function fileToImage(file) {
return srcToImage(URL.createObjectURL(file));
}
function imageToCanvas(img) {
const c = document.createElement('canvas');
c.width = img.width; c.height = img.height;
c.getContext('2d').drawImage(img, 0, 0);
return c;
}
async function loadFromUrl(base) {
base = base.replace(/\/+$/, '') + '/';
const meta = await fetch(base + 'meta.json').then((r) => r.json());
const hgt = parseNpy(await fetch(base + 'ndsm_m.npy').then((r) => r.arrayBuffer()));
let gt = null;
try {
gt = parseNpy(await fetch(base + 'gt_ndsm_m.npy').then((r) => {
if (!r.ok) throw new Error('no reference');
return r.arrayBuffer();
})).data;
} catch (e) { /* optional */ }
let rgb = null;
try {
const img = new Image();
img.src = base + 'rgb.png';
await img.decode();
rgb = imageToCanvas(img);
} catch (e) { /* optional */ }
adopt({ hgt, gt, rgb, meta });
}
/** The prediction the host inlined into this page, if there is one.
*
* Two shapes are accepted: a `window.DW_EMBED` object assigned by an inline
* script, or — what the Gradio Space actually sends — a
* `<script type="application/json" id="dw-embed">` element, which needs no JS
* string quoting and so cannot be broken by a quote inside the metadata.
*/
function embeddedPayload() {
if (window.DW_EMBED) return window.DW_EMBED;
const el = document.getElementById('dw-embed');
const txt = el && el.textContent.trim();
if (!txt) return null;
try {
return JSON.parse(txt);
} catch (e) {
warn('embedded payload is not valid JSON: ' + e.message);
return null;
}
}
/** A single prediction inlined into the page by the Gradio Space. */
async function loadFromEmbed(p) {
const meta = p.meta || {};
const lo = +(meta.height_min_m ?? 0), hi = +(meta.height_max_m ?? 1);
const hgt = decodeHeightRG16(await srcToImage(p.height), lo, Math.max(hi, lo + 1e-3));
let gt = null;
if (p.reference) {
const rlo = +(meta.reference_min_m ?? lo), rhi = +(meta.reference_max_m ?? hi);
gt = decodeHeightRG16(await srcToImage(p.reference), rlo,
Math.max(rhi, rlo + 1e-3)).data;
}
const rgb = p.rgb ? imageToCanvas(await srcToImage(p.rgb)) : null;
adopt({ hgt, gt, rgb, meta });
}
function adopt({ hgt, gt, rgb, meta }) {
if (!hgt || !hgt.data || !hgt.shape || hgt.shape.length < 2) {
warn('no usable height array — nothing to render');
return;
}
clearWarnings();
S.H = hgt.shape[0]; S.W = hgt.shape[1];
S.height = hgt.data;
S.gt = gt && gt.length === S.height.length ? gt : null;
if (gt && !S.gt) warn('reference array shape differs from the prediction — ignored');
S.meta = meta || {};
S.gsd = +(meta.scene?.gsd_m ?? meta.gsd_m ?? 0.5);
if (rgb && (rgb.width !== S.W || rgb.height !== S.H)) {
const c = document.createElement('canvas');
c.width = S.W; c.height = S.H;
c.getContext('2d').drawImage(rgb, 0, 0, S.W, S.H);
rgb = c;
}
S.rgb = rgb;
const st = statsOf(S.height);
S.hMin = 0;
S.hMax = Math.max(st.max, 1);
S.probeA = S.probeB = null;
$('layer').querySelector('[value=rgb]').disabled = !rgb;
for (const sel of ['layer', 'layer2d']) {
const o = $(sel).querySelector('[value=error]');
const o2 = $(sel).querySelector('[value=reference]');
o.disabled = o2.disabled = !S.gt;
}
if (!rgb && $('layer').value === 'rgb') $('layer').value = 'height';
const frac = S.height.reduce((a, v) => a + (v < 1 ? 1 : 0), 0) / S.height.length;
$('info').innerHTML =
`<b>${S.W} × ${S.H}</b> px @ <b>${S.gsd.toFixed(3)} m</b>/px ` +
`(${(S.W * S.gsd).toFixed(0)} × ${(S.H * S.gsd).toFixed(0)} m)<br>` +
`height ${fmt(st.min)} … ${fmt(st.max)} m · mean ${fmt(st.mean)} m<br>` +
`${(frac * 100).toFixed(1)} % of pixels below 1 m` +
(meta.product ? `<br>product <b>${meta.product}</b>` : '') +
(meta.scene?.georeferenced ? ' · georeferenced' : ' · no spatial metadata');
if (frac < 0.15) {
warn(`only ${(frac * 100).toFixed(1)} % of this scene is below 1 m. A nadir ` +
`urban scene is normally 40-70 %. The model may be reading texture as ` +
`terrain on this imagery — check the declared GSD.`);
}
const cmp = compareToReference();
$('metrics').innerHTML = cmp
? `<table><tr><td>RMSE</td><td><b>${fmt(cmp.rmse)} m</b></td></tr>` +
`<tr><td>MAE</td><td>${fmt(cmp.mae)} m</td></tr>` +
`<tr><td>bias</td><td>${fmt(cmp.bias)} m</td></tr>` +
`<tr><td>Pearson r</td><td>${fmt(cmp.r, 3)}</td></tr>` +
`<tr><td>pixels</td><td>${cmp.n.toLocaleString()}</td></tr></table>`
: '<span class="dim">load <code>gt_ndsm_m.npy</code> alongside to validate ' +
'against a reference surface</span>';
buildMesh();
setMode('orbit');
reportProbe();
draw2d();
}
function refreshTexture() {
if (!mesh) return;
mesh.material.map?.dispose();
const t = new THREE.CanvasTexture(layerCanvas($('layer').value));
t.encoding = THREE.sRGBEncoding;
t.anisotropy = renderer.capabilities.getMaxAnisotropy();
mesh.material.map = t;
mesh.material.wireframe = $('wire').checked;
mesh.material.needsUpdate = true;
build3dColorbar();
}
// ---------------------------------------------------------------------------
// wiring
// ---------------------------------------------------------------------------
function boot() {
initThree();
$('files').addEventListener('change', (e) => loadFromFiles(e.target.files));
$('vex').addEventListener('input', applyExaggeration);
$('quality').addEventListener('change', () => S.height && buildMesh());
$('layer').addEventListener('change', refreshTexture);
$('layer2d').addEventListener('change', draw2d);
$('contours').addEventListener('change', draw2d);
$('wire').addEventListener('change', refreshTexture);
for (const id of ['sunAz', 'sunEl']) {
$(id).addEventListener('input', () => {
updateSun();
if ($('layer').value === 'hillshade') refreshTexture();
if ($('layer2d').value === 'hillshade') draw2d();
});
}
$('shadows').addEventListener('change', updateSun);
for (const b of document.querySelectorAll('[data-mode]')) {
b.addEventListener('click', () => setMode(b.dataset.mode));
}
$('reset').addEventListener('click', resetCamera);
$('clearProbe').addEventListener('click', () => {
S.probeA = S.probeB = null; redrawProbe(); reportProbe();
});
$('split').addEventListener('click', () => {
document.body.classList.toggle('only3d');
setTimeout(resize, 60);
});
// the host page's 760px-tall iframe is cramped on a laptop; `allowfullscreen`
// is granted on it precisely so this can hand the whole screen to the scene
$('fullscreen')?.addEventListener('click', () => {
if (document.fullscreenElement) document.exitFullscreen();
else document.documentElement.requestFullscreen().catch(() => {
warn('fullscreen was blocked by the browser');
});
});
document.addEventListener('fullscreenchange', () => {
const btn = $('fullscreen');
if (btn) btn.textContent = document.fullscreenElement ? 'Exit fullscreen' : 'Fullscreen';
setTimeout(resize, 60);
});
$('warnDismiss')?.addEventListener('click', clearWarnings);
$('collapseAside')?.addEventListener('click', () => {
document.body.classList.toggle('collapsed');
$('collapseAside').textContent = document.body.classList.contains('collapsed') ? '▸' : '◂';
setTimeout(resize, 60);
});
setMode('orbit');
const embed = embeddedPayload();
if (embed) {
// the host already ran the model; there is nothing for the user to pick
document.body.classList.add('embedded');
loadFromEmbed(embed).catch((e) => warn('load failed: ' + e.message));
return;
}
const q = new URLSearchParams(location.search);
if (q.get('result')) {
loadFromUrl(q.get('result')).catch((e) => warn('load failed: ' + e.message));
}
}
document.addEventListener('DOMContentLoaded', boot);
/* DepthWizard v4 viewer — dual-pane DSM inspector + 3D flythrough.
*
* Loads a prediction directory written by `infer/predict.py`:
*
* ndsm_m.npy float32 (H, W), metres above ground <- preferred, exact
* ndsm16.png 16-bit fallback + the affine in meta.json
* rgb.png the optical image that produced it
* meta.json the contract, the scene metadata, the diagnostics
* gt_ndsm_m.npy (optional) reference surface -> live metrics + error layer
*
* The .npy path exists because a 16-bit PNG drawn into a 2-D canvas is
* down-converted to 8 bits by the browser, which would quantise a 0-60 m range
* into 0.23 m steps before anything is rendered. Metres are the product here,
* so the viewer reads the float array directly and only falls back to the PNG.
*
* No build step, no bundler, no network: three.js r128 is vendored beside this
* file, so `index.html` opened from a USB stick works exactly like the served
* copy. That is the "standalone deployment" half of the rubric.
*
* Three ways in, all landing on the same `adopt()`:
*
* file picker -> loadFromFiles() a prediction directory off disk
* ?result=<base> -> loadFromUrl() a served prediction directory
* window.DW_EMBED -> loadFromEmbed() a single prediction inlined into the
* page, which is how the Gradio Space
* hands its result to the iframe
*
* The embedded path cannot ship a .npy through an `srcdoc` iframe without
* base64-ing tens of megabytes, so it carries heights as a 16-bit value split
* across the red and green channels of an 8-bit PNG: `(R*256+G)/65535` over a
* stated [min, max] range. A 2-D canvas read returns those two channels
* byte-exactly, so the decode is lossless to ~1e-5 of the range (sub-millimetre
* on any real scene) rather than the 8-bit 0.23 m steps a plain grey ramp gives.
*/
;
// ---------------------------------------------------------------------------
// small utilities
// ---------------------------------------------------------------------------
const $ = (id) => document.getElementById(id);
const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
const fmt = (v, n = 2) => (v === null || v === undefined || !isFinite(v) ? '—' : v.toFixed(n));
/** Minimal NumPy .npy v1/v2 reader — enough for a 2-D float or int array. */
function parseNpy(buffer) {
const b = new Uint8Array(buffer);
const magic = String.fromCharCode(...b.slice(1, 6));
if (magic !== 'NUMPY') throw new Error('not a .npy file');
const major = b[6];
const hlenBytes = major === 1 ? 2 : 4;
const dv = new DataView(buffer);
const hlen = major === 1 ? dv.getUint16(8, true) : dv.getUint32(8, true);
const start = 8 + hlenBytes;
const header = new TextDecoder().decode(b.slice(start, start + hlen));
const descr = /'descr':\s*'([^']+)'/.exec(header)[1];
const fortran = /'fortran_order':\s*(True|False)/.exec(header)[1] === 'True';
const shape = /'shape':\s*\(([^)]*)\)/.exec(header)[1]
.split(',').map((s) => s.trim()).filter(Boolean).map(Number);
if (fortran) throw new Error('fortran-order .npy is not supported');
const off = start + hlen;
const n = shape.reduce((a, c) => a * c, 1);
const kind = descr.replace(/^[<>|=]/, '');
let data;
if (kind === 'f4') data = new Float32Array(buffer, off, n);
else if (kind === 'f8') data = Float32Array.from(new Float64Array(buffer, off, n));
else if (kind === 'u1') data = Float32Array.from(new Uint8Array(buffer, off, n));
else if (kind === 'i2') data = Float32Array.from(new Int16Array(buffer, off, n));
else if (kind === 'i4') data = Float32Array.from(new Int32Array(buffer, off, n));
else throw new Error('unsupported dtype ' + descr);
return { data, shape };
}
/* Turbo colormap, 9-stop piecewise linear. Perceptually ordered and, unlike
* jet, monotone in luminance — so a printed report still reads correctly. */
const TURBO = [
[48, 18, 59], [70, 107, 227], [40, 187, 226], [61, 231, 154],
[163, 244, 78], [231, 215, 53], [253, 152, 39], [232, 79, 13], [122, 4, 3],
];
function turbo(t) {
t = clamp(t, 0, 1) * (TURBO.length - 1);
const i = Math.min(TURBO.length - 2, Math.floor(t));
const f = t - i, a = TURBO[i], b = TURBO[i + 1];
return [a[0] + (b[0] - a[0]) * f, a[1] + (b[1] - a[1]) * f, a[2] + (b[2] - a[2]) * f];
}
/* Diverging blue-white-red, for signed error. */
function diverging(t) {
const x = clamp(t, -1, 1);
return x < 0
? [255 * (1 + x * 0.85), 255 * (1 + x * 0.55), 255]
: [255, 255 * (1 - x * 0.55), 255 * (1 - x * 0.85)];
}
/** Draw a vertical colour scale into `wrap`'s canvas, or hide it for layers
* that carry no scalar scale (optical RGB). `lo`/`hi` are in metres for the
* turbo ramp, or a signed +/-limit in metres for the diverging error ramp. */
function drawColorbar(wrapId, mode, lo, hi, errLim) {
const wrap = $(wrapId);
if (!wrap) return;
const cv = wrap.querySelector('canvas');
if (mode !== 'height' && mode !== 'reference' && mode !== 'error') {