@mhkeller/vgplot-dot-gl 1.0.0

package/src/painters/gl.js

@@ -0,0 +1,216 @@
+import { getSharedGL } from '../shared-gl.js';
+import { transformFor, affine, axisAffine, axisTransform, samePlaces } from '../scale-map.js';
+
+const SCRATCH = new Uint8Array(4);
+
+/** The lowest pixel ratio a lower-resolution frame may use while you zoom. */
+const MIN_REDUCED_DPR = 1;
+
+/**
+ * The WebGL painter. The point data is sent to the graphics card once per query
+ * result, and again if a scale changes type, a category axis moves its categories,
+ * the center moves after a deep zoom, or the context is lost. After that each frame is a few numbers, one draw call,
+ * and a copy into the mark's canvas.
+ */
+
+function scaleKey(sx, sy, sr) {
+  const part = s => (s ? `${s.type}:${s.exponent ?? ''}:${s.constant ?? ''}` : '-');
+  return `${part(sx)}|${part(sy)}|${part(sr)}`;
+}
+
+/** Middle of the data range after the scale's curve (log, sqrt, ...) is applied. Subtracting it keeps the 32-bit float values small and precise. */
+function center(T, extent) {
+  const a = T(+extent[0]);
+  const b = T(+extent[1]);
+  if (Number.isFinite(a) && Number.isFinite(b)) return (a + b) / 2;
+  if (Number.isFinite(b)) return b;
+  if (Number.isFinite(a)) return a;
+  return 0;
+}
+
+export function freeGPU(mark) {
+  const gpu = mark.gpu;
+  mark.gpu = null;
+  if (!gpu) return;
+  const { shared } = gpu;
+  shared.refs.delete(mark);
+  if (gpu.generation !== shared.generation || shared.lost) return; // the data died with the old context
+  const { gl } = shared;
+  for (const b of gpu.buffers) gl.deleteBuffer(b);
+  gl.deleteVertexArray(gpu.vao);
+}
+
+/** 32-bit floats have about seven digits. When rounding would move dots by more than this many pixels, we re-center. */
+const MAX_DRIFT_PX = 0.1;
+const FLOAT32_EPS = 6e-8;
+
+/**
+ * Which center to subtract before sending data up. Normally the middle of the
+ * data range. When you have zoomed in so far that 32-bit rounding of the centered
+ * values would move dots by a visible fraction of a pixel, the middle of what is
+ * on screen is used instead. That costs one more upload. A category axis uses 0:
+ * its places are small integers, which 32-bit floats store exactly.
+ */
+function centersFor(mark, sx, sy) {
+  const { prep, gpu } = mark;
+  const tx = transformFor(sx, 'x');
+  const ty = transformFor(sy, 'y');
+  let cx = prep.xCats ? 0 : gpu ? gpu.cx : center(tx, prep.extent.x);
+  let cy = prep.yCats ? 0 : gpu ? gpu.cy : center(ty, prep.extent.y);
+  if (gpu) {
+    const drift = (T, s, c) => {
+      const mid = (T(+s.domain[0]) + T(+s.domain[1])) / 2;
+      if (!Number.isFinite(mid)) return null;
+      const { a } = affine(s, 0, 0);
+      return Math.abs(mid - c) * FLOAT32_EPS * Math.abs(a) > MAX_DRIFT_PX ? mid : null;
+    };
+    const nx = prep.xCats ? null : drift(tx, sx, cx);
+    const ny = prep.yCats ? null : drift(ty, sy, cy);
+    if (nx != null) cx = nx;
+    if (ny != null) cy = ny;
+  }
+  return { cx, cy };
+}
+
+function upload(mark, shared, sx, sy, sr, lines) {
+  const { cx, cy } = centersFor(mark, sx, sy);
+  const key = `${scaleKey(sx, sy, sr)}|${cx}|${cy}`;
+  const { gpu, prep, data } = mark;
+  const places = { x: lines.x?.pos ?? null, y: lines.y?.pos ?? null };
+  if (
+    gpu && gpu.shared === shared && gpu.data === data && gpu.prep === prep && gpu.key === key && gpu.generation === shared.generation &&
+    samePlaces(gpu.places.x, places.x) && samePlaces(gpu.places.y, places.y)
+  ) return gpu;
+  freeGPU(mark);
+
+  const t0 = performance.now();
+  const { gl } = shared;
+  const columns = data.columns;
+  const column = name => {
+    const f = mark.channelField(name, { exact: true });
+    return f ? columns[f.as] : null;
+  };
+  const X = column('x');
+  const Y = column('y');
+  const R = sr ? column('r') : null;
+  const tx = axisTransform(sx, lines.x, 'x');
+  const ty = axisTransform(sy, lines.y, 'y');
+  const tr = R ? transformFor(sr, 'r') : null;
+
+  const { n, perm, codes, hidden } = prep;
+  const fx = new Float32Array(n);
+  const fy = new Float32Array(n);
+  const fr = R ? new Float32Array(n) : null;
+  const cat = new codes.constructor(n);
+  let sumR = 0;
+  for (let i = 0; i < n; ++i) {
+    const j = perm[i];
+    const vx = tx(+X[j]) - cx;
+    const vy = ty(+Y[j]) - cy;
+    let ok = Number.isFinite(vx) && Number.isFinite(vy);
+    if (fr) {
+      const vr = tr(+R[j]);
+      ok = ok && Number.isFinite(vr);
+      fr[i] = ok ? vr : 0;
+      if (ok) sumR += vr;
+    }
+    fx[i] = ok ? vx : 0;
+    fy[i] = ok ? vy : 0;
+    cat[i] = ok ? codes[j] : hidden;
+  }
+
+  const vao = gl.createVertexArray();
+  gl.bindVertexArray(vao);
+  shared.bindQuad();
+  const buffers = [shared.attrib(1, fx), shared.attrib(2, fy), shared.attrib(4, cat, cat instanceof Uint16Array ? gl.UNSIGNED_SHORT : gl.UNSIGNED_BYTE)];
+  if (fr) buffers.push(shared.attrib(3, fr));
+  else {
+    gl.disableVertexAttribArray(3);
+    gl.vertexAttrib1f(3, 0);
+  }
+  gl.bindVertexArray(null);
+
+  mark.gpu = { shared, vao, buffers, n, cx, cy, hasR: !!fr, meanT: n ? sumR / n : 0, key, places, data, prep, generation: shared.generation, uploadMs: performance.now() - t0 };
+  shared.refs.add(mark);
+  return mark.gpu;
+}
+
+/**
+ * How many pixels a frame will paint: dots times the area of their squares.
+ * This number decides whether the mark draws at a lower resolution while you zoom, which keeps dense plots smooth.
+ */
+function estimateFragments(gpu, sr, style, dpr) {
+  let r = style.r;
+  if (gpu.hasR) {
+    const ar = affine(sr, 0, 0, 'r');
+    r = Math.max(0, ar.a * gpu.meanT + ar.b);
+  }
+  const side = 2 * r * dpr + 2;
+  return gpu.n * side * side;
+}
+
+/**
+ * @param {object} options
+ * @param {boolean} [options.allowReduce] draw at a lower resolution when the
+ *   estimated painting work is over the mark's budget (the mark then schedules
+ *   a full-resolution redraw once zooming stops)
+ */
+export function paintGL(mark, canvas, { sx, sy, sr, lines, frame, style }, { allowReduce = false } = {}) {
+  const shared = getSharedGL(mark.blit);
+  // No WebGL2 at all. The mark picks the canvas painter instead, so this only happens
+  // if something calls the WebGL painter directly.
+  if (!shared) return { painter: 'gl', skipped: 'no webgl2' };
+  if (shared.lost) {
+    shared.refs.add(mark); // so the plot is redrawn too when the context comes back
+    return { painter: 'gl', skipped: 'context lost' };
+  }
+  const t0 = performance.now();
+  const gpu = upload(mark, shared, sx, sy, sr, lines);
+  const t1 = performance.now();
+  const { gl, uniforms: u } = shared;
+  const { fw, fh, offset, fx, fy } = frame;
+  let { pw, ph, dpr } = frame;
+  const estimate = estimateFragments(gpu, sr, style, dpr);
+  if (allowReduce && estimate > mark.fragmentBudget) {
+    dpr = Math.max(MIN_REDUCED_DPR, dpr * Math.sqrt(mark.fragmentBudget / estimate));
+    pw = Math.max(1, Math.round(fw * dpr));
+    ph = Math.max(1, Math.round(fh * dpr));
+  }
+  if (canvas.width !== pw || canvas.height !== ph) {
+    canvas.width = pw;
+    canvas.height = ph;
+  }
+
+  const ax = axisAffine(sx, lines.x, gpu.cx, -fx, 'x');
+  const ay = axisAffine(sy, lines.y, gpu.cy, -fy, 'y');
+  shared.beginPlot(pw, ph);
+  gl.bindVertexArray(gpu.vao);
+  gl.uniform2f(u.ax, ax.a, ax.b);
+  gl.uniform2f(u.ay, ay.a, ay.b);
+  gl.uniform2f(u.res, pw, ph);
+  gl.uniform1f(u.dpr, dpr);
+  gl.uniform1f(u.offset, offset);
+  gl.uniform1f(u.opacity, style.opacity);
+  gl.uniform1f(u.hidden, gpu.prep.hidden);
+  if (gpu.hasR) {
+    const ar = affine(sr, 0, 0, 'r');
+    gl.uniform4f(u.r, 1, ar.a, ar.b, 0);
+  } else {
+    gl.uniform4f(u.r, 0, 0, 0, style.r);
+  }
+  if (style.palette) {
+    shared.setPalette(style.palette, style.palette.length / (256 * 4));
+    gl.uniform1i(u.colorMode, 1);
+  } else {
+    gl.uniform1i(u.colorMode, 0);
+    gl.uniform4fv(u.color, style.fillRGBA);
+  }
+  gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, gpu.n);
+  gl.bindVertexArray(null);
+  // gl.finish() doesn't reliably wait in Chrome; reading one pixel back does.
+  if (mark.benchmark) gl.readPixels(0, shared.height - 1, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, SCRATCH);
+  const t2 = performance.now();
+  shared.blitTo(canvas, pw, ph);
+  const t3 = performance.now();
+  return { painter: 'gl', drawn: gpu.n, uploadMs: t1 - t0, drawMs: t2 - t1, blitMs: t3 - t2, dpr, reduced: dpr < frame.dpr, estimate };
+}

