itowns 2.44.3-next.4 → 2.44.3-next.40

package/lib/Layer/OGC3DTilesLayer.js

@@ -1,24 +1,28 @@
 import * as THREE from 'three';
-import { TilesRenderer, GLTFStructuralMetadataExtension, GLTFMeshFeaturesExtension, GLTFCesiumRTCExtension, CesiumIonAuthPlugin, GoogleCloudAuthPlugin, ImplicitTilingPlugin } from '3d-tiles-renderer';
+import { TilesRenderer } from '3d-tiles-renderer';
+import { GLTFStructuralMetadataExtension, GLTFMeshFeaturesExtension, GLTFCesiumRTCExtension, CesiumIonAuthPlugin, GoogleCloudAuthPlugin, ImplicitTilingPlugin
+// eslint-disable-next-line import/no-unresolved
+} from '3d-tiles-renderer/plugins';
 import GeometryLayer from "./GeometryLayer.js";
 import iGLTFLoader from "../Parser/iGLTFLoader.js";
 import { DRACOLoader } from "../ThreeExtended/loaders/DRACOLoader.js";
 import { KTX2Loader } from "../ThreeExtended/loaders/KTX2Loader.js";
 import ReferLayerProperties from "./ReferencingLayerProperties.js";
 import PointsMaterial, { PNTS_MODE, PNTS_SHAPE, PNTS_SIZE_MODE, ClassificationScheme } from "../Renderer/PointsMaterial.js";
+import { VIEW_EVENTS } from "../Core/View.js";
 const _raycaster = new THREE.Raycaster();
 
+// Stores lruCache, downloadQueue and parseQueue for each id of view {@link View}
+// every time a tileset has been added
+// https://github.com/iTowns/itowns/issues/2426
+const viewers = {};
+
 // Internal instance of GLTFLoader, passed to 3d-tiles-renderer-js to support GLTF 1.0 and 2.0
 // Temporary exported to be used in deprecated B3dmParser
 export const itownsGLTFLoader = new iGLTFLoader();
 itownsGLTFLoader.register(() => new GLTFMeshFeaturesExtension());
 itownsGLTFLoader.register(() => new GLTFStructuralMetadataExtension());
 itownsGLTFLoader.register(() => new GLTFCesiumRTCExtension());
