itowns 2.44.3-next.1 → 2.44.3-next.11

package/lib/Core/Tile/Tile.js

@@ -0,0 +1,219 @@
+import * as THREE from 'three';
+import Coordinates from "../Geographic/Coordinates.js";
+import CRS from "../Geographic/Crs.js";
+import Extent from "../Geographic/Extent.js";
+import { getInfoTms, getCountTiles } from "./TileGrid.js";
+const _tmsCoord = new THREE.Vector2();
+const _dimensionTile = new THREE.Vector2();
+const r = {
+  row: 0,
+  col: 0,
+  invDiff: 0
+};
+function _rowColfromParent(/** @type {Tile} */tile, /** @type {number} */zoom) {
+  const diffLevel = tile.zoom - zoom;
+  const diff = 2 ** diffLevel;
+  r.invDiff = 1 / diff;
+  r.row = (tile.row - tile.row % diff) * r.invDiff;
+  r.col = (tile.col - tile.col % diff) * r.invDiff;
+  return r;
+}
+const _extent = new Extent('EPSG:4326', [0, 0, 0, 0]);
+const _extent2 = new Extent('EPSG:4326', [0, 0, 0, 0]);
+const _c = new Coordinates('EPSG:4326', 0, 0);
+class Tile {
+  /**
+   * Tile is a geographical bounding rectangle defined by zoom, row and column.
+   *
+   * @param {String} crs projection of limit values.
+   * @param {number} [zoom=0] zoom value
+   * @param {number} [row=0] row value
+   * @param {number} [col=0] column value
+   */
+  constructor(crs) {
+    let zoom = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let row = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    let col = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+    this.isTile = true;
+    this.crs = crs;
+    this.zoom = zoom;
+    this.row = row;
+    this.col = col;
+  }
+
+  /**
+   * Clone this tile
+   * @return {Tile} cloned tile
+   */
+  clone() {
+    return new Tile(this.crs, this.zoom, this.row, this.col);
+  }
+
+  /**
+   * Convert tile to the specified extent.
+   * @param {string} crs the projection of destination.
+   * @param {Extent} target copy the destination to target.
+   * @return {Extent}
+   */
+  toExtent(crs, target) {
+    CRS.isValid(crs);
+    target = target || new Extent('EPSG:4326', [0, 0, 0, 0]);
+    const {
+      epsg,
+      globalExtent,
+      globalDimension
+    } = getInfoTms(this.crs);
+    const countTiles = getCountTiles(this.crs, this.zoom);
+    _dimensionTile.set(1, 1).divide(countTiles).multiply(globalDimension);
+    target.west = globalExtent.west + (globalDimension.x - _dimensionTile.x * (countTiles.x - this.col));
+    target.east = target.west + _dimensionTile.x;
+    target.south = globalExtent.south + _dimensionTile.y * (countTiles.y - this.row - 1);
+    target.north = target.south + _dimensionTile.y;
+    target.crs = epsg;
+    target.zoom = this.zoom;
+    return crs == epsg ? target : target.as(crs, target);
+  }
+
+  /**
+   * Return true if `tile` is inside this tile.
+   *
+   * @param {Tile} tile the tile to check
+   *
+   * @return {boolean}
+   */
+  isInside(tile) {
+    if (this.zoom == tile.zoom) {
+      return this.row == tile.row && this.col == tile.col;
+    } else if (this.zoom < tile.zoom) {
+      return false;
+    } else {
+      _rowColfromParent(this, tile.zoom);
+      return r.row == tile.row && r.col == tile.col;
+    }
+  }
+
+  /**
+   * Return the translation and scale to transform this tile to input tile.
+   *
+   * @param {Tile} tile input tile
+   * @param {THREE.Vector4} target copy the result to target.
+   * @return {THREE.Vector4} {x: translation on west-east, y: translation on south-north, z: scale on west-east, w: scale on south-north}
+   */
+  offsetToParent(tile) {
+    let target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new THREE.Vector4();
+    if (this.crs != tile.crs) {
+      throw new Error('unsupported mix');
+    }
+    _rowColfromParent(this, tile.zoom);
+    return target.set(this.col * r.invDiff - r.col, this.row * r.invDiff - r.row, r.invDiff, r.invDiff);
+  }
+
+  /**
+   * Return parent tile with input level
+   *
+   * @param {number} levelParent level of parent.
+   * @return {Tile}
+   */
+  tiledExtentParent(levelParent) {
+    if (levelParent && levelParent < this.zoom) {
+      _rowColfromParent(this, levelParent);
+      return new Tile(this.crs, levelParent, r.row, r.col);
+    } else {
+      return this;
+    }
+  }
+
+  /**
+   * Set zoom, row and column values
+   *
+   * @param {number} [zoom=0] zoom value
+   * @param {number} [row=0] row value
+   * @param {number} [col=0] column value
+   *
+   * @return {Tile}
+   */
+  set() {
+    let zoom = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    let row = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let col = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+    this.zoom = zoom;
+    this.row = row;
+    this.col = col;
+    return this;
+  }
+
+  /**
+   * Copy to this tile to input tile.
+   * @param {Tile} tile
+   * @return {Tile} copied extent
+   */
+  copy(tile) {
+    this.crs = tile.crs;
+    return this.set(tile.zoom, tile.row, tile.col);
+  }
+
+  /**
+   * Return values of tile in string, separated by the separator input.
+   * @param {string} separator
+   * @return {string}
+   */
+  toString() {
+    let separator = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    return `${this.zoom}${separator}${this.row}${separator}${this.col}`;
+  }
+}
+
+/**
+ * @param {Extent} e
+ * @param {string} tms
+ * @returns {Tile[]}
+ */
+export function tiledCovering(e, tms) {
+  if (e.crs == 'EPSG:4326' && tms == CRS.tms_3857) {
+    const WMTS_PM = [];
+    const extent = _extent.copy(e).as(CRS.formatToEPSG(tms), _extent2);
+    const {
+      globalExtent,
+      globalDimension,
+      sTs
+    } = getInfoTms(CRS.formatToEPSG(tms));
+    extent.clampByExtent(globalExtent);
+    extent.planarDimensions(_dimensionTile);
+    const zoom = e.zoom + 1 || Math.floor(Math.log2(Math.round(globalDimension.x / (_dimensionTile.x * sTs.x))));
+    const countTiles = getCountTiles(tms, zoom);
+    const center = extent.center(_c);
+    _tmsCoord.x = center.x - globalExtent.west;
+    _tmsCoord.y = globalExtent.north - extent.north;
+    _tmsCoord.divide(globalDimension).multiply(countTiles).floor();
+
+    // ]N; N+1] => N
+    const maxRow = Math.ceil((globalExtent.north - extent.south) / globalDimension.x * countTiles.y) - 1;
+    for (let r = maxRow; r >= _tmsCoord.y; r--) {
+      WMTS_PM.push(new Tile(tms, zoom, r, _tmsCoord.x));
+    }
+    return WMTS_PM;
+  } else {
+    const target = new Tile(tms, 0, 0, 0);
+    const {
+      globalExtent,
+      globalDimension,
+      sTs,
+      isInverted
+    } = getInfoTms(e.crs);
+    const center = e.center(_c);
+    e.planarDimensions(_dimensionTile);
+    // Each level has 2^n * 2^n tiles...
+    // ... so we count how many tiles of the same width as tile we can fit in the layer
+    // ... 2^zoom = tilecount => zoom = log2(tilecount)
+    const zoom = Math.floor(Math.log2(Math.round(globalDimension.x / (_dimensionTile.x * sTs.x))));
+    const countTiles = getCountTiles(tms, zoom);
+
+    // Now that we have computed zoom, we can deduce x and y (or row / column)
+    _tmsCoord.x = center.x - globalExtent.west;
+    _tmsCoord.y = isInverted ? globalExtent.north - center.y : center.y - globalExtent.south;
+    _tmsCoord.divide(globalDimension).multiply(countTiles).floor();
+    target.set(zoom, _tmsCoord.y, _tmsCoord.x);
+    return [target];
+  }
+}
+export default Tile;

