@sakuzu/maplibre-gl-draw 1.0.0

package/dist/view/terrain/drape/edge-constrain.js

@@ -0,0 +1,175 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * Resolving T-junctions with neighboring tiles (edge constraints)
+ *
+ * At a terrain tile boundary the neighbors look the DEM up at different resolutions, so
+ * vertices at the same position do not land at the same height and a crack opens. Constraining
+ * the boundary vertices onto "the polyline of the coarser side" closes the T-junction whatever
+ * the zoom difference is.
+ *
+ * The analytic drape of polygons and lines (renderer.ts) and the drape of textured quads
+ * (quad.ts) share this constraint. Constraining only one of them results in the disagreement
+ * "the polygons close but the image cracks" at the same boundary.
+ */
+import { TILE_EXTENT } from './mesh.js';
+import { toFloat32Matrix } from './shared.js';
+/** The order of the edges (used to assemble the uniform names) */
+export const EDGE_NAMES = ['top', 'bottom', 'left', 'right'];
+/**
+ * The DEM texture unit per edge (one's own DEM is unit 0)
+ *
+ * 6 is not used. The DEM atlas (TERRAIN_ATLAS_TEXTURE_UNIT in state.ts) is bound to 6 at the
+ * head of the frame and stays there, and every renderer of the vertex displacement path reads
+ * it as u_dem_atlas as is. Overwriting it here would make whatever is drawn after the drape
+ * rendering (a preview being drawn, dashed lines and so on) look elevations up in a broken
+ * texture and fly off screen. 1 to 4 are used by the data textures (renderer.ts) and the
+ * contents of the quads (quad.ts).
+ */
+export const EDGE_UNITS = { top: 5, bottom: 7, left: 8, right: 9 };
+/** The mapping put into an edge with no coarse neighbor (unit scale, no translation) */
+const IDENTITY_EDGE_TRANSFORM = [1, 0, 0];
+/** The uniform declarations for a single edge */
+const edgeUniformDecl = (edge) => `
+uniform sampler2D u_edge_dem_${edge};
+uniform mat4 u_edge_dem_matrix_${edge};
+uniform vec4 u_edge_dem_unpack_${edge};
+// (dim, scale, translation x, translation y)
+uniform vec4 u_edge_dem_frame_${edge};`;
+/**
+ * The GLSL of the edge constraint (injected into the vertex shader)
+ *
+ * It goes after TERRAIN_SAMPLE_GLSL (because it uses u_terrain_exaggeration and the upstream DEM
+ * functions it carries). The caller
+ * obtains the constrained elevation with `drape_edge_constrained(a_pos, ele)`.
+ */
+export const EDGE_CONSTRAIN_GLSL = `
+// The constraint step per edge (top, bottom, left, right). 0 means no constraint
+uniform vec4 u_edge_step;
+${EDGE_NAMES.map(edgeUniformDecl).join('')}
+
+// Looks the elevation of this position up in the DEM of the coarser side
+//
+// One's own tile coordinates are mapped into the coarser side's tile coordinates first, and
+// then read with the coarser side's DEM matrix and the upstream layout (upstream-terrain.ts). The
+// mapping is a power-of-2 scale and a translation by an integer multiple of one mesh cell, so
+// no error appears even in float and the nodes of the step land exactly on the coarser side's
+// mesh nodes. In other words the value obtained here is bit-for-bit the same as the value the
+// coarser side looks up at its own vertex.
+float drape_edge_elevation(sampler2D dem, mat4 mtx, vec4 unpack, vec4 frame, vec2 pos) {
+    vec2 q = pos * frame.y + frame.zw;
+    vec2 coord = upstream_dem_coord((mtx * vec4(q, 0.0, 1.0)).xy, frame.x);
+    return upstream_dem_bilinear(dem, unpack, coord) * u_terrain_exaggeration;
+}
+
+// Constrains the elevation onto the polyline of the coarser side (resolving the T-junction)
+//
+// The boundary is a straight line in tile coordinates, so only the elevation has to move. It
+// is stepped at the coarser side's node spacing step, and the value linearly interpolated
+// between the elevations at its two ends is used. This puts 2^dz vertices of the finer side on
+// one segment of the coarser side, and the gap disappears whatever the level difference is.
+//
+// The elevation of a node is always taken from the coarser side's DEM. Taking it from one's
+// own DEM would give not the coarser side's polyline but "a polyline stepping one's own DEM
+// coarsely", which stays apart by the difference in DEM resolution (this is what is behind the
+// thin line remaining at the tile boundary).
+float drape_constrain(
+    sampler2D dem, mat4 mtx, vec4 unpack, vec4 frame,
+    vec2 pos, float along, float step, bool horizontal
+) {
+    float t0 = floor(along / step) * step;
+    float t1 = min(t0 + step, ${TILE_EXTENT}.0);
+    vec2 p0 = horizontal ? vec2(t0, pos.y) : vec2(pos.x, t0);
+    vec2 p1 = horizontal ? vec2(t1, pos.y) : vec2(pos.x, t1);
+    float e0 = drape_edge_elevation(dem, mtx, unpack, frame, p0);
+    float e1 = drape_edge_elevation(dem, mtx, unpack, frame, p1);
+    float w = t1 > t0 ? (along - t0) / (t1 - t0) : 0.0;
+    return mix(e0, e1, w);
+}
+
+// A boundary vertex is constrained onto the coarser side's polyline only when the neighbor is
+// coarser.
+//
+// The four corners belong to two edges. Whichever polyline they are put on, they cannot be
+// made to agree with all three or more adjoining tiles (because each has its own DEM), so an
+// order that looks at the top and bottom edges first is fixed. What disagrees is only the
+// single point at the corner, and it closes within one mesh cell from there.
+float drape_edge_constrained(vec2 pos, float ele) {
+    if (pos.y <= 0.0 && u_edge_step.x > 0.0) {
+        return drape_constrain(
+            u_edge_dem_top, u_edge_dem_matrix_top, u_edge_dem_unpack_top, u_edge_dem_frame_top,
+            pos, pos.x, u_edge_step.x, true);
+    }
+    if (pos.y >= ${TILE_EXTENT}.0 && u_edge_step.y > 0.0) {
+        return drape_constrain(
+            u_edge_dem_bottom, u_edge_dem_matrix_bottom, u_edge_dem_unpack_bottom,
+            u_edge_dem_frame_bottom,
+            pos, pos.x, u_edge_step.y, true);
+    }
+    if (pos.x <= 0.0 && u_edge_step.z > 0.0) {
+        return drape_constrain(
+            u_edge_dem_left, u_edge_dem_matrix_left, u_edge_dem_unpack_left, u_edge_dem_frame_left,
+            pos, pos.y, u_edge_step.z, false);
+    }
+    if (pos.x >= ${TILE_EXTENT}.0 && u_edge_step.w > 0.0) {
+        return drape_constrain(
+            u_edge_dem_right, u_edge_dem_matrix_right, u_edge_dem_unpack_right,
+            u_edge_dem_frame_right,
+            pos, pos.y, u_edge_step.w, false);
+    }
+    return ele;
+}
+`;
+/** The names of the uniforms the edge constraint uses (for getUniformLocation) */
+export const EDGE_CONSTRAIN_UNIFORMS = [
+    'u_edge_step',
+    ...EDGE_NAMES.flatMap((edge) => [
+        `u_edge_dem_${edge}`,
+        `u_edge_dem_matrix_${edge}`,
+        `u_edge_dem_unpack_${edge}`,
+        `u_edge_dem_frame_${edge}`,
+    ]),
+];
+/**
+ * Writes the uniforms of the edge constraint
+ *
+ * The step and the DEM are both written from one and the same value (the result of
+ * resolveTileEdges). They all come out of the terrain tile state at one and the same instant,
+ * so the inconsistency "the DEM is new but the step is old" cannot occur. An edge with no
+ * coarse neighbor (an edge that is not constrained) gets one's own DEM at unit scale with a
+ * translation of 0. It is never referenced because the step is 0, but leaving an unbound
+ * sampler makes the rendering itself fail in some implementations.
+ */
+export function applyEdgeConstrainUniforms(gl, set, edges, own) {
+    if (set.u_edge_step) {
+        gl.uniform4f(set.u_edge_step, edges.top?.step ?? 0, edges.bottom?.step ?? 0, edges.left?.step ?? 0, edges.right?.step ?? 0);
+    }
+    for (const edge of EDGE_NAMES) {
+        bindEdgeTerrain(gl, set, edge, edges[edge], own);
+    }
+}
+/** Binds "the coarser side's DEM" for a single edge */
+function bindEdgeTerrain(gl, set, edge, source, own) {
+    const terrain = source ? source.terrain : own;
+    const transform = source
+        ? [source.transform.scale, source.transform.offsetX, source.transform.offsetY]
+        : IDENTITY_EDGE_TRANSFORM;
+    const unit = EDGE_UNITS[edge];
+    gl.activeTexture(gl.TEXTURE0 + unit);
+    gl.bindTexture(gl.TEXTURE_2D, terrain.texture);
+    const sampler = set[`u_edge_dem_${edge}`];
+    if (sampler)
+        gl.uniform1i(sampler, unit);
+    const matrix = set[`u_edge_dem_matrix_${edge}`];
+    if (matrix)
+        gl.uniformMatrix4fv(matrix, false, toFloat32Matrix(terrain.matrix));
+    const unpack = set[`u_edge_dem_unpack_${edge}`];
+    if (unpack) {
+        const u = terrain.unpack;
+        gl.uniform4f(unpack, u[0], u[1], u[2], u[3]);
+    }
+    const frame = set[`u_edge_dem_frame_${edge}`];
+    if (frame) {
+        gl.uniform4f(frame, terrain.dim, transform[0], transform[1], transform[2]);
+    }
+}

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