-
-// Instantiated by the first tileset. Used to share cache and download and parse queues between tilesets
-let lruCache = null;
-let downloadQueue = null;
-let parseQueue = null;
 export const OGC3DTILES_LAYER_EVENTS = {
   /**
    * Fired when a new root or child tile set is loaded
@@ -52,7 +56,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'
 };
 
 /**
@@ -92,32 +108,151 @@ export function enableKtx2Loader(path, renderer) {
   ktx2Loader.detectSupport(renderer);
   itownsGLTFLoader.setKTX2Loader(ktx2Loader);
 }
+
+/**
+ * Enable loading 3D Tiles and GLTF with
+ * [meshopt](https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Vendor/EXT_meshopt_compression/README.md) compression extension.
+ *
+ * @param {MeshOptDecoder.constructor} MeshOptDecoder - The Meshopt decoder
+ * module.
+ *
+ * @example
+ * import * as itowns from 'itowns';
+ * import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
+ *
+ * // Enable support of EXT_meshopt_compression
+ * itowns.enableMeshoptDecoder(MeshoptDecoder);
+ */
+export function enableMeshoptDecoder(MeshOptDecoder) {
+  if (!MeshOptDecoder) {
+    throw new Error('MeshOptDecoder module is mandatory');
+  }
+  itownsGLTFLoader.setMeshoptDecoder(MeshOptDecoder);
+}
+async function getMeshFeatures(meshFeatures, options) {
+  const {
+    faceIndex,
+    barycoord
+  } = options;
+  const features = await meshFeatures.getFeaturesAsync(faceIndex, barycoord);
+  return {
+    features,
+    featureIds: meshFeatures.getFeatureInfo()
+  };
+}
+function getStructuralMetadata(structuralMetadata, options) {
+  const {
+    index,
+    faceIndex,
+    barycoord,
+    tableIndices,
+    features
+  } = options;
+  const tableData = [];
+  if (tableIndices !== undefined && features !== undefined) {
+    structuralMetadata.getPropertyTableData(tableIndices, features, tableData);
+  }
+  const attributeData = [];
+  if (index !== undefined) {
+    structuralMetadata.getPropertyAttributeData(index, attributeData);
+  }
+  const textureData = [];
+  if (faceIndex !== undefined) {
+    structuralMetadata.getPropertyTextureData(faceIndex, barycoord, textureData);
+  }
+  const metadata = [...tableData, ...textureData, ...attributeData];
+  return metadata;
+}
+async function getMetadataFromIntersection(intersection) {
+  const {
+    point,
+    object,
+    face,
+    faceIndex
+  } = intersection;
+  const {
+    meshFeatures,
+    structuralMetadata
+  } = object.userData;
+  const barycoord = new THREE.Vector3();
+  if (face) {
+    const position = object.geometry.getAttribute('position');
+    const triangle = new THREE.Triangle().setFromAttributeAndIndices(position, face.a, face.b, face.c);
+    triangle.a.applyMatrix4(object.matrixWorld);
+    triangle.b.applyMatrix4(object.matrixWorld);
+    triangle.c.applyMatrix4(object.matrixWorld);
+    triangle.getBarycoord(point, barycoord);
+  } else {
+    barycoord.set(0, 0, 0);
+  }
+
+  // EXT_mesh_features
+  const {
+    features,
+    featureIds
+  } = meshFeatures ? await getMeshFeatures(meshFeatures, {
+    faceIndex,
+    barycoord
+  }) : {};
+  const tableIndices = featureIds?.map(p => p.propertyTable);
+
+  // EXT_structural_metadata
+  const metadata = structuralMetadata ? getStructuralMetadata(structuralMetadata, {
+    ...intersection,
+    barycoord,
+    tableIndices,
+    features
+  }) : [];
+  return metadata;
+}
 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.
    * @param {Object} config - layer specific configuration
    * @param {OGC3DTilesSource} config.source - data source configuration
-   * @param {String} [config.pntsMode= PNTS_MODE.COLOR] Point cloud coloring mode (passed to {@link PointsMaterial}).
+   * @param {String} [config.pntsMode = PNTS_MODE.COLOR] Point cloud coloring mode (passed to {@link PointsMaterial}).
    *      Only 'COLOR' or 'CLASSIFICATION' are possible. COLOR uses RGB colors of the points,
    *      CLASSIFICATION uses a classification property of the batch table to color points.
-   * @param {ClassificationScheme}  [config.classificationScheme]  {@link PointsMaterial} classification scheme
-   * @param {String} [config.pntsShape= PNTS_SHAPE.CIRCLE] Point cloud point shape. Only 'CIRCLE' or 'SQUARE' are possible.
+   * @param {ClassificationScheme}  [config.classificationScheme = ClassificationScheme.DEFAULT]  {@link PointsMaterial} classification scheme
+   * @param {String} [config.pntsShape = PNTS_SHAPE.CIRCLE] Point cloud point shape. Only 'CIRCLE' or 'SQUARE' are possible.
    * (passed to {@link PointsMaterial}).
-   * @param {String} [config.pntsSizeMode= PNTS_SIZE_MODE.VALUE] {@link PointsMaterial} Point cloud size mode (passed to {@link PointsMaterial}).
+   * @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(), {
-      source: config.source
-    });
+    const {
+      pntsMode = PNTS_MODE.COLOR,
+      pntsShape = PNTS_SHAPE.CIRCLE,
+      classification = ClassificationScheme.DEFAULT,
+      pntsSizeMode = PNTS_SIZE_MODE.VALUE,
+      pntsMinAttenuatedSize = 3,
+      pntsMaxAttenuatedSize = 10,
+      ...geometryLayerConfig
+    } = config;
+    super(id, new THREE.Group(), geometryLayerConfig);
     this.isOGC3DTilesLayer = true;
