@sakuzu/maplibre-gl-draw 2.1.2 → 2.1.4

package/dist/view/renderers/anchored-outline.js

@@ -0,0 +1,352 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { getDashPattern, RENDERING_DEFAULTS } from '../../shared/math/index.js';
+import { resolvePixelRatio } from '../../shared/utils/pixel-ratio.js';
+import { calculateLngLatOffset, createProgram, getProjectionTransitionUniform, OFFSET_MODE_GLSL, } from '../shaders/helpers.js';
+import { ProjectionUniformManager } from '../shaders/projection.js';
+import { TerrainContext } from '../terrain/context.js';
+import { drawBillboardsWithoutDepth } from './point/billboard-depth.js';
+/** Floats per vertex: the offset (x, y in device px), the signed distance across, the distance along */
+const FLOATS_PER_VERTEX = 4;
+const STRIDE = FLOATS_PER_VERTEX * 4;
+/**
+ * The vertices of a closed outline as a triangle strip: two per corner (the two sides of the
+ * line) and the first corner again at the end
+ *
+ * Each vertex is the corner moved along the miter of its two edges by half the width plus one
+ * pixel (the band the HHAA coverage fades in), the same join as StrokeRenderer: a miter longer
+ * than the limit becomes a bevel along the edge that arrives. The distance along the outline is
+ * in CSS px, the unit of the dash patterns.
+ *
+ * @param corners The corners relative to the anchor, in CSS px, in order (not closed)
+ * @param widthPx The width of the line in device px
+ * @param pixelRatio Device px per CSS px
+ * @param miterLimit The longest miter, in half widths
+ * @returns The interleaved vertices (x, y, signed distance, distance), empty for fewer than two
+ *   distinct corners
+ * @internal
+ */
+export function buildOutlineStrip(corners, widthPx, pixelRatio, miterLimit = RENDERING_DEFAULTS.MITER_LIMIT) {
+    // Repeated corners make no edge
+    const ring = corners.filter((corner, i) => {
+        const next = corners[(i + 1) % corners.length];
+        return corners.length === 1 || corner.x !== next.x || corner.y !== next.y;
+    });
+    const n = ring.length;
+    if (n < 2)
+        return new Float32Array(0);
+    const expanded = widthPx / 2 + 1;
+    const unit = (from, to) => {
+        const dx = to.x - from.x;
+        const dy = to.y - from.y;
+        const length = Math.hypot(dx, dy);
+        return { x: dx / length, y: dy / length };
+    };
+    const data = new Float32Array((n + 1) * 2 * FLOATS_PER_VERTEX);
+    let along = 0;
+    for (let i = 0; i <= n; i++) {
+        const corner = ring[i % n];
+        if (i > 0) {
+            const before = ring[i - 1];
+            along += Math.hypot(corner.x - before.x, corner.y - before.y);
+        }
+        const arriving = unit(ring[(i + n - 1) % n], corner);
+        const leaving = unit(corner, ring[(i + 1) % n]);
+        const n1 = { x: -arriving.y, y: arriving.x };
+        const n2 = { x: -leaving.y, y: leaving.x };
+        let normal = n1;
+        let scale = 1;
+        const sum = { x: n1.x + n2.x, y: n1.y + n2.y };
+        const sumLength = Math.hypot(sum.x, sum.y);
+        if (sumLength > 0.001) {
+            const miter = { x: sum.x / sumLength, y: sum.y / sumLength };
+            const cosHalf = miter.x * n1.x + miter.y * n1.y;
+            if (cosHalf > 0.001 && 1 / cosHalf <= miterLimit) {
+                normal = miter;
+                scale = 1 / cosHalf;
+            }
+        }
+        for (const side of [1, -1]) {
+            const base = (i * 2 + (side === 1 ? 0 : 1)) * FLOATS_PER_VERTEX;
+            data[base] = corner.x * pixelRatio + normal.x * side * expanded * scale;
+            data[base + 1] = corner.y * pixelRatio + normal.y * side * expanded * scale;
+            data[base + 2] = side * expanded;
+            data[base + 3] = along;
+        }
+    }
+    return data;
+}
+/**
+ * Draws closed outlines laid in pixels around an anchor projected like a marker
+ *
+ * @internal
+ */
+export class AnchoredOutlineRenderer {
+    constructor(_map, gl, pixelRatio, terrain = new TerrainContext()) {
+        Object.defineProperty(this, "gl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "program", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "variantName", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "projectionUniformManager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "offsetUniforms", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        /** The injected device pixel ratio (read from window each time when not injected) */
+        Object.defineProperty(this, "pixelRatio", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "colorLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "widthLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "pixelToClipLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "anchorOffsetLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "anchorElevationLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "dashArrayLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "dashEnabledLoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "vao", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "vertexBuffer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.gl = gl;
+        this.pixelRatio = pixelRatio;
+        // An outline around an anchor is a symbol: it keeps the height of its anchor on the frames
+        // that lay the surfaces flat, as the marker does
+        this.projectionUniformManager = new ProjectionUniformManager(gl).useTerrainState(terrain);
+        this.vertexBuffer = gl.createBuffer();
+        this.vao = gl.createVertexArray();
+        gl.bindVertexArray(this.vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+        gl.enableVertexAttribArray(0);
+        gl.vertexAttribPointer(0, 2, gl.FLOAT, false, STRIDE, 0); // a_offset
+        gl.enableVertexAttribArray(1);
+        gl.vertexAttribPointer(1, 1, gl.FLOAT, false, STRIDE, 8); // a_side_dist
+        gl.enableVertexAttribArray(2);
+        gl.vertexAttribPointer(2, 1, gl.FLOAT, false, STRIDE, 12); // a_distance
+        gl.bindVertexArray(null);
+    }
+    /** Makes sure the shader of the projection variant exists */
+    ensureShader(shaderData) {
+        if (this.variantName === shaderData.variantName)
+            return;
+        if (this.program)
+            this.gl.deleteProgram(this.program);
+        this.program = this.createShaderProgram(shaderData.vertexShaderPrelude, shaderData.define);
+        this.variantName = shaderData.variantName;
+        this.projectionUniformManager.getLocations(this.program);
+        const gl = this.gl;
+        this.colorLoc = gl.getUniformLocation(this.program, 'u_color');
+        this.widthLoc = gl.getUniformLocation(this.program, 'u_width');
+        this.pixelToClipLoc = gl.getUniformLocation(this.program, 'u_pixel_to_clip');
+        this.anchorOffsetLoc = gl.getUniformLocation(this.program, 'u_anchor_offset');
+        this.anchorElevationLoc = gl.getUniformLocation(this.program, 'u_anchor_elevation_m');
+        this.dashArrayLoc = gl.getUniformLocation(this.program, 'u_dashArray');
+        this.dashEnabledLoc = gl.getUniformLocation(this.program, 'u_dashEnabled');
+    }
+    /** Sets the uniforms of the offset mode (the camera of the copy of the world being drawn) */
+    setOffsetUniforms(uniforms) {
+        this.offsetUniforms = uniforms;
+    }
+    createShaderProgram(prelude, define) {
+        const projTransitionUniform = getProjectionTransitionUniform(prelude);
+        const vertexSource = `#version 300 es
+${prelude}
+${define}
+${projTransitionUniform}${OFFSET_MODE_GLSL}
+layout(location = 0) in vec2 a_offset;     // the vertex around the anchor (device px, y down)
+layout(location = 1) in float a_side_dist; // the signed distance across the line (device px)
+layout(location = 2) in float a_distance;  // the distance along the outline (CSS px)
+
+uniform vec2 u_anchor_offset;       // the anchor relative to the center (64-bit on the CPU)
+uniform float u_anchor_elevation_m; // the height of the anchor, from the CPU as for a marker
+uniform vec2 u_pixel_to_clip;       // device px to clip space
+uniform float u_width;              // the width of the line (device px)
+
+out float v_dist;
+out float v_width;
+out float v_distance;
+
+void main() {
+    // The height comes from the CPU, the source hit testing and the marker use
+    g_anchor_elevation_m = u_anchor_elevation_m;
+    g_anchor_elevation_on = 1.0;
+    vec4 centerClip = project_position_to_clipspace_from_offset(u_anchor_offset, u_projection_matrix);
+    // The depth of the anchor for every vertex: the far side of the globe clips the outline
+    // with its anchor, as it clips a marker
+    gl_Position = vec4(
+        centerClip.xy / centerClip.w + vec2(a_offset.x, -a_offset.y) * u_pixel_to_clip,
+        centerClip.z / centerClip.w,
+        1.0
+    );
+    v_dist = a_side_dist;
+    v_width = u_width / 2.0;
+    v_distance = a_distance;
+}`;
+        const fragmentSource = `#version 300 es
+precision highp float;
+
+uniform vec4 u_color;
+uniform vec4 u_dashArray; // [dashLength, gapLength, patternLength, 0]
+uniform float u_dashEnabled;
+
+in float v_dist;
+in float v_width;
+in float v_distance;
+
+out vec4 fragColor;
+
+// HHAA: the part of the pixel on the inner side of a half plane
+float pixelLine(float x) {
+    return clamp(x + 0.5, 0.0, 1.0);
+}
+
+void main() {
+    if (u_dashEnabled > 0.5) {
+        float patternLength = u_dashArray.z;
+        if (patternLength > 0.0 && mod(v_distance, patternLength) > u_dashArray.x) discard;
+    }
+    float coverage = pixelLine(v_dist + v_width) - pixelLine(v_dist - v_width);
+    // Blending is non-premultiplied, so the coverage goes to the alpha only
+    fragColor = vec4(u_color.rgb, u_color.a * coverage);
+}`;
+        return createProgram(this.gl, vertexSource, fragmentSource);
+    }
+    /**
+     * Draws a closed outline around an anchor
+     *
+     * @param anchor The position the outline is laid around, `[lng, lat]`
+     * @param elevationMeters The height of the anchor (the height its marker is drawn at)
+     * @param corners The corners relative to the anchor's point on the screen, in CSS px
+     * @param style The line (its width is in CSS px)
+     * @param opacity A factor on the opacity of the line (the terrain's ghost of the marker)
+     * @param zoom The zoom of the frame
+     * @param projectionData The projection of the copy of the world being drawn
+     */
+    draw(anchor, elevationMeters, corners, style, opacity, zoom, projectionData) {
+        if (!this.program)
+            return;
+        const gl = this.gl;
+        const pixelRatio = resolvePixelRatio(this.pixelRatio);
+        const widthPx = style.width * pixelRatio;
+        const data = buildOutlineStrip(corners, widthPx, pixelRatio);
+        if (data.length === 0)
+            return;
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, data, gl.DYNAMIC_DRAW);
+        gl.bindVertexArray(this.vao);
+        gl.useProgram(this.program);
+        this.projectionUniformManager.setUniforms(projectionData, zoom, this.offsetUniforms);
+        const center = this.offsetUniforms?.centerLngLat ?? [0, 0];
+        const offset = calculateLngLatOffset([anchor[0], anchor[1]], center);
+        if (this.anchorOffsetLoc)
+            gl.uniform2f(this.anchorOffsetLoc, offset[0], offset[1]);
+        if (this.anchorElevationLoc)
+            gl.uniform1f(this.anchorElevationLoc, elevationMeters);
+        if (this.pixelToClipLoc) {
+            gl.uniform2f(this.pixelToClipLoc, 2 / gl.drawingBufferWidth, 2 / gl.drawingBufferHeight);
+        }
+        if (this.widthLoc)
+            gl.uniform1f(this.widthLoc, widthPx);
+        if (this.colorLoc) {
+            gl.uniform4fv(this.colorLoc, [
+                style.color[0],
+                style.color[1],
+                style.color[2],
+                style.color[3] * style.opacity * opacity,
+            ]);
+        }
+        const dashPattern = style.dashArray ?? getDashPattern(style.lineStyle);
+        const dashed = style.lineStyle !== 'solid' && dashPattern.length >= 2;
+        if (this.dashEnabledLoc)
+            gl.uniform1f(this.dashEnabledLoc, dashed ? 1 : 0);
+        if (dashed && this.dashArrayLoc) {
+            const [dash, gap] = dashPattern;
+            gl.uniform4fv(this.dashArrayLoc, [dash, gap, dash + gap, 0]);
+        }
+        drawBillboardsWithoutDepth(gl, () => {
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, data.length / FLOATS_PER_VERTEX);
+        });
+        gl.bindVertexArray(null);
+    }
+    /** Releases the GPU resources */
+    dispose() {
+        if (this.program) {
+            this.gl.deleteProgram(this.program);
+            this.program = null;
+        }
+        if (this.vao) {
+            this.gl.deleteVertexArray(this.vao);
+            this.vao = null;
+        }
+        if (this.vertexBuffer) {
+            this.gl.deleteBuffer(this.vertexBuffer);
+            this.vertexBuffer = null;
+        }
+    }
+}

package/dist/view/renderers/batch-manager.js

@@ -6,7 +6,7 @@ import { getCircleRadius, getCreatedZoom } from '../../shared/utils/property.js'
 import { densifyPathForGlobe } from '../globe-subdivision.js';
 import { TerrainContext } from '../terrain/context.js';
 import { anchorGhostOpacity } from '../terrain/occlusion.js';
-import { layerDrawFactors, NEUTRAL_DRAW_FACTORS, } from './draw-factors.js';
+import { combineDrawFactors, layerDrawFactors, NEUTRAL_DRAW_FACTORS, } from './draw-factors.js';
 import { getStrokeDashPattern, splitIntoDashes } from './line/dash.js';
 import { toInstancedPointShape, } from './point/point-instance.js';
 /**
@@ -310,12 +310,15 @@ export class BatchManager {
      *
      * @param layer The layer to draw (used to evaluate the style rules, and its opacity is
      *   multiplied into everything the frame draws; no factor when omitted)
+     * @param factors The draw factors of the frame itself (a dataset passes those of its
+     *   `zoomScale`). They are combined with the factors of the layer and multiplied into
+     *   everything the frame draws, the same as on the retained path; no factor when omitted
      */
-    beginFrame(projectionData, zoom, layer) {
+    beginFrame(projectionData, zoom, layer, factors = NEUTRAL_DRAW_FACTORS) {
         this.projectionData = projectionData;
         this.zoom = zoom;
         this.layer = layer;
-        this.factors = layerDrawFactors(layer);
+        this.factors = combineDrawFactors(layerDrawFactors(layer), factors);
         this.currentBatchType = null;
     }
     /**
@@ -408,7 +411,7 @@ export class BatchManager {
             }
             // Shapes that do not support instancing are drawn individually, one point at a time
             // (MultiPoint comes into this function part by part, so they are drawn per point)
-            this.featureDrawer.drawPointShape(coord, this.withLayerOpacity(style), this.zoom, feature.id);
+            this.featureDrawer.drawPointShape(coord, this.withFrameFactors(style), this.zoom, feature.id);
         }
         else {
             // Color, size and stroke are instance attributes, so the batch key only needs the shape
@@ -474,8 +477,9 @@ export class BatchManager {
         // the look does not change).
         const fixedWidth = getCreatedZoom(feature) === undefined;
         const createdZoom = getCreatedZoom(feature) ?? this.zoom;
-        // Compute the effective line width at the current zoom level
-        const effectiveStrokeWidth = strokeStyle.width * 2 ** (this.zoom - createdZoom);
+        // Compute the effective line width at the current zoom level (with the size factor of the
+        // frame, which the shader multiplies into the width, so the dashes follow the drawn width)
+        const effectiveStrokeWidth = strokeStyle.width * 2 ** (this.zoom - createdZoom) * this.factors.scale;
         // For dashed/dotted lines the dashes are computed on the CPU side
         const dashPattern = getStrokeDashPattern(strokeStyle.lineStyle, effectiveStrokeWidth);
         if (dashPattern) {
@@ -588,7 +592,8 @@ export class BatchManager {
         // convention as withFixedWidth; collectPolygons in retained mode does the same).
         const fixedWidth = getCreatedZoom(feature) === undefined;
         const createdZoom = getCreatedZoom(feature) ?? this.zoom;
-        const effectiveStrokeWidth = strokeStyle.width * 2 ** (this.zoom - createdZoom);
+        // The drawn width of the outline (with the size factor of the frame; the dashes follow it)
+        const effectiveStrokeWidth = strokeStyle.width * 2 ** (this.zoom - createdZoom) * this.factors.scale;
         const isDashed = strokeStyle.lineStyle !== 'solid';
         if (strokeStyle.opacity > 0 && !isDashed) {
             // For a solid line: drawn all at once by SDFPolygonRenderer
@@ -618,7 +623,7 @@ export class BatchManager {
             if (fillColor[3] > 0) {
                 this.polygonFillBatch.push({
                     coordinates: rings,
-                    color: this.colorWithLayerOpacity(fillColor),
+                    color: this.colorWithFrameOpacity(fillColor),
                     featureId: feature.id,
                     partIndex,
                 });
@@ -634,7 +639,7 @@ export class BatchManager {
         if (fillColor[3] > 0) {
             this.polygonFillBatch.push({
                 coordinates: rings,
-                color: this.colorWithLayerOpacity(fillColor),
+                color: this.colorWithFrameOpacity(fillColor),
                 featureId,
                 partIndex,
             });
@@ -678,23 +683,26 @@ export class BatchManager {
         }
     }
     /**
-     * A color with the opacity of the layer multiplied into its alpha (for the fill-only polygon
-     * batch, whose colors are per vertex and which has no factor uniform)
+     * A color with the opacity factor of the frame multiplied into its alpha (for the fill-only
+     * polygon batch, whose colors are per vertex and which has no factor uniform)
      */
-    colorWithLayerOpacity(color) {
+    colorWithFrameOpacity(color) {
         const opacity = this.factors.opacity;
         return opacity === 1 ? color : [color[0], color[1], color[2], color[3] * opacity];
     }
     /**
-     * A point style with the opacity of the layer multiplied in (for the per-point renderer, which
-     * has no factor uniform)
+     * A point style with the factors of the frame multiplied in (for the per-point renderer, which
+     * has no factor uniform): the size and the stroke width by the size factor, the opacities by
+     * the opacity factor
      */
-    withLayerOpacity(style) {
-        const opacity = this.factors.opacity;
-        if (opacity === 1)
+    withFrameFactors(style) {
+        const { scale, opacity } = this.factors;
+        if (scale === 1 && opacity === 1)
             return style;
         return {
             ...style,
+            size: style.size * scale,
+            strokeWidth: style.strokeWidth * scale,
             fillOpacity: style.fillOpacity * opacity,
             strokeOpacity: style.strokeOpacity * opacity,
         };

package/dist/view/renderers/draw-factors.d.ts

@@ -10,8 +10,11 @@
  * Conventions:
  *
  * - The default is `NEUTRAL_DRAW_FACTORS` (1x scale, opacity 1), so calls that
- *   pass no factors (Store rendering, immediate mode) look exactly as before,
+ *   pass no factors (the Store rendering, for example) look exactly as before,
  *   down to the pixel
+ * - The immediate-mode frame of a dataset takes its factors through
+ *   `BatchManager.beginFrame`, which combines them with the factors of the layer
+ *   (`combineDrawFactors`)
  * - A uniform is per-program residual state, so even rendering paths that do
  *   not use the factors must write 1 (a value left over from a previous draw
  *   makes another draw come out thinner; this is the same family of accident as
@@ -58,3 +61,10 @@ export declare function sanitizeDrawFactors(factors: {
 export declare function layerDrawFactors(layer: {
     readonly opacity?: number;
 } | null | undefined): RetainedDrawFactors;
+/**
+ * The product of two sets of factors (the frame's own factors over those of the layer)
+ *
+ * Both are taken as already rounded (`sanitizeDrawFactors`, `layerDrawFactors`). Neutral
+ * factors on either side give the other set itself.
+ */
+export declare function combineDrawFactors(a: RetainedDrawFactors, b: RetainedDrawFactors): RetainedDrawFactors;

package/dist/view/renderers/draw-factors.js

@@ -33,3 +33,16 @@ export function layerDrawFactors(layer) {
         return NEUTRAL_DRAW_FACTORS;
     return sanitizeDrawFactors({ scale: 1, opacity });
 }
+/**
+ * The product of two sets of factors (the frame's own factors over those of the layer)
+ *
+ * Both are taken as already rounded (`sanitizeDrawFactors`, `layerDrawFactors`). Neutral
+ * factors on either side give the other set itself.
+ */
+export function combineDrawFactors(a, b) {
+    if (b === NEUTRAL_DRAW_FACTORS || (b.scale === 1 && b.opacity === 1))
+        return a;
+    if (a === NEUTRAL_DRAW_FACTORS || (a.scale === 1 && a.opacity === 1))
+        return b;
+    return { scale: a.scale * b.scale, opacity: a.opacity * b.opacity };
+}

package/dist/view/renderers/line/line-shader.js

@@ -254,6 +254,11 @@ void main() {
     float lineWidth = (strokeWidth > 0.0
         ? strokeWidth * pow(2.0, u_zoom - createdZoom)
         : (strokeWidth < 0.0 ? -strokeWidth : u_width)) * u_size_scale;
+    // Below one pixel the line is drawn one pixel wide and fainter by its width, so the ink per
+    // unit of length follows the width and goes to nothing with it (the caps of every dash
+    // included, which would otherwise keep a blob of a fixed size)
+    float ink = clamp(lineWidth, 0.0, 1.0);
+    lineWidth = max(lineWidth, 1.0);
     float halfWidth = lineWidth / 2.0;
 
     // HHAA: expand by w+1 so that partially covered pixels are included too
@@ -298,7 +303,7 @@ void main() {
     v_linesofar = segmentStart + t * screenSegmentLength;  // cumulative distance (for dashes)
     v_line_pos = linePos;                  // position along the line
     v_seg_length = screenSegmentLength;    // segment length (computed on the GPU)
-    v_color = a_color;                     // line color (instance attribute)
+    v_color = a_color * ink;               // line color (instance attribute), by the ink
 }`;
 }
 /**

package/dist/view/renderers/point/point-instance.d.ts

@@ -55,6 +55,15 @@ export interface PointInstanceData {
  * Cutting the billboard exactly at the outer radius loses the outer half of the antialiasing.
  */
 export declare const POINT_AA_PADDING_PX = 1;
+/**
+ * The smallest outer radius a point is drawn at (device pixels): a diameter of one pixel
+ *
+ * A smaller point cannot be drawn smaller, since the antialiasing band alone is a pixel wide: its
+ * coverage would tend to a blob of a fixed size as the radius goes to 0, and the point would never
+ * fade. Below this radius the shape is drawn at it, fainter by the ratio of the areas
+ * (`pointInkFactor`), so the ink it leaves follows its area and goes to nothing with it.
+ */
+export declare const POINT_MIN_OUTER_PX = 0.5;
 /**
  * SDF boundaries of one instance (device pixels)
  */
@@ -85,6 +94,16 @@ export interface PointSdfEdges {
  * @param sizeScale Size factor at draw time (default 1)
  */
 export declare function pointSdfEdges(fillSizePx: number, strokeWidthPx: number, sizeScale?: number): PointSdfEdges;
+/**
+ * The factor the alpha of a point is multiplied by (the same computation as the shader)
+ *
+ * 1 at an outer radius of `POINT_MIN_OUTER_PX` and above. Below it the point is drawn at that
+ * radius (`pointSdfEdges`), and the factor is the ratio of its true area to the area drawn, so the
+ * ink it leaves follows its area and goes to 0 with it. A radius of 0 or below draws nothing (0).
+ *
+ * @param outerPx The outer radius (radius + stroke width, with the size factor; device pixels)
+ */
+export declare function pointInkFactor(outerPx: number): number;
 /**
  * Point batch of the retained mode (GPU resources)
  *

package/dist/view/renderers/point/point-instance.js

@@ -34,6 +34,15 @@ const AA_HALF_WIDTH_PX = 0.5;
  * Cutting the billboard exactly at the outer radius loses the outer half of the antialiasing.
  */
 export const POINT_AA_PADDING_PX = 1;
+/**
+ * The smallest outer radius a point is drawn at (device pixels): a diameter of one pixel
+ *
+ * A smaller point cannot be drawn smaller, since the antialiasing band alone is a pixel wide: its
+ * coverage would tend to a blob of a fixed size as the radius goes to 0, and the point would never
+ * fade. Below this radius the shape is drawn at it, fainter by the ratio of the areas
+ * (`pointInkFactor`), so the ink it leaves follows its area and goes to nothing with it.
+ */
+export const POINT_MIN_OUTER_PX = 0.5;
 // Stride of the instance data (floats per instance)
 // position(2) + fillColor(4) + strokeColor(4) + size(1) + strokeWidth(1)
 //   + elevation(1) = 13 floats
@@ -58,8 +67,34 @@ const SHAPE_UNIFORM = POINT_SHAPE_CODE;
 export function pointSdfEdges(fillSizePx, strokeWidthPx, sizeScale = 1) {
     const radius = Math.max(0, fillSizePx) * sizeScale;
     const outer = radius + Math.max(0, strokeWidthPx) * sizeScale;
+    // Below a diameter of one pixel the shape is drawn at that diameter (pointInkFactor)
+    if (outer > 0 && outer < POINT_MIN_OUTER_PX) {
+        const grow = POINT_MIN_OUTER_PX / outer;
+        return {
+            radius: radius * grow,
+            outer: POINT_MIN_OUTER_PX,
+            extent: POINT_MIN_OUTER_PX + POINT_AA_PADDING_PX,
+        };
+    }
     return { radius, outer, extent: outer + POINT_AA_PADDING_PX };
 }
+/**
+ * The factor the alpha of a point is multiplied by (the same computation as the shader)
+ *
+ * 1 at an outer radius of `POINT_MIN_OUTER_PX` and above. Below it the point is drawn at that
+ * radius (`pointSdfEdges`), and the factor is the ratio of its true area to the area drawn, so the
+ * ink it leaves follows its area and goes to 0 with it. A radius of 0 or below draws nothing (0).
+ *
+ * @param outerPx The outer radius (radius + stroke width, with the size factor; device pixels)
+ */
+export function pointInkFactor(outerPx) {
+    if (!(outerPx > 0))
+        return 0;
+    if (outerPx >= POINT_MIN_OUTER_PX)
+        return 1;
+    const ratio = outerPx / POINT_MIN_OUTER_PX;
+    return ratio * ratio;
+}
 /**
  * Rounds the origin of the relative coordinates to Float32
  */
@@ -326,6 +361,7 @@ flat out vec4 v_stroke_color;
 out vec2 v_offset_px;
 flat out float v_radius_px;
 flat out float v_outer_px;
+flat out float v_ink;
 
 void main() {
     // The anchor elevation comes from the CPU (the same source as hit testing).
@@ -338,6 +374,15 @@ void main() {
 
     float radius = max(a_instance_size, 0.0) * u_size_scale;
     float outer = radius + max(a_instance_stroke_width, 0.0) * u_size_scale;
+    // Below a diameter of one pixel the shape is drawn at that diameter, fainter by the ratio of
+    // the areas, so the ink it leaves follows its area (pointSdfEdges, pointInkFactor)
+    v_ink = 1.0;
+    if (outer > 0.0 && outer < ${POINT_MIN_OUTER_PX.toFixed(1)}) {
+        float grow = ${POINT_MIN_OUTER_PX.toFixed(1)} / outer;
+        v_ink = 1.0 / (grow * grow);
+        radius *= grow;
+        outer = ${POINT_MIN_OUTER_PX.toFixed(1)};
+    }
     // The billboard is sized as the outer radius plus the antialiasing padding
     // (so that the edge is not clipped)
     vec2 offsetPx = a_quad * (outer + ${POINT_AA_PADDING_PX.toFixed(1)});
@@ -357,6 +402,7 @@ flat in vec4 v_stroke_color;
 in vec2 v_offset_px;
 flat in float v_radius_px;
 flat in float v_outer_px;
+flat in float v_ink;          // the factor of a point below one pixel (1 otherwise)
 uniform float u_opacity;      // opacity factor at draw time (default 1)
 uniform float u_shape;        // shape (0 = circle, 1 = square, 2 = triangle, 3 = star)
 out vec4 fragColor;
@@ -384,7 +430,7 @@ void main() {
     vec4 color = mix(v_stroke_color, v_fill_color, fillMix);
 
     // Blending is non-premultiplied, so the factors are applied to the alpha only
-    fragColor = vec4(color.rgb, color.a * u_opacity * coverage);
+    fragColor = vec4(color.rgb, color.a * u_opacity * coverage * v_ink);
 }`;
         return createProgram(this.gl, vertexSource, fragmentSource);
     }

package/dist/view/renderers/polygon/sdf-polygon.js

@@ -376,6 +376,10 @@ void main() {
         float lineWidth = (strokeWidth >= 0.0
             ? strokeWidth * pow(2.0, u_zoom - createdZoom)
             : -strokeWidth) * u_size_scale;
+        // Below one pixel the outline is drawn one pixel wide and fainter by its width, so the
+        // ink per unit of length follows the width and goes to nothing with it
+        float ink = clamp(lineWidth, 0.0, 1.0);
+        lineWidth = max(lineWidth, 1.0);
         float halfWidth = lineWidth / 2.0;
 
         // Expand by 1 pixel for HHAA
@@ -389,7 +393,7 @@ void main() {
         vec2 finalNdc = (finalScreenPos / u_viewport) * 2.0 - 1.0;
         gl_Position = vec4(finalNdc * clipPos.w, clipPos.z, clipPos.w);
 
-        v_color = a_color;
+        v_color = vec4(a_color.rgb, a_color.a * ink);
         v_type = 1.0;
         v_dist = a_side * expandedHalfWidth;
         v_halfWidth = halfWidth;