signalk-livedepth-plugin 0.3.0 → 0.3.2

package/public/js/render-worker.js

@@ -28,7 +28,7 @@ function medianConsecutiveGap(samples2) {
   gaps.sort((a, b) => a - b);
   return gaps[Math.floor(gaps.length / 2)];
 }
-function buildDepthField(samples2, extent, options) {
+function createDepthFieldBuilder(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;
@@ -69,52 +69,76 @@ function buildDepthField(samples2, extent, options) {
   );
   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 field = { width, height, extent: gridExtent, depth };
+  function refresh([rx0, ry0, rx1, ry1]) {
+    for (let gy = ry0; gy < ry1; gy++) {
+      const row = gy * width;
+      for (let gx = rx0; gx < rx1; gx++) {
+        const i = row + gx;
+        const w = wsum[i];
+        if (w <= 0) {
+          depth[i] = NaN;
+          continue;
+        }
+        const idw = wdsum[i] / w;
+        const shallowest = minSeen[i];
+        depth[i] = (1 - shallowBias) * idw + shallowBias * Math.min(idw, shallowest);
+      }
     }
-    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) {
+  }
+  function add(samples2) {
+    let rect = null;
+    const grow = (gx, gy) => {
+      if (!rect) {
+        rect = [gx, gy, gx + 1, gy + 1];
+        return;
+      }
+      if (gx < rect[0]) rect[0] = gx;
+      if (gy < rect[1]) rect[1] = gy;
+      if (gx + 1 > rect[2]) rect[2] = gx + 1;
+      if (gy + 1 > rect[3]) rect[3] = gy + 1;
+    };
+    for (const s of samples2) {
+      if (!Number.isFinite(s.lon) || !Number.isFinite(s.lat) || !Number.isFinite(s.depth) || s.depth < 0) {
         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) {
+      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 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;
+        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;
+          }
+          grow(gx, gy);
         }
       }
     }
+    if (rect) refresh(rect);
+    return rect;
   }
-  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 };
+  return { field, add };
 }
 
 // src/web/shared/shaders.ts
@@ -369,6 +393,13 @@ function depthClusters(samples2, cellSizeMetres, tolerance = DEFAULT_MERGE_TOLER
   );
 }
 
+// src/web/shared/settings.ts
+var QUALITY_SCALE = {
+  high: 1,
+  balanced: 0.6,
+  low: 0.4
+};
+
 // src/web/render-worker.ts
 var MAX_FIELD_CELLS = 1024;
 var LABEL_FONT_MIN = 12;
@@ -377,10 +408,27 @@ var LABEL_MIN_RADIUS_PX = 8;
 var ORIGIN_SHIFT = Math.PI * 6378137;
 var WORLD_WIDTH = 2 * ORIGIN_SHIFT;
 var samples = [];
+var baseSamples = [];
+var liveSamples = [];
 var settings = null;
-var field = null;
+var builder = null;
 var fieldDirty = true;
+var vessel = { position: null };
 var depthUnit = "m";
+var samplesVersion = 0;
+var shoalCache = null;
+var clusterCache = null;
+var AUTO_FRAME_BUDGET_MS = 10;
+var AUTO_ADJUST_EVERY = 30;
+var PERF_REPORT_EVERY = 20;
+var autoScale = 0.7;
+var frameAvgMs = 0;
+var framesSinceAdjust = 0;
+var perfFrames = 0;
+function renderScale() {
+  const quality = settings?.quality ?? "auto";
+  return quality === "auto" ? autoScale : QUALITY_SCALE[quality];
+}
 function formatDepth(metres) {
   return depthUnit === "foot" ? (metres / 0.3048).toFixed(0) : metres.toFixed(1);
 }
@@ -511,14 +559,34 @@ function uploadField(f) {
     gpu
   );
 }
