@jbrowse/render-core 5.0.0-beta.1 → 5.0.0-beta.3

package/src/shaders/pointMark.slang

@@ -0,0 +1,192 @@
+// The `point` mark shape: one glyph per instance, placed at a genomic x and at
+// a y read off a per-instance value through a linear domain scale. The glyph
+// channel picks between a disc, an inverted triangle and a diamond, and an
+// instance whose x..x2 extent is wider than the glyph draws as a horizontal bar
+// instead — the shape's own answer to "this datum has extent".
+//
+// All four are a 6-vertex quad; the fragment shader carves the shape.
+//! targets: wgsl, glsl
+//! export-consts: DIAMOND_GLYPH_SCALE, GLYPH_DISC, GLYPH_TRIANGLE, GLYPH_DIAMOND
+//! js-export: valueToYPx
+
+import antialias;
+import hpmath;
+import colorPack;
+import pointGlyph;
+
+public static const uint VERTS_PER_INSTANCE = 6u;
+
+struct PointMarkInstance {
+  uint  x     : ATTR0;
+  uint  x2    : ATTR1;
+  float y     : ATTR2;
+  uint  color : ATTR3;
+  uint  glyph : ATTR4;
+};
+
+struct Uniforms {
+  float3 bpRangeX;
+  float  canvasHeight;
+  float  domainMin;
+  float  domainMax;
+  float  zero;
+  float  viewportWidth;
+  float  radiusPx;
+  // Read by the glyph pad alone; every other length in this block is CSS px.
+  float  devicePixelRatio;
+};
+[[vk::binding(1, 0)]] ConstantBuffer<Uniforms> u;
+
+float bpToClipX(uint bp, Uniforms u) {
+  return hpToClipX(hpSplitUint(bp), u.bpRangeX, u.zero);
+}
+
+// The shape's y scale: clamp into the domain, invert (a bigger value sits
+// higher), scale to the canvas. Linear only — a consumer that wants log
+// pre-transforms its values, which is what GWAS -log10 p already is.
+//
+// `//! js-export`ed because the Canvas2D painter AND the hit test run the JS
+// twin: a drift would move the grab target off the drawn glyph on the no-GPU
+// path only.
+//
+// max(range, 1e-6) guards a degenerate (min == max) domain from dividing by
+// zero. JS spelled that guard `|| 1`, and the two are NOT the same: `|| 1`
+// invents a phantom unit-wide domain, so with bounds pinned to a single value
+// a value half a unit above it drew half-way up the Canvas2D canvas while the
+// GPU clamped it to the top. Pinning a degenerate domain means everything above
+// it is off the top, which is what this does; the parity test pins the case.
+float valueToYPx(float value, float domainMin, float domainMax, float h) {
+  float norm = clamp(
+    (value - domainMin) / max(domainMax - domainMin, 1e-6),
+    0.0,
+    1.0,
+  );
+  return (1.0 - norm) * h;
+}
+
+struct VsOut {
+  float4 position : SV_Position;
+  float4 color    : COLOR0;
+  float2 localPos : TEXCOORD0;
+  // Shape discriminator passed to the fragment shader: 0 = disc, 1 = diamond,
+  // 2 = inverted triangle, 3 = solid bar.
+  nointerpolation float shape : TEXCOORD1;
+};
+
+// Solid ink each side of a bar's genomic span, in CSS px, so a run of adjacent
+// bars abuts. SHAPE_BAR's fragment coverage is a constant 1.
+static const float BAR_OVERDRAW_PX = 1.0;
+
+// Shape discriminators for the fragment shader. SMALL_POINT_MAX_DIAMETER and
+// the disc SDF come from the shared pointGlyph module so they stay in lockstep
+// with wiggle.slang.
+static const float SHAPE_DISC = 0.0;
+static const float SHAPE_DIAMOND = 1.0;
+static const float SHAPE_TRI = 2.0;
+// >2.5 in the fragment shader = flat solid fill (extent bar, or the tiny
+// square below).
+static const float SHAPE_BAR = 3.0;
+// 1/sqrt(5): normalizes the two slanted edges of the inverted triangle so the
+// edge functions read as true perpendicular distances for antialiasing.
+static const float INV_SQRT5 = 0.4472136;
+// The diamond is the shape's "singled out" glyph and draws visibly larger than
+// the others, so it reads as the one that matters at a glance rather than as a
+// colour swap. LocusZoom's lead-SNP convention, generalized.
+static const float DIAMOND_GLYPH_SCALE = 1.6;
+
+// The glyph channel's values. The numbering is a contract between whatever
+// packs the channel, the Canvas2D painter and the branches below, so it is
+// authored once here and `//! export-consts`ed.
+static const uint GLYPH_DISC = 0u;
+static const uint GLYPH_TRIANGLE = 1u;
+static const uint GLYPH_DIAMOND = 2u;
+
+[shader("vertex")]
+VsOut vs_main(PointMarkInstance inst, uint vid : SV_VertexID) {
+  uint v = vid % 6u;
+
+  // Two-triangle quad corner (0/1 per axis); shared with the whole fleet.
+  float2 q = quadLocal(v);
+  float2 local = q * 2.0 - 1.0;
+  bool xZero = q.x < 0.5;
+
+  float startClipX = bpToClipX(inst.x, u);
+  float endClipX = bpToClipX(inst.x2, u);
+  float yPx = valueToYPx(inst.y, u.domainMin, u.domainMax, u.canvasHeight);
+  float centerClipY = yPxToClipY(yPx, u.canvasHeight);
+
+  // Genomic span in CSS px (clip width spans -1..1 across viewportWidth).
+  // abs() because reversal is baked into bpRangeX (negated length), so
+  // endClipX < startClipX on reversed regions — matches wiggle.slang.
+  float spanPx = clipLenToPx(abs(endClipX - startClipX), u.viewportWidth);
+  bool isBar = spanPx > u.radiusPx * 2.0;
+
+  VsOut o;
+  o.color = unpackRGBA(inst.color);
+  if (isBar) {
+    // Horizontal bar from x→x2, height 2*radiusPx px, centered on the value.
+    float overdrawClipX = pxToClipLen(BAR_OVERDRAW_PX, u.viewportWidth);
+    // min/max so a reversed region (endClipX < startClipX) still spans the full
+    // bar extent instead of drawing an inverted quad — matches wiggle.slang.
+    float x = xZero ? (min(startClipX, endClipX) - overdrawClipX)
+                    : (max(startClipX, endClipX) + overdrawClipX);
+    float halfBandPx = u.radiusPx;
+    float y = centerClipY + pxToClipLen(local.y * halfBandPx, u.canvasHeight);
+    o.position = float4(x, y, 0.0, 1.0);
+    o.localPos = local;
+    o.shape = SHAPE_BAR;
+  } else if (inst.glyph == GLYPH_DISC && u.radiusPx * 2.0 <= SMALL_POINT_MAX_DIAMETER) {
+    // tiny disc: pixel-snapped crisp filled square (no AA disc). The triangle
+    // and the diamond keep their distinct marker even when small.
+    float diamPx = u.radiusPx * 2.0;
+    o.position = crispSquareCornerClip(startClipX, yPx, diamPx, q,
+                                       u.viewportWidth, u.canvasHeight);
+    o.localPos = local;
+    o.shape = SHAPE_BAR;
+  } else {
+    float expand = discExpand(u.radiusPx, u.devicePixelRatio);
+    float glyphScale = inst.glyph == GLYPH_DIAMOND ? DIAMOND_GLYPH_SCALE : 1.0;
+    float halfPx = u.radiusPx * expand * glyphScale;
+    float dx = pxToClipLen(local.x * halfPx, u.viewportWidth);
+    float dy = pxToClipLen(local.y * halfPx, u.canvasHeight);
+    o.position = float4(startClipX + dx, centerClipY + dy, 0.0, 1.0);
+    o.localPos = local * expand;
+    o.shape = inst.glyph == GLYPH_TRIANGLE ? SHAPE_TRI
+            : (inst.glyph == GLYPH_DIAMOND ? SHAPE_DIAMOND : SHAPE_DISC);
+  }
+  return o;
+}
+
+[shader("fragment")]
+float4 fs_main(VsOut fragIn) : SV_Target {
+  // Each glyph only picks its SDF here; the AA derivative is taken once after
+  // the branch, because WGSL rejects a derivative under a branch on a varying
+  // ("must only be called from uniform control flow"). shape is constant per
+  // primitive, so the shared ramp is exact.
+  float2 p = fragIn.localPos;
+  float coverage;
+  if (fragIn.shape > 2.5) {
+    // Extent bar: solid fill, no marker AA. A constant SDF has zero gradient,
+    // so the ramp below saturates to alpha 1.
+    coverage = 1.0;
+  } else if (fragIn.shape > 1.5) {
+    // Inverted triangle: top edge (-1,1)-(1,1), apex (0,-1). Each edge's signed
+    // distance is positive inside; the min is the SDF used for the AA fade.
+    float dTop = 1.0 - p.y;
+    float dLeft = (2.0 * p.x + p.y + 1.0) * INV_SQRT5;
+    float dRight = (-2.0 * p.x + p.y + 1.0) * INV_SQRT5;
+    coverage = min(dTop, min(dLeft, dRight));
+  } else if (fragIn.shape > 0.5) {
+    // Diamond (rhombus): L1-norm distance from center, positive inside, zero at
+    // the four edges.
+    coverage = 1.0 - (abs(p.x) + abs(p.y));
+  } else {
+    coverage = discCoverage(p);
+  }
+  // One output pixel of ramp, from the SDF's own gradient — which is what lets
+  // the four shapes above share a single line despite the diamond's L1 norm
+  // carrying a sqrt(2) the others don't. See antialias.slang's glyphEdgeAlpha.
+  float alpha = glyphEdgeAlpha(coverage);
+  if (alpha <= 0.0) discard;
+  return float4(fragIn.color.rgb, fragIn.color.a * alpha);
+}

