@sakuzu/maplibre-gl-draw 2.0.0 → 2.1.1

package/dist/view/terrain/drape/pass.d.ts

@@ -25,8 +25,8 @@ export declare const DRAPE_MAX_VERTICES = 4000000;
 export interface DrapeCollectResult {
     /** The elements in draw order */
     readonly elements: DrapeElement[];
-    /** The IDs of the Store features that cannot be put on the drape (points, images, dashed
-     * lines and so on) */
+    /** The IDs of the Store features that cannot be put on the drape (points, images and so
+     * on) */
     readonly excluded: Set<string>;
     /** The breaks in the stacking order (the positions of the images; dataset order =
      * ascending afterElements) */
@@ -98,8 +98,13 @@ export interface DrapeDatasetSource {
  * It is not narrowed down by the view. Narrowing it down would change the element order every
  * time the view moves and require rebuilding the tile indices (the narrowing down within a
  * tile is done by `binTile` using the bounding boxes).
+ *
+ * @param pixelRatio The rendering pixel ratio, for widths fixed in screen pixels (the rendering
+ *   scale included; `resolvePixelRatio`)
+ * @param contentPixelRatio The rendering pixel ratio for widths that follow the zoom (the
+ *   rendering scale not applied; `resolveContentPixelRatio`)
  */
-export declare function collectDrapeElements(store: Store, styles: RetainedStyleResolver, pixelRatio: number, datasets: readonly DrapeDatasetSource[]): DrapeCollectResult;
+export declare function collectDrapeElements(store: Store, styles: RetainedStyleResolver, pixelRatio: number, contentPixelRatio: number, datasets: readonly DrapeDatasetSource[]): DrapeCollectResult;
 /**
  * Whether the analytic drape may be used
  *

package/dist/view/terrain/drape/pass.js

@@ -20,6 +20,7 @@ import { coordinatesOf } from '../../../shared/utils/coordinates.js';
 import { getCreatedZoom } from '../../../shared/utils/property.js';
 import { getDisplayFeatures, isLocallyHidden } from '../../../store/local-visibility.js';
 import { layerDrawFactors } from '../../renderers/draw-factors.js';
+import { dashCoefficientsOf } from '../../renderers/line/dash.js';
 import { drapeSelectionKey, } from './binning.js';
 import { drapeBoundsOf, drapeGeometryOf } from './geometry.js';
 import { DRAPE_MAX_SOURCES } from './renderer.js';
@@ -74,8 +75,13 @@ export function drapeLayerSource(layerIndex, datasetCount) {
  * It is not narrowed down by the view. Narrowing it down would change the element order every
  * time the view moves and require rebuilding the tile indices (the narrowing down within a
  * tile is done by `binTile` using the bounding boxes).
+ *
+ * @param pixelRatio The rendering pixel ratio, for widths fixed in screen pixels (the rendering
+ *   scale included; `resolvePixelRatio`)
+ * @param contentPixelRatio The rendering pixel ratio for widths that follow the zoom (the
+ *   rendering scale not applied; `resolveContentPixelRatio`)
  */
-export function collectDrapeElements(store, styles, pixelRatio, datasets) {
+export function collectDrapeElements(store, styles, pixelRatio, contentPixelRatio, datasets) {
     const visible = getDisplayFeatures(store);
     const byLayer = new Map();
     for (const feature of visible) {
@@ -97,6 +103,7 @@ export function collectDrapeElements(store, styles, pixelRatio, datasets) {
         drapedDatasets: new Set(),
         styles,
         pixelRatio,
+        contentPixelRatio,
         layerSources: new Map(),
     };
     const byId = new Map();
@@ -168,21 +175,13 @@ function collectStoreFeature(context, feature, layer, source, bakedOpacity) {
     }
     if (feature.type === 'Polygon' || feature.type === 'MultiPolygon') {
         const { fillColor, strokeStyle } = context.styles.getPolygonStyles(feature, layer);
-        // Dashed lines are not put through the analytic evaluation (solving the accumulated
-        // distance along the outline from the pixel is not implemented). Drawing them as solid
-        // lines would change the appearance, so features with dashed lines are routed to the
-        // previous vertex displacement path.
-        if (strokeStyle.lineStyle !== 'solid') {
-            context.excluded.add(feature.id);
-            return;
-        }
         const hasStroke = strokeStyle.opacity > 0 && strokeStyle.width > 0;
         const rings = polygonRings(feature);
         if (rings.length === 0)
             return;
         if (fillColor[3] <= 0 && !hasStroke)
             return;
-        const polygonWidth = widthOf(feature, strokeStyle.width, context.pixelRatio);
+        const polygonWidth = widthOf(feature, strokeStyle.width, context);
         pushElement(context, feature, 0, rings, {
             fill: [fillColor[0], fillColor[1], fillColor[2], fillColor[3] * bakedOpacity],
             stroke: [
@@ -192,6 +191,7 @@ function collectStoreFeature(context, feature, layer, source, bakedOpacity) {
                 strokeStyle.color[3] * (hasStroke ? strokeStyle.opacity : 0) * bakedOpacity,
             ],
             strokeWidthPx: hasStroke ? polygonWidth.px : 0,
+            dash: dashOf(strokeStyle.lineStyle, polygonWidth),
             source,
             widthZoom: polygonWidth.zoom,
             // A Store selection is expressed by the selection UI (the box and the handles). The
@@ -201,16 +201,12 @@ function collectStoreFeature(context, feature, layer, source, bakedOpacity) {
         return;
     }
     const strokeStyle = context.styles.getLineStringStrokeStyle(feature, layer);
-    if (strokeStyle.lineStyle !== 'solid') {
-        context.excluded.add(feature.id);
-        return;
-    }
     if (strokeStyle.opacity <= 0 || strokeStyle.width <= 0)
         return;
     const paths = linePaths(feature);
     if (paths.length === 0)
         return;
-    const lineWidth = widthOf(feature, strokeStyle.width, context.pixelRatio);
+    const lineWidth = widthOf(feature, strokeStyle.width, context);
     pushElement(context, feature, 1, paths, {
         fill: [0, 0, 0, 0],
         stroke: [
@@ -220,6 +216,7 @@ function collectStoreFeature(context, feature, layer, source, bakedOpacity) {
             strokeStyle.color[3] * strokeStyle.opacity * bakedOpacity,
         ],
         strokeWidthPx: lineWidth.px,
+        dash: dashOf(strokeStyle.lineStyle, lineWidth),
         source,
         widthZoom: lineWidth.zoom,
         selectionKey: '',
@@ -243,16 +240,12 @@ function collectDataset(context, dataset, source) {
         if (feature.type === 'Polygon' || feature.type === 'MultiPolygon') {
             const { fillColor, strokeStyle } = context.styles.getPolygonStyles(feature);
             const hasStroke = strokeStyle.opacity > 0 && strokeStyle.width > 0;
-            // A dashed outline is drawn by the immediate path on the retained batch side (the
-            // paired test)
-            if (hasStroke && strokeStyle.lineStyle !== 'solid')
-                continue;
             if (!hasStroke && fillColor[3] <= 0)
                 continue;
             const rings = polygonRings(feature);
             if (rings.length === 0)
                 continue;
-            const width = widthOf(feature, strokeStyle.width, context.pixelRatio);
+            const width = widthOf(feature, strokeStyle.width, context);
             pushElement(context, coordinatesOf(feature), 0, rings, {
                 fill: fillColor,
                 stroke: [
@@ -262,6 +255,7 @@ function collectDataset(context, dataset, source) {
                     hasStroke ? strokeStyle.color[3] : 0,
                 ],
                 strokeWidthPx: hasStroke ? width.px : 0,
+                dash: dashOf(strokeStyle.lineStyle, width),
                 source,
                 widthZoom: width.zoom,
                 selectionKey: drapeSelectionKey(dataset.id, feature.id),
@@ -274,14 +268,12 @@ function collectDataset(context, dataset, source) {
             continue;
         }
         const strokeStyle = context.styles.getLineStringStrokeStyle(feature);
-        if (strokeStyle.lineStyle !== 'solid')
-            continue;
         if (strokeStyle.opacity <= 0 || strokeStyle.width <= 0)
             continue;
         const paths = linePaths(feature);
         if (paths.length === 0)
             continue;
-        const width = widthOf(feature, strokeStyle.width, context.pixelRatio);
+        const width = widthOf(feature, strokeStyle.width, context);
         pushElement(context, coordinatesOf(feature), 1, paths, {
             fill: [0, 0, 0, 0],
             stroke: [
@@ -291,6 +283,7 @@ function collectDataset(context, dataset, source) {
                 strokeStyle.color[3] * strokeStyle.opacity,
             ],
             strokeWidthPx: width.px,
+            dash: dashOf(strokeStyle.lineStyle, width),
             source,
             widthZoom: width.zoom,
             selectionKey: drapeSelectionKey(dataset.id, feature.id),
@@ -301,15 +294,31 @@ function collectDataset(context, dataset, source) {
  * Resolves the line width with the same convention as the retained batch path
  *
  * A feature without a `createdZoom` is fixed in screen pixels (the rendering scale applies),
- * and a feature with one scales by `2^(zoom - createdZoom)`. So that the thickness does not
- * change with the presence of terrain, the drape follows the same convention.
+ * and a feature with one scales by `2^(zoom - createdZoom)` (the device pixel ratio applies,
+ * the rendering scale does not). So that the thickness does not change with the presence of
+ * terrain, the drape follows the same convention.
  */
-function widthOf(feature, width, pixelRatio) {
+function widthOf(feature, width, ratios) {
     const createdZoom = getCreatedZoom(feature);
     if (createdZoom !== undefined && Number.isFinite(createdZoom)) {
-        return { px: width, zoom: createdZoom };
+        const ratio = ratios.contentPixelRatio;
+        return { px: width * ratio, zoom: createdZoom, ratio };
     }
-    return { px: width * pixelRatio, zoom: -1 };
+    return { px: width * ratios.pixelRatio, zoom: -1, ratio: ratios.pixelRatio };
+}
+/**
+ * The dash pattern of an outline, or null for a solid one
+ *
+ * The coefficients come from the table the subdividing path uses (`dash.ts`), and the
+ * shader turns them into the dash and the gap of the width the line has in the frame, in
+ * CSS pixels as the subdividing path measures them: the pixel ratio the width was resolved
+ * with goes along to take back out.
+ */
+function dashOf(lineStyle, width) {
+    const coefficients = dashCoefficientsOf(lineStyle);
+    if (!coefficients || width.ratio <= 0)
+        return null;
+    return { ...coefficients, pixelRatio: width.ratio };
 }
 /** The rings of a polygon (with the closing point dropped) */
 function polygonRings(feature) {
@@ -343,6 +352,8 @@ function pushElement(context, cacheKey, kind, paths, style) {
         // is not converted)
         geometry: () => drapeGeometryOf(cacheKey, paths, kind === 0),
         ...style,
+        // An outline that is not drawn has no pattern to lay out
+        dash: style.strokeWidthPx > 0 ? style.dash : null,
     });
     context.edgeCount += edges;
 }

package/dist/view/terrain/drape/renderer.d.ts

@@ -26,6 +26,13 @@ import { type DrapePackBuilder } from './bin-store.js';
 import { EDGE_UNITS } from './edge-constrain.js';
 import type { ResolvedTileEdges } from './stitch.js';
 export { EDGE_UNITS };
+/**
+ * The texture unit of the starts of the edges along their paths
+ *
+ * 5 and 7 to 9 hold the DEMs of the edges (`EDGE_UNITS`) and 6 the DEM atlas, so it comes after
+ * them (WebGL2 guarantees 16 units to a fragment shader).
+ */
+export declare const DRAPE_EDGE_START_UNIT = 10;
 /**
  * Upper limit on the sources of the factors
  *
@@ -92,6 +99,8 @@ export interface DrapeTileDraw {
     readonly grid: number;
     /** The ground size of this tile (meters). Used to compute the shading gradient */
     readonly groundMeters: number;
+    /** The zoom of this tile (it scales the lengths of the edges into dash pattern pixels) */
+    readonly tileZ: number;
     /**
      * The constraint for each edge (resolving T-junctions)
      *
@@ -123,10 +132,12 @@ export declare class DrapeRenderer {
     private variantName;
     private mesh;
     private edgeTex;
+    private edgeStartTex;
     private runTex;
     private cellTex;
     private styleTex;
     private edgeTexSize;
+    private edgeStartTexSize;
     private runTexSize;
     private cellTexSize;
     private styleTexSize;
@@ -179,6 +190,8 @@ export declare class DrapeRenderer {
      *
      * texStorage2D is immutable, so the texture is recreated whenever the required
      * size changes (once recreated, everything is sent again).
+     *
+     * @param channels The numbers per texel: 4 (RGBA32F) or 1 (R32F)
      */
     private uploadTexture;
 }

package/dist/view/terrain/drape/renderer.js

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 import { SELECTION_HIGHLIGHT_FILL_OPACITY, SELECTION_HIGHLIGHT_RGB, SELECTION_HIGHLIGHT_STROKE_EXTRA, } from '../../../shared/config/selection-highlight.js';
 import { createProgram } from '../../shaders/helpers.js';
-import { DRAPE_SELECTION_TEXEL, DRAPE_STYLE_TEXELS } from './bin-store.js';
+import { DRAPE_DASH_TEXEL, DRAPE_SELECTION_TEXEL, DRAPE_STYLE_TEXELS, } from './bin-store.js';
 import { applyEdgeConstrainUniforms, EDGE_CONSTRAIN_GLSL, EDGE_CONSTRAIN_UNIFORMS, EDGE_UNITS, } from './edge-constrain.js';
 import { createTerrainMeshBuffers, disposeTerrainMeshBuffers, TILE_EXTENT, } from './mesh.js';
 import { applyDrapeProjectionUniforms, applyDrapeTerrainUniforms, DRAPE_PROJECTION_UNIFORMS, DRAPE_TERRAIN_UNIFORMS, TERRAIN_SAMPLE_GLSL, TERRAIN_SHADE_GLSL, } from './shared.js';
@@ -21,6 +21,15 @@ const UNIT_EDGE = 1;
 const UNIT_RUN = 2;
 const UNIT_CELL = 3;
 const UNIT_STYLE = 4;
+/**
+ * The texture unit of the starts of the edges along their paths
+ *
+ * 5 and 7 to 9 hold the DEMs of the edges (`EDGE_UNITS`) and 6 the DEM atlas, so it comes after
+ * them (WebGL2 guarantees 16 units to a fragment shader).
+ */
+export const DRAPE_EDGE_START_UNIT = 10;
+/** The pixels of a 512-pixel tile, the size the dash patterns are measured in */
+const DASH_TILE_PX = 512;
 /**
  * Upper limit on the sources of the factors
  *
@@ -98,6 +107,8 @@ uniform sampler2D u_edge_tex;
 uniform sampler2D u_run_tex;
 uniform sampler2D u_cell_tex;
 uniform sampler2D u_style_tex;
+// Where each edge starts along its path (Mercator units), in step with u_edge_tex
+uniform sampler2D u_edge_start_tex;
 uniform int u_data_width;
 uniform int u_cell_base;
 uniform float u_cells;
@@ -128,6 +139,11 @@ uniform vec2 u_paint_range;
 // Whether to compose the selection highlight in this draw (1 only for the final
 // segment)
 uniform float u_emit_selection;
+// The pixels of a dash pattern per unit of the Mercator world (512 * 2^zoom) and per
+// unit of this tile (512 * 2^(zoom - tile zoom)). A pattern is measured the way the
+// subdividing path measures it: in pixels of the flat map at the zoom of the frame
+uniform float u_dash_world_px;
+uniform float u_dash_tile_px;
 
 out vec4 fragColor;
 
@@ -153,12 +169,42 @@ bool crosses(vec2 p, vec2 q, vec2 a, vec2 b) {
     return (d1 * d2 < 0.0) && (d3 * d4 < 0.0);
 }
 
-// The shortest vector from a point to a segment (in tile-local coordinates)
-vec2 closestVector(vec2 p, vec2 a, vec2 b) {
+// The shortest vector from the origin to a segment
+vec2 closestVector(vec2 a, vec2 b) {
     vec2 ab = b - a;
     float len2 = dot(ab, ab);
-    float t = len2 > 0.0 ? clamp(dot(p - a, ab) / len2, 0.0, 1.0) : 0.0;
-    return p - (a + ab * t);
+    float t = len2 > 0.0 ? clamp(-dot(a, ab) / len2, 0.0, 1.0) : 0.0;
+    return a + ab * t;
+}
+
+// The screen distance from the pixel to the dashes of a pattern on one edge
+//
+// sa and sb are the ends of the edge on the screen, around the pixel. start and len are
+// where the edge starts along its path and how long it is, and dash and period those of
+// the pattern (all in pattern pixels). The place along the edge is taken where the pixel
+// is closest to it on the screen, so the dash picked is the one closest on the screen.
+// The dash there and the next one are measured: between them lies a gap, and the pixel
+// is closer to one of their ends. A dash is cut where the edge ends; the dash goes on
+// on the next edge, which draws its own part, and the two parts meet in a round joint
+// as a solid line does. Each part is a segment with round caps, so a dash gets the
+// round caps of the subdividing path at its ends.
+float dashDistance(vec2 sa, vec2 sb, float start, float len, float dash, float period) {
+    if (len <= 0.0) return 1.0e9;
+    vec2 ab = sb - sa;
+    float len2 = dot(ab, ab);
+    float u = len2 > 0.0 ? clamp(-dot(sa, ab) / len2, 0.0, 1.0) : 0.0;
+    float k = floor((start + u * len) / period);
+    float best = 1.0e9;
+    for (int i = 0; i < 2; i++) {
+        float from = (k + float(i)) * period;
+        float u0 = (from - start) / len;
+        float u1 = (from + dash - start) / len;
+        if (u1 <= 0.0 || u0 >= 1.0) continue;
+        u0 = clamp(u0, 0.0, 1.0);
+        u1 = clamp(u1, 0.0, 1.0);
+        best = min(best, length(closestVector(sa + ab * u0, sa + ab * u1)));
+    }
+    return best;
 }
 
 // Compose on top (premultiplied alpha)
@@ -224,20 +270,12 @@ void main() {
                 > 0.5;
         if (!paints && !selected) continue;
 
-        float minDist = 1.0e9;
-        for (int e = 0; e < edgeCount; e++) {
-            vec4 seg = fetchData(u_edge_tex, edgeStart + e);
-            vec2 a = seg.xy;
-            vec2 b = seg.zw;
-            if (crosses(origin, p, a, b)) inside = !inside;
-            vec2 offset = closestVector(p, a, b);
-            minDist = min(minDist, length(jacobianInverse * offset));
-        }
-
         int styleAt = elementIndex * ${DRAPE_STYLE_TEXELS};
         vec4 fill = fetchData(u_style_tex, styleAt);
         vec4 stroke = fetchData(u_style_tex, styleAt + 1);
         vec4 params = fetchData(u_style_tex, styleAt + 2);
+        // (a, b, c, the physical pixels of the width per CSS pixel; 0 for a solid outline)
+        vec4 dashSpec = fetchData(u_style_tex, styleAt + ${DRAPE_DASH_TEXEL});
         int source = int(params.z);
         vec2 factors = source >= 0 && source < ${DRAPE_MAX_SOURCES}
             ? u_source_factors[source]
@@ -248,6 +286,49 @@ void main() {
         float halfWidth = params.x * 0.5 * factors.y * widthScale;
         bool isPolygon = params.y < 0.5;
 
+        // A dashed outline: the dash and the gap follow from the width the line has in
+        // this frame (in CSS pixels), with the formulas of the subdividing path
+        // (dash.ts): dash = max(a, b * w), gap = max(w + 1, c * w)
+        bool dashed = dashSpec.w > 0.0;
+        float dashLength = 0.0;
+        float dashPeriod = 1.0;
+        if (dashed) {
+            float w = 2.0 * halfWidth / dashSpec.w;
+            dashLength = max(dashSpec.x, dashSpec.y * w);
+            dashPeriod = dashLength + max(w + 1.0, dashSpec.z * w);
+        }
+        // The distance to the whole outline is what the fill and the selection read. A
+        // dashed outline measures its dashes apart, and the whole outline only when
+        // something reads it
+        bool wantsEdges = !dashed || selected || (paints && isPolygon && fill.a > 0.0);
+        bool wantsDashes = dashed && paints;
+
+        float minDist = 1.0e9;
+        float dashDist = 1.0e9;
+        for (int e = 0; e < edgeCount; e++) {
+            vec4 seg = fetchData(u_edge_tex, edgeStart + e);
+            vec2 a = seg.xy;
+            vec2 b = seg.zw;
+            if (crosses(origin, p, a, b)) inside = !inside;
+            // The distance is taken on the screen: the segment is mapped to screen pixels
+            // around the pixel first. The closest point found on the ground and mapped
+            // afterwards is not the closest one on the screen where the ground is seen
+            // at a slant, and the line came out thinner between its vertices than at them
+            vec2 sa = jacobianInverse * (a - p);
+            vec2 sb = jacobianInverse * (b - p);
+            if (wantsEdges) minDist = min(minDist, length(closestVector(sa, sb)));
+            if (wantsDashes) {
+                int at = edgeStart + e;
+                float start = texelFetch(
+                    u_edge_start_tex, ivec2(at % u_data_width, at / u_data_width), 0
+                ).r * u_dash_world_px;
+                float len = length(b - a) * u_dash_tile_px;
+                dashDist = min(dashDist, dashDistance(sa, sb, start, len, dashLength, dashPeriod));
+            }
+        }
+        // The outline is drawn where its dashes are (the whole of it when it is solid)
+        float strokeDist = dashed ? dashDist : minDist;
+
         if (paints && isPolygon && fill.a > 0.0) {
             // A signed distance, negative inside and positive outside (screen pixels)
             float signedDist = inside ? -minDist : minDist;
@@ -261,7 +342,7 @@ void main() {
         }
 
         if (paints && halfWidth > 0.0 && stroke.a > 0.0) {
-            float coverage = clamp(halfWidth + 0.5 - minDist, 0.0, 1.0);
+            float coverage = clamp(halfWidth + 0.5 - strokeDist, 0.0, 1.0);
             if (coverage > 0.0) acc = over(acc, stroke.rgb, stroke.a * coverage * factors.x);
         }
 
@@ -283,7 +364,8 @@ void main() {
             // The added thickness is kept constant in screen pixels (so that "an
             // outline one size thicker" always looks the same regardless of the
             // unit of the original thickness). The highlight outline is also drawn
-            // for features that have no outline (the same as the immediate mode)
+            // for features that have no outline (the same as the immediate mode), and
+            // it is solid under a dashed outline too
             float selHalf = halfWidth + u_selection_stroke_extra * 0.5;
             selStroke = max(selStroke, clamp(selHalf + 0.5 - minDist, 0.0, 1.0) * factors.x);
         }
@@ -339,6 +421,12 @@ export class DrapeRenderer {
             writable: true,
             value: null
         });
+        Object.defineProperty(this, "edgeStartTex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
         Object.defineProperty(this, "runTex", {
             enumerable: true,
             configurable: true,
@@ -363,6 +451,12 @@ export class DrapeRenderer {
             writable: true,
             value: [0, 0]
         });
+        Object.defineProperty(this, "edgeStartTexSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: [0, 0]
+        });
         Object.defineProperty(this, "runTexSize", {
             enumerable: true,
             configurable: true,
@@ -385,7 +479,7 @@ export class DrapeRenderer {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: { builderId: -1, edges: 0, runs: 0, cells: 0, styles: 0 }
+            value: emptyUploadMark()
         });
         /** The selection version the transferred style table reflects (-1 = not transferred) */
         Object.defineProperty(this, "uploadedSelection", {
@@ -450,6 +544,7 @@ export class DrapeRenderer {
             'u_run_tex',
             'u_cell_tex',
             'u_style_tex',
+            'u_edge_start_tex',
             'u_data_width',
             'u_cell_base',
             'u_cells',
@@ -464,6 +559,8 @@ export class DrapeRenderer {
             'u_selection_stroke_extra',
             'u_paint_range',
             'u_emit_selection',
+            'u_dash_world_px',
+            'u_dash_tile_px',
             ...EDGE_CONSTRAIN_UNIFORMS,
         ];
         this.locations = {};
@@ -485,24 +582,28 @@ export class DrapeRenderer {
      */
     upload(pack) {
         if (this.uploaded.builderId !== pack.id) {
-            this.uploaded = { builderId: pack.id, edges: 0, runs: 0, cells: 0, styles: 0 };
+            this.uploaded = { ...emptyUploadMark(), builderId: pack.id };
             this.uploadedSelection = -1;
         }
         // The selection highlight rewrites rows that have already been sent (it is not
         // an append), so when the version moves only the style table is sent again from
-        // the beginning. The style table is 4 texels per element, orders of magnitude
+        // the beginning. The style table is a few texels per element, orders of magnitude
         // smaller than the edge table
         if (this.uploadedSelection !== pack.selectionVersion) {
             this.uploaded.styles = 0;
             this.uploadedSelection = pack.selectionVersion;
         }
         this.edgeTex = this.uploadTexture(this.edgeTex, 'edgeTexSize', 'edges', DATA_TEX_WIDTH, pack.edges, pack.edgeCount);
+        // The starts along the paths go one per texel, in step with the edges
+        this.edgeStartTex = this.uploadTexture(this.edgeStartTex, 'edgeStartTexSize', 'edgeStarts', DATA_TEX_WIDTH, pack.edgeStarts, pack.edgeCount, 1);
         this.runTex = this.uploadTexture(this.runTex, 'runTexSize', 'runs', DATA_TEX_WIDTH, pack.runs, pack.runCount);
         this.cellTex = this.uploadTexture(this.cellTex, 'cellTexSize', 'cells', DATA_TEX_WIDTH, pack.cells, pack.cellCount);
-        // The style table is laid out like the others (4 texels per element in rows of
-        // DATA_TEX_WIDTH, a multiple of 4), so its height grows with elements / 512, not elements
+        // The style table is laid out like the others (the texels of the elements one after
+        // another in rows of DATA_TEX_WIDTH; an element may run over into the next row), so its
+        // height grows with the elements / DATA_TEX_WIDTH, not with the elements
         this.styleTex = this.uploadTexture(this.styleTex, 'styleTexSize', 'styles', DATA_TEX_WIDTH, pack.styles, DRAPE_STYLE_TEXELS * Math.max(1, pack.elementCount));
         return (this.edgeTex !== null &&
+            this.edgeStartTex !== null &&
             this.runTex !== null &&
             this.cellTex !== null &&
             this.styleTex !== null);
@@ -522,7 +623,12 @@ export class DrapeRenderer {
         const gl = this.gl;
         const program = this.program;
         const mesh = this.mesh;
-        if (!program || !mesh || !this.edgeTex || !this.cellTex || !this.styleTex) {
+        if (!program ||
+            !mesh ||
+            !this.edgeTex ||
+            !this.edgeStartTex ||
+            !this.cellTex ||
+            !this.styleTex) {
             this.lastError = 'draw: missing resources';
             return;
         }
@@ -534,6 +640,7 @@ export class DrapeRenderer {
         this.bindData(UNIT_RUN, this.runTex, set.u_run_tex);
         this.bindData(UNIT_CELL, this.cellTex, set.u_cell_tex);
         this.bindData(UNIT_STYLE, this.styleTex, set.u_style_tex);
+        this.bindData(DRAPE_EDGE_START_UNIT, this.edgeStartTex, set.u_edge_start_tex);
         if (set.u_data_width)
             gl.uniform1i(set.u_data_width, DATA_TEX_WIDTH);
         if (set.u_cell_base)
@@ -544,6 +651,11 @@ export class DrapeRenderer {
             gl.uniform1f(set.u_opacity, opacity);
         if (set.u_zoom)
             gl.uniform1f(set.u_zoom, zoom);
+        if (set.u_dash_world_px)
+            gl.uniform1f(set.u_dash_world_px, DASH_TILE_PX * 2 ** zoom);
+        if (set.u_dash_tile_px) {
+            gl.uniform1f(set.u_dash_tile_px, DASH_TILE_PX * 2 ** (zoom - draw.tileZ));
+        }
         if (set['u_source_factors[0]']) {
             gl.uniform2fv(set['u_source_factors[0]'], sourceFactors);
         }
@@ -604,19 +716,27 @@ export class DrapeRenderer {
             disposeTerrainMeshBuffers(gl, this.mesh);
             this.mesh = null;
         }
-        for (const texture of [this.edgeTex, this.runTex, this.cellTex, this.styleTex]) {
+        for (const texture of [
+            this.edgeTex,
+            this.edgeStartTex,
+            this.runTex,
+            this.cellTex,
+            this.styleTex,
+        ]) {
             if (texture)
                 gl.deleteTexture(texture);
         }
         this.edgeTex = null;
+        this.edgeStartTex = null;
         this.runTex = null;
         this.cellTex = null;
         this.styleTex = null;
         this.edgeTexSize = [0, 0];
+        this.edgeStartTexSize = [0, 0];
         this.runTexSize = [0, 0];
         this.cellTexSize = [0, 0];
         this.styleTexSize = [0, 0];
-        this.uploaded = { builderId: -1, edges: 0, runs: 0, cells: 0, styles: 0 };
+        this.uploaded = emptyUploadMark();
         this.uploadedSelection = -1;
     }
     bindData(unit, texture, location) {
@@ -639,8 +759,10 @@ export class DrapeRenderer {
      *
      * texStorage2D is immutable, so the texture is recreated whenever the required
      * size changes (once recreated, everything is sent again).
+     *
+     * @param channels The numbers per texel: 4 (RGBA32F) or 1 (R32F)
      */
-    uploadTexture(texture, sizeField, markField, width, data, texelCount) {
+    uploadTexture(texture, sizeField, markField, width, data, texelCount, channels = 4) {
         const gl = this.gl;
         const size = this[sizeField];
         const neededRows = Math.max(1, Math.ceil(texelCount / width));
@@ -663,7 +785,7 @@ export class DrapeRenderer {
             // Allocate a few extra rows (so it is not recreated on every increase)
             const rows = Math.min(maxRows, Math.max(1, Math.ceil(neededRows * 1.5)));
             gl.bindTexture(gl.TEXTURE_2D, target);
-            gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA32F, width, rows);
+            gl.texStorage2D(gl.TEXTURE_2D, 1, channels === 4 ? gl.RGBA32F : gl.R32F, width, rows);
             // Only the allocation is checked (it is rare; getError is a synchronous round trip)
             if (gl.getError() !== gl.NO_ERROR) {
                 gl.deleteTexture(target);
@@ -688,16 +810,21 @@ export class DrapeRenderer {
         const fromRow = Math.floor(uploaded / width);
         const toRow = Math.ceil(texelCount / width);
         const rows = toRow - fromRow;
-        const needed = rows * width * 4;
-        const offset = fromRow * width * 4;
+        const needed = rows * width * channels;
+        const offset = fromRow * width * channels;
         const payload = data.length >= offset + needed
             ? data.subarray(offset, offset + needed)
             : padTo(data.subarray(offset), needed);
-        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, fromRow, width, rows, gl.RGBA, gl.FLOAT, payload);
+        const format = channels === 4 ? gl.RGBA : gl.RED;
+        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, fromRow, width, rows, format, gl.FLOAT, payload);
         this.uploaded[markField] = texelCount;
         return target;
     }
 }
+/** Nothing transferred yet */
+function emptyUploadMark() {
+    return { builderId: -1, edges: 0, edgeStarts: 0, runs: 0, cells: 0, styles: 0 };
+}
 /** Pads with 0 up to the length required for the transfer */
 function padTo(data, length) {
     const out = new Float32Array(length);