maplibre-gl-layers 0.4.0 → 0.6.0

package/dist/SpriteLayer.d.ts

@@ -1,11 +1,11 @@
 /*!
  * name: maplibre-gl-layers
- * version: 0.4.0
+ * version: 0.6.0
  * description: MapLibre's layer extension library enabling the display, movement, and modification of large numbers of dynamic sprite images
  * author: Kouji Matsui (@kekyo@mi.kekyo.net)
  * license: MIT
  * repository.url: https://github.com/kekyo/maplibre-gl-layers.git
- * git.commit.hash: 366a9e1190bfe770b4002a06284ff627188b5c76
+ * git.commit.hash: 481f544de02fd3e71a2ba6c28bbb7eeb98b49eff
  */
 
 import { Map as MapLibreMap } from 'maplibre-gl';

package/dist/easing.d.ts

@@ -1,11 +1,11 @@
 /*!
  * name: maplibre-gl-layers
- * version: 0.4.0
+ * version: 0.6.0
  * description: MapLibre's layer extension library enabling the display, movement, and modification of large numbers of dynamic sprite images
  * author: Kouji Matsui (@kekyo@mi.kekyo.net)
  * license: MIT
  * repository.url: https://github.com/kekyo/maplibre-gl-layers.git
- * git.commit.hash: 366a9e1190bfe770b4002a06284ff627188b5c76
+ * git.commit.hash: 481f544de02fd3e71a2ba6c28bbb7eeb98b49eff
  */
 
 import { EasingFunction } from './types';

package/dist/index.cjs