package/src/shaders/rowRect.generated.ts

@@ -3,6 +3,4 @@
 
 export const MIN_DRAWN_ROW_PX = 1
 
-export const MIN_DRAWN_CELL_PX = 1
-
 export const MULTI_ROW_MIN_CELL_PX = 2

package/src/shaders/rowRect.slang

@@ -1,6 +1,6 @@
 // Shared "row of colored rects" primitive: one instance is a rectangle
-// spanning [startBp, endBp) in absolute genomic coords, drawn on the row given
-// by `rowIndex` and filled with a per-instance packed ABGR color.
+// spanning [x, x2) in absolute genomic coords, drawn on the row given by
+// `row` and filled with a per-instance packed ABGR color.
 //
 // Two renderers draw exactly this: the MAF alignment renderer (run-merged
 // per-base cells) and the multi-row feature painter / "chromosome painting"
@@ -11,13 +11,14 @@
 // Row placement comes from uniforms rather than the instance data, so a
 // rowHeight / rowProportion change re-renders without a refetch.
 //
-// What the callers legitimately differ on is the min-width floor: both the
-// width they write into `minCellPx` and the *unit* they measure it in, via
-// `minCellDenomPx` (CSS px vs device px) — see GpuMafRenderer's note. Those are
-// uniform-write decisions, not a reason for two shaders. The unit is also
-// unsettled, and device px additionally makes MAF's floor depend on the
-// reader's monitor: `agent-docs/ideas/maf-subpixel-cells.md`.
-//! export-consts: MIN_DRAWN_ROW_PX, MIN_DRAWN_CELL_PX, MULTI_ROW_MIN_CELL_PX
+// What the callers legitimately differ on is the min-width floor they write
+// into `minCellPx` — a uniform-write decision, not a reason for two shaders.
+// Whether to floor at all turns on whether the caller's marks TILE: MAF's cells
+// do, so a sub-pixel one is read as part of the run around it and widening it
+// paints ink the alignment does not contain (measured, and MAF now passes 0 —
+// `agent-docs/reference/MAF_SUBPIXEL_CELLS.md`). The multi-row painter's features
+// are sparse intervals with nothing beside them, so it floors.
+//! export-consts: MIN_DRAWN_ROW_PX, MULTI_ROW_MIN_CELL_PX
 //! js-export: drawnRowHeightPx, rowBandOffsetPx
 module rowRect;
 