-    this._handlePointsMaterialConfig(config);
+    // Store points material config so they can be used later to substitute points tiles material
+    // by our own PointsMaterial. These properties should eventually be managed through the Style API
+    // (see https://github.com/iTowns/itowns/issues/2336)
+    this.pntsMode = pntsMode;
+    this.pntsShape = pntsShape;
+    this.classification = classification;
+    this.pntsSizeMode = pntsSizeMode;
+    this.pntsMinAttenuatedSize = pntsMinAttenuatedSize;
+    this.pntsMaxAttenuatedSize = pntsMaxAttenuatedSize;
     this.tilesRenderer = new TilesRenderer(this.source.url);
     if (config.source.isOGC3DTilesIonSource) {
       this.tilesRenderer.registerPlugin(new CesiumIonAuthPlugin({
@@ -133,8 +268,6 @@ class OGC3DTilesLayer extends GeometryLayer {
     }
     this.tilesRenderer.registerPlugin(new ImplicitTilingPlugin());
     this.tilesRenderer.manager.addHandler(/\.gltf$/, itownsGLTFLoader);
-    this._setupCacheAndQueues();
-    this._setupEvents();
     this.object3d.add(this.tilesRenderer.group);
 
     // Add an initialization step that is resolved when the root tileset is loaded (see this._setup below), meaning
@@ -159,39 +292,26 @@ class OGC3DTilesLayer extends GeometryLayer {
   }
 
   /**
-   * Store points material config so they can be used later to substitute points tiles material by our own PointsMaterial
-   * These properties should eventually be managed through the Style API (see https://github.com/iTowns/itowns/issues/2336)
-   * @param {Object} config - points material configuration as passed to the layer constructor.
-   * @private
-   */
-  _handlePointsMaterialConfig(config) {
-    this.pntsMode = config.pntsMode ?? PNTS_MODE.COLOR;
-    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;
-  }
-
-  /**
-   * Sets the lruCache and download and parse queues so they are shared amongst all tilesets.
+   * Sets the lruCache and download and parse queues so they are shared amongst
+   * all tilesets from a same {@link View} view.
+   * @param {View} view - view associated to this layer.
    * @private
    */
-  _setupCacheAndQueues() {
-    if (lruCache === null) {
-      lruCache = this.tilesRenderer.lruCache;
+  _setupCacheAndQueues(view) {
+    const id = view.id;
+    if (viewers[id]) {
+      this.tilesRenderer.lruCache = viewers[id].lruCache;
+      this.tilesRenderer.downloadQueue = viewers[id].downloadQueue;
+      this.tilesRenderer.parseQueue = viewers[id].parseQueue;
     } else {
-      this.tilesRenderer.lruCache = lruCache;
-    }
-    if (downloadQueue === null) {
-      downloadQueue = this.tilesRenderer.downloadQueue;
-    } else {
-      this.tilesRenderer.downloadQueue = downloadQueue;
-    }
-    if (parseQueue === null) {
-      parseQueue = this.tilesRenderer.parseQueue;
-    } else {
-      this.tilesRenderer.parseQueue = parseQueue;
+      viewers[id] = {
+        lruCache: this.tilesRenderer.lruCache,
+        downloadQueue: this.tilesRenderer.downloadQueue,
+        parseQueue: this.tilesRenderer.parseQueue
+      };
+      view.addEventListener(VIEW_EVENTS.DISPOSED, evt => {
+        delete viewers[evt.target.id];
+      });
     }
   }
 
@@ -225,16 +345,19 @@ class OGC3DTilesLayer extends GeometryLayer {
         this._res();
       }
     });
-    this.tilesRenderer.addEventListener('load-model', _ref => {
-      let {
+    this.tilesRenderer.addEventListener('load-model', e => {
+      const {
         scene
-      } = _ref;
+      } = e;
       scene.traverse(obj => {
         this._assignFinalMaterial(obj);
         this._assignFinalAttributes(obj);
       });
       view.notifyChange(this);
     });
+    this._setupCacheAndQueues(view);
+    this._setupEvents();
+
     // Start loading tileset and tiles
     this.tilesRenderer.update();
   }
@@ -298,10 +421,36 @@ class OGC3DTilesLayer extends GeometryLayer {
     this.tilesRenderer.dispose();
   }
 
+  /**
+   * Get the [metadata](https://github.com/CesiumGS/3d-tiles/tree/main/specification/Metadata)
+   * of the closest intersected object from a list of intersections.
+   *
+   * This method retrieves structured metadata stored in GLTF 2.0 assets using
+   * the [`EXT_structural_metadata`](https://github.com/CesiumGS/glTF/tree/3d-tiles-next/extensions/2.0/Vendor/EXT_structural_metadata)
+   * extension.
+   *
+   * Internally, it uses the closest intersected point to index metadata
+   * stored in property attributes and textures.
+   *
+   * If present in GLTF 2.0 assets, this method leverages the
+   * [`EXT_mesh_features`](`https://github.com/CesiumGS/glTF/tree/3d-tiles-next/extensions/2.0/Vendor/EXT_mesh_features)
+   * extension and the returned featured to index metadata stored in property tables.
+   *
+   * @param {Array<THREE.Intersection>} intersections
+   * @returns {Promise<Object | null>} - the intersected object's metadata
+   */
+  async getMetadataFromIntersections(intersections) {
+    if (!intersections.length) {
+      return null;
+    }
+    const metadata = await getMetadataFromIntersection(intersections[0]);
+    return metadata;
+  }
+
   /**
    * Get the attributes for the closest intersection from a list of
    * intersects.
-   * @param {Array} intersects -  An array containing all
+   * @param {Array<THREE.Intersection>} intersects -  An array containing all
    * objects picked under mouse coordinates computed with view.pickObjectsAt(..).
    * @returns {Object | null} - An object containing
    */
@@ -312,7 +461,8 @@ class OGC3DTilesLayer extends GeometryLayer {
     const {
       face,
       index,
-      object
+      object,
+      instanceId
     } = intersects[0];
 
     /** @type{number|null} */
@@ -320,7 +470,7 @@ class OGC3DTilesLayer extends GeometryLayer {
     if (object.isPoints && index) {
       batchId = object.geometry.getAttribute('_BATCHID')?.getX(index) ?? index;
     } else if (object.isMesh && face) {
-      batchId = object.geometry.getAttribute('_BATCHID')?.getX(face.a);
+      batchId = object.geometry.getAttribute('_BATCHID')?.getX(face.a) ?? instanceId;
     }
     if (batchId === undefined) {
       return null;
@@ -350,7 +500,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/Layer/OrientedImageLayer.js

@@ -96,14 +96,20 @@ class OrientedImageLayer extends GeometryLayer {
    */
   constructor(id) {
     let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    /* istanbul ignore next */
+    const {
+      backgroundDistance,
+      background = createBackground(backgroundDistance),
+      onPanoChanged = () => {},
+      getCamerasNameFromFeature = () => {},
+      ...geometryOptions
+    } = config;
     if (config.projection) {
       console.warn('OrientedImageLayer projection parameter is deprecated, use crs instead.');
       config.crs = config.crs || config.projection;
     }
-    super(id, new THREE.Group(), config);
+    super(id, new THREE.Group(), geometryOptions);
     this.isOrientedImageLayer = true;
-    this.background = config.background || createBackground(config.backgroundDistance);
+    this.background = background;
     if (this.background) {
       // Add layer id to easily identify the objects later on (e.g. to delete the geometries when deleting the layer)
       this.background.layer = this.background.layer ?? {};
@@ -115,10 +121,10 @@ class OrientedImageLayer extends GeometryLayer {
     this.currentPano = undefined;
 
     // store a callback to fire event when current panoramic change
-    this.onPanoChanged = config.onPanoChanged || (() => {});
+    this.onPanoChanged = onPanoChanged;
 
     // function to get cameras name from panoramic feature
-    this.getCamerasNameFromFeature = config.getCamerasNameFromFeature || (() => {});
+    this.getCamerasNameFromFeature = getCamerasNameFromFeature;
     const resolve = this.addInitializationStep();
     this.mergeFeatures = false;
     this.filteringExtent = false;

package/lib/Layer/PointCloudLayer.js

@@ -113,6 +113,8 @@ function changeAngleRange(layer) {
  * @property {number} [maxIntensityRange=1] - The maximal intensity of the
  * layer. Changing this value will affect the material, if it has the
  * corresponding uniform. The value is normalized between 0 and 1.
+ *
+ * @extends GeometryLayer
  */
 class PointCloudLayer extends GeometryLayer {
   /**
@@ -120,8 +122,6 @@ class PointCloudLayer extends GeometryLayer {
    * Constructs a new instance of a Point Cloud Layer. This should not be used
    * directly, but rather implemented using `extends`.
    *
-   * @extends GeometryLayer
-   *
    * @param {string} id - The id of the layer, that should be unique. It is
    * not mandatory, but an error will be emitted if this layer is added a
    * {@link View} that already has a layer going by that id.
@@ -130,40 +130,88 @@ class PointCloudLayer extends GeometryLayer {
    * contains three elements `name, protocol, extent`, these elements will be
    * available using `layer.name` or something else depending on the property
    * name. See the list of properties to know which one can be specified.
+   * @param {Source} config.source - Description and options of the source See @Layer.
+   * @param {number}  [options.minElevationRange] - Min value for the elevation range (default value will be taken from the source.metadata).
+   * @param {number}  [options.maxElevationRange] - Max value for the elevation range (default value will be taken from the source.metadata).
    */
   constructor(id) {
     let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    super(id, config.object3d || new THREE.Group(), config);
+    const {
+      object3d = new THREE.Group(),
+      group = new THREE.Group(),
+      bboxes = new THREE.Group(),
+      octreeDepthLimit = -1,
+      pointBudget = 2000000,
+      pointSize = 2,
+      sseThreshold = 2,
+      minIntensityRange = 1,
+      maxIntensityRange = 65536,
+      minElevationRange,
+      maxElevationRange,
+      minAngleRange = -90,
+      maxAngleRange = 90,
+      material = {},
+      mode = PNTS_MODE.COLOR,
+      ...geometryLayerConfig
+    } = config;
+    super(id, object3d, geometryLayerConfig);
+
+    /**
+     * @type {boolean}
+     * @readonly
+     */
     this.isPointCloudLayer = true;
     this.protocol = 'pointcloud';
-    this.group = config.group || new THREE.Group();
+    this.group = group;
     this.object3d.add(this.group);
-    this.bboxes = config.bboxes || new THREE.Group();
+    this.bboxes = bboxes || new THREE.Group();
     this.bboxes.visible = false;
     this.object3d.add(this.bboxes);
     this.group.updateMatrixWorld();
 
     // default config
-    this.octreeDepthLimit = config.octreeDepthLimit || -1;
-    this.pointBudget = config.pointBudget || 2000000;
-    this.pointSize = config.pointSize === 0 || !isNaN(config.pointSize) ? config.pointSize : 4;
-    this.sseThreshold = config.sseThreshold || 2;
-    this.defineLayerProperty('minIntensityRange', config.minIntensityRange || 1, changeIntensityRange);
-    this.defineLayerProperty('maxIntensityRange', config.maxIntensityRange || 65536, changeIntensityRange);
-    this.defineLayerProperty('minElevationRange', config.minElevationRange || 0, changeElevationRange);
-    this.defineLayerProperty('maxElevationRange', config.maxElevationRange || 1000, changeElevationRange);
-    this.defineLayerProperty('minAngleRange', config.minAngleRange || -90, changeAngleRange);
-    this.defineLayerProperty('maxAngleRange', config.maxAngleRange || 90, changeAngleRange);
-    this.material = config.material || {};
+    /**
+     * @type {number}
+     */
+    this.octreeDepthLimit = octreeDepthLimit;
+
+    /**
+     * @type {number}
+     */
+    this.pointBudget = pointBudget;
+
+    /**
+     * @type {number}
+     */
+    this.pointSize = pointSize;
+
+    /**
+     * @type {number}
+     */
+    this.sseThreshold = sseThreshold;
+    this.defineLayerProperty('minIntensityRange', minIntensityRange, changeIntensityRange);
+    this.defineLayerProperty('maxIntensityRange', maxIntensityRange, changeIntensityRange);
+    this.defineLayerProperty('minElevationRange', minElevationRange, changeElevationRange);
+    this.defineLayerProperty('maxElevationRange', maxElevationRange, changeElevationRange);
+    this.defineLayerProperty('minAngleRange', minAngleRange, changeAngleRange);
+    this.defineLayerProperty('maxAngleRange', maxAngleRange, changeAngleRange);
+
+    /**
+     * @type {THREE.Material}
+     */
+    this.material = material;
     if (!this.material.isMaterial) {
-      config.material = config.material || {};
-      config.material.intensityRange = new THREE.Vector2(this.minIntensityRange, this.maxIntensityRange);
-      config.material.elevationRange = new THREE.Vector2(this.minElevationRange, this.maxElevationRange);
-      config.material.angleRange = new THREE.Vector2(this.minAngleRange, this.maxAngleRange);
-      this.material = new PointsMaterial(config.material);
+      this.material.intensityRange = new THREE.Vector2(this.minIntensityRange, this.maxIntensityRange);
+      this.material.elevationRange = new THREE.Vector2(this.minElevationRange, this.maxElevationRange);
+      this.material.angleRange = new THREE.Vector2(this.minAngleRange, this.maxAngleRange);
+      this.material = new PointsMaterial(this.material);
     }
-    this.material.defines = this.material.defines || {};
-    this.mode = config.mode || PNTS_MODE.COLOR;
+    this.mode = mode || PNTS_MODE.COLOR;
+
+    /**
+     * @type {PointCloudNode | undefined}
+     */
+    this.root = undefined;
   }
   preUpdate(context, changeSources) {
     // See https://cesiumjs.org/hosted-apps/massiveworlds/downloads/Ring/WorldScaleTerrainRendering.pptx
@@ -245,9 +293,6 @@ class PointCloudLayer extends GeometryLayer {
           redraw: true,
           earlyDropFunction: cmd => !cmd.requester.visible || !this.visible
         }).then(pts => {
-          if (this.onPointsCreated) {
-            this.onPointsCreated(layer, pts);
-          }
           elt.obj = pts;
           // store tightbbox to avoid ping-pong (bbox = larger => visible, tight => invisible)
           elt.tightbbox = pts.tightbbox;
@@ -256,11 +301,12 @@ class PointCloudLayer extends GeometryLayer {
           // be added nor cleaned
           this.group.add(elt.obj);
           elt.obj.updateMatrixWorld(true);
-          elt.promise = null;
-        }, err => {
-          if (err.isCancelledCommandException) {
-            elt.promise = null;
+        }).catch(err => {
+          if (!err.isCancelledCommandException) {
+            return err;
           }
+        }).finally(() => {
+          elt.promise = null;
         });
       }
     }

package/lib/Layer/Potree2Layer.js

@@ -99,13 +99,13 @@ function parseAttributes(jsonAttributes) {
  * @property {boolean} isPotreeLayer - Used to checkout whether this layer
  * is a Potree2Layer. Default is `true`. You should not change this, as it is
  * used internally for optimisation.
+ *
+ * @extends PointCloudLayer
  */
 class Potree2Layer extends PointCloudLayer {
   /**
    * Constructs a new instance of Potree2 layer.
    *
-   * @extends PointCloudLayer
-   *
    * @example
    * // Create a new point cloud layer
    * const points = new Potree2Layer('points',
@@ -132,6 +132,11 @@ class Potree2Layer extends PointCloudLayer {
    */
   constructor(id, config) {
     super(id, config);
+
+    /**
+     * @type {boolean}
+     * @readonly
+     */
     this.isPotreeLayer = true;
     const resolve = this.addInitializationStep();
     this.source.whenReady.then(metadata => {
@@ -149,6 +154,8 @@ class Potree2Layer extends PointCloudLayer {
       const root = new Potree2Node(0, 0, this);
       root.bbox = boundingBox;
       root.boundingSphere = boundingBox.getBoundingSphere(new THREE.Sphere());
+      this.minElevationRange = this.minElevationRange ?? metadata.boundingBox.min[2];
+      this.maxElevationRange = this.maxElevationRange ?? metadata.boundingBox.max[2];
       root.id = 'r';
       root.depth = 0;
       root.nodeType = 2;

package/lib/Layer/PotreeLayer.js

@@ -10,13 +10,13 @@ bboxMesh.geometry.boundingBox = box3;
  * @property {boolean} isPotreeLayer - Used to checkout whether this layer
  * is a PotreeLayer. Default is `true`. You should not change this, as it is
  * used internally for optimisation.
+ *
+ * @extends PointCloudLayer
  */
 class PotreeLayer extends PointCloudLayer {
   /**
    * Constructs a new instance of Potree layer.
    *
-   * @extends PointCloudLayer
-   *
    * @example
    * // Create a new point cloud layer
    * const points = new PotreeLayer('points',
@@ -37,12 +37,17 @@ class PotreeLayer extends PointCloudLayer {
    * contains three elements `name, protocol, extent`, these elements will be
    * available using `layer.name` or something else depending on the property
    * name. See the list of properties to know which one can be specified.
-   * @param {string} [config.crs=ESPG:4326] - The CRS of the {@link View} this
+   * @param {string} [config.crs='ESPG:4326'] - The CRS of the {@link View} this
    * layer will be attached to. This is used to determine the extent of this
    * layer.  Default to `EPSG:4326`.
    */
   constructor(id, config) {
     super(id, config);
+
+    /**
+     * @type {boolean}
+     * @readonly
+     */
     this.isPotreeLayer = true;
     const resolve = this.addInitializationStep();
     this.source.whenReady.then(cloud => {
@@ -57,6 +62,8 @@ class PotreeLayer extends PointCloudLayer {
       this.root = new PotreeNode(0, 0, this);
       this.root.bbox.min.set(cloud.boundingBox.lx, cloud.boundingBox.ly, cloud.boundingBox.lz);
       this.root.bbox.max.set(cloud.boundingBox.ux, cloud.boundingBox.uy, cloud.boundingBox.uz);
+      this.minElevationRange = this.minElevationRange ?? cloud.boundingBox.lz;
+      this.maxElevationRange = this.maxElevationRange ?? cloud.boundingBox.uz;
       this.extent = Extent.fromBox3(this.source.crs || 'EPSG:4326', this.root.bbox);
       return this.root.loadOctree().then(resolve);
     });

package/lib/Layer/RasterLayer.js

@@ -4,8 +4,18 @@ import textureConverter from "../Converter/textureConverter.js";
 import { CACHE_POLICIES } from "../Core/Scheduler/Cache.js";
 class RasterLayer extends Layer {
   constructor(id, config) {
-    config.cacheLifeTime = config.cacheLifeTime ?? CACHE_POLICIES.TEXTURE;
-    super(id, config);
+    const {
+      cacheLifeTime = CACHE_POLICIES.TEXTURE,
+      minFilter,
+      magFilter,
+      ...layerConfig
+    } = config;
+    super(id, {
+      ...layerConfig,
+      cacheLifeTime
+    });
+    this.minFilter = minFilter;
+    this.magFilter = magFilter;
   }
   convert(data, extentDestination) {
     return textureConverter.convert(data, extentDestination, this);