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

package/dist/dist.dev.js

@@ -1176,10 +1176,10 @@ void main() {
     out[2] = a[2] * b;
     return out;
   }
-  function scaleAndAdd(out, a, b, scale2) {
-    out[0] = a[0] + b[0] * scale2;
-    out[1] = a[1] + b[1] * scale2;
-    out[2] = a[2] + b[2] * scale2;
+  function scaleAndAdd(out, a, b, scale3) {
+    out[0] = a[0] + b[0] * scale3;
+    out[1] = a[1] + b[1] * scale3;
+    out[2] = a[2] + b[2] * scale3;
     return out;
   }
   function distance(a, b) {
@@ -1216,13 +1216,13 @@ void main() {
     const x = a[0];
     const y = a[1];
     const z = a[2];
-    let len2 = x * x + y * y + z * z;
-    if (len2 > 0) {
-      len2 = 1 / Math.sqrt(len2);
+    let len3 = x * x + y * y + z * z;
+    if (len3 > 0) {
+      len3 = 1 / Math.sqrt(len3);
     }
-    out[0] = a[0] * len2;
-    out[1] = a[1] * len2;
-    out[2] = a[2] * len2;
+    out[0] = a[0] * len3;
+    out[1] = a[1] * len3;
+    out[2] = a[2] * len3;
     return out;
   }
   function dot(a, b) {
@@ -1283,14 +1283,14 @@ void main() {
     out[2] = a[2] * factor1 + b[2] * factor2 + c[2] * factor3 + d[2] * factor4;
     return out;
   }
-  function random(out, scale2) {
-    scale2 = scale2 === void 0 ? 1 : scale2;
+  function random(out, scale3) {
+    scale3 = scale3 === void 0 ? 1 : scale3;
     const r = RANDOM() * 2 * Math.PI;
     const z = RANDOM() * 2 - 1;
-    const zScale = Math.sqrt(1 - z * z) * scale2;
+    const zScale = Math.sqrt(1 - z * z) * scale3;
     out[0] = Math.cos(r) * zScale;
     out[1] = Math.sin(r) * zScale;
-    out[2] = z * scale2;
+    out[2] = z * scale3;
     return out;
   }
   function transformMat4(out, a, m) {
@@ -1449,6 +1449,372 @@ void main() {
     };
   })();
 
+  // ../../node_modules/@math.gl/core/dist/gl-matrix/vec4.js
+  var vec4_exports = {};
+  __export(vec4_exports, {
+    add: () => add2,
+    ceil: () => ceil2,
+    clone: () => clone2,
+    copy: () => copy2,
+    create: () => create2,
+    cross: () => cross2,
+    dist: () => dist2,
+    distance: () => distance2,
+    div: () => div2,
+    divide: () => divide2,
+    dot: () => dot2,
+    equals: () => equals3,
+    exactEquals: () => exactEquals2,
+    floor: () => floor2,
+    forEach: () => forEach2,
+    fromValues: () => fromValues2,
+    inverse: () => inverse2,
+    len: () => len2,
+    length: () => length2,
+    lerp: () => lerp2,
+    max: () => max2,
+    min: () => min2,
+    mul: () => mul2,
+    multiply: () => multiply2,
+    negate: () => negate2,
+    normalize: () => normalize2,
+    random: () => random2,
+    round: () => round3,
+    scale: () => scale2,
+    scaleAndAdd: () => scaleAndAdd2,
+    set: () => set2,
+    sqrDist: () => sqrDist2,
+    sqrLen: () => sqrLen2,
+    squaredDistance: () => squaredDistance2,
+    squaredLength: () => squaredLength2,
+    str: () => str2,
+    sub: () => sub2,
+    subtract: () => subtract2,
+    transformMat4: () => transformMat42,
+    transformQuat: () => transformQuat2,
+    zero: () => zero2
+  });
+  function create2() {
+    const out = new ARRAY_TYPE(4);
+    if (ARRAY_TYPE != Float32Array) {
+      out[0] = 0;
+      out[1] = 0;
+      out[2] = 0;
+      out[3] = 0;
+    }
+    return out;
+  }
+  function clone2(a) {
+    const out = new ARRAY_TYPE(4);
+    out[0] = a[0];
+    out[1] = a[1];
+    out[2] = a[2];
+    out[3] = a[3];
+    return out;
+  }
+  function fromValues2(x, y, z, w) {
+    const out = new ARRAY_TYPE(4);
+    out[0] = x;
+    out[1] = y;
+    out[2] = z;
+    out[3] = w;
+    return out;
+  }
+  function copy2(out, a) {
+    out[0] = a[0];
+    out[1] = a[1];
+    out[2] = a[2];
+    out[3] = a[3];
+    return out;
+  }
+  function set2(out, x, y, z, w) {
+    out[0] = x;
+    out[1] = y;
+    out[2] = z;
+    out[3] = w;
+    return out;
+  }
+  function add2(out, a, b) {
+    out[0] = a[0] + b[0];
+    out[1] = a[1] + b[1];
+    out[2] = a[2] + b[2];
+    out[3] = a[3] + b[3];
+    return out;
+  }
+  function subtract2(out, a, b) {
+    out[0] = a[0] - b[0];
+    out[1] = a[1] - b[1];
+    out[2] = a[2] - b[2];
+    out[3] = a[3] - b[3];
+    return out;
+  }
+  function multiply2(out, a, b) {
+    out[0] = a[0] * b[0];
+    out[1] = a[1] * b[1];
+    out[2] = a[2] * b[2];
+    out[3] = a[3] * b[3];
+    return out;
+  }
+  function divide2(out, a, b) {
+    out[0] = a[0] / b[0];
+    out[1] = a[1] / b[1];
+    out[2] = a[2] / b[2];
+    out[3] = a[3] / b[3];
+    return out;
+  }
+  function ceil2(out, a) {
+    out[0] = Math.ceil(a[0]);
+    out[1] = Math.ceil(a[1]);
+    out[2] = Math.ceil(a[2]);
+    out[3] = Math.ceil(a[3]);
+    return out;
+  }
+  function floor2(out, a) {
+    out[0] = Math.floor(a[0]);
+    out[1] = Math.floor(a[1]);
+    out[2] = Math.floor(a[2]);
+    out[3] = Math.floor(a[3]);
+    return out;
+  }
+  function min2(out, a, b) {
+    out[0] = Math.min(a[0], b[0]);
+    out[1] = Math.min(a[1], b[1]);
+    out[2] = Math.min(a[2], b[2]);
+    out[3] = Math.min(a[3], b[3]);
+    return out;
+  }
+  function max2(out, a, b) {
+    out[0] = Math.max(a[0], b[0]);
+    out[1] = Math.max(a[1], b[1]);
+    out[2] = Math.max(a[2], b[2]);
+    out[3] = Math.max(a[3], b[3]);
+    return out;
+  }
+  function round3(out, a) {
+    out[0] = round(a[0]);
+    out[1] = round(a[1]);
+    out[2] = round(a[2]);
+    out[3] = round(a[3]);
+    return out;
+  }
+  function scale2(out, a, b) {
+    out[0] = a[0] * b;
+    out[1] = a[1] * b;
+    out[2] = a[2] * b;
+    out[3] = a[3] * b;
+    return out;
+  }
+  function scaleAndAdd2(out, a, b, scale3) {
+    out[0] = a[0] + b[0] * scale3;
+    out[1] = a[1] + b[1] * scale3;
+    out[2] = a[2] + b[2] * scale3;
+    out[3] = a[3] + b[3] * scale3;
+    return out;
+  }
+  function distance2(a, b) {
+    const x = b[0] - a[0];
+    const y = b[1] - a[1];
+    const z = b[2] - a[2];
+    const w = b[3] - a[3];
+    return Math.sqrt(x * x + y * y + z * z + w * w);
+  }
+  function squaredDistance2(a, b) {
+    const x = b[0] - a[0];
+    const y = b[1] - a[1];
+    const z = b[2] - a[2];
+    const w = b[3] - a[3];
+    return x * x + y * y + z * z + w * w;
+  }
+  function length2(a) {
+    const x = a[0];
+    const y = a[1];
+    const z = a[2];
+    const w = a[3];
+    return Math.sqrt(x * x + y * y + z * z + w * w);
+  }
+  function squaredLength2(a) {
+    const x = a[0];
+    const y = a[1];
+    const z = a[2];
+    const w = a[3];
+    return x * x + y * y + z * z + w * w;
+  }
+  function negate2(out, a) {
+    out[0] = -a[0];
+    out[1] = -a[1];
+    out[2] = -a[2];
+    out[3] = -a[3];
+    return out;
+  }
+  function inverse2(out, a) {
+    out[0] = 1 / a[0];
+    out[1] = 1 / a[1];
+    out[2] = 1 / a[2];
+    out[3] = 1 / a[3];
+    return out;
+  }
+  function normalize2(out, a) {
+    const x = a[0];
+    const y = a[1];
+    const z = a[2];
+    const w = a[3];
+    let len3 = x * x + y * y + z * z + w * w;
+    if (len3 > 0) {
+      len3 = 1 / Math.sqrt(len3);
+    }
+    out[0] = x * len3;
+    out[1] = y * len3;
+    out[2] = z * len3;
+    out[3] = w * len3;
+    return out;
+  }
+  function dot2(a, b) {
+    return a[0] * b[0] + a[1] * b[1] + a[2] * b[2] + a[3] * b[3];
+  }
+  function cross2(out, u, v, w) {
+    const A = v[0] * w[1] - v[1] * w[0];
+    const B = v[0] * w[2] - v[2] * w[0];
+    const C = v[0] * w[3] - v[3] * w[0];
+    const D = v[1] * w[2] - v[2] * w[1];
+    const E = v[1] * w[3] - v[3] * w[1];
+    const F = v[2] * w[3] - v[3] * w[2];
+    const G = u[0];
+    const H = u[1];
+    const I = u[2];
+    const J = u[3];
+    out[0] = H * F - I * E + J * D;
+    out[1] = -(G * F) + I * C - J * B;
+    out[2] = G * E - H * C + J * A;
+    out[3] = -(G * D) + H * B - I * A;
+    return out;
+  }
+  function lerp2(out, a, b, t) {
+    const ax = a[0];
+    const ay = a[1];
+    const az = a[2];
+    const aw = a[3];
+    out[0] = ax + t * (b[0] - ax);
+    out[1] = ay + t * (b[1] - ay);
+    out[2] = az + t * (b[2] - az);
+    out[3] = aw + t * (b[3] - aw);
+    return out;
+  }
+  function random2(out, scale3) {
+    scale3 = scale3 === void 0 ? 1 : scale3;
+    let v1;
+    let v2;
+    let v3;
+    let v4;
+    let s1;
+    let s2;
+    do {
+      v1 = RANDOM() * 2 - 1;
+      v2 = RANDOM() * 2 - 1;
+      s1 = v1 * v1 + v2 * v2;
+    } while (s1 >= 1);
+    do {
+      v3 = RANDOM() * 2 - 1;
+      v4 = RANDOM() * 2 - 1;
+      s2 = v3 * v3 + v4 * v4;
+    } while (s2 >= 1);
+    const d = Math.sqrt((1 - s1) / s2);
+    out[0] = scale3 * v1;
+    out[1] = scale3 * v2;
+    out[2] = scale3 * v3 * d;
+    out[3] = scale3 * v4 * d;
+    return out;
+  }
+  function transformMat42(out, a, m) {
+    const x = a[0];
+    const y = a[1];
+    const z = a[2];
+    const w = a[3];
+    out[0] = m[0] * x + m[4] * y + m[8] * z + m[12] * w;
+    out[1] = m[1] * x + m[5] * y + m[9] * z + m[13] * w;
+    out[2] = m[2] * x + m[6] * y + m[10] * z + m[14] * w;
+    out[3] = m[3] * x + m[7] * y + m[11] * z + m[15] * w;
+    return out;
+  }
+  function transformQuat2(out, a, q) {
+    const x = a[0];
+    const y = a[1];
+    const z = a[2];
+    const qx = q[0];
+    const qy = q[1];
+    const qz = q[2];
+    const qw = q[3];
+    const ix = qw * x + qy * z - qz * y;
+    const iy = qw * y + qz * x - qx * z;
+    const iz = qw * z + qx * y - qy * x;
+    const iw = -qx * x - qy * y - qz * z;
+    out[0] = ix * qw + iw * -qx + iy * -qz - iz * -qy;
+    out[1] = iy * qw + iw * -qy + iz * -qx - ix * -qz;
+    out[2] = iz * qw + iw * -qz + ix * -qy - iy * -qx;
+    out[3] = a[3];
+    return out;
+  }
+  function zero2(out) {
+    out[0] = 0;
+    out[1] = 0;
+    out[2] = 0;
+    out[3] = 0;
+    return out;
+  }
+  function str2(a) {
+    return `vec4(${a[0]}, ${a[1]}, ${a[2]}, ${a[3]})`;
+  }
+  function exactEquals2(a, b) {
+    return a[0] === b[0] && a[1] === b[1] && a[2] === b[2] && a[3] === b[3];
+  }
+  function equals3(a, b) {
+    const a0 = a[0];
+    const a1 = a[1];
+    const a2 = a[2];
+    const a3 = a[3];
+    const b0 = b[0];
+    const b1 = b[1];
+    const b2 = b[2];
+    const b3 = b[3];
+    return Math.abs(a0 - b0) <= EPSILON * Math.max(1, Math.abs(a0), Math.abs(b0)) && Math.abs(a1 - b1) <= EPSILON * Math.max(1, Math.abs(a1), Math.abs(b1)) && Math.abs(a2 - b2) <= EPSILON * Math.max(1, Math.abs(a2), Math.abs(b2)) && Math.abs(a3 - b3) <= EPSILON * Math.max(1, Math.abs(a3), Math.abs(b3));
+  }
+  var sub2 = subtract2;
+  var mul2 = multiply2;
+  var div2 = divide2;
+  var dist2 = distance2;
+  var sqrDist2 = squaredDistance2;
+  var len2 = length2;
+  var sqrLen2 = squaredLength2;
+  var forEach2 = (function() {
+    const vec = create2();
+    return function(a, stride, offset, count, fn, arg) {
+      let i;
+      let l;
+      if (!stride) {
+        stride = 4;
+      }
+      if (!offset) {
+        offset = 0;
+      }
+      if (count) {
+        l = Math.min(count * stride + offset, a.length);
+      } else {
+        l = a.length;
+      }
+      for (i = offset; i < l; i += stride) {
+        vec[0] = a[i];
+        vec[1] = a[i + 1];
+        vec[2] = a[i + 2];
+        vec[3] = a[i + 3];
+        fn(vec, vec, arg);
+        a[i] = vec[0];
+        a[i + 1] = vec[1];
+        a[i + 2] = vec[2];
+        a[i + 3] = vec[3];
+      }
+      return a;
+    };
+  })();
+
   // ../../node_modules/@luma.gl/shadertools/dist/modules/math/fp64/fp64-utils.js
   function fp64ify(a, out = [], startIndex = 0) {
     const hiPart = Math.fround(a);
@@ -3857,14 +4223,14 @@ vec4 project_position_to_clipspace(
   var getMemoizedUniforms = (0, import_core5._memoize)(calculateUniforms);
   function getUniforms2(opts) {
     if (opts && "viewport" in opts) {
-      const { viewProjectionMatrix, scale: scale2 } = opts.viewport;
-      return getMemoizedUniforms({ viewProjectionMatrix, scale: scale2 });
+      const { viewProjectionMatrix, scale: scale3 } = opts.viewport;
+      return getMemoizedUniforms({ viewProjectionMatrix, scale: scale3 });
     }
     return {};
   }
   function calculateUniforms({
     viewProjectionMatrix,
-    scale: scale2
+    scale: scale3
   }) {
     const glViewProjectionMatrixFP64 = fp64ifyMatrix42(viewProjectionMatrix);
     const viewProjectionMatrix64High = new Float32Array(16);
@@ -3878,7 +4244,7 @@ vec4 project_position_to_clipspace(
       }
     }
     return {
-      scale: fp64ify2(scale2),
+      scale: fp64ify2(scale3),
       viewProjectionMatrix: [...viewProjectionMatrix64High],
       viewProjectionMatrix64Low: [...viewProjectionMatrix64Low]
     };
@@ -3911,27 +4277,121 @@ vec4 project_position_to_clipspace(
       "vs:#decl": `
 in vec2 instanceDashArrays;
 #ifdef HIGH_PRECISION_DASH
-in float instanceDashOffsets;
+// [distance from the start of the path, total length of the path], in common space.
+in vec2 instanceDashOffsets;
 #endif
 out vec2 vDashArray;
 out float vDashOffset;
+out float vDashPathLength;
+
+// Also declared in the fragment stage. The vertex stage needs dashAlignMode so that it can
+// reduce the dash phase modulo the same period the fragment stage will test against, and
+// dashUnits to scale the dash array into that period's units.
+layout(std140) uniform pathStyleUniforms {
+  float dashAlignMode;
+  bool dashGapPickable;
+  highp int dashUnits;
+} pathStyle;
 `,
       "vs:#main-end": `
-vDashArray = instanceDashArrays;
+// How many screen pixels one unit of vPathPosition.y covers. The two extrusion branches of
+// the path layer leave this in different units, and both differences have to be undone here
+// for a billboarded path to dash like a flat one.
+//
+// Flat paths extrude in common space, so \`width\` is in common units and a unit of
+// vPathPosition.y is width.x * project.scale pixels.
+//
+// Billboarded paths extrude in clip space, so \`width\` is already in pixels at this point -
+// the clip-space conversion happens inside getLineJoinOffset. That conversion also folds in
+// project.focalDistance, which scales the half-width the segment delta is divided by but not
+// the delta itself, so a unit of vPathPosition.y ends up focalDistance pixels wider than the
+// stroke it is supposed to be relative to.
+float dashWidthPixels = path.billboard
+  ? width.x * project.focalDistance
+  : width.x * project.scale;
+
+// The actual half stroke width on screen, which is what 'widths' is relative to. It differs
+// from dashWidthPixels by exactly the spurious focalDistance above, so expressing 'widths'
+// as a ratio of the two corrects the billboard case onto the flat one - getDashArray is
+// documented relative to the stroke, and flat paths already honor that.
+float strokeHalfWidthPixels = path.billboard ? width.x : width.x * project.scale;
+
+// Everything reduces to "how many screen pixels is one dash unit", divided through by the
+// pixels per unit of vPathPosition.y, so the fragment shader needs no notion of units at all.
+// Keep the cases in sync with DASH_UNITS in path-style-extension.ts.
+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;
+// instanceDashOffsets accumulates common-space distance on the CPU. Convert it to pixels, then
+// divide by the pixel half-width so both extrusion branches use the same dash coordinate.
+vec2 dashOffsetAndLength = (instanceDashOffsets * project.scale) / dashWidthPixels;
+vDashPathLength = dashOffsetAndLength.y;
+
+// Reduce the phase into the first period here rather than in the fragment shader. On a long
+// path at high zoom the raw offset reaches into the millions, and adding the much smaller
+// vPathPosition.y to it in fp32 loses the latter entirely, freezing the pattern mid-segment.
+// The dash function is periodic, so this discards nothing - but it has to be reduced modulo
+// whichever period the fragment stage will actually test against, hence dashAlignMode here.
+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;
+
+// Integral of the dash square wave from 0 to position, i.e. how much solid stroke lies before it.
+float dashPatternIntegral(float position, float solidLength, float unitLength) {
+  return floor(position / unitLength) * solidLength +
+    min(mod(position, unitLength), solidLength);
+}
+
+// Fraction of the filter-width interval centered on position that is covered by solid stroke.
+//
+// Testing the dash pattern with a single comparison per fragment aliases as soon as one
+// period approaches one pixel: the stroke breaks into moire or, when the phase happens to
+// land inside a dash, reads as solid. Integrating the wave over the fragment footprint
+// instead is the closed form of what a mipmapped dash texture approximates, and it degrades
+// the way one wants - once a period drops below a pixel the result converges on the duty
+// cycle solidLength / unitLength, so the stroke fades to a uniformly lighter line.
+//
+// position is reduced into the first period first. The integral satisfies
+// F(position + periodIndex * unitLength) = F(position) + periodIndex * solidLength,
+// so the same periodIndex cancels out of the
+// difference below, and keeping the arguments small avoids subtracting two large nearly
+// equal numbers in fp32 on long paths.
+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
@@ -3942,41 +4402,130 @@ 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;
 
-  float offset;
-
-  if (unitLength > 0.0) {
+  if (unitLength > 0.0 && gapLength > 0.0) {
+    float offset;
     if (pathStyle.dashAlignMode == 0.0) {
       offset = vDashOffset;
     } else {
-      unitLength = vPathLength / round(vPathLength / unitLength);
+      // Justified: stretch the period so a whole number of them spans the run, and start
+      // half a dash in so both ends finish on a joint. Rounding up to at least one period
+      // matters - a run shorter than half a period used to round to zero, which made
+      // unitLength infinite and rendered it solid.
+#ifdef HIGH_PRECISION_DASH
+      // Justify across the entire path rather than each segment separately, so the gaps stay
+      // even instead of being stretched by a different amount on every segment. vDashOffset
+      // already carries the distance to the start of this segment, reduced modulo this same
+      // period in the vertex shader.
+      unitLength = vDashPathLength / max(round(vDashPathLength / unitLength), 1.0);
+#else
+      unitLength = vPathLength / max(round(vPathLength / unitLength), 1.0);
+#endif
+      // A short segment or path can make the fitted period shorter than the requested dash.
+      // Bound the solid interval to that period so coverage and duty cycle remain valid.
+      solidLength = min(solidLength, unitLength);
       offset = solidLength / 2.0;
+#ifdef HIGH_PRECISION_DASH
+      offset += vDashOffset;
+#endif
     }
 
-    float unitOffset = mod(vPathPosition.y + offset, unitLength);
+    float alongPath = vPathPosition.y + offset;
+    float unitOffset = mod(alongPath, unitLength);
+    float filterWidth = max(fwidth(alongPath), 0.0001);
 
-    if (gapLength > 0.0 && unitOffset > solidLength) {
-      if (path.capType <= 0.5) {
-        if (!(pathStyle.dashGapPickable && bool(picking.isActive))) {
-          discard;
-        }
-      } else {
-        // caps are rounded, test the distance to solid ends
-        float distToEnd = length(vec2(
+    // Picking stays a hard in-or-out test. A blended picking colour decodes to the wrong
+    // index, and dashGapPickable is defined in terms of whole gaps rather than coverage.
+    if (bool(picking.isActive)) {
+      bool inGap = unitOffset > solidLength;
+      // Only measure the rounded end-cap distance after the hard interval test has found a
+      // gap. Inside a solid interval the longitudinal distance is negative; taking its
+      // vector length would turn it positive and incorrectly discard the middle of a dash.
+      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 {
+      // Rounded caps: the dash end is an arc, so resolve the 2D distance to the nearer solid
+      // end rather than the 1D position along the path. Only filter fragments in the gap;
+      // PathLayer already antialiases the ordinary sides of the solid stroke.
+      float distanceAlongGap = min(unitOffset - solidLength, unitLength - unitOffset);
+      // Clamp before taking the derivative so the distance stays continuous across the
+      // wrapped period boundary. Evaluate fwidth for every fragment in the quad; derivatives
+      // are undefined inside the non-uniform gap branch below.
+      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;
+      }
+      // That smoothstep resolves one dash end at a time, so it stops meaning anything once a
+      // whole period fits inside the filter footprint. Start fading only at that boundary;
+      // blending resolvable periods would attenuate the solid body of every rounded dash.
+      float subPixelBlend = smoothstep(unitLength, 2.0 * unitLength, filterWidth);
+      roundedDashSubPixelBlend = subPixelBlend;
+      // At sub-pixel scale, preserve the area of the repeated capsule rather than falling
+      // back to the rectangular duty cycle. Each scanline contains the solid body plus the
+      // two circular cap intrusions, capped when neighboring caps overlap across the gap.
+      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);
+    // Fully transparent fragments would still write depth and occlude whatever is behind.
+    shouldDiscardDash = shouldDiscardDash || dashCoverage <= 0.0;
+  }
+`,
+      "fs:#main-end": `
+  // PathLayer computes analytic-edge derivatives in its fragment body. A discard in
+  // #main-start can remove helper invocations and make those derivatives undefined, so all
+  // dash-related termination is deferred until the layer has completed that work.
+  #ifdef ANTIALIASING
+  if (inRoundedDashGap) {
+    // The rounded dash cap and PathLayer silhouette are two geometric constraints on the
+    // same fragment. Intersect their coverage instead of multiplying two edge ramps; at the
+    // cap/body shoulder both ramps are half covered and multiplication would create a dark
+    // quarter-covered notch. Keep the sub-pixel duty cycle separable from the path silhouette.
+    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;
 `
     }
   };
@@ -4198,13 +4747,42 @@ in float instanceOffsets;
   vPathPosition.x = (vPathPosition.x + offsetDir) * offsetWidth - offsetDir;
   vPathPosition.y *= offsetWidth;
   vPathLength *= offsetWidth;
+#ifdef DASH_ENABLED
+  // DECKGL_FILTER_SIZE above widened the stroke by offsetWidth, so these rescalings restore
+  // units of the original half-width. The dash block merges ahead of this one.
+  if (pathStyle.dashUnits != 0) {
+    // Absolute dash units must not inherit the artificial width used to build offset
+    // geometry. Relative 'widths' units intentionally remain tied to the original stroke.
+    vDashArray *= offsetWidth;
+  }
+  vPathBounds *= offsetWidth;
+#ifdef HIGH_PRECISION_DASH
+  vDashPathLength *= offsetWidth;
+  // The dash block reduced the CPU path offset modulo a period expressed in widened-width
+  // units. Multiplying that remainder cannot recover the original phase after wrapping, so
+  // redo the reduction with both the restored path offset and restored justified period.
+  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
+  // With analytic antialiasing, PathLayer evaluates this boundary using the remapped
+  // vPathPosition and retains the complete centered coverage ramp. The hard clip remains for
+  // the original non-AA path.
+  if (abs(vPathPosition.x) > 1.0) {
     discard;
   }
+#endif
 `
     }
   };
@@ -4214,15 +4792,73 @@ in float instanceOffsets;
     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 !(0, import_core7._deepEqual)(props.modelMatrix, oldProps.modelMatrix, 2) || props.coordinateSystem !== oldProps.coordinateSystem || !(0, import_core7._deepEqual)(props.coordinateOrigin, oldProps.coordinateOrigin, 1);
+  }
+  function projectRenderedPathPosition(layer, position, projectUniforms) {
+    const viewport = layer.context.viewport;
+    if (!(viewport instanceof import_core7.WebMercatorViewport) || viewport.zoom < 12) {
+      return layer.projectPosition(position, { autoOffset: false });
+    }
+    const positionWorld = vec4_exports.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]
+        ];
+      }
+      vec3_exports.sub(positionWorld, positionWorld, projectUniforms.coordinateOrigin);
+    } else if (coordinateSystem === "cartesian") {
+      vec3_exports.sub(positionWorld, positionWorld, projectUniforms.coordinateOrigin);
+    }
+    const deltaLatitude = positionWorld[1];
+    const scale3 = vec3_exports.scaleAndAdd(
+      [],
+      projectUniforms.commonUnitsPerWorldUnit,
+      projectUniforms.commonUnitsPerWorldUnit2,
+      deltaLatitude
+    );
+    return vec3_exports.multiply([], positionWorld, scale3);
+  }
   var PathStyleExtension = class extends import_core7.LayerExtension {
     constructor({
       dash = false,
       offset = false,
+      dashMode,
       highPrecisionDash = false
     } = {}) {
-      super({ dash: dash || highPrecisionDash, offset, highPrecisionDash });
+      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) {
@@ -4237,6 +4873,59 @@ in float instanceOffsets;
       }
       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;
     }
@@ -4263,57 +4952,54 @@ in float instanceOffsets;
       const defines = {};
       if (extension.opts.dash) {
         result = (0, import_core7._mergeShaders)(result, dashShaders);
-        if (extension.opts.highPrecisionDash) {
+        defines.DASH_ENABLED = true;
+        if (extension.opts.dashMode === "path") {
           defines.HIGH_PRECISION_DASH = true;
         }
       }
       if (extension.opts.offset) {
         result = (0, import_core7._mergeShaders)(result, offsetShaders);
+        defines.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
       };
     }
     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) {
       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)) {
+          this.getAttributeManager()?.invalidate("instanceDashOffsets");
+        }
         if (layerType === "scatterplot" || layerType === "textBackground") {
           const pathStyleProps = {
             dashGapPickable: Boolean(this.props.dashGapPickable)
@@ -4322,12 +5008,101 @@ in float instanceOffsets;
         } 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 }) {
+      const pathTesselator = this.state.pathTesselator;
+      const vertexStarts = pathTesselator?.vertexStarts;
+      const instanceCount = pathTesselator?.instanceCount;
+      const packedPositions = pathTesselator?.get("positions");
+      if (!vertexStarts || instanceCount === void 0 || typeof pathTesselator?.getPathSegmentIndices !== "function") {
+        throw new Error("PathStyleExtension requires PathLayer tessellation data for path dashes.");
+      }
+      const binaryPath = this.props.data?.attributes?.getPath;
+      const binaryValue = ArrayBuffer.isView(binaryPath) ? binaryPath : binaryPath?.value;
+      const hasReadableBinaryPath = ArrayBuffer.isView(binaryValue);
+      const usePackedPositions = packedPositions && (!binaryPath || pathTesselator.normalize || pathTesselator.opts?.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?.size || (this.props.positionFormat === "XY" ? 2 : 3);
+        binaryStride = binaryPath?.stride ? binaryPath.stride / bytesPerElement : binarySize;
+        binaryOffset = binaryPath?.offset ? binaryPath.offset / bytesPerElement : 0;
+      }
+      const sourcePosition = new Array(3);
+      const projectUniforms = import_core7.project.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 += vec3_exports.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;
@@ -4337,7 +5112,7 @@ in float instanceOffsets;
       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] + vec3_exports.dist(prevP, p);
         }
@@ -4355,12 +5130,26 @@ in float instanceOffsets;
 
   // src/fill-style/shader-module.ts
   var import_core9 = __toESM(require_core(), 1);
+  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;
@@ -4369,13 +5158,20 @@ in float instanceOffsets;
   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 vs3 = `
@@ -4389,9 +5185,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);
+}
 
-const float FILL_UV_SCALE = 512.0 / 40000000.0;
+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;
+
+  // 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 fs3 = `
@@ -4402,16 +5325,32 @@ ${patternFs}
     "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;
+      }
     }
   `
     ),
@@ -4419,17 +5358,25 @@ ${patternFs}
       /* 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);
     }
   `
     )