-function buildField() {
-  field = null;
-  if (samples.length === 0 || !settings) return;
+function uploadRegion(f, [x0, y0, x1, y1]) {
+  if (!gl || !depthTexture) return;
+  const w = x1 - x0;
+  const h = y1 - y0;
+  if (w <= 0 || h <= 0) return;
+  const gpu = new Float32Array(w * h);
+  for (let y = 0; y < h; y++) {
+    const src = (y0 + y) * f.width + x0;
+    const dst = y * w;
+    for (let x = 0; x < w; x++) {
+      const d = f.depth[src + x];
+      gpu[dst + x] = Number.isNaN(d) ? -1 : d;
+    }
+  }
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, depthTexture);
+  gl.texSubImage2D(gl.TEXTURE_2D, 0, x0, y0, w, h, gl.RED, gl.FLOAT, gpu);
+}
+function rebuildField() {
+  builder = null;
+  samples = [...baseSamples, ...liveSamples];
+  const source = baseSamples.length ? baseSamples : samples;
+  if (source.length === 0 || !settings) return;
   let minX = Infinity;
   let minY = Infinity;
   let maxX = -Infinity;
   let maxY = -Infinity;
-  for (const s of samples) {
+  for (const s of source) {
     const x = mercX2(s.lon);
     const y = mercY2(s.lat);
     minX = Math.min(minX, x);
@@ -536,20 +604,33 @@ function buildField() {
   ];
   const extMax = Math.max(extent[2] - extent[0], extent[3] - extent[1]);
   const tiles = settings.source === "tiles";
-  const gap = tiles ? 0 : medianConsecutiveGap(samples);
+  const gap = tiles ? 0 : medianConsecutiveGap(source);
   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, {
+  const next = createDepthFieldBuilder(extent, {
     cellMetres: cell,
     coverageMetres: Math.max(cell * 1.5, gap * 1.5),
     coverageMinMetres: minCover
   });
-  if (!built) return;
-  field = built;
-  uploadField(built);
+  if (!next) return;
+  next.add(baseSamples);
+  if (liveSamples.length) next.add(liveSamples);
+  builder = next;
+  uploadField(next.field);
+}
+function addLive(newSamples) {
+  liveSamples.push(...newSamples);
+  samples.push(...newSamples);
+  samplesVersion++;
+  if (!builder) {
+    fieldDirty = true;
+    return;
+  }
+  const rect = builder.add(newSamples);
+  if (rect) uploadRegion(builder.field, rect);
 }
 function renderGpu(box, canvasW, canvasH, ratio) {
-  const f = field;
+  const f = builder?.field;
   if (!gl || !f || !glCanvas) return;
   if (glCanvas.width !== canvasW || glCanvas.height !== canvasH) {
     glCanvas.width = canvasW;
@@ -620,16 +701,28 @@ function drawOverlay(ctx, box, canvasW, canvasH, resolution, ratio, zoom) {
     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 shoalKey = `${samplesVersion}:${settings.safetyDepthMetres}`;
+  if (!shoalCache || shoalCache.key !== shoalKey) {
+    shoalCache = {
+      key: shoalKey,
+      value: selectShoals(samples, settings.safetyDepthMetres)
+    };
+  }
+  shoalCache.value.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
-  );
+  const clusterKey = `${samplesVersion}:${cellSize}:${settings.mergeTolerance}:${settings.maxDepthMetres}`;
+  if (!clusterCache || clusterCache.key !== clusterKey) {
+    clusterCache = {
+      key: clusterKey,
+      value: depthClusters(
+        samples,
+        cellSize,
+        settings.mergeTolerance,
+        settings.maxDepthMetres
+      )
+    };
+  }
+  const clusters = clusterCache.value;
   for (const c of clusters) {
     const p = toPixel(c.lon, c.lat);
     dot(p, c.depth);
@@ -642,6 +735,36 @@ function drawOverlay(ctx, box, canvasW, canvasH, resolution, ratio, zoom) {
       label(formatDepth(c.depth), p, fontCss);
     }
   }
+  const v = vessel;
+  if (v.position && v.heading !== void 0 && v.loa && v.beam) {
+    const cx = mercX2(v.position[0]);
+    const cy = mercY2(v.position[1]);
+    const cos = Math.cos(v.heading);
+    const sin = Math.sin(v.heading);
+    const halfLength = v.loa / 2;
+    const halfBeam = v.beam / 2;
+    const corners = [
+      [halfLength, halfBeam],
+      [halfLength, -halfBeam],
+      [-halfLength, -halfBeam],
+      [-halfLength, halfBeam]
+    ].map(
+      ([fwd, stbd]) => toPixel(
+        lonOf(cx + fwd * sin + stbd * cos),
+        latOf(cy + fwd * cos - stbd * sin)
+      )
+    );
+    ctx.beginPath();
+    corners.forEach(
+      ([px, py], i) => i === 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py)
+    );
+    ctx.closePath();
+    ctx.lineWidth = Math.max(1.5, 1.5 * ratio);
+    ctx.strokeStyle = "rgba(255, 0, 255, 0.95)";
+    ctx.stroke();
+    ctx.fillStyle = "rgba(255, 0, 255, 0.12)";
+    ctx.fill();
+  }
 }
 function render(req) {
   try {
@@ -649,8 +772,8 @@ function render(req) {
       post({ type: "error", message: "WebGL2 unavailable" });
       return;
     }
-    if (fieldDirty || !field) {
-      buildField();
+    if (fieldDirty || !builder) {
+      rebuildField();
       fieldDirty = false;
     }
     const { extent, width, height, pixelRatio, resolution, zoom } = req;
@@ -660,6 +783,10 @@ function render(req) {
       extent[2],
       extent[3]
     ];
+    const scale = renderScale();
+    const surfaceW = Math.max(1, Math.round(width * scale));
+    const surfaceH = Math.max(1, Math.round(height * scale));
+    const started = performance.now();
     const out = new OffscreenCanvas(width, height);
     const ctx = out.getContext("2d");
     if (!ctx) {
@@ -667,12 +794,38 @@ function render(req) {
       return;
     }
     ctx.clearRect(0, 0, width, height);
-    if (field) {
-      renderGpu(box, width, height, pixelRatio);
-      ctx.drawImage(glCanvas, 0, 0);
+    if (builder) {
+      renderGpu(box, surfaceW, surfaceH, pixelRatio * scale);
+      ctx.drawImage(
+        glCanvas,
+        0,
+        0,
+        surfaceW,
+        surfaceH,
+        0,
+        0,
+        width,
+        height
+      );
     }
     drawOverlay(ctx, box, width, height, resolution, pixelRatio, zoom);
     const image = out.transferToImageBitmap();
+    const frameMs = performance.now() - started;
+    if ((settings?.quality ?? "auto") === "auto") {
+      frameAvgMs = frameAvgMs === 0 ? frameMs : frameAvgMs * 0.8 + frameMs * 0.2;
+      if (++framesSinceAdjust >= AUTO_ADJUST_EVERY) {
+        framesSinceAdjust = 0;
+        if (frameAvgMs > AUTO_FRAME_BUDGET_MS * 1.25) {
+          autoScale = Math.max(0.4, autoScale - 0.1);
+        } else if (frameAvgMs < AUTO_FRAME_BUDGET_MS * 0.6) {
+          autoScale = Math.min(1, autoScale + 0.1);
+        }
+      }
+    }
+    if (++perfFrames >= PERF_REPORT_EVERY) {
+      perfFrames = 0;
+      post({ type: "perf", scale, frameMs });
+    }
     post({ type: "frame", requestId: req.requestId, image }, [image]);
   } catch (err) {
     post({ type: "error", message: String(err) });
@@ -684,9 +837,16 @@ function post(message, transfer) {
 self.onmessage = (e) => {
   const msg = e.data;
   switch (msg.type) {
-    case "samples":
-      samples = msg.samples;
+    case "base":
+      baseSamples = msg.samples;
       fieldDirty = true;
+      samplesVersion++;
+      break;
+    case "live":
+      addLive(msg.samples);
+      break;
+    case "vessel":
+      vessel = msg;
       break;
     case "settings":
       settings = msg.settings;