package/src/painters/rect2d.js

@@ -0,0 +1,61 @@
+import { transformFor, affine, axisAffine, axisTransform } from '../scale-map.js';
+
+/**
+ * A plain 2D canvas painter: one filled square per dot, in the same draw order
+ * as the WebGL painter. The mark picks it on its own when the browser has no
+ * WebGL2, and it is how the tests draw, since jsdom has no graphics card. Either
+ * way it has to put dots exactly where the WebGL painter does.
+ */
+export function paintRect2D(mark, canvas, { sx, sy, sr, lines, frame, style }) {
+  const t0 = performance.now();
+  const { prep, data } = mark;
+  const { pw, ph, dpr, offset, fx, fy } = frame;
+  if (canvas.width !== pw || canvas.height !== ph) {
+    canvas.width = pw;
+    canvas.height = ph;
+  }
+  const ctx = canvas.getContext('2d');
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, pw, ph);
+
+  const column = name => {
+    const f = mark.channelField(name, { exact: true });
+    return f ? data.columns[f.as] : null;
+  };
+  const X = column('x');
+  const Y = column('y');
+  const R = sr ? column('r') : null;
+  const tx = axisTransform(sx, lines.x, 'x');
+  const ty = axisTransform(sy, lines.y, 'y');
+  const tr = sr ? transformFor(sr, 'r') : null;
+  const ax = axisAffine(sx, lines.x, 0, -fx, 'x');
+  const ay = axisAffine(sy, lines.y, 0, -fy, 'y');
+  const ar = sr ? affine(sr, 0, 0, 'r') : null;
+  const rConst = style.r;
+
+  const rgba = c => `rgba(${Math.round(c[0] * 255)},${Math.round(c[1] * 255)},${Math.round(c[2] * 255)},${c[3]})`;
+  const palette = style.palette
+    ? Array.from({ length: prep.levels }, (_, i) => rgba([style.palette[i * 4] / 255, style.palette[i * 4 + 1] / 255, style.palette[i * 4 + 2] / 255, style.palette[i * 4 + 3] / 255]))
+    : null;
+  const constant = rgba(style.fillRGBA);
+
+  ctx.globalAlpha = style.opacity;
+  let current = null;
+  const { perm, codes, hidden, n } = prep;
+  let drawn = 0;
+  for (let i = 0; i < n; ++i) {
+    const j = perm[i];
+    const code = codes[j];
+    if (code === hidden) continue;
+    const px = ax.a * tx(+X[j]) + ax.b + offset;
+    const py = ay.a * ty(+Y[j]) + ay.b + offset;
+    const r = R ? ar.a * tr(+R[j]) + ar.b : rConst;
+    if (!(r > 0) || !Number.isFinite(px) || !Number.isFinite(py)) continue;
+    const fill = palette ? palette[code] : constant;
+    if (fill !== current) ctx.fillStyle = current = fill;
+    const s = r * dpr;
+    ctx.fillRect(px * dpr - s, py * dpr - s, 2 * s, 2 * s);
+    ++drawn;
+  }
+  return { painter: 'rect2d', drawn, drawMs: performance.now() - t0 };
+}