package/lib/Core/Tile/TileGrid.js

@@ -0,0 +1,46 @@
+import * as THREE from 'three';
+import CRS from "../Geographic/Crs.js";
+import Extent from "../Geographic/Extent.js";
+const _countTiles = new THREE.Vector2();
+const _dim = new THREE.Vector2();
+export const globalExtentTMS = new Map();
+export const schemeTiles = new Map();
+const extent4326 = new Extent('EPSG:4326', -180, 180, -90, 90);
+globalExtentTMS.set('EPSG:4326', extent4326);
+
+// Compute global extent of TMS in EPSG:3857
+// It's square whose a side is between -180° to 180°.
+// So, west extent, it's 180 convert in EPSG:3857
+const extent3857 = extent4326.as('EPSG:3857');
+extent3857.clampSouthNorth(extent3857.west, extent3857.east);
+globalExtentTMS.set('EPSG:3857', extent3857);
+schemeTiles.set('default', new THREE.Vector2(1, 1));
+schemeTiles.set(CRS.tms_3857, schemeTiles.get('default'));
+schemeTiles.set(CRS.tms_4326, new THREE.Vector2(2, 1));
+export function getInfoTms(/** @type {string} */crs) {
+  const epsg = CRS.formatToEPSG(crs);
+  const globalExtent = globalExtentTMS.get(epsg);
+  const globalDimension = globalExtent.planarDimensions(_dim);
+  const tms = CRS.formatToTms(crs);
+  const sTs = schemeTiles.get(tms) || schemeTiles.get('default');
+  // The isInverted parameter is to be set to the correct value, true or false
+  // (default being false) if the computation of the coordinates needs to be
+  // inverted to match the same scheme as OSM, Google Maps or other system.
+  // See link below for more information
+  // https://alastaira.wordpress.com/2011/07/06/converting-tms-tile-coordinates-to-googlebingosm-tile-coordinates/
+  // in crs includes ':NI' => tms isn't inverted (NOT INVERTED)
+  const isInverted = !tms.includes(':NI');
+  return {
+    epsg,
+    globalExtent,
+    globalDimension,
+    sTs,
+    isInverted
+  };
+}
+export function getCountTiles(/** @type {string} */crs, /** @type {number} */zoom) {
+  const sTs = schemeTiles.get(CRS.formatToTms(crs)) || schemeTiles.get('default');
+  const count = 2 ** zoom;
+  _countTiles.set(count, count).multiply(sTs);
+  return _countTiles;
+}

