@react-x11/components 0.9.0 → 0.11.0

package/src/maps/gl/renderer.ts

@@ -55,7 +55,7 @@ import {
   linkProgram,
 } from './shaders.js';
 import type { GL, Program } from './shaders.js';
-import { quadInset } from './text.js';
+import { QUAD_INSET } from './text.js';
 import type { LabelAtlas } from './text.js';
 
 /** A rectangle in device pixels, top-left origin. */
@@ -89,6 +89,17 @@ export interface RenderFrame {
   height: number;
   /** The camera zoom: what zoom ramps and layer ranges resolve at. */
   zoom: number;
+  /**
+   * How much of each of the style's layers to draw, by the layer's index in
+   * `style.layers` — a layer the camera is zooming past `minZoom` is ramped
+   * out rather than cut, and what is not listed is `drawsAt`'s own answer.
+   *
+   * Per layer rather than per scene because the flips overlap: the zoom a
+   * layer ends at is not where the pyramid changes level, so a scene-wide
+   * cross-fade of the two would keep retargeting, and each retarget is a
+   * step in the picture. An opacity is a number that can move on its own.
+   */
+  layerAlpha?: readonly number[];
   /** Device pixels per logical pixel: what style lengths are multiplied by. */
   scale: number;
   style: PreparedStyle;
@@ -296,7 +307,46 @@ function drawsAt(layer: MapStyleLayer, zoom: number, detail: number): boolean {
   return true;
 }
 
-/** Label rasters taken into the atlas texture per frame at most. */
+/**
+ * How much of a layer this frame draws: its `layerAlpha` where the frame
+ * has one, and otherwise the gate. The ramp is the whole answer where there
+ * is one — whoever set it has already folded in every gate, `detail`
+ * included — but never for a layer the style has turned off or a kind this
+ * renderer does not draw.
+ *
+ * Exported for the tests that watch a swept frame decide.
+ */
+export function gateOf(
+  frame: RenderFrame,
+  index: number,
+  layer: MapStyleLayer,
+  detail: number,
+): number {
+  if (layer.visible === false) return 0;
+  if (layer.type !== 'fill' && layer.type !== 'line' && layer.type !== 'circle')
+    return 0;
+  const ramp = frame.layerAlpha?.[index];
+  if (ramp === undefined) return drawsAt(layer, frame.zoom, detail) ? 1 : 0;
+  return ramp > 0 ? Math.min(1, ramp) : 0;
+}
+
+/**
+ * Which of a style's layers the gates draw, as a `layerAlpha` of ones and
+ * zeroes — what a ramp moves towards. `detail` is adaptive quality's, so a
+ * rung that drops the style's newest layers is something to ramp like any
+ * other gate rather than a step in the picture.
+ */
+export function gatesAt(
+  style: PreparedStyle,
+  zoom: number,
+  detail = 0,
+): number[] {
+  return style.layers.map(({ layer }) =>
+    drawsAt(layer, zoom, detail) ? 1 : 0,
+  );
+}
+
+/** Label fields taken into the atlas texture per frame at most. */
 const ATLAS_UPLOADS_PER_FRAME = 24;
 
 /** GL's own name for "which VAO is bound", which the table may not carry. */
@@ -332,6 +382,9 @@ export class GlMapRenderer {
   private _circle: Program | null = null;
   private _raster: Program | null = null;
   private _atlasTexture: unknown = null;
+  /** RGBA a field is widened into for its upload, reused. Its colour
+   *  channels are white and never written again; only alpha changes. */
+  private _fieldScratch = new Uint8Array(0);
   private _atlasOwner: LabelAtlas | null = null;
   private _stats: GlRenderStats = GlMapRenderer._emptyStats();
   /** Bytes of tile geometry resident on the GPU. */
@@ -428,6 +481,11 @@ export class GlMapRenderer {
       );
       for (let i = 0; i < layers.length; i++) {
         const layer = layers[i].layer;
+        // The gate, not the ramp: what a rung is priced at is what it
+        // settles at. A layer on its way out is still being drawn, and
+        // pricing that would put the next rung's estimate above the budget
+        // — which would drop another layer, which would ramp, which is a
+        // ladder that climbs on its own transients.
         if (!drawsAt(layer, frame.zoom, detail)) continue;
         let records = 0;
         for (let t = 0; t < tiles.length; t++) {
@@ -493,9 +551,13 @@ export class GlMapRenderer {
       stats.fade = Math.min(1, fade.alpha);
     }
 
-    // Even with nothing to draw: the batch's atlas may have rasters waiting
+    // Even with nothing to draw: the batch's atlas may have fields waiting
     // for the texture, and until they are in it nothing of theirs can be.
-    if (labels) stats.labels = this._labels(labels, width, height);
+    if (labels) {
+      this._labels(labels, width, height);
+      // Labels, not instances: an icon's plate and glyph are two more.
+      stats.labels = labels.labels ?? labels.count;
+    }
 
     if (overlays) stats.overlays = this._overlays(overlays, frame);
 
@@ -606,15 +668,20 @@ export class GlMapRenderer {
       }
       for (let i = 0; i < layers.length; i++) {
         const layer = layers[i].layer;
-        if (!drawsAt(layer, frame.zoom, detail)) continue;
+        const gate = gateOf(frame, i, layer, detail);
+        if (gate <= 0) continue;
         if (layer.type === 'fill') {
-          if (this._fill(frame, tiles, i, layer, scissors, edges)) {
+          if (this._fill(frame, tiles, i, layer, scissors, edges, gate)) {
             stats.layers++;
           }
         } else if (layer.type === 'line') {
-          if (this._lines(frame, tiles, i, layer, scissors)) stats.layers++;
+          if (this._lines(frame, tiles, i, layer, scissors, gate)) {
+            stats.layers++;
+          }
         } else if (layer.type === 'circle') {
-          if (this._circles(frame, tiles, i, layer, scissors)) stats.layers++;
+          if (this._circles(frame, tiles, i, layer, scissors, gate)) {
+            stats.layers++;
+          }
         }
       }
     }
@@ -632,10 +699,12 @@ export class GlMapRenderer {
     layer: Extract<MapStyleLayer, { type: 'fill' }>,
     scissors: (number[] | null)[],
     edges: boolean,
+    gate = 1,
   ): boolean {
     const zoom = frame.zoom;
     const opacity =
-      layer.opacity === undefined ? 1 : resolveZoomed(layer.opacity, zoom);
+      (layer.opacity === undefined ? 1 : resolveZoomed(layer.opacity, zoom)) *
+      gate;
     if (opacity <= 0) return false;
     const base = this._color(resolveZoomed(layer.color, zoom));
     if (!base) return false;
@@ -768,12 +837,14 @@ export class GlMapRenderer {
     index: number,
     layer: Extract<MapStyleLayer, { type: 'line' }>,
     scissors: (number[] | null)[],
+    gate = 1,
   ): boolean {
     const zoom = frame.zoom;
     const logical = resolveZoomed(layer.width, zoom);
     if (!(logical > 0)) return false;
     const opacity =
-      layer.opacity === undefined ? 1 : resolveZoomed(layer.opacity, zoom);
+      (layer.opacity === undefined ? 1 : resolveZoomed(layer.opacity, zoom)) *
+      gate;
     if (opacity <= 0) return false;
     const base = this._color(resolveZoomed(layer.color, zoom));
     if (!base) return false;
@@ -805,6 +876,7 @@ export class GlMapRenderer {
     index: number,
     layer: Extract<MapStyleLayer, { type: 'circle' }>,
     scissors: (number[] | null)[],
+    gate = 1,
   ): boolean {
     const zoom = frame.zoom;
     const radius =
@@ -812,7 +884,8 @@ export class GlMapRenderer {
       frame.scale;
     if (!(radius > 0)) return false;
     const opacity =
-      layer.opacity === undefined ? 1 : resolveZoomed(layer.opacity, zoom);
+      (layer.opacity === undefined ? 1 : resolveZoomed(layer.opacity, zoom)) *
+      gate;
     if (opacity <= 0) return false;
     const base = this._color(resolveZoomed(layer.color, zoom));
     if (!base) return false;
@@ -1134,7 +1207,7 @@ export class GlMapRenderer {
       gl,
       LABEL_VERTEX,
       LABEL_FRAGMENT,
-      ['u_viewport', 'u_atlas', 'u_inset', 'u_image'],
+      ['u_viewport', 'u_atlas', 'u_inset', 'u_spread', 'u_image'],
     ));
     gl.activeTexture(gl.TEXTURE0);
     this._uploadAtlas(atlas);
@@ -1155,7 +1228,7 @@ export class GlMapRenderer {
         [ATTRIBUTES.a_rect, 4, 16],
         [ATTRIBUTES.a_ink, 4, 32],
         [ATTRIBUTES.a_halo, 4, 48],
-        [ATTRIBUTES.a_params, 2, 64],
+        [ATTRIBUTES.a_params, 3, 64],
       ];
       for (const [location, size, offset] of fields) {
         gl.enableVertexAttribArray(location);
@@ -1180,7 +1253,8 @@ export class GlMapRenderer {
     const u = program.uniforms;
     gl.uniform2f(u.u_viewport, width, height);
     gl.uniform2f(u.u_atlas, atlas.size, atlas.size);
-    gl.uniform1f(u.u_inset, quadInset(atlas.pad));
+    gl.uniform1f(u.u_inset, QUAD_INSET);
+    gl.uniform1f(u.u_spread, atlas.pad);
     gl.uniform1i(u.u_image, 0);
     gl.drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, batch.count);
     this._stats.drawCalls++;
@@ -1245,14 +1319,14 @@ export class GlMapRenderer {
   }
 
   /**
-   * Take what the atlas has waiting into the texture — a few dozen rasters
+   * Take what the atlas has waiting into the texture — a few dozen fields
    * a frame at most, so a batch landing is spread over frames rather than
    * paid in one. A texture that is new, or another atlas's, starts over:
    * the atlas queues everything again. Leaves the texture bound.
    *
-   * The rasters go up as the text engine read them back — straight RGBA,
-   * white where the glyphs are — because the shader reads only alpha:
-   * premultiplying them first was a pass over every pixel for nothing.
+   * Each field goes up in the alpha channel, the only one the shader
+   * reads; the texture stays RGBA because the one-channel formats are not
+   * in the core profile Apple's GL is.
    */
   private _uploadAtlas(atlas: LabelAtlas): void {
     const gl = this._gl;
@@ -1283,6 +1357,16 @@ export class GlMapRenderer {
       gl.bindTexture(gl.TEXTURE_2D, this._atlasTexture);
     }
     for (const entry of atlas.takeUploads(ATLAS_UPLOADS_PER_FRAME)) {
+      // A field is one byte a texel; the texture is RGBA, because the
+      // one-channel formats are not in a core profile, so it goes up in
+      // alpha — the one channel the shader reads.
+      const texels = entry.width * entry.height;
+      if (this._fieldScratch.length < texels * 4) {
+        this._fieldScratch = new Uint8Array(texels * 4).fill(255);
+      }
+      const rgba = this._fieldScratch.subarray(0, texels * 4);
+      const field = entry.pixels;
+      for (let i = 0; i < texels; i++) rgba[i * 4 + 3] = field[i];
       gl.texSubImage2D(
         gl.TEXTURE_2D,
         0,
@@ -1292,10 +1376,10 @@ export class GlMapRenderer {
         entry.height,
         gl.RGBA,
         gl.UNSIGNED_BYTE,
-        entry.pixels,
+        rgba,
       );
       entry.ready = true;
-      this._stats.uploadBytes += entry.pixels.length;
+      this._stats.uploadBytes += rgba.length;
     }
   }
 

package/src/maps/gl/shaders.ts

@@ -22,6 +22,8 @@
 // A segment that touches a sentinel collapses to a point outside the clip
 // volume — see `buckets.ts` for why sentinels beat an index buffer.
 
+import { SDF_EDGE, SDF_INK_BIAS_PX } from '../../internal/sdf.js';
+
 /** Where each attribute lives, shared by every program. Locations 5-9 are
  *  the label program's, one label per instance (see {@link LABEL_VERTEX}). */
 export const ATTRIBUTES = {
@@ -206,27 +208,28 @@ void main() {
 `;
 
 /**
- * A label: its raster from the atlas as one quad, centred on the anchor and
- * turned to the baseline — which is all a label needs, because placement
- * only ever sets a line label on a straight stretch.
+ * A label: its distance field from the atlas as one quad, centred on the
+ * anchor, turned to the baseline — which is all a label needs, because
+ * placement only ever sets a line label on a straight stretch — and scaled
+ * from the field's base size to the size it is drawn at (`a_params.z`,
+ * device pixels per texel). One field serves every size.
  *
- * A level label is set on **whole pixels**, texel for pixel, so the text is
- * exactly as crisp as the text engine made it; a slanted one is sampled
- * bilinearly, as rotated type always is. The quad is the raster less an
- * inset (`u_inset`): the raster's clear margin is wide enough for a halo to
- * grow into, and the inset is what keeps the halo's samples from reaching
- * past the margin into a neighbouring label.
+ * A level label's quad starts on a **whole pixel**, so type that is not
+ * moving sits on the pixel grid the same way every frame. The quad is the
+ * field less an inset (`u_inset`) texel each side, which keeps the
+ * bilinear samples at its edge inside the field's own margin.
  */
 export const LABEL_VERTEX = `precision highp float;
 attribute vec2 a_corner;
 // centre (device pixels), then cos and sin of the baseline
 attribute vec4 a_anchor;
-// the raster in the atlas: x, y, width, height in texels, margin included
+// the field in the atlas: x, y, width, height in texels, margin included
 attribute vec4 a_rect;
 attribute vec4 a_ink;
 attribute vec4 a_halo;
-// halo radius in pixels, and 1 to set the label on whole pixels
-attribute vec2 a_params;
+// halo radius in device pixels, 1 to set the label on whole pixels, and
+// device pixels per field texel
+attribute vec3 a_params;
 uniform vec2 u_viewport;
 uniform vec2 u_atlas;
 uniform float u_inset;
@@ -234,9 +237,11 @@ varying vec2 v_uv;
 varying vec4 v_ink;
 varying vec4 v_halo;
 varying float v_radius;
+varying float v_scale;
 void main() {
   vec2 corner = vec2(a_corner.x, a_corner.y * 0.5 + 0.5);
-  vec2 size = a_rect.zw - 2.0 * u_inset;
+  vec2 texels = a_rect.zw - 2.0 * u_inset;
+  vec2 size = texels * a_params.z;
   vec2 p;
   if (a_params.y > 0.5) {
     p = floor(a_anchor.xy - size * 0.5 + 0.5) + corner * size;
@@ -246,41 +251,39 @@ void main() {
     p = a_anchor.xy + vec2(local.x * axis.x - local.y * axis.y,
                            local.x * axis.y + local.y * axis.x);
   }
-  v_uv = (a_rect.xy + u_inset + corner * size) / u_atlas;
+  v_uv = (a_rect.xy + u_inset + corner * texels) / u_atlas;
   v_ink = a_ink;
   v_halo = a_halo;
   v_radius = a_params.x;
+  v_scale = a_params.z;
   gl_Position = vec4(p.x / u_viewport.x * 2.0 - 1.0, 1.0 - p.y / u_viewport.y * 2.0, 0.0, 1.0);
 }
 `;
 
 /**
- * Coverage in, colour out: the ink where the glyphs are, and under it a
- * halo — the coverage *dilated* by the halo's radius, as the greatest
- * coverage on two rings of samples around the pixel. Dilating here rather
- * than when rasterizing is what lets one raster serve every halo width and
- * colour a style asks for; the samples cost nothing next to the few
- * thousand pixels a frame's labels cover.
+ * Distance in, colour out. The field says how far this pixel is from the
+ * glyphs' edge — in texels, `u_spread` of them across the byte range, and
+ * so in device pixels once scaled — and ink is the pixel of that distance
+ * nearest the edge, antialiased across one device pixel whatever size the
+ * label is drawn at. The halo is the same edge pushed out by its radius:
+ * one texture read, where a halo dilated from coverage took thirty-three,
+ * and exactly as wide as the style asks up to the field's reach.
  */
 export const LABEL_FRAGMENT = `precision highp float;
 uniform sampler2D u_image;
-uniform vec2 u_atlas;
+uniform float u_spread;
 varying vec2 v_uv;
 varying vec4 v_ink;
 varying vec4 v_halo;
 varying float v_radius;
+varying float v_scale;
 void main() {
-  float ink = texture2D(u_image, v_uv).a;
-  float halo = ink;
-  if (v_radius > 0.0) {
-    vec2 reach = vec2(v_radius) / u_atlas;
-    for (int i = 0; i < 16; i++) {
-      float a = float(i) * 0.3926991;
-      vec2 d = vec2(cos(a), sin(a)) * reach;
-      halo = max(halo, texture2D(u_image, v_uv + d).a);
-      halo = max(halo, texture2D(u_image, v_uv + d * 0.5).a);
-    }
-  }
+  float field = texture2D(u_image, v_uv).a;
+  // Device pixels past the glyphs' edge: positive outside, negative in.
+  float d = (${SDF_EDGE.toFixed(4)} - field) * u_spread * v_scale;
+  // The ink's edge a little outside the outline (SDF_INK_BIAS_PX).
+  float ink = clamp(0.5 + ${SDF_INK_BIAS_PX.toFixed(2)} - d, 0.0, 1.0);
+  float halo = v_radius > 0.0 ? clamp(0.5 + v_radius - d, 0.0, 1.0) : 0.0;
   vec4 color = v_ink * ink + v_halo * (halo * (1.0 - ink));
   if (color.a <= 0.0) discard;
   gl_FragColor = color;

package/src/maps/gl/store.ts

@@ -20,6 +20,7 @@
 // needs a serializer.
 import { parseVectorTile } from '../sources.js';
 import type { MapSource, TileData } from '../sources.js';
+import { FILL_DEPTH } from '../proj.js';
 import type { TileId } from '../proj.js';
 import type { PreparedStyle } from '../paint.js';
 import type { MapStyleLayer } from '../style.js';
@@ -96,6 +97,9 @@ export class GlTileStore implements TileLookup {
   private _inFlight = 0;
   private _frame = 0;
   private _disposed = false;
+  /** What {@link holds} answers from: built when first asked, and dropped
+   *  whenever a tile gets an answer or loses one. */
+  private _held: Map<string, 'here' | 'below'> | null = null;
   private readonly _pool: BuildPool | null;
   /** Bucket builds and their cost on this thread, for a HUD. */
   built = 0;
@@ -151,6 +155,33 @@ export class GlTileStore implements TileLookup {
     return entry.data ?? undefined;
   }
 
+  /**
+   * Whether this store has an answer for `tile` (`'here'`), for only tiles
+   * under it within `FILL_DEPTH` levels (`'below'`), or neither — the
+   * cover's way to search under a hole without a `get` for every tile
+   * there, which would stamp a tile still loading and keep its load going.
+   */
+  holds(tile: TileId): 'here' | 'below' | undefined {
+    let held = this._held;
+    if (!held) {
+      held = new Map();
+      for (const [k, entry] of this._entries) {
+        if (entry.data === null && entry.state !== 'empty') continue;
+        held.set(k, 'here');
+        let { z, x, y } = entry.tile;
+        for (let up = 1; up <= FILL_DEPTH && z > 0; up++) {
+          z--;
+          x >>= 1;
+          y >>= 1;
+          const above = key({ z, x, y });
+          if (!held.has(above)) held.set(above, 'below');
+        }
+      }
+      this._held = held;
+    }
+    return held.get(key(tile));
+  }
+
   /** A new frame: what the cover asks for from here on is this frame's. */
   tick(): void {
     this._frame++;
@@ -218,6 +249,7 @@ export class GlTileStore implements TileLookup {
         (data: TileData) => {
           if (this._disposed || aborted) return;
           entry.failures = 0;
+          this._held = null;
           if (data && data.kind === 'vector' && data.data.length > 0) {
             entry.bytes = data.data;
             entry.state = 'loaded';
@@ -308,22 +340,28 @@ export class GlTileStore implements TileLookup {
         if (!entry.bytes) continue;
         entry.state = 'building';
         const style = this._style.id;
-        entry.job = pool.build(entry.bytes, this._style, (result) => {
-          if (this._disposed || entry.job === 0) return;
-          entry.job = 0;
-          if (!this._entries.has(key(entry.tile))) return;
-          if (result.data && style === this._style.id) {
-            entry.data = result.data;
-            entry.state = 'ready';
-          } else if (result.data) {
-            // Built for a style that has since been replaced: build again.
-            entry.state = 'loaded';
-            this._queue.push(entry);
-          } else {
-            entry.state = 'empty';
-          }
-          this._onChange();
-        });
+        entry.job = pool.build(
+          entry.bytes,
+          entry.tile,
+          this._style,
+          (result) => {
+            if (this._disposed || entry.job === 0) return;
+            entry.job = 0;
+            if (!this._entries.has(key(entry.tile))) return;
+            this._held = null;
+            if (result.data && style === this._style.id) {
+              entry.data = result.data;
+              entry.state = 'ready';
+            } else if (result.data) {
+              // Built for a style that has since been replaced: build again.
+              entry.state = 'loaded';
+              this._queue.push(entry);
+            } else {
+              entry.state = 'empty';
+            }
+            this._onChange();
+          },
+        );
       }
       return false;
     }
@@ -332,11 +370,13 @@ export class GlTileStore implements TileLookup {
       first = false;
       const entry = this._queue.shift()!;
       if (!entry.bytes) continue;
+      this._held = null;
       const started = now();
       try {
         entry.data = buildTileBuckets(
           parseVectorTile(entry.bytes),
           this._prepared,
+          entry.tile,
         );
         entry.state = 'ready';
       } catch {
@@ -414,6 +454,7 @@ export class GlTileStore implements TileLookup {
       if (excess <= 0) break;
       if (entry.data) release(entry.data);
       this._entries.delete(k);
+      this._held = null;
       excess--;
     }
     this._queue = this._queue.filter((e) => this._entries.has(key(e.tile)));
@@ -425,6 +466,7 @@ export class GlTileStore implements TileLookup {
       if (entry.data) release(entry.data);
     }
     this._entries.clear();
+    this._held = null;
     this._queue = [];
     this._waiting = [];
     this._pool?.terminate();
@@ -510,6 +552,7 @@ class BuildPool {
 
   build(
     bytes: Uint8Array,
+    tile: TileId,
     style: { id: number; layers: MapStyleLayer[] },
     done: (result: BuildResult) => void,
   ): number {
@@ -530,7 +573,13 @@ class BuildPool {
     const copy = bytes.slice();
     slot.busy++;
     slot.worker.postMessage(
-      { type: 'build', job, style: style.id, bytes: copy },
+      {
+        type: 'build',
+        job,
+        style: style.id,
+        bytes: copy,
+        tile: { z: tile.z, x: tile.x, y: tile.y },
+      },
       [copy.buffer as ArrayBuffer],
     );
     return job;