package/src/pick.js

@@ -0,0 +1,149 @@
+import { transformFor, affine, axisAffine, axisTransform } from './scale-map.js';
+
+/**
+ * Finds the dot under a point from what the mark painted, without the database.
+ *
+ * `buildPickIndex` sorts every visible dot of one paint into small screen cells,
+ * using the same scales, hide rules, clip frame and half-pixel offset as the
+ * painters. `pickDot` then looks only at the cells around the pointer, ring by
+ * ring, and stops as soon as no farther cell can hold a better dot.
+ */
+
+/** Side of one grid cell, in CSS pixels. */
+const CELL = 2;
+
+/** Most dots kept out of the grid for their size. `pickDot` checks each of them on every pick, about 0.1 ms for all of them. */
+const LARGE_DOTS = 4096;
+
+/**
+ * The pick index for one paint (the mark's `lastPaint`). Cells cover the frame. A dot
+ * centered outside the frame that pokes into it goes in the nearest edge cell, which
+ * is closer to any pointer in the frame than the dot's center is. The few largest dots
+ * go in a list after the last cell, so the walk around the pointer only has to reach
+ * as far as the largest dot left in the grid. Within a cell and the list, draw indices rise.
+ */
+export function buildPickIndex(mark, paint) {
+  const { sx, sy, sr, lines, frame, style, prep } = paint;
+  const empty = { paint, idx: new Uint32Array(0) };
+  if (style.opacity <= 0 || (!style.palette && style.fillRGBA[3] <= 0)) return empty;
+
+  const { fw, fh, offset } = frame;
+  const column = name => mark.data.columns[mark.channelField(name, { exact: true }).as];
+  const X = column('x');
+  const Y = column('y');
+  const R = sr ? column('r') : null;
+  const tx = axisTransform(sx, lines.x, 'x');
+  const ty = axisTransform(sy, lines.y, 'y');
+  const tr = sr ? transformFor(sr, 'r') : null;
+  const ax = axisAffine(sx, lines.x, 0, -frame.fx, 'x');
+  const ay = axisAffine(sy, lines.y, 0, -frame.fy, 'y');
+  const ar = sr ? affine(sr, 0, 0, 'r') : null;
+
+  const W = Math.max(1, Math.ceil(fw / CELL));
+  const H = Math.max(1, Math.ceil(fh / CELL));
+  const { perm, codes, hidden, n, total } = prep;
+  const palette = style.palette;
+  const cellOf = new Int32Array(total).fill(-1);
+  // Radii are counted in whole pixels up to the frame's diagonal. A walk that far already reaches every cell, so larger radii share the last count.
+  const bins = Math.ceil(Math.hypot(fw, fh));
+  const radii = R ? new Uint32Array(bins + 1) : null;
+  let rmax = 0;
+  // Rows go in row order, which reads the columns straight through memory. Rows left out of the draw order have the hidden code.
+  for (let j = 0; j < total; ++j) {
+    const code = codes[j];
+    if (code === hidden || (palette && palette[code * 4 + 3] === 0)) continue;
+    const px = ax.a * tx(+X[j]) + ax.b + offset;
+    const py = ay.a * ty(+Y[j]) + ay.b + offset;
+    const r = R ? ar.a * tr(+R[j]) + ar.b : style.r;
+    // Written as "not inside" so NaN positions and radii are skipped too. Neither painter draws an infinite radius.
+    if (!(r > 0 && r < Infinity && px + r >= 0 && px - r <= fw && py + r >= 0 && py - r <= fh)) continue;
+    cellOf[j] = Math.min(H - 1, Math.max(0, Math.floor(py / CELL))) * W + Math.min(W - 1, Math.max(0, Math.floor(px / CELL)));
+    if (r > rmax) rmax = r;
+    if (radii) ++radii[Math.min(bins, Math.ceil(r))];
+  }
+
+  // `cap` is the smallest whole-pixel radius that at most LARGE_DOTS dots exceed. When more than that
+  // many are bigger than the diagonal, every dot stays in the grid and `cap` is the largest radius.
+  let cap = rmax;
+  if (radii && radii[bins] <= LARGE_DOTS) {
+    let above = radii[bins];
+    cap = bins - 1;
+    while (cap > 0 && above + radii[cap] <= LARGE_DOTS) above += radii[cap--];
+  }
+  const large = W * H;
+  const start = new Uint32Array(large + 2);
+  for (let j = 0; j < total; ++j) {
+    if (cellOf[j] < 0) continue;
+    if (cap < rmax && ar.a * tr(+R[j]) + ar.b > cap) cellOf[j] = large;
+    ++start[cellOf[j]];
+  }
+  // Counting sort: after the running sum, start[c] is where cell c ends. Placing dots from the
+  // last draw index down moves it back to where cell c begins and leaves the indices rising.
+  for (let c = 1; c <= large + 1; ++c) start[c] += start[c - 1];
+  const idx = new Uint32Array(start[large + 1]);
+  for (let i = n - 1; i >= 0; --i) {
+    const c = cellOf[perm[i]];
+    if (c >= 0) idx[--start[c]] = i;
+  }
+  return { paint, cap, W, H, start, idx, X, Y, R, tx, ty, tr, ax, ay, ar };
+}
+
+/**
+ * The dot at (x, y), in CSS pixels from the top left of the paint's frame: the dot
+ * drawn last among those covering the point, or else the dot whose edge is
+ * closest, up to `maxRadius` away. Distances are to a circle for the 'gl' painter
+ * and to a square for 'rect2d'. Returns `{ i, j, px, py, r, key }` (draw index, row,
+ * center in frame pixels, radius, distance to the edge with 0 inside) or null.
+ */
+export function pickDot(index, x, y, maxRadius) {
+  const { paint, idx } = index;
+  const { fw, fh, offset } = paint.frame;
+  if (!idx.length || !(x >= 0 && x <= fw && y >= 0 && y <= fh)) return null;
+
+  const { cap, W, H, start, X, Y, R, tx, ty, tr, ax, ay, ar } = index;
+  const { perm } = paint.prep;
+  const square = paint.painter === 'rect2d';
+  let best = -1;
+  let bestKey = Infinity;
+  let hit = null;
+  const scan = c => {
+    for (let s = start[c + 1] - 1; s >= start[c]; --s) {
+      const i = idx[s];
+      // Indices fall from here on, so none of them can beat a covering dot drawn later.
+      if (bestKey === 0 && i <= best) break;
+      const j = perm[i];
+      const px = ax.a * tx(+X[j]) + ax.b + offset;
+      const py = ay.a * ty(+Y[j]) + ay.b + offset;
+      const r = R ? ar.a * tr(+R[j]) + ar.b : paint.style.r;
+      const dx = Math.abs(px - x);
+      const dy = Math.abs(py - y);
+      const key = Math.max(0, (square ? Math.max(dx, dy) : Math.sqrt(dx * dx + dy * dy)) - r);
+      if (key > maxRadius || key > bestKey || (key === bestKey && i < best)) continue;
+      best = i;
+      bestKey = key;
+      hit = { i, j, px, py, r, key };
+    }
+  };
+
+  // The dots too large for the grid, one by one.
+  scan(W * H);
+  // Rings of cells around the pointer's cell. A center in ring k is at least (k - 1) * CELL pixels from the
+  // pointer, so its edge is at least that minus cap away; past the best edge distance so far, or past the grid, the walk stops.
+  const gx = Math.min(W - 1, Math.floor(x / CELL));
+  const gy = Math.min(H - 1, Math.floor(y / CELL));
+  const kmax = Math.min((cap + maxRadius) / CELL + 1, Math.max(gx, W - 1 - gx, gy, H - 1 - gy));
+  for (let k = 0; k <= kmax && (k - 1) * CELL - cap <= bestKey; ++k) {
+    const x0 = Math.max(0, gx - k);
+    const x1 = Math.min(W - 1, gx + k);
+    for (let cx = x0; cx <= x1; ++cx) {
+      if (gy - k >= 0) scan((gy - k) * W + cx);
+      if (k > 0 && gy + k < H) scan((gy + k) * W + cx);
+    }
+    const y1 = Math.min(H - 1, gy + k - 1);
+    for (let cy = Math.max(0, gy - k + 1); cy <= y1; ++cy) {
+      if (gx - k >= 0) scan(cy * W + gx - k);
+      if (k > 0 && gx + k < W) scan(cy * W + gx + k);
+    }
+  }
+  return hit;
+}