@@ -0,0 +1,95 @@
+/**
+ * The geometry of the analytic drape (a cache of Mercator coordinates)
+ *
+ * The binning runs per tile. Converting longitude/latitude into Mercator per tile would mean
+ * applying the logarithmic transform of the latitude over and over, and for a dataset on
+ * the order of a million vertices such as administrative boundaries it throws away tens of
+ * milliseconds on every tile. The conversion is done once here and kept, so that descending to
+ * within-tile coordinates takes only a multiplication and a subtraction.
+ *
+ * In addition, the edges are cut into chunks (blocks) of a fixed number and given bounding
+ * boxes. Only a tiny part of a long outline is involved in a single tile, so dropping whole
+ * blocks shrinks the amount scanned down to the range that actually matters.
+ *
+ * The precision is held in Float64. Mercator world coordinates are 0..1, and in Float32 a
+ * rounding of several pixels appears within a z16 tile (a relative error of 1.2e-7 amounts to
+ * 0.4% of the tile width 1.5e-5).
+ */
+import type { Coordinate } from '../../../store/types.js';
+/** The number of edges in one block */
+export declare const DRAPE_BLOCK_EDGES = 64;
+/** The geometry of a single path */
+export interface DrapeGeometryPath {
+    /** An interleaved array of Mercator coordinates (x, y) */
+    readonly xy: Float64Array;
+    /** The number of edges (the same as the vertex count for a closed path, the vertex count -
+     * 1 for an open one) */
+    readonly edgeCount: number;
+    /** Whether it is closed (the rings of a polygon are closed) */
+    readonly closed: boolean;
+    /** The bounding box of each block (minX, minY, maxX, maxY) */
+    readonly blocks: Float64Array;
+}
+/** The geometry of a single feature */
+export interface DrapeGeometry {
+    readonly paths: readonly DrapeGeometryPath[];
+    readonly edgeCount: number;
+    readonly minX: number;
+    readonly minY: number;
+    readonly maxX: number;
+    readonly maxY: number;
+}
+/** Longitude -> Mercator x */
+export declare function drapeMercatorX(lng: number): number;
+/** Latitude -> Mercator y */
+export declare function drapeMercatorY(lat: number): number;
+/** A Mercator bounding box */
+export interface DrapeBounds {
+    readonly minX: number;
+    readonly minY: number;
+    readonly maxX: number;
+    readonly maxY: number;
+}
+/**
+ * Computes the bounding box alone (with a cache)
+ *
+ * This is all that is needed to narrow tiles down. The minimum and maximum of the
+ * longitude/latitude are taken first and converted into Mercator afterwards, so the logarithm
+ * and the tangent are evaluated only four times (converting every vertex takes 76 ms for 1.1
+ * million vertices, and that single hit becomes a stutter during a zoom gesture). The Mercator
+ * conversion is monotonic in longitude and in latitude separately, so the rectangle obtained
+ * in this order agrees with the one obtained by converting every vertex.
+ */
+export declare function drapeBoundsOf(key: object, paths: ReadonlyArray<ReadonlyArray<Coordinate>>): DrapeBounds;
+/**
+ * Builds the geometry (with a cache)
+ *
+ * @param key The cache key (it must be identical as long as it points at the same coordinates)
+ * @param paths The array of paths. For a polygon, rings with the closing point dropped; for a
+ *   line, as it is
+ * @param closed Whether to treat them as the rings of a polygon
+ */
+export declare function drapeGeometryOf(key: object, paths: ReadonlyArray<ReadonlyArray<Coordinate>>, closed: boolean): DrapeGeometry;
+/**
+ * Builds the geometry (a pure function that uses no cache)
+ */
+export declare function buildDrapeGeometry(paths: ReadonlyArray<ReadonlyArray<Coordinate>>, closed: boolean): DrapeGeometry;
+/**
+ * Quantized geometry for coarse tiles (LOD)
+ *
+ * Once the pitch is raised, the terrain tiles in the distance become very coarse (measured:
+ * a view at map zoom 13.75 with pitch 70 contained one z8 tile, and that single tile contained
+ * all 780,000 edges of the 8,172 administrative boundaries). Solving that as is is worth
+ * neither the cost of the index nor the memory, and yet that tile is drawn only in a strip on
+ * the horizon side of the screen.
+ *
+ * So the vertices are rounded to a grid that matches the resolution of the tile. Thinning by
+ * distance would thin a boundary shared by adjoining polygons separately and open a gap, but
+ * rounding to a grid is decided with respect to space, so boundaries that share the same
+ * coordinates round to the same point. A polygon left with fewer than 3 points after the
+ * rounding is dropped (its size is less than a pixel; the wide-area polygon laid underneath
+ * simply shows through).
+ *
+ * @param level The fineness of the grid. The grid spacing is 2^-level (in Mercator units)
+ */
+export declare function drapeQuantizedGeometry(geometry: DrapeGeometry, level: number): DrapeGeometry;

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