@@ -4445,17 +5392,28 @@ ${patternFs}
       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 = import_core9.project.getUniforms(opts.project);
       const { commonOrigin: coordinateOriginCommon } = projectUniforms;
-      const coordinateOriginCommon64Low = [
-        (0, import_core9.fp64LowPart)(coordinateOriginCommon[0]),
-        (0, import_core9.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 = [(0, import_core9.fp64LowPart)(origin[0]), (0, import_core9.fp64LowPart)(origin[1])];
+      uniforms.patternUnitScale = unitScale;
       uniforms.patternMask = fillPatternMask;
       uniforms.patternEnabled = fillPatternEnabled;
+      uniforms.procedural = procedural;
+      uniforms.flipY = opts.project.viewport?.flipY ?? false;
     }
     return uniforms;
   }
@@ -4468,31 +5426,172 @@ ${patternFs}
     getUniforms: getPatternUniforms,
     uniformTypes: {
       patternTextureSize: "vec2<f32>",
+      patternUnitScale: "f32",
       patternEnabled: "i32",
       patternMask: "i32",
+      procedural: "i32",
+      flipY: "i32",
       uvCoordinateOrigin: "vec2<f32>",
       uvCoordinateOrigin64Low: "vec2<f32>"
     }
   };
 
+  // src/fill-style/procedural-pattern.ts
+  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_RADIANS2 = 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, config2], entryIndex) => {
+      const patternIndex = entryIndex + 1;
+      const offset = patternIndex * COMPONENTS_PER_PATTERN;
+      patternIndices.set(id, patternIndex);
+      switch (config2.type) {
+        case "hatch": {
+          const gap = config2.gap === void 0 ? DEFAULT_GAP : config2.gap;
+          const strokeWidth = config2.strokeWidth === void 0 ? DEFAULT_SIZE : config2.strokeWidth;
+          const angle2 = config2.angle === void 0 ? DEFAULT_HATCH_ANGLE : config2.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(angle2, `${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] = angle2 * DEGREES_TO_RADIANS2;
+          data[offset + PROCEDURAL_PATTERN_OFFSETS.elementCount] = Array.isArray(gap) ? 2 : 1;
+          break;
+        }
+        case "cross-hatch": {
+          const angles = config2.angles === void 0 ? DEFAULT_CROSS_HATCH_ANGLES : config2.angles;
+          const strokeWidth = config2.strokeWidth === void 0 ? DEFAULT_SIZE : config2.strokeWidth;
+          const gap = config2.gap === void 0 ? DEFAULT_GAP : config2.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_RADIANS2;
+          data[offset + PROCEDURAL_PATTERN_OFFSETS.angle1] = angles[1] * DEGREES_TO_RADIANS2;
+          data[offset + PROCEDURAL_PATTERN_OFFSETS.elementCount] = 2;
+          break;
+        }
+        case "dots": {
+          const radius = config2.radius === void 0 ? DEFAULT_SIZE : config2.radius;
+          const gap = config2.gap === void 0 ? DEFAULT_GAP : config2.gap;
+          const angle2 = config2.angle === void 0 ? DEFAULT_DOT_ANGLE : config2.angle;
+          const skew = config2.skew === void 0 ? DEFAULT_DOT_SKEW : config2.skew;
+          validatePositive(radius, `${id}.radius`);
+          validateNonNegative(gap, `${id}.gap`);
+          validateAngle(angle2, `${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] = angle2 * DEGREES_TO_RADIANS2;
+          data[offset + PROCEDURAL_PATTERN_OFFSETS.angle1] = skew * DEGREES_TO_RADIANS2;
+          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`);
+    }
+  }
+
   // src/fill-style/fill-style-extension.ts
+  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 import_core10.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);
@@ -4516,7 +5615,7 @@ ${patternFs}
             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,
@@ -4528,6 +5627,13 @@ ${patternFs}
             size: 2,
             stepMode: "dynamic",
             accessor: "getFillPatternOffset"
+          },
+          fillPatternBackgroundColors: {
+            size: 4,
+            type: "unorm8",
+            stepMode: "dynamic",
+            accessor: "getFillPatternBackgroundColor",
+            defaultValue: [0, 0, 0, 255]
           }
         });
       }
@@ -4536,7 +5642,8 @@ ${patternFs}
           data: new Uint8Array(4),
           width: 1,
           height: 1
-        })
+        }),
+        ...extension.opts.proceduralPattern && extension.createProceduralPatternTexture.call(this, {})
       });
     }
     updateState({ props, oldProps }, extension) {
@@ -4544,30 +5651,84 @@ ${patternFs}
         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?.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?.delete();
+      const proceduralPatternTexture = this.state.proceduralPatternTexture;
+      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: scale3 } = props;
+      if (typeof scale3 !== "number" || !(scale3 > 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 ? [scale3 * width, scale3 * height] : null;
+    }
+    getProceduralPatternIndex(name) {
+      const patternIndices = this.state.proceduralPatternIndices;
+      return [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;
@@ -5320,12 +6481,12 @@ in vec2 mask_texCoords;
     if (zoom === void 0) {
       width = width - border * 2;
       height = height - border * 2;
-      const scale2 = Math.min(width / (bounds[2] - bounds[0]), height / (bounds[3] - bounds[1]));
-      zoom = Math.min(Math.log2(scale2), 20);
+      const scale3 = Math.min(width / (bounds[2] - bounds[0]), height / (bounds[3] - bounds[1]));
+      zoom = Math.min(Math.log2(scale3), 20);
     } else if (!width || !height) {
-      const scale2 = 2 ** zoom;
-      width = Math.round(Math.abs(bounds[2] - bounds[0]) * scale2);
-      height = Math.round(Math.abs(bounds[3] - bounds[1]) * scale2);
+      const scale3 = 2 ** zoom;
+      width = Math.round(Math.abs(bounds[2] - bounds[0]) * scale3);
+      height = Math.round(Math.abs(bounds[3] - bounds[1]) * scale3);
       const maxSize = MAX_VIEWPORT_SIZE - border * 2;
       if (width > maxSize || height > maxSize) {
         const r = maxSize / Math.max(width, height);
@@ -6915,9 +8076,9 @@ if ((terrain.mode == TERRAIN_MODE_USE_COVER) || (terrain.mode == TERRAIN_MODE_US
         }
         this.bounds = bounds;
         this.lastViewport = viewport;
-        const scale2 = viewport.scale;
-        const pixelWidth = (bounds[2] - bounds[0]) * scale2;
-        const pixelHeight = (bounds[3] - bounds[1]) * scale2;
+        const scale3 = viewport.scale;
+        const pixelWidth = (bounds[2] - bounds[0]) * scale3;
+        const pixelHeight = (bounds[3] - bounds[1]) * scale3;
         const centerMerc = viewport.isGeospatial ? lngLatToMercatorCommon([
           viewport.longitude ?? 0,
           viewport.latitude ?? 0