@@ -1,12 +1,12 @@
 "use strict";
 /*!
  * name: maplibre-gl-layers
- * version: 0.4.0
+ * version: 0.6.0
  * description: MapLibre's layer extension library enabling the display, movement, and modification of large numbers of dynamic sprite images
  * author: Kouji Matsui (@kekyo@mi.kekyo.net)
  * license: MIT
  * repository.url: https://github.com/kekyo/maplibre-gl-layers.git
- * git.commit.hash: 366a9e1190bfe770b4002a06284ff627188b5c76
+ * git.commit.hash: 481f544de02fd3e71a2ba6c28bbb7eeb98b49eff
  */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const UNLIMITED_SPRITE_SCALING_OPTIONS = {
@@ -27,6 +27,18 @@ const STANDARD_SPRITE_SCALING_OPTIONS = {
   spriteMinPixel: 24,
   spriteMaxPixel: 100
 };
+const DEFAULT_TEXTURE_FILTERING_OPTIONS = {
+  minFilter: "linear",
+  magFilter: "linear",
+  generateMipmaps: false,
+  maxAnisotropy: 1
+};
+const BETTER_TEXTURE_FILTERING_OPTIONS = {
+  minFilter: "linear-mipmap-linear",
+  magFilter: "linear",
+  generateMipmaps: true,
+  maxAnisotropy: 8
+};
 var maplibreGl$1 = { exports: {} };
 /**
  * MapLibre GL JS
@@ -21519,25 +21531,30 @@ const calculateDistanceAndBearingMeters = (from, to) => {
 const clampSpritePixelSize = (width, height, spriteMinPixel, spriteMaxPixel) => {
   const largest = Math.max(width, height);
   if (!Number.isFinite(largest) || largest <= 0) {
-    return { width, height };
+    return { width, height, scaleAdjustment: 1 };
   }
   let nextWidth = width;
   let nextHeight = height;
+  let scaleAdjustment = 1;
+  let adjustedLargest = largest;
   if (spriteMinPixel > 0 && largest < spriteMinPixel) {
     const factor = spriteMinPixel / largest;
     nextWidth *= factor;
     nextHeight *= factor;
+    scaleAdjustment *= factor;
+    adjustedLargest *= factor;
   }
-  if (spriteMaxPixel > 0 && largest > spriteMaxPixel) {
-    const factor = spriteMaxPixel / largest;
+  if (spriteMaxPixel > 0 && adjustedLargest > spriteMaxPixel) {
+    const factor = spriteMaxPixel / adjustedLargest;
     nextWidth *= factor;
     nextHeight *= factor;
+    scaleAdjustment *= factor;
   }
-  return { width: nextWidth, height: nextHeight };
+  return { width: nextWidth, height: nextHeight, scaleAdjustment };
 };
 const calculateBillboardPixelDimensions = (imageWidth, imageHeight, baseMetersPerPixel, imageScale, zoomScaleFactor, effectivePixelsPerMeter, spriteMinPixel, spriteMaxPixel) => {
   if (!imageWidth || !imageHeight || imageWidth <= 0 || imageHeight <= 0 || baseMetersPerPixel <= 0 || effectivePixelsPerMeter <= 0) {
-    return { width: 0, height: 0 };
+    return { width: 0, height: 0, scaleAdjustment: 1 };
   }
   const scaleFactor = baseMetersPerPixel * imageScale * zoomScaleFactor * effectivePixelsPerMeter;
   const rawWidth = ensureFinite(imageWidth * scaleFactor);
@@ -21549,10 +21566,10 @@ const calculateBillboardPixelDimensions = (imageWidth, imageHeight, baseMetersPe
     spriteMaxPixel
   );
 };
-const calculateBillboardOffsetPixels = (offset, imageScale, zoomScaleFactor, effectivePixelsPerMeter) => {
+const calculateBillboardOffsetPixels = (offset, imageScale, zoomScaleFactor, effectivePixelsPerMeter, sizeScaleAdjustment = 1) => {
   var _a, _b;
   const offsetMeters = ((_a = offset == null ? void 0 : offset.offsetMeters) != null ? _a : 0) * imageScale * zoomScaleFactor;
-  const offsetPixels = offsetMeters * effectivePixelsPerMeter;
+  const offsetPixels = offsetMeters * effectivePixelsPerMeter * sizeScaleAdjustment;
   const offsetRad = ((_b = offset == null ? void 0 : offset.offsetDeg) != null ? _b : 0) * DEG2RAD;
   return {
     x: offsetPixels * Math.sin(offsetRad),
@@ -21579,11 +21596,12 @@ const calculateBillboardAnchorShiftPixels = (halfWidth, halfHeight, anchor, tota
 const calculateSurfaceWorldDimensions = (imageWidth, imageHeight, baseMetersPerPixel, imageScale, zoomScaleFactor, options) => {
   var _a, _b;
   if (!imageWidth || !imageHeight || imageWidth <= 0 || imageHeight <= 0 || baseMetersPerPixel <= 0) {
-    return { width: 0, height: 0 };
+    return { width: 0, height: 0, scaleAdjustment: 1 };
   }
   const scaleFactor = baseMetersPerPixel * imageScale * zoomScaleFactor;
   let width = ensureFinite(imageWidth * scaleFactor);
   let height = ensureFinite(imageHeight * scaleFactor);
+  let scaleAdjustment = 1;
   const effectivePixelsPerMeter = (options == null ? void 0 : options.effectivePixelsPerMeter) !== void 0 ? options.effectivePixelsPerMeter : 0;
   const spriteMinPixel = (_a = options == null ? void 0 : options.spriteMinPixel) != null ? _a : 0;
   const spriteMaxPixel = (_b = options == null ? void 0 : options.spriteMaxPixel) != null ? _b : 0;
@@ -21603,11 +21621,12 @@ const calculateSurfaceWorldDimensions = (imageWidth, imageHeight, baseMetersPerP
         if (scale !== 1) {
           width *= scale;
           height *= scale;
+          scaleAdjustment *= scale;
         }
       }
     }
   }
-  return { width, height };
+  return { width, height, scaleAdjustment };
 };
 const calculateSurfaceAnchorShiftMeters = (halfWidthMeters, halfHeightMeters, anchor, totalRotateDeg) => {
   var _a, _b;
@@ -21626,7 +21645,7 @@ const calculateSurfaceAnchorShiftMeters = (halfWidthMeters, halfHeightMeters, an
   const north = -anchorEast * sinR - anchorNorth * cosR;
   return { east, north };
 };
-const calculateSurfaceOffsetMeters = (offset, imageScale, zoomScaleFactor) => {
+const calculateSurfaceOffsetMeters = (offset, imageScale, zoomScaleFactor, sizeScaleAdjustment = 1) => {
   var _a, _b;
   const offsetMeters = ((_a = offset == null ? void 0 : offset.offsetMeters) != null ? _a : 0) * imageScale * zoomScaleFactor;
   if (offsetMeters === 0) {
@@ -21634,8 +21653,8 @@ const calculateSurfaceOffsetMeters = (offset, imageScale, zoomScaleFactor) => {
   }
   const rad = ((_b = offset == null ? void 0 : offset.offsetDeg) != null ? _b : 0) * DEG2RAD;
   return {
-    east: offsetMeters * Math.sin(rad),
-    north: offsetMeters * Math.cos(rad)
+    east: offsetMeters * Math.sin(rad) * sizeScaleAdjustment,
+    north: offsetMeters * Math.cos(rad) * sizeScaleAdjustment
   };
 };
 const MIN_COS_LAT = 1e-6;
@@ -21783,7 +21802,8 @@ const calculateBillboardCenterPosition = (params) => {
     offset,
     imageScale,
     zoomScaleFactor,
-    effectivePixelsPerMeter
+    effectivePixelsPerMeter,
+    pixelDims.scaleAdjustment
   );
   const centerX = base.x + offsetShift.x;
   const centerY = base.y - offsetShift.y;
@@ -21904,7 +21924,8 @@ const calculateSurfaceCenterPosition = (params) => {
   const offsetMeters = calculateSurfaceOffsetMeters(
     offset,
     imageScale,
-    zoomScaleFactor
+    zoomScaleFactor,
+    worldDims.scaleAdjustment
   );
   const totalEast = anchorShiftMeters.east + offsetMeters.east;
   const totalNorth = anchorShiftMeters.north + offsetMeters.north;
@@ -21995,6 +22016,91 @@ const MIN_CLIP_Z_EPSILON = 1e-7;
 const EPS_NDC = 1e-6;
 const ORDER_MAX = 16;
 const ORDER_BUCKET = 16;
+const MIN_FILTER_VALUES = [
+  "nearest",
+  "linear",
+  "nearest-mipmap-nearest",
+  "nearest-mipmap-linear",
+  "linear-mipmap-nearest",
+  "linear-mipmap-linear"
+];
+const MAG_FILTER_VALUES = [
+  "nearest",
+  "linear"
+];
+const MIPMAP_MIN_FILTERS = /* @__PURE__ */ new Set([
+  "nearest-mipmap-nearest",
+  "nearest-mipmap-linear",
+  "linear-mipmap-nearest",
+  "linear-mipmap-linear"
+]);
+const filterRequiresMipmaps = (filter) => MIPMAP_MIN_FILTERS.has(filter);
+const resolveTextureFilteringOptions = (options) => {
+  var _a, _b;
+  const minCandidate = options == null ? void 0 : options.minFilter;
+  const minFilter = MIN_FILTER_VALUES.includes(
+    minCandidate
+  ) ? minCandidate : DEFAULT_TEXTURE_FILTERING_OPTIONS.minFilter;
+  const magCandidate = options == null ? void 0 : options.magFilter;
+  const magFilter = MAG_FILTER_VALUES.includes(
+    magCandidate
+  ) ? magCandidate : DEFAULT_TEXTURE_FILTERING_OPTIONS.magFilter;
+  let generateMipmaps = (_a = options == null ? void 0 : options.generateMipmaps) != null ? _a : DEFAULT_TEXTURE_FILTERING_OPTIONS.generateMipmaps;
+  if (filterRequiresMipmaps(minFilter)) {
+    generateMipmaps = true;
+  }
+  let maxAnisotropy = (_b = options == null ? void 0 : options.maxAnisotropy) != null ? _b : DEFAULT_TEXTURE_FILTERING_OPTIONS.maxAnisotropy;
+  if (!Number.isFinite(maxAnisotropy) || maxAnisotropy < 1) {
+    maxAnisotropy = 1;
+  }
+  return {
+    minFilter,
+    magFilter,
+    generateMipmaps,
+    maxAnisotropy
+  };
+};
+const ANISOTROPY_EXTENSION_NAMES = [
+  "EXT_texture_filter_anisotropic",
+  "WEBKIT_EXT_texture_filter_anisotropic",
+  "MOZ_EXT_texture_filter_anisotropic"
+];
+const resolveAnisotropyExtension = (glContext) => {
+  for (const name of ANISOTROPY_EXTENSION_NAMES) {
+    const extension = glContext.getExtension(name);
+    if (extension) {
+      return extension;
+    }
+  }
+  return null;
+};
+const isPowerOfTwo = (value) => value > 0 && (value & value - 1) === 0;
+const resolveGlMinFilter = (glContext, filter) => {
+  switch (filter) {
+    case "nearest":
+      return glContext.NEAREST;
+    case "nearest-mipmap-nearest":
+      return glContext.NEAREST_MIPMAP_NEAREST;
+    case "nearest-mipmap-linear":
+      return glContext.NEAREST_MIPMAP_LINEAR;
+    case "linear-mipmap-nearest":
+      return glContext.LINEAR_MIPMAP_NEAREST;
+    case "linear-mipmap-linear":
+      return glContext.LINEAR_MIPMAP_LINEAR;
+    case "linear":
+    default:
+      return glContext.LINEAR;
+  }
+};
+const resolveGlMagFilter = (glContext, filter) => {
+  switch (filter) {
+    case "nearest":
+      return glContext.NEAREST;
+    case "linear":
+    default:
+      return glContext.LINEAR;
+  }
+};
 const calculatePerspectiveRatio = (mapInstance, location2) => {
   var _a, _b, _c;
   const transform = mapInstance.transform;
@@ -22623,6 +22729,9 @@ const createSpriteLayer = (options) => {
   var _a;
   const id = (_a = options == null ? void 0 : options.id) != null ? _a : "sprite-layer";
   const resolvedScaling = resolveScalingOptions(options == null ? void 0 : options.spriteScaling);
+  const resolvedTextureFiltering = resolveTextureFilteringOptions(
+    options == null ? void 0 : options.textureFiltering
+  );
   let gl = null;
   let map = null;
   let program = null;
@@ -22631,6 +22740,8 @@ const createSpriteLayer = (options) => {
   let attribUvLocation = -1;
   let uniformTextureLocation = null;
   let uniformOpacityLocation = null;
+  let anisotropyExtension = null;
+  let maxSupportedAnisotropy = 1;
   const images = /* @__PURE__ */ new Map();
   const queuedTextureIds = /* @__PURE__ */ new Set();
   const queueTextureUpload = (image) => {
@@ -23013,16 +23124,6 @@ const createSpriteLayer = (options) => {
         glContext.TEXTURE_WRAP_T,
         glContext.CLAMP_TO_EDGE
       );
-      glContext.texParameteri(
-        glContext.TEXTURE_2D,
-        glContext.TEXTURE_MIN_FILTER,
-        glContext.LINEAR
-      );
-      glContext.texParameteri(
-        glContext.TEXTURE_2D,
-        glContext.TEXTURE_MAG_FILTER,
-        glContext.LINEAR
-      );
       glContext.pixelStorei(glContext.UNPACK_PREMULTIPLY_ALPHA_WEBGL, 1);
       glContext.texImage2D(
         glContext.TEXTURE_2D,
@@ -23032,6 +23133,52 @@ const createSpriteLayer = (options) => {
         glContext.UNSIGNED_BYTE,
         image.bitmap
       );
+      let minFilterEnum = resolveGlMinFilter(
+        glContext,
+        resolvedTextureFiltering.minFilter
+      );
+      const magFilterEnum = resolveGlMagFilter(
+        glContext,
+        resolvedTextureFiltering.magFilter
+      );
+      let usedMipmaps = false;
+      if (resolvedTextureFiltering.generateMipmaps) {
+        const isWebGL2 = typeof WebGL2RenderingContext !== "undefined" && glContext instanceof WebGL2RenderingContext;
+        const canUseMipmaps = isWebGL2 || isPowerOfTwo(image.width) && isPowerOfTwo(image.height);
+        if (canUseMipmaps) {
+          glContext.generateMipmap(glContext.TEXTURE_2D);
+          usedMipmaps = true;
+        } else {
+          minFilterEnum = glContext.LINEAR;
+        }
+      }
+      if (!usedMipmaps && filterRequiresMipmaps(resolvedTextureFiltering.minFilter)) {
+        minFilterEnum = glContext.LINEAR;
+      }
+      glContext.texParameteri(
+        glContext.TEXTURE_2D,
+        glContext.TEXTURE_MIN_FILTER,
+        minFilterEnum
+      );
+      glContext.texParameteri(
+        glContext.TEXTURE_2D,
+        glContext.TEXTURE_MAG_FILTER,
+        magFilterEnum
+      );
+      if (usedMipmaps && anisotropyExtension && resolvedTextureFiltering.maxAnisotropy > 1) {
+        const ext = anisotropyExtension;
+        const targetAnisotropy = Math.min(
+          resolvedTextureFiltering.maxAnisotropy,
+          maxSupportedAnisotropy
+        );
+        if (targetAnisotropy > 1) {
+          glContext.texParameterf(
+            glContext.TEXTURE_2D,
+            ext.TEXTURE_MAX_ANISOTROPY_EXT,
+            targetAnisotropy
+          );
+        }
+      }
       image.texture = texture;
     });
   };
@@ -23074,6 +23221,20 @@ const createSpriteLayer = (options) => {
   const onAdd = (mapInstance, glContext) => {
     map = mapInstance;
     gl = glContext;
+    anisotropyExtension = resolveAnisotropyExtension(glContext);
+    if (anisotropyExtension) {
+      const ext = anisotropyExtension;
+      const supported = glContext.getParameter(
+        ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT
+      );
+      if (typeof supported === "number" && Number.isFinite(supported) && supported >= 1) {
+        maxSupportedAnisotropy = supported;
+      } else {
+        maxSupportedAnisotropy = 1;
+      }
+    } else {
+      maxSupportedAnisotropy = 1;
+    }
     canvasElement = mapInstance.getCanvas();
     const registerDisposer = (disposer) => {
       inputListenerDisposers.push(disposer);
@@ -23208,6 +23369,8 @@ const createSpriteLayer = (options) => {
     attribUvLocation = -1;
     uniformTextureLocation = null;
     uniformOpacityLocation = null;
+    anisotropyExtension = null;
+    maxSupportedAnisotropy = 1;
   };
   const render = (glContext, _options) => {
     hitTestEntries.length = 0;
@@ -23435,7 +23598,8 @@ const createSpriteLayer = (options) => {
         const offsetMeters = calculateSurfaceOffsetMeters(
           offsetDef,
           imageScale,
-          zoomScaleFactor
+          zoomScaleFactor,
+          surfaceCenter.worldDimensions.scaleAdjustment
         );
         const cornerDisplacements = calculateSurfaceCornerDisplacements({
           worldWidthMeters: surfaceCenter.worldDimensions.width,
@@ -23643,7 +23807,8 @@ const createSpriteLayer = (options) => {
           const offsetMeters = calculateSurfaceOffsetMeters(
             offsetResolved,
             imageScale,
-            zoomScaleFactor
+            zoomScaleFactor,
+            worldDims.scaleAdjustment
           );
           const cornerDisplacements = calculateSurfaceCornerDisplacements({
             worldWidthMeters: worldDims.width,
@@ -24729,6 +24894,8 @@ const createSpriteLayer = (options) => {
   };
   return spriteLayout;
 };
+exports.BETTER_TEXTURE_FILTERING_OPTIONS = BETTER_TEXTURE_FILTERING_OPTIONS;
+exports.DEFAULT_TEXTURE_FILTERING_OPTIONS = DEFAULT_TEXTURE_FILTERING_OPTIONS;
 exports.STANDARD_SPRITE_SCALING_OPTIONS = STANDARD_SPRITE_SCALING_OPTIONS;
 exports.UNLIMITED_SPRITE_SCALING_OPTIONS = UNLIMITED_SPRITE_SCALING_OPTIONS;
 exports.applyAutoRotation = applyAutoRotation;