@deck.gl/extensions 9.4.0-beta.1 → 9.4.0-beta.3

package/dist/index.cjs

@@ -15,7 +15,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toCommonJS = (mod2) => __copyProps(__defProp({}, "__esModule", { value: true }), mod2);
 
 // dist/index.js
 var index_exports = {};
@@ -608,7 +608,7 @@ fn project_mercator_(lnglat: vec2<f32>) -> vec2<f32> {
   let y = clamp(lnglat.y, -89.9, 89.9);
   return vec2<f32>(
     radians(x) + PI,
-    PI + log(tan(PI * 0.25 + radians(y) * 0.5))
+    PI + log(tan_fp32(PI * 0.25 + radians(y) * 0.5))
   ) * WORLD_SCALE;
 }
 
@@ -1480,6 +1480,10 @@ var import_core2 = require("@math.gl/core");
 function createMat4() {
   return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 }
+function mod(value, divisor) {
+  const modulus = value % divisor;
+  return modulus < 0 ? divisor + modulus : modulus;
+}
 function getCameraPosition(viewMatrixInverse) {
   return [viewMatrixInverse[12], viewMatrixInverse[13], viewMatrixInverse[14]];
 }
@@ -1603,8 +1607,8 @@ var _Viewport = class _Viewport {
     }
     return PROJECTION_MODE.IDENTITY;
   }