@@ -0,0 +1,260 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/** The number of edges in one block */
+export const DRAPE_BLOCK_EDGES = 64;
+/** Longitude -> Mercator x */
+export function drapeMercatorX(lng) {
+    return (lng + 180) / 360;
+}
+/** Latitude -> Mercator y */
+export function drapeMercatorY(lat) {
+    const latRad = (lat * Math.PI) / 180;
+    return (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI) / 2;
+}
+/**
+ * The geometry cache
+ *
+ * The key is decided by the caller. For a feature in the Store the instance is replaced on
+ * every edit, so the feature itself is the key; for a dataset the replacement
+ * happens per `setFeatures` and the coordinate arrays are not reused, so the coordinate array
+ * is the key (when applying a style rule rebuilds only the feature instances, the same
+ * coordinate arrays remain, so merely changing a color does not require converting a million
+ * vertices again).
+ */
+const cache = new WeakMap();
+/** A cache of bounding boxes alone (it allows narrowing tiles down without building the
+ * geometry) */
+const boundsCache = new WeakMap();
+/**
+ * Computes the bounding box alone (with a cache)
+ *
+ * This is all that is needed to narrow tiles down. The minimum and maximum of the
+ * longitude/latitude are taken first and converted into Mercator afterwards, so the logarithm
+ * and the tangent are evaluated only four times (converting every vertex takes 76 ms for 1.1
+ * million vertices, and that single hit becomes a stutter during a zoom gesture). The Mercator
+ * conversion is monotonic in longitude and in latitude separately, so the rectangle obtained
+ * in this order agrees with the one obtained by converting every vertex.
+ */
+export function drapeBoundsOf(key, paths) {
+    const hit = boundsCache.get(key);
+    if (hit)
+        return hit;
+    let minLng = Number.POSITIVE_INFINITY;
+    let minLat = Number.POSITIVE_INFINITY;
+    let maxLng = Number.NEGATIVE_INFINITY;
+    let maxLat = Number.NEGATIVE_INFINITY;
+    for (const path of paths) {
+        for (const point of path) {
+            if (point[0] < minLng)
+                minLng = point[0];
+            if (point[0] > maxLng)
+                maxLng = point[0];
+            if (point[1] < minLat)
+                minLat = point[1];
+            if (point[1] > maxLat)
+                maxLat = point[1];
+        }
+    }
+    const bounds = minLng > maxLng
+        ? { minX: 0, minY: 0, maxX: -1, maxY: -1 }
+        : {
+            minX: drapeMercatorX(minLng),
+            // Mercator y decreases as the latitude increases
+            minY: drapeMercatorY(maxLat),
+            maxX: drapeMercatorX(maxLng),
+            maxY: drapeMercatorY(minLat),
+        };
+    boundsCache.set(key, bounds);
+    return bounds;
+}
+/**
+ * Builds the geometry (with a cache)
+ *
+ * @param key The cache key (it must be identical as long as it points at the same coordinates)
+ * @param paths The array of paths. For a polygon, rings with the closing point dropped; for a
+ *   line, as it is
+ * @param closed Whether to treat them as the rings of a polygon
+ */
+export function drapeGeometryOf(key, paths, closed) {
+    const hit = cache.get(key);
+    if (hit)
+        return hit;
+    const built = buildDrapeGeometry(paths, closed);
+    cache.set(key, built);
+    return built;
+}
+/**
+ * Builds the geometry (a pure function that uses no cache)
+ */
+export function buildDrapeGeometry(paths, closed) {
+    const converted = [];
+    for (const path of paths) {
+        const count = path.length;
+        if (count < 2)
+            continue;
+        const xy = new Float64Array(count * 2);
+        for (let i = 0; i < count; i++) {
+            xy[i * 2] = drapeMercatorX(path[i][0]);
+            xy[i * 2 + 1] = drapeMercatorY(path[i][1]);
+        }
+        converted.push(xy);
+    }
+    return buildFromMercatorPaths(converted, closed);
+}
+/**
+ * Assembles the geometry from paths in Mercator coordinates
+ */
+function buildFromMercatorPaths(paths, closed) {
+    const out = [];
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    let edgeCount = 0;
+    for (const xy of paths) {
+        const count = xy.length / 2;
+        if (count < 2)
+            continue;
+        for (let i = 0; i < count; i++) {
+            const x = xy[i * 2];
+            const y = xy[i * 2 + 1];
+            if (x < minX)
+                minX = x;
+            if (x > maxX)
+                maxX = x;
+            if (y < minY)
+                minY = y;
+            if (y > maxY)
+                maxY = y;
+        }
+        const edges = closed ? count : count - 1;
+        const blockCount = Math.ceil(edges / DRAPE_BLOCK_EDGES);
+        const blocks = new Float64Array(blockCount * 4);
+        for (let b = 0; b < blockCount; b++) {
+            const from = b * DRAPE_BLOCK_EDGES;
+            const to = Math.min(edges, from + DRAPE_BLOCK_EDGES);
+            let bx0 = Number.POSITIVE_INFINITY;
+            let by0 = Number.POSITIVE_INFINITY;
+            let bx1 = Number.NEGATIVE_INFINITY;
+            let by1 = Number.NEGATIVE_INFINITY;
+            // Edge e is vertices e and e+1 (on a closed path only the last one wraps back to 0)
+            for (let e = from; e <= to; e++) {
+                const v = e < count ? e : 0;
+                const x = xy[v * 2];
+                const y = xy[v * 2 + 1];
+                if (x < bx0)
+                    bx0 = x;
+                if (x > bx1)
+                    bx1 = x;
+                if (y < by0)
+                    by0 = y;
+                if (y > by1)
+                    by1 = y;
+            }
+            blocks[b * 4] = bx0;
+            blocks[b * 4 + 1] = by0;
+            blocks[b * 4 + 2] = bx1;
+            blocks[b * 4 + 3] = by1;
+        }
+        out.push({ xy, edgeCount: edges, closed, blocks });
+        edgeCount += edges;
+    }
+    if (out.length === 0) {
+        return { paths: [], edgeCount: 0, minX: 0, minY: 0, maxX: -1, maxY: -1 };
+    }
+    return { paths: out, edgeCount, minX, minY, maxX, maxY };
+}
+/**
+ * Quantized geometry for coarse tiles (LOD)
+ *
+ * Once the pitch is raised, the terrain tiles in the distance become very coarse (measured:
+ * a view at map zoom 13.75 with pitch 70 contained one z8 tile, and that single tile contained
+ * all 780,000 edges of the 8,172 administrative boundaries). Solving that as is is worth
+ * neither the cost of the index nor the memory, and yet that tile is drawn only in a strip on
+ * the horizon side of the screen.
+ *
+ * So the vertices are rounded to a grid that matches the resolution of the tile. Thinning by
+ * distance would thin a boundary shared by adjoining polygons separately and open a gap, but
+ * rounding to a grid is decided with respect to space, so boundaries that share the same
+ * coordinates round to the same point. A polygon left with fewer than 3 points after the
+ * rounding is dropped (its size is less than a pixel; the wide-area polygon laid underneath
+ * simply shows through).
+ *
+ * @param level The fineness of the grid. The grid spacing is 2^-level (in Mercator units)
+ */
+export function drapeQuantizedGeometry(geometry, level) {
+    let cache = quantizedCache.get(geometry);
+    if (!cache) {
+        cache = new Map();
+        quantizedCache.set(geometry, cache);
+    }
+    const hit = cache.get(level);
+    if (hit)
+        return hit;
+    const step = 2 ** -level;
+    const paths = [];
+    for (const path of geometry.paths) {
+        const source = path.xy;
+        const count = source.length / 2;
+        const out = [];
+        let lastX = Number.NaN;
+        let lastY = Number.NaN;
+        for (let i = 0; i < count; i++) {
+            const qx = Math.round(source[i * 2] / step) * step;
+            const qy = Math.round(source[i * 2 + 1] / step) * step;
+            if (qx === lastX && qy === lastY)
+                continue;
+            out.push(qx, qy);
+            lastX = qx;
+            lastY = qy;
+        }
+        if (path.closed) {
+            // The convention is to hold no closing point, so a tail coinciding with the head is
+            // dropped
+            while (out.length >= 6 && out[out.length - 2] === out[0] && out[out.length - 1] === out[1]) {
+                out.length -= 2;
+            }
+            if (out.length / 2 < 3) {
+                // A polygon collapsed by the rounding is replaced with a square of one grid cell.
+                // Dropping it would leave the fill missing just there and produce spotty white
+                // blotches (confirmed hands-on, the city center at z8.7; it was pronounced in areas
+                // where small polygons at the chome level line up).
+                // The error stays within one grid cell (1/256 of a tile = about 2 pixels on screen)
+                const box = squareAt(source, step);
+                if (box)
+                    paths.push(box);
+                continue;
+            }
+        }
+        else if (out.length / 2 < 2) {
+            continue;
+        }
+        paths.push(new Float64Array(out));
+    }
+    const built = buildFromMercatorPaths(paths, geometry.paths[0]?.closed ?? true);
+    cache.set(level, built);
+    return built;
+}
+/** The cache of quantized geometry (original geometry -> fineness -> geometry) */
+const quantizedCache = new WeakMap();
+/**
+ * The square of one grid cell put in place of a collapsed polygon
+ *
+ * Its top left is the center of the original polygon rounded to the grid. The purpose is to
+ * avoid leaving the fill missing, so its winding is the same as the outer ring (whether it is
+ * clockwise has no effect on the inside/outside test).
+ */
+function squareAt(source, step) {
+    const count = source.length / 2;
+    if (count === 0)
+        return null;
+    let sx = 0;
+    let sy = 0;
+    for (let i = 0; i < count; i++) {
+        sx += source[i * 2];
+        sy += source[i * 2 + 1];
+    }
+    const cx = Math.round(sx / count / step) * step;
+    const cy = Math.round(sy / count / step) * step;
+    return new Float64Array([cx, cy, cx + step, cy, cx + step, cy + step, cx, cy + step]);
+}

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