@@ -25,10 +26,10 @@ import colorPack;
 import hpmath;
 
 public struct RowRectInstance {
-  public uint startBp  : ATTR0;
-  public uint endBp    : ATTR1;
-  public uint rowIndex : ATTR2;
-  public uint color    : ATTR3;  // packed ABGR
+  public uint x     : ATTR0;
+  public uint x2    : ATTR1;
+  public uint row   : ATTR2;
+  public uint color : ATTR3;  // packed ABGR
 };
 
 public struct RowRectUniforms {
@@ -36,16 +37,13 @@ public struct RowRectUniforms {
   public float  canvasHeight;  // CSS px
   // The width `minCellPx` is measured against, and so the thing that decides
   // what unit `minCellPx` IS. Named for that rather than for the viewport
-  // because the three callers do not agree: multi-row and wiggle density pass
-  // a CSS width (a 1 CSS px floor), MAF passes a device one (1 device px, so
-  // half a CSS px on a retina screen and a floor that moves with the monitor).
-  // That disagreement is live and parked, not settled —
-  // agent-docs/ideas/maf-subpixel-cells.md — so the name carries it to every
-  // call site instead of a comment forty lines away.
+  // because the callers that floor pass a CSS width. Pass a DEVICE width and
+  // the floor moves with the reader's monitor — MAF did, and rendered
+  // measurably differently on a retina screen until it stopped flooring.
   public float  minCellDenomPx;
-  // Narrowest a cell is painted, in whatever unit `minCellDenomPx` is in.
-  // MIN_DRAWN_CELL_PX is the floor a caller takes when it has no reason to
-  // widen further; the multi-row painter does (see MULTI_ROW_MIN_CELL_PX).
+  // Narrowest a cell is painted, in whatever unit `minCellDenomPx` is in. Zero
+  // is a no-op and is what a tiling caller writes (MAF); the multi-row painter
+  // names its own width, MULTI_ROW_MIN_CELL_PX.
   public float  minCellPx;
   public float  zero;          // always 0.0 — prevents hp-split collapse
   public float  rowHeight;     // CSS px per row
@@ -62,24 +60,16 @@ public struct RowRectVsOut {
   public float4 color    : COLOR0;
 };
 
-// Thinnest a row is ever painted. Vertical twin of MIN_DRAWN_CELL_PX below: a
-// row thinner than a pixel can miss every pixel center and disappear, so
-// without this rows drop out as they get denser instead of just getting
-// thinner. Floored, neighbours overlap instead.
-static const float MIN_DRAWN_ROW_PX = 1.0;
-
-// Thinnest a cell can be painted and still be drawable at all, for the same
-// reason as the row floor above on the other axis. A caller writes this into
-// `minCellPx` when a cell being *visible* is not its problem, only a cell
-// existing; one whose whole encoding is carried by sub-pixel cells asks for
-// more (MULTI_ROW_MIN_CELL_PX).
+// Thinnest a row is ever painted: a row thinner than a pixel can miss every
+// pixel center and disappear, so without this rows drop out as they get denser
+// instead of just getting thinner. Floored, neighbours overlap instead.
 //
-// One caller mirrors it on the Canvas2D side and one deliberately does not: the
-// multi-row painter floors, MAF draws cells at their natural sub-pixel width.
-// That asymmetry is real and parked in `agent-docs/ideas/maf-subpixel-cells.md`;
-// sharing the constant does not decide it, it just stops the value being
-// anonymous in the places that DO agree.
-static const float MIN_DRAWN_CELL_PX = 1.0;
+// There is no X-axis twin. A row is a container the reader is counting, so
+// losing one loses a species; a cell is a sample of a tiling, so losing one to
+// the blend is the honest answer and flooring it invents ink
+// (`agent-docs/reference/MAF_SUBPIXEL_CELLS.md`). The caller that does want an X
+// floor names its own width, below.
+static const float MIN_DRAWN_ROW_PX = 1.0;
 
 // What the multi-row painter ("chromosome painting") writes into `minCellPx`.
 //
@@ -91,9 +81,9 @@ static const float MIN_DRAWN_CELL_PX = 1.0;
 // across two, so neither reaches full opacity — the tick reads as a smudge, and
 // the eye scanning for structure across the rows finds none.
 //
-// Both floors distort width; that is what a floor is. This one distorts more,
-// and only where the alternative was showing nothing legible: a feature wide
-// enough to matter is already past it.
+// A floor distorts width; that is what a floor is. This is the only caller that
+// takes the trade, and only where the alternative was showing nothing legible:
+// a feature wide enough to matter is already past it.
 static const float MULTI_ROW_MIN_CELL_PX = 2.0;
 
 public struct RowBand {
@@ -153,8 +143,7 @@ public RowRectVsOut rowRectVertex(
   RowRectInstance inst, uint vid, RowRectUniforms u
 ) {
   RowRectVsOut o;
-  o.position = rowRectClipPos(
-    inst.startBp, inst.endBp, float(inst.rowIndex), vid, u);
+  o.position = rowRectClipPos(inst.x, inst.x2, float(inst.row), vid, u);
   o.color = unpackRGBA(inst.color);
   return o;
 }

package/src/shaders/spanMark.generated.ts

@@ -0,0 +1,10 @@
+// AUTO-GENERATED by packages/shader-tools/src/shader-codegen from spanMark.slang.
+// Do not edit. Run `pnpm gen:shaders` to regenerate.
+
+export const WGSL_SOURCE = "struct RowRectUniforms_std140_0\n{\n    @align(16) bpRangeX_0 : vec3<f32>,\n    @align(4) canvasHeight_0 : f32,\n    @align(16) minCellDenomPx_0 : f32,\n    @align(4) minCellPx_0 : f32,\n    @align(8) zero_0 : f32,\n    @align(4) rowHeight_0 : f32,\n    @align(16) rowProportion_0 : f32,\n    @align(4) scrollTop_0 : f32,\n};\n\n@binding(1) @group(0) var<uniform> u_0 : RowRectUniforms_std140_0;\nfn quadLocal_0( vid_0 : u32) -> vec2<f32>\n{\n    var v_0 : u32 = vid_0 % u32(6);\n    var _S1 : bool = v_0 == u32(0);\n    var _S2 : bool;\n    if(_S1)\n    {\n        _S2 = true;\n    }\n    else\n    {\n        _S2 = v_0 == u32(2);\n    }\n    if(_S2)\n    {\n        _S2 = true;\n    }\n    else\n    {\n        _S2 = v_0 == u32(3);\n    }\n    var _S3 : f32;\n    if(_S2)\n    {\n        _S3 = 0.0f;\n    }\n    else\n    {\n        _S3 = 1.0f;\n    }\n    if(_S1)\n    {\n        _S2 = true;\n    }\n    else\n    {\n        _S2 = v_0 == u32(1);\n    }\n    if(_S2)\n    {\n        _S2 = true;\n    }\n    else\n    {\n        _S2 = v_0 == u32(4);\n    }\n    var _S4 : f32;\n    if(_S2)\n    {\n        _S4 = 0.0f;\n    }\n    else\n    {\n        _S4 = 1.0f;\n    }\n    return vec2<f32>(_S3, _S4);\n}\n\nfn drawnRowHeightPx_0( rowHeight_1 : f32,  rowProportion_1 : f32) -> f32\n{\n    return max(rowHeight_1 * rowProportion_1, 1.0f);\n}\n\nfn rowBandOffsetPx_0( rowHeight_2 : f32,  rowProportion_2 : f32) -> f32\n{\n    return (rowHeight_2 - drawnRowHeightPx_0(rowHeight_2, rowProportion_2)) * 0.5f;\n}\n\nstruct RowBand_0\n{\n     height_0 : f32,\n     offset_0 : f32,\n};\n\nfn rowBandPx_0( rowHeight_3 : f32,  rowProportion_3 : f32) -> RowBand_0\n{\n    var band_0 : RowBand_0;\n    band_0.height_0 = drawnRowHeightPx_0(rowHeight_3, rowProportion_3);\n    band_0.offset_0 = rowBandOffsetPx_0(rowHeight_3, rowProportion_3);\n    return band_0;\n}\n\nfn hpSplitUint_0( value_0 : u32) -> vec2<f32>\n{\n    var lo_0 : u32 = (value_0 & (u32(4095)));\n    return vec2<f32>(f32(value_0 - lo_0), f32(lo_0));\n}\n\nfn hpToClipX_0( splitPos_0 : vec2<f32>,  bpRange_0 : vec3<f32>,  hpZero_0 : f32) -> f32\n{\n    var step_0 : f32 = 2.0f / bpRange_0.z;\n    var _S5 : f32 = - (1.0f / hpZero_0);\n    return dot(vec3<f32>(-1.0f, max(splitPos_0.x - bpRange_0.x, _S5), max(splitPos_0.y - bpRange_0.y, _S5)), vec3<f32>(1.0f, step_0, step_0));\n}\n\nfn extendToMinWidthPx_0( x1_0 : f32,  x2_0 : f32,  minWidth_0 : f32) -> f32\n{\n    var dx_0 : f32 = x2_0 - x1_0;\n    var _S6 : f32;\n    if((abs(dx_0)) < minWidth_0)\n    {\n        if(dx_0 < 0.0f)\n        {\n            _S6 = - minWidth_0;\n        }\n        else\n        {\n            _S6 = minWidth_0;\n        }\n        _S6 = x1_0 + _S6;\n    }\n    else\n    {\n        _S6 = x2_0;\n    }\n    return _S6;\n}\n\nfn extendToMinWidthX_0( x1_1 : f32,  x2_1 : f32,  minWidthPx_0 : f32,  canvasWidth_0 : f32) -> f32\n{\n    return extendToMinWidthPx_0(x1_1, x2_1, minWidthPx_0 * 2.0f / canvasWidth_0);\n}\n\nfn yPxToClipY_0( yPx_0 : f32,  canvasHeight_1 : f32) -> f32\n{\n    return 1.0f - yPx_0 / canvasHeight_1 * 2.0f;\n}\n\nfn rowRectClipPos_0( startBp_0 : u32,  endBp_0 : u32,  rowIndex_0 : f32,  vid_1 : u32,  u_1 : ptr<function, RowRectUniforms_std140_0>) -> vec4<f32>\n{\n    var local_0 : vec2<f32> = quadLocal_0(vid_1);\n    var band_1 : RowBand_0 = rowBandPx_0((*u_1).rowHeight_0, (*u_1).rowProportion_0);\n    var rowY_0 : f32 = band_1.offset_0 + (*u_1).rowHeight_0 * rowIndex_0 - (*u_1).scrollTop_0;\n    var sx1_0 : f32 = hpToClipX_0(hpSplitUint_0(startBp_0), (*u_1).bpRangeX_0, (*u_1).zero_0);\n    return vec4<f32>(mix(sx1_0, extendToMinWidthX_0(sx1_0, hpToClipX_0(hpSplitUint_0(endBp_0), (*u_1).bpRangeX_0, (*u_1).zero_0), (*u_1).minCellPx_0, (*u_1).minCellDenomPx_0), local_0.x), yPxToClipY_0(mix(rowY_0, rowY_0 + band_1.height_0, local_0.y), (*u_1).canvasHeight_0), 0.0f, 1.0f);\n}\n\nfn unpackRGBA_0( c_0 : u32) -> vec4<f32>\n{\n    return vec4<f32>(f32((((c_0 >> (u32(0)))) & (u32(255)))), f32((((c_0 >> (u32(8)))) & (u32(255)))), f32((((c_0 >> (u32(16)))) & (u32(255)))), f32((((c_0 >> (u32(24)))) & (u32(255))))) / vec4<f32>(255.0f);\n}\n\nstruct RowRectVsOut_0\n{\n    @builtin(position) position_0 : vec4<f32>,\n    @location(0) color_0 : vec4<f32>,\n};\n\nstruct RowRectInstance_0\n{\n     x_0 : u32,\n     x2_2 : u32,\n     row_0 : u32,\n     color_1 : u32,\n};\n\nfn rowRectVertex_0( inst_0 : RowRectInstance_0,  vid_2 : u32,  u_2 : ptr<function, RowRectUniforms_std140_0>) -> RowRectVsOut_0\n{\n    var o_0 : RowRectVsOut_0;\n    var _S7 : vec4<f32> = rowRectClipPos_0(inst_0.x_0, inst_0.x2_2, f32(inst_0.row_0), vid_2, &((*u_2)));\n    o_0.position_0 = _S7;\n    o_0.color_0 = unpackRGBA_0(inst_0.color_1);\n    return o_0;\n}\n\nstruct vertexInput_0\n{\n    @location(0) x_1 : u32,\n    @location(1) x2_3 : u32,\n    @location(2) row_1 : u32,\n    @location(3) color_2 : u32,\n};\n\n@vertex\nfn vs_main( _S8 : vertexInput_0, @builtin(vertex_index) vid_3 : u32) -> RowRectVsOut_0\n{\n    var _S9 : RowRectInstance_0 = RowRectInstance_0( _S8.x_1, _S8.x2_3, _S8.row_1, _S8.color_2 );\n    var _S10 : RowRectUniforms_std140_0 = u_0;\n    var _S11 : RowRectVsOut_0 = rowRectVertex_0(_S9, vid_3, &(_S10));\n    return _S11;\n}\n\nstruct pixelOutput_0\n{\n    @location(0) output_0 : vec4<f32>,\n};\n\nstruct pixelInput_0\n{\n    @location(0) color_3 : vec4<f32>,\n};\n\n@fragment\nfn fs_main( _S12 : pixelInput_0, @builtin(position) position_1 : vec4<f32>) -> pixelOutput_0\n{\n    var _S13 : pixelOutput_0 = pixelOutput_0( _S12.color_3 );\n    return _S13;\n}\n\n"
+
+export const GLSL_VERTEX = "#version 300 es\nprecision highp float;\nprecision highp int;\nstruct RowRectUniforms_0\n{\n    vec3 bpRangeX_0;\n    float canvasHeight_0;\n    float minCellDenomPx_0;\n    float minCellPx_0;\n    float zero_0;\n    float rowHeight_0;\n    float rowProportion_0;\n    float scrollTop_0;\n};\n\n\nlayout(std140) uniform Uniforms\n{\n    vec3 bpRangeX_0;\n    float canvasHeight_0;\n    float minCellDenomPx_0;\n    float minCellPx_0;\n    float zero_0;\n    float rowHeight_0;\n    float rowProportion_0;\n    float scrollTop_0;\n}u_0;\n\nvec2 quadLocal_0(uint vid_0)\n{\n\n    uint v_0 = vid_0 % 6U;\n\n    bool _S1 = v_0 == 0U;\n\n    bool _S2;\n\n    if(_S1)\n    {\n\n        _S2 = true;\n\n    }\n    else\n    {\n\n        _S2 = v_0 == 2U;\n\n    }\n\n    if(_S2)\n    {\n\n        _S2 = true;\n\n    }\n    else\n    {\n\n        _S2 = v_0 == 3U;\n\n    }\n\n    float _S3;\n\n    if(_S2)\n    {\n\n        _S3 = 0.0;\n\n    }\n    else\n    {\n\n        _S3 = 1.0;\n\n    }\n    if(_S1)\n    {\n\n        _S2 = true;\n\n    }\n    else\n    {\n\n        _S2 = v_0 == 1U;\n\n    }\n\n    if(_S2)\n    {\n\n        _S2 = true;\n\n    }\n    else\n    {\n\n        _S2 = v_0 == 4U;\n\n    }\n\n    float _S4;\n\n    if(_S2)\n    {\n\n        _S4 = 0.0;\n\n    }\n    else\n    {\n\n        _S4 = 1.0;\n\n    }\n\n    return vec2(_S3, _S4);\n}\n\n\nfloat drawnRowHeightPx_0(float rowHeight_1, float rowProportion_1)\n{\n\n    return max(rowHeight_1 * rowProportion_1, 1.0);\n}\n\nfloat rowBandOffsetPx_0(float rowHeight_2, float rowProportion_2)\n{\n\n    return (rowHeight_2 - drawnRowHeightPx_0(rowHeight_2, rowProportion_2)) * 0.5;\n}\n\n\nstruct RowBand_0\n{\n    float height_0;\n    float offset_0;\n};\n\n\nRowBand_0 rowBandPx_0(float rowHeight_3, float rowProportion_3)\n{\n\n    RowBand_0 band_0;\n    band_0.height_0 = drawnRowHeightPx_0(rowHeight_3, rowProportion_3);\n    band_0.offset_0 = rowBandOffsetPx_0(rowHeight_3, rowProportion_3);\n    return band_0;\n}\n\n\nvec2 hpSplitUint_0(uint value_0)\n{\n\n    uint lo_0 = value_0 & 4095U;\n\n    return vec2(float(value_0 - lo_0), float(lo_0));\n}\n\n\nfloat hpToClipX_0(vec2 splitPos_0, vec3 bpRange_0, float hpZero_0)\n{\n    float step_0 = 2.0 / bpRange_0.z;\n    float _S5 = - (1.0 / hpZero_0);\n\n    return dot(vec3(-1.0, max(splitPos_0.x - bpRange_0.x, _S5), max(splitPos_0.y - bpRange_0.y, _S5)), vec3(1.0, step_0, step_0));\n}\n\n\nfloat extendToMinWidthPx_0(float x1_0, float x2_0, float minWidth_0)\n{\n\n    float dx_0 = x2_0 - x1_0;\n\n    float _S6;\n    if((abs(dx_0)) < minWidth_0)\n    {\n\n        if(dx_0 < 0.0)\n        {\n\n            _S6 = - minWidth_0;\n\n        }\n        else\n        {\n\n            _S6 = minWidth_0;\n\n        }\n\n        _S6 = x1_0 + _S6;\n\n    }\n    else\n    {\n\n        _S6 = x2_0;\n\n    }\n\n    return _S6;\n}\n\nfloat extendToMinWidthX_0(float x1_1, float x2_1, float minWidthPx_0, float canvasWidth_0)\n{\n\n    return extendToMinWidthPx_0(x1_1, x2_1, minWidthPx_0 * 2.0 / canvasWidth_0);\n}\n\n\nfloat yPxToClipY_0(float yPx_0, float canvasHeight_1)\n{\n\n    return 1.0 - yPx_0 / canvasHeight_1 * 2.0;\n}\n\n\nvec4 rowRectClipPos_0(uint startBp_0, uint endBp_0, float rowIndex_0, uint vid_1, RowRectUniforms_0 u_1)\n{\n\n    vec2 local_0 = quadLocal_0(vid_1);\n\n    RowBand_0 band_1 = rowBandPx_0(u_1.rowHeight_0, u_1.rowProportion_0);\n    float rowY_0 = band_1.offset_0 + u_1.rowHeight_0 * rowIndex_0 - u_1.scrollTop_0;\n\n    float sx1_0 = hpToClipX_0(hpSplitUint_0(startBp_0), u_1.bpRangeX_0, u_1.zero_0);\n\n    return vec4(mix(sx1_0, extendToMinWidthX_0(sx1_0, hpToClipX_0(hpSplitUint_0(endBp_0), u_1.bpRangeX_0, u_1.zero_0), u_1.minCellPx_0, u_1.minCellDenomPx_0), local_0.x), yPxToClipY_0(mix(rowY_0, rowY_0 + band_1.height_0, local_0.y), u_1.canvasHeight_0), 0.0, 1.0);\n}\n\n\nvec4 unpackRGBA_0(uint c_0)\n{\n\n    return vec4(float((c_0 >> 0U) & 255U), float((c_0 >> 8U) & 255U), float((c_0 >> 16U) & 255U), float((c_0 >> 24U) & 255U)) / 255.0;\n}\n\n\nstruct RowRectVsOut_0\n{\n    vec4 position_0;\n    vec4 color_0;\n};\n\n\nstruct RowRectInstance_0\n{\n    uint x_0;\n    uint x2_2;\n    uint row_0;\n    uint color_1;\n};\n\n\nRowRectVsOut_0 rowRectVertex_0(RowRectInstance_0 inst_0, uint vid_2, RowRectUniforms_0 u_2)\n{\n\n    RowRectVsOut_0 o_0;\n    o_0.position_0 = rowRectClipPos_0(inst_0.x_0, inst_0.x2_2, float(inst_0.row_0), vid_2, u_2);\n    o_0.color_0 = unpackRGBA_0(inst_0.color_1);\n    return o_0;\n}\n\n\nout vec4 v_color;\n\n\nlayout(location = 0)\nin uint a_x;\n\n\nlayout(location = 1)\nin uint a_x2;\n\n\nlayout(location = 2)\nin uint a_row;\n\n\nlayout(location = 3)\nin uint a_color;\n\n\nvoid main()\n{\n\n    RowRectUniforms_0 _S7 = RowRectUniforms_0(u_0.bpRangeX_0, u_0.canvasHeight_0, u_0.minCellDenomPx_0, u_0.minCellPx_0, u_0.zero_0, u_0.rowHeight_0, u_0.rowProportion_0, u_0.scrollTop_0);\n\n    RowRectInstance_0 _S8 = RowRectInstance_0(a_x, a_x2, a_row, a_color);\n    RowRectVsOut_0 _S9 = rowRectVertex_0(_S8, uint(gl_VertexID), _S7);\n\n    gl_Position = _S9.position_0;\n\n    v_color = _S9.color_0;\n\n    return;\n}\n\n"
+
+export const GLSL_FRAGMENT = "#version 300 es\nprecision highp float;\nprecision highp int;\nlayout(location = 0)\nout vec4 entryPointParam_fs_main_0;\n\n\nin vec4 v_color;\n\n\nvoid main()\n{\n\n    entryPointParam_fs_main_0 = v_color;\n\n    return;\n}\n\n"
+
+export * from './spanMark.iface.generated.ts'

package/src/shaders/spanMark.iface.generated.ts

@@ -0,0 +1,168 @@
+// AUTO-GENERATED by packages/shader-tools/src/shader-codegen from spanMark.slang.
+// Do not edit. Run `pnpm gen:shaders` to regenerate.
+
+import type { VertexAttributeLayout, ShaderBinding } from '@jbrowse/render-core/hal'
+
+export const BINDINGS: readonly ShaderBinding[] = [
+  { index: 1, kind: 'uniform', name: 'u' },
+]
+
+export const VERTS_PER_INSTANCE = 6
+
+export const UNIFORMS_SIZE_BYTES = 48
+
+// Word indices into a Float32Array view over the uniform buffer.
+export const UNIFORM_OFFSET_F32 = {
+  bpRangeX: 0,
+  canvasHeight: 3,
+  minCellDenomPx: 4,
+  minCellPx: 5,
+  zero: 6,
+  rowHeight: 7,
+  rowProportion: 8,
+  scrollTop: 9,
+} as const
+
+
+export interface Uniforms {
+  bpRangeX: [number, number, number]
+  canvasHeight: number
+  minCellDenomPx: number
+  minCellPx: number
+  zero: number
+  rowHeight: number
+  rowProportion: number
+  scrollTop: number
+}
+
+export function writeUniforms(buf: ArrayBuffer, uniforms: Uniforms) {
+  const f32 = new Float32Array(buf)
+  f32[0] = uniforms.bpRangeX[0]
+  f32[1] = uniforms.bpRangeX[1]
+  f32[2] = uniforms.bpRangeX[2]
+  f32[3] = uniforms.canvasHeight
+  f32[4] = uniforms.minCellDenomPx
+  f32[5] = uniforms.minCellPx
+  f32[6] = uniforms.zero
+  f32[7] = uniforms.rowHeight
+  f32[8] = uniforms.rowProportion
+  f32[9] = uniforms.scrollTop
+}
+
+export const INSTANCE_STRIDE_BYTES = 16
+export const INSTANCE_STRIDE_WORDS = 4
+
+// Word indices into a Uint32Array view over the instance buffer.
+export const INSTANCE_OFFSET_U32 = {
+  x: 0,
+  x2: 1,
+  row: 2,
+  color: 3,
+} as const
+
+export const VERTEX_ATTRIBUTES: readonly VertexAttributeLayout[] = [
+  { name: 'a_x', components: 1, type: 'uint', offsetBytes: 0, integer: true },
+  { name: 'a_x2', components: 1, type: 'uint', offsetBytes: 4, integer: true },
+  { name: 'a_row', components: 1, type: 'uint', offsetBytes: 8, integer: true },
+  { name: 'a_color', components: 1, type: 'uint', offsetBytes: 12, integer: true },
+]
+
+export interface InstanceArrays {
+  x: ArrayLike<number>
+  x2: ArrayLike<number>
+  row: ArrayLike<number>
+  color: ArrayLike<number>
+}
+
+export function packInstances(
+  arrays: InstanceArrays,
+  numInstances: number,
+  buf: ArrayBuffer = new ArrayBuffer(numInstances * INSTANCE_STRIDE_BYTES),
+) {
+  const u32 = new Uint32Array(buf)
+  const { x, x2, row, color } = arrays
+  for (let i = 0; i < numInstances; i++) {
+    const o = i * INSTANCE_STRIDE_WORDS
+    u32[o + 0] = x[i]!
+    u32[o + 1] = x2[i]!
+    u32[o + 2] = row[i]!
+    u32[o + 3] = color[i]!
+  }
+  return buf
+}
+
+// Instance `i`'s `x`.
+export function getInstanceX(u32: Uint32Array, i: number) {
+  return u32[i * INSTANCE_STRIDE_WORDS]!
+}
+
+export function setInstanceX(u32: Uint32Array, i: number, v: number) {
+  u32[i * INSTANCE_STRIDE_WORDS] = v
+}
+
+// Instance `i`'s `x2`.
+export function getInstanceX2(u32: Uint32Array, i: number) {
+  return u32[i * INSTANCE_STRIDE_WORDS + 1]!
+}
+
+export function setInstanceX2(u32: Uint32Array, i: number, v: number) {
+  u32[i * INSTANCE_STRIDE_WORDS + 1] = v
+}
+
+// Instance `i`'s `row`.
+export function getInstanceRow(u32: Uint32Array, i: number) {
+  return u32[i * INSTANCE_STRIDE_WORDS + 2]!
+}
+
+export function setInstanceRow(u32: Uint32Array, i: number, v: number) {
+  u32[i * INSTANCE_STRIDE_WORDS + 2] = v
+}
+
+// Instance `i`'s `color`.
+export function getInstanceColor(u32: Uint32Array, i: number) {
+  return u32[i * INSTANCE_STRIDE_WORDS + 3]!
+}
+
+export function setInstanceColor(u32: Uint32Array, i: number, v: number) {
+  u32[i * INSTANCE_STRIDE_WORDS + 3] = v
+}
+
+// Appends instances one at a time, for an encoder that cannot say up front
+// how many it will emit. Seed the constructor with an upper bound and the
+// common path allocates exactly once; the doubling is a correctness
+// backstop, not the expected route.
+export class InstanceWriter {
+  private buf: ArrayBuffer
+  private u32: Uint32Array
+  private capacity: number
+  count = 0
+
+  constructor(capacity: number) {
+    this.capacity = Math.max(1, capacity)
+    this.buf = new ArrayBuffer(this.capacity * INSTANCE_STRIDE_BYTES)
+    this.u32 = new Uint32Array(this.buf)
+  }
+
+  push(x: number, x2: number, row: number, color: number) {
+    if (this.count === this.capacity) {
+      this.capacity *= 2
+      const grown = new ArrayBuffer(this.capacity * INSTANCE_STRIDE_BYTES)
+      new Uint8Array(grown).set(new Uint8Array(this.buf))
+      this.buf = grown
+      this.u32 = new Uint32Array(grown)
+    }
+    const o = this.count * INSTANCE_STRIDE_WORDS
+    this.u32[o] = x
+    this.u32[o + 1] = x2
+    this.u32[o + 2] = row
+    this.u32[o + 3] = color
+    this.count++
+  }
+
+  // A right-sized COPY, not a subarray view — see the class comment. Skipped
+  // entirely when the seed turned out to be exact, which is the common path.
+  finish() {
+    const used = this.count * INSTANCE_STRIDE_BYTES
+    return used === this.buf.byteLength ? this.buf : this.buf.slice(0, used)
+  }
+}

package/src/shaders/spanMark.slang

@@ -0,0 +1,22 @@
+// The `span` mark shape: one instance is a coloured rectangle spanning
+// [x, x2) in absolute genomic coords, on the row band given by the `row`
+// channel. The geometry — row band, hp clip-x span, min-width widening — is
+// `rowRect`'s; this is the entry point that makes it a pass a mark can draw.
+//! targets: wgsl, glsl
+//! instance-writer
+
+import rowRect;
+
+public static const uint VERTS_PER_INSTANCE = 6u;
+
+[[vk::binding(1, 0)]] ConstantBuffer<RowRectUniforms> u;
+
+[shader("vertex")]
+RowRectVsOut vs_main(RowRectInstance inst, uint vid : SV_VertexID) {
+  return rowRectVertex(inst, vid, u);
+}
+
+[shader("fragment")]
+float4 fs_main(RowRectVsOut v) : SV_Target {
+  return v.color;
+}

package/esm/globalRenderingBackend.d.ts

@@ -1,90 +0,0 @@
-import { Canvas2DRenderingBackendBase, GpuRenderingBackendBase } from './renderingBackendBase.ts';
-import type { FrameDimensions, RenderingBackend } from './renderingBackendBase.ts';
-/**
- * Shared contract for monolithic GPU backends (HiC, LD, multi-variant
- * matrix) — displays with no region partitioning. One payload under the
- * `data` key, one draw per frame. Render receives the data directly so
- * Canvas2D backends stay stateless; GPU backends use `upload` to push bytes
- * into a HAL buffer and ignore the `data` arg at render time.
- *
- * A display with a second upload beside the payload — HiC's and LD's colour
- * ramp texture, derived from a setting rather than the fetch — widens `Key`
- * and `Cell` so `upload` takes both cells and tells them apart, while `render`
- * is still handed the payload alone.
- */
-export interface GlobalRenderingBackend<UploadData, RenderState, Key extends string = 'data', Cell = UploadData> extends RenderingBackend {
-    upload(key: Key, data: Cell): void;
-    release(key: Key): void;
-    /**
-     * Paint one frame and report whether real content reached the canvas — the
-     * monolithic twin of `PerRegionRenderingBackend.renderBlocks`, and it answers
-     * for the same reason. `RenderLifecycleMixin` flips `canvasDrawn` (the loading
-     * scrim, `data-display-drawn`, every browser test's wait) only on `true`, so a
-     * tick that drew nothing must say so.
-     *
-     * **This used to return `void`, and the answer was the display's to give.**
-     * Each of the three wrote the same six lines — "data is here, so return
-     * `true`" — beside a renderer whose own guard was strictly narrower: a color
-     * ramp that had not arrived, a zero instance count, an empty HAL buffer. Two
-     * expressions of one fact, and the one that could see what actually happened
-     * was not the one being asked. LD's model even carried a comment explaining
-     * the workaround, which is the usual sign that a signature is wrong rather
-     * than a caller.
-     */
-    render(data: UploadData | null, state: RenderState): boolean;
-}
-/**
- * Canvas2D-side base for `GlobalRenderingBackend` implementations. Inherits the
- * `canvas` + 2D context (and no-op `dispose`) from
- * `Canvas2DRenderingBackendBase`; stubs `upload` (no-op — data flows through
- * `render`).
- *
- * `render` is concrete and runs `prepareCanvas` (DPR-aware backing-store sizing)
- * before handing off to the abstract `draw`, exactly as
- * `Canvas2DPerRegionRenderingBackend` does — so a renderer here can no more
- * forget it and paint blurry on hi-DPI than one over there can. All three
- * subclasses opened with that same call and none of them had to.
- *
- * A null payload still prepares (and so clears) the canvas, then skips the
- * draw: that is the frame where a refetch is in flight and the old picture must
- * not stay up.
- */
-export declare abstract class Canvas2DGlobalRenderingBackend<UploadData, RenderState extends FrameDimensions, Key extends string = 'data', Cell = UploadData> extends Canvas2DRenderingBackendBase implements GlobalRenderingBackend<UploadData, RenderState, Key, Cell> {
-    upload(_key: Key, _cell: Cell): void;
-    release(_key: Key): void;
-    render(data: UploadData | null, state: RenderState): boolean;
-    /**
-     * Paint `data` into `this.ctx` (already DPR-prepared) and answer whether
-     * anything reached it. Delegates to the plugin's pure `drawXxxBlocks`
-     * function, the one SVG export shares.
-     */
-    protected abstract draw(data: UploadData, state: RenderState): boolean;
-}
-/**
- * GPU-side base for `GlobalRenderingBackend` implementations. Inherits the
- * `hal` reference, the pre-allocated uniform scratch buffer, and the
- * HAL-delegating `dispose` from `GpuRenderingBackendBase`. Subclasses implement
- * `upload` and `draw`.
- *
- * `render` is the frame scaffold the per-region base has always had and this
- * one did not: resize the backing store, `beginFrame`/`endFrame`, and hand the
- * middle to `draw`. **The pairing is the point.** `beginFrame` is what clears
- * the canvas, so a frame that draws nothing still has to open and close one or
- * the last picture stays up — and with each subclass writing its own scaffold,
- * that invariant held three times by hand.
- *
- * `release` is a no-op by default: a payload leaving the map is answered by
- * `render` being handed `null`, and `beginFrame` clears the last picture. A
- * subclass whose buffers are worth freeing early overrides it.
- */
-export declare abstract class GpuGlobalRenderingBackend<UploadData, RenderState extends FrameDimensions, Key extends string = 'data', Cell = UploadData> extends GpuRenderingBackendBase implements GlobalRenderingBackend<UploadData, RenderState, Key, Cell> {
-    abstract upload(key: Key, data: Cell): void;
-    release(): void;
-    render(data: UploadData | null, state: RenderState): boolean;
-    /**
-     * Write uniforms and issue the draw passes for one frame, inside an already-
-     * open `beginFrame`/`endFrame`. Return whether anything was drawn — a buffer
-     * the upload has not filled yet is the ordinary reason not to.
-     */
-    protected abstract draw(data: UploadData, state: RenderState): boolean;
-}