package/lib/Core/TileMesh.js

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import CRS from "./Geographic/Crs.js";
 import { geoidLayerIsVisible } from "../Layer/GeoidLayer.js";
+import { tiledCovering } from "./Tile/Tile.js";
 
 /**
  * A TileMesh is a THREE.Mesh with a geometricError and an OBB
@@ -12,7 +13,7 @@ import { geoidLayerIsVisible } from "../Layer/GeoidLayer.js";
  * @param {?number} level - the tile level (default = 0)
  */
 class TileMesh extends THREE.Mesh {
-  #_tms = new Map();
+  #_tms = (() => new Map())();
   #visible = true;
   constructor(geometry, material, layer, extent) {
     let level = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
@@ -29,7 +30,7 @@ class TileMesh extends THREE.Mesh {
     this.boundingSphere = new THREE.Sphere();
     this.obb.box3D.getBoundingSphere(this.boundingSphere);
     for (const tms of layer.tileMatrixSets) {
-      this.#_tms.set(tms, this.extent.tiledCovering(tms));
+      this.#_tms.set(tms, tiledCovering(this.extent, tms));
     }
     this.frustumCulled = false;
     this.matrixAutoUpdate = false;

package/lib/Core/View.js

@@ -121,7 +121,7 @@ let screenMeters;
  */
 class View extends THREE.EventDispatcher {
   #layers = [];
-  #pixelDepthBuffer = new Uint8Array(4);
+  #pixelDepthBuffer = (() => new Uint8Array(4))();
   #fullSizeDepthBuffer;
   /**
    * Constructs an Itowns View instance

package/lib/Layer/C3DTilesLayer.js

@@ -102,6 +102,7 @@ class C3DTilesLayer extends GeometryLayer {
    * @param  {View}  view  The view
    */
   constructor(id, config, view) {
+    console.warn('C3DTilesLayer is deprecated and will be removed in iTowns 3.0 version. Use OGC3DTilesLayer instead.');
     super(id, new THREE.Group(), {
       source: config.source
     });
@@ -143,7 +144,7 @@ class C3DTilesLayer extends GeometryLayer {
     }
 
     /** @type {Style} */
-    this._style = config.style || null;
+    this.style = config.style || null;
 
     /** @type {Map<string, THREE.MeshStandardMaterial>} */
     this.#fillColorMaterialsBuffer = new Map();
@@ -368,21 +369,15 @@ class C3DTilesLayer extends GeometryLayer {
           if (c3DTileFeature.object3d != object3d) {
             continue; // this feature do not belong to object3d
           }
+          this._style.context.setGeometry({
+            properties: c3DTileFeature
+          });
+
           /** @type {THREE.Color} */
-          let color = null;
-          if (typeof this._style.fill.color === 'function') {
-            color = new THREE.Color(this._style.fill.color(c3DTileFeature));
-          } else {
-            color = new THREE.Color(this._style.fill.color);
-          }
+          const color = new THREE.Color(this._style.fill.color);
 
           /** @type {number} */
-          let opacity = null;
-          if (typeof this._style.fill.opacity === 'function') {
-            opacity = this._style.fill.opacity(c3DTileFeature);
-          } else {
-            opacity = this._style.fill.opacity;
-          }
+          const opacity = this._style.fill.opacity;
           const materialId = color.getHexString() + opacity;
           let material = null;
           if (this.#fillColorMaterialsBuffer.has(materialId)) {
@@ -445,7 +440,13 @@ class C3DTilesLayer extends GeometryLayer {
     return this.#fillColorMaterialsBuffer.size;
   }
   set style(value) {
-    this._style = value;
+    if (value instanceof Style) {
+      this._style = value;
+    } else if (!value) {
+      this._style = null;
+    } else {
+      this._style = new Style(value);
+    }
     this.updateStyle();
   }
   get style() {

package/lib/Layer/CopcLayer.js

@@ -32,7 +32,7 @@ class CopcLayer extends PointCloudLayer {
     super(id, config);
     this.isCopcLayer = true;
     const resolve = () => this;
-    this.whenReady = this.source.whenReady.then(( /** @type {CopcSource} */source) => {
+    this.whenReady = this.source.whenReady.then((/** @type {CopcSource} */source) => {
       const {
         cube,
         rootHierarchyPage

package/lib/Layer/LabelLayer.js

@@ -139,7 +139,7 @@ class LabelsNode extends THREE.Group {
  * internally for optimisation.
  */
 class LabelLayer extends GeometryLayer {
-  #filterGrid = new ScreenGrid();
+  #filterGrid = (() => new ScreenGrid())();
   /**
    * @extends Layer
    *
@@ -216,17 +216,21 @@ class LabelLayer extends GeometryLayer {
    *
    * @param {FeatureCollection} data - The FeatureCollection to read the
    * labels from.
-   * @param {Extent} extent
+   * @param {Extent|Tile} extentOrTile
    *
    * @return {Label[]} An array containing all the created labels.
    */
-  convert(data, extent) {
+  convert(data, extentOrTile) {
     const labels = [];
 
     // Converting the extent now is faster for further operation
-    extent.as(data.crs, _extent);
+    if (extentOrTile.isExtent) {
+      extentOrTile.as(data.crs, _extent);
+    } else {
+      extentOrTile.toExtent(data.crs, _extent);
+    }
     coord.crs = data.crs;
-    context.setZoom(extent.zoom);
+    context.setZoom(extentOrTile.zoom);
     data.features.forEach(f => {
       // TODO: add support for LINE and POLYGON
       if (f.type !== FEATURE_TYPES.POINT) {

package/lib/Layer/OGC3DTilesLayer.js

@@ -52,7 +52,19 @@ export const OGC3DTILES_LAYER_EVENTS = {
    * @property {Object} tile - the tile metadata from the tileset
    * @property {boolean} visible - the tile visible state
    */
-  TILE_VISIBILITY_CHANGE: 'tile-visibility-change'
+  TILE_VISIBILITY_CHANGE: 'tile-visibility-change',
+  /**
+   * Fired when a new batch of tiles start loading (can be fired multiple times, e.g. when the camera moves and new tiles
+   * start loading)
+   * @event OGC3DTilesLayer#tiles-load-start
+   */
+  TILES_LOAD_START: 'tiles-load-start',
+  /**
+   * Fired when all visible tiles are loaded (can be fired multiple times, e.g. when the camera moves and new tiles
+   * are loaded)
+   * @event OGC3DTilesLayer#tiles-load-end
+   */
+  TILES_LOAD_END: 'tiles-load-end'
 };
 
 /**
@@ -95,6 +107,13 @@ export function enableKtx2Loader(path, renderer) {
 class OGC3DTilesLayer extends GeometryLayer {
   /**
    * Layer for [3D Tiles](https://www.ogc.org/standard/3dtiles/) datasets.
+   *
+   * Advanced configuration note: 3D Tiles rendering is delegated to 3DTilesRendererJS that exposes several
+   * configuration options accessible through the tilesRenderer property of this class. see the
+   * [3DTilesRendererJS doc](https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/master/README.md). Also note that
+   * the cache is shared amongst 3D tiles layers and can be configured through tilesRenderer.lruCache (see the
+   * [following documentation](https://github.com/NASA-AMMOS/3DTilesRendererJS/blob/master/README.md#lrucache-1).
+   *
    * @extends Layer
    *
    * @param {String} id - unique layer id.
@@ -109,8 +128,8 @@ class OGC3DTilesLayer extends GeometryLayer {
    * @param {String} [config.pntsSizeMode= PNTS_SIZE_MODE.VALUE] {@link PointsMaterial} Point cloud size mode (passed to {@link PointsMaterial}).
    * Only 'VALUE' or 'ATTENUATED' are possible. VALUE use constant size, ATTENUATED compute size depending on distance
    * from point to camera.
-   * @param {Number} [config.pntsMinAttenuatedSize=1] Minimum scale used by 'ATTENUATED' size mode.
-   * @param {Number} [config.pntsMaxAttenuatedSize=7] Maximum scale used by 'ATTENUATED' size mode.
+   * @param {Number} [config.pntsMinAttenuatedSize=3] Minimum scale used by 'ATTENUATED' size mode.
+   * @param {Number} [config.pntsMaxAttenuatedSize=10] Maximum scale used by 'ATTENUATED' size mode.
    */
   constructor(id, config) {
     super(id, new THREE.Group(), {
@@ -122,11 +141,13 @@ class OGC3DTilesLayer extends GeometryLayer {
     if (config.source.isOGC3DTilesIonSource) {
       this.tilesRenderer.registerPlugin(new CesiumIonAuthPlugin({
         apiToken: config.source.accessToken,
-        assetId: config.source.assetId
+        assetId: config.source.assetId,
+        autoRefreshToken: true
       }));
     } else if (config.source.isOGC3DTilesGoogleSource) {
       this.tilesRenderer.registerPlugin(new GoogleCloudAuthPlugin({
-        apiToken: config.source.key
+        apiToken: config.source.key,
+        autoRefreshToken: true
       }));
     }
     this.tilesRenderer.registerPlugin(new ImplicitTilingPlugin());
@@ -167,8 +188,8 @@ class OGC3DTilesLayer extends GeometryLayer {
     this.pntsShape = config.pntsShape ?? PNTS_SHAPE.CIRCLE;
     this.classification = config.classification ?? ClassificationScheme.DEFAULT;
     this.pntsSizeMode = config.pntsSizeMode ?? PNTS_SIZE_MODE.VALUE;
-    this.pntsMinAttenuatedSize = config.pntsMinAttenuatedSize || 1;
-    this.pntsMaxAttenuatedSize = config.pntsMaxAttenuatedSize || 7;
+    this.pntsMinAttenuatedSize = config.pntsMinAttenuatedSize || 3;
+    this.pntsMaxAttenuatedSize = config.pntsMaxAttenuatedSize || 10;
   }
 
   /**
@@ -274,7 +295,7 @@ class OGC3DTilesLayer extends GeometryLayer {
 
     // Setup classification bufferAttribute
     if (model.isPoints) {
-      const classificationData = batchTable?.getData('Classification');
+      const classificationData = batchTable?.getPropertyArray('Classification');
       if (classificationData) {
         geometry.setAttribute('classification', new THREE.BufferAttribute(classificationData, 1));
       }
@@ -348,7 +369,13 @@ class OGC3DTilesLayer extends GeometryLayer {
     _raycaster.near = camera.near;
     _raycaster.far = camera.far;
     _raycaster.firstHitOnly = true;
-    _raycaster.intersectObject(this.tilesRenderer.group, true, target);
+    const picked = _raycaster.intersectObject(this.tilesRenderer.group, true);
+    // Store the layer of the picked object to conform to the interface of what's returned by Picking.js (used for
+    // other GeometryLayers
+    picked.forEach(p => {
+      p.layer = this;
+    });
+    target.push(...picked);
     return target;
   }
 

package/lib/Parser/GeoJsonParser.js

@@ -195,7 +195,7 @@ export default {
     _in.crs = _in.crs || readCRS(json);
     if (out.filteringExtent) {
       if (typeof out.filteringExtent == 'boolean') {
-        out.filterExtent = options.extent.as(_in.crs);
+        out.filterExtent = options.extent.isExtent ? options.extent.as(_in.crs) : options.extent.toExtent(_in.crs);
       } else if (out.filteringExtent.isExtent) {
         out.filterExtent = out.filteringExtent;
       }

package/lib/Parser/LASParser.js

@@ -3,7 +3,7 @@ import { spawn, Thread, Transfer } from 'threads';
 let _lazPerf;
 let _thread;
 function workerInstance() {
-  return new Worker( /* webpackChunkName: "itowns_lasparser" */
+  return new Worker(/* webpackChunkName: "itowns_lasparser" */
   new URL('../Worker/LASLoaderWorker.js', import.meta.url), {
     type: 'module'
   });

package/lib/Parser/Potree2BinParser.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import { spawn, Thread, Transfer } from 'threads';
 let _thread;
 function workerInstance() {
-  return new Worker( /* webpackChunkName: "itowns_potree2worker" */
+  return new Worker(/* webpackChunkName: "itowns_potree2worker" */
   new URL('../Worker/Potree2Worker.js', import.meta.url), {
     type: 'module'
   });

package/lib/Parser/VectorTileParser.js

@@ -1,7 +1,7 @@
 import { Vector2, Vector3 } from 'three';
 import Protobuf from 'pbf';
 import { VectorTile } from '@mapbox/vector-tile';
-import { globalExtentTMS } from "../Core/Geographic/Extent.js";
+import { globalExtentTMS } from "../Core/Tile/TileGrid.js";
 import { FeatureCollection, FEATURE_TYPES } from "../Core/Feature.js";
 import { deprecatedParsingOptionsToNewOne } from "../Core/Deprecated/Undeprecator.js";
 import Coordinates from "../Core/Geographic/Coordinates.js";

package/lib/Parser/XbilParser.js

@@ -67,11 +67,22 @@ export function computeMinMaxElevation(texture, pitch, options) {
         }
       }
     }
-    if (options.zmin > min) {
-      min = options.zmin;
+    // Clamp values to zmin and zmax values configured in ElevationLayer
+    if (options.zmin != null) {
+      if (min < options.zmin) {
+        min = options.zmin;
+      }
+      if (max < options.zmin) {
+        max = options.zmin;
+      }
     }
-    if (options.zmax < max) {
-      max = options.zmax;
+    if (options.zmax != null) {
+      if (min > options.zmax) {
+        min = options.zmax;
+      }
+      if (max > options.zmax) {
+        max = options.zmax;
+      }
     }
   }
   if (max === -Infinity || min === Infinity) {

package/lib/Provider/URLBuilder.js

@@ -1,6 +1,9 @@
-import Extent from "../Core/Geographic/Extent.js";
-const extent = new Extent('EPSG:4326', [0, 0, 0, 0]);
 let subDomainsCount = 0;
+
+/**
+ * @param {string} url
+ * @returns {string}
+ */
 function subDomains(url) {
   const subDomainsPtrn = /\$\{u:([\w-_.|]+)\}/.exec(url);
   if (!subDomainsPtrn) {
@@ -51,8 +54,13 @@ export default {
    * // The resulting url is:
    * // http://server.geo/tms/15/2142/3412.jpg;
    *
-   * @param {Extent} coords - the coordinates
-   * @param {Source} source
+   * @param {Object} coords - tile coordinates
+   * @param {number} coords.row - tile row
+   * @param {number} coords.col - tile column
+   * @param {number} coords.zoom - tile zoom
+   * @param {Object} source
+   * @param {string} source.url
+   * @param {Function} source.tileMatrixCallback
    *
    * @return {string} the formed url
    */
@@ -79,8 +87,12 @@ export default {
    * // The resulting url is:
    * // http://server.geo/wms/BBOX=12,35,14,46&FORMAT=jpg&SERVICE=WMS
    *
-   * @param {Extent} bbox - the bounding box
-   * @param {Object} source
+   * @param {Object} bbox - the bounding box
+   * @param {number} bbox.west
+   * @param {number} bbox.south
+   * @param {number} bbox.east
+   * @param {number} bbox.north
+   * @param {Object} source - the source of data
    * @param {string} source.crs
    * @param {number} source.bboxDigits
    * @param {string} source.url
@@ -93,11 +105,10 @@ export default {
     if (source.bboxDigits !== undefined) {
       precision = source.bboxDigits;
     }
-    bbox.as(source.crs, extent);
-    const w = extent.west.toFixed(precision);
-    const s = extent.south.toFixed(precision);
-    const e = extent.east.toFixed(precision);
-    const n = extent.north.toFixed(precision);
+    const w = bbox.west.toFixed(precision);
+    const s = bbox.south.toFixed(precision);
+    const e = bbox.east.toFixed(precision);
+    const n = bbox.north.toFixed(precision);
     let bboxInUnit = source.axisOrder || 'wsen';
     bboxInUnit = bboxInUnit.replace('w', `${w},`).replace('s', `${s},`).replace('e', `${e},`).replace('n', `${n},`).slice(0, -1);
     return subDomains(source.url.replace('%bbox', bboxInUnit));

package/lib/Renderer/Camera.js

@@ -77,7 +77,7 @@ function updatePreSse(camera, height, fov) {
  */
 class Camera {
   #_viewMatrixNeedsUpdate = true;
-  #_viewMatrix = new THREE.Matrix4();
+  #_viewMatrix = (() => new THREE.Matrix4())();
 
   /**
    * @param   {string}                crs                                     The camera's coordinate projection system.

package/lib/Renderer/LayeredMaterial.js

@@ -12,7 +12,7 @@ const defaultTex = new THREE.Texture();
 
 // from three.js packDepthToRGBA
 const UnpackDownscale = 255 / 256; // 0..1 -> fraction (excluding 1)
-const bitSh = new THREE.Vector4(UnpackDownscale / (256.0 * 256.0 * 256.0), UnpackDownscale / (256.0 * 256.0), UnpackDownscale / 256.0, UnpackDownscale);
+const bitSh = new THREE.Vector4(UnpackDownscale, UnpackDownscale / 256.0, UnpackDownscale / (256.0 * 256.0), UnpackDownscale / (256.0 * 256.0 * 256.0));
 export function unpack1K(color, factor) {
   return factor ? bitSh.dot(color) * factor : bitSh.dot(color);
 }

package/lib/Renderer/PointsMaterial.js

@@ -258,7 +258,7 @@ class PointsMaterial extends THREE.ShaderMaterial {
   /**
    * @class      PointsMaterial
    * @param      {object}  [options={}]  The options
-   * @param      {number}  [options.size=0]  size point
+   * @param      {number}  [options.size=1] point size
    * @param      {number}  [options.mode=PNTS_MODE.COLOR]  display mode.
    * @param      {number}  [options.shape=PNTS_SHAPE.CIRCLE]  rendered points shape.
    * @param      {THREE.Vector4}  [options.overlayColor=new THREE.Vector4(0, 0, 0, 0)]  overlay color.

package/lib/Source/CopcSource.js

@@ -91,7 +91,7 @@ class CopcSource extends Source {
     this.parser = LASParser.parseChunk;
     this.fetcher = Fetcher.arrayBuffer;
     this.colorDepth = config.colorDepth ?? 16;
-    const get = ( /** @type {number} */begin, /** @type {number} */end) => this.fetcher(this.url, {
+    const get = (/** @type {number} */begin, /** @type {number} */end) => this.fetcher(this.url, {
       ...this.networkOptions,
       headers: {
         ...this.networkOptions.headers,