@@ -0,0 +1,50 @@
+/**
+ * Reconstruction of the terrain mesh
+ *
+ * The vertices and triangles are built with "the same rules" as the regular mesh MapLibre uses
+ * to draw the terrain. The point is to make both the coordinates and the direction of the
+ * diagonals the same, which makes our own polygons agree exactly with MapLibre's terrain
+ * surface (sampling the same DEM with two different triangulations necessarily disagrees on a
+ * slope).
+ *
+ * The rules match `Terrain.getTerrainMesh` of MapLibre 6.6.
+ *
+ * - The vertices lay out (x * delta, y * delta) for x, y = 0..meshSize in row-major order
+ *   (delta = EXTENT / meshSize)
+ * - The triangles are two per cell, (x, y) -> (x, y+1) -> (x+1, y+1) and
+ *   (x, y) -> (x+1, y+1) -> (x+1, y). The diagonal is the main diagonal joining (x, y) and
+ *   (x+1, y+1)
+ *
+ * No skirt (a hem at the tile boundary) is built. A prototype was verified hands-on, but the
+ * wall of the hem stands on the same surface as MapLibre's own skirt, so it is not hidden by
+ * depth and showed up as a thick band along the tile boundary. The gap at a tile boundary is
+ * closed not by covering it with a hem but by having adjoining tiles share the same polyline
+ * at the boundary (drape/stitch.ts and drape_constrain in the vertex shader).
+ */
+/** The EXTENT of MapLibre's tile coordinate system */
+export declare const TILE_EXTENT = 8192;
+/** The GPU resources of one terrain mesh */
+export interface TerrainMeshBuffers {
+    readonly vao: WebGLVertexArrayObject;
+    readonly vertexBuffer: WebGLBuffer;
+    readonly indexBuffer: WebGLBuffer;
+    readonly indexCount: number;
+    readonly meshSize: number;
+}
+/**
+ * Builds the vertices and indices of the mesh (a pure function)
+ */
+export declare function buildTerrainMeshArrays(meshSize: number): {
+    vertices: Int16Array;
+    indices: Uint32Array;
+};
+/**
+ * Uploads the mesh to the GPU
+ *
+ * One mesh is enough regardless of the tile (the tile coordinate system is common).
+ */
+export declare function createTerrainMeshBuffers(gl: WebGL2RenderingContext, meshSize: number): TerrainMeshBuffers | null;
+/**
+ * Releases the GPU resources of the mesh
+ */
+export declare function disposeTerrainMeshBuffers(gl: WebGL2RenderingContext, mesh: TerrainMeshBuffers): void;

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

