signalk-livedepth-plugin 0.3.4 → 0.3.12

package/public/js/render-worker.js

@@ -163,6 +163,7 @@ uniform float uShadeLimit;
 uniform int uLevels;
 uniform float uInterval;
 uniform float uLineWidth;
+uniform float uIsobars;   // 1 = per-fragment isobars, 0 = vector contours drawn by the runtime
 bool uncov(float v) { return v < 0.0; } // -1: no coverage
 float sampleDepth(vec2 uv) {
   vec2 fc = uv / uTexel - 0.5;
@@ -193,16 +194,87 @@ void main() {
     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);
+  // Isobars at every absolute multiple of the interval, over ALL data. The
+  // runtime can disable these and draw vector contours instead.
+  float line = 0.0;
+  if (uIsobars > 0.5) {
+    float ci = d / uInterval;
+    float dv = min(fract(ci), 1.0 - fract(ci));
+    float px = dv / max(fwidth(ci), 1e-6);
+    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/contours.ts
+function onGrid(level, step) {
+  const n = level / step;
+  return Math.abs(n - Math.round(n)) < 1e-6;
+}
+function extractContours(field, minorStep, majorStep, maxLevel) {
+  const { width, height, depth, extent } = field;
+  const result = { major: [], minor: [] };
+  const minor = minorStep > 0 ? minorStep : 1;
+  const major = majorStep > 0 ? majorStep : minor;
+  if (width < 2 || height < 2) return result;
+  const cell = (extent[2] - extent[0]) / width;
+  const at = (gx, gy) => depth[gy * width + gx];
+  const ox = [0, 1, 1, 0];
+  const oy = [0, 0, 1, 1];
+  const step = Math.min(minor, major);
+  for (let gy = 0; gy < height - 1; gy++) {
+    for (let gx = 0; gx < width - 1; gx++) {
+      const d = [
+        at(gx, gy),
+        at(gx + 1, gy),
+        at(gx + 1, gy + 1),
+        at(gx, gy + 1)
+      ];
+      if (!Number.isFinite(d[0]) || !Number.isFinite(d[1]) || !Number.isFinite(d[2]) || !Number.isFinite(d[3])) {
+        continue;
+      }
+      const lo = Math.min(d[0], d[1], d[2], d[3]);
+      const hi = Math.max(d[0], d[1], d[2], d[3]);
+      if (hi <= lo) continue;
+      const first = Math.floor(lo / step) * step + step;
+      for (let level = first; level < hi && level <= maxLevel; level += step) {
+        if (level <= lo) continue;
+        const out = onGrid(level, major) ? result.major : result.minor;
+        const cross = [null, null, null, null];
+        const crossed = [];
+        for (let i = 0; i < 4; i++) {
+          const j = (i + 1) % 4;
+          if (d[i] >= level === d[j] >= level) {
+            continue;
+          }
+          const t = (level - d[i]) / (d[j] - d[i]);
+          cross[i] = [
+            extent[0] + (gx + ox[i] + (ox[j] - ox[i]) * t) * cell,
+            extent[1] + (gy + oy[i] + (oy[j] - oy[i]) * t) * cell
+          ];
+          crossed.push(i);
+        }
+        if (crossed.length === 2) {
+          const [a, b] = crossed;
+          out.push([...cross[a], ...cross[b]]);
+        } else if (crossed.length === 4) {
+          const centre = (d[0] + d[1] + d[2] + d[3]) / 4;
+          if (centre >= level) {
+            out.push([...cross[0], ...cross[1]]);
+            out.push([...cross[2], ...cross[3]]);
+          } else {
+            out.push([...cross[0], ...cross[3]]);
+            out.push([...cross[1], ...cross[2]]);
+          }
+        }
+      }
+    }
+  }
+  return result;
+}
+
 // src/web/shared/live-depth.ts
 var DEFAULT_SHADE_LIMIT_M = 10;
 var EARTH_RADIUS2 = 6378137;
@@ -222,11 +294,11 @@ 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]
+  [0, 37, 175, 248],
+  [0.25, 143, 215, 248],
+  [0.5, 167, 223, 248],
+  [0.75, 183, 223, 248],
+  [1, 248, 248, 248]
 ];
 var SHADE_CONTOUR_LEVELS = 6;
 function shadeColor(t) {
@@ -417,11 +489,21 @@ var liveSamples = [];
 var settings = null;
 var builder = null;
 var fieldDirty = true;
+var fieldVersion = 0;
+var surfaceCache = null;
+var outCanvas = null;
+var outCtx = null;
+var SURFACE_PAD = 0.25;
+var overlayCache = null;
+var overlayCanvas = null;
+var overlayCtx = null;
 var vessel = { position: null };
 var depthUnit = "m";
 var samplesVersion = 0;
 var shoalCache = null;
 var clusterCache = null;
+var contours = { major: [], minor: [] };
+var gpuMsaa = true;
 var AUTO_FRAME_BUDGET_MS = 10;
 var AUTO_ADJUST_EVERY = 30;
 var PERF_REPORT_EVERY = 20;
@@ -430,6 +512,7 @@ var frameAvgMs = 0;
 var framesSinceAdjust = 0;
 var perfFrames = 0;
 function renderScale() {
+  if (settings?.fullResolution) return 1;
   const quality = settings?.quality ?? "auto";
   return quality === "auto" ? autoScale : QUALITY_SCALE[quality];
 }
@@ -452,6 +535,7 @@ var uShadeLimit = null;
 var uLevels = null;
 var uInterval = null;
 var uLineWidth = null;
+var uIsobars = null;
 function compile(ctx, type, src) {
   const shader = ctx.createShader(type);
   if (!shader) return null;
@@ -466,11 +550,14 @@ function compile(ctx, type, src) {
 function initWebgl() {
   if (gl) return true;
   glCanvas = new OffscreenCanvas(1, 1);
+  const msaa = settings?.msaa ?? true;
   const ctx = glCanvas.getContext("webgl2", {
     alpha: true,
-    premultipliedAlpha: true
+    premultipliedAlpha: true,
+    antialias: msaa
   });
   if (!ctx) return false;
+  gpuMsaa = msaa;
   const vs = compile(ctx, ctx.VERTEX_SHADER, DEPTH_VERT_SRC);
   const fs = compile(ctx, ctx.FRAGMENT_SHADER, DEPTH_FRAG_SRC);
   const prog = ctx.createProgram();
@@ -491,6 +578,7 @@ function initWebgl() {
   uLevels = ctx.getUniformLocation(prog, "uLevels");
   uInterval = ctx.getUniformLocation(prog, "uInterval");
   uLineWidth = ctx.getUniformLocation(prog, "uLineWidth");
+  uIsobars = ctx.getUniformLocation(prog, "uIsobars");
   quad = ctx.createBuffer();
   ctx.bindBuffer(ctx.ARRAY_BUFFER, quad);
   ctx.bufferData(
@@ -541,6 +629,14 @@ function releaseGpu() {
   depthTexture = null;
   lutTexture = null;
   glCanvas = null;
+  surfaceCache?.image.close();
+  surfaceCache = null;
+  outCanvas = null;
+  outCtx = null;
+  overlayCache?.image.close();
+  overlayCache = null;
+  overlayCanvas = null;
+  overlayCtx = null;
 }
 function uploadField(f) {
   if (!gl || !depthTexture) return;
@@ -562,6 +658,7 @@ function uploadField(f) {
     gl.FLOAT,
     gpu
   );
+  fieldVersion++;
 }
 function uploadRegion(f, [x0, y0, x1, y1]) {
   if (!gl || !depthTexture) return;
@@ -580,6 +677,7 @@ function uploadRegion(f, [x0, y0, x1, y1]) {
   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);
+  fieldVersion++;
 }
 function rebuildField() {
   builder = null;
@@ -610,9 +708,14 @@ function rebuildField() {
   const tiles = settings.source === "tiles";
   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 maxCells = Math.max(
+    64,
+    Math.round(settings.fieldCells) || MAX_FIELD_CELLS
+  );
+  const cell = Math.max(gap, extMax / maxCells, minCover / 8, 0.01);
   const next = createDepthFieldBuilder(extent, {
     cellMetres: cell,
+    maxCells,
     // `gap` bridges the along-track gaps, the fill radius widens a sounding
     // into empty water, and a sounding always covers its own cell.
     coverageMetres: Math.max(cell * 1.5, gap * 1.5, settings.fillMetres),
@@ -623,6 +726,12 @@ function rebuildField() {
   if (liveSamples.length) next.add(liveSamples);
   builder = next;
   uploadField(next.field);
+  contours = settings.vectorContours ? extractContours(
+    next.field,
+    Math.max(0.01, settings.minorContourMetres),
+    Math.max(0.01, settings.contourIntervalMetres),
+    Math.max(0, settings.maxDepthMetres)
+  ) : { major: [], minor: [] };
 }
 function addLive(newSamples) {
   liveSamples.push(...newSamples);
@@ -669,11 +778,45 @@ function renderGpu(box, canvasW, canvasH, ratio) {
   gl.uniform1i(uLevels, SHADE_CONTOUR_LEVELS);
   gl.uniform1f(uInterval, Math.max(0.01, settings?.contourIntervalMetres ?? 1));
   gl.uniform1f(uLineWidth, Math.max(1, ratio));
+  gl.uniform1f(uIsobars, settings?.vectorContours ? 0 : 1);
   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 drawContours(ctx, box, canvasW, canvasH, ratio) {
+  if (!settings?.vectorContours) return;
+  const f = builder?.field;
+  if (!f || contours.major.length === 0 && contours.minor.length === 0) {
+    return;
+  }
+  const boxW = box[2] - box[0];
+  const boxH = box[3] - box[1];
+  if (!(boxW > 0) || !(boxH > 0)) return;
+  const ext = f.extent;
+  const shift = Math.round(((ext[0] + ext[2]) / 2 - (box[0] + box[2]) / 2) / WORLD_WIDTH) * WORLD_WIDTH;
+  const px = (x) => (x + shift - box[0]) / boxW * canvasW;
+  const py = (y) => (box[3] - y) / boxH * canvasH;
+  const stroke = (segments, color, widthPx) => {
+    if (segments.length === 0) return;
+    ctx.beginPath();
+    for (const [x0, y0, x1, y1] of segments) {
+      ctx.moveTo(px(x0), py(y0));
+      ctx.lineTo(px(x1), py(y1));
+    }
+    ctx.lineWidth = Math.max(0.5, widthPx * ratio);
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.strokeStyle = color;
+    ctx.stroke();
+  };
+  stroke(
+    contours.minor,
+    settings.minorContourColor,
+    settings.minorContourWidthPx
+  );
+  stroke(contours.major, settings.majorContourColor, settings.contourWidthPx);
+}
 function drawOverlay(ctx, box, canvasW, canvasH, resolution, ratio, zoom) {
   if (!settings) return;
   const boxW = box[2] - box[0];
@@ -707,6 +850,7 @@ function drawOverlay(ctx, box, canvasW, canvasH, resolution, ratio, zoom) {
     ctx.fillStyle = "rgba(0,0,0,0.95)";
     ctx.fillText(text, p[0], p[1]);
   };
+  drawContours(ctx, box, canvasW, canvasH, ratio);
   const shoalKey = `${samplesVersion}:${settings.safetyDepthMetres}`;
   if (!shoalCache || shoalCache.key !== shoalKey) {
     shoalCache = {
@@ -731,7 +875,6 @@ function drawOverlay(ctx, box, canvasW, canvasH, resolution, ratio, zoom) {
   const clusters = clusterCache.value;
   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(
@@ -739,6 +882,8 @@ function drawOverlay(ctx, box, canvasW, canvasH, resolution, ratio, zoom) {
         Math.min(LABEL_FONT_MAX, (zoom - 8) * 1.5 + LABEL_FONT_MIN)
       );
       label(formatDepth(c.depth), p, fontCss);
+    } else {
+      dot(p, c.depth);
     }
   }
   const v = vessel;
@@ -793,31 +938,112 @@ function render(req) {
     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 (!outCanvas || !outCtx || outCanvas.width !== width || outCanvas.height !== height) {
+      outCanvas = new OffscreenCanvas(width, height);
+      outCtx = outCanvas.getContext("2d");
+    }
+    const out = outCanvas;
+    const ctx = outCtx;
     if (!ctx) {
       post({ type: "error", message: "no 2D context" });
       return;
     }
     ctx.clearRect(0, 0, width, height);
-    if (builder) {
-      renderGpu(box, surfaceW, surfaceH, pixelRatio * scale);
-      ctx.drawImage(
-        glCanvas,
-        0,
-        0,
-        surfaceW,
-        surfaceH,
-        0,
-        0,
-        width,
-        height
-      );
+    let redrew = false;
+    if (builder && glCanvas) {
+      const padX = (box[2] - box[0]) * SURFACE_PAD;
+      const padY = (box[3] - box[1]) * SURFACE_PAD;
+      const padBox = [
+        box[0] - padX,
+        box[1] - padY,
+        box[2] + padX,
+        box[3] + padY
+      ];
+      const padW = Math.max(1, Math.round(surfaceW * (1 + SURFACE_PAD * 2)));
+      const padH = Math.max(1, Math.round(surfaceH * (1 + SURFACE_PAD * 2)));
+      const surfaceKey = [
+        fieldVersion,
+        padW,
+        padH,
+        pixelRatio,
+        settings?.shadeLimitMetres,
+        settings?.contourIntervalMetres,
+        settings?.vectorContours,
+        settings?.msaa
+      ].join("|");
+      const cached = surfaceCache;
+      const covers = !!cached && cached.key === surfaceKey && box[0] >= cached.box[0] && box[1] >= cached.box[1] && box[2] <= cached.box[2] && box[3] <= cached.box[3];
+      if (!covers) {
+        renderGpu(padBox, padW, padH, pixelRatio * scale);
+        cached?.image.close();
+        surfaceCache = {
+          key: surfaceKey,
+          image: glCanvas.transferToImageBitmap(),
+          box: padBox,
+          width: padW,
+          height: padH
+        };
+        redrew = true;
+      }
+      const cache = surfaceCache;
+      const cw = cache.box[2] - cache.box[0];
+      const ch = cache.box[3] - cache.box[1];
+      const sx = (box[0] - cache.box[0]) / cw * cache.width;
+      const sy = (cache.box[3] - box[3]) / ch * cache.height;
+      const sw = (box[2] - box[0]) / cw * cache.width;
+      const sh = (box[3] - box[1]) / ch * cache.height;
+      ctx.drawImage(cache.image, sx, sy, sw, sh, 0, 0, width, height);
     }
-    drawOverlay(ctx, box, width, height, resolution, pixelRatio, zoom);
+    const overlayKey = [
+      fieldVersion,
+      samplesVersion,
+      box.join(","),
+      width,
+      height,
+      resolution,
+      pixelRatio,
+      zoom,
+      settings?.vectorContours,
+      settings?.contourIntervalMetres,
+      settings?.minorContourMetres,
+      settings?.contourWidthPx,
+      settings?.minorContourWidthPx,
+      settings?.majorContourColor,
+      settings?.minorContourColor,
+      settings?.safetyDepthMetres,
+      settings?.cellPx,
+      settings?.mergeTolerance,
+      settings?.maxDepthMetres,
+      settings?.shadeLimitMetres
+    ].join("|");
+    if (!overlayCache || overlayCache.key !== overlayKey) {
+      if (!overlayCanvas || !overlayCtx || overlayCanvas.width !== width || overlayCanvas.height !== height) {
+        overlayCanvas = new OffscreenCanvas(width, height);
+        overlayCtx = overlayCanvas.getContext("2d");
+      }
+      if (overlayCtx) {
+        overlayCtx.clearRect(0, 0, width, height);
+        drawOverlay(
+          overlayCtx,
+          box,
+          width,
+          height,
+          resolution,
+          pixelRatio,
+          zoom
+        );
+        overlayCache?.image.close();
+        overlayCache = {
+          key: overlayKey,
+          image: overlayCanvas.transferToImageBitmap()
+        };
+        redrew = true;
+      }
+    }
+    if (overlayCache) ctx.drawImage(overlayCache.image, 0, 0);
     const image = out.transferToImageBitmap();
     const frameMs = performance.now() - started;
-    if ((settings?.quality ?? "auto") === "auto") {
+    if (redrew && (settings?.quality ?? "auto") === "auto") {
       frameAvgMs = frameAvgMs === 0 ? frameMs : frameAvgMs * 0.8 + frameMs * 0.2;
       if (++framesSinceAdjust >= AUTO_ADJUST_EVERY) {
         framesSinceAdjust = 0;
@@ -854,10 +1080,12 @@ self.onmessage = (e) => {
     case "vessel":
       vessel = msg;
       break;
-    case "settings":
+    case "settings": {
+      if (msg.settings.msaa !== gpuMsaa) releaseGpu();
       settings = msg.settings;
       fieldDirty = true;
       break;
+    }
     case "units":
       depthUnit = msg.depth;
       break;