signalk-livedepth-plugin 0.2.0 → 0.3.0

package/public/js/render-worker.js

@@ -0,0 +1,706 @@
+// src/web/shared/bathymetry.ts
+var DEFAULT_COVERAGE_CELLS = 2;
+var DEFAULT_COVERAGE_MIN_M = 2;
+var DEFAULT_IDW_POWER = 2;
+var DEFAULT_SHALLOW_BIAS = 0.5;
+var DEFAULT_MAX_CELLS = 1024;
+var EARTH_RADIUS = 6378137;
+var MERCATOR_MAX_LAT = 85.05112878;
+var RAD = Math.PI / 180;
+var mercX = (lon) => lon * RAD * EARTH_RADIUS;
+var mercY = (lat) => EARTH_RADIUS * Math.log(
+  Math.tan(
+    Math.PI / 4 + Math.max(-MERCATOR_MAX_LAT, Math.min(MERCATOR_MAX_LAT, lat)) * RAD / 2
+  )
+);
+function medianConsecutiveGap(samples2) {
+  if (samples2.length < 2) {
+    return 0;
+  }
+  const gaps = [];
+  for (let i = 1; i < samples2.length; i++) {
+    const ax = mercX(samples2[i - 1].lon);
+    const ay = mercY(samples2[i - 1].lat);
+    gaps.push(
+      Math.hypot(mercX(samples2[i].lon) - ax, mercY(samples2[i].lat) - ay)
+    );
+  }
+  gaps.sort((a, b) => a - b);
+  return gaps[Math.floor(gaps.length / 2)];
+}
+function buildDepthField(samples2, extent, options) {
+  const cellMetres = options.cellMetres;
+  if (!(cellMetres > 0) || extent.length !== 4 || !extent.every((v) => Number.isFinite(v)) || extent[2] <= extent[0] || extent[3] <= extent[1]) {
+    return null;
+  }
+  const power = options.power ?? DEFAULT_IDW_POWER;
+  const shallowBias = Math.max(
+    0,
+    Math.min(1, options.shallowBias ?? DEFAULT_SHALLOW_BIAS)
+  );
+  const maxCells = options.maxCells ?? DEFAULT_MAX_CELLS;
+  const width = Math.min(
+    maxCells,
+    Math.ceil((extent[2] - extent[0]) / cellMetres)
+  );
+  const height = Math.min(
+    maxCells,
+    Math.ceil((extent[3] - extent[1]) / cellMetres)
+  );
+  if (width <= 0 || height <= 0) {
+    return null;
+  }
+  const minX = extent[0];
+  const minY = extent[1];
+  const gridExtent = [
+    minX,
+    minY,
+    minX + width * cellMetres,
+    minY + height * cellMetres
+  ];
+  const depth = new Float32Array(width * height).fill(NaN);
+  const wsum = new Float32Array(width * height);
+  const wdsum = new Float32Array(width * height);
+  const minSeen = new Float32Array(width * height).fill(Infinity);
+  const coverageRadius = Math.max(
+    cellMetres,
+    options.coverageMinMetres ?? DEFAULT_COVERAGE_MIN_M,
+    options.coverageMetres ?? (options.coverageCells ?? DEFAULT_COVERAGE_CELLS) * cellMetres
+  );
+  const coverage2 = coverageRadius * coverageRadius;
+  const radiusCells = Math.min(64, Math.ceil(coverageRadius / cellMetres));
+  for (const s of samples2) {
+    if (!Number.isFinite(s.lon) || !Number.isFinite(s.lat) || !Number.isFinite(s.depth) || s.depth < 0) {
+      continue;
+    }
+    const sx = mercX(s.lon);
+    const sy = mercY(s.lat);
+    const cx = Math.floor((sx - minX) / cellMetres);
+    const cy = Math.floor((sy - minY) / cellMetres);
+    for (let dy = -radiusCells; dy <= radiusCells; dy++) {
+      const gy = cy + dy;
+      if (gy < 0 || gy >= height) {
+        continue;
+      }
+      const cellCenterY = minY + (gy + 0.5) * cellMetres;
+      const ddy = cellCenterY - sy;
+      for (let dx = -radiusCells; dx <= radiusCells; dx++) {
+        const gx = cx + dx;
+        if (gx < 0 || gx >= width) {
+          continue;
+        }
+        const cellCenterX = minX + (gx + 0.5) * cellMetres;
+        const ddx = cellCenterX - sx;
+        const dist2 = ddx * ddx + ddy * ddy;
+        if (dist2 > coverage2) {
+          continue;
+        }
+        const idx = gy * width + gx;
+        const w = 1 / (Math.pow(dist2, power / 2) + 1e-6);
+        wsum[idx] += w;
+        wdsum[idx] += w * s.depth;
+        if (s.depth < minSeen[idx]) {
+          minSeen[idx] = s.depth;
+        }
+      }
+    }
+  }
+  for (let i = 0; i < depth.length; i++) {
+    const w = wsum[i];
+    if (w <= 0) {
+      continue;
+    }
+    const idw = wdsum[i] / w;
+    const shallowest = minSeen[i];
+    depth[i] = (1 - shallowBias) * idw + shallowBias * Math.min(idw, shallowest);
+  }
+  return { width, height, extent: gridExtent, depth };
+}
+
+// src/web/shared/shaders.ts
+var DEPTH_VERT_SRC = `#version 300 es
+in vec2 aPos;
+out vec2 vUv;
+void main() { vUv = aPos * 0.5 + 0.5; gl_Position = vec4(aPos, 0.0, 1.0); }`;
+var DEPTH_FRAG_SRC = `#version 300 es
+precision highp float;
+in vec2 vUv;
+out vec4 fragColor;
+uniform sampler2D uDepth;
+uniform sampler2D uLut;
+uniform vec2 uTexel;        // 1 / field size in texels
+uniform vec4 uView;         // viewport: origin.xy, size.xy (metres)
+uniform vec4 uField;        // field:    origin.xy, size.xy (metres)
+uniform float uShadeLimit;
+uniform int uLevels;
+uniform float uInterval;
+uniform float uLineWidth;
+bool uncov(float v) { return v < 0.0; } // -1: no coverage
+float sampleDepth(vec2 uv) {
+  vec2 fc = uv / uTexel - 0.5;
+  vec2 f = fract(fc);
+  vec2 b = (floor(fc) + 0.5) * uTexel;
+  float d00 = texture(uDepth, b).r;
+  float d10 = texture(uDepth, b + vec2(uTexel.x, 0.0)).r;
+  float d01 = texture(uDepth, b + vec2(0.0, uTexel.y)).r;
+  float d11 = texture(uDepth, b + uTexel).r;
+  if (uncov(d00) || uncov(d10) || uncov(d01) || uncov(d11)) {
+    return texture(uDepth, uv).r; // near an edge/gap: no interpolation
+  }
+  return mix(mix(d00, d10, f.x), mix(d01, d11, f.x), f.y);
+}
+void main() {
+  // viewport pixel -> world metres -> field uv
+  vec2 world = uView.xy + vUv * uView.zw;
+  vec2 fuv = (world - uField.xy) / uField.zw;
+  if (fuv.x < 0.0 || fuv.x > 1.0 || fuv.y < 0.0 || fuv.y > 1.0) { discard; }
+  float d = sampleDepth(fuv);
+  if (uncov(d)) { discard; }
+  // Shading bands, only up to the shade limit; deeper water is left to the chart.
+  bool shaded = d < uShadeLimit;
+  vec3 fill = vec3(0.0);
+  if (shaded) {
+    float bandF = d / uShadeLimit * float(uLevels);
+    float band = floor(bandF);
+    float tCenter = (band + 0.5) / float(uLevels);
+    fill = texture(uLut, vec2(clamp(tCenter, 0.0, 1.0), 0.5)).rgb;
+  }
+  // Isobars at every absolute multiple of the interval, over ALL data.
+  float ci = d / uInterval;
+  float dv = min(fract(ci), 1.0 - fract(ci));
+  float px = dv / max(fwidth(ci), 1e-6);
+  float line = 1.0 - smoothstep(uLineWidth, uLineWidth + 1.5, px);
+  vec3 col = mix(fill, vec3(0.0), line);
+  float alpha = max(line, shaded ? 1.0 : 0.0);
+  fragColor = vec4(col, alpha);
+}`;
+
+// src/web/shared/live-depth.ts
+var DEFAULT_SHADE_LIMIT_M = 10;
+var EARTH_RADIUS2 = 6378137;
+var MERCATOR_MAX_LAT2 = 85.05112878;
+var RAD2 = Math.PI / 180;
+function mercX2(lon) {
+  return lon * RAD2 * EARTH_RADIUS2;
+}
+function mercY2(lat) {
+  const c = Math.max(-MERCATOR_MAX_LAT2, Math.min(MERCATOR_MAX_LAT2, lat));
+  return EARTH_RADIUS2 * Math.log(Math.tan(Math.PI / 4 + c * RAD2 / 2));
+}
+function lonOf(x) {
+  return x / (RAD2 * EARTH_RADIUS2);
+}
+function latOf(y) {
+  return (2 * Math.atan(Math.exp(y / EARTH_RADIUS2)) - Math.PI / 2) / RAD2;
+}
+var SHADE_RAMP = [
+  [0, 26, 132, 216],
+  [0.3, 96, 178, 232],
+  [0.55, 156, 209, 240],
+  [0.78, 205, 232, 248],
+  [1, 255, 255, 255]
+];
+var SHADE_CONTOUR_LEVELS = 6;
+function shadeColor(t) {
+  const c = Math.min(1, Math.max(0, Number.isFinite(t) ? t : 0));
+  let lo = SHADE_RAMP[0];
+  let hi = SHADE_RAMP[SHADE_RAMP.length - 1];
+  for (let i = 0; i < SHADE_RAMP.length - 1; i++) {
+    if (c >= SHADE_RAMP[i][0] && c <= SHADE_RAMP[i + 1][0]) {
+      lo = SHADE_RAMP[i];
+      hi = SHADE_RAMP[i + 1];
+      break;
+    }
+  }
+  const span = hi[0] - lo[0];
+  const f = span > 0 ? (c - lo[0]) / span : 0;
+  const lerp = (a, b) => Math.round(a + (b - a) * f);
+  return [lerp(lo[1], hi[1]), lerp(lo[2], hi[2]), lerp(lo[3], hi[3])];
+}
+function depthColor(depth, shadeLimit) {
+  const limit = shadeLimit > 0 ? shadeLimit : DEFAULT_SHADE_LIMIT_M;
+  return shadeColor(depth / limit);
+}
+function depthCss(depth, shadeLimit, alpha = 1) {
+  const [r, g, b] = depthColor(depth, shadeLimit);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+function aggregateMinDepth(samples2, cellSizeMetres, maxDepthMetres = Infinity) {
+  if (!(cellSizeMetres > 0)) {
+    return [];
+  }
+  const cells = /* @__PURE__ */ new Map();
+  for (const s of samples2) {
+    if (!Number.isFinite(s.lon) || !Number.isFinite(s.lat) || !Number.isFinite(s.depth) || s.depth < 0 || s.depth > maxDepthMetres) {
+      continue;
+    }
+    const x = mercX2(s.lon);
+    const y = mercY2(s.lat);
+    const ix = Math.floor(x / cellSizeMetres);
+    const iy = Math.floor(y / cellSizeMetres);
+    const key = `${ix},${iy}`;
+    const c = cells.get(key);
+    if (c) {
+      c.sx += x;
+      c.sy += y;
+      c.n++;
+      if (s.depth < c.depth) {
+        c.depth = s.depth;
+      }
+    } else {
+      cells.set(key, { ix, iy, sx: x, sy: y, n: 1, depth: s.depth });
+    }
+  }
+  const out = [];
+  cells.forEach((c) => {
+    out.push({
+      ix: c.ix,
+      iy: c.iy,
+      lon: lonOf(c.sx / c.n),
+      lat: latOf(c.sy / c.n),
+      depth: c.depth,
+      count: c.n
+    });
+  });
+  return out;
+}
+function orderDeepToShallow(cells) {
+  return [...cells].sort((a, b) => b.depth - a.depth);
+}
+function selectShoals(samples2, safetyDepthMetres) {
+  return samples2.filter(
+    (s) => Number.isFinite(s.depth) && s.depth >= 0 && s.depth <= safetyDepthMetres
+  );
+}
+var DEFAULT_MERGE_TOLERANCE = 0.15;
+var MERGE_MAX_RADIUS_CELLS = 2.5;
+function mergeDepthCells(cells, cellSizeMetres, toleranceOrMaxRadius = DEFAULT_MERGE_TOLERANCE, maxRadiusCells = MERGE_MAX_RADIUS_CELLS) {
+  if (cells.length === 0 || !(cellSizeMetres > 0)) {
+    return [];
+  }
+  const tolerance = Math.max(0, toleranceOrMaxRadius);
+  const maxRadius = Math.max(cellSizeMetres, maxRadiusCells * cellSizeMetres);
+  const byKey = /* @__PURE__ */ new Map();
+  cells.forEach((c) => byKey.set(`${c.ix},${c.iy}`, c));
+  const visited = /* @__PURE__ */ new Set();
+  const ordered = [...cells].sort((a, b) => a.depth - b.depth);
+  const neighbours = [
+    [1, 0],
+    [-1, 0],
+    [0, 1],
+    [0, -1],
+    [1, 1],
+    [1, -1],
+    [-1, 1],
+    [-1, -1]
+  ];
+  const clusters = [];
+  for (const start of ordered) {
+    if (visited.has(`${start.ix},${start.iy}`)) {
+      continue;
+    }
+    const anchor = start.depth;
+    const ax = mercX2(start.lon);
+    const ay = mercY2(start.lat);
+    const members = [];
+    const queue = [start];
+    visited.add(`${start.ix},${start.iy}`);
+    while (queue.length) {
+      const cell = queue.pop();
+      if (!cell) {
+        continue;
+      }
+      members.push(cell);
+      for (const [dx, dy] of neighbours) {
+        const key = `${cell.ix + dx},${cell.iy + dy}`;
+        const nb = byKey.get(key);
+        if (!nb || visited.has(key)) {
+          continue;
+        }
+        if (nb.depth - anchor > Math.max(tolerance * anchor, 0.1)) {
+          continue;
+        }
+        if (Math.hypot(mercX2(nb.lon) - ax, mercY2(nb.lat) - ay) > maxRadius) {
+          continue;
+        }
+        visited.add(key);
+        queue.push(nb);
+      }
+    }
+    let cx = 0;
+    let cy = 0;
+    let total = 0;
+    let minDepth = Infinity;
+    members.forEach((m) => {
+      cx += mercX2(m.lon) * m.count;
+      cy += mercY2(m.lat) * m.count;
+      total += m.count;
+      if (m.depth < minDepth) {
+        minDepth = m.depth;
+      }
+    });
+    cx /= total;
+    cy /= total;
+    let radius = 0;
+    members.forEach((m) => {
+      radius = Math.max(
+        radius,
+        Math.hypot(mercX2(m.lon) - cx, mercY2(m.lat) - cy)
+      );
+    });
+    clusters.push({
+      lon: lonOf(cx),
+      lat: latOf(cy),
+      depth: minDepth,
+      count: total,
+      radiusMetres: Math.min(maxRadius, radius + cellSizeMetres / 2)
+    });
+  }
+  return clusters;
+}
+function depthClusters(samples2, cellSizeMetres, tolerance = DEFAULT_MERGE_TOLERANCE, maxDepthMetres = Infinity, maxRadiusCells = MERGE_MAX_RADIUS_CELLS) {
+  return orderDeepToShallow(
+    mergeDepthCells(
+      aggregateMinDepth(samples2, cellSizeMetres, maxDepthMetres),
+      cellSizeMetres,
+      tolerance,
+      maxRadiusCells
+    )
+  );
+}
+
+// src/web/render-worker.ts
+var MAX_FIELD_CELLS = 1024;
+var LABEL_FONT_MIN = 12;
+var LABEL_FONT_MAX = 20;
+var LABEL_MIN_RADIUS_PX = 8;
+var ORIGIN_SHIFT = Math.PI * 6378137;
+var WORLD_WIDTH = 2 * ORIGIN_SHIFT;
+var samples = [];
+var settings = null;
+var field = null;
+var fieldDirty = true;
+var depthUnit = "m";
+function formatDepth(metres) {
+  return depthUnit === "foot" ? (metres / 0.3048).toFixed(0) : metres.toFixed(1);
+}
+var glCanvas = null;
+var gl = null;
+var program = null;
+var quad = null;
+var depthTexture = null;
+var lutTexture = null;
+var aPos = 0;
+var uDepth = null;
+var uLut = null;
+var uTexel = null;
+var uView = null;
+var uField = null;
+var uShadeLimit = null;
+var uLevels = null;
+var uInterval = null;
+var uLineWidth = null;
+function compile(ctx, type, src) {
+  const shader = ctx.createShader(type);
+  if (!shader) return null;
+  ctx.shaderSource(shader, src);
+  ctx.compileShader(shader);
+  if (!ctx.getShaderParameter(shader, ctx.COMPILE_STATUS)) {
+    ctx.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+function initWebgl() {
+  if (gl) return true;
+  glCanvas = new OffscreenCanvas(1, 1);
+  const ctx = glCanvas.getContext("webgl2", {
+    alpha: true,
+    premultipliedAlpha: true
+  });
+  if (!ctx) return false;
+  const vs = compile(ctx, ctx.VERTEX_SHADER, DEPTH_VERT_SRC);
+  const fs = compile(ctx, ctx.FRAGMENT_SHADER, DEPTH_FRAG_SRC);
+  const prog = ctx.createProgram();
+  if (!vs || !fs || !prog) return false;
+  ctx.attachShader(prog, vs);
+  ctx.attachShader(prog, fs);
+  ctx.linkProgram(prog);
+  if (!ctx.getProgramParameter(prog, ctx.LINK_STATUS)) return false;
+  gl = ctx;
+  program = prog;
+  aPos = ctx.getAttribLocation(prog, "aPos");
+  uDepth = ctx.getUniformLocation(prog, "uDepth");
+  uLut = ctx.getUniformLocation(prog, "uLut");
+  uTexel = ctx.getUniformLocation(prog, "uTexel");
+  uView = ctx.getUniformLocation(prog, "uView");
+  uField = ctx.getUniformLocation(prog, "uField");
+  uShadeLimit = ctx.getUniformLocation(prog, "uShadeLimit");
+  uLevels = ctx.getUniformLocation(prog, "uLevels");
+  uInterval = ctx.getUniformLocation(prog, "uInterval");
+  uLineWidth = ctx.getUniformLocation(prog, "uLineWidth");
+  quad = ctx.createBuffer();
+  ctx.bindBuffer(ctx.ARRAY_BUFFER, quad);
+  ctx.bufferData(
+    ctx.ARRAY_BUFFER,
+    new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
+    ctx.STATIC_DRAW
+  );
+  depthTexture = ctx.createTexture();
+  ctx.bindTexture(ctx.TEXTURE_2D, depthTexture);
+  ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.NEAREST);
+  ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.NEAREST);
+  ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
+  ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
+  lutTexture = ctx.createTexture();
+  const lut = new Uint8Array(256 * 4);
+  for (let i = 0; i < 256; i++) {
+    const [r, g, b] = shadeColor(i / 255);
+    lut[i * 4] = r;
+    lut[i * 4 + 1] = g;
+    lut[i * 4 + 2] = b;
+    lut[i * 4 + 3] = 255;
+  }
+  ctx.bindTexture(ctx.TEXTURE_2D, lutTexture);
+  ctx.texImage2D(
+    ctx.TEXTURE_2D,
+    0,
+    ctx.RGBA,
+    256,
+    1,
+    0,
+    ctx.RGBA,
+    ctx.UNSIGNED_BYTE,
+    lut
+  );
+  ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR);
+  ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR);
+  ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
+  ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
+  return true;
+}
+function releaseGpu() {
+  if (gl) {
+    gl.getExtension("WEBGL_lose_context")?.loseContext();
+  }
+  gl = null;
+  program = null;
+  quad = null;
+  depthTexture = null;
+  lutTexture = null;
+  glCanvas = null;
+}
+function uploadField(f) {
+  if (!gl || !depthTexture) return;
+  const gpu = new Float32Array(f.depth.length);
+  for (let i = 0; i < f.depth.length; i++) {
+    const d = f.depth[i];
+    gpu[i] = Number.isNaN(d) ? -1 : d;
+  }
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, depthTexture);
+  gl.texImage2D(
+    gl.TEXTURE_2D,
+    0,
+    gl.R32F,
+    f.width,
+    f.height,
+    0,
+    gl.RED,
+    gl.FLOAT,
+    gpu
+  );
+}
+function buildField() {
+  field = null;
+  if (samples.length === 0 || !settings) return;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const s of samples) {
+    const x = mercX2(s.lon);
+    const y = mercY2(s.lat);
+    minX = Math.min(minX, x);
+    maxX = Math.max(maxX, x);
+    minY = Math.min(minY, y);
+    maxY = Math.max(maxY, y);
+  }
+  const padX = (maxX - minX) * 0.1 + 1;
+  const padY = (maxY - minY) * 0.1 + 1;
+  const extent = [
+    minX - padX,
+    minY - padY,
+    maxX + padX,
+    maxY + padY
+  ];
+  const extMax = Math.max(extent[2] - extent[0], extent[3] - extent[1]);
+  const tiles = settings.source === "tiles";
+  const gap = tiles ? 0 : medianConsecutiveGap(samples);
+  const minCover = tiles ? 0 : DEFAULT_COVERAGE_MIN_M;
+  const cell = Math.max(gap, extMax / MAX_FIELD_CELLS, minCover / 8, 0.01);
+  const built = buildDepthField(samples, extent, {
+    cellMetres: cell,
+    coverageMetres: Math.max(cell * 1.5, gap * 1.5),
+    coverageMinMetres: minCover
+  });
+  if (!built) return;
+  field = built;
+  uploadField(built);
+}
+function renderGpu(box, canvasW, canvasH, ratio) {
+  const f = field;
+  if (!gl || !f || !glCanvas) return;
+  if (glCanvas.width !== canvasW || glCanvas.height !== canvasH) {
+    glCanvas.width = canvasW;
+    glCanvas.height = canvasH;
+  }
+  gl.viewport(0, 0, canvasW, canvasH);
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.useProgram(program);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, depthTexture);
+  gl.activeTexture(gl.TEXTURE1);
+  gl.bindTexture(gl.TEXTURE_2D, lutTexture);
+  const ext = f.extent;
+  const fieldCentreX = (ext[0] + ext[2]) / 2;
+  const viewCentreX = (box[0] + box[2]) / 2;
+  const shift = Math.round((fieldCentreX - viewCentreX) / WORLD_WIDTH) * WORLD_WIDTH;
+  gl.uniform4f(
+    uView,
+    box[0] + shift - ext[0],
+    box[1] - ext[1],
+    box[2] - box[0],
+    box[3] - box[1]
+  );
+  gl.uniform4f(uField, 0, 0, ext[2] - ext[0], ext[3] - ext[1]);
+  gl.uniform2f(uTexel, 1 / f.width, 1 / f.height);
+  gl.uniform1i(uDepth, 0);
+  gl.uniform1i(uLut, 1);
+  gl.uniform1f(uShadeLimit, Math.max(0.01, settings?.shadeLimitMetres ?? 10));
+  gl.uniform1i(uLevels, SHADE_CONTOUR_LEVELS);
+  gl.uniform1f(uInterval, Math.max(0.01, settings?.contourIntervalMetres ?? 1));
+  gl.uniform1f(uLineWidth, Math.max(1, ratio));
+  gl.bindBuffer(gl.ARRAY_BUFFER, quad);
+  gl.enableVertexAttribArray(aPos);
+  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+function drawOverlay(ctx, box, canvasW, canvasH, resolution, ratio, zoom) {
+  if (!settings) return;
+  const boxW = box[2] - box[0];
+  const boxH = box[3] - box[1];
+  const centreX = (box[0] + box[2]) / 2;
+  const toPixel = (lon, lat) => {
+    const mx = mercX2(lon);
+    const my = mercY2(lat);
+    const x = mx + Math.round((centreX - mx) / WORLD_WIDTH) * WORLD_WIDTH;
+    return [(x - box[0]) / boxW * canvasW, (box[3] - my) / boxH * canvasH];
+  };
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  const dot = (p, depth) => {
+    ctx.beginPath();
+    ctx.arc(
+      p[0],
+      p[1],
+      Math.max(1.5, settings.cellPx * 0.12) * ratio,
+      0,
+      Math.PI * 2
+    );
+    ctx.fillStyle = depthCss(depth, settings.shadeLimitMetres, 0.95);
+    ctx.fill();
+  };
+  const label = (text, p, fontCss) => {
+    ctx.font = `${Math.round(fontCss * ratio)}px Roboto, Arial, sans-serif`;
+    ctx.lineWidth = Math.max(2, 2 * ratio);
+    ctx.strokeStyle = "rgba(255,255,255,0.85)";
+    ctx.strokeText(text, p[0], p[1]);
+    ctx.fillStyle = "rgba(0,0,0,0.95)";
+    ctx.fillText(text, p[0], p[1]);
+  };
+  selectShoals(samples, settings.safetyDepthMetres).forEach(
+    (s) => dot(toPixel(s.lon, s.lat), s.depth)
+  );
+  const cellSize = Math.max(1, settings.cellPx * resolution);
+  const clusters = depthClusters(
+    samples,
+    cellSize,
+    settings.mergeTolerance,
+    settings.maxDepthMetres
+  );
+  for (const c of clusters) {
+    const p = toPixel(c.lon, c.lat);
+    dot(p, c.depth);
+    const radiusPx = c.radiusMetres / resolution * ratio;
+    if (radiusPx >= LABEL_MIN_RADIUS_PX) {
+      const fontCss = Math.max(
+        LABEL_FONT_MIN,
+        Math.min(LABEL_FONT_MAX, (zoom - 8) * 1.5 + LABEL_FONT_MIN)
+      );
+      label(formatDepth(c.depth), p, fontCss);
+    }
+  }
+}
+function render(req) {
+  try {
+    if (!initWebgl()) {
+      post({ type: "error", message: "WebGL2 unavailable" });
+      return;
+    }
+    if (fieldDirty || !field) {
+      buildField();
+      fieldDirty = false;
+    }
+    const { extent, width, height, pixelRatio, resolution, zoom } = req;
+    const box = [
+      extent[0],
+      extent[1],
+      extent[2],
+      extent[3]
+    ];
+    const out = new OffscreenCanvas(width, height);
+    const ctx = out.getContext("2d");
+    if (!ctx) {
+      post({ type: "error", message: "no 2D context" });
+      return;
+    }
+    ctx.clearRect(0, 0, width, height);
+    if (field) {
+      renderGpu(box, width, height, pixelRatio);
+      ctx.drawImage(glCanvas, 0, 0);
+    }
+    drawOverlay(ctx, box, width, height, resolution, pixelRatio, zoom);
+    const image = out.transferToImageBitmap();
+    post({ type: "frame", requestId: req.requestId, image }, [image]);
+  } catch (err) {
+    post({ type: "error", message: String(err) });
+  }
+}
+function post(message, transfer) {
+  self.postMessage(message, transfer ?? []);
+}
+self.onmessage = (e) => {
+  const msg = e.data;
+  switch (msg.type) {
+    case "samples":
+      samples = msg.samples;
+      fieldDirty = true;
+      break;
+    case "settings":
+      settings = msg.settings;
+      fieldDirty = true;
+      break;
+    case "units":
+      depthUnit = msg.depth;
+      break;
+    case "render":
+      render(msg.req);
+      break;
+    case "release":
+      releaseGpu();
+      break;
+  }
+};
+//# sourceMappingURL=render-worker.js.map