@@ -0,0 +1,86 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * Reconstruction of the terrain mesh
+ *
+ * The vertices and triangles are built with "the same rules" as the regular mesh MapLibre uses
+ * to draw the terrain. The point is to make both the coordinates and the direction of the
+ * diagonals the same, which makes our own polygons agree exactly with MapLibre's terrain
+ * surface (sampling the same DEM with two different triangulations necessarily disagrees on a
+ * slope).
+ *
+ * The rules match `Terrain.getTerrainMesh` of MapLibre 6.6.
+ *
+ * - The vertices lay out (x * delta, y * delta) for x, y = 0..meshSize in row-major order
+ *   (delta = EXTENT / meshSize)
+ * - The triangles are two per cell, (x, y) -> (x, y+1) -> (x+1, y+1) and
+ *   (x, y) -> (x+1, y+1) -> (x+1, y). The diagonal is the main diagonal joining (x, y) and
+ *   (x+1, y+1)
+ *
+ * No skirt (a hem at the tile boundary) is built. A prototype was verified hands-on, but the
+ * wall of the hem stands on the same surface as MapLibre's own skirt, so it is not hidden by
+ * depth and showed up as a thick band along the tile boundary. The gap at a tile boundary is
+ * closed not by covering it with a hem but by having adjoining tiles share the same polyline
+ * at the boundary (drape/stitch.ts and drape_constrain in the vertex shader).
+ */
+/** The EXTENT of MapLibre's tile coordinate system */
+export const TILE_EXTENT = 8192;
+/**
+ * Builds the vertices and indices of the mesh (a pure function)
+ */
+export function buildTerrainMeshArrays(meshSize) {
+    const delta = TILE_EXTENT / meshSize;
+    const side = meshSize + 1;
+    const vertices = new Int16Array(side * side * 2);
+    let v = 0;
+    for (let y = 0; y <= meshSize; y++) {
+        for (let x = 0; x <= meshSize; x++) {
+            vertices[v++] = x * delta;
+            vertices[v++] = y * delta;
+        }
+    }
+    const indices = [];
+    const meshSize2 = meshSize * meshSize;
+    for (let rowBase = 0; rowBase < meshSize2; rowBase += meshSize + 1) {
+        for (let x = 0; x < meshSize; x++) {
+            indices.push(x + rowBase);
+            indices.push(meshSize + x + rowBase + 1);
+            indices.push(meshSize + x + rowBase + 2);
+            indices.push(x + rowBase);
+            indices.push(meshSize + x + rowBase + 2);
+            indices.push(x + rowBase + 1);
+        }
+    }
+    return { vertices, indices: new Uint32Array(indices) };
+}
+/**
+ * Uploads the mesh to the GPU
+ *
+ * One mesh is enough regardless of the tile (the tile coordinate system is common).
+ */
+export function createTerrainMeshBuffers(gl, meshSize) {
+    const { vertices, indices } = buildTerrainMeshArrays(meshSize);
+    const vao = gl.createVertexArray();
+    const vertexBuffer = gl.createBuffer();
+    const indexBuffer = gl.createBuffer();
+    if (!vao || !vertexBuffer || !indexBuffer)
+        return null;
+    gl.bindVertexArray(vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    // The integer attribute is read as a float (the shader side is a vec2)
+    gl.vertexAttribPointer(0, 2, gl.SHORT, false, 4, 0);
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+    gl.bindVertexArray(null);
+    return { vao, vertexBuffer, indexBuffer, indexCount: indices.length, meshSize };
+}
+/**
+ * Releases the GPU resources of the mesh
+ */
+export function disposeTerrainMeshBuffers(gl, mesh) {
+    gl.deleteVertexArray(mesh.vao);
+    gl.deleteBuffer(mesh.vertexBuffer);
+    gl.deleteBuffer(mesh.indexBuffer);
+}