-  // Two viewports are equal if width and height are identical, and if
-  // their view and projection matrices are (approximately) equal.
+  // Two viewports are equal if their dimensions, common-space scale, and
+  // view and projection matrices are (approximately) equal.
   equals(viewport) {
     if (!(viewport instanceof _Viewport)) {
       return false;
@@ -1612,7 +1616,7 @@ var _Viewport = class _Viewport {
     if (this === viewport) {
       return true;
     }
-    return viewport.width === this.width && viewport.height === this.height && viewport.scale === this.scale && (0, import_core3.equals)(viewport.projectionMatrix, this.projectionMatrix) && (0, import_core3.equals)(viewport.viewMatrix, this.viewMatrix);
+    return viewport.width === this.width && viewport.height === this.height && viewport.scale === this.scale && viewport.projectionMode === this.projectionMode && viewport.resolution === this.resolution && (0, import_core3.equals)(viewport.distanceScales.unitsPerMeter, this.distanceScales.unitsPerMeter) && (0, import_core3.equals)(viewport.projectionMatrix, this.projectionMatrix) && (0, import_core3.equals)(viewport.viewMatrix, this.viewMatrix);
   }
   /**
    * Projects xyz (possibly latitude and longitude) to pixel coordinates in window
@@ -1949,6 +1953,10 @@ var _WebMercatorViewport = class _WebMercatorViewport extends Viewport {
     }
     return this._subViewports;
   }
+  /** Returns whether two Web Mercator viewports use the same projection settings. */
+  equals(viewport) {
+    return viewport instanceof _WebMercatorViewport && viewport._pseudoMeters === this._pseudoMeters && super.equals(viewport);
+  }
   projectPosition(xyz) {
     if (this._pseudoMeters) {
       return super.projectPosition(xyz);
@@ -2198,15 +2206,52 @@ function deepEqual(a, b, depth) {
   return false;
 }
 
+// ../core/src/utils/shader.ts
+function mergeShaders(target, source2) {
+  if (!source2) {
+    return target;
+  }
+  const result = { ...target, ...source2 };
+  if ("defines" in source2) {
+    result.defines = { ...target.defines, ...source2.defines };
+  }
+  if ("modules" in source2) {
+    result.modules = (target.modules || []).concat(source2.modules);
+    if (source2.modules.some((module2) => module2.name === "project64")) {
+      const index = result.modules.findIndex((module2) => module2.name === "project32");
+      if (index >= 0) {
+        result.modules.splice(index, 1);
+      }
+    }
+  }
+  if ("inject" in source2) {
+    if (!target.inject) {
+      result.inject = source2.inject;
+    } else {
+      const mergedInjection = { ...target.inject };
+      for (const key in source2.inject) {
+        mergedInjection[key] = (mergedInjection[key] || "") + source2.inject[key];
+      }
+      result.inject = mergedInjection;
+    }
+  }
+  return result;
+}
+
 // ../core/src/viewports/globe-viewport.ts
 var import_core5 = require("@math.gl/core");
 var import_web_mercator3 = require("@math.gl/web-mercator");
-var import_core6 = require("@math.gl/core");
-var import_web_mercator4 = require("@math.gl/web-mercator");
 var DEGREES_TO_RADIANS2 = Math.PI / 180;
 var RADIANS_TO_DEGREES = 180 / Math.PI;
+var NORTH_UP_BEARING_THRESHOLD = 1;
 var EARTH_RADIUS = 6370972;
 var GLOBE_RADIUS = 256;
+var GLOBE_ZOOM_ANCHOR_DAMPING_START_RATIO = 0.75;
+var GLOBE_ZOOM_ANCHOR_MAX_DISTANCE_RATIO = 1.15;
+function isGlobeNorthUp(bearing) {
+  const normalizedBearing = mod(bearing + 180, 360) - 180;
+  return Math.abs(normalizedBearing) < NORTH_UP_BEARING_THRESHOLD;
+}
 function getDistanceScales2() {
   const unitsPerMeter2 = GLOBE_RADIUS / EARTH_RADIUS;
   const unitsPerDegree = Math.PI / 180 * GLOBE_RADIUS;
@@ -2240,7 +2285,7 @@ var GlobeViewport = class extends Viewport {
     } else {
       fovy = (0, import_web_mercator3.altitudeToFovy)(altitude);
     }
-    const scaleLatitude = Math.max(Math.min(latitude, import_web_mercator4.MAX_LATITUDE), -import_web_mercator4.MAX_LATITUDE);
+    const scaleLatitude = Math.max(Math.min(latitude, import_web_mercator3.MAX_LATITUDE), -import_web_mercator3.MAX_LATITUDE);
     const scale = Math.pow(2, zoom - zoomAdjust(scaleLatitude));
     const pitchRadians = pitch * DEGREES_TO_RADIANS2;
     const nearZ = opts.nearZ ?? nearZMultiplier;
@@ -2291,6 +2336,67 @@ var GlobeViewport = class extends Viewport {
       Math.max(left[1], right[1], top[1], bottom[1])
     ];
   }
+  /**
+   * Builds the screen-pixel → globe-center ray and the intermediate ray/sphere
+   * math reused by `unproject` and anchored zoom. One function so the same
+   * pixelUnprojectionMatrix work isn't duplicated.
+   */
+  _getRayToGlobe(screenPosition, { topLeft = true, targetZ } = {}) {
+    const [screenX, screenY] = screenPosition;
+    const adjustedScreenY = topLeft ? screenY : this.height - screenY;
+    const { pixelUnprojectionMatrix } = this;
+    const rayStartPosition = transformVector(pixelUnprojectionMatrix, [
+      screenX,
+      adjustedScreenY,
+      -1,
+      1
+    ]);
+    const rayEndPosition = transformVector(pixelUnprojectionMatrix, [
+      screenX,
+      adjustedScreenY,
+      1,
+      1
+    ]);
+    const radius = ((targetZ || 0) / EARTH_RADIUS + 1) * GLOBE_RADIUS;
+    const rayLengthSquared = import_core5.vec3.sqrLen(import_core5.vec3.sub([], rayStartPosition, rayEndPosition));
+    const rayStartDistanceSquared = import_core5.vec3.sqrLen(rayStartPosition);
+    const rayEndDistanceSquared = import_core5.vec3.sqrLen(rayEndPosition);
+    const triangleAreaSquared = (4 * rayStartDistanceSquared * rayEndDistanceSquared - (rayLengthSquared - rayStartDistanceSquared - rayEndDistanceSquared) ** 2) / 16;
+    const distanceToCenterSquared = 4 * triangleAreaSquared / rayLengthSquared;
+    return {
+      rayStartPosition,
+      rayEndPosition,
+      radius,
+      rayLengthSquared,
+      rayStartDistanceSquared,
+      distanceToCenterSquared
+    };
+  }
+  _getRayDistanceToGlobeCenterRatio(screenPosition, options) {
+    const { distanceToCenterSquared, radius } = this._getRayToGlobe(screenPosition, options);
+    return Math.sqrt(Math.max(0, distanceToCenterSquared)) / radius;
+  }
+  /**
+   * Returns how strongly a screen position should anchor zoom on the visible globe.
+   * A value of `0` means that the controller should fall back to center zoom.
+   * @param screenPosition - Screen position to evaluate.
+   * @returns Anchor strength from `0` to `1`.
+   */
+  getZoomAnchorStrength(screenPosition) {
+    const distanceRatio = this._getRayDistanceToGlobeCenterRatio(screenPosition);
+    if (distanceRatio >= GLOBE_ZOOM_ANCHOR_MAX_DISTANCE_RATIO) {
+      return 0;
+    }
+    const edgeProgress = Math.max(
+      0,
+      Math.min(
+        1,
+        (distanceRatio - GLOBE_ZOOM_ANCHOR_DAMPING_START_RATIO) / (GLOBE_ZOOM_ANCHOR_MAX_DISTANCE_RATIO - GLOBE_ZOOM_ANCHOR_DAMPING_START_RATIO)
+      )
+    );
+    const smoothProgress = edgeProgress * edgeProgress * (3 - 2 * edgeProgress);
+    return 1 - smoothProgress;
+  }
   unproject(xyz, { topLeft = true, targetZ } = {}) {
     const [x, y, z] = xyz;
     const y2 = topLeft ? y : this.height - y;
@@ -2299,18 +2405,22 @@ var GlobeViewport = class extends Viewport {
     if (Number.isFinite(z)) {
       coord = transformVector(pixelUnprojectionMatrix, [x, y2, z, 1]);
     } else {
-      const coord0 = transformVector(pixelUnprojectionMatrix, [x, y2, -1, 1]);
-      const coord1 = transformVector(pixelUnprojectionMatrix, [x, y2, 1, 1]);
-      const lt = ((targetZ || 0) / EARTH_RADIUS + 1) * GLOBE_RADIUS;
-      const lSqr = import_core6.vec3.sqrLen(import_core6.vec3.sub([], coord0, coord1));
-      const l0Sqr = import_core6.vec3.sqrLen(coord0);
-      const l1Sqr = import_core6.vec3.sqrLen(coord1);
-      const sSqr = (4 * l0Sqr * l1Sqr - (lSqr - l0Sqr - l1Sqr) ** 2) / 16;
-      const dSqr = 4 * sSqr / lSqr;
-      const r0 = Math.sqrt(l0Sqr - dSqr);
-      const dr = Math.sqrt(Math.max(0, lt * lt - dSqr));
-      const t = (r0 - dr) / Math.sqrt(lSqr);
-      coord = import_core6.vec3.lerp([], coord0, coord1, t);
+      const {
+        rayStartPosition,
+        rayEndPosition,
+        radius,
+        rayLengthSquared,
+        rayStartDistanceSquared,
+        distanceToCenterSquared
+      } = this._getRayToGlobe(xyz, { topLeft, targetZ });
+      const rayStartToClosestApproach = Math.sqrt(
+        rayStartDistanceSquared - distanceToCenterSquared
+      );
+      const closestApproachToIntersection = Math.sqrt(
+        Math.max(0, radius * radius - distanceToCenterSquared)
+      );
+      const intersectionRatio = (rayStartToClosestApproach - closestApproachToIntersection) / Math.sqrt(rayLengthSquared);
+      coord = import_core5.vec3.lerp([], rayStartPosition, rayEndPosition, intersectionRatio);
     }
     const [X, Y, Z] = this.unprojectPosition(coord);
     if (Number.isFinite(z)) {
@@ -2328,7 +2438,7 @@ var GlobeViewport = class extends Viewport {
   }
   unprojectPosition(xyz) {
     const [x, y, z] = xyz;
-    const D = import_core6.vec3.len(xyz);
+    const D = import_core5.vec3.len(xyz);
     const phi = Math.asin(z / D);
     const lambda = Math.atan2(x, -y);
     const lng = lambda * RADIANS_TO_DEGREES;
@@ -2343,73 +2453,64 @@ var GlobeViewport = class extends Viewport {
     return xyz;
   }
   /**
-   * Pan the globe using delta-based movement
-   * @param coords - the geographic coordinates where the pan started
-   * @param pixel - the current screen position
-   * @param startPixel - the screen position where the pan started
-   * @returns updated viewport options with new longitude/latitude
+   * Pan the globe to place geographic coordinates at a screen pixel.
+   * When `dragStartPosition` is supplied, applies the delta-based movement used by globe dragging.
+   * @param coordinates - Geographic anchor, or the starting longitude, latitude and zoom.
+   * @param screenPosition - Current screen position.
+   * @param dragStartPosition - Screen position where a drag started.
+   * @returns Updated viewport options.
    */
-  panByPosition([startLng, startLat, startZoom], pixel, startPixel) {
+  panByPosition(coordinates, screenPosition, dragStartPosition) {
+    if (!dragStartPosition) {
+      let anchorStrength = this.getZoomAnchorStrength(screenPosition);
+      if (anchorStrength === 0) {
+        return { longitude: this.longitude, latitude: this.latitude };
+      }
+      const currentCoordinates = this.unproject(screenPosition);
+      const longitudeDelta = mod(coordinates[0] - currentCoordinates[0] + 180, 360) - 180;
+      const latitudeDelta = coordinates[1] - currentCoordinates[1];
+      const crossesPole = Math.abs(currentCoordinates[1]) > import_web_mercator3.MAX_LATITUDE || Math.abs(longitudeDelta) > 90;
+      if (isGlobeNorthUp(this.bearing) && crossesPole) {
+        return { longitude: this.longitude, latitude: this.latitude };
+      }
+      if (isGlobeNorthUp(this.bearing) && latitudeDelta !== 0) {
+        const latitudeLimit = latitudeDelta > 0 ? import_web_mercator3.MAX_LATITUDE : -import_web_mercator3.MAX_LATITUDE;
+        const latitudeConstraintStrength = (latitudeLimit - this.latitude) / latitudeDelta;
+        anchorStrength = Math.min(anchorStrength, Math.max(0, latitudeConstraintStrength));
+      }
+      const longitude2 = this.longitude + longitudeDelta * anchorStrength;
+      const latitude2 = Math.max(Math.min(this.latitude + latitudeDelta * anchorStrength, 90), -90);
+      return { longitude: longitude2, latitude: latitude2 };
+    }
+    const [startLongitude, startLatitude, startZoom] = coordinates;
     const scale = Math.pow(2, this.zoom - zoomAdjust(this.latitude));
     const rotationSpeed = 0.25 / scale;
-    const longitude = startLng + rotationSpeed * (startPixel[0] - pixel[0]);
-    let latitude = startLat - rotationSpeed * (startPixel[1] - pixel[1]);
+    const longitude = startLongitude + rotationSpeed * (dragStartPosition[0] - screenPosition[0]);
+    let latitude = startLatitude - rotationSpeed * (dragStartPosition[1] - screenPosition[1]);
     latitude = Math.max(Math.min(latitude, 90), -90);
-    const out = { longitude, latitude, zoom: startZoom - zoomAdjust(startLat) };
-    out.zoom += zoomAdjust(out.latitude);
-    return out;
+    const nextViewState = { longitude, latitude, zoom: startZoom - zoomAdjust(startLatitude) };
+    nextViewState.zoom += zoomAdjust(nextViewState.latitude);
+    return nextViewState;
   }
 };
 GlobeViewport.displayName = "GlobeViewport";
 function zoomAdjust(latitude, clampToPoles) {
   if (clampToPoles) {
-    latitude = Math.max(Math.min(latitude, import_web_mercator4.MAX_LATITUDE), -import_web_mercator4.MAX_LATITUDE);
+    latitude = Math.max(Math.min(latitude, import_web_mercator3.MAX_LATITUDE), -import_web_mercator3.MAX_LATITUDE);
   }
   const scaleAdjust = Math.PI * Math.cos(latitude * Math.PI / 180);
   return Math.log2(scaleAdjust);
 }
 function transformVector(matrix, vector) {
-  const result = import_core6.vec4.transformMat4([], vector, matrix);
-  import_core6.vec4.scale(result, result, 1 / result[3]);
-  return result;
-}
-
-// ../core/src/utils/shader.ts
-function mergeShaders(target, source2) {
-  if (!source2) {
-    return target;
-  }
-  const result = { ...target, ...source2 };
-  if ("defines" in source2) {
-    result.defines = { ...target.defines, ...source2.defines };
-  }
-  if ("modules" in source2) {
-    result.modules = (target.modules || []).concat(source2.modules);
-    if (source2.modules.some((module2) => module2.name === "project64")) {
-      const index = result.modules.findIndex((module2) => module2.name === "project32");
-      if (index >= 0) {
-        result.modules.splice(index, 1);
-      }
-    }
-  }
-  if ("inject" in source2) {
-    if (!target.inject) {
-      result.inject = source2.inject;
-    } else {
-      const mergedInjection = { ...target.inject };
-      for (const key in source2.inject) {
-        mergedInjection[key] = (mergedInjection[key] || "") + source2.inject[key];
-      }
-      result.inject = mergedInjection;
-    }
-  }
+  const result = import_core5.vec4.transformMat4([], vector, matrix);
+  import_core5.vec4.scale(result, result, 1 / result[3]);
   return result;
 }
 
 // ../core/src/viewports/orthographic-viewport.ts
-var import_core7 = require("@math.gl/core");
-var import_web_mercator5 = require("@math.gl/web-mercator");
-var viewMatrix = new import_core7.Matrix4().lookAt({ eye: [0, 0, 1] });
+var import_core6 = require("@math.gl/core");
+var import_web_mercator4 = require("@math.gl/web-mercator");
+var viewMatrix = new import_core6.Matrix4().lookAt({ eye: [0, 0, 1] });
 function getProjectionMatrix({
   width,
   height,
@@ -2423,14 +2524,14 @@ function getProjectionMatrix({
   let top = height / 2;
   if (padding) {
     const { left: l = 0, right: r = 0, top: t = 0, bottom: b = 0 } = padding;
-    const offsetX = (0, import_core7.clamp)((l + width - r) / 2, 0, width) - width / 2;
-    const offsetY = (0, import_core7.clamp)((t + height - b) / 2, 0, height) - height / 2;
+    const offsetX = (0, import_core6.clamp)((l + width - r) / 2, 0, width) - width / 2;
+    const offsetY = (0, import_core6.clamp)((t + height - b) / 2, 0, height) - height / 2;
     left -= offsetX;
     right -= offsetX;
     bottom += offsetY;
     top += offsetY;
   }
-  return new import_core7.Matrix4().ortho({
+  return new import_core6.Matrix4().ortho({
     left,
     right,
     bottom,
@@ -2496,10 +2597,10 @@ var OrthographicViewport = class extends Viewport {
   }
   /* Needed by LinearInterpolator */
   panByPosition(coords, pixel, startPixel) {
-    const fromLocation = (0, import_web_mercator5.pixelsToWorld)(pixel, this.pixelUnprojectionMatrix);
+    const fromLocation = (0, import_web_mercator4.pixelsToWorld)(pixel, this.pixelUnprojectionMatrix);
     const toLocation = this.projectFlat(coords);
-    const translate = import_core7.vec2.add([], toLocation, import_core7.vec2.negate([], fromLocation));
-    const newCenter = import_core7.vec2.add([], this.center, translate);
+    const translate = import_core6.vec2.add([], toLocation, import_core6.vec2.negate([], fromLocation));
+    const newCenter = import_core6.vec2.add([], this.center, translate);
     return { target: this.unprojectFlat(newCenter) };
   }
 };
@@ -3549,7 +3650,7 @@ Fp64Extension.extensionName = "Fp64Extension";
 var fp64_extension_default = Fp64Extension;
 
 // dist/path-style/path-style-extension.js
-var import_core14 = require("@math.gl/core");
+var import_core13 = require("@math.gl/core");
 
 // dist/path-style/shaders.glsl.js
 var dashShaders = {
@@ -3557,26 +3658,68 @@ var dashShaders = {
     "vs:#decl": `
 in vec2 instanceDashArrays;
 #ifdef HIGH_PRECISION_DASH
-in float instanceDashOffsets;
+in vec2 instanceDashOffsets;
 #endif
 out vec2 vDashArray;
 out float vDashOffset;
+out float vDashPathLength;
+layout(std140) uniform pathStyleUniforms {
+float dashAlignMode;
+bool dashGapPickable;
+highp int dashUnits;
+} pathStyle;
 `,
     "vs:#main-end": `
-vDashArray = instanceDashArrays;
+float dashWidthPixels = path.billboard
+? width.x * project.focalDistance
+: width.x * project.scale;
+float strokeHalfWidthPixels = path.billboard ? width.x : width.x * project.scale;
+float dashUnitPixels = strokeHalfWidthPixels;
+if (pathStyle.dashUnits == 1) {
+dashUnitPixels = 1.0;
+} else if (pathStyle.dashUnits == 2) {
+dashUnitPixels = project_size_to_pixel(1.0);
+} else if (pathStyle.dashUnits == 3) {
+dashUnitPixels = project.scale;
+}
+vDashArray = instanceDashArrays * (dashUnitPixels / dashWidthPixels);
 #ifdef HIGH_PRECISION_DASH
-vDashOffset = instanceDashOffsets / width.x;
+vec2 dashOffsetAndLength = (instanceDashOffsets * project.scale) / dashWidthPixels;
+vDashPathLength = dashOffsetAndLength.y;
+float dashUnitLength = vDashArray.x + vDashArray.y;
+float dashPeriod = pathStyle.dashAlignMode == 0.0
+? dashUnitLength
+: vDashPathLength / max(round(vDashPathLength / max(dashUnitLength, 0.0001)), 1.0);
+vDashOffset = dashPeriod > 0.0 ? mod(dashOffsetAndLength.x, dashPeriod) : 0.0;
 #else
 vDashOffset = 0.0;
+vDashPathLength = 0.0;
 #endif
 `,
     "fs:#decl": `
 layout(std140) uniform pathStyleUniforms {
 float dashAlignMode;
 bool dashGapPickable;
+highp int dashUnits;
 } pathStyle;
 in vec2 vDashArray;
 in float vDashOffset;
+in float vDashPathLength;
+float dashPatternIntegral(float position, float solidLength, float unitLength) {
+return floor(position / unitLength) * solidLength +
+min(mod(position, unitLength), solidLength);
+}
+float dashPatternCoverage(
+float position,
+float solidLength,
+float unitLength,
+float filterWidth
+) {
+float halfFilter = 0.5 * filterWidth;
+float reducedPosition = mod(position, unitLength);
+return (dashPatternIntegral(reducedPosition + halfFilter, solidLength, unitLength) -
+dashPatternIntegral(reducedPosition - halfFilter, solidLength, unitLength)) / filterWidth;
+}
 `,
     // if given position is in the gap part of the dashed line
     // dashArray.x: solid stroke length, relative to width
@@ -3587,36 +3730,90 @@ in float vDashOffset;
     // 1 - stretch to fit, draw half dash at each end for nicer joints
     // o--    ----    ----    ----    --o--      --o--     ----     --o
     "fs:#main-start": `
+float dashCoverage = 1.0;
+bool shouldDiscardDash = false;
+bool inRoundedDashGap = false;
+float roundedDashResolvedCoverage = 1.0;
+float roundedDashSubPixelBlend = 0.0;
+float roundedDashDutyCycle = 1.0;
 float solidLength = vDashArray.x;
 float gapLength = vDashArray.y;
 float unitLength = solidLength + gapLength;
+if (unitLength > 0.0 && gapLength > 0.0) {
 float offset;
-if (unitLength > 0.0) {
 if (pathStyle.dashAlignMode == 0.0) {
 offset = vDashOffset;
 } else {
-unitLength = vPathLength / round(vPathLength / unitLength);
+#ifdef HIGH_PRECISION_DASH
+unitLength = vDashPathLength / max(round(vDashPathLength / unitLength), 1.0);
+#else
+unitLength = vPathLength / max(round(vPathLength / unitLength), 1.0);
+#endif
+solidLength = min(solidLength, unitLength);
 offset = solidLength / 2.0;
+#ifdef HIGH_PRECISION_DASH
+offset += vDashOffset;
+#endif
 }
-float unitOffset = mod(vPathPosition.y + offset, unitLength);
-if (gapLength > 0.0 && unitOffset > solidLength) {
-if (path.capType <= 0.5) {
-if (!(pathStyle.dashGapPickable && bool(picking.isActive))) {
-discard;
-}
-} else {
-float distToEnd = length(vec2(
+float alongPath = vPathPosition.y + offset;
+float unitOffset = mod(alongPath, unitLength);
+float filterWidth = max(fwidth(alongPath), 0.0001);
+if (bool(picking.isActive)) {
+bool inGap = unitOffset > solidLength;
+if (inGap && path.capType > 0.5) {
+inGap = length(vec2(
 min(unitOffset - solidLength, unitLength - unitOffset),
 vPathPosition.x
-));
-if (distToEnd > 1.0) {
-if (!(pathStyle.dashGapPickable && bool(picking.isActive))) {
-discard;
+)) > 1.0;
 }
+if (inGap && !pathStyle.dashGapPickable) {
+shouldDiscardDash = true;
 }
+} else if (path.capType <= 0.5) {
+dashCoverage = dashPatternCoverage(alongPath, solidLength, unitLength, filterWidth);
+} else {
+float distanceAlongGap = min(unitOffset - solidLength, unitLength - unitOffset);
+float distanceToEnd = length(vec2(max(distanceAlongGap, 0.0), vPathPosition.x));
+float capEdgePixels = (1.0 - distanceToEnd) / max(fwidth(distanceToEnd), 1e-6);
+if (distanceAlongGap > 0.0) {
+inRoundedDashGap = true;
+roundedDashResolvedCoverage = smoothedge(0.0, capEdgePixels);
+dashCoverage = roundedDashResolvedCoverage;
+}
+float subPixelBlend = smoothstep(unitLength, 2.0 * unitLength, filterWidth);
+roundedDashSubPixelBlend = subPixelBlend;
+float boundedSolidLength = min(solidLength, unitLength);
+float effectiveGap = max(unitLength - boundedSolidLength, 0.0);
+float capSpan = 2.0 * sqrt(max(1.0 - vPathPosition.x * vPathPosition.x, 0.0));
+float roundedDutyCycle = clamp(
+(boundedSolidLength + min(effectiveGap, capSpan)) / unitLength,
+0.0,
+1.0
+);
+roundedDashDutyCycle = roundedDutyCycle;
+dashCoverage = mix(dashCoverage, roundedDutyCycle, subPixelBlend);
 }
+dashCoverage = clamp(dashCoverage, 0.0, 1.0);
+shouldDiscardDash = shouldDiscardDash || dashCoverage <= 0.0;
 }
+`,
+    "fs:#main-end": `
+#ifdef ANTIALIASING
+if (inRoundedDashGap) {
+float pathCoverage = smoothedge(0.0, edgePixels);
+float resolvedCapMultiplier =
+min(pathCoverage, roundedDashResolvedCoverage) / max(pathCoverage, 1e-6);
+dashCoverage = mix(
+resolvedCapMultiplier,
+roundedDashDutyCycle,
+roundedDashSubPixelBlend
+);
+}
+#endif
+if (shouldDiscardDash) {
+discard;
 }
+fragColor.a *= dashCoverage;
 `
   }
 };
@@ -3817,13 +4014,32 @@ float offsetDir = sign(instanceOffsets);
 vPathPosition.x = (vPathPosition.x + offsetDir) * offsetWidth - offsetDir;
 vPathPosition.y *= offsetWidth;
 vPathLength *= offsetWidth;
+#ifdef DASH_ENABLED
+if (pathStyle.dashUnits != 0) {
+vDashArray *= offsetWidth;
+}
+vPathBounds *= offsetWidth;
+#ifdef HIGH_PRECISION_DASH
+vDashPathLength *= offsetWidth;
+float restoredDashUnitLength = vDashArray.x + vDashArray.y;
+float restoredDashPeriod = pathStyle.dashAlignMode == 0.0
+? restoredDashUnitLength
+: vDashPathLength /
+max(round(vDashPathLength / max(restoredDashUnitLength, 0.0001)), 1.0);
+vDashOffset = restoredDashPeriod > 0.0
+? mod(dashOffsetAndLength.x * offsetWidth, restoredDashPeriod)
+: 0.0;
+#else
+vDashOffset *= offsetWidth;
+#endif
+#endif
 `,
-    "fs:#main-start": `
-float isInside;
-isInside = step(-1.0, vPathPosition.x) * step(vPathPosition.x, 1.0);
-if (isInside == 0.0) {
+    "fs:#main-end": `
+#ifndef ANTIALIASING
+if (abs(vPathPosition.x) > 1.0) {
 discard;
 }
+#endif
 `
   }
 };
@@ -3833,11 +4049,56 @@ var defaultProps3 = {
   getDashArray: { type: "accessor", value: [0, 0] },
   getOffset: { type: "accessor", value: 0 },
   dashJustified: false,
-  dashGapPickable: false
+  dashGapPickable: false,
+  dashUnits: "widths"
 };
+var DASH_UNITS = {
+  widths: 0,
+  pixels: 1,
+  meters: 2,
+  common: 3
+};
+var PATH_STYLE_ATTRIBUTES = ["instanceDashArrays", "instanceDashOffsets", "instanceOffsets"];
+function dashMetricsProjectionPropsChanged({ props, oldProps }) {
+  return !deepEqual(props.modelMatrix, oldProps.modelMatrix, 2) || props.coordinateSystem !== oldProps.coordinateSystem || !deepEqual(props.coordinateOrigin, oldProps.coordinateOrigin, 1);
+}
+function projectRenderedPathPosition(layer, position, projectUniforms) {
+  const viewport = layer.context.viewport;
+  if (!(viewport instanceof WebMercatorViewport) || viewport.zoom < 12) {
+    return layer.projectPosition(position, { autoOffset: false });
+  }
+  const positionWorld = import_core13.vec4.transformMat4([], [position[0], position[1], position[2] || 0, 1], projectUniforms.modelMatrix);
+  const coordinateSystem = layer.props.coordinateSystem === "default" ? "lnglat" : layer.props.coordinateSystem;
+  if (coordinateSystem === "lnglat") {
+    if (Math.abs(positionWorld[1] - projectUniforms.coordinateOrigin[1]) > 0.25) {
+      let longitude = positionWorld[0];
+      if (projectUniforms.wrapLongitude) {
+        longitude = ((longitude + 180) % 360 + 360) % 360 - 180;
+      }
+      const commonPosition = viewport.projectPosition([longitude, positionWorld[1], 0]);
+      return [
+        commonPosition[0] - projectUniforms.commonOrigin[0],
+        commonPosition[1] - projectUniforms.commonOrigin[1],
+        positionWorld[2] * projectUniforms.commonUnitsPerMeter[2]
+      ];
+    }
+    import_core13.vec3.sub(positionWorld, positionWorld, projectUniforms.coordinateOrigin);
+  } else if (coordinateSystem === "cartesian") {
+    import_core13.vec3.sub(positionWorld, positionWorld, projectUniforms.coordinateOrigin);
+  }
+  const deltaLatitude = positionWorld[1];
+  const scale = import_core13.vec3.scaleAndAdd([], projectUniforms.commonUnitsPerWorldUnit, projectUniforms.commonUnitsPerWorldUnit2, deltaLatitude);
+  return import_core13.vec3.multiply([], positionWorld, scale);
+}
 var PathStyleExtension = class extends LayerExtension {
-  constructor({ dash = false, offset = false, highPrecisionDash = false } = {}) {
-    super({ dash: dash || highPrecisionDash, offset, highPrecisionDash });
+  constructor({ dash = false, offset = false, dashMode, highPrecisionDash = false } = {}) {
+    const resolvedDashMode = dashMode ?? (highPrecisionDash ? "path" : "segment");
+    super({
+      dash: dash || highPrecisionDash || dashMode !== void 0,
+      offset,
+      dashMode: resolvedDashMode,
+      highPrecisionDash: resolvedDashMode === "path"
+    });
   }
   getLayerType(layer) {
     if ("pathTesselator" in layer.state) {
@@ -3852,6 +4113,59 @@ var PathStyleExtension = class extends LayerExtension {
     }
     return null;
   }
+  synchronizeAttributes(layer) {
+    const attributeManager = layer.getAttributeManager();
+    const layerType = this.getLayerType(layer);
+    if (!attributeManager || !layerType) {
+      return false;
+    }
+    const attributes = attributeManager.getAttributes();
+    const desiredAttributes = /* @__PURE__ */ new Set();
+    if (this.opts.dash) {
+      desiredAttributes.add("instanceDashArrays");
+    }
+    if (layerType === "path" && this.opts.dash && this.opts.dashMode === "path") {
+      desiredAttributes.add("instanceDashOffsets");
+    }
+    if (layerType === "path" && this.opts.offset) {
+      desiredAttributes.add("instanceOffsets");
+    }
+    let topologyChanged = false;
+    for (const attributeName of PATH_STYLE_ATTRIBUTES) {
+      if (attributes[attributeName] && !desiredAttributes.has(attributeName)) {
+        attributeManager.remove([attributeName]);
+        topologyChanged = true;
+      }
+    }
+    if (desiredAttributes.has("instanceDashArrays") && !attributes.instanceDashArrays) {
+      attributeManager.addInstanced({
+        instanceDashArrays: { size: 2, accessor: "getDashArray" }
+      });
+      topologyChanged = true;
+    }
+    if (desiredAttributes.has("instanceDashOffsets") && !attributes.instanceDashOffsets) {
+      attributeManager.addInstanced({
+        instanceDashOffsets: {
+          // [distance from the start of the path, total length of the path]
+          size: 2,
+          // Recalculate from rendered geometry when getPath changes. A binary getPath buffer
+          // contains positions, not dash metrics, so keep it as an update trigger rather than
+          // binding it directly to this attribute.
+          accessor: ["getPath"],
+          // eslint-disable-next-line @typescript-eslint/unbound-method
+          update: this.calculateDashMetrics
+        }
+      });
+      topologyChanged = true;
+    }
+    if (desiredAttributes.has("instanceOffsets") && !attributes.instanceOffsets) {
+      attributeManager.addInstanced({
+        instanceOffsets: { size: 1, accessor: "getOffset" }
+      });
+      topologyChanged = true;
+    }
+    return topologyChanged;
+  }
   isEnabled(layer) {
     return this.getLayerType(layer) !== null;
   }
@@ -3878,57 +4192,55 @@ var PathStyleExtension = class extends LayerExtension {
     const defines2 = {};
     if (extension.opts.dash) {
       result = mergeShaders(result, dashShaders);
-      if (extension.opts.highPrecisionDash) {
+      defines2.DASH_ENABLED = true;
+      if (extension.opts.dashMode === "path") {
         defines2.HIGH_PRECISION_DASH = true;
       }
     }
     if (extension.opts.offset) {
       result = mergeShaders(result, offsetShaders);
+      defines2.PATH_STYLE_OFFSET = true;
     }
     const { inject: inject6 } = result;
     const pathStyle = {
       name: "pathStyle",
-      inject: inject6,
-      uniformTypes: {
-        dashAlignMode: "f32",
-        dashGapPickable: "i32"
-      }
+      inject: inject6
     };
+    if (extension.opts.dash) {
+      pathStyle.uniformTypes = {
+        dashAlignMode: "f32",
+        dashGapPickable: "i32",
+        dashUnits: "i32"
+      };
+    }
     return {
       modules: [pathStyle],
       defines: defines2
     };
   }
   initializeState(context, extension) {
-    const attributeManager = this.getAttributeManager();
-    const layerType = extension.getLayerType(this);
-    if (!attributeManager || !layerType) {
-      return;
-    }
-    if (extension.opts.dash) {
-      attributeManager.addInstanced({
-        instanceDashArrays: { size: 2, accessor: "getDashArray" },
-        ...layerType === "path" && extension.opts.highPrecisionDash ? {
-          instanceDashOffsets: {
-            size: 1,
-            accessor: "getPath",
-            transform: extension.getDashOffsets.bind(this)
-          }
-        } : {}
-      });
-    }
-    if (layerType === "path" && extension.opts.offset) {
-      attributeManager.addInstanced({
-        instanceOffsets: { size: 1, accessor: "getOffset" }
-      });
-    }
+    extension.synchronizeAttributes(this);
   }
   updateState(params, extension) {
+    var _a;
     if (!extension.isEnabled(this)) {
       return;
     }
+    if (params.changeFlags.extensionsChanged) {
+      const topologyChanged = extension.synchronizeAttributes(this);
+      const attributeManager = this.getAttributeManager();
+      if (attributeManager && topologyChanged) {
+        attributeManager.invalidateAll();
+        for (const model of this.getModels()) {
+          model.setBufferLayout(attributeManager.getBufferLayouts(model));
+        }
+      }
+    }
     if (extension.opts.dash) {
       const layerType = extension.getLayerType(this);
+      if (layerType === "path" && extension.opts.dashMode === "path" && dashMetricsProjectionPropsChanged(params)) {
+        (_a = this.getAttributeManager()) == null ? void 0 : _a.invalidate("instanceDashOffsets");
+      }
       if (layerType === "scatterplot" || layerType === "textBackground") {
         const pathStyleProps = {
           dashGapPickable: Boolean(this.props.dashGapPickable)
@@ -3937,12 +4249,96 @@ var PathStyleExtension = class extends LayerExtension {
       } else {
         const pathStyleProps = {
           dashAlignMode: this.props.dashJustified ? 1 : 0,
-          dashGapPickable: Boolean(this.props.dashGapPickable)
+          dashGapPickable: Boolean(this.props.dashGapPickable),
+          dashUnits: DASH_UNITS[this.props.dashUnits ?? "widths"]
         };
         this.setShaderModuleProps({ pathStyle: pathStyleProps });
       }
     }
   }
+  calculateDashMetrics(attribute, { startRow, endRow }) {
+    var _a, _b, _c;
+    const pathTesselator = this.state.pathTesselator;
+    const vertexStarts = pathTesselator == null ? void 0 : pathTesselator.vertexStarts;
+    const instanceCount = pathTesselator == null ? void 0 : pathTesselator.instanceCount;
+    const packedPositions = pathTesselator == null ? void 0 : pathTesselator.get("positions");
+    if (!vertexStarts || instanceCount === void 0 || typeof (pathTesselator == null ? void 0 : pathTesselator.getPathSegmentIndices) !== "function") {
+      throw new Error("PathStyleExtension requires PathLayer tessellation data for path dashes.");
+    }
+    const binaryPath = (_b = (_a = this.props.data) == null ? void 0 : _a.attributes) == null ? void 0 : _b.getPath;
+    const binaryValue = ArrayBuffer.isView(binaryPath) ? binaryPath : binaryPath == null ? void 0 : binaryPath.value;
+    const hasReadableBinaryPath = ArrayBuffer.isView(binaryValue);
+    const usePackedPositions = packedPositions && (!binaryPath || pathTesselator.normalize || ((_c = pathTesselator.opts) == null ? void 0 : _c.isWebGPU));
+    if (binaryPath && !hasReadableBinaryPath || !usePackedPositions && !hasReadableBinaryPath) {
+      throw new Error("PathStyleExtension cannot calculate whole-path dash metrics from GPU-only getPath data; supply data.attributes.instanceDashOffsets.");
+    }
+    const output = attribute.value;
+    const metricSize = attribute.size;
+    const firstRow = Math.max(0, startRow);
+    const lastRow = Math.min(endRow, vertexStarts.length - 1);
+    let binarySize = 3;
+    let binaryStride = 3;
+    let binaryOffset = 0;
+    if (!usePackedPositions) {
+      const bytesPerElement = binaryValue.BYTES_PER_ELEMENT;
+      binarySize = (binaryPath == null ? void 0 : binaryPath.size) || (this.props.positionFormat === "XY" ? 2 : 3);
+      binaryStride = (binaryPath == null ? void 0 : binaryPath.stride) ? binaryPath.stride / bytesPerElement : binarySize;
+      binaryOffset = (binaryPath == null ? void 0 : binaryPath.offset) ? binaryPath.offset / bytesPerElement : 0;
+    }
+    const sourcePosition = new Array(3);
+    const projectUniforms = project_default.getUniforms({
+      viewport: this.context.viewport,
+      modelMatrix: this.props.modelMatrix,
+      coordinateSystem: this.props.coordinateSystem,
+      coordinateOrigin: this.props.coordinateOrigin,
+      // PathLayer normalizes/cuts wrapped paths on the CPU; its shader never wraps again.
+      autoWrapLongitude: this.wrapLongitude
+    });
+    const readPosition = (vertexIndex) => {
+      if (usePackedPositions) {
+        sourcePosition[0] = packedPositions[vertexIndex * 3];
+        sourcePosition[1] = packedPositions[vertexIndex * 3 + 1];
+        sourcePosition[2] = packedPositions[vertexIndex * 3 + 2];
+      } else {
+        const sourceIndex = binaryOffset + vertexIndex * binaryStride;
+        sourcePosition[0] = binaryValue[sourceIndex];
+        sourcePosition[1] = binaryValue[sourceIndex + 1];
+        sourcePosition[2] = binarySize === 3 ? binaryValue[sourceIndex + 2] : 0;
+      }
+      return sourcePosition;
+    };
+    attribute.startIndices = vertexStarts;
+    for (let row = firstRow; row < lastRow; row++) {
+      const rowStart = vertexStarts[row];
+      const rowEnd = Math.min(vertexStarts[row + 1] ?? instanceCount, instanceCount);
+      output.fill(0, rowStart * metricSize, rowEnd * metricSize);
+      const validSegments = pathTesselator.getPathSegmentIndices(row);
+      let phase = 0;
+      let previousSegment = -2;
+      let previousEnd = null;
+      for (const segmentIndex of validSegments) {
+        const outputIndex = segmentIndex * metricSize;
+        output[outputIndex] = phase;
+        const start = segmentIndex === previousSegment + 1 && previousEnd ? previousEnd : projectRenderedPathPosition(this, readPosition(segmentIndex), projectUniforms);
+        const end = projectRenderedPathPosition(this, readPosition(segmentIndex + 1), projectUniforms);
+        phase += import_core13.vec3.dist(start, end);
+        previousSegment = segmentIndex;
+        previousEnd = end;
+      }
+      if (metricSize > 1) {
+        for (let vertexIndex = rowStart; vertexIndex < rowEnd; vertexIndex++) {
+          output[vertexIndex * metricSize + 1] = phase;
+        }
+      }
+    }
+  }
+  /**
+   * Calculates the distance from the start of a path to each rendered segment.
+   *
+   * The final entry is zero because PathLayer reserves the final vertex as invalid padding.
+   * This scalar return shape is retained for compatibility; path-mode rendering uses an
+   * internal attribute containing both each segment offset and the total path length.
+   */
   getDashOffsets(path) {
     const result = [0];
     const positionSize = this.props.positionFormat === "XY" ? 2 : 3;
@@ -3952,9 +4348,9 @@ var PathStyleExtension = class extends LayerExtension {
     let prevP;
     for (let i = 0; i < geometrySize - 1; i++) {
       p = isNested ? path[i] : path.slice(i * positionSize, i * positionSize + positionSize);
-      p = this.projectPosition(p);
+      p = this.projectPosition(p, { autoOffset: false });
       if (i > 0) {
-        result[i] = result[i - 1] + import_core14.vec3.dist(prevP, p);
+        result[i] = result[i - 1] + import_core13.vec3.dist(prevP, p);
       }
       prevP = p;
     }
@@ -3967,12 +4363,26 @@ PathStyleExtension.extensionName = "PathStyleExtension";
 var path_style_extension_default = PathStyleExtension;
 
 // dist/fill-style/shader-module.js
+var FILL_UV_SCALE = 512 / 4e7;
+function getPatternUnitScale(sizeUnits, viewport) {
+  switch (sizeUnits) {
+    case "pixels":
+      return 2 ** -Math.round(viewport.zoom);
+    case "common":
+      return 1;
+    default:
+      return FILL_UV_SCALE;
+  }
+}
 var uniformBlock3 = (
   /* glsl */
   `layout(std140) uniform fillUniforms {
   vec2 patternTextureSize;
+  float patternUnitScale;
   bool patternEnabled;
   bool patternMask;
+  bool procedural;
+  bool flipY;
   vec2 uvCoordinateOrigin;
   vec2 uvCoordinateOrigin64Low;
 } fill;
@@ -3981,13 +4391,20 @@ var uniformBlock3 = (
 var patternVs = (
   /* glsl */
   `
+uniform sampler2D fill_patternTexture;
+
 in vec4 fillPatternFrames;
 in float fillPatternScales;
 in vec2 fillPatternOffsets;
+in vec4 fillPatternBackgroundColors;
 
 out vec2 fill_uv;
 out vec4 fill_patternBounds;
 out vec4 fill_patternPlacement;
+out vec4 fill_backgroundColor;
+out float fill_patternCoordinateScale;
+flat out vec4 fill_patternParams0;
+flat out vec4 fill_patternParams1;
 `
 );
 var vs4 = `
@@ -4001,9 +4418,136 @@ uniform sampler2D fill_patternTexture;
 
 in vec4 fill_patternBounds;
 in vec4 fill_patternPlacement;
+in vec4 fill_backgroundColor;
 in vec2 fill_uv;
+in float fill_patternCoordinateScale;
+flat in vec4 fill_patternParams0;
+flat in vec4 fill_patternParams1;
+
+const float FILL_PATTERN_HATCH = 1.0;
+const float FILL_PATTERN_CROSS_HATCH = 2.0;
+const float FILL_PATTERN_DOTS = 3.0;
+
+float fill_getPatternCoordinate(vec2 axis, float period, float offset) {
+  float coordinateScale = max(abs(fill_patternCoordinateScale), 1.0e-20);
+  vec2 coordinateOrigin = fill.uvCoordinateOrigin;
+  vec2 coordinateOffset = fill.uvCoordinateOrigin64Low + fill_uv;
+  float yDirection = fill.flipY ? 1.0 : -1.0;
+  coordinateOrigin.y *= yDirection;
+  coordinateOffset.y *= yDirection;
+
+  // Reduce the high part before adding the local offset to retain precision in large coordinates.
+  float highPart = mod(dot(coordinateOrigin, axis) / coordinateScale, period);
+  float lowPart = dot(coordinateOffset, axis) / coordinateScale;
+  return mod(highPart + lowPart + offset * period, period);
+}
+
+vec2 fill_getPatternCoords(
+  vec2 axis0,
+  vec2 axis1,
+  vec2 period,
+  vec2 offset
+) {
+  return vec2(
+    fill_getPatternCoordinate(axis0, period.x, offset.x),
+    fill_getPatternCoordinate(axis1, period.y, offset.y)
+  );
+}
+
+float fill_getScreenSpaceAlpha(float signedDistance) {
+  float distanceDerivative = fwidth(signedDistance);
+  if (distanceDerivative == 0.0) {
+    return signedDistance <= 0.0 ? 1.0 : 0.0;
+  }
+  // Normalize the SDF to screen pixels so the coverage ramp is independent of pattern units.
+  float distanceInPixels = signedDistance / distanceDerivative;
+  return 1.0 - smoothstep(-0.5, 0.5, distanceInPixels);
+}
+
+float fill_getLineAlpha(float position, float center, float period, float strokeWidth) {
+  float distanceToLine = abs(mod(position - center + period * 0.5, period) - period * 0.5);
+  return fill_getScreenSpaceAlpha(distanceToLine - strokeWidth * 0.5);
+}
+
+float fill_getHatchAlpha(float angle, float strokeWidth, vec2 gaps, bool alternating) {
+  vec2 lineDirection = vec2(cos(angle), sin(angle));
+  vec2 lineNormal = vec2(-lineDirection.y, lineDirection.x);
+  float period = alternating
+    ? strokeWidth * 2.0 + gaps.x + gaps.y
+    : strokeWidth + gaps.x;
+  float offset = dot(fill_patternPlacement.xy, lineNormal);
+  float position = fill_getPatternCoordinate(lineNormal, period, offset);
+  float alpha = fill_getLineAlpha(position, 0.0, period, strokeWidth);
+  if (alternating) {
+    alpha = max(
+      alpha,
+      fill_getLineAlpha(position, strokeWidth + gaps.x, period, strokeWidth)
+    );
+  }
+  return alpha;
+}
+
+float fill_getDotAlpha(float angle, float skew, float radius, float gap) {
+  vec2 axis0 = vec2(cos(angle), sin(angle));
+  float axis1Angle = angle + 1.5707963267948966 - skew;
+  vec2 axis1 = vec2(cos(axis1Angle), sin(axis1Angle));
+  float determinant = axis0.x * axis1.y - axis0.y * axis1.x;
 
-const float FILL_UV_SCALE = 512.0 / 40000000.0;
+  // The reciprocal basis maps common coordinates into the skewed dot lattice.
+  vec2 reciprocal0 = vec2(axis1.y, -axis1.x) / determinant;
+  vec2 reciprocal1 = vec2(-axis0.y, axis0.x) / determinant;
+  float period = radius * 2.0 + gap;
+  vec2 latticeCoords = fill_getPatternCoords(
+    reciprocal0,
+    reciprocal1,
+    vec2(period),
+    fill_patternPlacement.xy
+  );
+  vec2 cellOffset = mod(latticeCoords + period * 0.5, period) - period * 0.5;
+  float distanceToDotSquared = 1.0e20;
+  // In a skewed lattice the closest dot is not necessarily in the independently wrapped cell.
+  // Include adjacent cells to keep the repeated distance field continuous at cell boundaries.
+  for (int x = -1; x <= 1; x++) {
+    for (int y = -1; y <= 1; y++) {
+      vec2 neighborOffset = cellOffset + vec2(float(x), float(y)) * period;
+      vec2 dotOffset = axis0 * neighborOffset.x + axis1 * neighborOffset.y;
+      distanceToDotSquared = min(distanceToDotSquared, dot(dotOffset, dotOffset));
+    }
+  }
+  float distanceToDot = sqrt(distanceToDotSquared);
+  return fill_getScreenSpaceAlpha(distanceToDot - radius);
+}
+
+float fill_getProceduralPatternAlpha() {
+  float patternType = fill_patternParams0.x;
+  float size = fill_patternParams0.y;
+  vec2 gaps = fill_patternParams0.zw;
+  vec2 angles = fill_patternParams1.xy;
+  float elementCount = fill_patternParams1.z;
+
+  if (patternType == FILL_PATTERN_HATCH) {
+    return fill_getHatchAlpha(angles.x, size, gaps, elementCount == 2.0);
+  }
+  if (patternType == FILL_PATTERN_CROSS_HATCH) {
+    return max(
+      fill_getHatchAlpha(angles.x, size, gaps, false),
+      fill_getHatchAlpha(angles.y, size, gaps, false)
+    );
+  }
+  if (patternType == FILL_PATTERN_DOTS) {
+    return fill_getDotAlpha(angles.x, angles.y, size, gaps.x);
+  }
+  return 1.0;
+}
+
+// Draw the pattern over the background fill (Porter-Duff source-over)
+vec4 fill_blendOverBackground(vec4 pattern, vec4 background) {
+  if (background.a == 0.0 || layer.opacity == 0.0) return pattern;
+  float patternAlpha = pattern.a / layer.opacity;
+  float blendedAlpha = patternAlpha + background.a * (1.0 - patternAlpha);
+  vec3 blendedRGB = mix(background.rgb, pattern.rgb, patternAlpha / blendedAlpha);
+  return vec4(blendedRGB, blendedAlpha * layer.opacity);
+}
 `
 );
 var fs4 = `
@@ -4012,18 +4556,34 @@ ${patternFs}
 `;
 var inject3 = {
   "vs:DECKGL_FILTER_GL_POSITION": (
-    /* glsl */
-    `
-    fill_uv = geometry.position.xy;
-  `
-  ),
-  "vs:DECKGL_FILTER_COLOR": (
     /* glsl */
     `
     if (fill.patternEnabled) {
-      fill_patternBounds = fillPatternFrames / vec4(fill.patternTextureSize, fill.patternTextureSize);
       fill_patternPlacement.xy = fillPatternOffsets;
-      fill_patternPlacement.zw = fillPatternScales * fillPatternFrames.zw;
+      fill_backgroundColor = fillPatternBackgroundColors;
+      if (fill.procedural) {
+        fill_uv = geometry.position.xy;
+        fill_patternCoordinateScale = fill.patternUnitScale * fillPatternScales;
+        int texelIndex = int(fillPatternFrames.x) * 4;
+        fill_patternParams0 = vec4(
+          texelFetch(fill_patternTexture, ivec2(texelIndex, 0), 0).rg,
+          texelFetch(fill_patternTexture, ivec2(texelIndex + 1, 0), 0).rg
+        );
+        fill_patternParams1 = vec4(
+          texelFetch(fill_patternTexture, ivec2(texelIndex + 2, 0), 0).rg,
+          texelFetch(fill_patternTexture, ivec2(texelIndex + 3, 0), 0).rg
+        );
+      } else {
+        fill_patternBounds = fillPatternFrames / vec4(fill.patternTextureSize, fill.patternTextureSize);
+        vec2 patternFrameCommon = fill.patternUnitScale * fillPatternScales * fillPatternFrames.zw;
+        // Reduce the coordinate origin to within one tile before adding the vertex position. The
+        // origin is large in common space, and fp32 cannot carry the sum at full precision.
+        vec2 origin = mod(fill.uvCoordinateOrigin, patternFrameCommon) + fill.uvCoordinateOrigin64Low;
+        fill_uv = (origin + geometry.position.xy) / patternFrameCommon;
+        // Pattern atlases use top-left coordinates, so reverse common-space Y in bottom-left views.
+        fill_uv.y *= fill.flipY ? 1.0 : -1.0;
+        fill_uv += fillPatternOffsets;
+      }
     }
   `
   ),
@@ -4031,22 +4591,31 @@ var inject3 = {
     /* glsl */
     `
     if (fill.patternEnabled) {
-      vec2 scale = FILL_UV_SCALE * fill_patternPlacement.zw;
-      vec2 patternUV = mod(mod(fill.uvCoordinateOrigin, scale) + fill.uvCoordinateOrigin64Low + fill_uv, scale) / scale;
-      patternUV = mod(fill_patternPlacement.xy + patternUV, 1.0);
-
-      vec2 texCoords = fill_patternBounds.xy + fill_patternBounds.zw * patternUV;
-
-      vec4 patternColor = texture(fill_patternTexture, texCoords);
-      color.a *= patternColor.a;
-      if (!fill.patternMask) {
-        color.rgb = patternColor.rgb;
+      if (fill.procedural) {
+        color.a *= fill_getProceduralPatternAlpha();
+      } else {
+        vec2 patternUV = fract(fill_uv);
+        vec2 texCoords = fill_patternBounds.xy + fill_patternBounds.zw * patternUV;
+
+        // Tiling is emulated by wrapping the coordinate, so texCoords jumps from the end of the
+        // frame back to its start once per tile, leading to the wrong mip level being selected,
+        // which leads to artifacts at pattern edges. fill_uv is continuous across the primitive,
+        // meaning that the correct mip level is always selected
+        vec4 grad = fill_patternBounds.zwzw * vec4(dFdx(fill_uv), dFdy(fill_uv));
+        vec4 patternColor = textureGrad(fill_patternTexture, texCoords, grad.xy, grad.zw);
+
+        color.a *= patternColor.a;
+        if (!fill.patternMask) {
+          color.rgb = patternColor.rgb;
+        }
       }
+      color = fill_blendOverBackground(color, fill_backgroundColor);
     }
   `
   )
 };
 function getPatternUniforms(opts) {
+  var _a;
   if (!opts) {
     return {};
   }
@@ -4057,17 +4626,22 @@ function getPatternUniforms(opts) {
     uniforms.patternTextureSize = [fillPatternTexture.width, fillPatternTexture.height];
   }
   if ("project" in opts) {
-    const { fillPatternMask = true, fillPatternEnabled = true } = opts;
+    const { fillPatternMask = true, fillPatternEnabled = true, fillPatternSizeUnits = "meters", fillPatternCommonFrame = null, procedural = false } = opts;
     const projectUniforms = project_default.getUniforms(opts.project);
     const { commonOrigin: coordinateOriginCommon } = projectUniforms;
-    const coordinateOriginCommon64Low = [
-      fp64LowPart(coordinateOriginCommon[0]),
-      fp64LowPart(coordinateOriginCommon[1])
-    ];
-    uniforms.uvCoordinateOrigin = coordinateOriginCommon.slice(0, 2);
-    uniforms.uvCoordinateOrigin64Low = coordinateOriginCommon64Low;
+    const unitScale = getPatternUnitScale(fillPatternSizeUnits, opts.project.viewport);
+    const origin = [coordinateOriginCommon[0], coordinateOriginCommon[1]];
+    if (fillPatternCommonFrame) {
+      origin[0] %= unitScale * fillPatternCommonFrame[0];
+      origin[1] %= unitScale * fillPatternCommonFrame[1];
+    }
+    uniforms.uvCoordinateOrigin = origin;
+    uniforms.uvCoordinateOrigin64Low = [fp64LowPart(origin[0]), fp64LowPart(origin[1])];
+    uniforms.patternUnitScale = unitScale;
     uniforms.patternMask = fillPatternMask;
     uniforms.patternEnabled = fillPatternEnabled;
+    uniforms.procedural = procedural;
+    uniforms.flipY = ((_a = opts.project.viewport) == null ? void 0 : _a.flipY) ?? false;
   }
   return uniforms;
 }
@@ -4080,31 +4654,172 @@ var patternShaders = {
   getUniforms: getPatternUniforms,
   uniformTypes: {
     patternTextureSize: "vec2<f32>",
+    patternUnitScale: "f32",
     patternEnabled: "i32",
     patternMask: "i32",
+    procedural: "i32",
+    flipY: "i32",
     uvCoordinateOrigin: "vec2<f32>",
     uvCoordinateOrigin64Low: "vec2<f32>"
   }
 };
 
+// dist/fill-style/procedural-pattern.js
+var PROCEDURAL_PATTERN_TEXTURE_FORMAT = "rg32float";
+var PROCEDURAL_PATTERN_COMPONENTS_PER_TEXEL = 2;
+var PROCEDURAL_PATTERN_TEXELS_PER_PATTERN = 4;
+var PROCEDURAL_PATTERN_TYPES = {
+  none: 0,
+  hatch: 1,
+  crossHatch: 2,
+  dots: 3
+};
+var PROCEDURAL_PATTERN_OFFSETS = {
+  type: 0,
+  size: 1,
+  gap0: 2,
+  gap1: 3,
+  angle0: 4,
+  angle1: 5,
+  /** Number of alternating gaps, hatch directions, or dot-grid axes, depending on type. */
+  elementCount: 6
+};
+var COMPONENTS_PER_PATTERN = PROCEDURAL_PATTERN_COMPONENTS_PER_TEXEL * PROCEDURAL_PATTERN_TEXELS_PER_PATTERN;
+var DEGREES_TO_RADIANS3 = Math.PI / 180;
+var DEFAULT_SIZE = 1;
+var DEFAULT_GAP = 1;
+var DEFAULT_HATCH_ANGLE = 0;
+var DEFAULT_CROSS_HATCH_ANGLES = [45, 135];
+var DEFAULT_DOT_ANGLE = 0;
+var DEFAULT_DOT_SKEW = 0;
+function packProceduralPatterns(mapping) {
+  const entries = Object.entries(mapping);
+  const data = new Float32Array((entries.length + 1) * COMPONENTS_PER_PATTERN);
+  const patternIndices = /* @__PURE__ */ new Map();
+  entries.forEach(([id, config], entryIndex) => {
+    const patternIndex = entryIndex + 1;
+    const offset = patternIndex * COMPONENTS_PER_PATTERN;
+    patternIndices.set(id, patternIndex);
+    switch (config.type) {
+      case "hatch": {
+        const gap = config.gap === void 0 ? DEFAULT_GAP : config.gap;
+        const strokeWidth = config.strokeWidth === void 0 ? DEFAULT_SIZE : config.strokeWidth;
+        const angle = config.angle === void 0 ? DEFAULT_HATCH_ANGLE : config.angle;
+        if (Array.isArray(gap) && gap.length !== 2) {
+          throw new Error(`${id}.gap must be a number or a two-element array`);
+        }
+        const gaps = Array.isArray(gap) ? gap : [gap, gap];
+        validatePositive(strokeWidth, `${id}.strokeWidth`);
+        validateNonNegative(gaps[0], `${id}.gap[0]`);
+        validateNonNegative(gaps[1], `${id}.gap[1]`);
+        validateAngle(angle, `${id}.angle`);
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.type] = PROCEDURAL_PATTERN_TYPES.hatch;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.size] = strokeWidth;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.gap0] = gaps[0];
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.gap1] = gaps[1];
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.angle0] = angle * DEGREES_TO_RADIANS3;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.elementCount] = Array.isArray(gap) ? 2 : 1;
+        break;
+      }
+      case "cross-hatch": {
+        const angles = config.angles === void 0 ? DEFAULT_CROSS_HATCH_ANGLES : config.angles;
+        const strokeWidth = config.strokeWidth === void 0 ? DEFAULT_SIZE : config.strokeWidth;
+        const gap = config.gap === void 0 ? DEFAULT_GAP : config.gap;
+        if (!Array.isArray(angles) || angles.length !== 2) {
+          throw new Error(`${id}.angles must be a two-element array`);
+        }
+        validatePositive(strokeWidth, `${id}.strokeWidth`);
+        validateNonNegative(gap, `${id}.gap`);
+        validateAngle(angles[0], `${id}.angles[0]`);
+        validateAngle(angles[1], `${id}.angles[1]`);
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.type] = PROCEDURAL_PATTERN_TYPES.crossHatch;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.size] = strokeWidth;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.gap0] = gap;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.gap1] = gap;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.angle0] = angles[0] * DEGREES_TO_RADIANS3;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.angle1] = angles[1] * DEGREES_TO_RADIANS3;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.elementCount] = 2;
+        break;
+      }
+      case "dots": {
+        const radius = config.radius === void 0 ? DEFAULT_SIZE : config.radius;
+        const gap = config.gap === void 0 ? DEFAULT_GAP : config.gap;
+        const angle = config.angle === void 0 ? DEFAULT_DOT_ANGLE : config.angle;
+        const skew = config.skew === void 0 ? DEFAULT_DOT_SKEW : config.skew;
+        validatePositive(radius, `${id}.radius`);
+        validateNonNegative(gap, `${id}.gap`);
+        validateAngle(angle, `${id}.angle`);
+        validateSkew(skew, `${id}.skew`);
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.type] = PROCEDURAL_PATTERN_TYPES.dots;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.size] = radius;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.gap0] = gap;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.gap1] = gap;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.angle0] = angle * DEGREES_TO_RADIANS3;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.angle1] = skew * DEGREES_TO_RADIANS3;
+        data[offset + PROCEDURAL_PATTERN_OFFSETS.elementCount] = 2;
+        break;
+      }
+      default:
+        throw new Error(`${id}.type is not a supported procedural pattern type`);
+    }
+  });
+  return {
+    data,
+    width: data.length / PROCEDURAL_PATTERN_COMPONENTS_PER_TEXEL,
+    height: 1,
+    patternIndices
+  };
+}
+function validatePositive(value, name) {
+  if (!Number.isFinite(value) || value <= 0) {
+    throw new Error(`${name} must be a finite number greater than 0`);
+  }
+}
+function validateNonNegative(value, name) {
+  if (!Number.isFinite(value) || value < 0) {
+    throw new Error(`${name} must be a finite number greater than or equal to 0`);
+  }
+}
+function validateAngle(value, name) {
+  if (!Number.isFinite(value)) {
+    throw new Error(`${name} must be a finite number`);
+  }
+}
+function validateSkew(value, name) {
+  if (!Number.isFinite(value) || value <= -90 || value >= 90) {
+    throw new Error(`${name} must be a finite number greater than -90 and less than 90`);
+  }
+}
+
 // dist/fill-style/fill-style-extension.js
+function leastCommonMultiple(a, b) {
+  if (!Number.isInteger(b) || b <= 0)
+    return 0;
+  if (a === 0)
+    return b;
+  let [x, y] = [a, b];
+  while (y > 0)
+    [x, y] = [y, x % y];
+  return a / x * b;
+}
 var defaultProps4 = {
   fillPatternEnabled: true,
   fillPatternAtlas: {
     type: "image",
     value: null,
-    async: true,
-    parameters: { lodMaxClamp: 0 }
+    async: true
   },
   fillPatternMapping: { type: "object", value: {}, async: true },
   fillPatternMask: true,
+  fillPatternSizeUnits: "meters",
   getFillPattern: { type: "accessor", value: (d) => d.pattern },
   getFillPatternScale: { type: "accessor", value: 1 },
-  getFillPatternOffset: { type: "accessor", value: [0, 0] }
+  getFillPatternOffset: { type: "accessor", value: [0, 0] },
+  getFillPatternBackgroundColor: { type: "accessor", value: [0, 0, 0, 0] }
 };
 var FillStyleExtension = class extends LayerExtension {
-  constructor({ pattern = false } = {}) {
-    super({ pattern });
+  constructor({ pattern = false, proceduralPattern = false } = {}) {
+    super({ pattern: pattern || proceduralPattern, proceduralPattern });
   }
   isEnabled(layer) {
     return layer.getAttributeManager() !== null && !("pathTesselator" in layer.state);
@@ -4128,7 +4843,7 @@ var FillStyleExtension = class extends LayerExtension {
           size: 4,
           stepMode: "dynamic",
           accessor: "getFillPattern",
-          transform: extension.getPatternFrame.bind(this)
+          transform: extension.opts.proceduralPattern ? extension.getProceduralPatternIndex.bind(this) : extension.getPatternFrame.bind(this)
         },
         fillPatternScales: {
           size: 1,
@@ -4140,6 +4855,13 @@ var FillStyleExtension = class extends LayerExtension {
           size: 2,
           stepMode: "dynamic",
           accessor: "getFillPatternOffset"
+        },
+        fillPatternBackgroundColors: {
+          size: 4,
+          type: "unorm8",
+          stepMode: "dynamic",
+          accessor: "getFillPatternBackgroundColor",
+          defaultValue: [0, 0, 0, 255]
         }
       });
     }
@@ -4148,7 +4870,8 @@ var FillStyleExtension = class extends LayerExtension {
         data: new Uint8Array(4),
         width: 1,
         height: 1
-      })
+      }),
+      ...extension.opts.proceduralPattern && extension.createProceduralPatternTexture.call(this, {})
     });
   }
   updateState({ props, oldProps }, extension) {
@@ -4156,30 +4879,81 @@ var FillStyleExtension = class extends LayerExtension {
       return;
     }
     if (props.fillPatternMapping && props.fillPatternMapping !== oldProps.fillPatternMapping) {
+      if (extension.opts.proceduralPattern && typeof props.fillPatternMapping !== "string") {
+        const oldTexture = this.state.proceduralPatternTexture;
+        this.setState(extension.createProceduralPatternTexture.call(this, props.fillPatternMapping));
+        oldTexture == null ? void 0 : oldTexture.delete();
+      }
       this.getAttributeManager().invalidate("getFillPattern");
     }
+    if (props.fillPatternMapping !== oldProps.fillPatternMapping || props.getFillPatternScale !== oldProps.getFillPatternScale) {
+      this.setState({ commonFrame: extension.getCommonFrame(props) });
+    }
   }
   draw(params, extension) {
     if (!extension.isEnabled(this)) {
       return;
     }
-    const { fillPatternAtlas, fillPatternEnabled, fillPatternMask } = this.props;
+    const { fillPatternAtlas, fillPatternEnabled, fillPatternMask, fillPatternSizeUnits } = this.props;
     const fillProps = {
       project: params.shaderModuleProps.project,
       fillPatternEnabled,
       fillPatternMask,
-      fillPatternTexture: fillPatternAtlas || this.state.emptyTexture
+      fillPatternSizeUnits,
+      procedural: extension.opts.proceduralPattern,
+      fillPatternTexture: extension.opts.proceduralPattern ? this.state.proceduralPatternTexture || this.state.emptyTexture : fillPatternAtlas || this.state.emptyTexture,
+      fillPatternCommonFrame: this.state.commonFrame
     };
     this.setShaderModuleProps({ fill: fillProps });
   }
   finalizeState() {
     const emptyTexture = this.state.emptyTexture;
     emptyTexture == null ? void 0 : emptyTexture.delete();
+    const proceduralPatternTexture = this.state.proceduralPatternTexture;
+    proceduralPatternTexture == null ? void 0 : proceduralPatternTexture.delete();
   }
   getPatternFrame(name) {
     const { fillPatternMapping } = this.getCurrentLayer().props;
     const def = fillPatternMapping && fillPatternMapping[name];
-    return def ? [def.x, def.y, def.width, def.height] : [0, 0, 0, 0];
+    return def && "x" in def ? [def.x, def.y, def.width, def.height] : [0, 0, 0, 0];
+  }
+  /**
+   * Returns common frame into which all patterns fit as integer multiples
+   */
+  getCommonFrame(props) {
+    const { fillPatternMapping, getFillPatternScale: scale } = props;
+    if (typeof scale !== "number" || !(scale > 0) || typeof fillPatternMapping !== "object") {
+      return null;
+    }
+    let width = 0;
+    let height = 0;
+    for (const name in fillPatternMapping) {
+      const frame = fillPatternMapping[name];
+      if (!("width" in frame))
+        return null;
+      width = leastCommonMultiple(width, frame.width);
+      height = leastCommonMultiple(height, frame.height);
+      if (!width || !height)
+        return null;
+    }
+    return width ? [scale * width, scale * height] : null;
+  }
+  getProceduralPatternIndex(name) {
+    const patternIndices = this.state.proceduralPatternIndices;
+    return [(patternIndices == null ? void 0 : patternIndices.get(name)) ?? 0, 0, 0, 0];
+  }
+  createProceduralPatternTexture(mapping) {
+    const packedPatterns = packProceduralPatterns(mapping);
+    return {
+      proceduralPatternIndices: packedPatterns.patternIndices,
+      proceduralPatternTexture: this.context.device.createTexture({
+        data: packedPatterns.data,
+        width: packedPatterns.width,
+        height: packedPatterns.height,
+        format: PROCEDURAL_PATTERN_TEXTURE_FORMAT,
+        sampler: { minFilter: "nearest", magFilter: "nearest" }
+      })
+    };
   }
 };
 FillStyleExtension.defaultProps = defaultProps4;
@@ -4424,7 +5198,7 @@ var shader_module_default2 = {
 };
 
 // dist/collision-filter/collision-filter-effect.js
-var import_core20 = require("@math.gl/core");
+var import_core19 = require("@math.gl/core");
 
 // dist/collision-filter/collision-filter-pass.js
 var CollisionFilterPass = class extends LayersPass {
@@ -4519,7 +5293,7 @@ var CollisionFilterEffect = class {
     const needsRender = viewportChanged || // If render info is new
     renderInfo === oldRenderInfo || // If sublayers have changed
     !deepEqual(oldRenderInfo.layers, renderInfo.layers, 1) || // If a sublayer's bounds have been updated
-    renderInfo.layerBounds.some((b, i) => !(0, import_core20.equals)(b, oldRenderInfo.layerBounds[i])) || // If a sublayer's isLoaded state has been updated
+    renderInfo.layerBounds.some((b, i) => !(0, import_core19.equals)(b, oldRenderInfo.layerBounds[i])) || // If a sublayer's isLoaded state has been updated
     renderInfo.allLayersLoaded !== oldRenderInfo.allLayersLoaded || // Some prop is in transition
     renderInfo.layers.some((layer) => layer.props.transitions);
     this.channels[collisionGroup] = renderInfo;
@@ -4807,7 +5581,7 @@ var shader_module_default3 = {
 };
 
 // dist/mask/mask-effect.js
-var import_core27 = require("@math.gl/core");
+var import_core26 = require("@math.gl/core");
 
 // dist/mask/mask-pass.js
 var MASK_BLENDING = {
@@ -5071,7 +5845,7 @@ var MaskEffect = class {
       this.lastViewport = viewport;
       const layerBounds = joinLayerBounds(channelInfo.layers, viewport);
       channelInfo.bounds = layerBounds && getRenderBounds(layerBounds, viewport);
-      if (maskChanged || !(0, import_core27.equals)(channelInfo.bounds, oldChannelInfo.bounds)) {
+      if (maskChanged || !(0, import_core26.equals)(channelInfo.bounds, oldChannelInfo.bounds)) {
         const { maskPass, maskMap } = this;
         const maskViewport = layerBounds && makeViewport({
           bounds: channelInfo.bounds,