maplibre-gl-layers 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 /*!
  * name: maplibre-gl-layers
- * version: 0.5.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: ce37eea48b788c36b4bf98cdfce83b95a85833ee
+ * git.commit.hash: 481f544de02fd3e71a2ba6c28bbb7eeb98b49eff
  */
 
 export * from './types.ts';

package/dist/index.mjs

@@ -1,11 +1,11 @@
 /*!
  * name: maplibre-gl-layers
- * version: 0.5.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: ce37eea48b788c36b4bf98cdfce83b95a85833ee
+ * git.commit.hash: 481f544de02fd3e71a2ba6c28bbb7eeb98b49eff
  */
 const UNLIMITED_SPRITE_SCALING_OPTIONS = {
   metersPerPixel: 1,
@@ -25,6 +25,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
@@ -22002,6 +22014,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;
@@ -22630,6 +22727,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;
@@ -22638,6 +22738,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) => {
@@ -23020,16 +23122,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,
@@ -23039,6 +23131,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;
     });
   };
@@ -23081,6 +23219,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);
@@ -23215,6 +23367,8 @@ const createSpriteLayer = (options) => {
     attribUvLocation = -1;
     uniformTextureLocation = null;
     uniformOpacityLocation = null;
+    anisotropyExtension = null;
+    maxSupportedAnisotropy = 1;
   };
   const render = (glContext, _options) => {
     hitTestEntries.length = 0;
@@ -24739,6 +24893,8 @@ const createSpriteLayer = (options) => {
   return spriteLayout;
 };
 export {
+  BETTER_TEXTURE_FILTERING_OPTIONS,
+  DEFAULT_TEXTURE_FILTERING_OPTIONS,
   STANDARD_SPRITE_SCALING_OPTIONS,
   UNLIMITED_SPRITE_SCALING_OPTIONS,
   applyAutoRotation,